Use BookingTimeInfo on InboxPage

sharetribe · Sep 9, 2019 · 3cc7fb2 · 3cc7fb2
1 parent 2526d53
commit 3cc7fb2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 70 deletions.
diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
@@ -284,27 +284,6 @@
   }
 }
 
-.itemTimestamp {
-  /* Font */
-  @apply --marketplaceH5FontStyles;
-
-  margin-top: 0px;
-  margin-bottom: 0px;
-  @media (--viewportMedium) {
-    margin-top: 4px;
-    margin-bottom: 0;
-  }
-}
-
-.itemPrice {
-  &::before {
-    font-size: 10px;
-    margin: 0 6px;
-    display: inline-block;
-    content: '\25CF'; /* middot */
-  }
-}
-
 .itemState {
   /* Font */
   @apply --marketplaceH5FontStyles;

diff --git a/src/containers/InboxPage/InboxPage.js b/src/containers/InboxPage/InboxPage.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { arrayOf, bool, number, oneOf, shape, string } from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from '../../util/reactIntl';
-import moment from 'moment';
 import classNames from 'classnames';
 import {
   txIsAccepted,
@@ -15,14 +14,13 @@ import {
   txIsPaymentExpired,
   txIsPaymentPending,
 } from '../../util/transaction';
-import { LINE_ITEM_DAY, LINE_ITEM_UNITS, propTypes } from '../../util/types';
-import { formatMoney } from '../../util/currency';
+import { propTypes } from '../../util/types';
 import { ensureCurrentUser } from '../../util/data';
-import { dateFromAPIToLocalNoon, daysBetween } from '../../util/dates';
 import { getMarketplaceEntities } from '../../ducks/marketplaceData.duck';
 import { isScrollingDisabled } from '../../ducks/UI.duck';
 import {
   Avatar,
+  BookingTimeInfo,
   NamedLink,
   NotificationBadge,
   Page,
@@ -43,8 +41,6 @@ import config from '../../config';
 import { loadData } from './InboxPage.duck';
 import css from './InboxPage.css';
 
-const { arrayOf, bool, number, oneOf, shape, string } = PropTypes;
-
 const formatDate = (intl, date) => {
   return {
     short: intl.formatDate(date, {
@@ -157,33 +153,7 @@ export const txState = (intl, tx, type) => {
   }
 };
 
-const bookingData = (unitType, tx, isOrder, intl) => {
-  // 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
-  // where there are preparation time needed between bookings.
-  // Read more: https://www.sharetribe.com/api-reference/#bookings
-  const { start, end, displayStart, displayEnd } = tx.booking.attributes;
-  const startDate = dateFromAPIToLocalNoon(displayStart || start);
-  const endDateRaw = dateFromAPIToLocalNoon(displayEnd || end);
-  const isDaily = unitType === LINE_ITEM_DAY;
-  const isUnits = unitType === LINE_ITEM_UNITS;
-  const isSingleDay = isDaily && daysBetween(startDate, endDateRaw) === 1;
-  const bookingStart = formatDate(intl, startDate);
-
-  // Shift the exclusive API end date with daily bookings
-  const endDate =
-    isDaily || isUnits
-      ? moment(endDateRaw)
-          .subtract(1, 'days')
-          .toDate()
-      : endDateRaw;
-  const bookingEnd = formatDate(intl, endDate);
-  const bookingPrice = isOrder ? tx.attributes.payinTotal : tx.attributes.payoutTotal;
-  const price = formatMoney(intl, bookingPrice);
-  return { bookingStart, bookingEnd, price, isSingleDay };
-};
-
-// Functional component as internal helper to print BookingInfo if that is needed
+// Functional component as internal helper to print BookingTimeInfo if that is needed
 const BookingInfoMaybe = props => {
   const { bookingClassName, isOrder, intl, tx, unitType } = props;
   const isEnquiry = txIsEnquired(tx);
@@ -192,14 +162,14 @@ const BookingInfoMaybe = props => {
     return null;
   }
 
-  const { bookingStart, bookingEnd, price, isSingleDay } = bookingData(unitType, tx, isOrder, intl);
-  const dateInfo = isSingleDay ? bookingStart.short : `${bookingStart.short} - ${bookingEnd.short}`;
-
   return (
-    <div className={classNames(css.bookingInfo, bookingClassName)}>
-      {dateInfo}
-      <span className={css.itemPrice}>{price}</span>
-    </div>
+    <BookingTimeInfo
+      bookingClassName={bookingClassName}
+      isOrder={isOrder}
+      intl={intl}
+      tx={tx}
+      unitType={unitType}
+    />
   );
 };
 

diff --git a/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap b/src/containers/InboxPage/__snapshots__/InboxPage.test.js.snap
@@ -429,10 +429,7 @@ exports[`InboxPage matches snapshot 2`] = `
       <div
         className=""
       >
-        2017-02-15 - 2017-02-16
-        <span>
-          10
-        </span>
+        Feb 15 - Feb 16
       </div>
     </div>
     <div>
@@ -883,10 +880,7 @@ exports[`InboxPage matches snapshot 4`] = `
       <div
         className=""
       >
-        2017-02-15 - 2017-02-16
-        <span>
-          9
-        </span>
+        Feb 15 - Feb 16
       </div>
     </div>
     <div>