Merge pull request #4160 from Codeinwp/fix/submenu-observer

Add Sub Menu observer for Pro Modules

assets/apps/dashboard/src/dashboard.js

@@ -6,6 +6,7 @@ import { render } from '@wordpress/element';
 import actions from './store/actions';
 import reducer from './store/reducer';
 import selectors from './store/selectors';
+import './utils/module-observer';
 
 registerStore('neve-dashboard', {
 	reducer,

assets/apps/dashboard/src/utils/module-observer.js

@@ -0,0 +1,72 @@
+import { subscribe, select } from '@wordpress/data';
+
+/**
+ * Append New Sub Menu Page.
+ *
+ * The page will be added after the parent container of the linkSelector.
+ *
+ * @param {string} linkSelector The link selector to determine the position of the added submenu page.
+ * @param {Object} subMenuData The Sub Menu data to be added.
+ * @return {HTMLAnchorElement} Custom Layouts menu page.
+ */
+function appendNewSubMenuPage(linkSelector, subMenuData) {
+	// Create and configure a new anchor element
+	const link = document.createElement('a');
+	link.setAttribute('href', subMenuData?.linkSubMenu);
+	link.textContent = subMenuData?.labelSubMenu;
+
+	const linkToAppendAfter = document.querySelector(linkSelector);
+	if (!linkToAppendAfter) {
+		return;
+	}
+
+	// Append the after the Customizer menu item.
+	const listNode = linkToAppendAfter.parentNode;
+	const container = document.createElement('li');
+	container.appendChild(link);
+	listNode.parentNode.insertBefore(container, listNode.nextSibling);
+
+	return link;
+}
+
+/**
+ * Auto Sub Menu Pages on Admin Dashboard for Pro Modules.
+ */
+function autoHideModuleSubMenuPages() {
+	let clLinkElem = document.querySelector(
+		'.toplevel_page_neve-welcome a[href*="edit.php?post_type=neve_custom_layouts"]'
+	);
+
+	subscribe(() => {
+		/**
+		 * Auto hide Custom Layouts submenu page link based on module status.
+		 */
+		const isModuleEnabled =
+			select('neve-dashboard').getModuleStatus('custom_layouts');
+
+		if (isModuleEnabled && !clLinkElem) {
+			clLinkElem = appendNewSubMenuPage(
+				'.toplevel_page_neve-welcome .wp-submenu a[href*="customize.php"]',
+				window?.neveDash?.moduleObserver?.customLayouts
+			);
+		} else if (!isModuleEnabled && clLinkElem) {
+			clLinkElem.parentNode.remove();
+			clLinkElem = undefined;
+		}
+	});
+}
+
+function run() {
+	// Run only on the Neve Pro tab.
+	if (window.location.hash === '#pro') {
+		autoHideModuleSubMenuPages();
+	}
+}
+
+if (document.readyState !== 'loading') {
+	run();
+} else {
+	document.addEventListener('DOMContentLoaded', function () {
+		run();
+	});
+}

inc/admin/dashboard/main.php

@@ -391,6 +391,13 @@ private function get_localization() {
 			$data['isOtterProInstalled']           = $is_otter_installed;
 			$data['otterProInstall']               = $is_otter_installed ? esc_url( wp_nonce_url( admin_url( 'plugins.php?action=activate&plugin=otter-pro%2Fotter-pro.php&plugin_status=all&paged=1&s' ), 'activate-plugin_otter-pro/otter-pro.php' ) ) : esc_url( wp_nonce_url( admin_url( 'admin-post.php?action=install_otter_pro' ), 'install_otter_pro' ) );
 			$data['sparksInstallActivateEndpoint'] = $is_sparks_installed ? esc_url( wp_nonce_url( admin_url( 'plugins.php?action=activate&plugin=sparks-for-woocommerce%2Fsparks-for-woocommerce.php&plugin_status=all&paged=1&s' ), 'activate-plugin_sparks-for-woocommerce/sparks-for-woocommerce.php' ) ) : esc_url( wp_nonce_url( admin_url( 'admin-post.php?action=install_sparks' ), 'install_sparks' ) );
+			$data['moduleObserver']                = array(
+				'customLayouts' => array(
+					'labelSubMenu' => __( 'Custom Layouts', 'neve' ),
+					'linkSubMenu'  => 'edit.php?post_type=neve_custom_layouts',
+				),
+			);
+
 		}
 
 		if ( isset( $_GET['onboarding'] ) && $_GET['onboarding'] === 'yes' ) {