feat(checkout): CHECKOUT-10152 skip the standalone billing step for themeV2

packages/contexts/src/index.ts

@@ -1,4 +1,4 @@
-export { useThemeContext, ThemeContext, ThemeProvider } from './theme';
+export { useThemeContext, ThemeContext, ThemeProvider, isThemeV2Enabled } from './theme';
 export {
     AnalyticsContext,
     AnalyticsProvider,

packages/contexts/src/theme/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import React, { type ReactNode } from 'react';
 
 import { useCheckout } from '../checkout';
 
+import { isThemeV2Enabled } from './isThemeV2Enabled';
 import ThemeContext from './ThemeContext';
 
 export interface ThemeProviderProps {
@@ -11,19 +12,7 @@ export interface ThemeProviderProps {
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
     const { selectedState: config } = useCheckout((state) => state.data.getConfig());
 
-    let themeV2 = false;
-
-    if (config?.checkoutSettings) {
-        const newThemeExperimentEnabled = Boolean(
-            config.checkoutSettings.features['CHECKOUT-7962.update_font_style_on_checkout_page'] ??
-                true,
-        );
-        const newThemeSettingEnabled = Boolean(
-            config.checkoutSettings.checkoutUserExperienceSettings.checkoutV2Theme ?? false,
-        );
-
-        themeV2 = newThemeSettingEnabled && newThemeExperimentEnabled;
-    }
+    const themeV2 = isThemeV2Enabled(config);
 
     return <ThemeContext.Provider value={{ themeV2 }}>{children}</ThemeContext.Provider>;
 };

packages/contexts/src/theme/index.ts

@@ -1,2 +1,3 @@
 export { default as ThemeContext, useThemeContext } from './ThemeContext';
 export { ThemeProvider } from './ThemeProvider';
+export { isThemeV2Enabled } from './isThemeV2Enabled';

packages/contexts/src/theme/isThemeV2Enabled.ts

@@ -0,0 +1,17 @@
+import { type StoreConfig } from '@bigcommerce/checkout-sdk/essential';
+
+export const isThemeV2Enabled = (config?: StoreConfig): boolean => {
+    if (!config?.checkoutSettings) {
+        return false;
+    }
+
+    const newThemeExperimentEnabled = Boolean(
+        config.checkoutSettings.features['CHECKOUT-7962.update_font_style_on_checkout_page'] ??
+            true,
+    );
+    const newThemeSettingEnabled = Boolean(
+        config.checkoutSettings.checkoutUserExperienceSettings.checkoutV2Theme ?? false,
+    );
+
+    return newThemeSettingEnabled && newThemeExperimentEnabled;
+};

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

@@ -421,13 +421,13 @@ const Checkout = ({
         (isBillingSameAsShipping: boolean): void => {
             setState((prev) => ({ ...prev, isBillingSameAsShipping }));
 
-            if (isBillingSameAsShipping) {
+            if (isBillingSameAsShipping || themeV2) {
                 navigateToNextIncompleteStep();
             } else {
                 navigateToStep(CheckoutStepType.Billing);
             }
         },
-        [navigateToNextIncompleteStep, navigateToStep],
+        [navigateToNextIncompleteStep, navigateToStep, themeV2],
     );
 
     const handleBillingSameAsShippingChange = useCallback(

packages/core/src/app/checkout/getCheckoutStepStatuses.test.ts

@@ -480,6 +480,49 @@ describe('getCheckoutStepStatuses()', () => {
         ]);
     });
 
+    describe('themeV2 (billing captured on the payment step)', () => {
+        const getThemeV2Config = () => ({
+            ...getStoreConfig(),
+            checkoutSettings: {
+                ...getStoreConfig().checkoutSettings,
+                features: {
+                    ...getStoreConfig().checkoutSettings.features,
+                    'CHECKOUT-7962.update_font_style_on_checkout_page': true,
+                },
+                checkoutUserExperienceSettings: {
+                    ...getStoreConfig().checkoutSettings.checkoutUserExperienceSettings,
+                    checkoutV2Theme: true,
+                },
+            },
+        });
+
+        beforeEach(() => {
+            jest.spyOn(state.data, 'getConfig').mockReturnValue(getThemeV2Config());
+        });
+
+        it('omits the standalone billing step', () => {
+            expect(
+                find(getCheckoutStepStatuses(state), { type: CheckoutStepType.Billing }),
+            ).toBeUndefined();
+        });
+
+        it('returns the remaining steps in order without billing', () => {
+            expect(getCheckoutStepStatuses(state).map((step) => step.type)).toEqual([
+                CheckoutStepType.Customer,
+                CheckoutStepType.Shipping,
+                CheckoutStepType.Payment,
+            ]);
+        });
+
+        it('still omits the billing step when a wallet payment (e.g. Amazon Pay) is present', () => {
+            jest.spyOn(state.data, 'getCheckout').mockReturnValue(getCheckoutWithPayments());
+
+            expect(
+                find(getCheckoutStepStatuses(state), { type: CheckoutStepType.Billing }),
+            ).toBeUndefined();
+        });
+    });
+
     it('marks latter steps as non-editable if earlier steps are incomplete', () => {
         jest.spyOn(state.data, 'getShippingAddress').mockReturnValue(undefined);
 

packages/core/src/app/checkout/getCheckoutStepStatuses.ts

@@ -2,6 +2,7 @@ import { type CheckoutPayment, type CheckoutSelectors } from '@bigcommerce/check
 import { compact } from 'lodash';
 import { createSelector } from 'reselect';
 
+import { isThemeV2Enabled } from '@bigcommerce/checkout/contexts';
 import { shouldUseStripeLinkByMinimumAmount } from '@bigcommerce/checkout/instrument-utils';
 
 import { isValidAddress } from '../address';
@@ -96,7 +97,11 @@ const getBillingStepStatus = createSelector(
             : EMPTY_ARRAY;
     },
     ({ data }: CheckoutSelectors) => data.getConfig(),
-    (checkout, billingAddress, billingAddressFields) => {
+    (checkout, billingAddress, billingAddressFields, config) => {
+        if (isThemeV2Enabled(config)) {
+            return undefined;
+        }
+
         const hasAddress = billingAddress
             ? isValidAddress(billingAddress, billingAddressFields)
             : false;