Add logic for installing elementor

modules/admin/assets/js/hello-plus-onboarding.js

@@ -0,0 +1,20 @@
+import { AdminProvider } from './providers/admin-provider';
+import { createRoot } from 'react-dom/client';
+import { OnboardingPage } from './pages/onboarding-page';
+
+const App = () => {
+	return (
+		<AdminProvider>
+			<OnboardingPage />
+		</AdminProvider>
+	);
+};
+
+document.addEventListener( 'DOMContentLoaded', () => {
+	const container = document.getElementById( 'ehp-admin-onboarding' );
+
+	if ( container ) {
+		const root = createRoot( container );
+		root.render( <App /> );
+	}
+} );

modules/admin/assets/js/hooks/use-get-current-step.js

@@ -0,0 +1,30 @@
+import { useAdminContext } from './use-admin-context';
+import { useEffect, useState } from 'react';
+import { __ } from '@wordpress/i18n';
+
+export const useGetCurrentStep = () => {
+	const [ step, setStep ] = useState( '' );
+	const [ buttonText, setButtonText ] = useState( '' );
+	const { onboardingSettings: { elementorInstalled, elementorActive } = {} } = useAdminContext();
+
+	useEffect( () => {
+		if ( false === elementorInstalled ) {
+			setStep( 'install-elementor' );
+			setButtonText( __( 'Install Elementor', 'hello-plus' ) );
+		}
+		if ( elementorInstalled && false === elementorActive ) {
+			setStep( 'activate-elementor' );
+			setButtonText( __( 'Activate Elementor', 'hello-plus' ) );
+		}
+		if ( elementorInstalled && elementorActive ) {
+			setStep( 'install-kit' );
+			setButtonText( __( 'Install Kit', 'hello-plus' ) );
+		}
+	}, [ elementorInstalled, elementorActive ] );
+
+	return {
+		step,
+		setStep,
+		buttonText,
+	};
+};

modules/admin/assets/js/pages/onboarding-page.js

@@ -0,0 +1,65 @@
+import Button from '@elementor/ui/Button';
+import Box from '@elementor/ui/Box';
+import { ThemeProvider } from '@elementor/ui/styles';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useState } from 'react';
+import Alert from '@elementor/ui/Alert';
+import { useAdminContext } from '../hooks/use-admin-context';
+import { useGetCurrentStep } from '../hooks/use-get-current-step';
+
+export const OnboardingPage = () => {
+	const [ message, setMessage ] = useState( '' );
+	const [ severity, setSeverity ] = useState( 'info' );
+
+	const { onboardingSettings: { nonce } = {} } = useAdminContext();
+	const { step, buttonText } = useGetCurrentStep();
+
+	const onClick = useCallback( async () => {
+		setMessage( '' );
+
+		const data = {
+			step,
+			_wpnonce: nonce,
+			slug: 'elementor',
+		};
+
+		try {
+			switch ( step ) {
+				case 'install-elementor':
+					setMessage( __( 'Installing Elementor plugin…', 'hello-plus' ) );
+					const response = await wp.ajax.post( 'hello_plus_setup_wizard', data );
+
+					if ( response.activateUrl ) {
+						setMessage( __( 'Activating Elementor plugin…', 'hello-plus' ) );
+						const activate = await fetch( response.activateUrl );
+
+						if ( activate.ok ) {
+							setSeverity( 'success' );
+							setMessage( __( 'Elementor plugin has been installed and activated' ) );
+						}
+					}
+					break;
+				case 'activate-elementor':
+					setMessage( __( 'Activating Elementor plugin…', 'hello-plus' ) );
+					await wp.ajax.post( 'hello_plus_setup_wizard', data );
+					setMessage( __( 'Elementor plugin has been activated.' ) );
+					data.slug = 'elementor';
+					break;
+				case 'install-kit':
+					break;
+			}
+		} catch ( error ) {
+			setMessage( error.errorMessage );
+			setSeverity( 'error' );
+		}
+	}, [ nonce, step ] );
+
+	return (
+		<ThemeProvider colorScheme="auto">
+			{ message && <Alert severity={ severity }>{ message }</Alert> }
+			<Box p={ 1 }>
+				{ buttonText && <Button onClick={ onClick }>{ buttonText }</Button> }
+			</Box>
+		</ThemeProvider>
+	);
+};

