Code

package.json

@@ -9,11 +9,12 @@
     "email": "[email protected]"
   },
   "dependencies": {
-    "@wordpress/element": "^6.1.0"
+    "@wordpress/base-styles": "^4.49.0",
+    "@wordpress/element": "^6.9.0"
   },
   "devDependencies": {
-    "@wordpress/scripts": "^26.10.0",
-    "webpack-merge": "^5.8.0"
+    "@wordpress/scripts": "^26.19.0",
+    "webpack-merge": "^5.10.0"
   },
   "scripts": {
     "build": "wp-scripts build ./src/Installer/installer.js ./src/Scripts/dataAttrListener.js",

src/Installer/components/App/index.jsx

@@ -1,9 +1,52 @@
+// External Imports
+import { useState, useEffect } from '@wordpress/element';
+
+// Internal Imports
 import Modal from '../Modal';
+import { INSTALLER_DIV } from '../../constants';
 
 const App = () => {
+	const [ pluginName, setPluginName ] = useState();
+	const [ pluginSlug, setPluginSlug ] = useState();
+	const [ pluginURL, setPluginURL ] = useState();
+	const [ pluginActivate, setPluginActivate ] = useState();
+
+	useEffect( () => {
+		// Add an event listener to get the changes
+		window.addEventListener( 'installerParamsSet', getData );
+
+		// Cleanup the event listener
+		return () => {
+			window.removeEventListener( 'installerParamsSet', getData );
+		};
+	}, [] );
+
+	const getData = () => {
+		const element = document.getElementById( INSTALLER_DIV );
+		setPluginName(
+			element.getAttribute( 'nfd-installer-app__plugin--name' )
+		);
+		setPluginSlug(
+			element.getAttribute( 'nfd-installer-app__plugin--slug' )
+		);
+		setPluginURL(
+			element.getAttribute( 'nfd-installer-app__plugin--url' )
+		);
+		setPluginActivate(
+			element.getAttribute( 'nfd-installer-app__plugin--activate' )
+		);
+	};
+
 	return (
 		<div className="nfd-installer-app">
-			<Modal />
+			{ pluginSlug && (
+				<Modal
+					pluginName={ pluginName }
+					pluginSlug={ pluginSlug }
+					pluginURL={ pluginURL }
+					pluginActivate={ pluginActivate }
+				/>
+			) }
 		</div>
 	);
 };

src/Installer/components/Modal/index.jsx

@@ -1,10 +1,86 @@
-import { __ } from '@wordpress/i18n';
+// External Imports
+import apiFetch from '@wordpress/api-fetch';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef, useState, useEffect } from '@wordpress/element';
+
+// Internal Imports
 import { loadingInstaller } from '../../static/icons/index';
