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 (