refactor(payment): Moved BT Credit card payment strategy

Author: andriiVitvitskyi1990

packages/braintree-integration/src/braintree-credit-card/braintree-credit-card-payment-strategy-initialize-options.ts

@@ -1,10 +1,10 @@
 import {
     BraintreeError,
     BraintreeFormOptions,
-    BraintreeThreeDSecureOptions,
 } from '@bigcommerce/checkout-sdk/braintree-utils';
 import { StandardError } from '@bigcommerce/checkout-sdk/payment-integration-api';
 import { RequestOptions } from '@bigcommerce/request-sender';
+import { BraintreeThreeDSecureOptions } from '@bigcommerce/checkout-sdk/braintree-integration';
 
 export interface PaymentRequestOptions extends RequestOptions {
     /**

packages/braintree-integration/src/braintree-credit-card/braintree-credit-card-payment-strategy.spec.ts

@@ -56,8 +56,7 @@ export default class BraintreeCreditCardPaymentStrategy implements PaymentStrate
         }
 
         try {
-            // this.braintreePaymentProcessor.initialize(clientToken, braintree);
-            this.braintreeIntegrationService.initialize(clientToken);
+            this.braintreePaymentProcessor.initialize(clientToken, braintree);
 
             if (this.isHostedPaymentFormEnabled(methodId, gatewayId) && braintree?.form) {
                 await this.braintreePaymentProcessor.initializeHostedForm(
@@ -69,7 +68,6 @@ export default class BraintreeCreditCardPaymentStrategy implements PaymentStrate
             }
 
             this.is3dsEnabled = this.paymentMethod.config.is3dsEnabled;
-            // this.deviceSessionId = await this.braintreePaymentProcessor.getSessionId();
             this.deviceSessionId = await this.braintreeIntegrationService.getSessionId();
 
             // TODO: remove this part when BT AXO A/B testing will be finished
@@ -289,7 +287,6 @@ export default class BraintreeCreditCardPaymentStrategy implements PaymentStrate
         if (!clientToken) {
             throw new MissingDataError(MissingDataErrorType.MissingPaymentMethod);
         }
-
         this.braintreeIntegrationService.initialize(clientToken);
 
         await this.braintreeIntegrationService.getBraintreeFastlane(cart.id, config.testMode);

packages/braintree-integration/src/braintree-credit-card/braintree-credit-card-payment-strategy.ts

@@ -1,13 +1,9 @@
 import { EventEmitter } from 'events';
-
-import { getBillingAddress } from '../../../billing/billing-addresses.mock';
-import { NotInitializedError } from '../../../common/error/errors';
-import { PaymentInvalidFormError } from '../../errors';
-
-import { BraintreeHostedFields } from './braintree';
-import BraintreeHostedForm from './braintree-hosted-form';
-import { BraintreeFormOptions } from './braintree-payment-options';
-import BraintreeSDKCreator from './braintree-sdk-creator';
+import { BraintreeHostedFields } from '@bigcommerce/checkout-sdk/braintree-utils';
+import { BraintreeFormOptions } from '../braintree-payment-options';
+import { BraintreeHostedForm } from '@bigcommerce/checkout-sdk/braintree-integration';
+import { NotInitializedError, PaymentInvalidFormError } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import { getBillingAddress } from '@bigcommerce/checkout-sdk/braintree-utils';
 
 describe('BraintreeHostedForm', () => {
     let braintreeSdkCreator: Pick<BraintreeSDKCreator, 'createHostedFields'>;

packages/braintree-integration/src/braintree-hosted-form/braintree-hosted-form.spec.ts

@@ -7,7 +7,9 @@ import {
     BraintreeHostedFields,
     BraintreeHostedFieldsCreatorConfig,
     BraintreeHostedFieldsState,
-    BraintreeHostedFormError, BraintreeIntegrationService, BraintreeScriptLoader,
+    BraintreeHostedFormError,
+    BraintreeIntegrationService,
+    BraintreeScriptLoader,
     TokenizationPayload,
 } from '@bigcommerce/checkout-sdk/braintree-utils';
 import {
@@ -96,6 +98,7 @@ export default class BraintreeHostedForm {
         }
 
         const braintreeHostedFormState = this.cardFields.getState();
+        console.log('CARD FIELDS', this.cardFields.getState());
 
         if (!this.isValidForm(braintreeHostedFormState)) {
             this.handleValidityChange(braintreeHostedFormState);
@@ -151,10 +154,8 @@ export default class BraintreeHostedForm {
     async createHostedFields(
         options: Pick<BraintreeHostedFieldsCreatorConfig, 'fields' | 'styles'>,
     ): Promise<BraintreeHostedFields> {
-        const [client, hostedFields] = await Promise.all([
-            this.braintreeIntegrationService.getClient(),
-            this.braintreeScriptLoader.loadHostedFields(),
-        ]);
+        const client = await this.braintreeIntegrationService.getClient();
+        const hostedFields = await this.braintreeScriptLoader.loadHostedFields();
 
         return hostedFields.create({ ...options, client });
     }
@@ -524,6 +525,7 @@ export default class BraintreeHostedForm {
     };
 
     private isValidForm(event: BraintreeHostedFieldsState): boolean {
+        console.log('isValidForm', event.fields);
         return (
             Object.keys(event.fields) as Array<keyof BraintreeHostedFieldsState['fields']>
         ).every((key) => event.fields[key]?.isValid);

packages/braintree-integration/src/braintree-hosted-form/braintree-hosted-form.ts

@@ -47,3 +47,4 @@ export { default as createBraintreeVisaCheckoutCustomerStrategy } from './braint
 export { default as createBraintreeVenmoButtonStrategy } from './braintree-venmo/create-braintree-venmo-button-strategy';
 
 export { default as BraintreeHostedForm } from './braintree-hosted-form/braintree-hosted-form';
+export * from './braintree-payment-options';

packages/braintree-integration/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    Braintree3DSVerifyCardCallback,
+    Braintree3DSVerifyCardCallback, BraintreeClient, BraintreeModule, BraintreeModuleCreator,
     BraintreeThreeDSecure,
     PaypalButtonStyleColorOption,
 } from '@bigcommerce/checkout-sdk/braintree-utils';
@@ -8,6 +8,7 @@ import {
     DefaultCheckoutButtonHeight,
     PaymentMethod,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import { BraintreeThreeDSecureOptions } from '@bigcommerce/checkout-sdk/braintree-integration';
 
 export function getBraintreeAcceleratedCheckoutPaymentMethod(): PaymentMethod {
     return {
@@ -27,6 +28,79 @@ export function getBraintreeAcceleratedCheckoutPaymentMethod(): PaymentMethod {
     };
 }
 
+export function getTokenizeResponseBody(): BraintreeTokenizeResponse {
+    return {
+        creditCards: [
+            {
+                nonce: 'demo_nonce',
+                details: {
+                    bin: 'demo_bin',
+                    cardType: 'Visa',
+                    expirationMonth: '01',
+                    expirationYear: '2025',
+                    lastFour: '0001',
+                    lastTwo: '01',
+                },
+                description: 'ending in 01',
+                type: 'CreditCard',
+                binData: {
+                    commercial: 'bin_data_commercial',
+                    countryOfIssuance: 'bin_data_country_of_issuance',
+                    debit: 'bin_data_debit',
+                    durbinRegulated: 'bin_data_durbin_regulated',
+                    healthcare: 'bin_data_healthcare',
+                    issuingBank: 'bin_data_issuing_bank',
+                    payroll: 'bin_data_payroll',
+                    prepaid: 'bin_data_prepaid',
+                    productId: 'bin_data_product_id',
+                },
+            },
+        ],
+    };
+}
+
+export function getThreeDSecureOptionsMock(): BraintreeThreeDSecureOptions {
+    return {
+        addFrame: jest.fn(),
+        removeFrame: jest.fn(),
+        additionalInformation: {
+            acsWindowSize: '01',
+        },
+    };
+}
+
+export function getModuleCreatorMock<T>(
+    module: BraintreeModule | BraintreeClient,
+): BraintreeModuleCreator<T> {
+    return {
+        // TODO: remove ts-ignore and update test with related type (PAYPAL-4383)
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        create: jest.fn(() => Promise.resolve(module)),
+    };
+}
+
+export function getBillingAddress() {
+    return {
+        id: '55c96cda6f04c',
+        firstName: 'Test',
+        lastName: 'Tester',
+        email: '[email protected]',
+        company: 'Bigcommerce',
+        address1: '12345 Testing Way',
+        address2: '',
+        city: 'Some City',
+        stateOrProvince: 'California',
+        stateOrProvinceCode: 'CA',
+        country: 'United States',
+        countryCode: 'US',
+        postalCode: '95555',
+        shouldSaveAddress: true,
+        phone: '555-555-5555',
+        customFields: [],
+    };
+}
+
 export function getThreeDSecureMock(): BraintreeThreeDSecure {
     return {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions

packages/braintree-integration/src/mocks/braintree.mock.ts

@@ -100,7 +100,6 @@ export default class BraintreeIntegrationService {
         if (!this.client) {
             const clientToken = this.getClientTokenOrThrow();
             const clientCreator = await this.braintreeScriptLoader.loadClient();
-
             this.client = clientCreator.create({ authorization: clientToken });
         }
 

packages/braintree-utils/src/braintree-integration-service.ts

@@ -18,15 +18,18 @@ import {
     BraintreeFormOptions,
     BraintreeIntegrationService,
     BraintreePaypalCheckout,
-    BraintreePaypalSdkCreatorConfig, BraintreeRequestData,
+    BraintreePaypalSdkCreatorConfig,
+    BraintreeRequestData,
     BraintreeThreeDSecure,
-    BraintreeThreeDSecureOptions,
     BraintreeVenmoCheckout,
     BraintreeVenmoCreatorConfig,
     BraintreeVerifyPayload,
     TokenizationPayload,
 } from './index';
-import { BraintreePaymentInitializeOptions } from '../../braintree-integration/src/braintree-payment-options';
+import {
+    BraintreePaymentInitializeOptions,
+    BraintreeThreeDSecureOptions,
+} from '@bigcommerce/checkout-sdk/braintree-integration';
 import isCreditCardInstrumentLike from './is-credit-card-instrument-like';
 import { BraintreeHostedForm } from '@bigcommerce/checkout-sdk/braintree-integration';
 

packages/braintree-utils/src/braintree-payment-processor.ts

@@ -22,6 +22,7 @@ import {
 } from '../types';
 
 import { getVisaCheckoutTokenizedPayload } from './visacheckout.mock';
+import BillingAddress from '../../../core/src/billing/billing-address';
 
 export function getBraintree(): PaymentMethod {
     return {
@@ -409,3 +410,24 @@ export function getBraintreeAddress(): BraintreeShippingAddressOverride {
         recipientName: 'Test Tester',
     };
 }
+
+export function getBillingAddress(): BillingAddress {
+    return {
+        id: '55c96cda6f04c',
+        firstName: 'Test',
+        lastName: 'Tester',
+        email: '[email protected]',
+        company: 'Bigcommerce',
+        address1: '12345 Testing Way',
+        address2: '',
+        city: 'Some City',
+        stateOrProvince: 'California',
+        stateOrProvinceCode: 'CA',
+        country: 'United States',
+        countryCode: 'US',
+        postalCode: '95555',
+        shouldSaveAddress: true,
+        phone: '555-555-5555',
+        customFields: [],
+    };
+}