CHECKOUT-9388: Lazy load customer strategies by importing them on demand

.circleci/config.yml

@@ -243,9 +243,6 @@ workflows:
             <<: *pull_request_filter
           requires:
             - build-prerelease
-      - sdk-on-cdn:
-          filters:
-            <<: *pull_request_filter
       - security/scan:
           name: "Gitleaks secrets scan"
           filters:
@@ -293,6 +290,9 @@ workflows:
             <<: *release_filter
           requires:
             - build
+      - sdk-on-cdn:
+          filters:
+            <<: *release_filter
       - security/scan:
           name: "Gitleaks secrets scan"
           filters:
@@ -309,6 +309,7 @@ workflows:
             - lint
             - build
             - e2e
+            - sdk-on-cdn
             - "Gitleaks secrets scan"
       - upload_to_sentry:
           filters:

package.json

@@ -101,7 +101,7 @@
     "@babel/preset-env": "^7.9.0",
     "@bigcommerce/eslint-config": "^2.6.1",
     "@bigcommerce/eslint-plugin": "^1.4.0",
-    "@faker-js/faker": "^6.3.1",
+    "@faker-js/faker": "^7.6.0",
     "@nx/devkit": "19.8.9",
     "@nx/eslint": "19.8.9",
     "@nx/eslint-plugin": "19.8.9",
@@ -183,7 +183,7 @@
     "ts-loader": "^9.3.0",
     "tslib": "^2.5.3",
     "typescript": "^5.6.2",
-    "webpack": "^5.94.0",
+    "webpack": "^5.101.3",
     "webpack-assets-manifest": "^5.1.0",
     "webpack-cli": "^4.9.2",
     "webpack-inject-plugin": "^1.5.3",

packages/amazon-pay-v2-integration/src/AmazonPayV2Button.tsx

