apply kit for testing

modules/admin/assets/js/components/dialog/dialog.js

@@ -15,6 +15,7 @@ export const DialogModal = (
 		approveButtonUrl,
 		title,
 		text,
+		isLoading,
 	},
 ) => {
 	return (
@@ -39,8 +40,8 @@ export const DialogModal = (
 				<Button onClick={ onClose } color="secondary">
 					{ __( 'Cancel', 'hello-plus' ) }
 				</Button>
-				<Button target="_blank" rel="opener" href={ approveButtonUrl } onClick={ approveButtonOnClick } variant="contained">
-					{ approveButtonText }
+				<Button disabled={ isLoading } target="_blank" rel="opener" href={ approveButtonUrl } onClick={ approveButtonOnClick } variant="contained">
+					{ isLoading ? __( 'Processing…', 'hello-plus' ) : approveButtonText }
 				</Button>
 			</DialogActions>
 		</Dialog>

modules/admin/assets/js/components/onboarding/kits/apply-kit-dialog.js

@@ -1,7 +1,7 @@
 import { DialogModal } from '../../dialog/dialog';
 import { __ } from '@wordpress/i18n';
 
-export const ApplyKitDialog = ( { title, startImportProcess, onClose } ) => {
+export const ApplyKitDialog = ( { title, startImportProcess, onClose, isLoading } ) => {
 	return ( <DialogModal
 		// Translators: %s is the kit name.
 		title={ __( 'Apply %s?', 'hello-plus' ).replace( '%s', title ) }
@@ -10,5 +10,6 @@ export const ApplyKitDialog = ( { title, startImportProcess, onClose } ) => {
 		approveButtonColor="primary"
 		approveButtonOnClick={ () => startImportProcess( true ) }
 		onClose={ onClose }
+		isLoading={ isLoading }
 	/> );
 };

modules/admin/assets/js/components/onboarding/screens/install-kit.js

@@ -9,7 +9,7 @@ import { PreviewWithImage } from '../../preview/preview-with-image';
 export const InstallKit = ( { message, kits = [], setPreviewKit, severity } ) => {
 	return (
 		<Stack direction="column" alignItems="center" justifyContent="center">
-			<Stack sx={ { maxWidth: 662 } } alignItems="center" justifyContent="center" gap={ 4 }>
+			<Stack sx={ { maxWidth: 900 } } alignItems="center" justifyContent="center" gap={ 4 }>
 				<Navigation />
 				<Stack alignItems="center" justifyContent="center" gap={ 4 }>
 					<Typography variant="h4" align="center" px={ 2 }>

modules/admin/assets/js/components/onboarding/screens/preview.js

@@ -6,14 +6,15 @@ import ConnectDialog from '../kits/connect-dialog';
 import { ApplyKitDialog } from '../kits/apply-kit-dialog';
 import { TobBarPreview } from '../../top-bar/top-bar-preview';
 import { Overview } from './overview';
+import apiFetch from '@wordpress/api-fetch';
 
 export const Preview = ( { kit, setPreviewKit } ) => {
 	const [ isLoading, setIsLoading ] = useState( true );
 	const [ showConnectDialog, setShowConnectDialog ] = useState( false );
 	const [ showApplyKitDialog, setShowApplyKitDialog ] = useState( false );
 	const [ isOverview, setIsOverview ] = useState( false );
 	const {
-		setStep,
+		onboardingSettings: { applyKitBaseUrl, returnUrl },
 		elementorKitSettings,
 	} = useAdminContext();
 
@@ -31,7 +32,6 @@ export const Preview = ( { kit, setPreviewKit } ) => {
 	return (
 		<>
 			{ showConnectDialog && ( <ConnectDialog
-				pageId={ slug }
 				onClose={ () => setShowConnectDialog( false ) }
 				onSuccess={ () => {
 					setShowConnectDialog( false );
@@ -42,10 +42,24 @@ export const Preview = ( { kit, setPreviewKit } ) => {
 			/> ) }
 			{
 				showApplyKitDialog && ( <ApplyKitDialog
+					isLoading={ isLoading }
 					title={ title }
-					startImportProcess={ () => {
-						setStep( 2 );
-						setPreviewKit( null );
+					startImportProcess={ async () => {
+						try {
+							setIsLoading( true );
+							const response = await apiFetch( { path: '/elementor/v1/kits/download-link/' + kit._id } );
+
+							const url = '/import/process' +
+								`?id=${ kit._id }` +
+								`&file_url=${ encodeURIComponent( response.data.download_link ) }&return_to=${ encodeURIComponent( returnUrl ) }` +
+								`&nonce=${ response.meta.nonce }&referrer=kit-library&action_type=apply-all`;
+
+							window.location.href = `${ applyKitBaseUrl }#${ url }`;
+						} catch ( err ) {
+							console.log( err, 'error' ); // eslint-disable-line no-console
+						} finally {
+							setIsLoading( false );
+						}
 					} }
 					onClose={ () => setShowApplyKitDialog( false ) }
 				/> )

modules/admin/assets/js/components/preview/preview-with-image.js

@@ -9,7 +9,7 @@ export const PreviewWithImage = ( { title, thumbnail, onClick } ) => {
 	return (
 		<Stack direction="column" >
 			<Typography variant="body2" sx={ { height: 45 } }>{ title }</Typography>
-			<Box sx={ { position: 'relative', cursor: 'pointer' } }>
+			<Box sx={ { position: 'relative', cursor: 'pointer', boxShadow: 3 } }>
 				<Image
 					src={ thumbnail }
 					alt={ title }

modules/admin/assets/js/hooks/use-admin-context.js

@@ -1,6 +1,5 @@
 import { useContext } from 'react';
 import { AdminContext } from '../providers/admin-provider';
-
 export const useAdminContext = () => {
 	return useContext( AdminContext );
 };

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

@@ -36,7 +36,6 @@ export const OnboardingPage = () => {
 		stepAction,
 		buttonText,
 		step,
-		setStep,
 		onboardingSettings: { nonce, modalCloseRedirectUrl, kits } = {},
 	} = useAdminContext();
 
@@ -69,16 +68,13 @@ export const OnboardingPage = () => {
 							throw new Error( __( 'Failed to activate Elementor plugin', 'hello-plus' ) );
 						}
 					}
-
-					setStep( 1 );
-					setMessage( '' );
+					window.location.reload();
 					break;
 				case 'activate-elementor':
 					setMessage( __( 'Activating Elementor plugin…', 'hello-plus' ) );
 					await wp.ajax.post( 'hello_plus_setup_wizard', data );
 					data.slug = 'elementor';
-					setStep( 1 );
-					setMessage( '' );
+					window.location.reload();
 					break;
 				case 'install-kit':
 					break;
@@ -89,7 +85,7 @@ export const OnboardingPage = () => {
 		} finally {
 			setIsLoading( false );
 		}
-	}, [ allowTracking, nonce, setIsLoading, setStep, stepAction ] );
+	}, [ allowTracking, nonce, setIsLoading, stepAction ] );
 
 	const onClose = () => {
 		window.location.href = modalCloseRedirectUrl;

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

@@ -11,7 +11,7 @@ export const AdminProvider = ( { children } ) => {
 	const [ stepAction, setStepAction ] = useState( '' );
 	const [ step, setStep ] = useState( 0 );
 	const [ buttonText, setButtonText ] = useState( '' );
-	const { elementorInstalled, elementorActive } = onboardingSettings;
+	const { elementorInstalled, elementorActive, wizardCompleted } = onboardingSettings;
 	const { elementorAppConfig } = window;
 
 	useEffect( () => {
@@ -21,6 +21,10 @@ export const AdminProvider = ( { children } ) => {
 	}, [ elementorAppConfig ] );
 
 	useEffect( () => {
+		if ( wizardCompleted ) {
+			setStep( 2 );
+			return;
+		}
 		if ( false === elementorInstalled ) {
 			setStepAction( 'install-elementor' );
 			setButtonText( __( 'Start building my website', 'hello-plus' ) );
@@ -34,7 +38,7 @@ export const AdminProvider = ( { children } ) => {
 			setButtonText( __( 'Install Kit', 'hello-plus' ) );
 			setStep( 1 );
 		}
-	}, [ elementorInstalled, elementorActive ] );
+	}, [ elementorInstalled, elementorActive, wizardCompleted ] );
 
 	useEffect( () => {
 		Promise.all( [
@@ -56,6 +60,7 @@ export const AdminProvider = ( { children } ) => {
 			setStep,
 			isLoading,
 			elementorKitSettings,
+			setIsLoading,
 		} }>
 			{ children }
 		</AdminContext.Provider>

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

@@ -2,16 +2,53 @@
 
 namespace HelloPlus\Modules\Admin\Classes\Menu\Pages;
 
+use HelloPlus\Modules\Admin\Module;
+
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
 
 class Setup_Wizard {
-
 	const SETUP_WIZARD_PAGE_SLUG = 'hello-plus-setup-wizard';
 
-	public static function has_site_wizard_been_completed() {
-		return get_site_option( 'hello_plus_setup_wizard_completed', false );
+	public static function has_site_wizard_been_completed(): bool {
+		static $is_setup_wizard_completed = null;
+
+		if ( ! class_exists( '\Elementor\App\Modules\ImportExport\Processes\Revert' ) ) {
+			return false;
+		}
+
+		if ( ! is_null( $is_setup_wizard_completed ) ) {
+			return $is_setup_wizard_completed;
+		}
+
+		$sessions = \Elementor\App\Modules\ImportExport\Processes\Revert::get_import_sessions();
+
+		if ( ! $sessions ) {
+			return false;
+		}
+
+		$last_session = end( $sessions );
+		$kit_name = $last_session['kit_name'];
+
+		try {
+			/**
+			 * @var \HelloPlus\Modules\Admin\Classes\Rest\Onboarding_Settings $onboarding_rest
+			 */
+			$onboarding_rest = Module::instance()->get_component( 'Api_Controller' )->get_endpoint( 'onboarding-settings' );
+
+			$kits = $onboarding_rest->get_kits();
+
+			$kit = array_filter( $kits, function ( $k ) use ( $kit_name ) {
+				return $k['manifest']['name'] === $kit_name;
+			} );
+
+			$is_setup_wizard_completed = ! empty( $kit );
+		} catch ( \Exception $e ) {
+			$is_setup_wizard_completed = false;
+		}
+
+		return $is_setup_wizard_completed;
 	}
 
 	public function register_setup_wizard_page(): void {

modules/admin/classes/rest/onboarding-settings.php

@@ -6,15 +6,19 @@
 	exit; // Exit if accessed directly.
 }
 
+use Elementor\App\Modules\KitLibrary\Connect\Kit_Library;
 use HelloPlus\Includes\Utils;
+use HelloPlus\Modules\Admin\Classes\Menu\Pages\Setup_Wizard;
 use WP_REST_Server;
 
 class Onboarding_Settings {
-	const DEFAULT_BASE_ENDPOINT = 'https://my.elementor.com/api/v1/kits-library/kits/';
-	const FALLBACK_BASE_ENDPOINT = 'https://ms-8874.elementor.com/api/v1/kits-library/kits/';
+	// ToDo: replace with the actual kit ids.
+	protected array $kits_ids = [];
 
 	public function __construct() {
 
+		$this->kits_ids = apply_filters( 'hello-plus-kits', [] );
+
 		add_action(
 			'rest_api_init',
 			function () {
@@ -38,17 +42,19 @@ public function get_kits() {
 		$kits = get_transient( 'e_hello_plus_kits' );
 
 		if ( ! $kits ) {
-			try {
-				$kits = $this->call_and_check( self::DEFAULT_BASE_ENDPOINT );
-				$kits = array_slice( $kits, - 8 );
-				foreach ( $kits as &$kit ) {
-					$kit['manifest'] = $this->call_and_check( self::DEFAULT_BASE_ENDPOINT . $kit['_id'] . '/manifest' );
+			$kits = [];
+			if ( class_exists( 'Elementor\App\Modules\KitLibrary\Connect\Kit_Library' ) ) {
+				try {
+					foreach ( $this->kits_ids as $kit_id ) {
+						$kit = $this->call_and_check( Kit_Library::DEFAULT_BASE_ENDPOINT . '/kits/' . $kit_id );
+						$kit['manifest'] = $this->call_and_check( Kit_Library::DEFAULT_BASE_ENDPOINT . '/kits/' . $kit_id . '/manifest' );
+						$kits[] = $kit;
+					}
+
+					set_transient( 'e_hello_plus_kits', $kits, 24 * HOUR_IN_SECONDS );
+				} catch ( \Exception $e ) {
+					$kits = [];
 				}
-
-				set_transient( 'e_hello_plus_kits', $kits, 24 * HOUR_IN_SECONDS );
-			} catch ( \Exception $e ) {
-				// just to avoid linting errors
-				error_log( $e->getMessage() ); //phpcs:ignore
 			}
 		}
 
@@ -57,16 +63,31 @@ public function get_kits() {
 
 	public function call_and_check( $url ) {
 		$response = wp_remote_get( $url );
+
 		if ( is_wp_error( $response ) ) {
+			if ( strpos( $url, Kit_Library::DEFAULT_BASE_ENDPOINT ) === 0 ) {
+				return $this->call_and_check(
+					str_replace( Kit_Library::DEFAULT_BASE_ENDPOINT, Kit_Library::FALLBACK_BASE_ENDPOINT, $url )
+				);
+			}
+
 			throw new \Exception( esc_html( "Error when calling $url: message {$response->get_error_message()}" ) );
 		}
+
 		$response_code = wp_remote_retrieve_response_code( $response );
 
 		if ( 200 !== $response_code ) {
+			if ( strpos( $url, Kit_Library::DEFAULT_BASE_ENDPOINT ) === 0 ) {
+				return $this->call_and_check(
+					str_replace( Kit_Library::DEFAULT_BASE_ENDPOINT, Kit_Library::FALLBACK_BASE_ENDPOINT, $url )
+				);
+			}
+
 			throw new \Exception( esc_html( "Error when calling $url: response code $response_code" ) );
 		}
 
 		$response_body = wp_remote_retrieve_body( $response );
+
 		return json_decode( $response_body, true );
 	}
 
@@ -81,6 +102,9 @@ public function get_onboarding_settings() {
 					'elementorActive' => Utils::is_elementor_active(),
 					'modalCloseRedirectUrl' => admin_url( 'admin.php?page=hello-plus' ),
 					'kits' => $this->get_kits(),
+					'applyKitBaseUrl' => admin_url( 'admin.php?page=elementor-app' ),
+					'wizardCompleted' => Setup_Wizard::has_site_wizard_been_completed(),
+					'returnUrl' => admin_url( 'admin.php?page=hello-plus-setup-wizard' ),
 				],
 			]
 		);

modules/admin/components/admin-menu-controller.php

@@ -12,9 +12,7 @@
 
 class Admin_Menu_Controller {
 
-	public function __construct() {
-		add_action( 'hello-plus/admin-menu', array( $this, 'admin_menu' ) );
-	}
+	const SETUP_WIZARD_TRANSIENT_NAME = 'hello_plus_redirect_to_setup_wizard';
 
 	public function admin_menu() {
 		$settings = new Settings();
@@ -26,4 +24,25 @@ public function admin_menu() {
 		$kits_library = new Kits_Library();
 		$kits_library->register_kits_library_page();
 	}
+
+	public function activate() {
+		if ( ! Setup_Wizard::has_site_wizard_been_completed() ) {
+			set_transient( self::SETUP_WIZARD_TRANSIENT_NAME, true );
+		}
+	}
+
+	public function redirect_on_first_activation() {
+		if ( empty( get_transient( self::SETUP_WIZARD_TRANSIENT_NAME ) ) ) {
+			return;
+		}
+		delete_transient( self::SETUP_WIZARD_TRANSIENT_NAME );
+		wp_safe_redirect( admin_url( 'admin.php?page=' . Setup_Wizard::SETUP_WIZARD_PAGE_SLUG ) );
+		exit;
+	}
+
+	public function __construct() {
+		add_action( 'hello-plus-theme/admin-menu', [ $this, 'admin_menu' ] );
+		add_action( 'hello-plus/activate', [ $this, 'activate' ] );
+		add_action( 'hello-plus/init', [ $this, 'redirect_on_first_activation' ] );
+	}
 }

modules/admin/components/api-controller.php

@@ -21,4 +21,12 @@ public function __construct() {
 
 		$this->ajax_classes['setup-wizard'] = new Setup_Wizard();
 	}
+
+	public function get_endpoint( string $endpoint ) {
+		if ( ! isset( $this->endpoints[ $endpoint ] ) ) {
+			throw new \Exception( esc_html__( 'Endpoint not found', 'hello-plus' ) );
+		}
+
+		return $this->endpoints[ $endpoint ];
+	}
 }