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

@@ -1,6 +1,5 @@
 import {
     type BillingAddress,
-    type CheckoutInitialState,
     type CheckoutService,
     createCheckoutService,
     createEmbeddedCheckoutMessenger,
@@ -40,7 +39,8 @@ import {
 import { act, renderWithoutWrapper as render, screen } from '@bigcommerce/checkout/test-utils';
 import { ThemeProvider } from '@bigcommerce/checkout/ui';
 
-import Checkout, { type CheckoutProps } from '../checkout/Checkout';
+import Checkout from '../checkout/Checkout';
+import { type CheckoutIntermediateProps } from '../checkout/CheckoutIntermediate';
 import { getCheckoutPayment } from '../checkout/checkouts.mock';
 import { createErrorLogger } from '../common/error';
 import {
@@ -50,9 +50,9 @@ import {
 
 describe('Billing step', () => {
     let checkout: CheckoutPageNodeObject;
-    let CheckoutTest: FunctionComponent<CheckoutProps>;
+    let CheckoutTest: FunctionComponent<CheckoutIntermediateProps>;
     let checkoutService: CheckoutService;
-    let defaultProps: CheckoutProps & AnalyticsContextProps;
+    let defaultProps: CheckoutIntermediateProps & AnalyticsContextProps;
     let embeddedMessengerMock: EmbeddedCheckoutMessenger;
     let analyticsTracker: Partial<AnalyticsEvents>;
 
@@ -193,16 +193,15 @@ describe('Billing step', () => {
     });
 
     it('should show order comments', async () => {
-        checkoutService = createCheckoutService({
-            initialState: {
-                config: checkoutSettings,
-                checkout: {
-                    ...checkoutWithBillingEmail,
-                    cart: checkoutWithDigitalCart.cart,
-                },
-                formFields,
+        defaultProps.initialState = {
+            config: checkoutSettings,
+            checkout: {
+                ...checkoutWithBillingEmail,
+                cart: checkoutWithDigitalCart.cart,
             },
-        });
+            formFields,
+            extensions: [],
+        };
 
         render(<CheckoutTest {...defaultProps} />);
 
@@ -212,19 +211,18 @@ describe('Billing step', () => {
     });
 
     it('should show PoweredByPayPalFastlaneLabel', async () => {
-        checkoutService = createCheckoutService({
-            initialState: {
-                config: checkoutSettings,
-                checkout: {
-                    ...checkoutWithShipping,
-                    billingAddress:checkoutWithBillingEmail.billingAddress,
-                    payments:[
-                        getCheckoutPayment(),
-                    ],
-                },
-                formFields,
+        defaultProps.initialState = {
+            config: checkoutSettings,
+            checkout: {
+                ...checkoutWithShipping,
+                billingAddress:checkoutWithBillingEmail.billingAddress,
+                payments:[
+                    getCheckoutPayment(),
+                ],
             },
-        });
+            formFields,
+            extensions: [],
+        };
 
         render(<CheckoutTest {...defaultProps} />);
 
@@ -302,13 +300,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,
-                },
-            });
+            defaultProps.initialState = {
+                config: checkoutSettings,
+                checkout: checkoutWithCustomer,
+                formFields,
+                extensions: [],
+            };
 
             jest.spyOn(checkoutService, 'updateBillingAddress');
 
@@ -368,13 +365,12 @@ describe('Billing step', () => {
                 phone: shippingAddress3.phone,
             } as BillingAddress;
 
-            checkoutService = createCheckoutService({
-                initialState: {
-                    config: checkoutSettings,
-                    checkout: checkoutWithCustomer,
-                    formFields,
-                },
-            });
+            defaultProps.initialState ={
+                config: checkoutSettings,
+                checkout: checkoutWithCustomer,
+                formFields,
+                extensions: [],
+            };
 
             jest.spyOn(checkoutService, 'updateBillingAddress');
 
@@ -423,13 +419,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,
-                },
-            });
+            defaultProps.initialState = {
+                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';
@@ -13,18 +14,19 @@ import CheckoutPage from './CheckoutPage';
 import type CheckoutSupport from './CheckoutSupport';
 import { useLoadCheckout } from './hooks';
 
-interface CheckoutIntermediateProps {
+export interface CheckoutIntermediateProps {
     checkoutId: string;
     containerId: string;
     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

@@ -81,7 +81,7 @@ describe('useLoadCheckout', () => {
         const mockCheckoutState = {
             data: {
                 getCheckout,
-            }
+            },
         };
 
         (useCheckout as jest.Mock).mockReturnValue({

packages/core/src/app/checkout/hooks/useLoadCheckout.test.ts

@@ -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} => {
+export const useLoadCheckout = (checkoutId: string, initialState?: CheckoutInitialState): {isLoadingCheckout: boolean} => {
     const { checkoutService, checkoutState: { data } } = useCheckout();
-    const initialStateLoaded = !!data.getCheckout();
-    const [ isLoadingCheckout, setIsLoadingCheckout ] = useState(!initialStateLoaded);
+    const [ isLoadingCheckout, setIsLoadingCheckout ] = useState(!data.getCheckout());
     const { extensionService } = useExtensions();
 
     const fetchData = async () => {
@@ -44,13 +44,22 @@ export const useLoadCheckout = (checkoutId: string): {isLoadingCheckout: boolean
     };
 
     useEffect(() => {
-        if (!initialStateLoaded) {
+        if (!isLoadingCheckout) {
+            return;
+        }
+
+        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 {
+            requestAnimationFrame(async () => {
+                await checkoutService.hydrateInitialState(initialState);
+                setIsLoadingCheckout(false);
+            });
         }
     }, []);