@@ -1,3 +1,4 @@
+import { createAmazonPayV2CustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/amazon-pay';
 import React, { type FunctionComponent, useEffect } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -35,7 +36,7 @@ const AmazonPayV2Button: FunctionComponent<CheckoutButtonProps> = (props) => {
 
     return (
         <div className="AmazonPayContainer">
-            <CheckoutButton {...props} />
+            <CheckoutButton integrations={[createAmazonPayV2CustomerStrategy]} {...props} />
         </div>
     );
 };

packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.test.tsx

@@ -4,6 +4,7 @@ import {
     createCheckoutService,
     createLanguageService,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React from 'react';
 
 import { type CheckoutButtonProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -39,6 +40,7 @@ describe('BigCommercePaymentsButton', () => {
 
         expect(checkoutService.initializeCustomer).toHaveBeenCalledWith({
             methodId: defaultProps.methodId,
+            integrations: [createBigCommercePaymentsCustomerStrategy],
             bigcommerce_payments: {
                 container: 'bigcommerce-payments-button-container',
                 onClick: expect.any(Function),

packages/bigcommerce-payments-integration/src/BigCommercePayments/BigCommercePaymentsButton.tsx

@@ -1,3 +1,4 @@
+import { createBigCommercePaymentsCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React, { type FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -17,6 +18,7 @@ const BigCommercePaymentsButton: FunctionComponent<CheckoutButtonProps> = (props
     return (
         <CheckoutButton
             additionalInitializationOptions={additionalInitializationOptions}
+            integrations={[createBigCommercePaymentsCustomerStrategy]}
             {...props}
         />
     );

packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.test.tsx

@@ -4,6 +4,7 @@ import {
     createCheckoutService,
     createLanguageService,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsPayLaterCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React from 'react';
 
 import { type CheckoutButtonProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -39,6 +40,7 @@ describe('BigcommercePaymentsPayLaterButton', () => {
 
         expect(checkoutService.initializeCustomer).toHaveBeenCalledWith({
             methodId: defaultProps.methodId,
+            integrations: [createBigCommercePaymentsPayLaterCustomerStrategy],
             bigcommerce_payments_paylater: {
                 container: 'bigcommerce-payments-paylater-button-container',
                 onClick: expect.any(Function),

packages/bigcommerce-payments-integration/src/BigCommercePaymentsPayLater/BigcommercePaymentsPayLaterButton.tsx

@@ -1,3 +1,4 @@
+import { createBigCommercePaymentsPayLaterCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React, { type FunctionComponent } from 'react';
 
 import { CheckoutButton } from '@bigcommerce/checkout/checkout-button-integration';
@@ -17,6 +18,7 @@ const BigcommercePaymentsPayLaterButton: FunctionComponent<CheckoutButtonProps>
     return (
         <CheckoutButton
             additionalInitializationOptions={additionalInitializationOptions}
+            integrations={[createBigCommercePaymentsPayLaterCustomerStrategy]}
             {...props}
         />
     );

packages/bolt-integration/src/BoltEmbeddedPaymentMethod.tsx

@@ -1,3 +1,5 @@
+import { type CustomerInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createBoltCustomerStrategy } from '@bigcommerce/checkout-sdk/integrations/bolt';
 import React, { type FunctionComponent, useCallback, useState } from 'react';
 
 import { HostedWidgetPaymentComponent } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -47,6 +49,16 @@ const BoltEmbeddedPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
         [checkoutService, boltEmbeddedContainerId, setFieldValue],
     );
 
+    const initializeBoltCustomer = useCallback(
+        (options: CustomerInitializeOptions) => {
+            return checkoutService.initializeCustomer({
+                ...options,
+                integrations: [createBoltCustomerStrategy],
+            });
+        },
+        [checkoutService],
+    );
+
     const renderCustomPaymentForm = useCallback(
         () => (
             <BoltCustomForm
@@ -71,6 +83,7 @@ const BoltEmbeddedPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
             deinitializePayment={checkoutService.deinitializePayment}
             disableSubmit={disableSubmit}
             hidePaymentSubmitButton={hidePaymentSubmitButton}
+            initializeCustomer={initializeBoltCustomer}
             initializePayment={initializeBoltPayment}
             instruments={instruments}
             isInitializing={isInitializingPayment()}

packages/checkout-button-integration/src/CheckoutButton.tsx

@@ -14,11 +14,13 @@ const CheckoutButton: FunctionComponent<CheckoutButtonProps> = ({
     onUnhandledError,
     onWalletButtonClick,
     additionalInitializationOptions,
+    integrations,
 }) => {
     const initializeCustomerStrategyOrThrow = async () => {
         try {
             await initializeCustomer({
                 methodId,
+                integrations,
                 [methodId]: {
                     container: containerId,
                     onUnhandledError,

packages/core/src/app/address/AddressFormModal.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { type CheckoutService, createCheckoutService } from '@bigcommerce/checkout-sdk';
-import faker from '@faker-js/faker';
+import { faker } from '@faker-js/faker';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 

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

@@ -31,12 +31,6 @@ export interface CheckoutAppProps {
 const CheckoutApp = (props: CheckoutAppProps): ReactElement => {
     const { containerId, sentryConfig, publicPath, sentrySampleRate } = props;
 
-    const checkoutService = useMemo(() => createCheckoutService({
-        locale: getLanguageService().getLocale(),
-        shouldWarnMutation: process.env.NODE_ENV === 'development',
-    }), []);
-    const embeddedStylesheet = useMemo(() => createEmbeddedCheckoutStylesheet(), []);
-    const embeddedSupport = useMemo(() => createEmbeddedCheckoutSupport(getLanguageService()), []);
     const errorLogger = useMemo(() => createErrorLogger(
         { sentry: sentryConfig },
         {
@@ -45,6 +39,13 @@ const CheckoutApp = (props: CheckoutAppProps): ReactElement => {
             sampleRate: sentrySampleRate || 0.1,
         },
     ), []);
+    const checkoutService = useMemo(() => createCheckoutService({
+        locale: getLanguageService().getLocale(),
+        shouldWarnMutation: process.env.NODE_ENV === 'development',
+        errorLogger,
+    }), []);
+    const embeddedStylesheet = useMemo(() => createEmbeddedCheckoutStylesheet(), []);
+    const embeddedSupport = useMemo(() => createEmbeddedCheckoutSupport(getLanguageService()), []);
 
     useEffect(() => {
         ReactModal.setAppElement(`#${containerId}`);