refactor: Stripe on submit to use sagas (#688)

REV-3089

Author: julianajlk

src/feedback/data/sagas.js

@@ -15,7 +15,13 @@ export function* handleErrors(e, clearExistingMessages) {
   if (e.errors !== undefined) {
     for (let i = 0; i < e.errors.length; i++) { // eslint-disable-line no-plusplus
       const error = e.errors[i];
-      yield put(addMessage(error.code, error.userMessage, error.data, error.messageType));
+      if (error.code === 'sku-error-message') {
+        yield put(addMessage(error.code, error.userMessage, {}, MESSAGE_TYPES.ERROR));
+      } else if (error.data === undefined && error.messageType === null) {
+        yield put(addMessage('transaction-declined-message', error.userMessage, {}, MESSAGE_TYPES.ERROR));
+      } else {
+        yield put(addMessage(error.code, error.userMessage, error.data, error.messageType));
+      }
     }
   }
   if (e.messages !== undefined) {

src/feedback/data/sagas.test.js

@@ -32,6 +32,54 @@ describe('saga tests', () => {
       expect(caughtErrors).toEqual([]);
     });
 
+    it('should add a transaction declined error message on errors with undefined data', async () => {
+      error.errors = [
+        {
+          data: undefined,
+          userMessage: 'error',
+          messageType: null,
+        },
+      ];
+      try {
+        await runSaga(
+          {
+            dispatch: action => dispatched.push(action),
+            onError: err => caughtErrors.push(err),
+          },
+          handleErrors,
+          error,
+        ).toPromise();
+      } catch (e) {} // eslint-disable-line no-empty
+
+      const lastAction = dispatched[dispatched.length - 1];
+      expect(lastAction.payload).toEqual(expect.objectContaining({ code: 'transaction-declined-message' }));
+      expect(caughtErrors).toEqual([]);
+    });
+
+    it('should add a sku error message on sku mismatch error from ecommerce', async () => {
+      error.errors = [
+        {
+          code: 'sku-error-message',
+          userMessage: 'error',
+          messageType: MESSAGE_TYPES.ERROR,
+        },
+      ];
+      try {
+        await runSaga(
+          {
+            dispatch: action => dispatched.push(action),
+            onError: err => caughtErrors.push(err),
+          },
+          handleErrors,
+          error,
+        ).toPromise();
+      } catch (e) {} // eslint-disable-line no-empty
+
+      const lastAction = dispatched[dispatched.length - 1];
+      expect(lastAction.payload).toEqual(expect.objectContaining({ code: 'sku-error-message' }));
+      expect(caughtErrors).toEqual([]);
+    });
+
     it('should dispatch addMessage actions on API errors', async () => {
       error.errors = [
         {

src/payment/checkout/Checkout.jsx

@@ -87,6 +87,10 @@ class Checkout extends React.Component {
     );
   };
 
+  handleSubmitStripe = (formData) => {
+    this.props.submitPayment({ method: 'stripe', ...formData });
+  };
+
   handleSubmitStripeButtonClick = () => {
     sendTrackEvent(
       'edx.bi.ecommerce.basket.payment_selected',
@@ -210,15 +214,8 @@ class Checkout extends React.Component {
 
     const basketClassName = 'basket-section';
 
-    // TODO: fix loading, enableStripePaymentProcessor and clientSecretId distinction
-    // 1. loading should be renamed to loadingBasket
-    // 2. enableStripePaymentProcessor can be temporarily false while loading is true
-    // since the flag is in the BFF basket endpoint. Possibly change this?
-    // 3. Right now when fetching capture context, CyberSource's captureKey is saved as clientSecretId
+    // TODO: Right now when fetching capture context, CyberSource's captureKey is saved as clientSecretId
     // so we cannot rely on !options.clientSecret to distinguish btw payment processors
-    // 4. There is a delay from when the basket is done loading (plus the flag value)
-    // and when we get the clientSecretId so there is a point in time when loading skeleton
-    // is hidden but the Stripe billing and credit card fields are not shown
     const shouldDisplayStripePaymentForm = !loading && enableStripePaymentProcessor && options.clientSecret;
     const shouldDisplayCyberSourcePaymentForm = !loading && !enableStripePaymentProcessor;
 
@@ -271,14 +268,11 @@ class Checkout extends React.Component {
           <Elements options={options} stripe={stripePromise}>
             <StripePaymentForm
               options={options}
+              onSubmitPayment={this.handleSubmitStripe}
               onSubmitButtonClick={this.handleSubmitStripeButtonClick}
-              disabled={submitting}
               isBulkOrder={isBulkOrder}
               isProcessing={stripeIsSubmitting}
-              loading={loading}
               isQuantityUpdating={isQuantityUpdating}
-              enableStripePaymentProcessor={enableStripePaymentProcessor}
-              products={this.props.products}
             />
           </Elements>
         ) : (loading && (this.renderBillingFormSkeleton()))}
@@ -321,11 +315,10 @@ Checkout.propTypes = {
   isFreeBasket: PropTypes.bool,
   submitting: PropTypes.bool,
   isBasketProcessing: PropTypes.bool,
-  paymentMethod: PropTypes.oneOf(['paypal', 'apple-pay', 'cybersource']),
+  paymentMethod: PropTypes.oneOf(['paypal', 'apple-pay', 'cybersource', 'stripe']),
   orderType: PropTypes.oneOf(Object.values(ORDER_TYPES)),
   enableStripePaymentProcessor: PropTypes.bool,
   clientSecretId: PropTypes.string,
-  products: PropTypes.array, // eslint-disable-line react/forbid-prop-types,
 };
 
 Checkout.defaultProps = {
@@ -338,7 +331,6 @@ Checkout.defaultProps = {
   orderType: ORDER_TYPES.SEAT,
   enableStripePaymentProcessor: false,
   clientSecretId: null,
-  products: [],
 };
 
 const mapStateToProps = (state) => ({

src/payment/checkout/payment-form/PaymentForm.jsx

@@ -129,7 +129,7 @@ export class PaymentFormComponent extends React.Component {
       isQuantityUpdating,
     } = this.props;
 
-    const showLoadingButton = loading || isQuantityUpdating || !window.microform;
+    const showLoadingButton = (loading || isQuantityUpdating || !window.microform) && !isProcessing;
 
     return (
       <ErrorFocusContext.Provider value={this.state.firstErrorId}>