+import {
+	INSTALLER_DIV,
+	installerAPI,
+	pluginInstallHash,
+} from '../../constants';
+
+const Modal = ( { pluginName, pluginSlug, pluginURL, pluginActivate } ) => {
+	/**
+	 * Represents the status of the plugin installation process.
+	 *
+	 * @typedef {('unknown'|'installing'|'failed'|'completed')} PluginStatus
+	 *
+	 * @property {'unknown'}    unknown    - The plugin installation has not started yet.
+	 * @property {'installing'} installing - The plugin installation process has started.
+	 * @property {'failed'}     failed     - The plugin installation process failed.
+	 * @property {'completed'}  completed  - The plugin installation process is complete.
+	 */
+	const [ pluginStatus, setPluginStatus ] = useState( 'unknown' );
+	const modalRef = useRef( null );
+
+	useEffect( () => {
+		installPremiumPlugin();
+		const handleKeyDown = ( event ) => {
+			if ( event.key === 'Escape' ) {
+				closeModal();
+			}
+		};
+
+		document.addEventListener( 'keydown', handleKeyDown );
+		document.addEventListener( 'mousedown', handleClickOutside );
+
+		return () => {
+			document.removeEventListener( 'keydown', handleKeyDown );
+			document.removeEventListener( 'mousedown', handleClickOutside );
+		};
+	}, [] );
+
+	const handleClickOutside = ( event ) => {
+		if ( modalRef.current && ! modalRef.current.contains( event.target ) ) {
+			closeModal();
+		}
+	};
+
+	const closeModal = () => {
+		if ( 'failed' === pluginStatus || 'completed' === pluginStatus ) {
+			document.getElementById( INSTALLER_DIV ).style.display = 'none';
+		}
+	};
+
+	const installPremiumPlugin = async () => {
+		setPluginStatus( 'installing' );
+		try {
+			await apiFetch( {
+				url: installerAPI,
+				method: 'POST',
+				headers: {
+					'X-NFD-INSTALLER': pluginInstallHash,
+				},
+				data: {
+					activate: pluginActivate === 'true' ? true : false,
+					queue: false,
+					priority: 0,
+					premium: true,
+					plugin: pluginSlug,
+				},
+			} );
+			setPluginStatus( 'completed' );
+			window.open( pluginURL, '_self' );
+		} catch ( e ) {
+			setPluginStatus( 'failed' );
+		}
+	};
 
-const Modal = ( {} ) => {
 	return (
 		<div className="nfd-installer-modal">
-			<div className="nfd-installer-modal__content">
+			<div ref={ modalRef } className="nfd-installer-modal__content">
 				<div className="nfd-installer-modal__content-heading">
 					{ __(
 						'Hold on while we get things setup for you!',
@@ -14,16 +90,32 @@ const Modal = ( {} ) => {
 				<div className="nfd-installer-modal__content-section">
 					<img
 						src={ loadingInstaller }
-						alt="Man carrying items"
+						alt={ __( 'Loading Vector.', 'wp-module-onboarding' ) }
 						className="nfd-installer-modal__content-image"
 					/>
-					<div className="nfd-installer-modal__content-subheading">
-						{ __(
-							'Activating the plugin_name…',
-							'wp-module-installer'
-						) }
-					</div>
-					<div className="nfd-installer-modal__loader"></div>
+					{ pluginStatus === 'installing' && (
+						<>
+							<div className="nfd-installer-modal__content-subheading">
+								{ sprintf(
+									/* translators: %s: Plugin Name */
+									__(
+										'Activating… %s',
+										'wp-module-onboarding'
+									),
+									pluginName
+								) }
+							</div>
+							<div className="nfd-installer-modal__loader"></div>
+						</>
+					) }
+					{ pluginStatus === 'failed' && (
+						<div className="nfd-installer-modal__content-error">
+							{ __(
+								'Sorry, there was an error installing and activating the plugin.',
+								'wp-module-onboarding'
+							) }
+						</div>
+					) }
 				</div>
 			</div>
 		</div>

src/Installer/components/Modal/stylesheet.scss

@@ -8,21 +8,37 @@
 	position: fixed;
 	align-items: center;
 	justify-content: center;
-	background: rgba(0, 0, 0, 0.5);
+	background: rgba(255, 255, 255, 0.3);
+
+	@media (max-width: #{ ($break-small) }) {
+		top: 30px;
+	}
 
 	&__content {
-		width: 400px;
-		padding: 20px;
+		width: 40vw;
+		padding: 72px;
 		position: relative;
 		border-radius: 8px;
 		text-align: center;
 		background-color: #fff;
-		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+		box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+
+		@media (max-width: #{ ($break-small) }) {
+			width: 80vw;
+			padding: 24px;
+		}
 
 		&-heading {
-			font-size: 20px;
-			margin-bottom: 20px;
 			color: #333;
+			font-size: 22px;
+			font-weight: 300;
+			margin-bottom: 60px;
+			letter-spacing: 1.1px;
+
+			@media (max-width: #{ ($break-small) }) {
+				font-size: 18px;
+				margin-bottom: 20px;
+			}
 		}
 
 		&-section {
@@ -32,24 +48,49 @@
 		}
 
 		&-image {
-			width: 150px;
-			margin-bottom: 15px;
+			width: 200px;
+			margin-bottom: 30px;
+
+			@media (max-width: #{ ($break-small) }) {
+				width: 100px;
+			}
 		}
 
 		&-subheading {
-			margin-bottom: 10px;
-			font-size: 16px;
 			color: #333;
+			font-size: 16px;
+			margin-bottom: 30px;
+
+			@media (max-width: #{ ($break-small) }) {
+				font-size: 14px;
+				margin-bottom: 10px;
+			}
+		}
+
+		&-error {
+			color: red;
+			font-size: 16px;
+
+			@media (max-width: #{ ($break-small) }) {
+				font-size: 14px;
+			}
 		}
 	}
 
 	&__loader {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
 		border: 4px solid #f3f3f3;
 		border-top: 4px solid #3498db;
-		border-radius: 50%;
-		width: 40px;
-		height: 40px;
+		border-right: 4px solid #3498db;
+		border-bottom: 4px solid #3498db;
 		animation: spin 1s linear infinite;
+
+		@media (max-width: #{ ($break-small) }) {
+			width: 20px;
+			height: 20px;
+		}
 	}
 }
 

src/Installer/styles/_wordpress.scss

@@ -0,0 +1,7 @@
+/**
+ * Initialize all WordPress Sass
+ * -----------------------------
+ * @import @wordpress/base-styles
+ */
+
+@import "@wordpress/base-styles/breakpoints";

src/Installer/styles/app.scss

@@ -1,13 +1,18 @@
+//Imports
+@import "wordpress";
+@import "../components/Modal/stylesheet";
+
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 }
 
 body {
-	font-family: Arial, sans-serif;
-	background-color: #f4f4f4;
+	font-family: "Open Sans", sans-serif;
 }
 
-//Imports
-@import "../components/Modal/stylesheet";
+#nfd-installer {
+	display: none;
+	transition: all 3s ease-in-out;
+}