feat(checkout-button): CHECKOUT-3011 Add CheckoutButtonInitializer for initializing third party checkout buttons (#374)

Currently, only Braintree PayPal checkout button is supported. You can call `createCheckoutButtonInitializer` to create an instance of `CheckoutButtonInitializer`.

Author: davidchin

commit-validation.json

@@ -3,6 +3,7 @@
         "billing",
         "cart",
         "checkout",
+        "checkout-button",
         "common",
         "forms",
         "order",

package-lock.json

@@ -47,7 +47,7 @@
     "@bigcommerce/bigpay-client": "^3.2.2",
     "@bigcommerce/data-store": "^0.2.2",
     "@bigcommerce/form-poster": "^1.2.3",
-    "@bigcommerce/request-sender": "^0.1.8",
+    "@bigcommerce/request-sender": "^0.2.0",
     "@bigcommerce/script-loader": "^0.1.6",
     "@types/lodash": "^4.14.92",
     "lodash": "^4.17.4",

package.json

@@ -1,6 +1,8 @@
 export { default as Address, AddressRequestBody } from './address';
-export { default as isAddressEqual } from './is-address-equal';
 export { default as InternalAddress } from './internal-address';
+export { default as LegacyAddress } from './legacy-address';
+
+export { default as isAddressEqual } from './is-address-equal';
 export { default as isInternalAddressEqual } from './is-internal-address-equal';
 
 export { default as mapFromInternalAddress } from './map-from-internal-address';

src/address/index.ts

@@ -0,0 +1,12 @@
+export default interface LegacyAddress {
+    email: string;
+    first_name: string;
+    last_name: string;
+    phone_number: string;
+    address_line_1: string;
+    address_line_2: string;
+    city: string;
+    state: string;
+    country_code: string;
+    postal_code: string;
+}

src/address/legacy-address.ts

@@ -0,0 +1,3 @@
+export { createTimeout } from '@bigcommerce/request-sender';
+
+export { createCheckoutButtonInitializer } from './checkout-buttons';

src/checkout-button.ts

@@ -0,0 +1,54 @@
+import { Action } from '@bigcommerce/data-store';
+
+import { LoadPaymentMethodAction } from '../payment';
+
+export enum CheckoutButtonActionType {
+    InitializeButtonFailed = 'INITIALIZE_BUTTON_FAILED',
+    InitializeButtonRequested = 'INITIALIZE_BUTTON_REQUESTED',
+    InitializeButtonSucceeded = 'INITIALIZE_BUTTON_SUCCEEDED',
+
+    DeinitializeButtonFailed = 'DEINITIALIZE_BUTTON_FAILED',
+    DeinitializeButtonRequested = 'DEINITIALIZE_BUTTON_REQUESTED',
+    DeinitializeButtonSucceeded = 'DEINITIALIZE_BUTTON_SUCCEEDED',
+}
+
+export type CheckoutButtonAction = InitializeButtonAction | DeinitializeButtonAction;
+
+export type InitializeButtonAction =
+    InitializeButtonRequestedAction |
+    InitializeButtonSucceededAction |
+    InitializeButtonFailedAction |
+    LoadPaymentMethodAction;
+
+export type DeinitializeButtonAction =
+    DeinitializeButtonRequestedAction |
+    DeinitializeButtonSucceededAction |
+    DeinitializeButtonFailedAction;
+
+export interface CheckoutButtonActionMeta {
+    methodId: string;
+}
+
+export interface InitializeButtonRequestedAction extends Action<undefined, CheckoutButtonActionMeta> {
+    type: CheckoutButtonActionType.InitializeButtonRequested;
+}
+
+export interface InitializeButtonSucceededAction extends Action<undefined, CheckoutButtonActionMeta> {
+    type: CheckoutButtonActionType.InitializeButtonSucceeded;
+}
+
+export interface InitializeButtonFailedAction extends Action<Error, CheckoutButtonActionMeta> {
+    type: CheckoutButtonActionType.InitializeButtonFailed;
+}
+
+export interface DeinitializeButtonRequestedAction extends Action<undefined, CheckoutButtonActionMeta> {
+    type: CheckoutButtonActionType.DeinitializeButtonRequested;
+}
+
+export interface DeinitializeButtonSucceededAction extends Action<undefined, CheckoutButtonActionMeta> {
+    type: CheckoutButtonActionType.DeinitializeButtonSucceeded;
+}
+
+export interface DeinitializeButtonFailedAction extends Action<Error, CheckoutButtonActionMeta> {
+    type: CheckoutButtonActionType.DeinitializeButtonFailed;
+}

src/checkout-buttons/checkout-button-actions.ts

@@ -0,0 +1,24 @@
+import { InternalCheckoutSelectors } from '../checkout';
+import { selector } from '../common/selector';
+
+import CheckoutButtonSelector from './checkout-button-selector';
+
+@selector
+export default class CheckoutButtonErrorSelector {
+    private _checkoutButton: CheckoutButtonSelector;
+
+    /**
+     * @internal
+     */
+    constructor(selectors: InternalCheckoutSelectors) {
+        this._checkoutButton = selectors.checkoutButton;
+    }
+
+    getInitializeButtonError(methodId?: string): Error | undefined {
+        return this._checkoutButton.getInitializeError(methodId);
+    }
+
+    getDeinitializeButtonError(methodId?: string): Error | undefined {
+        return this._checkoutButton.getDeinitializeError(methodId);
+    }
+}

src/checkout-buttons/checkout-button-error-selector.ts

@@ -0,0 +1,3 @@
+export default interface CheckoutButtonInitializerOptions {
+    host?: string;
+}

src/checkout-buttons/checkout-button-initializer-options.ts

@@ -0,0 +1,78 @@
+import { createAction } from '@bigcommerce/data-store';
+import { createRequestSender } from '@bigcommerce/request-sender';
+import { Observable } from 'rxjs';
+
+import { createCheckoutStore, CheckoutStore } from '../checkout';
+import { PaymentMethodActionCreator, PaymentMethodRequestSender } from '../payment';
+
+import { CheckoutButtonActionType } from './checkout-button-actions';
+import CheckoutButtonErrorSelector from './checkout-button-error-selector';
+import CheckoutButtonInitializer from './checkout-button-initializer';
+import CheckoutButtonStatusSelector from './checkout-button-status-selector';
+import CheckoutButtonStrategyActionCreator from './checkout-button-strategy-action-creator';
+import createCheckoutButtonRegistry from './create-checkout-button-registry';
+
+describe('CheckoutButtonInitializer', () => {
+    let initializer: CheckoutButtonInitializer;
+    let buttonActionCreator: CheckoutButtonStrategyActionCreator;
+    let store: CheckoutStore;
+
+    beforeEach(() => {
+        store = createCheckoutStore();
+        buttonActionCreator = new CheckoutButtonStrategyActionCreator(
+            createCheckoutButtonRegistry(store),
+            new PaymentMethodActionCreator(new PaymentMethodRequestSender(createRequestSender()))
+        );
+
+        jest.spyOn(store, 'dispatch');
+        jest.spyOn(store, 'subscribe');
+
+        jest.spyOn(buttonActionCreator, 'initialize')
+            .mockReturnValue(Observable.of(createAction(CheckoutButtonActionType.InitializeButtonRequested)));
+
+        jest.spyOn(buttonActionCreator, 'deinitialize')
+            .mockReturnValue(Observable.of(createAction(CheckoutButtonActionType.DeinitializeButtonRequested)));
+
+        initializer = new CheckoutButtonInitializer(store, buttonActionCreator);
+    });
+
+    it('dispatches action to initialize button strategy', async () => {
+        const options = { methodId: 'foobar' };
+
+        await initializer.initializeButton(options);
+
+        expect(buttonActionCreator.initialize).toHaveBeenCalledWith(options);
+        expect(store.dispatch).toHaveBeenCalledWith(
+            Observable.of(createAction(CheckoutButtonActionType.InitializeButtonRequested)),
+            { queueId: `foobarButtonStrategy` }
+        );
+    });
+
+    it('dispatches action to deinitialize button strategy', async () => {
+        const options = { methodId: 'foobar' };
+
+        await initializer.deinitializeButton(options);
+
+        expect(buttonActionCreator.deinitialize).toHaveBeenCalledWith(options);
+        expect(store.dispatch).toHaveBeenCalledWith(
+            Observable.of(createAction(CheckoutButtonActionType.DeinitializeButtonRequested)),
+            { queueId: `foobarButtonStrategy` }
+        );
+    });
+
+    it('registers subscribers with data store', () => {
+        const subscriber = jest.fn();
+
+        initializer.subscribe(subscriber);
+        store.notifyState();
+
+        expect(subscriber).toHaveBeenCalledWith(initializer.getState());
+    });
+
+    it('returns selector object for querying current state', async () => {
+        expect(initializer.getState()).toEqual({
+            errors: expect.any(CheckoutButtonErrorSelector),
+            statuses: expect.any(CheckoutButtonStatusSelector),
+        });
+    });
+});