diff --git a/src/containers/TransactionPage/TransactionPage.js b/src/containers/TransactionPage/TransactionPage.js index da66cce8..15df684c 100644 --- a/src/containers/TransactionPage/TransactionPage.js +++ b/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 { bookingDates, ...bookingData } = values; - - const initialValues = { - listing: currentListing, - enquiredTransaction: currentTransaction, - bookingData, - bookingDates: { - bookingStart: bookingDates.startDate, - bookingEnd: bookingDates.endDate, - }, - }; - + const redirectToCheckoutPageWithInitialValues = (initialValues, listing) => { 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()), }; }; diff --git a/src/containers/TransactionPage/TransactionPage.test.js b/src/containers/TransactionPage/TransactionPage.test.js index 550f5ab6..358e48d9 100644 --- a/src/containers/TransactionPage/TransactionPage.test.js +++ b/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, diff --git a/src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap b/src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap index 318752a2..4183e204 100644 --- a/src/containers/TransactionPage/__snapshots__/TransactionPage.test.js.snap +++ b/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",