Merge pull request #551 from newfold-labs/add/design-state-handler-fr…

…esh-install-check

Switch to Fresh Installation check before activating Wonder Theme

composer.json

@@ -36,7 +36,6 @@
 		"wp-cli/wp-config-transformer": "^1.3",
 		"newfold-labs/wp-module-onboarding-data": "^1.1",
 		"newfold-labs/wp-module-patterns": "^0.2",
-		"newfold-labs/wp-module-install-checker": "^1.0",
 		"newfold-labs/wp-module-facebook": "^1.0",
 		"wp-forge/helpers": "^2.0"
 	},

includes/LoginRedirect.php

@@ -4,7 +4,6 @@
 use NewfoldLabs\WP\Module\Onboarding\Data\Data;
 use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 
-use function NewfoldLabs\WP\ModuleLoader\container;
 use function WP_Forge\Helpers\dataGet;
 
 /**
@@ -72,11 +71,8 @@ public static function filter_redirect( $original_redirect, $user ) {
 		}
 
 		// Don't redirect to onboarding if the site is not a fresh installation.
-		if ( container()->has( 'isFreshInstallation' ) ) {
-			$is_fresh_installation = container()->get( 'isFreshInstallation' );
-			if ( false === $is_fresh_installation ) {
-				return $original_redirect;
-			}
+		if ( false === Data::is_fresh_installation() ) {
+			return $original_redirect;
 		}
 
 		// Don't redirect to onboarding if the 'coming_soon' mode is off. The user has launched their site.

src/OnboardingSPA/components/Button/NavCardButton/index.js

@@ -36,6 +36,7 @@ const NavCardButton = ( { text, disabled, className, icon } ) => {
 	async function saveDataAndExit() {
 		if ( currentData ) {
 			currentData.isComplete = new Date().getTime();
+			currentData.data.siteOverrideConsent = false;
 			setFlow( currentData );
 		}
 

src/OnboardingSPA/components/Header/components/SiteBuildHeader/step-navigation.js

@@ -78,6 +78,7 @@ const Next = ( { path, showErrorDialog } ) => {
 async function saveDataAndExit( currentData ) {
 	if ( currentData ) {
 		currentData.isComplete = new Date().getTime();
+		currentData.data.siteOverrideConsent = false;
 		setFlow( currentData );
 	}
 

src/OnboardingSPA/components/StateHandlers/Design/contents.js

@@ -28,6 +28,17 @@ const getContents = ( brandName ) => {
 				'wp-module-onboarding'
 			),
 		},
+		exitModal: {
+			title: __(
+				'It looks like you may have an existing website',
+				'wp-module-onboarding'
+			),
+			description: __(
+				'Going through this setup will change your active theme, WordPress settings, add content – would you like to continue?',
+				'wp-module-onboarding'
+			),
+			buttonText: __( 'Exit to WordPress', 'wp-module-onboarding' ),
+		},
 	};
 };
 

src/OnboardingSPA/components/StateHandlers/Design/index.js

@@ -1,7 +1,6 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Fragment, useEffect } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 import { StepLoader } from '../../Loaders';
 import { store as nfdOnboardingStore } from '../../../store';
@@ -21,6 +20,7 @@ import {
 import { StepErrorState } from '../../ErrorState';
 import getContents from './contents';
 import ExitToWordPress from '../../ExitToWordPress';
+import { setFlow } from '../../../utils/api/flow';
 
 const DesignStateHandler = ( {
 	children,
@@ -30,12 +30,18 @@ const DesignStateHandler = ( {
 } ) => {
 	const isLargeViewport = useViewportMatch( 'medium' );
 
-	const { storedThemeStatus, brandName } = useSelect( ( select ) => {
-		return {
-			storedThemeStatus: select( nfdOnboardingStore ).getThemeStatus(),
-			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
-		};
-	}, [] );
+	const { storedThemeStatus, brandName, isFreshInstallation, currentData } =
+		useSelect( ( select ) => {
+			return {
+				storedThemeStatus:
+					select( nfdOnboardingStore ).getThemeStatus(),
+				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+				isFreshInstallation:
+					select( nfdOnboardingStore ).getIsFreshInstallation(),
+				currentData:
+					select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			};
+		}, [] );
 
 	const contents = getContents( brandName );
 
@@ -44,6 +50,7 @@ const DesignStateHandler = ( {
 		setIsDrawerOpened,
 		setIsDrawerSuppressed,
 		setIsHeaderNavigationEnabled,
+		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	const checkThemeStatus = async () => {
@@ -107,11 +114,7 @@ const DesignStateHandler = ( {
 				}
 				break;
 			case THEME_STATUS_NOT_ACTIVE:
-				if ( false === render ) {
-					// When render is false add this condition because
-					// handleRender() func does not run here and theme is not activated.
-					expediteInstall();
-				}
+				installThemeManually();
 				break;
 			default:
 				updateThemeStatus( themeStatus );
@@ -121,10 +124,18 @@ const DesignStateHandler = ( {
 	useEffect( () => {
 		handleNavigationState();
 
+		if (
+			true === render &&
+			! isFreshInstallation &&
+			currentData.data.siteOverrideConsent === false
+		) {
+			return;
+		}
+
 		if ( storedThemeStatus === THEME_STATUS_INIT ) {
 			handleThemeStatus( storedThemeStatus );
 		}
-	}, [ storedThemeStatus ] );
+	}, [ storedThemeStatus, isFreshInstallation, currentData ] );
 
 	const installThemeManually = async () => {
 		updateThemeStatus( THEME_STATUS_INSTALLING );
@@ -133,6 +144,7 @@ const DesignStateHandler = ( {
 			true,
 			false
 		);
+
 		if ( themeInstallStatus.error ) {
 			return updateThemeStatus( THEME_STATUS_FAILURE );
 		}
@@ -142,28 +154,29 @@ const DesignStateHandler = ( {
 		}
 	};
 
+	const handleModalClose = () => {
+		currentData.data.siteOverrideConsent = true;
+		setCurrentOnboardingData( currentData );
+		setFlow( currentData );
+	};
+
 	const handleRender = () => {
+		if (
+			! isFreshInstallation &&
+			currentData.data.siteOverrideConsent === false
+		) {
+			return (
+				<ExitToWordPress
+					showButton={ false }
+					isModalOpen={ true }
+					modalTitle={ contents.exitModal.title }
+					modalText={ contents.exitModal.description }
+					modalOnClose={ handleModalClose }
+					modalExitButtonText={ contents.exitModal.buttonText }
+				/>
+			);
+		}
 		switch ( storedThemeStatus ) {
-			case THEME_STATUS_NOT_ACTIVE:
-				return (
-					<ExitToWordPress
-						showButton={ false }
-						isModalOpen={ true }
-						modalTitle={ __(
-							'It looks like you may have an existing website',
-							'wp-module-onboarding'
-						) }
-						modalText={ __(
-							'Going through this setup will change your active theme, WordPress settings, add content – would you like to continue?',
-							'wp-module-onboarding'
-						) }
-						modalOnClose={ installThemeManually }
-						modalExitButtonText={ __(
-							'Exit to WordPress',
-							'wp-module-onboarding'
-						) }
-					/>
-				);
 			case THEME_STATUS_FAILURE:
 				return (
 					<StepErrorState

src/OnboardingSPA/store/actions.js

@@ -14,7 +14,6 @@ export function setRuntime( runtime ) {
 		siteUrl: runtime.siteUrl,
 		migrated: true,
 		currentFlow: runtime.currentFlow ?? DEFAULT_FLOW,
-		stepPreviewData: runtime.previewSettings.stepPreviewData,
 	};
 	return {
 		type: 'SET_RUNTIME',

src/OnboardingSPA/store/selectors.js

@@ -446,3 +446,7 @@ export function getSiteGenErrorStatus( state ) {
 export function getInteractionDisabled( state ) {
 	return state.flow.interactionDisabled;
 }
+
+export function getIsFreshInstallation( state ) {
+	return state.runtime.isFreshInstallation;
+}