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

.eslintrc.json

@@ -84,6 +84,18 @@
                         "fixStyle": "inline-type-imports",
                         "disallowTypeAnnotations": false
                     }
+                ],
+                "@typescript-eslint/no-restricted-imports": [
+                    "error",
+                    {
+                        "paths": [
+                            {
+                                "name": "@bigcommerce/checkout-sdk",
+                                "message": "Direct imports from '@bigcommerce/checkout-sdk' are not allowed. Use type-only imports (import type { ... }) or import from subpaths like '@bigcommerce/checkout-sdk/essential' or '@bigcommerce/checkout-sdk/integrations'.",
+                                "allowTypeImports": true
+                            }
+                        ]
+                    }
                 ]
             }
         },
@@ -138,7 +150,17 @@
                 "plugin:jest-dom/recommended"
             ],
             "rules": {
-                "@typescript-eslint/consistent-type-assertions": "off"
+                "@typescript-eslint/consistent-type-assertions": "off",
+                "@typescript-eslint/no-restricted-imports": "off"
+            }
+        },
+        {
+            "files": [
+                "*.mock.ts",
+                "*.mock.tsx"
+            ],
+            "rules": {
+                "@typescript-eslint/no-restricted-imports": "off"
             }
         }
     ]

packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.test.tsx

