Add Checkout page contents

src/app.test.js

@@ -27,7 +27,7 @@ describe('Application', () => {
       '/s': 'Search page',
       '/l/listing-title-slug/1234': 'Listing page with listing id: #1234',
       '/u/1234': 'Profile page with display name: 1234',
-      '/checkout/1234': 'Checkout page: 1234',
+      '/checkout/1234': 'Book Banyan Studios (1234)',
       '/login': 'Authentication page: login tab',
       '/signup': 'Authentication page: signup tab',
       '/password/forgotten': 'Request new password',
@@ -37,7 +37,7 @@ describe('Application', () => {
     forEach(urlTitles, (title, url) => {
       const context = createServerRenderContext();
       const body = render(url, context);
-      expect(body.includes(`>${title}</h1>`)).toEqual(true);
+      expect(body).toMatch(`>${title}</h1>`);
     });
 
     const urlRedirects = {

src/containers/CheckoutPage/CheckoutPage.css

@@ -0,0 +1,21 @@
+.buttonLink {
+  display: block;
+  width: 100%;
+  font-size: 1.4rem;
+  padding: 0.5rem;
+  margin: 1rem 0;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  cursor: pointer;
+
+  text-align: center;
+  text-decoration: none;
+  color: #000;
+
+  &:hover {
+    background-color: #ddd;
+  }
+  &:active {
+    background-color: #ccc;
+  }
+}

src/containers/CheckoutPage/CheckoutPage.js

@@ -1,14 +1,61 @@
 import React, { PropTypes } from 'react';
-import { Link } from 'react-router';
-import { PageLayout } from '../../components';
+import { PageLayout, NamedLink } from '../../components';
 
-const CheckoutPage = ({ params }) => (
-  <PageLayout title={`Checkout page: ${params.listingId}`}>
-    <Link to={`/order/12345`}><button>Pay</button></Link>
-  </PageLayout>
-);
+import css from './CheckoutPage.css';
 
-const { shape, string } = PropTypes;
+const BookingInfo = props => {
+  const { pricePerDay, bookingPeriod, bookingDuration, total } = props;
+  return (
+    <dl>
+      <dt>
+        Price per day:
+      </dt>
+      <dd>{pricePerDay}</dd>
+      <dt>
+        Booking period:
+      </dt>
+      <dd>{`${bookingPeriod}, ${bookingDuration}`}</dd>
+      <dt>
+        Total
+      </dt>
+      <dd>{total}</dd>
+    </dl>
+  );
+};
+
+const { string, shape } = PropTypes;
+
+BookingInfo.propTypes = {
+  pricePerDay: string.isRequired,
+  bookingPeriod: string.isRequired,
+  bookingDuration: string.isRequired,
+  total: string.isRequired,
+};
+
+const CheckoutPage = props => {
+  const { params } = props;
+  const { listingId } = params;
+
+  const info = {
+    title: 'Banyan Studios',
+    imageUrl: 'http://placehold.it/750x470',
+    pricePerDay: '55\u20AC',
+    bookingPeriod: 'Jan 2nd - Jan 4th',
+    bookingDuration: '3 days',
+    total: '165\u20AC',
+  };
+
+  return (
+    <PageLayout title={`Book ${info.title} (${listingId})`}>
+      <img alt={info.title} src={info.imageUrl} style={{ width: '100%' }} />
+      <BookingInfo {...info} />
+      <p>By confirming I accept the booking terms and conditions.</p>
+      <NamedLink className={css.buttonLink} name="OrderDetailsPage" params={{ id: 12345 }}>
+        Confirm & Pay
+      </NamedLink>
+    </PageLayout>
+  );
+};
 
 CheckoutPage.propTypes = { params: shape({ listingId: string.isRequired }).isRequired };
 

src/containers/CheckoutPage/CheckoutPage.test.js

@@ -2,13 +2,17 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { TestProvider } from '../../util/test-helpers';
 import CheckoutPage from './CheckoutPage';
+import { RoutesProvider } from '../../components';
+import routesConfiguration from '../../routesConfiguration';
 
 describe('CheckoutPage', () => {
   it('matches snapshot', () => {
     const component = renderer.create(
       (
         <TestProvider>
-          <CheckoutPage params={{ listingId: 'some-listing-id' }} />
+          <RoutesProvider routes={routesConfiguration}>
+            <CheckoutPage params={{ listingId: 'some-listing-id' }} />
+          </RoutesProvider>
         </TestProvider>
       ),
     );

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

@@ -117,16 +117,45 @@ exports[`CheckoutPage matches snapshot 1`] = `
     </a>
   </div>
   <h1>
-    Checkout page: some-listing-id
+    Book Banyan Studios (some-listing-id)
   </h1>
+  <img
+    alt="Banyan Studios"
+    src="http://placehold.it/750x470"
+    style={
+      Object {
+        "width": "100%",
+      }
+    } />
+  <dl>
+    <dt>
+      Price per day:
+    </dt>
+    <dd>
+      55€
+    </dd>
+    <dt>
+      Booking period:
+    </dt>
+    <dd>
+      Jan 2nd - Jan 4th, 3 days
+    </dd>
+    <dt>
+      Total
+    </dt>
+    <dd>
+      165€
+    </dd>
+  </dl>
+  <p>
+    By confirming I accept the booking terms and conditions.
+  </p>
   <a
     className=""
-    href="/order/12345"
+    href="/order/12345/details"
     onClick={[Function]}
     style={Object {}}>
-    <button>
-      Pay
-    </button>
+    Confirm & Pay
   </a>
 </div>
 `;

src/index.css

@@ -1,5 +1,9 @@
 @import "sanitize.css";
 
+html {
+  font-family: sans-serif;
+}
+
 ul {
   list-style: none;
   padding: 0;
@@ -27,6 +31,7 @@ button {
   background-color: #eee;
   border: 1px solid #ddd;
   cursor: pointer;
+  font-family: sans-serif;
 
   &:hover {
     background-color: #ddd;