From 6deeb74b51078dfc07ae558309351381100a2cfb Mon Sep 17 00:00:00 2001
From: Nicola Peluchetti <nicola.peluchetti@gmail.com>
Date: Thu, 10 Oct 2024 15:56:08 +0200
Subject: [PATCH] finish UX

---
 .../onboarding/screens/get-started.js         |  4 +-
 .../onboarding/screens/install-kit.js         | 17 ++++++-
 .../components/onboarding/screens/preview.js  | 44 +++++++++++++++++++
 .../onboarding/screens/ready-to-go.js         | 20 ++++++---
 .../assets/js/hooks/use-get-current-step.js   |  2 +-
 .../admin/assets/js/pages/onboarding-page.js  | 33 ++++++++++----
 modules/admin/classes/ajax/setup-wizard.php   |  7 +++
 modules/admin/classes/rest/admin-config.php   |  2 +-
 8 files changed, 109 insertions(+), 20 deletions(-)
 create mode 100644 modules/admin/assets/js/components/onboarding/screens/preview.js

diff --git a/modules/admin/assets/js/components/onboarding/screens/get-started.js b/modules/admin/assets/js/components/onboarding/screens/get-started.js
index 4a690cf5..4920cbf1 100644
--- a/modules/admin/assets/js/components/onboarding/screens/get-started.js
+++ b/modules/admin/assets/js/components/onboarding/screens/get-started.js
@@ -8,7 +8,7 @@ import Checkbox from '@elementor/ui/Checkbox';
 import Link from '@elementor/ui/Link';
 import { __ } from '@wordpress/i18n';
 
