Enable passing booking data (like quantity, color) in addition to BookingDates

src/containers/CheckoutPage/CheckoutPage.duck.js

@@ -21,6 +21,7 @@ export const SPECULATE_TRANSACTION_ERROR = 'app/ListingPage/SPECULATE_TRANSACTIO
 
 const initialState = {
   listing: null,
+  bookingData: null,
   bookingDates: null,
   speculateTransactionInProgress: false,
   speculateTransactionError: null,

src/containers/CheckoutPage/CheckoutPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import { bool, func, instanceOf, object, shape, string } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
@@ -70,18 +70,21 @@ export class CheckoutPageComponent extends Component {
    * based on this initial data.
    */
   loadInitialData() {
-    const { bookingDates, listing } = this.props;
-    const hasDataInProps = !!(bookingDates && listing);
-    const pageData = hasDataInProps ? { bookingDates, listing } : storedData(STORAGE_KEY);
+    const { bookingData, bookingDates, listing, fetchSpeculatedTransaction } = this.props;
+    const hasDataInProps = !!(bookingData && bookingDates && listing);
+    const pageData = hasDataInProps
+      ? { bookingData, bookingDates, listing }
+      : storedData(STORAGE_KEY);
 
     if (hasDataInProps) {
-      storeData(bookingDates, listing, STORAGE_KEY);
+      storeData(bookingData, bookingDates, listing, STORAGE_KEY);
     }
 
     const hasData =
       pageData &&
       pageData.listing &&
       pageData.listing.id &&
+      pageData.bookingData &&
       pageData.bookingDates &&
       pageData.bookingDates.bookingStart &&
       pageData.bookingDates.bookingEnd;
@@ -387,17 +390,17 @@ export class CheckoutPageComponent extends Component {
 CheckoutPageComponent.defaultProps = {
   initiateOrderError: null,
   listing: null,
+  bookingData: {},
   bookingDates: null,
   speculateTransactionError: null,
   speculatedTransaction: null,
   currentUser: null,
 };
 
-const { func, instanceOf, shape, string, bool } = PropTypes;
-
 CheckoutPageComponent.propTypes = {
   scrollingDisabled: bool.isRequired,
   listing: propTypes.listing,
+  bookingData: object,
   bookingDates: shape({
     bookingStart: instanceOf(Date).isRequired,
     bookingEnd: instanceOf(Date).isRequired,
@@ -429,6 +432,7 @@ CheckoutPageComponent.propTypes = {
 const mapStateToProps = state => {
   const {
     listing,
+    bookingData,
     bookingDates,
     speculateTransactionInProgress,
     speculateTransactionError,
@@ -439,6 +443,7 @@ const mapStateToProps = state => {
   return {
     scrollingDisabled: isScrollingDisabled(state),
     currentUser,
+    bookingData,
     bookingDates,
     speculateTransactionInProgress,
     speculateTransactionError,

src/containers/CheckoutPage/CheckoutPage.test.js

@@ -54,6 +54,7 @@ describe('CheckoutPage', () => {
       const initialValues = {
         initiateOrderError: null,
         listing: null,
+        bookingData: null,
         bookingDates: null,
         speculateTransactionError: null,
         speculateTransactionInProgress: false,

src/containers/CheckoutPage/CheckoutPageSessionHelpers.js

@@ -47,12 +47,13 @@ export const isValidListing = listing => {
 };
 
 // Stores given bookingDates and listing to sessionStorage
-export const storeData = (bookingDates, listing, storageKey) => {
-  if (window && window.sessionStorage && listing && bookingDates) {
+export const storeData = (bookingData, bookingDates, listing, storageKey) => {
+  if (window && window.sessionStorage && listing && bookingDates && bookingData) {
     // TODO: How should we deal with Dates when data is serialized?
     // Hard coded serializable date objects atm.
     /* eslint-disable no-underscore-dangle */
     const data = {
+      bookingData,
       bookingDates: {
         bookingStart: { date: bookingDates.bookingStart, _serializedType: 'SerializableDate' },
         bookingEnd: { date: bookingDates.bookingEnd, _serializedType: 'SerializableDate' },
@@ -82,7 +83,7 @@ export const storedData = storageKey => {
       return sdkTypes.reviver(k, v);
     };
 
-    const { bookingDates, listing, storedAt } = checkoutPageData
+    const { bookingData, bookingDates, listing, storedAt } = checkoutPageData
       ? JSON.parse(checkoutPageData, reviver)
       : {};
 
@@ -92,7 +93,7 @@ export const storedData = storageKey => {
       : false;
 
     if (isFreshlySaved && isValidBookingDates(bookingDates) && isValidListing(listing)) {
-      return { bookingDates, listing };
+      return { bookingData, bookingDates, listing };
     }
   }
   return {};

src/containers/ListingPage/ListingPage.js

@@ -172,10 +172,11 @@ export class ListingPageComponent extends Component {
     const listingId = new UUID(params.id);
     const listing = getListing(listingId);
 
-    const { bookingDates } = values;
+    const { bookingDates, ...bookingData } = values;
 
     const initialValues = {
       listing,
+      bookingData,
       bookingDates: {
         bookingStart: bookingDates.startDate,
         bookingEnd: bookingDates.endDate,