PRESS 2 - 93 | API Queuing System

src/OnboardingSPA/components/App/index.js

@@ -10,12 +10,14 @@ 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 { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { SlotFillProvider } from '@wordpress/components';
 import { useEffect, Fragment, useState } from '@wordpress/element';
 import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface';
+import { API_REQUEST } from '../../../constants';
 
 /**
  * Primary app that renders the <InterfaceSkeleton />.
@@ -63,8 +65,9 @@ const App = () => {
 		updateRoutes,
 		updateDesignSteps,
 		updateAllSteps,
+		flushQueue,
+		enqueueRequest,
 		setOnboardingSocialData,
-		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	async function syncSocialSettings() {
@@ -128,14 +131,11 @@ const App = () => {
 						setOnboardingSocialData( socialDataResp );
 					}
 				}
-
-				const result = await setFlow( currentData );
-				if ( result?.error !== null ) {
-					setIsRequestPlaced( false );
-				} else {
-					setCurrentOnboardingData( result?.body );
-					setIsRequestPlaced( false );
-				}
+				flushQueue();
+				enqueueRequest( API_REQUEST.SET_FLOW, () =>
+					setFlow( currentData )
+				);
+				setIsRequestPlaced( false );
 			}
 		}
 		// Check if the Basic Info page was visited

src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js

@@ -4,7 +4,11 @@ import { useState, useEffect } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
-import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants';
+import {
+	API_REQUEST,
+	THEME_STATUS_ACTIVE,
+	THEME_STATUS_INIT,
+} from '../../../../constants';
 
 /**
  * Global Style Parent Component
@@ -30,7 +34,7 @@ const GlobalStylesProvider = ( { children } ) => {
 		[]
 	);
 
-	const { updateThemeStatus, updatePreviewSettings } =
+	const { updateThemeStatus, updatePreviewSettings, enqueueRequest } =
 		useDispatch( nfdOnboardingStore );
 
 	const getStylesAndPatterns = async () => {
@@ -52,14 +56,17 @@ const GlobalStylesProvider = ( { children } ) => {
 			}
 		}
 
-		if ( selectedGlobalStyle )
-			setGlobalStyles( {
-				...selectedGlobalStyle,
-				title: currentData.data.theme.variation,
-				version: 2,
-			} );
-
+		if ( selectedGlobalStyle ) {
+			enqueueRequest( API_REQUEST.SET_GLOBAL_STYLES, () =>
+				setGlobalStyles( {
+					...selectedGlobalStyle,
+					title: currentData.data.theme.variation,
+					version: 2,
+				} )
+			);
+		}
 		updatePreviewSettings(
+			// eslint-disable-next-line react-hooks/rules-of-hooks
 			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
 		);
 		setIsLoaded( true );

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

@@ -17,24 +17,29 @@ const StepComplete = () => {
 		setIsHeaderNavigationEnabled,
 		setSidebarActiveView,
 		updateThemeStatus,
+		flushQueue,
 	} = useDispatch( nfdOnboardingStore );
 
 	const navigate = useNavigate();
 	const [ isError, setIsError ] = useState( false );
 
-	const { nextStep, brandName, currentData, pluginInstallHash } = useSelect(
-		( select ) => {
-			return {
-				nextStep: select( nfdOnboardingStore ).getNextStep(),
-				brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
-				currentData:
-					select( nfdOnboardingStore ).getCurrentOnboardingData(),
-				pluginInstallHash:
-					select( nfdOnboardingStore ).getPluginInstallHash(),
-			};
-		},
-		[]
-	);
+	const {
+		nextStep,
+		brandName,
+		currentData,
+		isQueueEmpty,
+		pluginInstallHash,
+	} = useSelect( ( select ) => {
+		return {
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+			brandName: select( nfdOnboardingStore ).getNewfoldBrandName(),
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			isQueueEmpty: select( nfdOnboardingStore ).isQueueEmpty(),
+			pluginInstallHash:
+				select( nfdOnboardingStore ).getPluginInstallHash(),
+		};
+	}, [] );
 
 	const contents = getContents( brandName );
 
@@ -80,8 +85,10 @@ const StepComplete = () => {
 	};
 
 	useEffect( () => {
-		checkFlowComplete();
-	}, [] );
+		if ( isQueueEmpty ) checkFlowComplete();
+		else flushQueue();
+	}, [ isQueueEmpty ] );
+
 	return (
 		<DesignStateHandler navigationStateCallback={ setNavigationState }>
 			{ isError ? (

src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js

@@ -138,6 +138,7 @@ const StepAddress = () => {
 					}
 				}
 				setCurrentOnboardingData( {
+					...currentData,
 					storeDetails: {
 						...currentData.storeDetails,
 						address: {
@@ -187,6 +188,7 @@ const StepAddress = () => {
 			}
 		}
 		setCurrentOnboardingData( {
+			...currentData,
 			storeDetails: {
 				...currentData.storeDetails,
 				address: {
@@ -331,46 +333,46 @@ const StepAddress = () => {
 											/>
 										</div>
 										{ states.length === 0 ||
-											address === undefined ? null : (
-												<div data-name="state">
-													<label
-														aria-required
-														htmlFor="state"
-													>
-														{ __(
-															'State',
-															'wp-module-onboarding'
-														) }
-													</label>
-													<select
-														id="state"
-														type="text"
-														name="state"
-														required
-														defaultValue={
-															selectedCountry ===
-															defaultCountry
-																? defaultState
-																: ''
-														}
-														{ ...fieldProps }
-													>
+										address === undefined ? null : (
+											<div data-name="state">
+												<label
+													aria-required
+													htmlFor="state"
+												>
+													{ __(
+														'State',
+														'wp-module-onboarding'
+													) }
+												</label>
+												<select
+													id="state"
+													type="text"
+													name="state"
+													required
+													defaultValue={
+														selectedCountry ===
+														defaultCountry
+															? defaultState
+															: ''
+													}
+													{ ...fieldProps }
+												>
+													<option
+														key={ '' }
+														value={ '' }
+														selected
+													/>
+													{ states.map( ( state ) => (
 														<option
-															key={ '' }
-															value={ '' }
-															selected
-														/>
-														{ states.map( ( state ) => (
-															<option
-																key={ state.code }
-																value={ state.code }
-															>
-																{ state.name }
-															</option>
-														) ) }
-													</select>
-												</div>
-											) }
+															key={ state.code }
+															value={ state.code }
+														>
+															{ state.name }
+														</option>
+													) ) }
+												</select>
+											</div>
+										) }
 										<div data-name="woocommerce_store_postcode">
 											<label
 												aria-required