Update TransactionPage container: use SCA process

(Redirect tx with payment-pending to checkout page and
clear card paymenterrors from store.)

src/containers/TransactionPage/TransactionPage.js

@@ -9,9 +9,12 @@ import { createResourceLocatorString, findRouteByRouteName } from '../../util/ro
 import routeConfiguration from '../../routeConfiguration';
 import { propTypes } from '../../util/types';
 import { ensureListing, ensureTransaction } from '../../util/data';
+import { dateFromAPIToLocalNoon } from '../../util/dates';
 import { createSlug } from '../../util/urlHelpers';
+import { txIsPaymentPending } from '../../util/transaction';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { isScrollingDisabled, manageDisableScrolling } from '../../ducks/UI.duck';
+import { initializeCardPaymentData } from '../../ducks/stripe.duck.js';
 import {
   NamedRedirect,
   TransactionPanel,
@@ -72,29 +75,23 @@ export const TransactionPageComponent = props => {
     timeSlots,
     fetchTimeSlotsError,
     callSetInitialValues,
+    onInitializeCardPaymentData,
   } = props;
 
   const currentTransaction = ensureTransaction(transaction);
   const currentListing = ensureListing(currentTransaction.listing);
+  const isProviderRole = transactionRole === PROVIDER;
+  const isCustomerRole = transactionRole === CUSTOMER;
 
-  const handleSubmitBookingRequest = values => {
+  const redirectToCheckoutPageWithInitialValues = (initialValues, listing) => {
-    const { bookingDates, ...bookingData } = values;
-
-    const initialValues = {
-      listing: currentListing,
-      enquiredTransaction: currentTransaction,
-      bookingData,
-      bookingDates: {
-        bookingStart: bookingDates.startDate,
-        bookingEnd: bookingDates.endDate,
-      },
-    };
-
     const routes = routeConfiguration();
     // Customize checkout page state with current listing and selected bookingDates
     const { setInitialValues } = findRouteByRouteName('CheckoutPage', routes);
     callSetInitialValues(setInitialValues, initialValues);
 
+    // Clear previous Stripe errors from store if there is any
+    onInitializeCardPaymentData();
+
     // Redirect to CheckoutPage
     history.push(
       createResourceLocatorString(
@@ -106,6 +103,46 @@ export const TransactionPageComponent = props => {
     );
   };
 
+  // If payment is pending, redirect to CheckoutPage
+  if (txIsPaymentPending(currentTransaction) && isCustomerRole) {
+    const currentBooking = ensureListing(currentTransaction.booking);
+
+    const initialValues = {
+      listing: currentListing,
+      // Transaction with payment pending should be passed to CheckoutPage
+      transaction: currentTransaction,
+      // Original bookingData content is not available,
+      // but it is already used since booking is created.
+      // (E.g. quantity is used when booking is created.)
+      bookingData: {},
+      bookingDates: {
+        bookingStart: dateFromAPIToLocalNoon(currentBooking.attributes.start),
+        bookingEnd: dateFromAPIToLocalNoon(currentBooking.attributes.end),
+      },
+    };
+
+    redirectToCheckoutPageWithInitialValues(initialValues, currentListing);
+  }
+
+  // Customer can create a booking, if the tx is in "enquiry" state.
+  const handleSubmitBookingRequest = values => {
+    const { bookingDates, ...bookingData } = values;
+
+    const initialValues = {
+      listing: currentListing,
+      // enquired transaction should be passed to CheckoutPage
+      transaction: currentTransaction,
+      bookingData,
+      bookingDates: {
+        bookingStart: bookingDates.startDate,
+        bookingEnd: bookingDates.endDate,
+      },
+      confirmPaymentError: null,
+    };
+
+    redirectToCheckoutPageWithInitialValues(initialValues, currentListing);
+  };
+
   const deletedListingTitle = intl.formatMessage({
     id: 'TransactionPage.deletedListing',
   });
@@ -123,8 +160,6 @@ export const TransactionPageComponent = props => {
     currentTransaction.provider &&
     !fetchTransactionError;
 
-  const isProviderRole = transactionRole === PROVIDER;
-  const isCustomerRole = transactionRole === CUSTOMER;
   const isOwnSale =
     isDataAvailable &&
     isProviderRole &&
@@ -265,6 +300,7 @@ TransactionPageComponent.propTypes = {
   timeSlots: arrayOf(propTypes.timeSlot),
   fetchTimeSlotsError: propTypes.error,
   callSetInitialValues: func.isRequired,
+  onInitializeCardPaymentData: func.isRequired,
 
   // from withRouter
   history: shape({
@@ -339,6 +375,7 @@ const mapDispatchToProps = dispatch => {
     onSendReview: (role, tx, reviewRating, reviewContent) =>
       dispatch(sendReview(role, tx, reviewRating, reviewContent)),
     callSetInitialValues: (setInitialValues, values) => dispatch(setInitialValues(values)),
+    onInitializeCardPaymentData: () => dispatch(initializeCardPaymentData()),
   };
 };
 

src/containers/TransactionPage/TransactionPage.test.js

@@ -8,7 +8,7 @@ import {
   fakeIntl,
 } from '../../util/test-data';
 import { renderShallow } from '../../util/test-helpers';
-import { TRANSITION_REQUEST } from '../../util/transaction';
+import { TRANSITION_CONFIRM_PAYMENT } from '../../util/transaction';
 import { TransactionPageComponent } from './TransactionPage';
 
 const noop = () => null;
@@ -20,7 +20,7 @@ describe('TransactionPage - Sale', () => {
     const end = new Date(Date.UTC(2017, 5, 13));
     const transaction = createTransaction({
       id: txId,
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_CONFIRM_PAYMENT,
       booking: createBooking('booking1', {
         start,
         end,
@@ -49,6 +49,7 @@ describe('TransactionPage - Sale', () => {
       oldestMessagePageFetched: 0,
       messages: [],
       sendMessageInProgress: false,
+      onInitializeCardPaymentData: noop,
       onShowMoreMessages: noop,
       onSendMessage: noop,
       onResetForm: noop,
@@ -77,7 +78,7 @@ describe('TransactionPage - Order', () => {
 
     const transaction = createTransaction({
       id: txId,
-      lastTransition: TRANSITION_REQUEST,
+      lastTransition: TRANSITION_CONFIRM_PAYMENT,
       booking: createBooking('booking1', {
         start,
         end,
@@ -103,6 +104,7 @@ describe('TransactionPage - Order', () => {
       scrollingDisabled: false,
       callSetInitialValues: noop,
       transaction,
+      onInitializeCardPaymentData: noop,
       onShowMoreMessages: noop,
       onSendMessage: noop,
       onResetForm: noop,

src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap

@@ -66,7 +66,7 @@ exports[`TransactionPage - Order matches snapshot 1`] = `
             Object {
               "attributes": Object {
                 "createdAt": 2017-05-01T00:00:00.000Z,
-                "lastTransition": "transition/request",
+                "lastTransition": "transition/confirm-payment",
                 "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
                 "lineItems": Array [
                   Object {
@@ -120,7 +120,12 @@ exports[`TransactionPage - Order matches snapshot 1`] = `
                   Object {
                     "by": "customer",
                     "createdAt": 2017-05-01T00:00:00.000Z,
-                    "transition": "transition/request",
+                    "transition": "transition/request-payment",
+                  },
+                  Object {
+                    "by": "customer",
+                    "createdAt": 2017-05-01T00:00:01.000Z,
+                    "transition": "transition/confirm-payment",
                   },
                   Object {
                     "by": "provider",
@@ -283,7 +288,7 @@ exports[`TransactionPage - Sale matches snapshot 1`] = `
             Object {
               "attributes": Object {
                 "createdAt": 2017-05-01T00:00:00.000Z,
-                "lastTransition": "transition/request",
+                "lastTransition": "transition/confirm-payment",
                 "lastTransitionedAt": 2017-06-01T00:00:00.000Z,
                 "lineItems": Array [
                   Object {
@@ -337,7 +342,12 @@ exports[`TransactionPage - Sale matches snapshot 1`] = `
                   Object {
                     "by": "customer",
                     "createdAt": 2017-05-01T00:00:00.000Z,
-                    "transition": "transition/request",
+                    "transition": "transition/request-payment",
+                  },
+                  Object {
+                    "by": "customer",
+                    "createdAt": 2017-05-01T00:00:01.000Z,
+                    "transition": "transition/confirm-payment",
                   },
                   Object {
                     "by": "provider",