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

Author: davidchin

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';

packages/core/src/common/registry/registry.ts

@@ -32,6 +32,13 @@ export default class Registry<T, K extends string = string> {
         }
     }
 
+    getFactory(token: string): Factory<T> | undefined {
+        const resolvedToken = this._tokenResolver(token, Object.keys(this._factories));
+        const factory = resolvedToken ? this._factories[resolvedToken] : undefined;
+
+        return factory;
+    }
+
     register(token: K, factory: Factory<T>): void {
         if (this._hasFactory(token)) {
             throw new InvalidArgumentError(`'${token}' is already registered.`);
@@ -50,8 +57,7 @@ export default class Registry<T, K extends string = string> {
 
     private _getInstance(token: string, cacheToken: string): T {
         if (!this._hasInstance(cacheToken)) {
-            const resolvedToken = this._tokenResolver(token, Object.keys(this._factories));
-            const factory = resolvedToken && this._factories[resolvedToken];
+            const factory = this.getFactory(token);
 
             if (!factory) {
                 throw new InvalidArgumentError(`'${token}' is not registered.`);

packages/core/src/common/registry/resolve-id-registry.ts

@@ -18,6 +18,14 @@ export default class ResolveIdRegistry<TType, TToken extends { [key: string]: un
         return this._registry.get(this._encodeToken(resolveId));
     }
 
+    getFactory(resolveId: TToken): Factory<TType> | undefined {
+        try {
+            return this._registry.getFactory(this._encodeToken(resolveId));
+        } catch (error) {
+            return undefined;
+        }
+    }
+
     register(resolveId: TToken, factory: Factory<TType>): void {
         this._registry.register(this._encodeToken(resolveId), factory);
     }