updated colors and typography steps navigation

src/OnboardingSPA/components/App/index.js

@@ -8,10 +8,9 @@ import { setFlow } from '../../utils/api/flow';
 import { getSettings, setSettings } from '../../utils/api/settings';
 import { isEmpty, updateWPSettings } from '../../utils/api/ecommerce';
 import { store as nfdOnboardingStore } from '../../store';
-import { conditionalSteps } from '../../data/routes/';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { kebabCase, orderBy, filter } from 'lodash';
+import { kebabCase } from 'lodash';
 import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { SlotFillProvider } from '@wordpress/components';
@@ -39,9 +38,6 @@ const App = () => {
 		currentData,
 		socialData,
 		firstStep,
-		routes,
-		designSteps,
-		allSteps,
 	} = useSelect( ( select ) => {
 		return {
 			isDrawerOpen: select( nfdOnboardingStore ).isDrawerOpened(),
@@ -51,9 +47,6 @@ const App = () => {
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 			socialData: select( nfdOnboardingStore ).getOnboardingSocialData(),
 			firstStep: select( nfdOnboardingStore ).getFirstStep(),
-			routes: select( nfdOnboardingStore ).getRoutes(),
-			allSteps: select( nfdOnboardingStore ).getAllSteps(),
-			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
 		};
 	}, [] );
 
@@ -63,9 +56,6 @@ const App = () => {
 	const {
 		setActiveStep,
 		setActiveFlow,
-		updateRoutes,
-		updateDesignSteps,
-		updateAllSteps,
 		flushQueue,
 		enqueueRequest,
 		setOnboardingSocialData,
@@ -148,88 +138,12 @@ const App = () => {
 		}
 	}
 
-	const addColorAndTypographyRoutes = () => {
-		const updates = removeColorAndTypographyRoutes();
-		const steps = [
-			conditionalSteps.designColors,
-			conditionalSteps.designTypography,
-		];
-		return {
-			routes: orderBy(
-				updates.routes.concat( steps ),
-				[ 'priority' ],
-				[ 'asc' ]
-			),
-			allSteps: orderBy(
-				updates.allSteps.concat( steps ),
-				[ 'priority' ],
-				[ 'asc' ]
-			),
-			designSteps: orderBy(
-				updates.designSteps.concat( steps ),
-				[ 'priority' ],
-				[ 'asc' ]
-			),
-		};
-	};
-
-	const removeColorAndTypographyRoutes = () => {
-		return {
-			routes: filter(
-				routes,
-				( route ) =>
-					! route.path.includes(
-						conditionalSteps.designColors.path
-					) &&
-					! route.path.includes(
-						conditionalSteps.designTypography.path
-					)
-			),
-			allSteps: filter(
-				allSteps,
-				( allStep ) =>
-					! allStep.path.includes(
-						conditionalSteps.designColors.path
-					) &&
-					! allStep.path.includes(
-						conditionalSteps.designTypography.path
-					)
-			),
-			designSteps: filter(
-				designSteps,
-				( designStep ) =>
-					! designStep.path.includes(
-						conditionalSteps.designColors.path
-					) &&
-					! designStep.path.includes(
-						conditionalSteps.designTypography.path
-					)
-			),
-		};
-	};
-
-	function handleColorsAndTypographyRoutes() {
-		if (
-			location?.pathname.includes( 'colors' ) ||
-			location?.pathname.includes( 'typography' )
-		) {
-			const updates = currentData?.data?.customDesign
-				? addColorAndTypographyRoutes()
-				: removeColorAndTypographyRoutes();
-
-			updateRoutes( updates.routes );
-			updateDesignSteps( updates.designSteps );
-			updateAllSteps( updates.allSteps );
-		}
-	}
-
 	useEffect( () => {
 		document.body.classList.add( `nfd-brand-${ newfoldBrand }` );
 	}, [ newfoldBrand ] );
 
 	useEffect( () => {
 		syncStoreToDB();
-		handleColorsAndTypographyRoutes();
 		if ( location.pathname.includes( '/step' ) ) {
 			setActiveFlow( onboardingFlow );
 			setActiveStep( location.pathname );

src/OnboardingSPA/data/routes/default-flow.js

@@ -327,6 +327,8 @@ export const steps = [
 		VIEW: VIEW_DESIGN_THEME_STYLES_PREVIEW,
 		designDrawerActiveLinkIncludes: '/wp-setup/step/design/theme-styles/',
 		patternId: 'theme-styles',
+		excludeNextStepsFromRouter: true,
+		numberOfStepsToSkip: 2,
 		sidebars: {
 			LearnMore: {
 				SidebarComponents: [
@@ -335,26 +337,44 @@ export const steps = [
 			},
 		},
 	},
+	{
+		path: '/wp-setup/step/design/colors',
+		title: __( 'Colors', 'wp-module-onboarding' ),
+		Component: StepDesignColors,
+		Icon: color,
+		priority: 180,
+		VIEW: VIEW_DESIGN_COLORS,
+		patternId: 'theme-styles',
+		sidebars: {
+			LearnMore: {
+				SidebarComponents: [ StepDesignColorsLearnMoreSidebar ],
+			},
+		},
+	},
+	{
+		path: '/wp-setup/step/design/typography',
+		title: __( 'Typography', 'wp-module-onboarding' ),
+		Component: StepDesignTypography,
+		Icon: typography,
+		priority: 200,
+		VIEW: VIEW_DESIGN_TYPOGRAPHY,
+		patternId: 'theme-styles',
+		sidebars: {
+			LearnMore: {
+				SidebarComponents: [ StepDesignTypographyLearnMoreSidebar ],
+			},
+		},
+	},
 	{
 		path: '/wp-setup/step/design/header-menu',
 		title: __( 'Header & Menu', 'wp-module-onboarding' ),
-		heading: __(
-			"Let's make the right things visible",
-			'wp-module-onboarding'
-		),
-		subheading: __(
-			'Your site header helps organize your story for visitors.',
-			'wp-module-onboarding'
-		),
-		description: __(
-			'A well-organized site makes visitors feel smart, helping you keep and convert them.',
-			'wp-module-onboarding'
-		),
 		Component: StepDesignHeaderMenu,
 		Icon: header,
 		priority: 220,
 		VIEW: VIEW_DESIGN_HEADER_MENU,
 		patternId: 'header-menu',
+		excludePreviousStepsFromRouter: true,
+		numberOfStepsToSkip: 2,
 		sidebars: {
 			LearnMore: {
 				SidebarComponents: [ StepDesignHeaderMenuLearnMoreSidebar ],

src/OnboardingSPA/pages/Steps/DesignColors/index.js

@@ -21,21 +21,34 @@ const StepDesignColors = () => {
 	const location = useLocation();
 	const [ pattern, setPattern ] = useState();
 
-	const { currentStep, themeStatus } = useSelect( ( select ) => {
+	const { currentStep, themeStatus, currentData } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
 				location.pathname
 			),
 			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 		};
 	}, [] );
 
-	const { setDrawerActiveView, setSidebarActiveView, updateThemeStatus } =
-		useDispatch( nfdOnboardingStore );
+	const {
+		setDrawerActiveView,
+		setSidebarActiveView,
+		updateThemeStatus,
+		setCurrentOnboardingData,
+	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_DESIGN_COLORS );
+
+		// if the step was accessed directly then set the customDesign value to true
+		// so that the checkbox on design preview appears checked
+		if ( ! currentData.data.customDesign ) {
+			currentData.data.customDesign = true;
+			setCurrentOnboardingData( currentData );
+		}
 	}, [] );
 
 	const getStylesAndPatterns = async () => {
@@ -50,7 +63,9 @@ const StepDesignColors = () => {
 	};
 
 	useEffect( () => {
-		if ( THEME_STATUS_ACTIVE === themeStatus ) getStylesAndPatterns();
+		if ( THEME_STATUS_ACTIVE === themeStatus ) {
+			getStylesAndPatterns();
+		}
 	}, [ themeStatus ] );
 
 	return (

src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js

@@ -2,10 +2,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { CheckboxControl } from '@wordpress/components';
-import {
-	addColorAndTypographyRoutes,
-	removeColorAndTypographyRoutes,
-} from '../utils';
 import { conditionalSteps } from '../../../../data/routes';
 import {
 	LivePreview,
@@ -30,33 +26,20 @@ const StepDesignThemeStylesPreview = () => {
 	const [ customize, setCustomize ] = useState( false );
 	const navigate = useNavigate();
 
-	const {
-		currentStep,
-		currentData,
-		routes,
-		designSteps,
-		allSteps,
-		themeStatus,
-	} = useSelect( ( select ) => {
+	const { currentStep, currentData, themeStatus } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
 				location.pathname
 			),
 			currentData:
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
-			routes: select( nfdOnboardingStore ).getRoutes(),
-			allSteps: select( nfdOnboardingStore ).getAllSteps(),
-			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
 			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
 		};
 	}, [] );
 
 	const {
 		setDrawerActiveView,
 		setSidebarActiveView,
-		updateRoutes,
-		updateDesignSteps,
-		updateAllSteps,
 		setCurrentOnboardingData,
 		updateThemeStatus,
 	} = useDispatch( nfdOnboardingStore );
@@ -83,24 +66,6 @@ const StepDesignThemeStylesPreview = () => {
 		updateOnboardingData = true,
 		context = 'click'
 	) => {
-		let updates;
-		if ( selected ) {
-			updates = addColorAndTypographyRoutes(
-				routes,
-				allSteps,
-				designSteps
-			);
-		} else {
-			updates = removeColorAndTypographyRoutes(
-				routes,
-				allSteps,
-				designSteps
-			);
-		}
-
-		updateRoutes( updates.routes );
-		updateDesignSteps( updates.designSteps );
-		updateAllSteps( updates.allSteps );
 		setCustomize( selected );
 
 		if ( updateOnboardingData ) {
@@ -114,7 +79,9 @@ const StepDesignThemeStylesPreview = () => {
 	};
 
 	useEffect( () => {
-		if ( themeStatus === THEME_STATUS_ACTIVE ) getStylesAndPatterns();
+		if ( themeStatus === THEME_STATUS_ACTIVE ) {
+			getStylesAndPatterns();
+		}
 	}, [ themeStatus ] );
 
 	return (

src/OnboardingSPA/pages/Steps/DesignTypography/index.js

@@ -21,21 +21,34 @@ const StepDesignTypography = () => {
 	const location = useLocation();
 	const [ pattern, setPattern ] = useState();
 
-	const { currentStep, themeStatus } = useSelect( ( select ) => {
+	const { currentStep, themeStatus, currentData } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
 				location.pathname
 			),
 			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 		};
 	}, [] );
 
-	const { updateThemeStatus, setDrawerActiveView, setSidebarActiveView } =
-		useDispatch( nfdOnboardingStore );
+	const {
+		updateThemeStatus,
+		setDrawerActiveView,
+		setSidebarActiveView,
+		setCurrentOnboardingData,
+	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
 		setSidebarActiveView( SIDEBAR_LEARN_MORE );
 		setDrawerActiveView( VIEW_DESIGN_TYPOGRAPHY );
+
+		// if the step was accessed directly then set the customDesign value to true
+		// so that the checkbox on design preview appears checked
+		if ( ! currentData.data.customDesign ) {
+			currentData.data.customDesign = true;
+			setCurrentOnboardingData( currentData );
+		}
 	}, [] );
 
 	const getFontPatterns = async () => {
@@ -50,7 +63,9 @@ const StepDesignTypography = () => {
 	};
 
 	useEffect( () => {
-		if ( THEME_STATUS_ACTIVE === themeStatus ) getFontPatterns();
+		if ( THEME_STATUS_ACTIVE === themeStatus ) {
+			getFontPatterns();
+		}
 	}, [ themeStatus ] );
 
 	return (