modules/admin/assets/js/providers/admin-provider.js

@@ -6,6 +6,7 @@ export const AdminContext = createContext();
 export const AdminProvider = ( { children } ) => {
 	const [ promotionsLinks, setPromotionsLinks ] = React.useState( [] );
 	const [ adminSettings, setAdminSettings ] = React.useState( {} );
+	const [ onboardingSettings, setOnboardingSettings ] = React.useState( {} );
 
 	useEffect( () => {
 		apiFetch( { path: '/elementor-hello-plus/v1/promotions' } ).then( ( links ) => {
@@ -19,8 +20,14 @@ export const AdminProvider = ( { children } ) => {
 		} );
 	}, [] );
 
+	useEffect( () => {
+		apiFetch( { path: '/elementor-hello-plus/v1/onboarding-settings' } ).then( ( settings ) => {
+			setOnboardingSettings( settings.settings );
+		} );
+	}, [] );
+
 	return (
-		<AdminContext.Provider value={ { promotionsLinks, adminSettings } }>
+		<AdminContext.Provider value={ { promotionsLinks, adminSettings, onboardingSettings } }>
 			{ children }
 		</AdminContext.Provider>
 	);

modules/admin/classes/ajax/setup-wizard.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace HelloPlus\Modules\Admin\Classes\Ajax;
+
+use HelloPlus\Modules\Admin\Classes\Onboarding\Install_Elementor;
+
+class Setup_Wizard {
+
+	public function __construct() {
+		add_action( 'wp_ajax_hello_plus_setup_wizard', [ $this, 'ajax_setup_wizard' ] );
+	}
+
+	public function ajax_setup_wizard() {
+		check_ajax_referer( 'updates', 'nonce' );
+
+		$step = filter_input( INPUT_POST, 'step', FILTER_UNSAFE_RAW );
+
+		switch ( $step ) {
+			case 'install-elementor':
+				$step = new Install_Elementor();
+				$step->install_and_activate();
+				break;
+			case 'activate-elementor':
+				$step = new Install_Elementor();
+				$step->activate();
+				break;
+			default:
+				wp_send_json_error( [ 'message' => __( 'Invalid step.', 'hello-plus' ) ] );
+		}
+	}
+}

modules/admin/classes/elementor/elementor-helper.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace HelloPlus\Modules\Admin\Classes\Elementor;
+
+class Elementor_Helper {
+
+	private static $elementor_installed = null;
+
+	private static $elementor_active = null;
+
+	public static function is_elementor_installed() {
+		if ( null === self::$elementor_installed ) {
+			self::$elementor_installed = file_exists( WP_PLUGIN_DIR . '/elementor/elementor.php' );
+		}
+
+		return self::$elementor_installed;
+	}
+
+	public static function is_elementor_active() {
+		if ( null === self::$elementor_active ) {
+			self::$elementor_active = defined( 'ELEMENTOR_VERSION' );
+		}
+
+		return self::$elementor_active;
+	}
+}

modules/admin/classes/menu/pages/setup-wizard.php

@@ -26,6 +26,6 @@ public function register_setup_wizard_page(): void {
 	}
 
 	public function render_setup_wizard_page(): void {
-		echo '<div id="ehp-admin-setup-wizard">Setup Wizard Page Content</div>';
+		echo '<div id="ehp-admin-onboarding"></div>';
 	}
 }

modules/admin/classes/onboarding/install-elementor.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace HelloPlus\Modules\Admin\Classes\Onboarding;
+
+class Install_Elementor {
+
+	public function install_and_activate() {
+		wp_ajax_install_plugin();
+	}
+
+	public function activate() {
+		$activated = activate_plugin( 'elementor/elementor.php' );
+
+		if ( is_wp_error( $activated ) ) {
+			wp_send_json_error( [ 'errorMessage' => $activated->get_error_message() ] );
+		}
+
+		wp_send_json_success( [ 'message' => __( 'Elementor activated successfully.', 'hello-plus' ) ] );
+	}
+}

modules/admin/classes/rest/admin-config.php

@@ -12,7 +12,9 @@
 
 
 class Admin_Config {
+
 	public function __construct() {
+
 		add_action(
 			'rest_api_init',
 			function () {