Merge pull request #269 from sharetribe/bookingdatesform-missing-title

Bookingdatesform missing title

src/components/DateRangeInputField/DateRangeInput.css

@@ -8,6 +8,9 @@
 
 .inputRoot {
 
+  /* Contain repainting to this component only */
+  transform: translate3d(0,0,0);
+
   /* Override react-dates default styles to match input styles */
 
   & :global(.DateRangePicker) {

src/containers/BookingDatesForm/BookingDatesForm.css

@@ -10,9 +10,26 @@
   margin-bottom: 46px;
 }
 
+.priceBreakdownContainer {
+  padding: 0 24px;
+  margin-bottom: 40px;
+}
+
+.priceBreakdownTitle {
+  /* Font */
+  color: var(--matterColorAnti);
+
+  margin-top: 5px;
+  margin-bottom: 14px;
+  @media (--desktopViewport) {
+    margin-top: 5px;
+    margin-bottom: 14px;
+  }
+}
+
 .receipt {
   flex-shrink: 0;
-  margin: 0 24px 24px 24px;
+  margin: 0 0 24px 0;
 }
 
 .error {

src/containers/BookingDatesForm/BookingDatesForm.js

@@ -101,7 +101,14 @@ export const BookingDatesFormComponent = props => {
   const endDateErrorMessage = intl.formatMessage({ id: 'DateRangeInputField.invalidEndDate' });
 
   const hasBookingInfo = startDate && endDate;
-  const bookingInfo = breakdown(startDate, endDate, unitPrice);
+  const bookingInfo = (
+    <div className={css.priceBreakdownContainer}>
+      <h3 className={css.priceBreakdownTitle}>
+        <FormattedMessage id="BookingDatesForm.priceBreakdownTitle" />
+      </h3>
+      {breakdown(startDate, endDate, unitPrice)}
+    </div>
+  );
 
   const submitDisabled = submitting || invalid || !hasBookingInfo;
 

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

@@ -18,38 +18,45 @@ exports[`BookingDatesForm matches snapshot with selected dates 1`] = `
         [Function],
       ]
     } />
-  <BookingBreakdown
-    bookingEnd={2017-04-16T00:00:00.000Z}
-    bookingStart={2017-04-14T00:00:00.000Z}
-    lineItems={
-      Array [
-        Object {
-          "code": "line-item/night",
-          "lineTotal": Money {
-            "amount": 2198,
-            "currency": "USD",
+  <div>
+    <h3>
+      <FormattedMessage
+        id="BookingDatesForm.priceBreakdownTitle"
+        values={Object {}} />
+    </h3>
+    <BookingBreakdown
+      bookingEnd={2017-04-16T00:00:00.000Z}
+      bookingStart={2017-04-14T00:00:00.000Z}
+      lineItems={
+        Array [
+          Object {
+            "code": "line-item/night",
+            "lineTotal": Money {
+              "amount": 2198,
+              "currency": "USD",
+            },
+            "quantity": "2",
+            "unitPrice": Money {
+              "amount": 1099,
+              "currency": "USD",
+            },
           },
-          "quantity": "2",
-          "unitPrice": Money {
-            "amount": 1099,
-            "currency": "USD",
-          },
-        },
-      ]
-    }
-    payinTotal={
-      Money {
-        "amount": 2198,
-        "currency": "USD",
+        ]
       }
-    }
-    unitPrice={
-      Money {
-        "amount": 1099,
-        "currency": "USD",
+      payinTotal={
+        Money {
+          "amount": 2198,
+          "currency": "USD",
+        }
       }
-    }
-    userRole="customer" />
+      unitPrice={
+        Money {
+          "amount": 1099,
+          "currency": "USD",
+        }
+      }
+      userRole="customer" />
+  </div>
   <p>
     <FormattedMessage
       id="BookingDatesForm.youWontBeChargedInfo"
@@ -85,6 +92,13 @@ exports[`BookingDatesForm matches snapshot without selected dates 1`] = `
         [Function],
       ]
     } />
+  <div>
+    <h3>
+      <FormattedMessage
+        id="BookingDatesForm.priceBreakdownTitle"
+        values={Object {}} />
+    </h3>
+  </div>
   <p>
     <FormattedMessage
       id="BookingDatesForm.youWontBeChargedInfo"

src/containers/ListingPage/ListingPage.css

@@ -168,6 +168,9 @@
   background-color: var(--matterColorLight);
   box-shadow: var(--boxShadowTop);
   display: flex;
+
+  /* Contain repainting to this component only */
+  transform: translate3d(0,0,0);
 }
 
 .priceContainer {

src/translations/en.json

@@ -17,6 +17,7 @@
   "BookingDatesForm.listingCurrencyInvalid": "Oops, the currency of the listing doesn't match the currency of the marketplace.",
   "BookingDatesForm.listingPriceMissing": "Oops, this listing has no price!",
   "BookingDatesForm.placeholder": "mm/dd/yyyy",
+  "BookingDatesForm.priceBreakdownTitle": "Booking breakdown",
   "BookingDatesForm.requestToBook": "Request to book",
   "BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",
   "BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",