Return to old flow when prioritization is disabled

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

@@ -1,6 +1,7 @@
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { useLocation } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { getFragment } from '@wordpress/url';
 
 import { store as nfdOnboardingStore } from '../../../store';
 import { switchFlow } from '../../../utils/api/flow';
@@ -21,11 +22,15 @@
 	ACTION_ONBOARDING_STARTED,
 } from '../../../utils/analytics/hiive/constants';
 import { ECOMMERCE_FLOW } from '../../../data/flows/constants';
-import { getQueryParam } from '../../../utils';
+import { getQueryParam, removeQueryParam } from '../../../utils';
+import { commerce } from '../../../chapters/commerce';
+import EcommerceStepLoader from '../../Loaders/Step/Ecommerce';
 
 const FlowStateHandler = ( { children } ) => {
 	const location = useLocation();
 
+	const [ newFlow, setNewFlow ] = useState( false );
+
 	const {
 		brandConfig,
 		experienceLevel,
@@ -59,13 +64,20 @@
 
 	const handleCommerceFlow = async ( flow, retries = 0 ) => {
 		if ( retries >= MAX_RETRIES_FLOW_SWITCH ) {
-			return;
+			return setNewFlow( false );
 		}
 		const response = switchFlow( flow );
 		if ( response?.error ) {
 			retries = retries + 1;
 			return handleCommerceFlow( flow, retries );
 		}
+
+		// TODO: Remove code below once Chapter Prioritization is enabled.
+		const firstEcommerceStep = commerce.steps[ 0 ];
+		const fragment = getFragment( window.location.href );
+		const redirect = removeQueryParam( window.location.href, 'flow' ).replace( fragment, '' );
+		window.location.replace( `${ redirect }#${ firstEcommerceStep.path }` );
+		window.location.reload();
 	};
 
 	const switchToNewFlow = async ( flow ) => {
@@ -78,6 +90,8 @@
 			case ECOMMERCE_FLOW:
 				handleCommerceFlow( flow );
 				break;
+			default:
+				setNewFlow( false );
 		}
 	};
 
@@ -156,11 +170,11 @@
 		if ( false !== brandConfig?.prioritization ) {
 			return prioritizeFlow();
 		}
 	}, [ experienceLevel, topPriority ] );
 
 	useEffect( () => {
 		trackChapters();
 	}, [ currentStep ] );
 
 	useEffect( () => {
 		if ( window.nfdOnboarding?.newFlow ) {
@@ -168,9 +182,19 @@
 			switchToNewFlow( flow );
 			window.nfdOnboarding.newFlow = undefined;
 		}
 	}, [ location.pathname ] );
 
-	return <>{ children }</>;
+	// TODO: Remove handleRender and replace with only children once Chapter Prioritization is enabled.
+	const handleRender = () => {
+		switch ( newFlow ) {
+			case 'ecommerce':
+				return <EcommerceStepLoader />;
+			default:
+				return children;
+		}
+	};
+
+	return <>{ handleRender() }</>;
 };
 
 export default FlowStateHandler;

src/OnboardingSPA/data/flows/ecommerce.js

@@ -35,11 +35,16 @@ export const getSteps = ( chapters = initialChapters ) => {
 	chapters.forEach( ( chapter ) => {
 		steps = steps.concat( [
 			...chapter.steps,
-			// ...chapter.interstitialSteps,
+			// ...chapter.interstitialSteps, // TODO: Add interstitialSteps once Chapter Prioritization is enabled.
 		] );
 	} );
 	steps = steps.concat( [ stepComplete, stepWhatNext ] );
-	return steps;
+	// TODO: Filter to be removed once Chapter Prioritization is enabled.
+	return filter( steps, ( step ) => {
+		return (
+			! step.path.includes( '/wp-setup/step/top-priority' )
+		);
+	} );
 };
 
 export const getRoutes = ( chapters = initialChapters ) => {
@@ -49,11 +54,16 @@ export const getRoutes = ( chapters = initialChapters ) => {
 		routes = routes.concat( [
 			...chapter.steps,
 			...chapter.conditionalSteps,
-			// ...chapter.interstitialSteps,
+			// ...chapter.interstitialSteps, // TODO: Add interstitialSteps once Chapter Prioritization is enabled.
 		] );
 	} );
 	routes = routes.concat( [ stepComplete, stepWhatNext ] );
-	return routes;
+	// TODO: Filter to be removed once Chapter Prioritization is enabled.
+	return filter( routes, ( route ) => {
+		return (
+			! route.path.includes( '/wp-setup/step/top-priority' )
+		);
+	} );
 };
 
 const getPseudoStepForEcommerce = ( firstEcommerceStep ) => {
@@ -79,7 +89,8 @@ export const getTopSteps = ( steps ) => {
 	return filter( steps, ( step ) => {
 		return (
 			step instanceof PseudoStep ||
-			! step.path.includes( '/ecommerce/step' )
+			( ! step.path.includes( '/ecommerce/step' ) &&
+			! step.path.includes( '/wp-setup/step/top-priority' ) ) // TODO: Filter to be removed once Chapter Prioritization is enabled.
 		);
 	} );
 };