Change checkout page booking sub title

Unify the sub title with transaction page.

src/containers/CheckoutPage/CheckoutPage.css

@@ -310,13 +310,12 @@
 
   @media (--viewportLarge) {
     margin-top: 17px;
-    margin-bottom: 0;
+    margin-bottom: 9px;
   }
 }
 
 .detailsSubtitle {
   @apply --marketplaceH5FontStyles;
-  color: var(--matterColorAnti);
 
   /* Reset margins from font styles */
   margin-top: 0;
@@ -336,7 +335,7 @@
   margin: 5px 24px 25px 24px;
 
   @media (--viewportLarge) {
-    margin: 38px 48px 26px 48px;
+    margin: 37px 48px 26px 48px;
   }
 }
 

src/containers/CheckoutPage/CheckoutPage.js

@@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';
 import { pathByRouteName, findRouteByRouteName } from '../../util/routes';
-import { propTypes } from '../../util/types';
+import { propTypes, LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types';
 import { ensureListing, ensureUser, ensureTransaction, ensureBooking } from '../../util/data';
 import { dateFromLocalToAPI } from '../../util/dates';
 import { createSlug } from '../../util/urlHelpers';
@@ -19,6 +19,7 @@ import {
   isTransactionZeroPaymentError,
   transactionInitiateOrderStripeErrors,
 } from '../../util/errors';
+import { formatMoney } from '../../util/currency';
 import {
   AvatarMedium,
   BookingBreakdown,
@@ -163,6 +164,8 @@ export class CheckoutPageComponent extends Component {
       bookingEnd: speculatedTransaction.booking.attributes.end,
     };
 
+    // if an enquired transactioni is available, use that as basis
+    // otherwise initiate a new transaction
     const initiateRequest = enquiredTransaction
       ? sendOrderRequestAfterEnquiry(enquiredTransaction.id, requestParams)
       : sendOrderRequest(requestParams, initialMessage);
@@ -385,6 +388,20 @@ export class CheckoutPageComponent extends Component {
       </div>
     );
 
+    const unitType = config.bookingUnitType;
+    const isNightly = unitType === LINE_ITEM_NIGHT;
+    const isDaily = unitType === LINE_ITEM_DAY;
+
+    const unitTranslationKey = isNightly
+      ? 'CheckoutPage.perNight'
+      : isDaily
+      ? 'CheckoutPage.perDay'
+      : 'CheckoutPage.perUnit';
+
+    const price = currentListing.attributes.price;
+    const formattedPrice = formatMoney(intl, price);
+    const detailsSubTitle = `${formattedPrice} ${intl.formatMessage({ id: unitTranslationKey })}`;
+
     const showInitialMessageInput = !enquiredTransaction;
 
     const pageProps = { title, scrollingDisabled };
@@ -466,12 +483,7 @@ export class CheckoutPageComponent extends Component {
             </div>
             <div className={css.detailsHeadings}>
               <h2 className={css.detailsTitle}>{listingTitle}</h2>
-              <p className={css.detailsSubtitle}>
-                <FormattedMessage
-                  id="CheckoutPage.hostedBy"
-                  values={{ name: currentAuthor.attributes.profile.displayName }}
-                />
-              </p>
+              <p className={css.detailsSubtitle}>{detailsSubTitle}</p>
             </div>
             <h3 className={css.bookingBreakdownTitle}>
               <FormattedMessage id="CheckoutPage.priceBreakdownTitle" />

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

@@ -135,14 +135,7 @@ exports[`CheckoutPage matches snapshot 1`] = `
           listing1 title
         </h2>
         <p>
-          <FormattedMessage
-            id="CheckoutPage.hostedBy"
-            values={
-              Object {
-                "name": "author display name",
-              }
-            }
-          />
+          55 CheckoutPage.perNight
         </p>
       </div>
       <h3>

src/translations/en.json

@@ -84,6 +84,9 @@
   "CheckoutPage.listingNotFoundError": "Unfortunately, the listing is no longer available.",
   "CheckoutPage.loadingData": "Loading checkout data…",
   "CheckoutPage.paymentInfo": "You'll only be charged if your request is accepted by the provider.",
+  "CheckoutPage.perDay": "per day",
+  "CheckoutPage.perNight": "per night",
+  "CheckoutPage.perUnit": "per unit",
   "CheckoutPage.priceBreakdownTitle": "Booking breakdown",
   "CheckoutPage.providerStripeAccountMissingError": "The listing author has not added their payment information and the listing cannot be booked at the moment.",
   "CheckoutPage.speculateFailedMessage": "Oops, something went wrong. Please refresh the page and try again.",

src/translations/fr.json

@@ -84,6 +84,9 @@
   "CheckoutPage.listingNotFoundError": "Hélas, cette annonce n'est plus disponible.",
   "CheckoutPage.loadingData": "Chargement des données de paiement…",
   "CheckoutPage.paymentInfo": "Vous ne serez facturé que si votre demande est acceptée par l'hôte.",
+  "CheckoutPage.perDay": "par jour",
+  "CheckoutPage.perNight": "par nuit",
+  "CheckoutPage.perUnit": "per unit",
   "CheckoutPage.priceBreakdownTitle": "Détails de la réservation",
   "CheckoutPage.providerStripeAccountMissingError": "L'auteur de l'annonce n'a pas ajouté ses coordonnées bancaires et l'annonce ne peut pas être réserver pour le moment.",
   "CheckoutPage.speculateFailedMessage": "Oups, quelque chose n'a pas fonctionné. Veuillez rafraichir la page et essayer de nouveau.",
@@ -786,7 +789,7 @@
   "TransactionPanel.orderPreauthorizedInfo": "{providerName} a reçu un message à propos de votre demande de réservation.",
   "TransactionPanel.orderPreauthorizedSubtitle": "Vous avez fait une demande de réservation {listingLink}.",
   "TransactionPanel.orderPreauthorizedTitle": "Bravo, {customerName} !",
-  "TransactionPanel.perDay": "per day",
+  "TransactionPanel.perDay": "par jour",
   "TransactionPanel.perNight": "par nuit",
   "TransactionPanel.perUnit": "per unit",
   "TransactionPanel.requestToBook": "Réserver",