Merge pull request #1195 from sharetribe/time-to-bookingbreakdown

Show also time in booking breakdown if needed

CHANGELOG.md

@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [change] Change the design of `BookingBreakdown` and add options to show only dates or booking
+  date and time there. [#1195](https://github.com/sharetribe/flex-template-web/pull/1195)
 - [change] Move `BookingTimeInfo` to separate component from `InboxPage`. Add options to show only
   booking dates or booking dates and times.
   [#1194](https://github.com/sharetribe/flex-template-web/pull/1194)

src/components/BookingBreakdown/BookingBreakdown.css

@@ -11,20 +11,11 @@
 
 .lineItem {
   @apply --marketplaceH4FontStyles;
-
-  /* Since the line items have different font sizes in the label and the
-   value columns, we have to balance the line to align to the
-   baseline. */
-  margin: -1px 0 0 0;
+  margin: 0;
 
   @media (--viewportMedium) {
-    margin: -1px 0 8px 0;
-
-    &:last-of-type {
-      /* Last item should not have bottom margin that goes to the bottom of
-         the component */
-      margin-bottom: 0;
-    }
+    padding-top: 6px;
+    padding-bottom: 2px;
   }
 
   display: flex;
@@ -32,14 +23,48 @@
   justify-content: space-between;
 }
 
+.bookingPeriod {
+  flex: 1 1;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-bottom: 6px;
+
+  @media (--viewportMedium) {
+    padding-bottom: 8px;
+  }
+}
+
+.bookingPeriodSectionRigth {
+  text-align: right;
+}
+
+.dayLabel {
+  @apply --marketplaceH5FontStyles;
+  margin: 0;
+  color: var(--matterColorAnti);
+  line-height: 24px;
+  padding-top: 2px;
+  padding-bottom: 4px;
+
+  @media (--viewportMedium) {
+    padding-top: 1px;
+    padding-bottom: 7px;
+  }
+}
+
+.dayInfo {
+  @apply --marketplaceButtonFontStyles;
+}
+
 .subTotalLineItem {
   @apply --marketplaceH4FontStyles;
   font-weight: var(--fontWeightBold);
-
-  margin: 4px 0 1px 0;
+  margin: 0;
+  padding: 5px 0 1px 0;
 
   @media (--viewportMedium) {
-    margin: 6px 0 9px 0;
+    padding: 6px 0 2px 0;
   }
 
   display: flex;
@@ -47,72 +72,65 @@
   justify-content: space-between;
 }
 
+.lineItemTotal {
+  @apply --marketplaceH4FontStyles;
+  margin: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  justify-content: space-between;
+
+  @media (--viewportMedium) {
+    padding-bottom: 2px;
+  }
+}
 .itemLabel {
+  @apply --marketplaceSmallFontStyles;
   flex: 1;
-  margin-top: 1px; /* align with baseline */
 }
 
 .itemValue {
-  @apply --marketplaceH4FontStyles;
-  font-weight: 600;
+  @apply --marketplaceSmallFontStyles;
   margin: 0 0 0 10px;
-
-  @media (--viewportMedium) {
-    font-weight: 700;
-    margin: 0 0 0 10px;
-  }
 }
 
 .totalDivider {
   /* dimensions */
   width: 100%;
   height: 1px;
-  margin: 13px 0 4px 0;
+  margin: 12px 0 5px 0;
 
   border: none;
   background-color: var(--matterColorNegative);
 
   @media (--viewportMedium) {
-    margin: 2px 0 14px 0;
+    margin: 7px 0 0px 0;
   }
 }
 
 .totalLabel {
-  font-weight: var(--fontWeightSemiBold);
-
-  /* Move so that baseline aligns with the total price */
-  padding-top: 6px;
-
-  @media (--viewportMedium) {
-    padding-top: 8px;
-  }
+  font-weight: var(--fontWeightNormal);
 }
 
 .totalPrice {
-  @apply --marketplaceBodyFontStyles;
-  font-weight: var(--fontWeightSemiBold);
+  @apply --marketplaceButtonFontStyles;
   margin: 0 0 0 10px;
-  padding-top: 4px;
-
-  @media (--viewportMedium) {
-    margin: 2px 0 0 10px;
-    padding-top: 0;
-  }
+  padding-top: 0px;
 }
 
 .feeInfo {
   @apply --marketplaceTinyFontStyles;
-  color: var(--matterColorAnti);
-  margin: 0 0 20px 0;
   flex-shrink: 0;
+  margin: 0;
+  color: var(--matterColorAnti);
+  padding-top: 4px;
+  padding-bottom: 14px;
 
   @media (--viewportMedium) {
-    margin-top: auto;
-    margin-bottom: 20px;
-  }
-
-  @media (--viewportLarge) {
-    margin-top: 4px;
-    margin-bottom: 22px;
+    padding-top: 11px;
+    padding-bottom: 21px;
   }
 }

src/components/BookingBreakdown/BookingBreakdown.example.js

@@ -10,7 +10,13 @@ import {
   TRANSITION_CONFIRM_PAYMENT,
   TX_TRANSITION_ACTOR_CUSTOMER,
 } from '../../util/transaction';
-import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS } from '../../util/types';
+import {
+  LINE_ITEM_DAY,
+  LINE_ITEM_NIGHT,
+  LINE_ITEM_UNITS,
+  DATE_TYPE_DATE,
+  DATE_TYPE_DATETIME,
+} from '../../util/types';
 import config from '../../config';
 import BookingBreakdown from './BookingBreakdown';
 
@@ -60,6 +66,7 @@ export const Checkout = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -86,6 +93,7 @@ export const CustomerOrder = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -112,6 +120,7 @@ export const ProviderSale = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(7000, CURRENCY),
@@ -145,6 +154,7 @@ export const ProviderSaleZeroCommission = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -178,6 +188,7 @@ export const ProviderSaleSingleNight = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATE,
     transaction: exampleTransaction({
       payinTotal: new Money(4500, CURRENCY),
       payoutTotal: new Money(2500, CURRENCY),
@@ -211,6 +222,7 @@ export const ProviderSalePreauthorized = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_CONFIRM_PAYMENT,
       payinTotal: new Money(4500, CURRENCY),
@@ -245,6 +257,7 @@ export const ProviderSaleAccepted = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_ACCEPT,
       payinTotal: new Money(4500, CURRENCY),
@@ -279,6 +292,7 @@ export const ProviderSaleDeclined = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_DECLINE,
       payinTotal: new Money(4500, CURRENCY),
@@ -313,6 +327,7 @@ export const ProviderSaleAutoDeclined = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_EXPIRE,
       payinTotal: new Money(4500, CURRENCY),
@@ -347,6 +362,7 @@ export const ProviderSaleDelivered = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_COMPLETE,
       payinTotal: new Money(4500, CURRENCY),
@@ -381,6 +397,7 @@ export const ProviderSaleCanceled = {
   props: {
     userRole: 'provider',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       lastTransition: TRANSITION_CANCEL,
       payinTotal: new Money(0, CURRENCY),
@@ -432,6 +449,7 @@ export const SingleDay = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_DAY,
+    dateType: DATE_TYPE_DATE,
     transaction: exampleTransaction({
       payinTotal: new Money(4500, CURRENCY),
       payoutTotal: new Money(4500, CURRENCY),
@@ -458,6 +476,7 @@ export const MultipleDays = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_DAY,
+    dateType: DATE_TYPE_DATE,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -484,6 +503,7 @@ export const UnitsType = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_UNITS,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(9000, CURRENCY),
       payoutTotal: new Money(9000, CURRENCY),
@@ -510,6 +530,7 @@ export const CustomPricing = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(12800, CURRENCY),
       payoutTotal: new Money(12600, CURRENCY),
@@ -560,6 +581,7 @@ export const CustomPricingWithRefund = {
   props: {
     userRole: 'customer',
     unitType: LINE_ITEM_NIGHT,
+    dateType: DATE_TYPE_DATETIME,
     transaction: exampleTransaction({
       payinTotal: new Money(0, CURRENCY),
       payoutTotal: new Money(0, CURRENCY),

src/components/BookingBreakdown/BookingBreakdown.js

@@ -12,8 +12,8 @@ import {
   LINE_ITEM_PROVIDER_COMMISSION,
 } from '../../util/types';
 
-import LineItemUnitPriceMaybe from './LineItemUnitPriceMaybe';
 import LineItemBookingPeriod from './LineItemBookingPeriod';
+import LineItemBasePriceMaybe from './LineItemBasePriceMaybe';
 import LineItemUnitsMaybe from './LineItemUnitsMaybe';
 import LineItemSubTotalMaybe from './LineItemSubTotalMaybe';
 import LineItemCustomerCommissionMaybe from './LineItemCustomerCommissionMaybe';
@@ -27,7 +27,16 @@ import LineItemUnknownItemsMaybe from './LineItemUnknownItemsMaybe';
 import css from './BookingBreakdown.css';
 
 export const BookingBreakdownComponent = props => {
-  const { rootClassName, className, userRole, unitType, transaction, booking, intl } = props;
+  const {
+    rootClassName,
+    className,
+    userRole,
+    unitType,
+    transaction,
+    booking,
+    intl,
+    dateType,
+  } = props;
 
   const isCustomer = userRole === 'customer';
   const isProvider = userRole === 'provider';
@@ -40,12 +49,49 @@ export const BookingBreakdownComponent = props => {
 
   const classes = classNames(rootClassName || css.root, className);
 
+  /**
+   * BookingBreakdown contains different line items:
+   *
+   * LineItemBookingPeriod: prints booking start and booking end types. Prop dateType
+   * determines if the date and time or only the date is shown
+   *
+   * LineItemUnitsMaybe: if he unitType is line-item/unit print the name and
+   * quantity of the unit
+   *
+   * LineItemBasePriceMaybe: prints the base price calculation for the listing, e.g.
+   * "$150.00 * 2 nights $300"
+   *
+   * LineItemUnitPriceMaybe: prints just the unit price, e.g. "Price per night $32.00".
+   * This line item is not used by default in the BookingBreakdown.
+   *
+   * LineItemUnknownItemsMaybe: prints the line items that are unknown. In ideal case there
+   * should not be unknown line items. If you are using custom pricing, you should create
+   * new custom line items if you need them.
+   *
+   * LineItemSubTotalMaybe: prints subtotal of line items before possible
+   * commission or refunds
+   *
+   * LineItemRefundMaybe: prints the amount of refund
+   *
+   * LineItemCustomerCommissionMaybe: prints the amount of customer commission
+   * The default transaction process used by FTW doesn't include the customer commission.
+   *
+   * LineItemCustomerCommissionRefundMaybe: prints the amount of refunded customer commission
+   *
+   * LineItemProviderCommissionMaybe: prints the amount of provider commission
+   *
+   * LineItemProviderCommissionRefundMaybe: prints the amount of refunded provider commission
+   *
+   * LineItemTotalPrice: prints total price of the transaction
+   *
+   */
+
   return (
     <div className={classes}>
-      <LineItemUnitPriceMaybe transaction={transaction} unitType={unitType} intl={intl} />
-      <LineItemBookingPeriod transaction={transaction} booking={booking} unitType={unitType} />
+      <LineItemBookingPeriod booking={booking} unitType={unitType} dateType={dateType} />
       <LineItemUnitsMaybe transaction={transaction} unitType={unitType} />
 
+      <LineItemBasePriceMaybe transaction={transaction} unitType={unitType} intl={intl} />
       <LineItemUnknownItemsMaybe transaction={transaction} intl={intl} />
 
       <LineItemSubTotalMaybe
@@ -78,8 +124,8 @@ export const BookingBreakdownComponent = props => {
         intl={intl}
       />
 
-      <hr className={css.totalDivider} />
       <LineItemTotalPrice transaction={transaction} isProvider={isProvider} intl={intl} />
+
       {hasCommissionLineItem ? (
         <span className={css.feeInfo}>
           <FormattedMessage id="BookingBreakdown.commissionFeeNote" />
@@ -89,7 +135,7 @@ export const BookingBreakdownComponent = props => {
   );
 };
 
-BookingBreakdownComponent.defaultProps = { rootClassName: null, className: null };
+BookingBreakdownComponent.defaultProps = { rootClassName: null, className: null, dateType: null };
 
 BookingBreakdownComponent.propTypes = {
   rootClassName: string,
@@ -99,6 +145,7 @@ BookingBreakdownComponent.propTypes = {
   unitType: propTypes.bookingUnitType.isRequired,
   transaction: propTypes.transaction.isRequired,
   booking: propTypes.booking.isRequired,
+  dateType: propTypes.dateType,
 
   // from injectIntl
   intl: intlShape.isRequired,

src/components/BookingBreakdown/BookingBreakdown.test.js

@@ -7,6 +7,7 @@ import {
   TRANSITION_CANCEL,
   TRANSITION_REQUEST_PAYMENT,
   TX_TRANSITION_ACTOR_CUSTOMER,
+  DATE_TYPE_DATE,
 } from '../../util/transaction';
 import { LINE_ITEM_NIGHT } from '../../util/types';
 import { BookingBreakdownComponent } from './BookingBreakdown';
@@ -42,6 +43,7 @@ describe('BookingBreakdown', () => {
       <BookingBreakdownComponent
         userRole="customer"
         unitType={LINE_ITEM_NIGHT}
+        dateType={DATE_TYPE_DATE}
         transaction={exampleTransaction({
           payinTotal: new Money(2000, 'USD'),
           payoutTotal: new Money(2000, 'USD'),
@@ -71,6 +73,7 @@ describe('BookingBreakdown', () => {
       <BookingBreakdownComponent
         userRole="customer"
         unitType={LINE_ITEM_NIGHT}
+        dateType={DATE_TYPE_DATE}
         transaction={exampleTransaction({
           payinTotal: new Money(2000, 'USD'),
           payoutTotal: new Money(2000, 'USD'),
@@ -100,6 +103,7 @@ describe('BookingBreakdown', () => {
       <BookingBreakdownComponent
         userRole="provider"
         unitType={LINE_ITEM_NIGHT}
+        dateType={DATE_TYPE_DATE}
         transaction={exampleTransaction({
           payinTotal: new Money(2000, 'USD'),
           payoutTotal: new Money(1800, 'USD'),
@@ -135,6 +139,7 @@ describe('BookingBreakdown', () => {
       <BookingBreakdownComponent
         userRole="provider"
         unitType={LINE_ITEM_NIGHT}
+        dateType={DATE_TYPE_DATE}
         transaction={exampleTransaction({
           lastTransition: TRANSITION_CANCEL,
           payinTotal: new Money(0, 'USD'),

src/components/BookingBreakdown/LineItemBasePriceMaybe.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FormattedMessage, intlShape } from '../../util/reactIntl';
+import { formatMoney } from '../../util/currency';
+import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
+
+import css from './BookingBreakdown.css';
+
+const LineItemBasePriceMaybe = props => {
+  const { transaction, unitType, intl } = props;
+  const isNightly = unitType === LINE_ITEM_NIGHT;
+  const isDaily = unitType === LINE_ITEM_DAY;
+  const translationKey = isNightly
+    ? 'BookingBreakdown.baseUnitNight'
+    : isDaily
+    ? 'BookingBreakdown.baseUnitDay'
+    : 'BookingBreakdown.baseUnitQuantity';
+
+  // Find correct line-item for given unitType prop.
+  // It should be one of the following: 'line-item/night, 'line-item/day', 'line-item/units', or 'line-item/time'
+  // These are defined in '../../util/types';
+  const unitPurchase = transaction.attributes.lineItems.find(
+    item => item.code === unitType && !item.reversal
+  );
+
+  const quantity = unitPurchase ? unitPurchase.quantity.toString() : null;
+  const unitPrice = unitPurchase ? formatMoney(intl, unitPurchase.unitPrice) : null;
+  const total = unitPurchase ? formatMoney(intl, unitPurchase.lineTotal) : null;
+
+  return quantity && total ? (
+    <div className={css.lineItem}>
+      <span className={css.itemLabel}>
+        <FormattedMessage id={translationKey} values={{ unitPrice, quantity }} />
+      </span>
+      <span className={css.itemValue}>{total}</span>
+    </div>
+  ) : null;
+};
+
+LineItemBasePriceMaybe.propTypes = {
+  transaction: propTypes.transaction.isRequired,
+  unitType: propTypes.bookingUnitType.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default LineItemBasePriceMaybe;

src/components/BookingBreakdown/LineItemBookingPeriod.js

@@ -1,44 +1,63 @@
 import React from 'react';
-import { FormattedMessage, FormattedHTMLMessage, FormattedDate } from '../../util/reactIntl';
+import { FormattedMessage, FormattedDate } from '../../util/reactIntl';
 import moment from 'moment';
-import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
-import { daysBetween, dateFromAPIToLocalNoon } from '../../util/dates';
+import { LINE_ITEM_NIGHT, DATE_TYPE_DATE, propTypes } from '../../util/types';
+import { dateFromAPIToLocalNoon } from '../../util/dates';
 
 import css from './BookingBreakdown.css';
 
 const BookingPeriod = props => {
-  const { isSingleDay, startDate, endDate } = props;
+  const { startDate, endDate, dateType } = props;
+
+  const timeFormatOptions =
+    dateType === DATE_TYPE_DATE
+      ? {
+          weekday: 'long',
+        }
+      : {
+          weekday: 'short',
+          hour: 'numeric',
+          minute: 'numeric',
+        };
+
   const dateFormatOptions = {
-    weekday: 'short',
     month: 'short',
     day: 'numeric',
   };
 
-  if (isSingleDay) {
-    return <FormattedDate value={startDate} {...dateFormatOptions} />;
-  }
-
   return (
-    <FormattedMessage
-      id="BookingBreakdown.bookingPeriod"
-      values={{
-        bookingStart: (
-          <span className={css.nowrap}>
+    <>
+      <div className={css.bookingPeriod}>
+        <div className={css.bookingPeriodSection}>
+          <div className={css.dayLabel}>
+            <FormattedMessage id="BookingBreakdown.bookingStart" />
+          </div>
+          <div className={css.dayInfo}>
+            <FormattedDate value={startDate} {...timeFormatOptions} />
+          </div>
+          <div className={css.itemLabel}>
             <FormattedDate value={startDate} {...dateFormatOptions} />
-          </span>
-        ),
-        bookingEnd: (
-          <span className={css.nowrap}>
+          </div>
+        </div>
+
+        <div className={css.bookingPeriodSectionRigth}>
+          <div className={css.dayLabel}>
+            <FormattedMessage id="BookingBreakdown.bookingEnd" />
+          </div>
+          <div className={css.dayInfo}>
+            <FormattedDate value={endDate} {...timeFormatOptions} />
+          </div>
+          <div className={css.itemLabel}>
             <FormattedDate value={endDate} {...dateFormatOptions} />
-          </span>
-        ),
-      }}
-    />
+          </div>
+        </div>
+      </div>
+    </>
   );
 };
 
 const LineItemBookingPeriod = props => {
-  const { transaction, booking, unitType } = props;
+  const { booking, unitType, dateType } = props;
 
   // Attributes: displayStart and displayEnd can be used to differentiate shown time range
   // from actual start and end times used for availability reservation. It can help in situations
@@ -49,39 +68,22 @@ const LineItemBookingPeriod = props => {
   const localEndDateRaw = dateFromAPIToLocalNoon(displayEnd || end);
 
   const isNightly = unitType === LINE_ITEM_NIGHT;
-  const isDaily = unitType === LINE_ITEM_DAY;
-
-  const dayCount = daysBetween(localStartDate, localEndDateRaw);
-  const isSingleDay = !isNightly && dayCount === 1;
   const endDay = isNightly ? localEndDateRaw : moment(localEndDateRaw).subtract(1, 'days');
 
-  const unitPurchase = transaction.attributes.lineItems.find(
-    item => item.code === unitType && !item.reversal
-  );
-
-  const useQuantityForDayCount = isNightly || isDaily;
-  const count = useQuantityForDayCount && unitPurchase ? unitPurchase.quantity.toFixed() : dayCount;
-
-  const unitCountMessage = (
-    <FormattedHTMLMessage
-      id={isNightly ? 'BookingBreakdown.nightCount' : 'BookingBreakdown.dayCount'}
-      values={{ count }}
-    />
-  );
-
   return (
-    <div className={css.lineItem}>
-      <span className={css.itemLabel}>
-        <BookingPeriod isSingleDay={isSingleDay} startDate={localStartDate} endDate={endDay} />
-      </span>
-      <span className={css.itemValue}>{unitCountMessage}</span>
-    </div>
+    <>
+      <div className={css.lineItem}>
+        <BookingPeriod startDate={localStartDate} endDate={endDay} dateType={dateType} />
+      </div>
+      <hr className={css.totalDivider} />
+    </>
   );
 };
+LineItemBookingPeriod.defaultProps = { dateType: null };
 
 LineItemBookingPeriod.propTypes = {
-  transaction: propTypes.transaction.isRequired,
   booking: propTypes.booking.isRequired,
+  dateType: propTypes.dateType,
 };
 
 export default LineItemBookingPeriod;

src/components/BookingBreakdown/LineItemSubTotalMaybe.js

@@ -81,12 +81,15 @@ const LineItemSubTotalMaybe = props => {
   const formattedSubTotal = subTotalLineItems.length > 0 ? formatMoney(intl, subTotal) : null;
 
   return formattedSubTotal && showSubTotal ? (
-    <div className={css.subTotalLineItem}>
-      <span className={css.itemLabel}>
-        <FormattedMessage id="BookingBreakdown.subTotal" />
-      </span>
-      <span className={css.itemValue}>{formattedSubTotal}</span>
-    </div>
+    <>
+      <hr className={css.totalDivider} />
+      <div className={css.subTotalLineItem}>
+        <span className={css.itemLabel}>
+          <FormattedMessage id="BookingBreakdown.subTotal" />
+        </span>
+        <span className={css.itemValue}>{formattedSubTotal}</span>
+      </div>
+    </>
   ) : null;
 };
 

src/components/BookingBreakdown/LineItemTotalPrice.js

@@ -31,10 +31,13 @@ const LineItemUnitPrice = props => {
   const formattedTotalPrice = formatMoney(intl, totalPrice);
 
   return (
-    <div className={css.lineItem}>
-      <div className={css.totalLabel}>{totalLabel}</div>
-      <div className={css.totalPrice}>{formattedTotalPrice}</div>
-    </div>
+    <>
+      <hr className={css.totalDivider} />
+      <div className={css.lineItemTotal}>
+        <div className={css.totalLabel}>{totalLabel}</div>
+        <div className={css.totalPrice}>{formattedTotalPrice}</div>
+      </div>
+    </>
   );
 };
 

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

@@ -4,43 +4,70 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
 <div
   className=""
 >
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span>
-      10
-    </span>
-  </div>
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
-          }
-        }
-      />
-    </span>
-  </div>
-  <hr />
-  <div>
+  Array [
     <div>
+      <div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingStart
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingEnd
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>,
+    <hr />,
+  ]
+  <div>
+    <span>
       <span>
-        BookingBreakdown.total
+        BookingBreakdown.baseUnitNight
       </span>
-    </div>
-    <div>
+    </span>
+    <span>
       20
-    </div>
+    </span>
   </div>
+  Array [
+    <hr />,
+    <div>
+      <div>
+        <span>
+          BookingBreakdown.total
+        </span>
+      </div>
+      <div>
+        20
+      </div>
+    </div>,
+  ]
 </div>
 `;
 
@@ -48,43 +75,70 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
 <div
   className=""
 >
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span>
-      10
-    </span>
-  </div>
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
-          }
-        }
-      />
-    </span>
-  </div>
-  <hr />
-  <div>
+  Array [
     <div>
+      <div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingStart
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingEnd
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>,
+    <hr />,
+  ]
+  <div>
+    <span>
       <span>
-        BookingBreakdown.total
+        BookingBreakdown.baseUnitNight
       </span>
-    </div>
-    <div>
+    </span>
+    <span>
       20
-    </div>
+    </span>
   </div>
+  Array [
+    <hr />,
+    <div>
+      <div>
+        <span>
+          BookingBreakdown.total
+        </span>
+      </div>
+      <div>
+        20
+      </div>
+    </div>,
+  ]
 </div>
 `;
 
@@ -92,42 +146,70 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
 <div
   className=""
 >
+  Array [
+    <div>
+      <div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingStart
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingEnd
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>,
+    <hr />,
+  ]
   <div>
     <span>
       <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span>
-      10
-    </span>
-  </div>
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
-          }
-        }
-      />
-    </span>
-  </div>
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.subTotal
+        BookingBreakdown.baseUnitNight
       </span>
     </span>
     <span>
       20
     </span>
   </div>
+  Array [
+    <hr />,
+    <div>
+      <span>
+        <span>
+          BookingBreakdown.subTotal
+        </span>
+      </span>
+      <span>
+        20
+      </span>
+    </div>,
+  ]
   <div>
     <span>
       <span>
@@ -158,17 +240,19 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
       2
     </span>
   </div>
-  <hr />
-  <div>
+  Array [
+    <hr />,
     <div>
-      <span>
-        BookingBreakdown.providerTotalCanceled
-      </span>
-    </div>
-    <div>
-      0
-    </div>
-  </div>
+      <div>
+        <span>
+          BookingBreakdown.providerTotalCanceled
+        </span>
+      </div>
+      <div>
+        0
+      </div>
+    </div>,
+  ]
   <span>
     <span>
       BookingBreakdown.commissionFeeNote
@@ -181,42 +265,70 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
 <div
   className=""
 >
+  Array [
+    <div>
+      <div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingStart
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+        <div>
+          <div>
+            <span>
+              BookingBreakdown.bookingEnd
+            </span>
+          </div>
+          <div>
+            <span>
+              Sat 12:00 PM
+            </span>
+          </div>
+          <div>
+            <span>
+              Jun 10
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>,
+    <hr />,
+  ]
   <div>
     <span>
       <span>
-        BookingBreakdown.pricePerNight
-      </span>
-    </span>
-    <span>
-      10
-    </span>
-  </div>
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.bookingPeriod
-      </span>
-    </span>
-    <span>
-      <span
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "BookingBreakdown.nightCount",
-          }
-        }
-      />
-    </span>
-  </div>
-  <div>
-    <span>
-      <span>
-        BookingBreakdown.subTotal
+        BookingBreakdown.baseUnitNight
       </span>
     </span>
     <span>
       20
     </span>
   </div>
+  Array [
+    <hr />,
+    <div>
+      <span>
+        <span>
+          BookingBreakdown.subTotal
+        </span>
+      </span>
+      <span>
+        20
+      </span>
+    </div>,
+  ]
   <div>
     <span>
       <span>
@@ -227,17 +339,19 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
       -2
     </span>
   </div>
-  <hr />
-  <div>
+  Array [
+    <hr />,
     <div>
-      <span>
-        BookingBreakdown.providerTotalDefault
-      </span>
-    </div>
-    <div>
-      18
-    </div>
-  </div>
+      <div>
+        <span>
+          BookingBreakdown.providerTotalDefault
+        </span>
+      </div>
+      <div>
+        18
+      </div>
+    </div>,
+  ]
   <span>
     <span>
       BookingBreakdown.commissionFeeNote

src/components/BookingTimeInfo/BookingTimeInfo.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { bool, oneOf } from 'prop-types';
+import { bool } from 'prop-types';
 import classNames from 'classnames';
 import { txIsEnquired } from '../../util/transaction';
 import { dateFromAPIToLocalNoon, daysBetween, formatDateToText } from '../../util/dates';
@@ -90,7 +90,7 @@ BookingTimeInfoComponent.propTypes = {
   isOrder: bool.isRequired,
   tx: propTypes.transaction.isRequired,
   unitType: propTypes.bookingUnitType.isRequired,
-  dateType: oneOf(DATE_TYPE_DATE, DATE_TYPE_DATETIME),
+  dateType: propTypes.dateType,
 };
 
 const BookingTimeInfo = injectIntl(BookingTimeInfoComponent);

src/components/TransactionPanel/BreakdownMaybe.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage } from '../../util/reactIntl';
 import classNames from 'classnames';
 import config from '../../config';
+import { DATE_TYPE_DATE } from '../../util/types';
 import { BookingBreakdown } from '../../components';
 
 import css from './TransactionPanel.css';
@@ -16,15 +16,13 @@ const BreakdownMaybe = props => {
 
   return loaded ? (
     <div className={classes}>
-      <h3 className={css.bookingBreakdownTitle}>
-        <FormattedMessage id="TransactionPanel.bookingBreakdownTitle" />
-      </h3>
       <BookingBreakdown
         className={breakdownClasses}
         userRole={transactionRole}
         unitType={config.bookingUnitType}
         transaction={transaction}
         booking={transaction.booking}
+        dateType={DATE_TYPE_DATE}
       />
     </div>
   ) : null;

src/containers/CheckoutPage/CheckoutPage.js

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import config from '../../config';
 import routeConfiguration from '../../routeConfiguration';
 import { pathByRouteName, findRouteByRouteName } from '../../util/routes';
-import { propTypes, LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types';
+import { propTypes, LINE_ITEM_NIGHT, LINE_ITEM_DAY, DATE_TYPE_DATE } from '../../util/types';
 import {
   ensureListing,
   ensureCurrentUser,
@@ -586,6 +586,7 @@ export class CheckoutPageComponent extends Component {
           unitType={config.bookingUnitType}
           transaction={tx}
           booking={txBooking}
+          dateType={DATE_TYPE_DATE}
         />
       ) : null;
 
@@ -769,9 +770,6 @@ export class CheckoutPageComponent extends Component {
             </div>
 
             <div className={css.priceBreakdownContainer}>
-              <h3 className={css.priceBreakdownTitle}>
-                <FormattedMessage id="CheckoutPage.priceBreakdownTitle" />
-              </h3>
               {speculateTransactionErrorMessage}
               {breakdown}
             </div>
@@ -837,9 +835,6 @@ export class CheckoutPageComponent extends Component {
               <h2 className={css.detailsTitle}>{listingTitle}</h2>
               <p className={css.detailsSubtitle}>{detailsSubTitle}</p>
             </div>
-            <h3 className={css.bookingBreakdownTitle}>
-              <FormattedMessage id="CheckoutPage.priceBreakdownTitle" />
-            </h3>
             {speculateTransactionErrorMessage}
             {breakdown}
           </div>

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

@@ -77,14 +77,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
           />
         </div>
       </div>
-      <div>
-        <h3>
-          <FormattedMessage
-            id="CheckoutPage.priceBreakdownTitle"
-            values={Object {}}
-          />
-        </h3>
-      </div>
+      <div />
       <section>
         <injectIntl(StripePaymentForm)
           authorDisplayName="author display name"
@@ -154,12 +147,6 @@ exports[`CheckoutPage matches snapshot 1`] = `
           55 CheckoutPage.perNight
         </p>
       </div>
-      <h3>
-        <FormattedMessage
-          id="CheckoutPage.priceBreakdownTitle"
-          values={Object {}}
-        />
-      </h3>
     </div>
   </div>
 </Page>

src/forms/BookingDatesForm/EstimatedBreakdownMaybe.js

@@ -31,7 +31,7 @@ import Decimal from 'decimal.js';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { dateFromLocalToAPI, nightsBetween, daysBetween } from '../../util/dates';
 import { TRANSITION_REQUEST_PAYMENT, TX_TRANSITION_ACTOR_CUSTOMER } from '../../util/transaction';
-import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS } from '../../util/types';
+import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS, DATE_TYPE_DATE } from '../../util/types';
 import { unitDivisor, convertMoneyToNumber, convertUnitToSubUnit } from '../../util/currency';
 import { BookingBreakdown } from '../../components';
 
@@ -136,6 +136,7 @@ const EstimatedBreakdownMaybe = props => {
       unitType={unitType}
       transaction={tx}
       booking={tx.booking}
+      dateType={DATE_TYPE_DATE}
     />
   );
 };

src/marketplaceFonts.css

@@ -32,6 +32,13 @@
     }
   }
 
+  --marketplaceSmallFontStyles: {
+    font-family: 'sofiapro', Helvetica, Arial, sans-serif;
+    font-weight: var(--fontWeightMedium);
+    font-size: 15px;
+    line-height: 24px;
+  }
+
   /* ================ Body font ================ */
 
   --marketplaceBodyFontStyles: {

src/translations/en.json

@@ -37,7 +37,11 @@
   "AuthenticationPage.verifyEmailTitle": "{name}, check your inbox to verify your email",
   "Avatar.bannedUserDisplayName": "Banned user",
   "Avatar.deletedUserDisplayName": "Deleted user",
-  "BookingBreakdown.bookingPeriod": "{bookingStart} – {bookingEnd}",
+  "BookingBreakdown.baseUnitDay": "{unitPrice} * {quantity, number} {quantity, plural, one {day} other {days}}",
+  "BookingBreakdown.baseUnitNight": "{unitPrice} * {quantity, number} {quantity, plural, one {night} other {nights}}",
+  "BookingBreakdown.baseUnitQuantity": "{unitPrice} * {quantity, number} {quantity, plural, one {person} other {persons}}",
+  "BookingBreakdown.bookingEnd": "Booking end",
+  "BookingBreakdown.bookingStart": "Booking start",
   "BookingBreakdown.commission": "Saunatime fee *",
   "BookingBreakdown.commissionFeeNote": "* The fee helps us run the platform and provide the best possible service to you!",
   "BookingBreakdown.dayCount": "{count, number} {count, plural, one {day} other {days}}",

src/util/types.js

@@ -496,8 +496,10 @@ propTypes.error = shape({
   apiErrors: arrayOf(propTypes.apiError),
 });
 
-export { propTypes };
-
 // Options for showing just date or date and time on BookingTimeInfo and BookingBreakdown
 export const DATE_TYPE_DATE = 'date';
 export const DATE_TYPE_DATETIME = 'datetime';
+
+propTypes.dateType = oneOf([DATE_TYPE_DATE, DATE_TYPE_DATETIME]);
+
+export { propTypes };