fix(payment): CHECKOUT-2926 Send Square payment data

Author: Luis Sanchez

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

@@ -154,6 +154,7 @@ export default function createPaymentStrategyRegistry(
         new SquarePaymentStrategy(
             store,
             orderActionCreator,
+            paymentActionCreator,
             new SquareScriptLoader(scriptLoader)
         )
     );

src/payment/strategies/square/square-payment-strategy.spec.ts

@@ -1,28 +1,33 @@
 /// <reference path="./square-form.d.ts" />
-
 import { createClient as createPaymentClient } from '@bigcommerce/bigpay-client';
 import { createAction, Action } from '@bigcommerce/data-store';
 import { createScriptLoader } from '@bigcommerce/script-loader';
 import { Observable } from 'rxjs';
 
+import { PaymentActionCreator, PaymentRequestSender } from '../..';
 import { createCheckoutClient, createCheckoutStore, CheckoutClient, CheckoutStore } from '../../../checkout';
+import { MissingDataError, TimeoutError } from '../../../common/error/errors';
 import { OrderActionCreator } from '../../../order';
 import { SUBMIT_ORDER_REQUESTED } from '../../../order/order-action-types';
 import { getSquare } from '../../../payment/payment-methods.mock';
+import { SUBMIT_PAYMENT_REQUESTED } from '../../payment-action-types';
 import PaymentMethod from '../../payment-method';
 
 import SquarePaymentStrategy from './square-payment-strategy';
 import SquareScriptLoader from './square-script-loader';
 
