Show pricing details on CheckoutPage

src/containers/CheckoutPage/CheckoutPage.css

@@ -2,6 +2,14 @@
   margin: 1rem;
 }
 
+.authorContainer {
+  margin: 1rem;
+}
+
+.receipt {
+  margin: 1rem 1rem 2rem 1rem;
+}
+
 .payment {
   padding: 0 1rem;
 }

src/containers/CheckoutPage/CheckoutPage.js

@@ -7,7 +7,7 @@ import { types } from '../../util/sdkLoader';
 import { pathByRouteName } from '../../util/routes';
 import * as propTypes from '../../util/propTypes';
 import { withFlattenedRoutes } from '../../util/contextHelpers';
-import { PageLayout } from '../../components';
+import { BookingInfo, PageLayout } from '../../components';
 import { StripePaymentForm } from '../../containers';
 import { initiateOrder, setInitialValues } from './CheckoutPage.duck';
 
@@ -15,9 +15,6 @@ import css from './CheckoutPage.css';
 
 const { UUID, LatLng } = types;
 
-const bookingStart = new Date(2017, 4, 18);
-const bookingEnd = new Date(2017, 4, 19);
-
 const currentListing = {
   id: new UUID('927a30a2-3a69-4b0d-9c2e-a41744488703'),
   type: 'listing',
@@ -28,7 +25,6 @@ const currentListing = {
     geolocation: new LatLng(60.16985569999999, 24.93837899999994),
   },
 };
-const imageUrl = 'https://placehold.it/750x470';
 
 export class CheckoutPageComponent extends Component {
   constructor(props) {
@@ -42,12 +38,11 @@ export class CheckoutPageComponent extends Component {
       return;
     }
     this.setState({ submitting: true });
-    const { sendOrderRequest, history, flattenedRoutes } = this.props;
+    const { bookingDates, history, flattenedRoutes, sendOrderRequest } = this.props;
     const params = {
       listingId: currentListing.id,
-      bookingStart,
-      bookingEnd,
       cardToken,
+      ...bookingDates,
     };
     sendOrderRequest(params)
       .then(orderId => {
@@ -63,7 +58,9 @@ export class CheckoutPageComponent extends Component {
   }
 
   render() {
-    const { initiateOrderError, intl } = this.props;
+    const { bookingDates, initiateOrderError, intl, listing } = this.props;
+    const { bookingStart, bookingEnd } = bookingDates;
+    const price = listing.attributes.price;
 
     const title = intl.formatMessage(
       {
@@ -83,7 +80,15 @@ export class CheckoutPageComponent extends Component {
     return (
       <PageLayout title={title}>
         <h1 className={css.title}>{title}</h1>
-        <img alt={currentListing.attributes.title} src={imageUrl} style={{ width: '100%' }} />
+        <div className={css.authorContainer}>
+          Author avatar and stuff
+        </div>
+        <BookingInfo
+          className={css.receipt}
+          bookingStart={bookingStart}
+          bookingEnd={bookingEnd}
+          unitPrice={price}
+        />
         <section className={css.payment}>
           {errorMessage}
           <h2 className={css.paymentTitle}>
@@ -99,12 +104,17 @@ export class CheckoutPageComponent extends Component {
   }
 }
 
-CheckoutPageComponent.defaultProps = { initiateOrderError: null };
+CheckoutPageComponent.defaultProps = { bookingDates: null, initiateOrderError: null, listing: null };
 
-const { func, shape, arrayOf, instanceOf } = PropTypes;
+const { arrayOf, func, instanceOf, shape } = PropTypes;
 
 CheckoutPageComponent.propTypes = {
+  bookingDates: shape({
+    bookingStart: instanceOf(Date).isRequired,
+    bookingEnd: instanceOf(Date).isRequired,
+  }),
   initiateOrderError: instanceOf(Error),
+  listing: propTypes.listing,
   sendOrderRequest: func.isRequired,
 
   // from injectIntl

src/containers/CheckoutPage/CheckoutPage.test.js

@@ -9,10 +9,15 @@ const noop = () => null;
 describe('CheckoutPage', () => {
   it('matches snapshot', () => {
     const props = {
-      intl: fakeIntl,
-      sendOrderRequest: noop,
-      history: { push: noop },
+      bookingDates: {
+        bookingStart: new Date('Fri, 14 Apr 2017 GMT'),
+        bookingEnd: new Date('Sun, 16 Apr 2017 GMT'),
+      },
       flattenedRoutes: [],
+      history: { push: noop },
+      intl: fakeIntl,
+      listing: { ...createListing('listing1'), author: createUser('author') },
+      sendOrderRequest: noop,
     };
     const tree = renderShallow(<CheckoutPageComponent {...props} />);
     expect(tree).toMatchSnapshot();

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

@@ -4,12 +4,16 @@ exports[`CheckoutPage matches snapshot 1`] = `
   <h1>
     CheckoutPage.title
   </h1>
-  <img
-    alt="Example listing"
-    src="https://placehold.it/750x470"
-    style={
-      Object {
-        "width": "100%",
+  <div>
+    Author avatar and stuff
+  </div>
+  <BookingInfo
+    bookingEnd={2017-04-16T00:00:00.000Z}
+    bookingStart={2017-04-14T00:00:00.000Z}
+    unitPrice={
+      Money {
+        "amount": 5500,
+        "currency": "USD",
       }
     } />
   <section>

src/util/propTypes.js

@@ -114,6 +114,7 @@ export const listing = shape({
     description: string.isRequired,
     address: string.isRequired,
     geolocation: latlng.isRequired,
+    price: money,
   }),
   author: user,
   images: arrayOf(image),