feat(checkout): INT-775 Implement Masterpass button in customer section

Author: FranciscoOnt

src/customer/create-customer-strategy-registry.ts

@@ -9,6 +9,7 @@ import { PaymentMethodActionCreator, PaymentMethodRequestSender } from '../payme
 import { AmazonPayScriptLoader } from '../payment/strategies/amazon-pay';
 import { createBraintreeVisaCheckoutPaymentProcessor, VisaCheckoutScriptLoader } from '../payment/strategies/braintree';
 import { ChasePayScriptLoader } from '../payment/strategies/chasepay';
+import { MasterpassScriptLoader } from '../payment/strategies/masterpass';
 import { RemoteCheckoutActionCreator, RemoteCheckoutRequestSender } from '../remote-checkout';
 
 import CustomerActionCreator from './customer-action-creator';
@@ -20,6 +21,7 @@ import {
     ChasePayCustomerStrategy,
     CustomerStrategy,
     DefaultCustomerStrategy,
+    MasterpassCustomerStrategy,
 } from './strategies';
 import SquareCustomerStrategy from './strategies/square-customer-strategy';
 
@@ -35,14 +37,15 @@ export default function createCustomerStrategyRegistry(
     const paymentMethodActionCreator = new PaymentMethodActionCreator(new PaymentMethodRequestSender(requestSender));
     const remoteCheckoutRequestSender = new RemoteCheckoutRequestSender(requestSender);
     const remoteCheckoutActionCreator = new RemoteCheckoutActionCreator(remoteCheckoutRequestSender);
+    const scriptLoader = getScriptLoader();
 
     registry.register('amazon', () =>
         new AmazonPayCustomerStrategy(
             store,
             paymentMethodActionCreator,
             remoteCheckoutActionCreator,
             remoteCheckoutRequestSender,
-            new AmazonPayScriptLoader(getScriptLoader())
+            new AmazonPayScriptLoader(scriptLoader)
         )
     );
 
@@ -53,8 +56,8 @@ export default function createCustomerStrategyRegistry(
             paymentMethodActionCreator,
             new CustomerStrategyActionCreator(registry),
             remoteCheckoutActionCreator,
-            createBraintreeVisaCheckoutPaymentProcessor(getScriptLoader(), requestSender),
-            new VisaCheckoutScriptLoader(getScriptLoader())
+            createBraintreeVisaCheckoutPaymentProcessor(scriptLoader, requestSender),
+            new VisaCheckoutScriptLoader(scriptLoader)
         )
     );
 
@@ -63,7 +66,7 @@ export default function createCustomerStrategyRegistry(
             store,
             paymentMethodActionCreator,
             remoteCheckoutActionCreator,
-            new ChasePayScriptLoader(getScriptLoader()),
+            new ChasePayScriptLoader(scriptLoader),
             requestSender,
             createFormPoster()
         )
