Unify listing info sub titles

sharetribe · Dec 17, 2018 · 8e5b63c · 8e5b63c
1 parent 099274f
commit 8e5b63c
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 24 deletions.
diff --git a/src/components/TransactionPanel/TransactionPanel.css b/src/components/TransactionPanel/TransactionPanel.css
@@ -214,13 +214,12 @@
 
 .detailCardSubtitle {
   @apply --marketplaceH5FontStyles;
-  color: var(--matterColorAnti);
 
   margin-top: 0;
   margin-bottom: 0;
 
   @media (--viewportLarge) {
-    margin-top: 1px;
+    margin-top: 9px;
     margin-bottom: 0;
   }
 }

diff --git a/src/components/TransactionPanel/TransactionPanel.helpers.js b/src/components/TransactionPanel/TransactionPanel.helpers.js
@@ -154,17 +154,15 @@ const createListingLink = (listing, label, searchParams = {}, className = '') =>
 
 // Functional component as a helper to build detail card headings
 export const DetailCardHeadingsMaybe = props => {
-  const { authorDisplayName, transaction, transactionRole, listing, listingTitle } = props;
+  const { transaction, transactionRole, listing, listingTitle, subTitle } = props;
 
   const isCustomer = transactionRole === 'customer';
   const canShowDetailCardHeadings = isCustomer && !txIsEnquired(transaction);
 
   return canShowDetailCardHeadings ? (
     <div className={css.detailCardHeadings}>
       <h2 className={css.detailCardTitle}>{listingTitle}</h2>
-      <p className={css.detailCardSubtitle}>
-        <FormattedMessage id="TransactionPanel.hostedBy" values={{ name: authorDisplayName }} />
-      </p>
+      <p className={css.detailCardSubtitle}>{subTitle}</p>
       <AddressLinkMaybe
         transaction={transaction}
         transactionRole={transactionRole}
@@ -182,6 +180,7 @@ export const BookingPanelMaybe = props => {
     transactionRole,
     listing,
     listingTitle,
+    subTitle,
     provider,
     onManageDisableScrolling,
     timeSlots,
@@ -200,6 +199,7 @@ export const BookingPanelMaybe = props => {
       listing={listing}
       handleBookingSubmit={() => console.log('submit')}
       title={listingTitle}
+      subTitle={subTitle}
       authorDisplayName={authorDisplayName}
       onManageDisableScrolling={onManageDisableScrolling}
       timeSlots={timeSlots}

diff --git a/src/components/TransactionPanel/TransactionPanel.js b/src/components/TransactionPanel/TransactionPanel.js
@@ -2,11 +2,13 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import { txIsRequested, propTypes } from '../../util/types';
+import { txIsRequested, LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
 import { ensureListing, ensureTransaction, ensureUser } from '../../util/data';
 import { isMobileSafari } from '../../util/userAgent';
+import { formatMoney } from '../../util/currency';
 import { AvatarMedium, AvatarLarge, ResponsiveImage, ReviewModal } from '../../components';
 import { SendMessageForm } from '../../forms';
+import config from '../../config';
 
 // These are internal components that make this file more readable.
 import {
@@ -164,6 +166,20 @@ export class TransactionPanelComponent extends Component {
       ? deletedListingTitle
       : currentListing.attributes.title;
 
+    const unitType = config.bookingUnitType;
+    const isNightly = unitType === LINE_ITEM_NIGHT;
+    const isDaily = unitType === LINE_ITEM_DAY;
+
+    const unitTranslationKey = isNightly
+      ? 'TransactionPanel.perNight'
+      : isDaily
+      ? 'TransactionPanel.perDay'
+      : 'TransactionPanel.perUnit';
+
+    const price = currentListing.attributes.price;
+    const formattedPrice = formatMoney(intl, price);
+    const bookingSubTitle = `${formattedPrice} ${intl.formatMessage({ id: unitTranslationKey })}`;
+
     const firstImage =
       currentListing.images && currentListing.images.length > 0 ? currentListing.images[0] : null;
 
@@ -300,18 +316,19 @@ export class TransactionPanelComponent extends Component {
               ) : null}
 
               <DetailCardHeadingsMaybe
-                authorDisplayName={authorDisplayName}
                 transaction={currentTransaction}
                 transactionRole={transactionRole}
                 listing={currentListing}
                 listingTitle={listingTitle}
+                subTitle={bookingSubTitle}
               />
               <BookingPanelMaybe
                 authorDisplayName={authorDisplayName}
                 transaction={currentTransaction}
                 transactionRole={transactionRole}
                 listing={currentListing}
                 listingTitle={listingTitle}
+                subTitle={bookingSubTitle}
                 provider={currentProvider}
                 onManageDisableScrolling={onManageDisableScrolling}
                 timeSlots={timeSlots}