+
 describe('SquarePaymentStrategy', () => {
     let client: CheckoutClient;
     let scriptLoader: SquareScriptLoader;
     let store: CheckoutStore;
     let strategy: SquarePaymentStrategy;
     let orderActionCreator: OrderActionCreator;
+    let paymentActionCreator: PaymentActionCreator;
     let paymentMethod: PaymentMethod;
     let callbacks: Square.FormCallbacks;
     let submitOrderAction: Observable<Action>;
+    let submitPaymentAction: Observable<Action>;
 
     const formFactory = options => {
         callbacks = options.callbacks;
@@ -39,13 +44,21 @@ describe('SquarePaymentStrategy', () => {
         store = createCheckoutStore();
         paymentMethod = getSquare();
         orderActionCreator = new OrderActionCreator(createCheckoutClient());
+        paymentActionCreator = new PaymentActionCreator(
+            new PaymentRequestSender(createPaymentClient()),
+            orderActionCreator
+        );
         scriptLoader = new SquareScriptLoader(createScriptLoader());
-        strategy = new SquarePaymentStrategy(store, orderActionCreator, scriptLoader);
-        submitOrderAction = Observable.of(createAction(SUBMIT_ORDER_REQUESTED);
+        strategy = new SquarePaymentStrategy(store, orderActionCreator, paymentActionCreator, scriptLoader);
+        submitOrderAction = Observable.of(createAction(SUBMIT_ORDER_REQUESTED));
+        submitPaymentAction = Observable.of(createAction(SUBMIT_PAYMENT_REQUESTED));
 
         jest.spyOn(orderActionCreator, 'submitOrder')
             .mockReturnValue(submitOrderAction);
 
+        jest.spyOn(paymentActionCreator, 'submitPayment')
+            .mockReturnValue(submitPaymentAction);
+
         jest.spyOn(store, 'dispatch');
         jest.spyOn(store, 'getState')
             .mockReturnValue({
@@ -119,9 +132,15 @@ describe('SquarePaymentStrategy', () => {
     });
 
     describe('#execute()', () => {
+        const payload = {
+            payment: {
+                name: 'foo',
+            },
+        };
+
         describe('when form has not been initialized', () => {
             it('rejects the promise', () => {
-                strategy.execute()
+                strategy.execute(payload)
                     .catch(e => expect(e.type).toEqual('not_initialized'));
 
                 expect(squareForm.requestCardNonce).toHaveBeenCalledTimes(0);
@@ -140,47 +159,64 @@ describe('SquarePaymentStrategy', () => {
                 await strategy.initialize(initOptions);
             });
 
+            it('fails if payment name is not passed', () => {
+                try {
+                    strategy.execute({});
+                } catch (error) {
+                    expect(error).toBeInstanceOf(MissingDataError);
+                    expect(squareForm.requestCardNonce).toHaveBeenCalledTimes(0);
+                }
+            });
+
             it('requests the nonce', () => {
-                strategy.execute({});
+                strategy.execute(payload);
                 expect(squareForm.requestCardNonce).toHaveBeenCalledTimes(1);
             });
 
-            it('cancels the first request', async () => {
-                strategy.execute({})
-                    .catch(e => expect(e.type).toEqual('timeout'));
+            it('cancels the first request when a newer is made', async () => {
+                strategy.execute(payload).catch(e => expect(e).toBeInstanceOf(TimeoutError));
 
                 setTimeout(() => {
                     callbacks.cardNonceResponseReceived(null, 'nonce');
                 }, 0);
 
-                await strategy.execute({});
+                await strategy.execute(payload);
             });
 
             describe('when the nonce is received', () => {
                 let promise;
 
                 beforeEach(() => {
-                    promise = strategy.execute({ payment: '', x: 'y' }, { b: 'f' });
+                    promise = strategy.execute({ payment: { name: 'square' }, useStoreCredit: true, x: 'y' }, { b: 'f' });
                     callbacks.cardNonceResponseReceived(null, 'nonce');
                 });
 
                 it('places the order with the right arguments', () => {
-                    expect(orderActionCreator.submitOrder).toHaveBeenCalledWith({ x: 'y' }, true, { b: 'f' });
+                    expect(orderActionCreator.submitOrder).toHaveBeenCalledWith({ x: 'y', useStoreCredit: true }, true, { b: 'f' });
                     expect(store.dispatch).toHaveBeenCalledWith(submitOrderAction);
                 });
 
-                it('resolves to what is returned by submitOrder', async () => {
+                it('resolves to what is returned by submitPayment', async () => {
                     const value = await promise;
 
                     expect(value).toEqual(store.getState());
                 });
+
+                it('submits the payment  with the right arguments', () => {
+                    expect(paymentActionCreator.submitPayment).toHaveBeenCalledWith({
+                        name: 'square',
+                        paymentData: {
+                            nonce: 'nonce',
+                        },
+                    });
+                });
             });
 
             describe('when a failure happens receiving the nonce', () => {
                 let promise;
 
                 beforeEach(() => {
-                    promise = strategy.execute({});
+                    promise = strategy.execute(payload);
                     callbacks.cardNonceResponseReceived({}, 'nonce');
                 });
 
@@ -189,6 +225,10 @@ describe('SquarePaymentStrategy', () => {
                     expect(store.dispatch).not.toHaveBeenCalledWith(submitOrderAction);
                 });
 
+                it('does not submit payment', () => {
+                    expect(paymentActionCreator.submitPayment).toHaveBeenCalledTimes(0);
+                });
+
                 it('rejects the promise', async () => {
                     await promise.catch(error => expect(error).toBeTruthy());
                 });

src/payment/strategies/square/square-payment-strategy.ts

@@ -1,9 +1,16 @@
 /// <reference path="./square-form.d.ts" />
-import { omit } from 'lodash';
-
 import { CheckoutSelectors, CheckoutStore } from '../../../checkout';
-import { InvalidArgumentError, NotInitializedError, StandardError, TimeoutError, UnsupportedBrowserError } from '../../../common/error/errors';
+import {
+    InvalidArgumentError,
+    MissingDataError,
+    NotInitializedError,
+    StandardError,
+    TimeoutError,
+    UnsupportedBrowserError,
+} from '../../../common/error/errors';
 import { OrderActionCreator, OrderRequestBody } from '../../../order';
+import { TokenizedCreditCard } from '../../payment';
+import PaymentActionCreator from '../../payment-action-creator';
 import PaymentMethod from '../../payment-method';
 import PaymentStrategy from '../payment-strategy';
 
@@ -16,6 +23,7 @@ export default class SquarePaymentStrategy extends PaymentStrategy {
     constructor(
         store: CheckoutStore,
         private _orderActionCreator: OrderActionCreator,
+        private _paymentActionCreator: PaymentActionCreator,
         private _scriptLoader: SquareScriptLoader
     ) {
         super(store);
@@ -35,7 +43,15 @@ export default class SquarePaymentStrategy extends PaymentStrategy {
     }
 
     execute(payload: OrderRequestBody, options?: any): Promise<CheckoutSelectors> {
-        return new Promise((resolve, reject) => {
+        const { payment, ...order } = payload;
+
+        if (!payment || !payment.name) {
+            throw new MissingDataError('Unable to submit payment because "payload.payment.name" argument is not provided.');
+        }
+
+        const paymentName = payment.name;
+
+        return new Promise<TokenizedCreditCard>((resolve, reject) => {
             if (!this._paymentForm) {
                 throw new NotInitializedError('Unable to submit payment because the choosen payment method has not been initialized.');
             }
@@ -45,12 +61,19 @@ export default class SquarePaymentStrategy extends PaymentStrategy {
             }
 
             this._deferredRequestNonce = { resolve, reject };
-
             this._paymentForm.requestCardNonce();
         })
-        .then(paymentData => this._store.dispatch(
-            this._orderActionCreator.submitOrder(omit(payload, 'payment'), true, options)
-        ));
+        .then(paymentData => {
+            const paymentPayload = {
+                name: paymentName,
+                paymentData,
+            };
+
+            return this._store.dispatch(this._orderActionCreator.submitOrder(order, true, options))
+                .then(() =>
+                    this._store.dispatch(this._paymentActionCreator.submitPayment(paymentPayload))
+                );
+        });
     }
 
     private _getFormOptions(options: InitializeOptions, deferred: DeferredPromise): Square.FormOptions {
@@ -102,7 +125,7 @@ export default class SquarePaymentStrategy extends PaymentStrategy {
 }
 
 export interface DeferredPromise {
-    resolve(resolution?: any): void;
+    resolve(resolution?: TokenizedCreditCard): void;
     reject(reason?: any): void;
 }