@@ -73,8 +76,17 @@ export default function createCustomerStrategyRegistry(
         new SquareCustomerStrategy(
             store,
             new RemoteCheckoutActionCreator(remoteCheckoutRequestSender)
-    )
-);
+        )
+    );
+
+    registry.register('masterpass', () =>
+        new MasterpassCustomerStrategy(
+            store,
+            paymentMethodActionCreator,
+            remoteCheckoutActionCreator,
+            new MasterpassScriptLoader(scriptLoader)
+        )
+    );
 
     registry.register('default', () =>
         new DefaultCustomerStrategy(

src/customer/customer-request-options.ts

@@ -1,6 +1,11 @@
 import { RequestOptions } from '../common/http-request';
 
-import { AmazonPayCustomerInitializeOptions, BraintreeVisaCheckoutCustomerInitializeOptions, ChasePayCustomerInitializeOptions } from './strategies';
+import {
+    AmazonPayCustomerInitializeOptions,
+    BraintreeVisaCheckoutCustomerInitializeOptions,
+    ChasePayCustomerInitializeOptions,
+    MasterpassCustomerInitializeOptions
+} from './strategies';
 
 /**
  * A set of options for configuring any requests related to the customer step of
@@ -41,4 +46,5 @@ export interface CustomerInitializeOptions extends CustomerRequestOptions {
      * They can be omitted unless you need to support Chasepay.
      */
     chasepay?: ChasePayCustomerInitializeOptions;
+    masterpass?: MasterpassCustomerInitializeOptions;
 }

src/customer/strategies/chasepay-customer-strategy.spec.ts

@@ -146,6 +146,34 @@ describe('ChasePayCustomerStrategy', () => {
             expect(JPMC.ChasePay.configure).toHaveBeenCalled();
         });
 
+        it('fails to initialize the strategy if no methodid is supplied', async () => {
+            chasePayOptions = { methodId: undefined, chasepay: { container: 'login' } };
+            try {
+                await strategy.initialize(chasePayOptions);
+            } catch (e) {
+                expect(e).toBeInstanceOf(InvalidArgumentError);
+            }
+        });
+
+        it('fails to initialize the strategy if no cart is supplied', async () => {
+            jest.spyOn(store.getState().cart, 'getCart')
+                .mockReturnValue(undefined);
+            try {
+                await strategy.initialize(chasePayOptions);
+            } catch (e) {
+                expect(e).toBeInstanceOf(MissingDataError);
+            }
+        });
+
+        it('fails to initialize the strategy if no digitalSessionID is supplied', async () => {
+            paymentMethodMock.initializationData.digitalSessionId = undefined;
+            try {
+                await strategy.initialize(chasePayOptions);
+            } catch (e) {
+                expect(e).toBeInstanceOf(NotInitializedError);
+            }
+        });
+
         it('registers the start and complete callbacks', async () => {
             JPMC.ChasePay.on = jest.fn((type, callback) => callback);
 

src/customer/strategies/index.ts

@@ -4,3 +4,5 @@ export { default as DefaultCustomerStrategy } from './default-customer-strategy'
 export { default as BraintreeVisaCheckoutCustomerStrategy, BraintreeVisaCheckoutCustomerInitializeOptions } from './braintree-visacheckout-customer-strategy';
 export { default as ChasePayCustomerStrategy, ChasePayCustomerInitializeOptions } from './chasepay-customer-strategy';
 export { default as SquareCustomerStrategy } from './square-customer-strategy';
+export { default as MasterpassCustomerInitializeOptions} from './masterpass-customer-initialize-options';
+export { default as MasterpassCustomerStrategy } from './masterpass-customer-strategy';

src/customer/strategies/masterpass-customer-initialize-options.ts

@@ -0,0 +1,6 @@
+export default interface MasterpassCustomerInitializeOptions {
+    /**
+     * The ID of a container which the checkout button should be inserted into.
+     */
+    container: string;
+}

src/customer/strategies/masterpass-customer-strategy.spec.ts

@@ -0,0 +1,215 @@
+import { createRequestSender, RequestSender } from '@bigcommerce/request-sender';
+import { createScriptLoader } from '@bigcommerce/script-loader';
+
+import { getCartState } from '../../cart/carts.mock';
+import { createCheckoutStore, CheckoutStore } from '../../checkout';
+import { getCheckoutState } from '../../checkout/checkouts.mock';
+import { InvalidArgumentError, MissingDataError } from '../../common/error/errors';
+import { getConfigState } from '../../config/configs.mock';
+import { PaymentMethod, PaymentMethodActionCreator, PaymentMethodRequestSender } from '../../payment';
+import { getMasterpass, getPaymentMethodsState } from '../../payment/payment-methods.mock';
+import { Masterpass, MasterpassScriptLoader } from '../../payment/strategies/masterpass';
+import { getMasterpassScriptMock } from '../../payment/strategies/masterpass/masterpass.mock';
+import { RemoteCheckoutActionCreator, RemoteCheckoutRequestSender } from '../../remote-checkout';
+import { CustomerInitializeOptions } from '../customer-request-options';
+import { getCustomerState } from '../customers.mock';
+
+import { CustomerStrategy, MasterpassCustomerStrategy } from './';
+
+describe('MasterpassCustomerStrategy', () => {
+    let container: HTMLDivElement;
+    let masterpass: Masterpass;
+    let masterpassScriptLoader: MasterpassScriptLoader;
+    let paymentMethodActionCreator: PaymentMethodActionCreator;
+    let paymentMethodMock: PaymentMethod;
+    let remoteCheckoutActionCreator: RemoteCheckoutActionCreator;
+    let requestSender: RequestSender;
+    let store: CheckoutStore;
+    let strategy: CustomerStrategy;
+
+    beforeEach(() => {
+        paymentMethodMock = {
+            ...getMasterpass(),
+            initializationData: {
+                checkoutId: 'checkoutId',
+                allowedCardTypes: ['visa', 'amex', 'mastercard'],
+            },
+        };
+
+        store = createCheckoutStore({
+            checkout: getCheckoutState(),
+            customer: getCustomerState(),
+            config: getConfigState(),
+            cart: getCartState(),
+            paymentMethods: getPaymentMethodsState(),
+        });
+
+        jest.spyOn(store, 'dispatch')
+            .mockReturnValue(Promise.resolve(store.getState()));
+
+        jest.spyOn(store.getState().paymentMethods, 'getPaymentMethod')
+            .mockReturnValue(paymentMethodMock);
+
+        requestSender = createRequestSender();
+
+        remoteCheckoutActionCreator = new RemoteCheckoutActionCreator(
+            new RemoteCheckoutRequestSender(requestSender)
+        );
+
+        masterpass = getMasterpassScriptMock();
+
+        masterpassScriptLoader = new MasterpassScriptLoader(createScriptLoader());
+
+        jest.spyOn(masterpassScriptLoader, 'load')
+            .mockReturnValue(Promise.resolve(masterpass));
+
+        paymentMethodActionCreator = new PaymentMethodActionCreator(
+            new PaymentMethodRequestSender(requestSender)
+        );
+        strategy = new MasterpassCustomerStrategy(
+            store,
+            paymentMethodActionCreator,
+            remoteCheckoutActionCreator,
+            masterpassScriptLoader
+        );
+
+        container = document.createElement('div');
+        container.setAttribute('id', 'login');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        document.body.removeChild(container);
+    });
+
+    it('creates an instance of MasterpassCustomerStrategy', () => {
+        expect(strategy).toBeInstanceOf(MasterpassCustomerStrategy);
+    });
+
+    describe('#initialize()', () => {
+        let masterpassOptions: CustomerInitializeOptions;
+
+        beforeEach(() => {
+            masterpassOptions = { methodId: 'masterpass', masterpass: { container: 'login' } };
+        });
+
+        it('loads masterpass script in test mode if enabled', async () => {
+            paymentMethodMock.config.testMode = true;
+
+            await strategy.initialize(masterpassOptions);
+
+            expect(masterpassScriptLoader.load).toHaveBeenLastCalledWith(true);
+        });
+
+        it('loads masterpass without test mode if disabled', async () => {
+            paymentMethodMock.config.testMode = false;
+
+            await strategy.initialize(masterpassOptions);
+
+            expect(masterpassScriptLoader.load).toHaveBeenLastCalledWith(false);
+        });
+
+        it('fails to initialize the strategy if no methodid is supplied', async () => {
+            masterpassOptions = { methodId: undefined, masterpass: { container: 'login' } };
+            try {
+                await strategy.initialize(masterpassOptions);
+            } catch (e) {
+                expect(e).toBeInstanceOf(InvalidArgumentError);
+            }
+        });
+
+        it('fails to initialize the strategy if no cart is supplied', async () => {
+            jest.spyOn(store.getState().cart, 'getCart')
+                .mockReturnValue(undefined);
+            try {
+                await strategy.initialize(masterpassOptions);
+            } catch (e) {
+                expect(e).toBeInstanceOf(MissingDataError);
+            }
+        });
+
+        it('fails to initialize the strategy if no checkoutId is supplied', async () => {
+            paymentMethodMock.initializationData.checkoutId = undefined;
+            try {
+                await strategy.initialize(masterpassOptions);
+            } catch (e) {
+                expect(e).toBeInstanceOf(MissingDataError);
+            }
+        });
+
+        it('proceeds to checkout if masterpass button is clicked', async () => {
+            jest.spyOn(masterpass, 'checkout');
+            await strategy.initialize(masterpassOptions);
+            if (masterpassOptions.masterpass) {
+                const masterpassButton = document.getElementById(masterpassOptions.masterpass.container);
+                if (masterpassButton) {
+                    const btn = masterpassButton.firstChild as HTMLElement;
+                    if (btn) {
+                        btn.click();
+                        expect(masterpass.checkout).toHaveBeenCalled();
+                    }
+                }
+            }
+        });
+    });
+
+    describe('#deinitialize()', () => {
+        let masterpassOptions: CustomerInitializeOptions;
+
+        beforeEach(() => {
+            masterpassOptions = { methodId: 'masterpass', masterpass: { container: 'login' } };
+        });
+
+        it('succesfully deinitializes the strategy', async () => {
+            jest.spyOn(masterpass, 'checkout');
+            await strategy.initialize(masterpassOptions);
+            strategy.deinitialize();
+            if (masterpassOptions.masterpass) {
+                const masterpassButton = document.getElementById(masterpassOptions.masterpass.container);
+                if (masterpassButton) {
+                    expect(masterpassButton.firstChild).toBe(null);
+                }
+            }
+            // Prevent "After Each" failure
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        });
+    });
+
+    describe('#signIn()', () => {
+        beforeEach(async () => {
+            await strategy.initialize({ methodId: 'masterpass', masterpass: { container: 'login' } });
+        });
+
+        it('throws error if trying to sign in programmatically', async () => {
+            expect(() => strategy.signIn({ email: 'foo@bar.com', password: 'foobar' })).toThrowError();
+        });
+    });
+
+    describe('#signOut()', () => {
+        beforeEach(async () => {
+            const paymentId = {
+                providerId: 'masterpass',
+            };
+
+            jest.spyOn(store.getState().payment, 'getPaymentId')
+                .mockReturnValue(paymentId);
+
+            jest.spyOn(remoteCheckoutActionCreator, 'signOut')
+                .mockReturnValue('data');
+
+            await strategy.initialize({ methodId: 'masterpass', masterpass: { container: 'login' } });
+        });
+
+        it('throws error if trying to sign out programmatically', async () => {
+            const options = {
+                methodId: 'masterpass',
+            };
+
+            await strategy.signOut(options);
+
+            expect(remoteCheckoutActionCreator.signOut).toHaveBeenCalledWith('masterpass', options);
+            expect(store.dispatch).toHaveBeenCalled();
+        });
+    });
+});