+ { statesReady && (
+
+ );
+};
+
+export default App;
diff --git a/src/Installer/components/Modal/index.jsx b/src/Installer/components/Modal/index.jsx
new file mode 100644
index 0000000..cd8a722
--- /dev/null
+++ b/src/Installer/components/Modal/index.jsx
@@ -0,0 +1,234 @@
+// External Imports
+import apiFetch from '@wordpress/api-fetch';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+ createInterpolateElement,
+ useRef,
+ useState,
+ useEffect,
+} from '@wordpress/element';
+
+// Internal Imports
+import { errorIcon, loadingInstaller } from '../../static/icons/index';
+import {
+ INSTALLER_DIV,
+ installerAPI,
+ pluginInstallHash,
+} from '../../constants';
+
+const Modal = ( {
+ action,
+ pluginDownloadUrl,
+ pluginName,
+ pluginProvider,
+ pluginSlug,
+ redirectUrl,
+} ) => {
+ /**
+ * 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 [ show, showModal ] = useState( true );
+ const modalRef = useRef( null );
+
+ useEffect( () => {
+ document.getElementById( INSTALLER_DIV ).style.display = show
+ ? 'block'
+ : 'none';
+ }, [ show ] );
+
+ useEffect( () => {
+ switch ( action ) {
+ case 'installFreePlugin':
+ installFreePlugin();
+ break;
+
+ case 'installPremiumPlugin':
+ installPremiumPlugin();
+ break;
+ }
+ }, [ action ] );
+
+ const handleKeyDown = ( event ) => {
+ if ( event.key === 'Escape' ) {
+ showModal( false );
+ }
+ };
+
+ const handleClickOutside = ( event ) => {
+ if ( modalRef.current && ! modalRef.current.contains( event.target ) ) {
+ showModal( false );
+ }
+ };
+
+ useEffect( () => {
+ document.addEventListener( 'keydown', handleKeyDown );
+ document.addEventListener( 'mousedown', handleClickOutside );
+
+ return () => {
+ document.removeEventListener( 'keydown', handleKeyDown );
+ document.removeEventListener( 'mousedown', handleClickOutside );
+ };
+ }, [ pluginStatus ] );
+
+ // Function to handle premium plugin installation
+ const installDependantPlugins = async () => {
+ try {
+ // TODO: Change this logic to ensure we get dependent plugins as a prop
+ if ( pluginProvider === 'yith' ) {
+ await apiFetch( {
+ url: installerAPI,
+ method: 'POST',
+ headers: {
+ 'X-NFD-INSTALLER': pluginInstallHash,
+ },
+ data: {
+ activate: true,
+ queue: false,
+ priority: 0,
+ plugin: 'woocommerce',
+ },
+ } );
+ } else if ( pluginProvider === 'yoast' ) {
+ // TODO: This will cause 2 calls to install the Yoast SEO Plugin. Remove this once we have dependent plugins as a prop.
+ await apiFetch( {
+ url: installerAPI,
+ method: 'POST',
+ headers: {
+ 'X-NFD-INSTALLER': pluginInstallHash,
+ },
+ data: {
+ activate: true,
+ queue: false,
+ priority: 0,
+ plugin: 'wordpress-seo',
+ },
+ } );
+ }
+ } catch ( error ) {
+ throw error;
+ }
+ };
+
+ const installPremiumPlugin = async () => {
+ try {
+ setPluginStatus( 'installing' );
+ await installDependantPlugins();
+ await apiFetch( {
+ url: installerAPI,
+ method: 'POST',
+ headers: {
+ 'X-NFD-INSTALLER': pluginInstallHash,
+ },
+ data: {
+ activate: true,
+ queue: false,
+ priority: 0,
+ premium: true,
+ plugin: pluginSlug,
+ provider: pluginProvider,
+ },
+ } );
+ setPluginStatus( 'completed' );
+ showModal( false );
+ window.location.href = redirectUrl;
+ } catch ( e ) {
+ setPluginStatus( 'failed' );
+ }
+ };
+
+ const installFreePlugin = async () => {
+ try {
+ setPluginStatus( 'installing' );
+ await installDependantPlugins();
+ await apiFetch( {
+ url: installerAPI,
+ method: 'POST',
+ headers: {
+ 'X-NFD-INSTALLER': pluginInstallHash,
+ },
+ data: {
+ activate: true,
+ queue: false,
+ priority: 0,
+ plugin: pluginDownloadUrl,
+ },
+ } );
+ setPluginStatus( 'completed' );
+ showModal( false );
+ window.location.href = redirectUrl;
+ } catch ( e ) {
+ setPluginStatus( 'failed' );
+ }
+ };
+
+ const helpLink = `${ window.NewfoldRuntime.adminUrl }admin.php?page=${ window.NewfoldRuntime.plugin.brand }#/help`;
+
+ const errorMessage = createInterpolateElement(
+ __(
+ 'Sorry, there was an error installing and activating the plugin. Please try again. If the problem persists, contact support.',
+ 'wp-module-onboarding'
+ ),
+ {
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+ a: showModal( false ) } />,
+ }
+ );
+
+ return (
+
+
+ );
+};
+
+export default Modal;
diff --git a/src/Installer/components/Modal/stylesheet.scss b/src/Installer/components/Modal/stylesheet.scss
new file mode 100644
index 0000000..cdc9bb4
--- /dev/null
+++ b/src/Installer/components/Modal/stylesheet.scss
@@ -0,0 +1,126 @@
+.nfd-installer-modal {
+ top: 0;
+ left: 0;
+ z-index: 99;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ position: fixed;
+ align-items: center;
+ justify-content: center;
+ background: rgba(255, 255, 255, 0.5);
+
+ @media (max-width: #{ ($break-small) }) {
+ top: 30px;
+ }
+
+ &__content {
+ width: 40vw;
+ padding: 72px;
+ position: relative;
+ border-radius: 8px;
+ text-align: center;
+ background-color: #fff;
+ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 80vw;
+ padding: 24px;
+ }
+
+ &-heading {
+ 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 {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ &-image {
+ width: 200px;
+ margin-bottom: 30px;
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100px;
+ }
+ }
+
+ &-subheading {
+ color: #333;
+ font-size: 16px;
+ font-weight: 300;
+ margin-bottom: 30px;
+
+ @media (max-width: #{ ($break-small) }) {
+ font-size: 14px;
+ margin-bottom: 10px;
+ }
+ }
+
+ &-error {
+ display: flex;
+ font-size: 16px;
+ flex-direction: row;
+ align-items: center;
+
+ @media (max-width: #{ ($break-small) }) {
+ font-size: 14px;
+ }
+
+ &--icon {
+ margin-right: 5px;
+ flex-shrink: 0;
+ }
+
+ &--text {
+ font-weight: 300;
+ line-height: 20px;
+
+ &-link {
+ all: unset;
+ cursor: pointer;
+ color: #1e90ff;
+ font-weight: 300;
+ }
+ }
+ }
+ }
+
+ &__loader {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 4px solid #f3f3f3;
+ border-top: 4px solid #3a3a3a;
+ border-right: 4px solid #3a3a3a;
+ border-bottom: 4px solid #3a3a3a;
+ animation: spin 1s linear infinite;
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 20px;
+ height: 20px;
+ }
+ }
+}
+
+@keyframes spin {
+
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/constants.js b/src/Installer/constants.js
similarity index 85%
rename from src/constants.js
rename to src/Installer/constants.js
index d46b3a6..7b72cf8 100644
--- a/src/constants.js
+++ b/src/Installer/constants.js
@@ -1,3 +1,4 @@
+export const INSTALLER_DIV = 'nfd-installer';
export const wpRestURL = window.nfdInstaller?.restUrl;
export const installerRestRoute = 'newfold-installer/v1';
export const pluginInstallHash = window.nfdInstaller?.pluginInstallHash;
diff --git a/src/Installer/installer.js b/src/Installer/installer.js
new file mode 100644
index 0000000..cdb882a
--- /dev/null
+++ b/src/Installer/installer.js
@@ -0,0 +1,39 @@
+/**
+ * Styles.
+ */
+import './styles/app.scss';
+
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { INSTALLER_DIV } from './constants';
+
+// eslint-disable-next-line import/no-unresolved
+import App from './components/App';
+
+domReady( () => {
+ renderModal( INSTALLER_DIV );
+} );
+
+/**
+ * This function creates a modal that is rendered on the page.
+ *
+ * @param {string} elementId It takes an elementId as an argument and creates a div with the given elementId.
+ */
+const renderModal = ( elementId ) => {
+ const modalRoot = document.createElement( 'div' );
+ modalRoot.id = elementId;
+
+ // Append the modal container to the body if it hasn't been added already.
+ if ( ! document.getElementById( elementId ) ) {
+ document.body.append( modalRoot );
+ }
+
+ render(
+
+
+ { __(
+ 'Hold on while we get things setup for you!',
+ 'wp-module-installer'
+ ) }
+
+
+ 
+ { pluginStatus === 'installing' && (
+ <>
+
+
+ { sprintf(
+ /* translators: %s: Plugin Name */
+ __(
+ 'Activating the %s',
+ 'wp-module-onboarding'
+ ),
+ pluginName
+ ) }
+
+
+
+ ) }
+ { pluginStatus === 'failed' && (
+
+
+
+ ) }
+ { errorMessage }
+