From 4663f825a161f7eaee13e0ec058cbadb82ffb59a Mon Sep 17 00:00:00 2001 From: Hannu Lyytikainen Date: Tue, 18 Dec 2018 09:54:30 +0200 Subject: [PATCH] Change checkout page booking sub title Unify the sub title with transaction page. --- src/containers/CheckoutPage/CheckoutPage.css | 5 ++-- src/containers/CheckoutPage/CheckoutPage.js | 26 ++++++++++++++----- .../__snapshots__/CheckoutPage.test.js.snap | 9 +------ src/translations/en.json | 3 +++ src/translations/fr.json | 5 +++- 5 files changed, 29 insertions(+), 19 deletions(-) diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css index acd516f3..efab0ca5 100644 --- a/src/containers/CheckoutPage/CheckoutPage.css +++ b/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; } } diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js index 79bd7539..fb3fabb5 100644 --- a/src/containers/CheckoutPage/CheckoutPage.js +++ b/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 { ); + 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 {

{listingTitle}

-

- -

+

{detailsSubTitle}

diff --git a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap index 9b19a805..0002043f 100644 --- a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap +++ b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap @@ -135,14 +135,7 @@ exports[`CheckoutPage matches snapshot 1`] = ` listing1 title

- + 55 CheckoutPage.perNight

diff --git a/src/translations/en.json b/src/translations/en.json index ac9a21e5..a18827ba 100644 --- a/src/translations/en.json +++ b/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.", diff --git a/src/translations/fr.json b/src/translations/fr.json index 18fb37ec..b97c7fff 100644 --- a/src/translations/fr.json +++ b/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",