Merge pull request #1321 from bluehost/PRESS0-1723

WP Admin | Branded Plugin | Solutions Entitlements Page

src/app/data/routes.js

@@ -6,6 +6,7 @@ import {
 	AdjustmentsHorizontalIcon,
 	BuildingStorefrontIcon,
 	DocumentDuplicateIcon,
+	PuzzlePieceIcon,
 } from '@heroicons/react/24/outline';
 import { ReactComponent as HelpIcon } from '../components/icons/HelpIcon.svg';
 import { NewfoldRuntime } from '@newfold-labs/wp-module-runtime';
@@ -15,6 +16,7 @@ import Home from '../pages/home';
 import PagesAndPosts from '../pages/pages-and-posts';
 import Store from '../pages/ecommerce/page';
 import Marketplace from '../pages/marketplace';
+import WPSolution from '../pages/wpsolutions';
 import Performance from '../pages/performance';
 import Settings from '../pages/settings';
 import Staging from '../pages/staging';
@@ -69,6 +71,7 @@ const topRoutePaths = [
 	'/pages-and-posts',
 	'/store',
 	'/marketplace',
+	'/my_plugins_and_tools',	
 	'/performance',
 	'/settings',
 	'/staging',
@@ -135,6 +138,13 @@ export const routes = [
 		subRoutes: await getMarketplaceSubnavRoutes(),
 		condition: true,
 	},
+	{
+		name: '/my_plugins_and_tools',
+		title: __( 'My Plugins & Tools', 'wp-plugin-bluehost' ),
+		Component: WPSolution,
+		Icon: PuzzlePieceIcon,
+		condition: true,
+	},	
 	{
 		name: '/performance',
 		title: __( 'Performance', 'wp-plugin-bluehost' ),

src/app/pages/wpsolutions/index.js

@@ -0,0 +1,21 @@
+import './styles.scss';
+import { Page } from '@newfold/ui-component-library';
+import { NewfoldSolutions } from '@newfold-labs/wp-module-solutions';
+import '@newfold-labs/wp-module-ecommerce/bluehost.css';
+import { useNavigate } from 'react-router-dom';
+import { useNotification } from '../../components/notifications';
+
+const WPSolutions = () => {
+
+	const navigate = useNavigate();
+	const notify = useNotification();
+	const wpModules = { navigate, notify };
+
+	return (
+		<Page>
+			<NewfoldSolutions wpModules={ wpModules } />
+		</Page>
+	);
+};
+
+export default WPSolutions;

src/app/pages/wpsolutions/style.scss

@@ -0,0 +1,12 @@
+.nfd-root {
+    .nfd-modal.no-overlay {
+      .nfd-modal__overlay {
+        display: none;
+      }
+    }
+    .nfd-feature-upsell.hide-html {
+      .nfd-flex {
+        background-color: rgb(255 255 255 / 0.5);
+      }
+    }
+}