Merge pull request #33 from newfold-labs/enhance/fix-modal-bugs

Enhance/fix modal bugs
newfold-labs · Oct 21, 2024 · 8a0f103 · 8a0f103
2 parents bdedba9 + ac5c53b
commit 8a0f103
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 57 deletions.
diff --git a/includes/WPAdmin/Listeners/DataAttrListener.php b/includes/WPAdmin/Listeners/DataAttrListener.php
diff --git a/includes/WPAdmin/Listeners/InstallerListener.php b/includes/WPAdmin/Listeners/InstallerListener.php
@@ -15,18 +15,53 @@ class InstallerListener {
 	 */
 	public function __construct() {
 		// Hook to enqueue installer scripts
-		add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_installer_script' ) );
+		add_action( 'newfold/installer/enqueue_scripts', array( $this, 'enqueue_installer_scripts' ) );
 
 		// Hook to listen to premium plugin activation
 		$this->listen_for_premium_plugin_activation();
 	}
 
+	/**
+	 * Enqueues all the installer scripts that are required.
+	 * The Data Attribute Listener Script
+	 * The Modal UI with React that installs the plugin
+	 *
+	 * @return void
+	 */
+	public function enqueue_installer_scripts() {
+		$this->enqueue_data_attr_listener();
+		$this->enqueue_installer_react_script();
+	}
+
+	/**
+	 * Enqueues the data-* attribute listener script.
+	 *
+	 * @return void
+	 */
+	public function enqueue_data_attr_listener() {
+		$asset_file = NFD_INSTALLER_BUILD_DIR . '/dataAttrListener.asset.php';
+
+		if ( is_readable( $asset_file ) ) {
+			$asset = include $asset_file;
+
+			wp_register_script(
+				'nfd-installer-data-attr-listener',
+				NFD_INSTALLER_BUILD_URL . '/dataAttrListener.js',
+				array_merge( $asset['dependencies'], array() ),
+				$asset['version'],
+				true
+			);
+
+			wp_enqueue_script( 'nfd-installer-data-attr-listener' );
+		}
+	}
+
 	/**
 	 * Enqueues the installer script.
 	 *
 	 * @return void
 	 */
-	public function enqueue_installer_script() {
+	public function enqueue_installer_react_script() {
 		$asset_file = NFD_INSTALLER_BUILD_DIR . '/installer.asset.php';
 
 		if ( is_readable( $asset_file ) ) {

diff --git a/includes/WPAdmin/WPAdmin.php b/includes/WPAdmin/WPAdmin.php
@@ -2,7 +2,6 @@
 
 namespace NewfoldLabs\WP\Module\Installer\WPAdmin;
 
-use NewfoldLabs\WP\Module\Installer\WPAdmin\Listeners\DataAttrListener;
 use NewfoldLabs\WP\Module\Installer\WPAdmin\Listeners\InstallerListener;
 
 /**
@@ -13,7 +12,6 @@ class WPAdmin {
 	 * Constructor for the WPAdmin class.
 	 */
 	public function __construct() {
-		new DataAttrListener();
 		new InstallerListener();
 	}
 }
diff --git a/src/Installer/components/App/index.jsx b/src/Installer/components/App/index.jsx
@@ -6,19 +6,22 @@ import Modal from '../Modal';
 
 const App = () => {
 	const [ action, setAction ] = useState();
+	const [ statesReady, setStatesReady ] = useState( false );
 	const [ pluginName, setPluginName ] = useState();
 	const [ pluginDownloadUrl, setPluginDownloadUrl ] = useState();
 	const [ pluginProvider, setPluginProvider ] = useState();
 	const [ pluginSlug, setPluginSlug ] = useState();
 	const [ redirectUrl, setRedirectUrl ] = useState();
 
 	const setData = ( e ) => {
+		setStatesReady( false );
 		setAction( e.detail.action );
 		setPluginName( e.detail.pluginName );
 		setPluginDownloadUrl( e.detail.pluginDownloadUrl );
 		setPluginProvider( e.detail.pluginProvider );
 		setPluginSlug( e.detail.pluginSlug );
 		setRedirectUrl( e.detail.redirectUrl );
+		setStatesReady( true );
 	};
 
 	useEffect( () => {
@@ -33,7 +36,7 @@ const App = () => {
 
 	return (
 		<div className="nfd-installer-app">
-			{ ( pluginSlug || pluginDownloadUrl ) && (
+			{ statesReady && (
 				<Modal
 					action={ action }
 					pluginName={ pluginName }

diff --git a/src/Installer/components/Modal/index.jsx b/src/Installer/components/Modal/index.jsx
@@ -134,7 +134,8 @@ const Modal = ( {
 			'wp-module-onboarding'
 		),
 		{
-			a: <a href={ helpLink } />,
+			// eslint-disable-next-line jsx-a11y/anchor-has-content
+			a: <a href={ helpLink } onClick={ () => showModal( false ) } />,
 		}
 	);