CheckoutPage design & line-item fixes

src/containers/CheckoutPage/CheckoutPage.js

@@ -42,13 +42,23 @@ const breakdown = (bookingStart, bookingEnd, unitPrice) => {
     return null;
   }
   const totalPrice = estimatedTotalPrice(bookingStart, bookingEnd, unitPrice);
+  const nightCount = nightsBetween(bookingStart, bookingEnd);
+
   return (
     <BookingBreakdown
       className={css.receipt}
       bookingStart={bookingStart}
       bookingEnd={bookingEnd}
-      unitPrice={unitPrice}
-      totalPrice={totalPrice}
+      userRole="customer"
+      lineItems={[
+        {
+          code: 'line-item/night',
+          quantity: new Decimal(nightCount),
+          unitPrice: unitPrice,
+          lineTotal: totalPrice,
+        },
+      ]}
+      payinTotal={totalPrice}
     />
   );
 };

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

@@ -36,18 +36,29 @@ exports[`CheckoutPage matches snapshot 1`] = `
     <BookingBreakdown
       bookingEnd={2017-04-16T00:00:00.000Z}
       bookingStart={2017-04-14T00:00:00.000Z}
-      totalPrice={
+      lineItems={
+        Array [
+          Object {
+            "code": "line-item/night",
+            "lineTotal": Money {
+              "amount": 11000,
+              "currency": "USD",
+            },
+            "quantity": "2",
+            "unitPrice": Money {
+              "amount": 5500,
+              "currency": "USD",
+            },
+          },
+        ]
+      }
+      payinTotal={
         Money {
           "amount": 11000,
           "currency": "USD",
         }
       }
-      unitPrice={
-        Money {
-          "amount": 5500,
-          "currency": "USD",
-        }
-      } />
+      userRole="customer" />
   </div>
   <section>
     <h3>

src/containers/StripePaymentForm/StripePaymentForm.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import { Button } from '../../components';
+import { PrimaryButton } from '../../components';
 import config from '../../config';
 
 import css from './StripePaymentForm.css';
@@ -149,9 +149,9 @@ class StripePaymentForm extends Component {
         {this.state.error ? <span style={{ color: 'red' }}>{this.state.error}</span> : null}
         <div className={css.submitContainer}>
           {paymentInfo ? <p className={css.paymentInfo}>{paymentInfo}</p> : null}
-          <Button className={css.submitButton} type="submit" disabled={submitDisabled}>
+          <PrimaryButton className={css.submitButton} type="submit" disabled={submitDisabled}>
             <FormattedMessage id="StripePaymentForm.submitPaymentInfo" />
-          </Button>
+          </PrimaryButton>
         </div>
       </form>
     );