Merge pull request #466 from newfold-labs/fix-disable-back

Disable the back button in the normal flow when a user lands from the error state.
newfold-labs · Feb 28, 2024 · 1473d95 · 1473d95
2 parents e59a7ef + ae91460
commit 1473d95
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 14 deletions.
diff --git a/src/OnboardingSPA/components/Header/components/SiteBuildHeader/step-navigation.js b/src/OnboardingSPA/components/Header/components/SiteBuildHeader/step-navigation.js
@@ -13,6 +13,7 @@ import {
 	sendOnboardingEvent,
 } from '../../../../utils/analytics/hiive';
 import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/constants';
+import { stepWelcome } from '../../../../steps/GetStarted/Welcome/step';
 
 /**
  * Back step Navigation button.
@@ -21,7 +22,7 @@ import { ACTION_ONBOARDING_COMPLETE } from '../../../../utils/analytics/hiive/co
  *
  * @return {WPComponent} Back Component
  */
-const Back = ( { path, showErrorDialog } ) => {
+const Back = ( { path, showErrorDialog, disabled } ) => {
 	const { setNavErrorContinuePath } = useDispatch( nfdOnboardingStore );
 	const navigate = useNavigate();
 	const navigateBack = () => {
@@ -36,6 +37,7 @@ const Back = ( { path, showErrorDialog } ) => {
 			className="navigation-buttons navigation-buttons_back"
 			onClick={ navigateBack }
 			variant="secondary"
+			disabled={ disabled }
 		>
 			<Icon icon={ chevronLeft } />
 			{ __( 'Back', 'wp-module-onboarding' ) }
@@ -108,19 +110,22 @@ const Finish = ( { currentData, saveDataAndExitFunc } ) => (
  * @return {WPComponent} StepNavigation Component
  */
 const StepNavigation = () => {
-	const { previousStep, nextStep, currentData, showErrorDialog } = useSelect(
-		( select ) => {
-			return {
-				nextStep: select( nfdOnboardingStore ).getNextStep(),
-				previousStep: select( nfdOnboardingStore ).getPreviousStep(),
-				currentData:
-					select( nfdOnboardingStore ).getCurrentOnboardingData(),
-				showErrorDialog:
-					select( nfdOnboardingStore ).getShowErrorDialog(),
-			};
-		},
-		[]
-	);
+	const {
+		currentStep,
+		previousStep,
+		nextStep,
+		currentData,
+		showErrorDialog,
+	} = useSelect( ( select ) => {
+		return {
+			currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+			previousStep: select( nfdOnboardingStore ).getPreviousStep(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			showErrorDialog: select( nfdOnboardingStore ).getShowErrorDialog(),
+		};
+	}, [] );
 	const isFirstStep = null === previousStep || false === previousStep;
 	const isLastStep = null === nextStep || false === nextStep;
 	return (
@@ -130,6 +135,11 @@ const StepNavigation = () => {
 					<Back
 						path={ previousStep.path }
 						showErrorDialog={ showErrorDialog }
+						disabled={
+							currentStep === stepWelcome
+								? currentData.continueWithoutAi
+								: false
+						}
 					/>
 				) }
 				{ isLastStep ? (

diff --git a/src/OnboardingSPA/components/SiteGenError/index.js b/src/OnboardingSPA/components/SiteGenError/index.js
@@ -33,6 +33,7 @@ const SiteGenSiteError = () => {
 		updateInitialize,
 		setCurrentOnboardingData,
 		updateSiteGenErrorStatus,
+		setContinueWithoutAi,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -75,7 +76,10 @@ const SiteGenSiteError = () => {
 
 		window.nfdOnboarding.currentFlow = newFlow;
 		currentData.activeFlow = newFlow;
+		currentData.continueWithoutAi = true;
+		setContinueWithoutAi( true );
 		setCurrentOnboardingData( currentData );
+		updateSiteGenErrorStatus( false );
 		if ( SITEGEN_FLOW !== newFlow ) {
 			updateInitialize( true );
 		}

diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js
@@ -29,6 +29,7 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => {
 		updateDesignRoutes,
 		updateInitialize,
 		setCurrentOnboardingData,
+		setContinueWithoutAi,
 	} = useDispatch( nfdOnboardingStore );
 
 	const switchFlow = ( newFlow ) => {
@@ -48,6 +49,8 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => {
 
 		window.nfdOnboarding.currentFlow = newFlow;
 		currentData.activeFlow = newFlow;
+		currentData.continueWithoutAi = false;
+		setContinueWithoutAi( false );
 		setCurrentOnboardingData( currentData );
 		if ( SITEGEN_FLOW !== newFlow ) {
 			updateInitialize( true );

diff --git a/src/OnboardingSPA/store/actions.js b/src/OnboardingSPA/store/actions.js
@@ -333,3 +333,9 @@ export function setInteractionDisabled( interactionDisabled ) {
 		interactionDisabled,
 	};
 }
+export function setContinueWithoutAi( continueWithoutAi ) {
+	return {
+		type: 'SET_FLOW_WITHOUT_AI',
+		continueWithoutAi,
+	};
+}
diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js
@@ -127,6 +127,11 @@ export function flow(
 				...state,
 				interactionDisabled: action.interactionDisabled,
 			};
+		case 'SET_FLOW_WITHOUT_AI':
+			return {
+				...state,
+				flow: action.continueWithoutAi,
+			};
 	}
 
 	return state;