Update/marketplace and tests

composer.json

@@ -53,7 +53,7 @@
         "i18n-pot": "vendor/bin/wp i18n make-pot . ./languages/wp-plugin-hostgator.pot --headers='{\"Report-Msgid-Bugs-To\":\"https://github.com/newfold-labs/wp-plugin-hostgator/issues\",\"POT-Creation-Date\":\"2023-01-11T20:21:44+00:00\"}' --exclude=assets,tests,src",
         "i18n-po": "vendor/bin/wp i18n update-po ./languages/wp-plugin-hostgator.pot ./languages",
         "i18n-mo": "vendor/bin/wp i18n make-mo ./languages",
-        "i18n-json": "vendor/bin/wp i18n make-json ./languages --no-purge --pretty-print",
+        "i18n-json": "rm languages/*.json && vendor/bin/wp i18n make-json ./languages --no-purge --pretty-print",
         "i18n": [
             "@i18n-pot",
             "@i18n-po",
@@ -83,7 +83,7 @@
         "newfold-labs/wp-module-global-ctb": "^1.0.13",
         "newfold-labs/wp-module-help-center": "^2.0.0",
         "newfold-labs/wp-module-loader": "^1.0.10",
-        "newfold-labs/wp-module-marketplace": "^2.2.4",
+        "newfold-labs/wp-module-marketplace": "^2.3.1",
         "newfold-labs/wp-module-migration": "^1.0.7",
         "newfold-labs/wp-module-notifications": "^1.3.0",
         "newfold-labs/wp-module-onboarding": "^2.3.4",

languages/wp-plugin-hostgator-es_MX-697b1973f21debd6e26db6521cfae71f.json

@@ -629,6 +629,12 @@
             ],
             "Wonder Blocks provides a library of customizable block patterns and page templates.": [
                 ""
+            ],
+            "Oops! Something Went Wrong": [
+                ""
+            ],
+            "An error occurred while loading the content. Please try again later.": [
+                ""
             ]
         }
     }

languages/wp-plugin-hostgator-es_MX.po

@@ -994,3 +994,11 @@ msgstr ""
 #: build/2.9.3/index.js:1
 msgid "Wonder Blocks provides a library of customizable block patterns and page templates."
 msgstr ""
+
+#: build/2.9.3/index.js:1
+msgid "Oops! Something Went Wrong"
+msgstr ""
+
+#: build/2.9.3/index.js:1
+msgid "An error occurred while loading the content. Please try again later."
+msgstr ""

languages/wp-plugin-hostgator-pt_BR-697b1973f21debd6e26db6521cfae71f.json

@@ -629,6 +629,12 @@
             ],
             "Wonder Blocks provides a library of customizable block patterns and page templates.": [
                 ""
+            ],
+            "Oops! Something Went Wrong": [
+                ""
+            ],
+            "An error occurred while loading the content. Please try again later.": [
+                ""
             ]
         }
     }

languages/wp-plugin-hostgator-pt_BR.po

@@ -994,3 +994,11 @@ msgstr ""
 #: build/2.9.3/index.js:1
 msgid "Wonder Blocks provides a library of customizable block patterns and page templates."
 msgstr ""
+
+#: build/2.9.3/index.js:1
+msgid "Oops! Something Went Wrong"
+msgstr ""
+
+#: build/2.9.3/index.js:1
+msgid "An error occurred while loading the content. Please try again later."
+msgstr ""

languages/wp-plugin-hostgator.pot

@@ -460,6 +460,14 @@ msgstr ""
 msgid "Load More"
 msgstr ""
 
+#: build/2.9.3/index.js:1
+msgid "Oops! Something Went Wrong"
+msgstr ""
+
+#: build/2.9.3/index.js:1
+msgid "An error occurred while loading the content. Please try again later."
+msgstr ""
+
 #: build/2.9.3/index.js:1
 msgid "Products"
 msgstr ""

src/app/pages/marketplace/index.js

@@ -1,11 +1,11 @@
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useEffect } from '@wordpress/element';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 import classnames from 'classnames';
 import { Container, Page } from '@newfold/ui-component-library';
 import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
 // component sourced from marketplace module