@@ -6,6 +6,7 @@ import {
     type PaymentInitializeOptions,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
@@ -98,6 +99,7 @@ describe('when using Adyen V2 payment', () => {
 
         expect(initializePayment).toHaveBeenCalledWith(
             expect.objectContaining({
+                integrations: [createAdyenV2PaymentStrategy],
                 adyenv2: {
                     additionalActionOptions: {
                         containerId: 'adyen-scheme-additional-action-component-field',

packages/adyen-integration/src/adyenv2/AdyenV2PaymentMethod.tsx

@@ -5,6 +5,7 @@ import {
     type CardInstrument,
     type PaymentInitializeOptions,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import React, { type FunctionComponent, useCallback, useRef, useState } from 'react';
 
 import { type HostedWidgetComponentProps } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -107,6 +108,7 @@ const AdyenV2PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
 
             return checkoutService.initializePayment({
                 ...options,
+                integrations: [createAdyenV2PaymentStrategy],
                 adyenv2: {
                     cardVerificationContainerId:
                         selectedInstrumentId && cardVerificationContainerId,

packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.test.tsx

@@ -6,6 +6,7 @@ import {
     type PaymentInitializeOptions,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV3PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
@@ -95,6 +96,7 @@ describe('when using AdyenV3 payment', () => {
 
         expect(initializePayment).toHaveBeenCalledWith(
             expect.objectContaining({
+                integrations: [createAdyenV3PaymentStrategy],
                 adyenv3: {
                     cardVerificationContainerId: undefined,
                     containerId: 'adyen-scheme-component-field',

packages/adyen-integration/src/adyenv3/AdyenV3PaymentMethod.tsx

@@ -4,6 +4,7 @@ import {
     type CardInstrument,
     type PaymentInitializeOptions,
 } from '@bigcommerce/checkout-sdk';
+import { createAdyenV3PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/adyen';
 import React, { type FunctionComponent, useCallback, useRef, useState } from 'react';
 
 import { type HostedWidgetComponentProps } from '@bigcommerce/checkout/hosted-widget-integration';
@@ -105,6 +106,7 @@ const AdyenV3PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
 
             return checkoutService.initializePayment({
                 ...options,
+                integrations: [createAdyenV3PaymentStrategy],
                 adyenv3: {
                     cardVerificationContainerId:
                         selectedInstrumentId && cardVerificationContainerId,

packages/affirm-integration/src/AffirmPaymentMethod.tsx

@@ -1,4 +1,6 @@
-import React, { type FunctionComponent, useMemo } from 'react';
+import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createAffirmPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/affirm';
+import React, { type FunctionComponent, useCallback, useMemo } from 'react';
 
 import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration';
 import { TranslatedString } from '@bigcommerce/checkout/locale';
@@ -14,13 +16,23 @@ const AffirmPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
 }) => {
     const description = useMemo(() => <TranslatedString id="payment.affirm_body_text" />, []);
 
+    const initializeAffirmPayment = useCallback(
+        (options: PaymentInitializeOptions) => {
+            return checkoutService.initializePayment({
+                ...options,
+                integrations: [createAffirmPaymentStrategy],
+            });
+        },
+        [checkoutService],
+    );
+
     return (
         <HostedPaymentComponent
             {...rest}
             checkoutService={checkoutService}
             deinitializePayment={checkoutService.deinitializePayment}
             description={description}
-            initializePayment={checkoutService.initializePayment}
+            initializePayment={initializeAffirmPayment}
         />
     );
 };

packages/amazon-pay-v2-integration/src/AmazonPayV2PaymentMethod.test.tsx

@@ -6,6 +6,7 @@ import {
     type PaymentInitializeOptions,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createAmazonPayV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/amazon-pay';
 import { render } from '@testing-library/react';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
@@ -90,6 +91,7 @@ describe('when using AmazonPay payment', () => {
             expect.objectContaining({
                 gatewayId: method.gateway,
                 methodId: 'amazonpay',
+                integrations: [createAmazonPayV2PaymentStrategy],
                 amazonpay: {
                     editButtonId: 'editButtonId',
                 },
@@ -106,6 +108,7 @@ describe('when using AmazonPay payment', () => {
             expect.objectContaining({
                 methodId: method.id,
                 gatewayId: method.gateway,
+                integrations: [createAmazonPayV2PaymentStrategy],
                 [method.id]: {
                     editButtonId: 'editButtonId',
                 },

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

@@ -1,4 +1,5 @@
 import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createAmazonPayV2PaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/amazon-pay';
 import { some } from 'lodash';
 import React, { type FunctionComponent, useCallback } from 'react';
 
@@ -27,6 +28,7 @@ const AmazonPayV2PaymentMethod: FunctionComponent<PaymentMethodProps> = ({
         (options: PaymentInitializeOptions) =>
             checkoutService.initializePayment({
                 ...options,
+                integrations: [createAmazonPayV2PaymentStrategy],
                 amazonpay: {
                     editButtonId: 'editButtonId',
                 },

packages/analytics/src/AnalyticsProvider.test.tsx

@@ -1,4 +1,4 @@
-import * as CheckoutSdk from '@bigcommerce/checkout-sdk';
+import * as CheckoutSdk from '@bigcommerce/checkout-sdk/essential';
 import { render } from '@testing-library/react';
 import React, { useEffect } from 'react';
 
@@ -8,12 +8,12 @@ import AnalyticsProvider from './AnalyticsProvider';
 import * as createAnalyticsService from './createAnalyticsService';
 import useAnalytics from './useAnalytics';
 
-jest.mock('@bigcommerce/checkout-sdk', () => {
+jest.mock('@bigcommerce/checkout-sdk/essential', () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     return {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         __esModule: true,
-        ...jest.requireActual('@bigcommerce/checkout-sdk'),
+        ...jest.requireActual('@bigcommerce/checkout-sdk/essential'),
     };
 });
 

packages/analytics/src/AnalyticsProvider.tsx

@@ -9,7 +9,7 @@ import {
     createStepTracker,
     type PayPalCommerceAnalyticTrackerService,
     type StepTracker,
-} from '@bigcommerce/checkout-sdk';
+} from '@bigcommerce/checkout-sdk/essential';
 import React, { type ReactNode, useMemo } from 'react';
 
 import AnalyticsContext, { type AnalyticsEvents } from './AnalyticsContext';

packages/apple-pay-integration/src/ApplePayPaymentMethod.test.tsx

@@ -1,4 +1,5 @@
 import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk';
+import { createApplePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/apple-pay';
 import React from 'react';
 
 import { type PaymentMethodProps } from '@bigcommerce/checkout/payment-integration-api';
@@ -36,6 +37,7 @@ describe('ApplePayPaymentMethod', () => {
         expect(checkoutService.initializePayment).toHaveBeenCalledWith({
             gatewayId: defaultProps.method.gateway,
             methodId: defaultProps.method.id,
+            integrations: [createApplePayPaymentStrategy],
             applepay: {
                 shippingLabel: defaultProps.language.translate('cart.shipping_text'),
                 subtotalLabel: defaultProps.language.translate('cart.subtotal_text'),

packages/apple-pay-integration/src/ApplePayPaymentMethod.tsx

@@ -1,3 +1,4 @@
+import { createApplePayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/apple-pay';
 import React, { type FunctionComponent, useEffect } from 'react';
 
 import {
@@ -18,6 +19,7 @@ const ApplePayPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
                 await checkoutService.initializePayment({
                     gatewayId: method.gateway,
                     methodId: method.id,
+                    integrations: [createApplePayPaymentStrategy],
                     applepay: {
                         shippingLabel: language.translate('cart.shipping_text'),
                         subtotalLabel: language.translate('cart.subtotal_text'),

packages/barclay-integration/src/BarclaycardPaymentMethod.tsx

@@ -1,4 +1,6 @@
-import React, { type FunctionComponent } from 'react';
+import { type PaymentInitializeOptions } from '@bigcommerce/checkout-sdk';
+import { createCreditCardPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/credit-card';
+import React, { type FunctionComponent, useCallback } from 'react';
 
 import { HostedPaymentComponent } from '@bigcommerce/checkout/hosted-payment-integration';
 import {
@@ -14,13 +16,23 @@ const BarclaycardPaymentMethod: FunctionComponent<PaymentMethodProps> = ({
     paymentForm,
     ...rest
 }) => {
+    const initializeBarclaycardPayment = useCallback(
+        (options: PaymentInitializeOptions) => {
+            return checkoutService.initializePayment({
+                ...options,
+                integrations: [createCreditCardPaymentStrategy],
+            });
+        },
+        [checkoutService],
+    );
+
     return (
         <HostedPaymentComponent
             {...rest}
             checkoutService={checkoutService}
             checkoutState={checkoutState}
             deinitializePayment={checkoutService.deinitializePayment}
-            initializePayment={checkoutService.initializePayment}
+            initializePayment={initializeBarclaycardPayment}
             method={method}
             paymentForm={paymentForm}
         />

packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.test.tsx

@@ -5,6 +5,7 @@ import {
     createLanguageService,
     type PaymentMethod,
 } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsCreditCardsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
 import React, { type FunctionComponent } from 'react';
@@ -108,7 +109,11 @@ describe('BigCommercePaymentsCreditCardPaymentMethod', () => {
 
         await new Promise((resolve) => process.nextTick(resolve));
 
-        expect(checkoutService.initializePayment).toHaveBeenCalled();
+        expect(checkoutService.initializePayment).toHaveBeenCalledWith(
+            expect.objectContaining({
+                integrations: [createBigCommercePaymentsCreditCardsPaymentStrategy],
+            }),
+        );
     });
 
     it('calls initializePayment with correct arguments', async () => {

packages/bigcommerce-payments-integration/src/BigCommercePaymentCreditCards/BigCommercePaymentsCreditCardsPaymentMethod.tsx

@@ -1,4 +1,5 @@
 import { type CardInstrument, type LegacyHostedFormOptions } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsCreditCardsPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import { compact, forIn } from 'lodash';
 import React, { type FunctionComponent, type ReactNode, useCallback, useState } from 'react';
 
@@ -250,6 +251,7 @@ const BigCommercePaymentsCreditCardsPaymentMethod: FunctionComponent<PaymentMeth
             async (options, selectedInstrument) => {
                 return initializePayment({
                     ...options,
+                    integrations: [createBigCommercePaymentsCreditCardsPaymentStrategy],
                     bigcommerce_payments_creditcards: {
                         form: isHostedFormEnabled
                             ? await getHostedFormOptions(selectedInstrument)

packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.test.tsx

@@ -1,4 +1,5 @@
 import { createCheckoutService, createLanguageService } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React from 'react';
 
 import { getPaymentFormServiceMock } from '@bigcommerce/checkout/test-mocks';
@@ -44,7 +45,7 @@ describe('BigCommercePaymentsFastlanePaymentMethod', () => {
 
         expect(initializePayment).toHaveBeenCalledWith({
             methodId: props.method.id,
-
+            integrations: [createBigCommercePaymentsFastlanePaymentStrategy],
             bigcommerce_payments_fastlane: {
                 onInit: expect.any(Function),
                 onChange: expect.any(Function),

packages/bigcommerce-payments-integration/src/BigCommercePaymentsFastlane/BigCommercePaymentsFastlanePaymentMethod.tsx

@@ -1,4 +1,5 @@
 import { type CardInstrument } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsFastlanePaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React, { type FunctionComponent, useEffect, useRef } from 'react';
 
 import { LocaleProvider } from '@bigcommerce/checkout/locale';
@@ -37,7 +38,7 @@ const BigCommercePaymentsFastlanePaymentMethod: FunctionComponent<PaymentMethodP
         try {
             await checkoutService.initializePayment({
                 methodId: method.id,
-
+                integrations: [createBigCommercePaymentsFastlanePaymentStrategy],
                 bigcommerce_payments_fastlane: {
                     onInit: (renderPayPalCardComponent) => {
                         paypalCardComponentRef.current.renderPayPalCardComponent =

packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.test.tsx

@@ -1,4 +1,5 @@
 import { createCheckoutService, type LanguageService } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsRatePayPayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import { fireEvent, render, screen, configure } from '@testing-library/react';
 import { EventEmitter } from 'events';
 import { Formik } from 'formik';
@@ -135,7 +136,7 @@ describe('BigCommercePaymentsRatePayPaymentMethod', () => {
         expect(initializePayment).toHaveBeenCalledWith({
             gatewayId: props.method.gateway,
             methodId: props.method.id,
-
+            integrations: [createBigCommercePaymentsRatePayPayPaymentStrategy],
             bigcommerce_payments_ratepay: {
                 container: '#checkout-payment-continue',
                 legalTextContainer: 'legal-text-container',

packages/bigcommerce-payments-integration/src/BigCommercePaymentsRatePay/BigCommercePaymentsRatePayPaymentMethod.tsx

@@ -1,4 +1,5 @@
 import { type FormField } from '@bigcommerce/checkout-sdk';
+import { createBigCommercePaymentsRatePayPayPaymentStrategy } from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import React, { type FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import {
@@ -83,6 +84,7 @@ const BigCommercePaymentsRatePayPaymentMethod: FunctionComponent<any> = ({
             await checkoutService.initializePayment({
                 gatewayId: method.gateway,
                 methodId: method.id,
+                integrations: [createBigCommercePaymentsRatePayPayPaymentStrategy],
                 bigcommerce_payments_ratepay: {
                     container: '#checkout-payment-continue',
                     legalTextContainer: 'legal-text-container',

packages/bigcommerce-payments-integration/src/components/BigCommercePaymentsPaymentMethodComponent.test.tsx

@@ -4,6 +4,12 @@ import {
     type HostedInstrument,
     type LanguageService,
 } from '@bigcommerce/checkout-sdk';
+import {
+    createBigCommercePaymentsPaymentStrategy,
+    createBigCommercePaymentsAlternativeMethodsPaymentStrategy,
+    createBigCommercePaymentsPayLaterPaymentStrategy,
+    createBigCommercePaymentsVenmoPaymentStrategy,
+} from '@bigcommerce/checkout-sdk/integrations/bigcommerce-payments';
 import { render } from '@testing-library/react';
 import { EventEmitter } from 'events';
 import React from 'react';
@@ -70,6 +76,12 @@ describe('BigCommercePaymentsPaymentMethodComponent', () => {
         expect(initializePayment).toHaveBeenCalledWith({
             gatewayId: props.method.gateway,
             methodId: props.method.id,
+            integrations: [
+                createBigCommercePaymentsPaymentStrategy,
+                createBigCommercePaymentsAlternativeMethodsPaymentStrategy,
+                createBigCommercePaymentsPayLaterPaymentStrategy,
+                createBigCommercePaymentsVenmoPaymentStrategy,
+            ],
             bigcommerce_payments: {
                 container: '#checkout-payment-continue',
                 onInit: expect.any(Function),
@@ -106,6 +118,12 @@ describe('BigCommercePaymentsPaymentMethodComponent', () => {
         expect(initializePayment).toHaveBeenCalledWith({
             gatewayId: props.method.gateway,
             methodId: props.method.id,
+            integrations: [
+                createBigCommercePaymentsPaymentStrategy,
+                createBigCommercePaymentsAlternativeMethodsPaymentStrategy,
+                createBigCommercePaymentsPayLaterPaymentStrategy,
+                createBigCommercePaymentsVenmoPaymentStrategy,
+            ],
             bigcommerce_payments_apms: {
                 container: '#checkout-payment-continue',
                 onError: expect.any(Function),