Add breakdown styles

src/components/BookingBreakdown/BookingBreakdown.css

@@ -1,18 +1,54 @@
+@import '../../marketplace.css';
+
 .root {
+  padding-top: 6px; /* align with baseline */
   display: flex;
   flex-direction: column;
 }
 
-.row {
+.lineItem {
+  @apply --marketplaceH4FontStyles;
+  margin: -1px 0 0 0; /* align with baseline */
+
+  @media (--desktopViewport) {
+    margin: -1px 0 0 0; /* align with baseline */
+  }
+
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
+.itemLabel {
+  margin-top: 1px; /* align with baseline */
+}
+
+.itemValue {
+  @apply --marketplaceDefaultFontStyles;
+}
+
 .totalDivider {
+  /* dimensions */
   width: 100%;
+  height: 1px;
+  margin: 10px 0 13px 0;
+
+  border: none;
+  background-color: var(--matterColorNegative);
+}
+
+.totalLabel {
+  font-weight: var(--fontWeightSemiBold);
+
+  /* Move so that baseline aligns with the total price */
+  padding-top: 7px;
 }
 
 .totalPrice {
-  font-weight: bold;
+  @apply --marketplaceH2FontStyles;
+  margin: 0;
+
+  @media (--desktopViewport) {
+    margin: 0;
+  }
 }

src/components/BookingBreakdown/BookingBreakdown.example.js

@@ -42,3 +42,14 @@ export const ProviderSaleZeroCommission = {
     totalPrice: new types.Money(7000, 'USD'),
   },
 };
+
+export const ProviderSaleSingleNight = {
+  component: BookingBreakdown,
+  props: {
+    bookingStart: new Date(Date.UTC(2017, 3, 14)),
+    bookingEnd: new Date(Date.UTC(2017, 3, 15)),
+    unitPrice: new types.Money(4500, 'USD'),
+    commission: new types.Money(2000, 'USD'),
+    totalPrice: new types.Money(2500, 'USD'),
+  },
+};

src/components/BookingBreakdown/BookingBreakdown.js

@@ -55,13 +55,11 @@ export const BookingBreakdownComponent = props => {
     : null;
 
   const commissionInfo = (
-    <div className={css.row}>
-      <div className={css.commissionLabel}>
+    <div className={css.lineItem}>
+      <span className={css.itemLabel}>
         <FormattedMessage id="BookingBreakdown.commission" />
-      </div>
-      <div className={css.commission}>
-        {formattedCommission}
-      </div>
+      </span>
+      <span className={css.itemValue}>{formattedCommission}</span>
     </div>
   );
 
@@ -72,25 +70,21 @@ export const BookingBreakdownComponent = props => {
 
   return (
     <div className={classes}>
-      <div className={css.row}>
-        <div className={css.priceUnitLabel}>
-          <FormattedMessage id="BookingBreakdown.pricePerDay" />
-        </div>
-        <div className={css.priceUnitPrice}>
-          {formattedUnitPrice}
-        </div>
+      <div className={css.lineItem}>
+        <span className={css.itemLabel}>
+          <FormattedMessage id="BookingBreakdown.pricePerNight" />
+        </span>
+        <span className={css.itemValue}>{formattedUnitPrice}</span>
       </div>
-      <div className={css.row}>
-        <div className={css.bookingPeriodLabel}>
+      <div className={css.lineItem}>
+        <span className={css.itemLabel}>
           {bookingPeriod}
-        </div>
-        <div className={css.bookedDatesCount}>
-          {nightCountMessage}
-        </div>
+        </span>
+        <span className={css.itemValue}>{nightCountMessage}</span>
       </div>
       {commission ? commissionInfo : null}
       <hr className={css.totalDivider} />
-      <div className={css.row}>
+      <div className={css.lineItem}>
         <div className={css.totalLabel}>
           <FormattedMessage id="BookingBreakdown.total" />
         </div>

src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap

@@ -3,31 +3,31 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
   className="">
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
-        Price per night:
+        Price per night
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       10
-    </div>
+    </span>
   </div>
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
         2017-04-14 - 2017-04-16
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       <span>
-        2 nights
+        * 2 nights
       </span>
-    </div>
+    </span>
   </div>
   <hr
     className={undefined} />
@@ -36,7 +36,7 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
     <div
       className={undefined}>
       <span>
-        Total:
+        Total price
       </span>
     </div>
     <div
@@ -52,31 +52,31 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
   className="">
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
-        Price per night:
+        Price per night
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       10
-    </div>
+    </span>
   </div>
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
         2017-04-14 - 2017-04-16
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       <span>
-        2 nights
+        * 2 nights
       </span>
-    </div>
+    </span>
   </div>
   <hr
     className={undefined} />
@@ -85,7 +85,7 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
     <div
       className={undefined}>
       <span>
-        Total:
+        Total price
       </span>
     </div>
     <div
@@ -101,44 +101,44 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
   className="">
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
-        Price per night:
+        Price per night
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       10
-    </div>
+    </span>
   </div>
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
         2017-04-14 - 2017-04-16
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       <span>
-        2 nights
+        * 2 nights
       </span>
-    </div>
+    </span>
   </div>
   <div
     className={undefined}>
-    <div
+    <span
       className={undefined}>
       <span>
         Saunatime fee:
       </span>
-    </div>
-    <div
+    </span>
+    <span
       className={undefined}>
       -2
-    </div>
+    </span>
   </div>
   <hr
     className={undefined} />
@@ -147,7 +147,7 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
     <div
       className={undefined}>
       <span>
-        Total:
+        Total price
       </span>
     </div>
     <div

src/translations/en.json

@@ -10,10 +10,9 @@
   "AuthorInfo.host": "Hosted by {firstName} {lastName}",
   "BookingBreakdown.bookingPeriod": "{bookingStart} - {bookingEnd}",
   "BookingBreakdown.commission": "Saunatime fee:",
-  "BookingBreakdown.nightCount": "{count, number} {count, plural, one {night} other {nights}}",
-  "BookingBreakdown.pricePerDay":"Price per night:",
-  "BookingBreakdown.subtotal": "Subtotal:",
-  "BookingBreakdown.total": "Total:",
+  "BookingBreakdown.nightCount": "* {count, number} {count, plural, one {night} other {nights}}",
+  "BookingBreakdown.pricePerNight": "Price per night",
+  "BookingBreakdown.total": "Total price",
   "BookingDatesForm.bookingEndTitle": "End date",
   "BookingDatesForm.bookingStartTitle": "Start date",
   "BookingDatesForm.listingCurrencyInvalid": "Oops, the currency of the listing doesn't match the currency of the marketplace.",