Skip Fork Screen if Sitegen Capability is disabled and fix back button issue

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

@@ -126,27 +126,21 @@ const StepNavigation = () => {
 			showErrorDialog: select( nfdOnboardingStore ).getShowErrorDialog(),
 		};
 	}, [] );
-	let isFirstStep = null === previousStep || false === previousStep;
+	const isFirstStep = null === previousStep || false === previousStep;
 	const isLastStep = null === nextStep || false === nextStep;
 
-	let isDisabled = false;
-	if ( currentStep === stepWelcome ) {
-		if ( currentData.continueWithoutAi === true ) {
-			isFirstStep = false;
-			isDisabled = false;
-		} else {
-			isFirstStep = true;
-		}
-	}
-
 	return (
 		<div className="nfd-onboarding-header__step-navigation">
 			<ButtonGroup style={ { display: 'flex', columnGap: '0.5rem' } }>
 				{ isFirstStep || isLastStep ? null : (
 					<Back
 						path={ previousStep.path }
 						showErrorDialog={ showErrorDialog }
-						disabled={ isDisabled }
+						disabled={
+							currentStep === stepWelcome
+								? currentData.continueWithoutAi
+								: false
+						}
 					/>
 				) }
 				{ isLastStep ? (

src/OnboardingSPA/components/SiteGenError/index.js

@@ -33,7 +33,6 @@ const SiteGenSiteError = () => {
 		updateInitialize,
 		setCurrentOnboardingData,
 		updateSiteGenErrorStatus,
-		setContinueWithoutAi,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -77,7 +76,6 @@ const SiteGenSiteError = () => {
 		window.nfdOnboarding.currentFlow = newFlow;
 		currentData.activeFlow = newFlow;
 		currentData.continueWithoutAi = true;
-		setContinueWithoutAi( true );
 		setCurrentOnboardingData( currentData );
 		updateSiteGenErrorStatus( false );
 		if ( SITEGEN_FLOW !== newFlow ) {

src/OnboardingSPA/components/StartOptions/index.js

@@ -48,7 +48,7 @@ const StartOptions = ( { questionnaire, oldFlow, options } ) => {
 
 		window.nfdOnboarding.currentFlow = newFlow;
 		currentData.activeFlow = newFlow;
-		currentData.continueWithoutAi = true;
+		currentData.continueWithoutAi = false;
 		setCurrentOnboardingData( currentData );
 		if ( SITEGEN_FLOW !== newFlow ) {
 			updateInitialize( true );

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

@@ -17,7 +17,14 @@
 import EcommerceStepLoader from '../../Loaders/Step/Ecommerce';
 import SiteBuild from '../../NewfoldInterfaceSkeleton/SiteBuild';
 import SiteGen from '../../NewfoldInterfaceSkeleton/SiteGen';
-import { validateFlow } from '../../../data/flows/utils';
+import {
+	validateFlow,
+	removeFromAllSteps,
+	removeFromTopSteps,
+	removeFromRoutes,
+} from '../../../data/flows/utils';
+import { resolveGetDataForFlow } from '../../../data/flows';
+import { stepTheFork } from '../../../steps/TheFork/step';
 
 const FlowStateHandler = () => {
 	const location = useLocation();
@@ -37,6 +44,9 @@
 		setSidebarActiveView,
 		setActiveFlow,
 		setActiveStep,
+		updateAllSteps,
+		updateTopSteps,
+		updateRoutes,
 	} = useDispatch( nfdOnboardingStore );
 
 	const handleCommerceFlow = async ( flow, retries = 0 ) => {
@@ -79,6 +89,28 @@
 		setSidebarActiveView( false );
 	};
 
+	const checkCapability = () => {
+		if ( ! validateFlow( brandConfig, SITEGEN_FLOW ) ) {
+			const getData = resolveGetDataForFlow( DEFAULT_FLOW );
+			const data = getData();
+
+			const updateAllStep = removeFromAllSteps( data.steps, [
+				stepTheFork,
+			] );
+			updateAllSteps( updateAllStep.allSteps );
+
+			const updateTopStep = removeFromTopSteps( data?.topSteps, [
+				stepTheFork,
+			] );
+			updateTopSteps( updateTopStep.topSteps );
+
+			const updateRoute = removeFromRoutes( data.routes, [
+				stepTheFork,
+			] );
+			updateRoutes( updateRoute.routes );
+		}
+	};
+
 	useEffect( () => {
 		if ( window.nfdOnboarding?.newFlow ) {
 			const flow = window.nfdOnboarding.newFlow;
@@ -90,7 +122,7 @@
 			setActiveFlow( onboardingFlow );
 			setActiveStep( location.pathname );
 		}
 	}, [ location.pathname ] );
 
 	// TODO: Remove handleRender and replace with only children once Chapter Prioritization is enabled.
 	const handleRender = () => {
@@ -102,6 +134,7 @@
 		switch ( window.nfdOnboarding.currentFlow ) {
 			case DEFAULT_FLOW:
 			case ECOMMERCE_FLOW:
+				checkCapability();
 				return <SiteBuild />;
 			case SITEGEN_FLOW:
 				return <SiteGen />;

src/OnboardingSPA/data/flows/utils.js

@@ -50,3 +50,29 @@ export const validateFlow = ( brandConfig, flow ) => {
 	}
 	return true;
 };
+
+export const removeFromTopSteps = ( topSteps, conditionalSteps ) => {
+	const conditionalStepsPaths = new Set(
+		conditionalSteps.map( ( a ) => a.path )
+	);
+
+	return {
+		topSteps: filter(
+			topSteps,
+			( topStep ) => ! conditionalStepsPaths.has( topStep.path )
+		),
+	};
+};
+
+export const removeFromRoutes = ( routes, conditionalSteps ) => {
+	const conditionalStepsPaths = new Set(
+		conditionalSteps.map( ( a ) => a.path )
+	);
+
+	return {
+		routes: filter(
+			routes,
+			( route ) => ! conditionalStepsPaths.has( route.path )
+		),
+	};
+};

src/OnboardingSPA/steps/TheFork/index.js

@@ -10,7 +10,7 @@ import {
 	pluginDashboardPage,
 } from '../../../constants';
 
-import { DEFAULT_FLOW, SITEGEN_FLOW } from '../../data/flows/constants';
+import { DEFAULT_FLOW } from '../../data/flows/constants';
 import HeadingWithSubHeading from '../../components/HeadingWithSubHeading/SiteGen/index';
 import StartOptions from '../../components/StartOptions';
 import getContents from './contents';
@@ -21,22 +21,13 @@ import {
 	trackOnboardingEvent,
 } from '../../utils/analytics/hiive';
 import { ACTION_SITEGEN_FORK_OPTION_SELECTED } from '../../utils/analytics/hiive/constants';
-import { validateFlow } from '../../data/flows/utils';
-import { resolveGetDataForFlow } from '../../data/flows';
-import { useNavigate } from 'react-router-dom';
 
 const TheFork = () => {
-	const { migrationUrl, brandConfig, currentData } = useSelect(
-		( select ) => {
-			return {
-				migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
-				brandConfig:
-					select( nfdOnboardingStore ).getNewfoldBrandConfig(),
-				currentData:
-					select( nfdOnboardingStore ).getCurrentOnboardingData(),
-			};
-		}
-	);
+	const { migrationUrl } = useSelect( ( select ) => {
+		return {
+			migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(),
+		};
+	} );
 
 	const {
 		setIsHeaderEnabled,
@@ -46,18 +37,9 @@ const TheFork = () => {
 		setIsHeaderNavigationEnabled,
 		setFooterActiveView,
 		setHideFooterNav,
-		updateAllSteps,
-		updateTopSteps,
-		updateRoutes,
-		updateDesignRoutes,
-		updateInitialize,
-		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
-	const navigate = useNavigate();
-
 	useEffect( () => {
-		checkHasAiAccess();
 		setHideFooterNav( true );
 		setIsHeaderEnabled( false );
 		setSidebarActiveView( false );
@@ -67,25 +49,6 @@ const TheFork = () => {
 		setFooterActiveView( FOOTER_SITEGEN );
 	} );
 
-	const checkHasAiAccess = () => {
-		if ( false === validateFlow( brandConfig, SITEGEN_FLOW ) ) {
-			const currentFlow = window.nfdOnboarding.currentFlow;
-			const getData = resolveGetDataForFlow( DEFAULT_FLOW );
-			const data = getData();
-			updateAllSteps( data.steps );
-			updateTopSteps( data?.topSteps );
-			updateRoutes( data.routes );
-			updateDesignRoutes( data?.designRoutes );
-			if ( SITEGEN_FLOW !== currentFlow ) {
-				window.nfdOnboarding.oldFlow = currentFlow;
-			}
-			window.nfdOnboarding.currentFlow = DEFAULT_FLOW;
-			currentData.activeFlow = DEFAULT_FLOW;
-			setCurrentOnboardingData( currentData );
-			updateInitialize( true );
-			navigate( data.steps[ 1 ].path );
-		}
-	};
 	const oldFlow = window.nfdOnboarding?.oldFlow
 		? window.nfdOnboarding.oldFlow
 		: DEFAULT_FLOW;