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 {
-
{detailsSubTitle}
-