Merge pull request #390 from newfold-labs/add/help-center

Add/help center

bootstrap.php

@@ -144,7 +144,6 @@ function() {
 
 // Required files
 require HOSTGATOR_PLUGIN_DIR . '/inc/Admin.php';
-require HOSTGATOR_PLUGIN_DIR . '/inc/AdminBar.php';
 require HOSTGATOR_PLUGIN_DIR . '/inc/base.php';
 require HOSTGATOR_PLUGIN_DIR . '/inc/jetpack.php';
 require HOSTGATOR_PLUGIN_DIR . '/inc/LoginRedirect.php';
@@ -159,5 +158,3 @@ function() {
 if ( is_admin() ) {
 	new Admin();
 }
-
-AdminBar::init();

composer.json

@@ -60,6 +60,7 @@
         "newfold-labs/wp-module-deactivation": "^1.0.3",
         "newfold-labs/wp-module-ecommerce": "^1.3.12",
         "newfold-labs/wp-module-global-ctb": "^1.0.9",
+        "newfold-labs/wp-module-help-center": "^1.0.22",
         "newfold-labs/wp-module-loader": "^1.0.10",
         "newfold-labs/wp-module-marketplace": "^2.2.0",
         "newfold-labs/wp-module-notifications": "^1.1.6",

inc/Admin.php

@@ -190,18 +190,21 @@ public static function page() {
 			$snappy,
 			0
 		);
-
-		foreach ( self::subpages() as $route => $title ) {
-			\add_submenu_page(
-				'hostgator',
-				$title,
-				$title,
-				'manage_options',
-				$route,
-				array( __CLASS__, 'render' )
-			);
+
+		// If we're outside of App, add subpages to App menu
+		if ( false === ( isset( $_GET['page'] ) && strpos( filter_input( INPUT_GET, 'page', FILTER_UNSAFE_RAW ), 'hostgator' ) >= 0 ) ) { // phpcs:ignore
+				foreach ( self::subpages() as $route => $title ) {
+					\add_submenu_page(
+						'hostgator',
+						$title,
+						$title,
+						'manage_options',
+						$route,
+						array( __CLASS__, 'render' )
+					);
+				}
+			}
 		}
-	}
 
 	/**
 	 * Render DOM element for React to load onto.

src/app/components/app-nav/index.js

@@ -4,6 +4,7 @@ import { Modal, SidebarNavigation } from "@newfold/ui-component-library"
 import { NavLink, useLocation } from 'react-router-dom';
 import Logo from "./logo";
 import { topRoutes, utilityRoutes } from "../../data/routes";
+import { handleHelpLinksClick } from '../../util/helpers';
 import { Bars3Icon } from "@heroicons/react/24/outline";
 
 
@@ -188,6 +189,7 @@ export const MobileNav = () => {
 
 export const AppNav = () => {
 	const isLargeViewport = useViewportMatch('medium');
+	handleHelpLinksClick();
 
 	return (
 		<>

src/app/data/routes.js

@@ -19,7 +19,12 @@ import Help from '../pages/help';
 import Store from '../pages/ecommerce/page';
 import { getMarketplaceSubnavRoutes } from '../../../vendor/newfold-labs/wp-module-marketplace/components/marketplaceSubnav';
 
-const addPartialMatch = (prefix, path) => prefix === path ? `${prefix}/*` : path; 
+const addPartialMatch = (prefix, path) => prefix === path ? `${prefix}/*` : path;
+
+const HelpCenterAI = ( e ) => {
+	e.preventDefault();
+	window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp();
+};
 
 export const AppRoutes = () => {
 	return (
@@ -124,6 +129,9 @@ export const routes = [
 		title: __('Help', 'wp-plugin-hostgator'),
 		Component: Help,
 		Icon: QuestionMarkCircleIcon,
+		action: NewfoldRuntime.hasCapability( 'canAccessHelpCenter' )
+			? HelpCenterAI
+			: false,
 	},
 ];
 

src/app/index.js

@@ -14,7 +14,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { store as noticesStore } from '@wordpress/notices';
-import { setActiveSubnav } from './util/helpers';
 import { kebabCase, filter } from 'lodash';
 import { AppNav } from './components/app-nav';
 import { SiteInfoBar } from './components/site-info';
@@ -52,7 +51,6 @@ const handlePageLoad = () => {
 	const location = useLocation();
 	const routeContents = document.querySelector('.hgwp-app-body-inner');
 	useEffect(() => {
-		setActiveSubnav(location.pathname);
 		window.scrollTo(0, 0);
 		if (routeContents) {
 			routeContents.focus({ preventScroll: true });

src/app/pages/help/index.js

@@ -1,5 +1,9 @@
 import help from '../../data/help';
-import { getLinkPerRegion, supportsLinkPerRegion } from '../../util/helpers';
+import {
+	getLinkPerRegion,
+	supportsLinkPerRegion,
+	handleHelpLinksClick
+} from '../../util/helpers';
 import { 
 	Button,
 	Card,
@@ -36,6 +40,7 @@ const HelpCard = ({ item }) => {
 }
 
 const Help = () => {
+	handleHelpLinksClick();
 	const renderHelpCards = () => {
 		const helpItems = help;
 

src/app/util/helpers.js

@@ -5,50 +5,6 @@ import { NewfoldRuntime } from "@newfold-labs/wp-module-runtime";
 import region from '../data/region';
 
 let lastNoticeId;
-const HG_NAV = document.querySelector('#toplevel_page_hostgator .wp-submenu');
-/**
- * Set active nav in wp admin sub pages.
- *
- * @param  path
- */
-export const setActiveSubnav = (path) => {
-	if (HG_NAV) {
-		const HG_NAV_LIS = HG_NAV.children;
-		if (HG_NAV_LIS) {
-			for (let i = 0; i < HG_NAV_LIS.length; i++) {
-				// get all children li elements
-				const link = HG_NAV_LIS[i].children[0];
-				if (link) {
-					const href = link.getAttribute('href');
-					// check each child a href for match with path
-					if (
-						href.endsWith(path) || // match
-						(path.includes('/marketplace/') &&
-							href.endsWith('marketplace')) ||
-						(path === '/' && href.endsWith('home'))
-					) {
-						// highlight home subnav for root page
-						// update li class when match
-						HG_NAV_LIS[i].classList.add('current');
-					} else {
-						HG_NAV_LIS[i].classList.remove('current');
-					}
-					// highlight our home nav for root level access
-					const HG_HOME_NAV = document.querySelector(
-						'.hgwp-nav a[href="#/home"]'
-					);
-					if (HG_HOME_NAV) {
-						if (path === '/' || path === '/home') {
-							HG_HOME_NAV.classList.add('active');
-						} else {
-							HG_HOME_NAV.classList.remove('active');
-						}
-					}
-				}
-			}
-		}
-	}
-};
 
 /**
  * Wrapper method to dispatch snackbar notice
@@ -227,3 +183,32 @@ export const supportsLinkPerRegion = (link_name = 'main') => {
 	params.utm_medium = 'hostgator_plugin';
 	return addQueryArgs(url, params);
 };
+
+/**
+ * Handles help center links click, will open help center slide if user has access
+ * or navigate to help page if user doesn't have access
+ */
+export const handleHelpLinksClick = () => {
+	if (
+		NewfoldRuntime.hasCapability( 'canAccessHelpCenter' ) &&
+		window.newfoldEmbeddedHelp &&
+		! window.newfoldEmbeddedHelp.hasListeners
+	) {
+		// add listener to all help links
+		const helpLinks = document.querySelectorAll( '[href*="#/help"]' );
+		if ( helpLinks ) {
+			helpLinks.forEach( ( el ) =>
+				el.addEventListener( 'click', ( e ) => {
+					e.preventDefault();
+					window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp();
+				} )
+			);
+			window.newfoldEmbeddedHelp.hasListeners = true;
+		}
+
+		// if on help page already, open help center
+		if( window.location.hash === '#/help') {
+			window.newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp();
+		}
+	}
+};