feat(core): CHECKOUT-9513 Pass in initial state in separate microtask

Author: davidchin

package-lock.json

@@ -48,7 +48,7 @@
   "prettier": "@bigcommerce/eslint-config/prettier",
   "homepage": "https://github.com/bigcommerce/checkout-js#readme",
   "dependencies": {
-    "@bigcommerce/checkout-sdk": "github:bigcommerce/checkout-sdk-js#dbc080e6cd4d6647ec15d5c50916e9a70cd31007",
+    "@bigcommerce/checkout-sdk": "github:bigcommerce/checkout-sdk-js#f2438c3ba5fa581035772cbc7bc9e909ea00c1f2",
     "@bigcommerce/citadel": "^2.15.1",
     "@bigcommerce/form-poster": "^1.2.2",
     "@bigcommerce/memoize": "^1.0.0",

package.json

@@ -193,15 +193,15 @@ describe('Billing step', () => {
     });
 
     it('should show order comments', async () => {
-        checkoutService = createCheckoutService({
-            initialState: {
-                config: checkoutSettings,
-                checkout: {
-                    ...checkoutWithBillingEmail,
-                    cart: checkoutWithDigitalCart.cart,
-                },
-                formFields,
+        checkoutService = createCheckoutService();
+        checkoutService.hydrateInitialState({
+            config: checkoutSettings,
+            checkout: {
+                ...checkoutWithBillingEmail,
+                cart: checkoutWithDigitalCart.cart,
             },
+            formFields,
+            extensions: [],
         });
 
         render(<CheckoutTest {...defaultProps} />);
@@ -212,18 +212,18 @@ describe('Billing step', () => {
     });
 
     it('should show PoweredByPayPalFastlaneLabel', async () => {
-        checkoutService = createCheckoutService({
-            initialState: {
-                config: checkoutSettings,
-                checkout: {
-                    ...checkoutWithShipping,
-                    billingAddress:checkoutWithBillingEmail.billingAddress,
-                    payments:[
-                        getCheckoutPayment(),
-                    ],
-                },
-                formFields,
+        checkoutService = createCheckoutService();
+        checkoutService.hydrateInitialState({
+            config: checkoutSettings,
+            checkout: {
+                ...checkoutWithShipping,
+                billingAddress:checkoutWithBillingEmail.billingAddress,
+                payments:[
+                    getCheckoutPayment(),
+                ],
             },
+            formFields,
+            extensions: [],
         });
 
         render(<CheckoutTest {...defaultProps} />);
@@ -302,12 +302,12 @@ describe('Billing step', () => {
 
     describe('registered customer', () => {
         it('completes the billing step after selecting a valid address', async () => {
-            checkoutService = createCheckoutService({
-                initialState: {
-                    config: checkoutSettings,
-                    checkout: checkoutWithCustomer,
-                    formFields,
-                },
+            checkoutService = createCheckoutService();
+            checkoutService.hydrateInitialState({
+                config: checkoutSettings,
+                checkout: checkoutWithCustomer,
+                formFields,
+                extensions: [],
             });
 
             jest.spyOn(checkoutService, 'updateBillingAddress');
@@ -368,12 +368,12 @@ describe('Billing step', () => {
                 phone: shippingAddress3.phone,
             } as BillingAddress;
 
-            checkoutService = createCheckoutService({
-                initialState: {
-                    config: checkoutSettings,
-                    checkout: checkoutWithCustomer,
-                    formFields,
-                },
+            checkoutService = createCheckoutService();
+            checkoutService.hydrateInitialState({
+                config: checkoutSettings,
+                checkout: checkoutWithCustomer,
+                formFields,
+                extensions: [],
             });
 
             jest.spyOn(checkoutService, 'updateBillingAddress');
@@ -423,12 +423,12 @@ describe('Billing step', () => {
         });
 
         it('completes the billing step after creating a new address even with existing addresses', async () => {
-            checkoutService = createCheckoutService({
-                initialState: {
-                    config: checkoutSettings,
-                    checkout: checkoutWithCustomer,
-                    formFields,
-                },
+            checkoutService = createCheckoutService();
+            checkoutService.hydrateInitialState({
+                config: checkoutSettings,
+                checkout: checkoutWithCustomer,
+                formFields,
+                extensions: [],
             });
 
             jest.spyOn(checkoutService, 'updateBillingAddress');

packages/core/src/app/billing/Billing.test.tsx

@@ -35,7 +35,6 @@ const CheckoutApp = (props: CheckoutAppProps): ReactElement => {
     const checkoutService = useMemo(() => createCheckoutService({
         locale: getLanguageService().getLocale(),
         shouldWarnMutation: process.env.NODE_ENV === 'development',
-        initialState: props.initialState,
     }), []);
     const embeddedStylesheet = useMemo(() => createEmbeddedCheckoutStylesheet(), []);
     const embeddedSupport = useMemo(() => createEmbeddedCheckoutSupport(getLanguageService()), []);

packages/core/src/app/checkout/CheckoutApp.tsx

@@ -1,4 +1,5 @@
 import {
+    type CheckoutInitialState,
     type EmbeddedCheckoutMessenger,
     type EmbeddedCheckoutMessengerOptions
 } from '@bigcommerce/checkout-sdk';
@@ -19,12 +20,13 @@ interface CheckoutIntermediateProps {
     embeddedStylesheet: EmbeddedCheckoutStylesheet;
     embeddedSupport: CheckoutSupport;
     errorLogger: ErrorLogger;
+    initialState?: CheckoutInitialState;
     createEmbeddedMessenger(options: EmbeddedCheckoutMessengerOptions): EmbeddedCheckoutMessenger;
 }
 
 const CheckoutIntermediate:React.FC<CheckoutIntermediateProps>= (props) => {
-    const { checkoutId } = props;
-    const { isLoadingCheckout } = useLoadCheckout(checkoutId);
+    const { checkoutId, initialState } = props;
+    const { isLoadingCheckout } = useLoadCheckout(checkoutId, initialState);
     const { themeV2 } = useThemeContext();
 
     if (isLoadingCheckout) {

packages/core/src/app/checkout/CheckoutIntermediate.tsx

@@ -1,12 +1,12 @@
+import { type CheckoutInitialState } from '@bigcommerce/checkout-sdk';
 import { useEffect, useState } from 'react';
 
 import { useExtensions } from '@bigcommerce/checkout/checkout-extension';
 import { useCheckout } from '@bigcommerce/checkout/payment-integration-api';
 
-export const useLoadCheckout = (checkoutId: string): {isLoadingCheckout: boolean} => {
-    const { checkoutService, checkoutState: { data } } = useCheckout();
-    const initialStateLoaded = !!data.getCheckout();
-    const [ isLoadingCheckout, setIsLoadingCheckout ] = useState(!initialStateLoaded);
+export const useLoadCheckout = (checkoutId: string, initialState?: CheckoutInitialState): {isLoadingCheckout: boolean} => {
+    const { checkoutService } = useCheckout();
+    const [ isLoadingCheckout, setIsLoadingCheckout ] = useState(true);
     const { extensionService } = useExtensions();
 
     const fetchData = async () => {
@@ -44,13 +44,18 @@ export const useLoadCheckout = (checkoutId: string): {isLoadingCheckout: boolean
     };
 
     useEffect(() => {
-        if (!initialStateLoaded) {
+        if (!initialState) {
             // If the initial data has not been preloaded from the server, we need to make API calls to fetch it.
             fetchDataWithRetry()
                 .then(() => setIsLoadingCheckout(false))
                 .catch((error) => {
                     throw error;
                 });
+        } else if (initialState) {
+            requestAnimationFrame(async () => {
+                await checkoutService.hydrateInitialState(initialState);
+                setIsLoadingCheckout(false);
+            });
         }
     }, []);