From 54d2ae6f9b924bb9a4f9c4118962f216ac6acb52 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 27 Sep 2023 17:15:07 +0530 Subject: [PATCH 1/2] Return to old flow when prioritization is disabled --- .../components/StateHandlers/Flow/index.js | 24 +++++++++++++++++-- src/OnboardingSPA/data/flows/ecommerce.js | 21 ++++++++++++---- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js index e78933dca..3c2412e0a 100644 --- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js @@ -1,6 +1,7 @@ import { useEffect } 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,7 +22,9 @@ import { 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(); @@ -66,6 +69,13 @@ const FlowStateHandler = ( { children } ) => { 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 ) => { @@ -170,7 +180,17 @@ const FlowStateHandler = ( { children } ) => { } }, [ location.pathname ] ); - return <>{ children }; + // TODO: Remove handleRender and replace with only children once Chapter Prioritization is enabled. + const handleRender = () => { + switch ( newFlow ) { + case 'ecommerce': + return ; + default: + return children; + } + }; + + return <>{ handleRender() }; }; export default FlowStateHandler; diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js index 17576caa5..c375ea197 100644 --- a/src/OnboardingSPA/data/flows/ecommerce.js +++ b/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. ); } ); }; From 5695d2d1b15580aab5854ed9689cbfd6cd1fa9b8 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Wed, 27 Sep 2023 17:19:05 +0530 Subject: [PATCH 2/2] lint fixes --- .../components/StateHandlers/Flow/index.js | 12 ++++++++---- src/OnboardingSPA/data/flows/ecommerce.js | 4 ++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js index 3c2412e0a..e88251704 100644 --- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js +++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js @@ -1,4 +1,4 @@ -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'; @@ -29,6 +29,8 @@ import EcommerceStepLoader from '../../Loaders/Step/Ecommerce'; const FlowStateHandler = ( { children } ) => { const location = useLocation(); + const [ newFlow, setNewFlow ] = useState( false ); + const { brandConfig, experienceLevel, @@ -62,7 +64,7 @@ const FlowStateHandler = ( { children } ) => { const handleCommerceFlow = async ( flow, retries = 0 ) => { if ( retries >= MAX_RETRIES_FLOW_SWITCH ) { - return; + return setNewFlow( false ); } const response = switchFlow( flow ); if ( response?.error ) { @@ -71,9 +73,9 @@ const FlowStateHandler = ( { children } ) => { } // TODO: Remove code below once Chapter Prioritization is enabled. - const firstEcommerceStep = commerce.steps[0]; + const firstEcommerceStep = commerce.steps[ 0 ]; const fragment = getFragment( window.location.href ); - const redirect = removeQueryParam( window.location.href, 'flow' ).replace( fragment, '' ); + const redirect = removeQueryParam( window.location.href, 'flow' ).replace( fragment, '' ); window.location.replace( `${ redirect }#${ firstEcommerceStep.path }` ); window.location.reload(); }; @@ -88,6 +90,8 @@ const FlowStateHandler = ( { children } ) => { case ECOMMERCE_FLOW: handleCommerceFlow( flow ); break; + default: + setNewFlow( false ); } }; diff --git a/src/OnboardingSPA/data/flows/ecommerce.js b/src/OnboardingSPA/data/flows/ecommerce.js index c375ea197..68842cd98 100644 --- a/src/OnboardingSPA/data/flows/ecommerce.js +++ b/src/OnboardingSPA/data/flows/ecommerce.js @@ -89,8 +89,8 @@ export const getTopSteps = ( steps ) => { return filter( steps, ( step ) => { return ( step instanceof PseudoStep || - ! step.path.includes( '/ecommerce/step' ) && - ! step.path.includes( '/wp-setup/step/top-priority' ) // TODO: Filter to be removed once Chapter Prioritization is enabled. + ( ! step.path.includes( '/ecommerce/step' ) && + ! step.path.includes( '/wp-setup/step/top-priority' ) ) // TODO: Filter to be removed once Chapter Prioritization is enabled. ); } ); };