diff --git a/src/OnboardingSPA/components/Button/NavCardButton/index.js b/src/OnboardingSPA/components/Button/NavCardButton/index.js index 406ac39d7..25708bd1e 100644 --- a/src/OnboardingSPA/components/Button/NavCardButton/index.js +++ b/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 ); } diff --git a/src/OnboardingSPA/components/Header/components/SiteBuildHeader/step-navigation.js b/src/OnboardingSPA/components/Header/components/SiteBuildHeader/step-navigation.js index 940c5543e..480b13928 100644 --- a/src/OnboardingSPA/components/Header/components/SiteBuildHeader/step-navigation.js +++ b/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 ); } diff --git a/src/OnboardingSPA/components/StateHandlers/Design/contents.js b/src/OnboardingSPA/components/StateHandlers/Design/contents.js index 83795badf..30f13621b 100644 --- a/src/OnboardingSPA/components/StateHandlers/Design/contents.js +++ b/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' ), + }, }; }; diff --git a/src/OnboardingSPA/components/StateHandlers/Design/index.js b/src/OnboardingSPA/components/StateHandlers/Design/index.js index 58edd5683..e19a85e8b 100644 --- a/src/OnboardingSPA/components/StateHandlers/Design/index.js +++ b/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 ( + + ); + } switch ( storedThemeStatus ) { - case THEME_STATUS_NOT_ACTIVE: - return ( - - ); case THEME_STATUS_FAILURE: return (