-import { default as NewfoldMarketplace } from '../../../../vendor/newfold-labs/wp-module-marketplace/components/marketplace/';
+import { default as NewfoldMarketplace } from '@modules/wp-module-marketplace/components/';
 
 const MarketplacePage = () => {
 	// constants to pass to module
@@ -25,6 +25,18 @@ const MarketplacePage = () => {
 				'wp-plugin-hostgator'
 			),
 			loadMore: __( 'Load More', 'wp-plugin-hostgator' ),
+			productPage: {
+				error: {
+					title: __(
+						'Oops! Something Went Wrong',
+						'wp-plugin-hostgator'
+					),
+					description: __(
+						'An error occurred while loading the content. Please try again later.',
+						'wp-plugin-hostgator'
+					),
+				},
+			},
 		},
 	};
 
@@ -35,12 +47,14 @@ const MarketplacePage = () => {
 		useState,
 		useEffect,
 		useLocation,
+		useMatch,
+		useNavigate,
 		NewfoldRuntime,
 	};
 
 	return (
 		<Page className={ 'hgwp-app-marketplace-page' }>
-			<Container className={ 'hgwp-app-marketplace-container' }>
+			<Container className={ 'hgwp-app-marketplace-container nfd-overflow-clip' }>
 				<NewfoldMarketplace
 					methods={ moduleMethods }
 					constants={ moduleConstants }

tests/cypress/integration/home.cy.js

@@ -1,51 +1,53 @@
 // <reference types="Cypress" />
 
 describe('Home Page', function () {
+	const appId = Cypress.env( 'appId' );
+	const pluginId = Cypress.env( 'pluginId' );
 
 	before(() => {
-		cy.visit('/wp-admin/admin.php?page=hostgator#/home');
+		cy.visit('/wp-admin/admin.php?page=' + pluginId + '#/home');
 		cy.injectAxe();
 	});
 
 	it('Site Info Exists', () => {
 		cy.window().then((win) => {
 			const siteTitle = win.NewfoldRuntime.siteTitle;
 
-			cy.get('.hgwp-app-site-info').contains('h3', siteTitle)
+			cy.get('.' + appId + '-app-site-info').contains('h3', siteTitle)
 			.scrollIntoView()
 			.should('be.visible');
 		  })
 	});
 
 	it('Is Accessible', () => {
 		cy.wait(500);
-		cy.checkA11y('.hgwp-app-body');
+		cy.checkA11y('.' + appId + '-app-body');
 	});
 
 	it('Maintenance Mode Section Exists', () => {
 		cy
-			.get('.hgwp-app-home-coming-soon').contains('h3', 'Site Status')
+			.get('.' + appId + '-app-home-coming-soon').contains('h3', 'Site Status')
 			.scrollIntoView()
 			.should('be.visible');
 	});
 
 	it('Website Content Section Exists', () => {
 		cy
-			.get('.hgwp-app-home-content').contains('h3', 'Website Content')
+			.get('.' + appId + '-app-home-content').contains('h3', 'Website Content')
 			.scrollIntoView()
 			.should('be.visible');
 	});
 
 	it('Settings and Performance Section Exists', () => {
 		cy
-			.get('.hgwp-app-home-settings').contains('h3', 'Settings and Performance')
+			.get('.' + appId + '-app-home-settings').contains('h3', 'Settings and Performance')
 			.scrollIntoView()
 			.should('be.visible');
 	});
 
 	it('Web Hosting Section Exists', () => {
 		cy
-			.get('.hgwp-app-home-hosting').contains('h3', 'Web Hosting')
+			.get('.' + appId + '-app-home-hosting').contains('h3', 'Web Hosting')
 			.scrollIntoView()
 			.should('be.visible');
 	});

tests/cypress/integration/navigation.cy.js

@@ -1,103 +1,104 @@
 // <reference types="Cypress" />
 
 describe('Navigation', function () {
+	const appId = Cypress.env( 'appId' );
+	const pluginId = Cypress.env( 'pluginId' )
 
 	before(() => {
 		cy.exec( 'npx wp-env run cli wp transient delete newfold_marketplace' );
-		cy.visit('/wp-admin/admin.php?page=hostgator');
-		cy.injectAxe();
+		cy.visit('/wp-admin/admin.php?page=' + pluginId );
 	});
 
 	it( "Admin submenu shouldn't exist inside app", () => {
-		cy.get( '#adminmenu #toplevel_page_hostgator ul.wp-submenu' ).should(
+		cy.get( '#adminmenu #toplevel_page_' + pluginId + ' ul.wp-submenu' ).should(
 			'not.exist'
 		);
 	} );
 
 	it('Logo Links to home', () => {
-		cy.get('.hgwp-logo-wrap').click();
+		cy.get('.' + appId + '-logo-wrap').click();
 		cy.wait(500);
 		cy.hash().should('eq', '#/home');
 	});
 
 	// test main nav
 	it('Main nav links properly navigates', () => {
 		cy
-			.get('.hgwp-app-navitem-Marketplace').
+			.get('.' + appId + '-app-navitem-Marketplace').
 			should('not.have.class', 'active');
-		cy.get('.hgwp-app-navitem-Marketplace').click();
+		cy.get('.' + appId + '-app-navitem-Marketplace').click();
 		cy.wait(500);
 		cy.hash().should('eq', '#/marketplace');
 		cy
-			.get('.hgwp-app-navitem-Marketplace')
+			.get('.' + appId + '-app-navitem-Marketplace')
 			.should('have.class', 'active');
 
-		cy.get('.hgwp-app-navitem-Performance').click();
+		cy.get('.' + appId + '-app-navitem-Performance').click();
 		cy.wait(500);
 		cy.hash().should('eq', '#/performance');
 		cy
-			.get('.hgwp-app-navitem-Performance')
+			.get('.' + appId + '-app-navitem-Performance')
 			.should('have.class', 'active');
 		cy
-			.get('.hgwp-app-navitem-Marketplace')
+			.get('.' + appId + '-app-navitem-Marketplace')
 			.should('not.have.class', 'active');
 
-		cy.get('.hgwp-app-navitem-Settings').click();
+		cy.get('.' + appId + '-app-navitem-Settings').click();
 		cy.wait(500);
 		cy.hash().should('eq', '#/settings');
 	});
 
 	it('Subnav links properly navigates', () => {
 		cy
-			.get('.hgwp-app-navitem-Marketplace')
+			.get('.' + appId + '-app-navitem-Marketplace')
 			.scrollIntoView()
 			.should('not.have.class', 'active');
-		cy.get('.hgwp-app-navitem-Marketplace').click();
+		cy.get('.' + appId + '-app-navitem-Marketplace').click();
 
 		cy.wait(500);
 		cy.hash().should('eq', '#/marketplace');
 		cy
-			.get('.hgwp-app-navitem-Marketplace')
+			.get('.' + appId + '-app-navitem-Marketplace')
 			.should('have.class', 'active');
 
-			cy.get('.hgwp-app-subnavitem-Services').click();
+			cy.get('.' + appId + '-app-subnavitem-Services').click();
 			cy.wait(500);
 			cy.hash().should('eq', '#/marketplace/services');
 			cy
-				.get('.hgwp-app-subnavitem-Services')
+				.get('.' + appId + '-app-subnavitem-Services')
 				.should('have.class', 'active');
 			cy
-				.get('.hgwp-app-navitem-Marketplace')
+				.get('.' + appId + '-app-navitem-Marketplace')
 				.should('have.class', 'active');
 
 
-		cy.get('.hgwp-app-subnavitem-SEO').click();
+		cy.get('.' + appId + '-app-subnavitem-SEO').click();
 		cy.wait(500);
 		cy.hash().should('eq', '#/marketplace/seo');
 		cy
-			.get('.hgwp-app-subnavitem-SEO')
+			.get('.' + appId + '-app-subnavitem-SEO')
 			.should('have.class', 'active');
 		cy
-			.get('.hgwp-app-subnavitem-Services')
+			.get('.' + appId + '-app-subnavitem-Services')
 			.should('not.have.class', 'active');
 		cy
-			.get('.hgwp-app-navitem-Marketplace')
+			.get('.' + appId + '-app-navitem-Marketplace')
 			.should('have.class', 'active');
 
-		cy.get('.hgwp-app-navitem-Performance').click();
+		cy.get('.' + appId + '-app-navitem-Performance').click();
 			cy.wait(500);
 		cy
-			.get('.hgwp-app-subnavitem-Services')
+			.get('.' + appId + '-app-subnavitem-Services')
 			.should('not.have.class', 'active');
 		cy
-			.get('.hgwp-app-subnavitem-SEO')
+			.get('.' + appId + '-app-subnavitem-SEO')
 			.should('not.have.class', 'active');
 		cy
-			.get('.hgwp-app-navitem-Marketplace')
+			.get('.' + appId + '-app-navitem-Marketplace')
 			.should('not.have.class', 'active');
 	});
 
-	// utility nav is no more, leaving this in place un case we bring it back anytime soon.
+	// utility nav is no more, leaving this in place in case we bring it back anytime soon.
 	it.skip('Utility nav links properly navigates', () => {
 		cy
 			.get('.utility-link-Performance')