From 4d81c960d6ebcc05ae410b091314c7059703f8b2 Mon Sep 17 00:00:00 2001 From: Allen Benny Date: Tue, 23 Aug 2022 12:29:17 +0530 Subject: [PATCH] Refactored to use the New API Queuing System --- src/OnboardingSPA/pages/Steps/BasicInfo/index.js | 6 +++--- .../pages/Steps/Ecommerce/StepAddress/index.js | 12 +++++++++--- .../pages/Steps/Ecommerce/StepProducts/index.js | 13 ++++++++++--- .../pages/Steps/Ecommerce/StepTax/index.js | 12 +++++++++--- .../Steps/GetStarted/GetStartedExperience/index.js | 5 +++-- .../GetStarted/SiteTypeSetup/PrimarySite/index.js | 8 +++++--- .../GetStarted/SiteTypeSetup/SecondarySite/index.js | 7 ++++--- .../pages/Steps/GetStarted/Welcome/index.js | 6 +++--- src/OnboardingSPA/pages/Steps/TopPriority/index.js | 5 +++-- src/OnboardingSPA/utils/api-queuer/api-executer.js | 4 ++-- 10 files changed, 51 insertions(+), 27 deletions(-) diff --git a/src/OnboardingSPA/pages/Steps/BasicInfo/index.js b/src/OnboardingSPA/pages/Steps/BasicInfo/index.js index c1ede787a..f8e5c1f52 100644 --- a/src/OnboardingSPA/pages/Steps/BasicInfo/index.js +++ b/src/OnboardingSPA/pages/Steps/BasicInfo/index.js @@ -13,18 +13,18 @@ const StepBasicInfo = () => { const { enqueueRequest, flushQueue, setIsDrawerOpened, setDrawerActiveView, setIsSidebarOpened, setIsDrawerSuppressed } = useDispatch( nfdOnboardingStore ); - const { currentStep, flowData } = useSelect( + const { currentStep, onboardingData } = useSelect( (select) => { return { currentStep: select(nfdOnboardingStore).getCurrentStep(), - flowData: select(nfdOnboardingStore).getOnboardingFlowData() + onboardingData: select(nfdOnboardingStore).getOnboardingData() }; }, [] ); useEffect( () => { - flushQueue(flowData); + flushQueue(onboardingData); enqueueRequest(FLOW_SYNC); enqueueRequest(SETTINGS_SYNC); if ( isLargeViewport ) { diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js index 814dba2cc..78dc70ab4 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js @@ -25,7 +25,7 @@ const StepAddress = () => { } = useDispatch(nfdOnboardingStore); useEffect(() => { - flushQueue(flowData); + flushQueue(onboardingData); if (isLargeViewport) { setIsDrawerOpened(true); } @@ -36,8 +36,14 @@ const StepAddress = () => { const navigate = useNavigate(); - let flowData = useSelect((select) => - select(nfdOnboardingStore).getOnboardingFlowData() + const { flowData, onboardingData } = useSelect( + (select) => { + return { + flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() + }; + }, + [] ); const settings = useWPSettings(); diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js index 0e199e50f..416012f66 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js @@ -23,12 +23,19 @@ const StepProducts = () => { setCurrentOnboardingFlowData, } = useDispatch(nfdOnboardingStore); - let flowData = useSelect((select) => - select(nfdOnboardingStore).getOnboardingFlowData() + const { flowData, onboardingData } = useSelect( + (select) => { + return { + flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() + }; + }, + [] ); + let productInfo = flowData.storeDetails.productInfo; useEffect(() => { - flushQueue(flowData); + flushQueue(onboardingData); if (isLargeViewport) { setIsDrawerOpened(true); } diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js index 22501b5ca..ca40783ff 100644 --- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js +++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js @@ -30,12 +30,18 @@ const StepTax = () => { } = useDispatch(nfdOnboardingStore); const navigate = useNavigate(); - let flowData = useSelect((select) => - select(nfdOnboardingStore).getOnboardingFlowData() + const { flowData, onboardingData } = useSelect( + (select) => { + return { + flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() + }; + }, + [] ); useEffect(() => { - flushQueue(flowData); + flushQueue(onboardingData); if (isLargeViewport) { setIsDrawerOpened(true); } diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js index 86627cb70..86ad1d624 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/GetStartedExperience/index.js @@ -24,10 +24,11 @@ const GetStartedExperience = () => { const [ wpComfortLevel, setWpComfortLevel ] = useState( '0' ); const { enqueueRequest, flushQueue, setCurrentOnboardingFlowData } = useDispatch( nfdOnboardingStore ); - const { flowData, currentStep } = useSelect( ( select ) => { + const { flowData, currentStep, onboardingData } = useSelect( ( select ) => { return { flowData: select(nfdOnboardingStore).getOnboardingFlowData(), currentStep: select(nfdOnboardingStore).getCurrentStep(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() }; }, [] ); @@ -38,7 +39,7 @@ const GetStartedExperience = () => { } = useDispatch( nfdOnboardingStore ); useEffect( () => { - flushQueue(flowData); + flushQueue(onboardingData); enqueueRequest(FLOW_SYNC); setIsSidebarOpened( false ); setIsDrawerSuppressed( true ); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js index d2b05b400..63875f5e0 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/PrimarySite/index.js @@ -19,18 +19,20 @@ const StepPrimarySetup = () => { nfdOnboardingStore ); - const { currentStep, flowData } = useSelect( + const { currentStep, flowData, onboardingData } = useSelect( (select) => { return { currentStep: select(nfdOnboardingStore).getCurrentStep(), - flowData: select(nfdOnboardingStore).getOnboardingFlowData() + flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() + }; }, [] ); useEffect(() => { - flushQueue(flowData); + flushQueue(onboardingData); enqueueRequest(FLOW_SYNC); setIsSidebarOpened(false); setIsDrawerSuppressed(true); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js index 5cb04dda7..82c985ec8 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/SiteTypeSetup/SecondarySite/index.js @@ -23,17 +23,18 @@ const StepPrimarySetup = () => { } = useDispatch( nfdOnboardingStore ); - const { currentStep, flowData } = useSelect((select) => { + const { currentStep, flowData, onboardingData } = useSelect((select) => { return { currentStep: select(nfdOnboardingStore).getCurrentStep(), - flowData: select(nfdOnboardingStore).getOnboardingFlowData() + flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() }; }, []); const selectedCategoryInStore = flowData?.data?.siteType?.secondary; useEffect(() => { - flushQueue(flowData); + flushQueue(onboardingData); enqueueRequest(FLOW_SYNC); setIsSidebarOpened(false); setIsDrawerSuppressed(true); diff --git a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js index 478407ecb..6aec860b6 100644 --- a/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js +++ b/src/OnboardingSPA/pages/Steps/GetStarted/Welcome/index.js @@ -22,11 +22,11 @@ import { VIEW_NAV_GET_STARTED } from '../../../../../constants'; */ const StepWelcome = () => { const location = useLocation(); - const { currentStep, flowData, brandName } = useSelect( + const { currentStep, onboardingData, brandName } = useSelect( (select) => { return { currentStep: select(nfdOnboardingStore).getCurrentStep(), - flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData(), brandName: select(nfdOnboardingStore).getNewfoldBrandName(), }; }, @@ -40,7 +40,7 @@ const StepWelcome = () => { } = useDispatch( nfdOnboardingStore ); useEffect( () => { - flushQueue(flowData); + flushQueue(onboardingData); setIsSidebarOpened( false ); setIsDrawerSuppressed( true ); setDrawerActiveView( VIEW_NAV_GET_STARTED ); diff --git a/src/OnboardingSPA/pages/Steps/TopPriority/index.js b/src/OnboardingSPA/pages/Steps/TopPriority/index.js index f6357562f..23a73ac43 100644 --- a/src/OnboardingSPA/pages/Steps/TopPriority/index.js +++ b/src/OnboardingSPA/pages/Steps/TopPriority/index.js @@ -52,10 +52,11 @@ const StepTopPriority = ( props ) => { setIsDrawerSuppressed, } = useDispatch( nfdOnboardingStore ); - const { currentStep, flowData } = useSelect( ( select ) => { + const { currentStep, flowData, onboardingData } = useSelect( ( select ) => { return { currentStep: select(nfdOnboardingStore).getCurrentStep(), flowData: select(nfdOnboardingStore).getOnboardingFlowData(), + onboardingData: select(nfdOnboardingStore).getOnboardingData() }; }, [] ); @@ -66,7 +67,7 @@ const StepTopPriority = ( props ) => { }; useEffect( () => { - flushQueue(flowData); + flushQueue(onboardingData); enqueueRequest(FLOW_SYNC); if ( isLargeViewport ) { setIsDrawerOpened( true ); diff --git a/src/OnboardingSPA/utils/api-queuer/api-executer.js b/src/OnboardingSPA/utils/api-queuer/api-executer.js index 224c728a0..7cebeb8df 100644 --- a/src/OnboardingSPA/utils/api-queuer/api-executer.js +++ b/src/OnboardingSPA/utils/api-queuer/api-executer.js @@ -7,9 +7,9 @@ export async function apiExecuter(data, requests) { requests.forEach(request => { switch (request) { - case FLOW_SYNC: setFlow(data); + case FLOW_SYNC: setFlow(data?.flowData); break; - case SETTINGS_SYNC: setSettings(data?.data?.socialData); + case SETTINGS_SYNC: setSettings(data?.socialData); break; default: break;