Show Active Products in Brand Plugin

inc/Admin.php

@@ -92,7 +92,7 @@ public static function subpages() {
 			? array(
 				'bluehost#/staging' => __( 'Staging', 'wp-plugin-bluehost' ),
 			)
-			: array();
+			: array();	
 		$help    = array(
 			'bluehost#/help' => __( 'Help', 'wp-plugin-bluehost' ),
 		);

src/app/pages/home/index.js

@@ -1,8 +1,14 @@
 import { Container, Page } from '@newfold/ui-component-library';
+import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
 import WebinarsBanner from 'App/components/webinars-banner';
 import AccountCard from './accountCard';
 import HelpCard from './helpCard';
 import WelcomeSection from './welcomeSection';
+import ProductSection from './productSection';
+
+const abTestShowMyProducts = NewfoldRuntime.hasCapability(
+	'abTestShowMyProducts'
+);
 
 const Home = () => {
 	return (
@@ -17,6 +23,7 @@ const Home = () => {
 					</div>
 				</Container.Block>
 			</Container>
+			{ abTestShowMyProducts && <ProductSection /> }
 		</Page>
 	);
 };

src/app/pages/home/productSection.js

@@ -0,0 +1,63 @@
+import { Container } from '@newfold/ui-component-library';
+import apiFetch from '@wordpress/api-fetch';
+import { useState, useEffect } from '@wordpress/element';
+import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
+import { default as NewfoldProducts } from '@newfold-labs/wp-module-my-products/components/product';
+import { isJarvis } from '../../util/helpers';
+
+// constants to pass to module
+const moduleConstants = {
+	text: {
+		error: __(
+			'Oops, there was an error loading products, please try again later.',
+			'bluehost-wordpress-plugin'
+		),
+		noProducts: __(
+			'Sorry, no products. Please, try again later.',
+			'bluehost-wordpress-plugin'
+		),
+		jarvisText: __(
+			'Please login to your account manager to see products.',
+			'bluehost-wordpress-plugin'
+		),
+	},
+};
+
+// methods to pass to module
+const moduleMethods = {
+	apiFetch,
+	useState,
+	useEffect,
+	NewfoldRuntime,
+	isJarvis,
+};
+
+const ProductSection = () => {
+	return (
+		<Container className="wppbh-products-section">
+			<Container.Header
+				title={ __( 'My Products', 'bluehost-wordpress-plugin' ) }
+			>
+				<p>
+					{ __(
+						'A list of products associated with your Bluehost hosting package. For more information, check out the ',
+						'bluehost-wordpress-plugin'
+					) }
+
+					<a href="https://www.bluehost.com/my-account/renewal-center">
+						{ __(
+							'Bluehost Account Manager',
+							'bluehost-wordpress-plugin'
+						) }
+					</a>
+				</p>
+			</Container.Header>
+			<NewfoldProducts
+				methods={ moduleMethods }
+				constants={ moduleConstants }
+			/>
+		</Container>
+	);
+};
+
+export default ProductSection;

tests/cypress/fixtures/products.json

@@ -0,0 +1,14 @@
+[
+    {
+        "autoRenewFlag": null,
+        "expirationDate": "9999.December.31 00:00:00",
+        "prodId": 7103940,
+        "prodName": "Free SSL"
+    },
+    {
+        "autoRenewFlag": null,
+        "expirationDate": "2025.March.26 00:00:00",
+        "prodId": 7102074,
+        "prodName": "SiteLock Lite"
+    }
+]

tests/cypress/integration/home.cy.js

@@ -1,5 +1,5 @@
 // <reference types="Cypress" />
-
+const productFixtures = require( '../fixtures/products.json' );
 describe( 'Home Page', function () {
 	let NewfoldRuntime;
 
@@ -129,4 +129,70 @@ describe( 'Home Page', function () {
 		cy.reload();
 		cy.get( '.wppbh-webinars-banner-section' ).should( 'not.exist' );
 	} );
+
+	it( 'My Products Section exists', () => {
+		if ( NewfoldRuntime.capabilities.abTestShowMyProducts ) {
+			cy.get( '.wppbh-products-section' )
+				.contains( 'My Products' )
+				.scrollIntoView()
+				.should( 'be.visible' );
+		} else {
+			cy.get( '.wppbh-products-section' ).should( 'not.exist' );
+		}
+	} );
+
+	it( 'Products Section Renders Correctly', () => {
+		if ( NewfoldRuntime.capabilities.abTestShowMyProducts ) {
+			cy.intercept(
+				'GET',
+				'/index.php?rest_route=%2Fnewfold-my-products%2Fv1%2Fproducts&_locale=user',
+				productFixtures
+			);
+			cy.reload();
+			// Verify the table contains the correct product data
+			cy.get( '.wppbh-products-data-section' ).within( () => {
+				cy.contains( 'Products & Services' ).should( 'be.visible' );
+				cy.contains( 'Free SSL' ).should( 'be.visible' );
+				cy.contains( 'SiteLock Lite' ).should( 'be.visible' );
+			} );
+		} else {
+			cy.get( '.wppbh-products-section' ).should( 'not.exist' );
+		}
+	} );
+
+	it( 'Products Section Renders Correctly for No products response', () => {
+		if ( NewfoldRuntime.capabilities.abTestShowMyProducts ) {
+			cy.intercept(
+				'GET',
+				'/index.php?rest_route=%2Fnewfold-my-products%2Fv1%2Fproducts&_locale=user',
+				[]
+			);
+			cy.reload();
+			cy.get( '.wppbh-products-section' )
+				.contains( 'Sorry, no products. Please, try again later.' )
+				.scrollIntoView()
+				.should( 'be.visible' );
+		} else {
+			cy.get( '.wppbh-products-section' ).should( 'not.exist' );
+		}
+	} );
+
+	it( 'Products Section Renders Correctly for Empty response', () => {
+		if ( NewfoldRuntime.capabilities.abTestShowMyProducts ) {
+			cy.intercept(
+				'GET',
+				'/index.php?rest_route=%2Fnewfold-my-products%2Fv1%2Fproducts&_locale=user',
+				{}
+			);
+			cy.reload();
+			cy.get( '.wppbh-products-section' )
+				.contains(
+					'Oops, there was an error loading products, please try again later.'
+				)
+				.scrollIntoView()
+				.should( 'be.visible' );
+		} else {
+			cy.get( '.wppbh-products-section' ).should( 'not.exist' );
+		}
+	} );
 } );