feat(core): CHECKOUT-9450 Lazy load payment strategies through essential build

Author: davidchin

packages/bigcommerce-payments-integration/src/bigcommerce-payments-fastlane/bigcommerce-payments-fastlane-payment-strategy.spec.ts

@@ -750,6 +750,7 @@ describe('BigCommercePaymentsFastlanePaymentStrategy', () => {
                     onError: jest.fn(),
                 },
             };
+
             jest.spyOn(paymentIntegrationService, 'submitPayment').mockRejectedValue({
                 name: 'Error',
                 message: 'Payment request failed',

packages/bigcommerce-payments-integration/src/bigcommerce-payments-fastlane/bigcommerce-payments-fastlane-payment-strategy.ts

@@ -30,14 +30,14 @@ import {
     PaymentStrategy,
     VaultedInstrument,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import { isExperimentEnabled } from '@bigcommerce/checkout-sdk/utility';
 
 import BigCommercePaymentsRequestSender from '../bigcommerce-payments-request-sender';
+import { LiabilityShiftEnum } from '../bigcommerce-payments-types';
 
 import BigCommercePaymentsFastlanePaymentInitializeOptions, {
     WithBigCommercePaymentsFastlanePaymentInitializeOptions,
 } from './bigcommerce-payments-fastlane-payment-initialize-options';
-import { LiabilityShiftEnum } from '../bigcommerce-payments-types';
-import { isExperimentEnabled } from '@bigcommerce/checkout-sdk/utility';
 
 export default class BigCommercePaymentsFastlanePaymentStrategy implements PaymentStrategy {
     private paypalComponentMethods?: PayPalFastlaneCardComponentMethods;
@@ -158,6 +158,7 @@ export default class BigCommercePaymentsFastlanePaymentStrategy implements Payme
 
         try {
             await this.paymentIntegrationService.submitOrder(order, options);
+
             const paymentPayload = isVaultedFlow
                 ? await this.prepareVaultedInstrumentPaymentPayload(methodId, paymentData)
                 : await this.preparePaymentPayload(methodId, paymentData);
@@ -406,6 +407,7 @@ export default class BigCommercePaymentsFastlanePaymentStrategy implements Payme
     private async createOrder(id: string): Promise<void> {
         const state = this.paymentIntegrationService.getState();
         const cartId = state.getCartOrThrow().id;
+
         if (this.methodId) {
             const { orderId } = await this.bigCommercePaymentsRequestSender.createOrder(
                 this.methodId,

packages/core/src/checkout-buttons/checkout-button-initializer.spec.ts

@@ -26,7 +26,7 @@ describe('CheckoutButtonInitializer', () => {
 
         buttonActionCreator = new CheckoutButtonStrategyActionCreator(
             createCheckoutButtonRegistry(store, createRequestSender(), createFormPoster(), 'en'),
-            createCheckoutButtonRegistryV2(createPaymentIntegrationService(store)),
+            createCheckoutButtonRegistryV2(createPaymentIntegrationService(store), {}),
             new PaymentMethodActionCreator(new PaymentMethodRequestSender(createRequestSender())),
         );
 

packages/core/src/checkout-buttons/checkout-button-strategy-action-creator.spec.ts

@@ -48,7 +48,7 @@ describe('CheckoutButtonStrategyActionCreator', () => {
         );
         strategy = new MockButtonStrategy();
         store = createCheckoutStore();
-        registryV2 = createCheckoutButtonRegistryV2(createPaymentIntegrationService(store));
+        registryV2 = createCheckoutButtonRegistryV2(createPaymentIntegrationService(store), {});
         registry.register(CheckoutButtonMethodType.MASTERPASS, () => strategy);
 
         jest.spyOn(paymentMethodActionCreator, 'loadPaymentMethod').mockReturnValue(() =>

packages/core/src/checkout-buttons/create-checkout-button-initializer.ts

@@ -3,6 +3,7 @@ import { createRequestSender } from '@bigcommerce/request-sender';
 
 import { createCheckoutStore } from '../checkout';
 import { ConfigState } from '../config';
+import * as defaultCheckoutButtonStrategyFactories from '../generated/checkout-button-strategies';
 import { PaymentMethodActionCreator, PaymentMethodRequestSender } from '../payment';
 import { createPaymentIntegrationService } from '../payment-integration';
 
@@ -53,7 +54,12 @@ export default function createCheckoutButtonInitializer(
     const requestSender = createRequestSender({ host });
     const formPoster = createFormPoster({ host });
     const paymentIntegrationService = createPaymentIntegrationService(store);
-    const registryV2 = createCheckoutButtonRegistryV2(paymentIntegrationService);
+    const registryV2 = createCheckoutButtonRegistryV2(
+        paymentIntegrationService,
+        defaultCheckoutButtonStrategyFactories,
+        // TODO: Replace once CHECKOUT-9450.lazy_load_payment_strategies experiment is rolled out
+        // process.env.ESSENTIAL_BUILD ? {} : defaultCheckoutButtonStrategyFactories,
+    );
 
     return new CheckoutButtonInitializer(
         store,

packages/core/src/checkout-buttons/create-checkout-button-registry-v2.ts

@@ -7,15 +7,14 @@ import {
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
 import { ResolveIdRegistry } from '../common/registry';
-import * as defaultCheckoutButtonStrategyFactories from '../generated/checkout-button-strategies';
 
 export interface CheckoutButtonStrategyFactories {
     [key: string]: CheckoutButtonStrategyFactory<CheckoutButtonStrategy>;
 }
 
 export default function createCheckoutButtonStrategyRegistry(
     paymentIntegrationService: PaymentIntegrationService,
-    checkoutButtonStrategyFactories: CheckoutButtonStrategyFactories = defaultCheckoutButtonStrategyFactories,
+    checkoutButtonStrategyFactories: CheckoutButtonStrategyFactories,
 ): ResolveIdRegistry<CheckoutButtonStrategy, CheckoutButtonStrategyResolveId> {
     const registry = new ResolveIdRegistry<
         CheckoutButtonStrategy,

packages/core/src/checkout/checkout-service.spec.ts

@@ -18,7 +18,7 @@ import {
 } from '../billing';
 import { getBillingAddress } from '../billing/billing-addresses.mock';
 import { createDataStoreProjection, DataStoreProjection } from '../common/data-store';
-import { ErrorActionCreator } from '../common/error';
+import { ErrorActionCreator, ErrorLogger } from '../common/error';
 import { getResponse } from '../common/http-request/responses.mock';
 import { ResolveIdRegistry } from '../common/registry';
 import { ConfigActionCreator, ConfigRequestSender } from '../config';
@@ -253,8 +253,8 @@ describe('CheckoutService', () => {
         jest.spyOn(paymentStrategy, 'deinitialize').mockResolvedValue(Promise.resolve());
 
         paymentStrategyRegistry = new PaymentStrategyRegistry();
-        paymentStrategyRegistryV2 = createPaymentStrategyRegistryV2(paymentIntegrationService);
-        customerRegistryV2 = createCustomerStrategyRegistryV2(paymentIntegrationService);
+        paymentStrategyRegistryV2 = createPaymentStrategyRegistryV2(paymentIntegrationService, {});
+        customerRegistryV2 = createCustomerStrategyRegistryV2(paymentIntegrationService, {});
 
         // This can't be fixed until we have differences between core and payment integration api payment strategy types
         // TODO: remove ts-ignore and update test with related type (PAYPAL-4383)
@@ -376,9 +376,13 @@ describe('CheckoutService', () => {
             checkoutRequestSender,
         );
 
+        const errorLogger: ErrorLogger = { log: jest.fn() };
+
         customerStrategyActionCreator = new CustomerStrategyActionCreator(
             createCustomerStrategyRegistry(store, requestSender, locale),
             customerRegistryV2,
+            paymentIntegrationService,
+            errorLogger,
         );
 
         instrumentActionCreator = new InstrumentActionCreator(instrumentRequestSender);
@@ -397,6 +401,8 @@ describe('CheckoutService', () => {
             paymentStrategyRegistryV2,
             orderActionCreator,
             spamProtectionActionCreator,
+            paymentIntegrationService,
+            errorLogger,
         );
 
         shippingStrategyActionCreator = new ShippingStrategyActionCreator(

packages/core/src/checkout/create-checkout-service.ts

@@ -3,7 +3,7 @@ import { createScriptLoader } from '@bigcommerce/script-loader';
 
 import { BillingAddressActionCreator, BillingAddressRequestSender } from '../billing';
 import { createDataStoreProjection } from '../common/data-store';
-import { ErrorActionCreator } from '../common/error';
+import { DefaultErrorLogger, ErrorActionCreator, ErrorLogger } from '../common/error';
 import { getDefaultLogger } from '../common/log';
 import { getEnvironment } from '../common/utility';
 import { ConfigActionCreator, ConfigRequestSender, ConfigState, ConfigWindow } from '../config';
@@ -28,7 +28,8 @@ import {
     WorkerExtensionMessenger,
 } from '../extension';
 import { FormFieldsActionCreator, FormFieldsRequestSender } from '../form';
-import * as defaultPaymentStrategyFactories from '../generated/payment-strategies';
+import * as customerStrategyFactories from '../generated/customer-strategies';
+import * as paymentStrategyFactories from '../generated/payment-strategies';
 import { CountryActionCreator, CountryRequestSender } from '../geography';
 import { OrderActionCreator, OrderRequestSender } from '../order';
 import {
@@ -107,7 +108,11 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
         errors: {},
         statuses: {},
     };
-    const { locale = '', shouldWarnMutation = true } = options || {};
+    const {
+        locale = '',
+        shouldWarnMutation = true,
+        errorLogger = new DefaultErrorLogger(),
+    } = options || {};
     const requestSender = createRequestSender({ host: options && options.host });
     const store = createCheckoutStore({ config }, { shouldWarnMutation });
     const paymentClient = createPaymentClient(store);
@@ -136,12 +141,20 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
         formFieldsActionCreator,
     );
     const paymentIntegrationService = createPaymentIntegrationService(store);
+
     const registryV2 = createPaymentStrategyRegistryV2(
         paymentIntegrationService,
-        defaultPaymentStrategyFactories,
+        paymentStrategyFactories,
+        // TODO: Replace once CHECKOUT-9450.lazy_load_payment_strategies experiment is rolled out
+        // process.env.ESSENTIAL_BUILD ? {} : paymentStrategyFactories,
         { useFallback: true },
     );
-    const customerRegistryV2 = createCustomerStrategyRegistryV2(paymentIntegrationService);
+    const customerRegistryV2 = createCustomerStrategyRegistryV2(
+        paymentIntegrationService,
+        customerStrategyFactories,
+        // TODO: Replace once CHECKOUT-9450.lazy_load_payment_strategies experiment is rolled out
+        // process.env.ESSENTIAL_BUILD ? {} : customerStrategyFactories,
+    );
     const extensionActionCreator = new ExtensionActionCreator(
         new ExtensionRequestSender(requestSender),
     );
@@ -174,6 +187,8 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
         new CustomerStrategyActionCreator(
             createCustomerStrategyRegistry(store, requestSender, locale),
             customerRegistryV2,
+            paymentIntegrationService,
+            errorLogger,
         ),
         new ErrorActionCreator(),
         new GiftCertificateActionCreator(new GiftCertificateRequestSender(requestSender)),
@@ -187,10 +202,13 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
                 requestSender,
                 spamProtection,
                 locale,
+                errorLogger,
             ),
             registryV2,
             orderActionCreator,
             spamProtectionActionCreator,
+            paymentIntegrationService,
+            errorLogger,
         ),
         new PickupOptionActionCreator(new PickupOptionRequestSender(requestSender)),
         new ShippingCountryActionCreator(
@@ -213,4 +231,5 @@ export interface CheckoutServiceOptions {
     host?: string;
     shouldWarnMutation?: boolean;
     externalSource?: string;
+    errorLogger?: ErrorLogger;
 }

packages/core/src/common/error/error-logger.ts

@@ -0,0 +1,10 @@
+export interface ErrorLogger {
+    log(error: Error): void;
+}
+
+export class DefaultErrorLogger implements ErrorLogger {
+    log(error: Error): void {
+        // eslint-disable-next-line no-console
+        console.error(error);
+    }
+}

packages/core/src/common/error/index.ts

@@ -1,4 +1,5 @@
 export * from './error-actions';
+export * from './error-logger';
 
 export { default as clearErrorReducer } from './clear-error-reducer';
 export { default as createRequestErrorFactory } from './create-request-error-factory';