feat(payment): added BraintreeSDKVersionManager (#2932)

Author: bc-nick

packages/apple-pay-integration/src/apple-pay-button-strategy.spec.ts

@@ -4,6 +4,7 @@ import { getScriptLoader } from '@bigcommerce/script-loader';
 import {
     BraintreeScriptLoader,
     BraintreeSdk,
+    BraintreeSDKVersionManager,
     getBraintree,
     getDataCollectorMock,
     getDeviceDataMock,
@@ -46,6 +47,7 @@ describe('ApplePayButtonStrategy', () => {
     let applePaySession: MockApplePaySession;
     let braintreeSdk: BraintreeSdk;
     let applePayScriptLoader: ApplePayScriptLoader;
+    let braintreeSDKVersionManager: BraintreeSDKVersionManager;
 
     beforeEach(() => {
         applePaySession = new MockApplePaySession();
@@ -57,7 +59,10 @@ describe('ApplePayButtonStrategy', () => {
         applePayFactory = new ApplePaySessionFactory();
         requestSender = createRequestSender();
         paymentIntegrationService = new PaymentIntegrationServiceMock();
-        braintreeSdk = new BraintreeSdk(new BraintreeScriptLoader(getScriptLoader(), window));
+        braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+        braintreeSdk = new BraintreeSdk(
+            new BraintreeScriptLoader(getScriptLoader(), window, braintreeSDKVersionManager),
+        );
         applePayScriptLoader = new ApplePayScriptLoader(getScriptLoader());
 
         jest.spyOn(requestSender, 'post').mockReturnValue(Promise.resolve(getResponse({})));

packages/apple-pay-integration/src/apple-pay-customer-strategy.spec.ts

@@ -4,6 +4,7 @@ import { getScriptLoader } from '@bigcommerce/script-loader';
 import {
     BraintreeScriptLoader,
     BraintreeSdk,
+    BraintreeSDKVersionManager,
     getBraintree,
     getDataCollectorMock,
     getDeviceDataMock,
@@ -47,6 +48,7 @@ describe('ApplePayCustomerStrategy', () => {
     let braintreeSdk: BraintreeSdk;
     let applePayScriptLoader: ApplePayScriptLoader;
     let storeConfigMock: StoreConfig;
+    let braintreeSDKVersionManager: BraintreeSDKVersionManager;
 
     beforeEach(() => {
         applePaySession = new MockApplePaySession();
@@ -58,7 +60,10 @@ describe('ApplePayCustomerStrategy', () => {
         applePayFactory = new ApplePaySessionFactory();
         requestSender = createRequestSender();
         paymentIntegrationService = new PaymentIntegrationServiceMock();
-        braintreeSdk = new BraintreeSdk(new BraintreeScriptLoader(getScriptLoader(), window));
+        braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+        braintreeSdk = new BraintreeSdk(
+            new BraintreeScriptLoader(getScriptLoader(), window, braintreeSDKVersionManager),
+        );
         applePayScriptLoader = new ApplePayScriptLoader(getScriptLoader());
         storeConfigMock = getConfig().storeConfig;
         storeConfigMock.checkoutSettings.features = {

packages/apple-pay-integration/src/apple-pay-payment-strategy.spec.ts

@@ -5,6 +5,7 @@ import { merge } from 'lodash';
 import {
     BraintreeScriptLoader,
     BraintreeSdk,
+    BraintreeSDKVersionManager,
     getBraintree,
     getDataCollectorMock,
     getDeviceDataMock,
@@ -36,6 +37,7 @@ describe('ApplePayPaymentStrategy', () => {
     let paymentMethod: PaymentMethod;
     let applePaySession: MockApplePaySession;
     let braintreeSdk: BraintreeSdk;
+    let braintreeSDKVersionManager: BraintreeSDKVersionManager;
 
     beforeEach(() => {
         applePaySession = new MockApplePaySession();
@@ -45,8 +47,11 @@ describe('ApplePayPaymentStrategy', () => {
             value: applePaySession,
         });
 
+        braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
         paymentIntegrationService = new PaymentIntegrationServiceMock();
-        braintreeSdk = new BraintreeSdk(new BraintreeScriptLoader(getScriptLoader(), window));
+        braintreeSdk = new BraintreeSdk(
+            new BraintreeScriptLoader(getScriptLoader(), window, braintreeSDKVersionManager),
+        );
 
         requestSender = createRequestSender();
         applePayFactory = new ApplePaySessionFactory();

packages/apple-pay-integration/src/create-apple-pay-button-strategy.ts

@@ -1,7 +1,11 @@
 import { createRequestSender } from '@bigcommerce/request-sender';
 import { getScriptLoader, ScriptLoader } from '@bigcommerce/script-loader';
 
-import { BraintreeScriptLoader, BraintreeSdk } from '@bigcommerce/checkout-sdk/braintree-utils';
+import {
+    BraintreeScriptLoader,
+    BraintreeSdk,
+    BraintreeSDKVersionManager,
+} from '@bigcommerce/checkout-sdk/braintree-utils';
 import {
     CheckoutButtonStrategyFactory,
     toResolvableModule,
@@ -16,11 +20,15 @@ const createApplePayButtonStrategy: CheckoutButtonStrategyFactory<ApplePayButton
 ) => {
     const { getHost } = paymentIntegrationService.getState();
 
+    const braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+
     return new ApplePayButtonStrategy(
         createRequestSender({ host: getHost() }),
         paymentIntegrationService,
         new ApplePaySessionFactory(),
-        new BraintreeSdk(new BraintreeScriptLoader(getScriptLoader(), window)),
+        new BraintreeSdk(
+            new BraintreeScriptLoader(getScriptLoader(), window, braintreeSDKVersionManager),
+        ),
         new ApplePayScriptLoader(new ScriptLoader()),
     );
 };

packages/apple-pay-integration/src/create-apple-pay-customer-strategy.ts

@@ -1,7 +1,11 @@
 import { createRequestSender } from '@bigcommerce/request-sender';
 import { getScriptLoader, ScriptLoader } from '@bigcommerce/script-loader';
 
-import { BraintreeScriptLoader, BraintreeSdk } from '@bigcommerce/checkout-sdk/braintree-utils';
+import {
+    BraintreeScriptLoader,
+    BraintreeSdk,
+    BraintreeSDKVersionManager,
+} from '@bigcommerce/checkout-sdk/braintree-utils';
 import {
     CustomerStrategyFactory,
     toResolvableModule,
@@ -16,11 +20,15 @@ const createApplePayCustomerStrategy: CustomerStrategyFactory<ApplePayCustomerSt
 ) => {
     const { getHost } = paymentIntegrationService.getState();
 
+    const braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+
     return new ApplePayCustomerStrategy(
         createRequestSender({ host: getHost() }),
         paymentIntegrationService,
         new ApplePaySessionFactory(),
-        new BraintreeSdk(new BraintreeScriptLoader(getScriptLoader(), window)),
+        new BraintreeSdk(
+            new BraintreeScriptLoader(getScriptLoader(), window, braintreeSDKVersionManager),
+        ),
         new ApplePayScriptLoader(new ScriptLoader()),
     );
 };

packages/apple-pay-integration/src/create-apple-pay-payment-strategy.ts

@@ -1,7 +1,11 @@
 import { createRequestSender } from '@bigcommerce/request-sender';
 import { getScriptLoader } from '@bigcommerce/script-loader';
 
-import { BraintreeScriptLoader, BraintreeSdk } from '@bigcommerce/checkout-sdk/braintree-utils';
+import {
+    BraintreeScriptLoader,
+    BraintreeSdk,
+    BraintreeSDKVersionManager,
+} from '@bigcommerce/checkout-sdk/braintree-utils';
 import {
     PaymentStrategyFactory,
     toResolvableModule,
@@ -14,12 +18,15 @@ const createApplePayPaymentStrategy: PaymentStrategyFactory<ApplePayPaymentStrat
     paymentIntegrationService,
 ) => {
     const { getHost } = paymentIntegrationService.getState();
+    const braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
 
     return new ApplePayPaymentStrategy(
         createRequestSender({ host: getHost() }),
         paymentIntegrationService,
         new ApplePaySessionFactory(),
-        new BraintreeSdk(new BraintreeScriptLoader(getScriptLoader(), window)),
+        new BraintreeSdk(
+            new BraintreeScriptLoader(getScriptLoader(), window, braintreeSDKVersionManager),
+        ),
     );
 };
 

packages/braintree-integration/src/braintree-ach/braintree-ach-payment-strategy.spec.ts

@@ -4,6 +4,7 @@ import {
     BraintreeDataCollector,
     BraintreeScriptLoader,
     BraintreeSdk,
+    BraintreeSDKVersionManager,
     BraintreeUsBankAccount,
     getDataCollectorMock,
     getUsBankAccountMock,
@@ -29,6 +30,7 @@ describe('BraintreeAchPaymentStrategy', () => {
     let braintreeDataCollector: BraintreeDataCollector;
     let paymentIntegrationService: PaymentIntegrationService;
     let strategy: BraintreeAchPaymentStrategy;
+    let braintreeSDKVersionManager: BraintreeSDKVersionManager;
 
     const methodId = 'braintreeach';
     const paymentMethodMock = getBraintreeAchPaymentMethod();
@@ -44,7 +46,12 @@ describe('BraintreeAchPaymentStrategy', () => {
         braintreeUsBankAccount = getUsBankAccountMock();
         braintreeDataCollector = getDataCollectorMock();
 
-        braintreeScriptLoader = new BraintreeScriptLoader(getScriptLoader(), window);
+        braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+        braintreeScriptLoader = new BraintreeScriptLoader(
+            getScriptLoader(),
+            window,
+            braintreeSDKVersionManager,
+        );
         braintreeSdk = new BraintreeSdk(braintreeScriptLoader);
         paymentIntegrationService = new PaymentIntegrationServiceMock();
 

packages/braintree-integration/src/braintree-ach/create-braintree-ach-payment-strategy.ts

@@ -9,7 +9,10 @@ import BraintreeAchPaymentStrategy from './braintree-ach-payment-strategy';
 const createBraintreeAchPaymentStrategy: PaymentStrategyFactory<BraintreeAchPaymentStrategy> = (
     paymentIntegrationService,
 ) => {
-    return new BraintreeAchPaymentStrategy(paymentIntegrationService, createBraintreeSdk());
+    return new BraintreeAchPaymentStrategy(
+        paymentIntegrationService,
+        createBraintreeSdk(paymentIntegrationService),
+    );
 };
 
 export default toResolvableModule(createBraintreeAchPaymentStrategy, [{ id: 'braintreeach' }]);

packages/braintree-integration/src/braintree-fastlane/braintree-fastlane-customer-strategy.spec.ts

@@ -3,6 +3,7 @@ import { getScriptLoader } from '@bigcommerce/script-loader';
 import {
     BraintreeIntegrationService,
     BraintreeScriptLoader,
+    BraintreeSDKVersionManager,
     getBraintree,
 } from '@bigcommerce/checkout-sdk/braintree-utils';
 import {
@@ -27,6 +28,7 @@ describe('BraintreeFastlaneCustomerStrategy', () => {
     let browserStorage: BrowserStorage;
     let paymentIntegrationService: PaymentIntegrationService;
     let strategy: BraintreeFastlaneCustomerStrategy;
+    let braintreeSDKVersionManager: BraintreeSDKVersionManager;
 
     const customer = getGuestCustomer();
     const storeConfig = getConfig().storeConfig;
@@ -48,7 +50,12 @@ describe('BraintreeFastlaneCustomerStrategy', () => {
     };
 
     beforeEach(() => {
-        braintreeScriptLoader = new BraintreeScriptLoader(getScriptLoader(), window);
+        braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+        braintreeScriptLoader = new BraintreeScriptLoader(
+            getScriptLoader(),
+            window,
+            braintreeSDKVersionManager,
+        );
         braintreeIntegrationService = new BraintreeIntegrationService(
             braintreeScriptLoader,
             window,

packages/braintree-integration/src/braintree-fastlane/braintree-fastlane-payment-strategy.spec.ts

@@ -1,6 +1,6 @@
 import { getScriptLoader } from '@bigcommerce/script-loader';
-import { noop } from 'lodash';
 import { EventEmitter } from 'events';
+import { noop } from 'lodash';
 
 import {
     Braintree3DSVerifyCardCallback,
@@ -9,6 +9,7 @@ import {
     BraintreeIntegrationService,
     BraintreeScriptLoader,
     BraintreeSdk,
+    BraintreeSDKVersionManager,
     BraintreeThreeDSecure,
     BraintreeThreeDSecureOptions,
     getBraintree,
@@ -35,9 +36,10 @@ import {
 } from '@bigcommerce/checkout-sdk/payment-integrations-test-utils';
 import { BrowserStorage } from '@bigcommerce/checkout-sdk/storage';
 
+import { getThreeDSecureMock } from '../mocks/braintree.mock';
+
 import BraintreeFastlanePaymentStrategy from './braintree-fastlane-payment-strategy';
 import BraintreeFastlaneUtils from './braintree-fastlane-utils';
-import { getThreeDSecureMock } from '../mocks/braintree.mock';
 
 describe('BraintreeFastlanePaymentStrategy', () => {
     let braintreeFastlaneUtils: BraintreeFastlaneUtils;
@@ -50,6 +52,7 @@ describe('BraintreeFastlanePaymentStrategy', () => {
     let braintreeSdk: BraintreeSdk;
     let threeDSecure: BraintreeThreeDSecure;
     let eventEmitter: EventEmitter;
+    let braintreeSDKVersionManager: BraintreeSDKVersionManager;
 
     const methodId = 'braintreeacceleratedcheckout';
     const deviceSessionId = 'device_session_id_mock';
@@ -170,7 +173,12 @@ describe('BraintreeFastlanePaymentStrategy', () => {
         threeDSecure = getThreeDSecureMock();
         eventEmitter = new EventEmitter();
 
-        braintreeScriptLoader = new BraintreeScriptLoader(getScriptLoader(), window);
+        braintreeSDKVersionManager = new BraintreeSDKVersionManager(paymentIntegrationService);
+        braintreeScriptLoader = new BraintreeScriptLoader(
+            getScriptLoader(),
+            window,
+            braintreeSDKVersionManager,
+        );
         braintreeIntegrationService = new BraintreeIntegrationService(
             braintreeScriptLoader,
             window,
@@ -785,6 +793,7 @@ describe('BraintreeFastlanePaymentStrategy', () => {
                     isFastlaneEnabled: true,
                 },
             };
+
             paymentMethod.config.is3dsEnabled = false;
 
             jest.spyOn(
@@ -940,6 +949,7 @@ describe('BraintreeFastlanePaymentStrategy', () => {
 
         it('should reject with a PaymentMethodCancelledError if customer cancels', async () => {
             paymentMethod.config.is3dsEnabled = true;
+
             const threeDSecureMock = {
                 ...threeDSecure,
                 verifyCard: (_options, callback) => {
@@ -953,8 +963,11 @@ describe('BraintreeFastlanePaymentStrategy', () => {
                     return Promise.resolve('fastlane_token_mock');
                 },
             };
+
             jest.spyOn(braintreeSdk, 'getBraintreeThreeDS').mockResolvedValue(threeDSecureMock);
+
             const onErrorMock = jest.fn();
+
             await strategy.initialize({
                 methodId,
                 braintreefastlane: {
@@ -978,6 +991,7 @@ describe('BraintreeFastlanePaymentStrategy', () => {
             await strategy.execute(executeOptions);
 
             const next = jest.fn();
+
             eventEmitter.emit('onLookupComplete', next);
 
             expect(next).toHaveBeenCalled();
@@ -991,6 +1005,7 @@ describe('BraintreeFastlanePaymentStrategy', () => {
 
             const next = jest.fn();
             const cancelCallback = jest.fn();
+
             eventEmitter.emit('onLookupComplete', next);
             eventEmitter.emit('on', cancelCallback);