diff --git a/src/OnboardingSPA/components/App/index.js b/src/OnboardingSPA/components/App/index.js index 9404feee1..f4274d4ff 100644 --- a/src/OnboardingSPA/components/App/index.js +++ b/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 . @@ -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 ); diff --git a/src/OnboardingSPA/data/routes/allStepsHandler.js b/src/OnboardingSPA/data/routes/allStepsHandler.js new file mode 100644 index 000000000..02c95c125 --- /dev/null +++ b/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 ) + ), + }; +}; diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js index 21ea8628e..efdaeb7fb 100644 --- a/src/OnboardingSPA/data/routes/default-flow.js +++ b/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; }; diff --git a/src/OnboardingSPA/data/routes/ecommerce-flow.js b/src/OnboardingSPA/data/routes/ecommerce-flow.js index 1a23100a9..03c1ec6db 100644 --- a/src/OnboardingSPA/data/routes/ecommerce-flow.js +++ b/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' ] ); diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index d109bb9f4..27988c84c 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/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 ) { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index fb8286157..644df4fa3 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/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 = () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index adc991a3b..f0eb4ab45 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/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, @@ -19,6 +15,10 @@ import { THEME_STATUS_INIT, SIDEBAR_LEARN_MORE, } from '../../../../../constants'; +import { + injectInAllSteps, + removeFromAllSteps, +} from '../../../../data/routes/allStepsHandler'; import { store as nfdOnboardingStore } from '../../../../store'; import { getPatterns } from '../../../../utils/api/patterns'; import { DesignStateHandler } from '../../../../components/StateHandlers'; @@ -31,35 +31,27 @@ const StepDesignThemeStylesPreview = () => { const [ customize, setCustomize ] = useState( false ); const navigate = useNavigate(); - const { - currentStep, - currentData, - routes, - designSteps, - allSteps, - 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 { currentStep, currentData, allSteps, themeStatus } = useSelect( + ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + allSteps: select( nfdOnboardingStore ).getAllSteps(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + }; + }, + [] + ); const { setDrawerActiveView, setSidebarActiveView, - updateRoutes, - updateDesignSteps, - updateAllSteps, setCurrentOnboardingData, updateThemeStatus, + updateAllSteps, } = useDispatch( nfdOnboardingStore ); useEffect( () => { @@ -84,26 +76,16 @@ const StepDesignThemeStylesPreview = () => { updateOnboardingData = true, context = 'click' ) => { - let updates; + setCustomize( selected ); + if ( selected ) { - updates = addColorAndTypographyRoutes( - routes, - allSteps, - designSteps - ); + const updates = injectInAllSteps( allSteps, conditionalSteps ); + updateAllSteps( updates.allSteps ); } else { - updates = removeColorAndTypographyRoutes( - routes, - allSteps, - designSteps - ); + const updates = removeFromAllSteps( allSteps, conditionalSteps ); + updateAllSteps( updates.allSteps ); } - updateRoutes( updates.routes ); - updateDesignSteps( updates.designSteps ); - updateAllSteps( updates.allSteps ); - setCustomize( selected ); - if ( updateOnboardingData ) { currentData.data.customDesign = selected; setCurrentOnboardingData( currentData ); @@ -111,7 +93,7 @@ const StepDesignThemeStylesPreview = () => { if ( selected && 'click' === context ) { trackHiiveEvent( 'customize-design', true ); - navigate( conditionalSteps.designColors.path ); + navigate( conditionalSteps[ 0 ].path ); } }; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/utils.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/utils.js deleted file mode 100644 index 0ae846c42..000000000 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/utils.js +++ /dev/null @@ -1,69 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { orderBy, filter } from 'lodash'; -import { conditionalSteps } from '../../../data/routes/'; - -export const addColorAndTypographyRoutes = ( - routes, - allSteps, - designSteps -) => { - const updates = removeColorAndTypographyRoutes( - routes, - allSteps, - designSteps - ); - 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' ] - ), - }; -}; - -export const removeColorAndTypographyRoutes = ( - routes, - allSteps, - designSteps -) => { - 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 - ) - ), - }; -}; diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index a19e50176..e61c598fc 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -21,12 +21,13 @@ const StepDesignTypography = () => { 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 StepDesignTypography = () => { const getFontPatterns = async () => { const patternsResponse = await getPatterns( - currentStep.patternId, + currentStep?.patternId ?? designSteps[ 0 ].patternId, true ); if ( patternsResponse?.error ) {