-export const GetStarted = ( { message, buttonText, onClick, severity } ) => {
+export const GetStarted = ( { message, buttonText, onClick, severity, allowTracking, setAllowTracking } ) => {
 	return (
 		<>
 			<Stack direction="column" alignItems="center" justifyContent="center">
@@ -36,7 +36,7 @@ export const GetStarted = ( { message, buttonText, onClick, severity } ) => {
 			<Stack direction="column" alignItems="center" justifyContent="center" sx={ { marginTop: 'auto', pb: 4 } }>
 				<Stack sx={ { maxWidth: 'fit-content' } } alignItems="center" justifyContent="center">
 					<Stack direction="row" alignItems="center" justifyContent="center" >
-						<Checkbox sx={ { p: 0.5 } } size="small" defaultChecked color="default" />
+						<Checkbox sx={ { p: 0.5 } } size="small" checked={ allowTracking } onClick={ () => setAllowTracking( ! allowTracking ) } color="default" />
 						<Typography variant="body1" align="center" color="text.tertiary">
 							{ __( 'Become a super contributor by sharing non-sensitive plugin data to help us improve the tools you use every day.', 'hello-plus' ) }
 						</Typography>
diff --git a/modules/admin/assets/js/components/onboarding/screens/install-kit.js b/modules/admin/assets/js/components/onboarding/screens/install-kit.js
index 9e9bae5c..962cdf3b 100644
--- a/modules/admin/assets/js/components/onboarding/screens/install-kit.js
+++ b/modules/admin/assets/js/components/onboarding/screens/install-kit.js
@@ -3,8 +3,10 @@ import { Navigation } from '../navigation';
 import Typography from '@elementor/ui/Typography';
 import Alert from '@elementor/ui/Alert';
 import { __ } from '@wordpress/i18n';
+import Grid from '@elementor/ui/Grid';
+import Image from '@elementor/ui/Image';
 
-export const InstallKit = ( { message, buttonText, onClick, severity } ) => {
+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 }>
@@ -22,6 +24,19 @@ export const InstallKit = ( { message, buttonText, onClick, severity } ) => {
 						}
 					</Typography>
 					{ message && <Alert severity={ severity }>{ message }</Alert> }
+
+					<Grid container rowSpacing={ 3 } columnSpacing={ 5 } >
+						{ kits.map( ( kit ) => (
+							<Grid key={ kit._id } item xs={ 12 } sm={ 6 } md={ 3 }>
+								<Stack direction="column" gap={ 2 } >
+									<Typography variant="body2" sx={ { height: 40 } }>{ kit.title }</Typography>
+									<Image src={ kit.thumbnail } alt={ kit.title } sx={ { cursor: 'pointer', borderRadius: 1 } } onClick={ () => {
+										setPreviewKit( 'english-pub-hp' );
+									} } />
+								</Stack>
+							</Grid>
+						) ) }
+					</Grid>
 				</Stack>
 			</Stack>
 		</Stack>
diff --git a/modules/admin/assets/js/components/onboarding/screens/preview.js b/modules/admin/assets/js/components/onboarding/screens/preview.js
new file mode 100644
index 00000000..dc1bc212
--- /dev/null
+++ b/modules/admin/assets/js/components/onboarding/screens/preview.js
@@ -0,0 +1,44 @@
+import Stack from '@elementor/ui/Stack';
+import Box from '@elementor/ui/Box';
+import Typography from '@elementor/ui/Typography';
+import { __ } from '@wordpress/i18n';
+import ChevronRightIcon from '@elementor/icons/ChevronRightIcon';
+import Button from '@elementor/ui/Button';
+
+export const Preview = ( { slug, title, setPreviewKit, setStep } ) => {
+	return (
+		<>
+			<Stack direction="row" sx={ { alignItems: 'center', height: 50, px: 2, backgroundColor: 'background.default', justifyContent: 'space-between' } }>
+				<Stack
+					direction="row"
+					spacing={ 1 }
+					alignItems="center"
+					sx={ { borderRight: '1px solid var(--divider-divider, rgba(0, 0, 0, 0.12))', width: 'fit-content', p: 2, cursor: 'pointer' } }
+					onClick={ () => setPreviewKit( '' ) }
+				>
+					<ChevronRightIcon sx={ { transform: 'rotate(180deg)' } } color="action" />
+					<Typography variant="subtitle1" color="action">{ __( 'Back to Wizard', 'hello-plus' ) }</Typography>
+				</Stack>
+				<Stack direction="row" gap={ 1 }>
+					<Button variant="outlined" color="primary">
+						{ __( 'Overview', 'hello-plus' ) }
+					</Button>
+					<Button variant="contained" color="primary" onClick={ () => {
+						setPreviewKit( '' );
+						setStep( 2 );
+					} }>
+						{ __( 'Apply Kit', 'hello-plus' ) }
+					</Button>
+				</Stack>
+			</Stack>
+			<Box sx={ { position: 'relative', width: '100%', height: '100%' } }>
+				<iframe
+					src={ `https://library.elementor.com/${ slug }/` }
+					style={ { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' } }
+					title={ title }
+				/>
+			</Box>
+		</>
+
+	);
+};
diff --git a/modules/admin/assets/js/components/onboarding/screens/ready-to-go.js b/modules/admin/assets/js/components/onboarding/screens/ready-to-go.js
index 593a20aa..cd12bf3f 100644
--- a/modules/admin/assets/js/components/onboarding/screens/ready-to-go.js
+++ b/modules/admin/assets/js/components/onboarding/screens/ready-to-go.js
@@ -1,12 +1,10 @@
 import Stack from '@elementor/ui/Stack';
 import { Navigation } from '../navigation';
 import Typography from '@elementor/ui/Typography';
-import Alert from '@elementor/ui/Alert';
-import Box from '@elementor/ui/Box';
 import Button from '@elementor/ui/Button';
 import { __ } from '@wordpress/i18n';
 
-export const ReadyToGo = ( { message, buttonText, onClick, severity } ) => {
+export const ReadyToGo = ( { modalCloseRedirectUrl } ) => {
 	return (
 		<Stack direction="column" alignItems="center" justifyContent="center">
 			<Stack sx={ { maxWidth: 662 } } alignItems="center" justifyContent="center" gap={ 4 }>
@@ -23,10 +21,18 @@ export const ReadyToGo = ( { message, buttonText, onClick, severity } ) => {
 							)
 						}
 					</Typography>
-					{ message && <Alert severity={ severity }>{ message }</Alert> }
-					<Box p={ 1 } mt={ 6 }>
-						{ buttonText && <Button variant="contained" onClick={ onClick }>{ buttonText }</Button> }
-					</Box>
+					<Stack direction="row" gap={ 1 } mt={ 5 }>
+						<Button variant="outlined" color="primary" onClick={ () => {
+							window.location.href = modalCloseRedirectUrl;
+						} }>
+							{ __( 'Customize my site', 'hello-plus' ) }
+						</Button>
+						<Button variant="contained" color="primary" onClick={ () => {
+							window.location.href = '/';
+						} }>
+							{ __( 'View my site', 'hello-plus' ) }
+						</Button>
+					</Stack>
 				</Stack>
 			</Stack>
 		</Stack>
diff --git a/modules/admin/assets/js/hooks/use-get-current-step.js b/modules/admin/assets/js/hooks/use-get-current-step.js
index 0944ce3e..216f5df3 100644
--- a/modules/admin/assets/js/hooks/use-get-current-step.js
+++ b/modules/admin/assets/js/hooks/use-get-current-step.js
@@ -20,7 +20,7 @@ export const useGetCurrentStep = () => {
 		if ( elementorInstalled && elementorActive ) {
 			setStepAction( 'install-kit' );
 			setButtonText( __( 'Install Kit', 'hello-plus' ) );
-			setStep( 0 );
+			setStep( 1 );
 		}
 	}, [ elementorInstalled, elementorActive ] );
 
diff --git a/modules/admin/assets/js/pages/onboarding-page.js b/modules/admin/assets/js/pages/onboarding-page.js
index 56851252..3e7cbad4 100644
--- a/modules/admin/assets/js/pages/onboarding-page.js
+++ b/modules/admin/assets/js/pages/onboarding-page.js
@@ -12,6 +12,7 @@ import { GetStarted } from '../components/onboarding/screens/get-started';
 import Spinner from '../components/spinner/spinner';
 import { InstallKit } from '../components/onboarding/screens/install-kit';
 import { ReadyToGo } from '../components/onboarding/screens/ready-to-go';
+import { Preview } from '../components/onboarding/screens/preview';
 
 const style = {
 	position: 'fixed',
@@ -28,9 +29,11 @@ export const OnboardingPage = () => {
 	const [ message, setMessage ] = useState( '' );
 	const [ severity, setSeverity ] = useState( 'info' );
 	const [ loading, setLoading ] = useState( false );
+	const [ previewKit, setPreviewKit ] = useState( null );
+	const [ allowTracking, setAllowTracking ] = useState( true );
 
-	const { onboardingSettings: { nonce, modalCloseRedirectUrl } = {} } = useAdminContext();
-	const { stepAction, buttonText, step } = useGetCurrentStep();
+	const { onboardingSettings: { nonce, modalCloseRedirectUrl, kits } = {} } = useAdminContext();
+	const { stepAction, buttonText, step, setStep } = useGetCurrentStep();
 
 	const onClick = useCallback( async () => {
 		setMessage( '' );
@@ -39,8 +42,11 @@ export const OnboardingPage = () => {
 			step: stepAction,
 			_wpnonce: nonce,
 			slug: 'elementor',
+			allowTracking,
 		};
 
+		setLoading( true );
+
 		try {
 			switch ( stepAction ) {
 				case 'install-elementor':
@@ -54,14 +60,20 @@ export const OnboardingPage = () => {
 						if ( activate.ok ) {
 							setSeverity( 'success' );
 							setMessage( __( 'Elementor plugin has been installed and activated' ) );
+						} else {
+							throw new Error( __( 'Failed to activate Elementor plugin', 'hello-plus' ) );
 						}
 					}
+
+					setStep( 1 );
+					setMessage( '' );
 					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';
+					setStep( 1 );
+					setMessage( '' );
 					break;
 				case 'install-kit':
 					break;
@@ -69,8 +81,10 @@ export const OnboardingPage = () => {
 		} catch ( error ) {
 			setMessage( error.errorMessage );
 			setSeverity( 'error' );
+		} finally {
+			setLoading( false );
 		}
-	}, [ nonce, stepAction ] );
+	}, [ allowTracking, nonce, setStep, stepAction ] );
 
 	const onClose = () => {
 		window.location.href = modalCloseRedirectUrl;
@@ -80,10 +94,13 @@ export const OnboardingPage = () => {
 		<ThemeProvider colorScheme="auto">
 			<Modal open sx={ { zIndex: 100000 } } >
 				<Box style={ { ...style, display: 'flex', flexDirection: 'column' } }>
-					<TopBarContent onClose={ onClose } sx={ { borderBottom: '1px solid var(--divider-divider, rgba(0, 0, 0, 0.12))', mb: 4 } } iconSize="small" />
-					{ 0 === step && ! loading && ( <GetStarted severity={ severity } message={ message } buttonText={ buttonText } onClick={ onClick } /> ) }
-					{ 1 === step && ! loading && ( <InstallKit severity={ severity } message={ message } onClick={ onClick } /> ) }
-					{ 2 === step && ! loading && ( <ReadyToGo severity={ severity } message={ message } onClick={ onClick } /> ) }
+					{ ! previewKit && ( <TopBarContent onClose={ onClose } sx={ { borderBottom: '1px solid var(--divider-divider, rgba(0, 0, 0, 0.12))', mb: 4 } } iconSize="small" /> ) }
+					{ 0 === step && ! loading && ! previewKit && (
+						<GetStarted allowTracking={ allowTracking } setAllowTracking={ setAllowTracking } severity={ severity } message={ message } buttonText={ buttonText } onClick={ onClick } />
+					) }
+					{ 1 === step && ! loading && ! previewKit && ( <InstallKit setPreviewKit={ setPreviewKit } severity={ severity } message={ message } onClick={ onClick } kits={ kits } /> ) }
+					{ 2 === step && ! loading && ! previewKit && ( <ReadyToGo modalCloseRedirectUrl={ modalCloseRedirectUrl } /> ) }
+					{ previewKit && <Preview slug={ previewKit } setStep={ setStep } setPreviewKit={ setPreviewKit } title="Title" /> }
 					{ loading && <Spinner /> }
 				</Box>
 			</Modal>
diff --git a/modules/admin/classes/ajax/setup-wizard.php b/modules/admin/classes/ajax/setup-wizard.php
index 7f2e5462..fccf0de1 100644
--- a/modules/admin/classes/ajax/setup-wizard.php
+++ b/modules/admin/classes/ajax/setup-wizard.php
@@ -14,6 +14,13 @@ public function ajax_setup_wizard() {
 		check_ajax_referer( 'updates', 'nonce' );
 
 		$step = filter_input( INPUT_POST, 'step', FILTER_UNSAFE_RAW );
+		$allow_tracking = filter_input( INPUT_POST, 'allowTracking', FILTER_VALIDATE_BOOLEAN );
+
+		if ( $allow_tracking ) {
+			update_option( 'elementor_allow_tracking', true );
+		} else {
+			delete_option( 'elementor_allow_tracking' );
+		}
 
 		switch ( $step ) {
 			case 'install-elementor':
diff --git a/modules/admin/classes/rest/admin-config.php b/modules/admin/classes/rest/admin-config.php
index 31284b0e..f308072d 100644
--- a/modules/admin/classes/rest/admin-config.php
+++ b/modules/admin/classes/rest/admin-config.php
@@ -109,7 +109,7 @@ public function get_site_parts( array $config ) {
 	}
 
 	public function get_open_homepage_with_tab( $action ) {
-		return get_edit_post_link( get_option( 'page_on_front' ), 'admin' ) . '&action=elementor&active-document=34&tab=' . $action;
+		return get_edit_post_link( get_option( 'page_on_front' ), 'admin' ) . '&action=elementor&active-document=34&active-tab=' . $action;
 	}
 
 	public function get_quicklinks( $config ) {