updated colors and typography steps navigation

src/OnboardingSPA/components/App/index.js

@@ -5,13 +5,13 @@ import Sidebar from '../Sidebar';
 import classNames from 'classnames';
 import { useLocation } from 'react-router-dom';
 import { setFlow } from '../../utils/api/flow';
+import { conditionalSteps } from '../../data/routes';
 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';
@@ -21,6 +21,7 @@ import { API_REQUEST, HIIVE_ANALYTICS_CATEGORY } from '../../../constants';
 import NewfoldInterfaceSkeleton from '../NewfoldInterfaceSkeleton';
 import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics';
 import { trackHiiveEvent } from '../../utils/analytics';
+import { injectInAllSteps } from '../../data/routes/allStepsHandler';
 
 /**
  * Primary app that renders the <NewfoldInterfaceSkeleton />.
@@ -41,8 +42,6 @@ const App = () => {
 		currentData,
 		socialData,
 		firstStep,
-		routes,
-		designSteps,
 		allSteps,
 	} = useSelect( ( select ) => {
 		return {
@@ -53,9 +52,7 @@ 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(),
 		};
 	}, [] );
 
@@ -65,12 +62,11 @@ const App = () => {
 	const {
 		setActiveStep,
 		setActiveFlow,
-		updateRoutes,
-		updateDesignSteps,
 		updateAllSteps,
 		flushQueue,
 		enqueueRequest,
 		setOnboardingSocialData,
+		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	async function syncSocialSettings() {
@@ -151,78 +147,17 @@ 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() {
+	function handleConditionalDesignStepsRoutes() {
 		if (
 			location?.pathname.includes( 'colors' ) ||
 			location?.pathname.includes( 'typography' )
 		) {
-			const updates = currentData?.data?.customDesign
-				? addColorAndTypographyRoutes()
-				: removeColorAndTypographyRoutes();
-
-			updateRoutes( updates.routes );
-			updateDesignSteps( updates.designSteps );
+			const updates = injectInAllSteps( allSteps, conditionalSteps );
 			updateAllSteps( updates.allSteps );
+			if ( ! currentData.data.customDesign ) {
+				currentData.data.customDesign = true;
+				setCurrentOnboardingData( currentData );
+			}
 		}
 	}
 
@@ -282,7 +217,7 @@ const App = () => {
 	useEffect( () => {
 		syncStoreToDB();
 		handlePreviousStepTracking();
-		handleColorsAndTypographyRoutes();
+		handleConditionalDesignStepsRoutes();
 		if ( location.pathname.includes( '/step' ) ) {
 			setActiveFlow( onboardingFlow );
 			setActiveStep( location.pathname );

src/OnboardingSPA/data/routes/allStepsHandler.js

@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { orderBy, filter } from 'lodash';
+
+export const injectInAllSteps = ( allSteps, conditionalSteps ) => {
+	const updates = removeFromAllSteps( allSteps, conditionalSteps );
+	const steps = [ ...conditionalSteps ];
+	return {
+		allSteps: orderBy(
+			updates.allSteps.concat( steps ),
+			[ 'priority' ],
+			[ 'asc' ]
+		),
+	};
+};
+
+export const removeFromAllSteps = ( allSteps, conditionalSteps ) => {
+	const conditionalStepsPaths = new Set(
+		conditionalSteps.map( ( a ) => a.path )
+	);
+	return {
+		allSteps: filter(
+			allSteps,
+			( allStep ) => ! conditionalStepsPaths.has( allStep.path )
+		),
+	};
+};

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

@@ -338,18 +338,6 @@ export const steps = [
 	{
 		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,
@@ -465,8 +453,8 @@ export const steps = [
 	},
 ];
 
-export const conditionalSteps = {
-	designColors: {
+export const conditionalSteps = [
+	{
 		path: '/wp-setup/step/design/colors',
 		title: __( 'Colors', 'wp-module-onboarding' ),
 		heading: __( "What's your color palette?", 'wp-module-onboarding' ),
@@ -489,7 +477,7 @@ export const conditionalSteps = {
 			},
 		},
 	},
-	designTypography: {
+	{
 		path: '/wp-setup/step/design/typography',
 		title: __( 'Typography', 'wp-module-onboarding' ),
 		heading: __( "What's your font style?", 'wp-module-onboarding' ),
@@ -512,9 +500,9 @@ export const conditionalSteps = {
 			},
 		},
 	},
-};
+];
 
-export const routes = [ ...pages, ...steps ];
+export const routes = [ ...pages, ...steps, ...conditionalSteps ];
 
 /**
  * Filter-out the design steps and register a fake step in their place.
@@ -563,13 +551,17 @@ export const initialTopSteps = () => {
  * @return {Array} steps
  */
 export const initialDesignSteps = () => {
-	const designSteps = filter( steps, ( step ) => {
+	let designSteps = orderBy(
+		steps.concat( conditionalSteps ),
+		[ 'priority' ],
+		[ 'asc' ]
+	);
+	designSteps = filter( designSteps, ( step ) => {
 		return (
 			step.path.includes( '/step/design/' ) &&
 			! step.path.includes( '/theme-styles/preview' )
 		);
 	} );
-
 	return designSteps;
 };
 

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

@@ -7,6 +7,7 @@ import { orderBy, filter } from 'lodash';
 import {
 	pages as defaultInitialPages,
 	steps as defaultInitialSteps,
+	conditionalSteps as defaultConditionalSteps,
 	initialTopSteps as defaultInitialTopSteps,
 	initialGetStartedSteps as defaultInitialGetStartedSteps,
 } from './default-flow';
@@ -116,7 +117,7 @@ export const steps = orderBy(
 );
 
 export const routes = orderBy(
-	[ ...steps, ...defaultInitialPages ],
+	[ ...steps, ...defaultConditionalSteps, ...defaultInitialPages ],
 	[ 'priority' ],
 	[ 'asc' ]
 );

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

@@ -21,12 +21,13 @@ const StepDesignColors = () => {
 	const location = useLocation();
 	const [ pattern, setPattern ] = useState();
 
-	const { currentStep, themeStatus } = useSelect( ( select ) => {
+	const { currentStep, themeStatus, designSteps } = useSelect( ( select ) => {
 		return {
 			currentStep: select( nfdOnboardingStore ).getStepFromPath(
 				location.pathname
 			),
 			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
+			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
 		};
 	}, [] );
 
@@ -40,7 +41,7 @@ const StepDesignColors = () => {
 
 	const getStylesAndPatterns = async () => {
 		const patternResponse = await getPatterns(
-			currentStep.patternId,
+			currentStep?.patternId ?? designSteps[ 0 ].patternId,
 			true
 		);
 		if ( patternResponse?.error ) {

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

@@ -21,7 +21,7 @@ import {
 	LivePreviewSelectableCard,
 	LivePreviewSkeleton,
 } from '../../../../components/LivePreview';
-import { addColorAndTypographyRoutes } from '../utils';
+import { injectInAllSteps } from '../../../../data/routes/allStepsHandler';
 import { trackHiiveEvent } from '../../../../utils/analytics';
 
 const StepDesignThemeStylesMenu = () => {
@@ -37,9 +37,7 @@ const StepDesignThemeStylesMenu = () => {
 		nextStep,
 		currentData,
 		storedPreviewSettings,
-		routes,
 		allSteps,
-		designSteps,
 		themeStatus,
 		themeVariations,
 	} = useSelect( ( select ) => {
@@ -52,9 +50,7 @@ const StepDesignThemeStylesMenu = () => {
 				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 			storedPreviewSettings:
 				select( nfdOnboardingStore ).getPreviewSettings(),
-			routes: select( nfdOnboardingStore ).getRoutes(),
 			allSteps: select( nfdOnboardingStore ).getAllSteps(),
-			designSteps: select( nfdOnboardingStore ).getDesignSteps(),
 			themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
 			themeVariations: select( nfdOnboardingStore ).getStepPreviewData(),
 		};
@@ -66,8 +62,6 @@ const StepDesignThemeStylesMenu = () => {
 		updatePreviewSettings,
 		setCurrentOnboardingData,
 		updateThemeStatus,
-		updateRoutes,
-		updateDesignSteps,
 		updateAllSteps,
 	} = useDispatch( nfdOnboardingStore );
 
@@ -123,20 +117,14 @@ const StepDesignThemeStylesMenu = () => {
 
 	const skiptoCustomPage = () => {
 		// Add Custom Steps into the Flow
-		const updates = addColorAndTypographyRoutes(
-			routes,
-			allSteps,
-			designSteps
-		);
-		updateRoutes( updates.routes );
-		updateDesignSteps( updates.designSteps );
+		const updates = injectInAllSteps( allSteps, conditionalSteps );
 		updateAllSteps( updates.allSteps );
 
 		currentData.data.customDesign = true;
 		setCurrentOnboardingData( currentData );
 		trackHiiveEvent( 'customize-design', true );
 		// Find the first Custom Conditional Step and navigate there
-		navigate( conditionalSteps.designColors.path );
+		navigate( conditionalSteps[ 0 ].path );
 	};
 
 	const buildPreviews = () => {