diff --git a/CHANGELOG.md b/CHANGELOG.md index 658a164a..396cece8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern: ## Upcoming version 2019-XX-XX +- [change] Change the design of `BookingBreakdown` and add options to show only dates or booking + date and time there. [#1195](https://github.com/sharetribe/flex-template-web/pull/1195) - [change] Move `BookingTimeInfo` to separate component from `InboxPage`. Add options to show only booking dates or booking dates and times. [#1194](https://github.com/sharetribe/flex-template-web/pull/1194) diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css index 5b22fe6e..443b6edf 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.css +++ b/src/components/BookingBreakdown/BookingBreakdown.css @@ -11,20 +11,11 @@ .lineItem { @apply --marketplaceH4FontStyles; - - /* Since the line items have different font sizes in the label and the - value columns, we have to balance the line to align to the - baseline. */ - margin: -1px 0 0 0; + margin: 0; @media (--viewportMedium) { - margin: -1px 0 8px 0; - - &:last-of-type { - /* Last item should not have bottom margin that goes to the bottom of - the component */ - margin-bottom: 0; - } + padding-top: 6px; + padding-bottom: 2px; } display: flex; @@ -32,14 +23,48 @@ justify-content: space-between; } +.bookingPeriod { + flex: 1 1; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-bottom: 6px; + + @media (--viewportMedium) { + padding-bottom: 8px; + } +} + +.bookingPeriodSectionRigth { + text-align: right; +} + +.dayLabel { + @apply --marketplaceH5FontStyles; + margin: 0; + color: var(--matterColorAnti); + line-height: 24px; + padding-top: 2px; + padding-bottom: 4px; + + @media (--viewportMedium) { + padding-top: 1px; + padding-bottom: 7px; + } +} + +.dayInfo { + @apply --marketplaceButtonFontStyles; +} + .subTotalLineItem { @apply --marketplaceH4FontStyles; font-weight: var(--fontWeightBold); - - margin: 4px 0 1px 0; + margin: 0; + padding: 5px 0 1px 0; @media (--viewportMedium) { - margin: 6px 0 9px 0; + padding: 6px 0 2px 0; } display: flex; @@ -47,72 +72,65 @@ justify-content: space-between; } +.lineItemTotal { + @apply --marketplaceH4FontStyles; + margin: 0; + padding-top: 6px; + padding-bottom: 6px; + + display: flex; + flex-direction: row; + align-items: flex-end; + justify-content: space-between; + + @media (--viewportMedium) { + padding-bottom: 2px; + } +} .itemLabel { + @apply --marketplaceSmallFontStyles; flex: 1; - margin-top: 1px; /* align with baseline */ } .itemValue { - @apply --marketplaceH4FontStyles; - font-weight: 600; + @apply --marketplaceSmallFontStyles; margin: 0 0 0 10px; - - @media (--viewportMedium) { - font-weight: 700; - margin: 0 0 0 10px; - } } .totalDivider { /* dimensions */ width: 100%; height: 1px; - margin: 13px 0 4px 0; + margin: 12px 0 5px 0; border: none; background-color: var(--matterColorNegative); @media (--viewportMedium) { - margin: 2px 0 14px 0; + margin: 7px 0 0px 0; } } .totalLabel { - font-weight: var(--fontWeightSemiBold); - - /* Move so that baseline aligns with the total price */ - padding-top: 6px; - - @media (--viewportMedium) { - padding-top: 8px; - } + font-weight: var(--fontWeightNormal); } .totalPrice { - @apply --marketplaceBodyFontStyles; - font-weight: var(--fontWeightSemiBold); + @apply --marketplaceButtonFontStyles; margin: 0 0 0 10px; - padding-top: 4px; - - @media (--viewportMedium) { - margin: 2px 0 0 10px; - padding-top: 0; - } + padding-top: 0px; } .feeInfo { @apply --marketplaceTinyFontStyles; - color: var(--matterColorAnti); - margin: 0 0 20px 0; flex-shrink: 0; + margin: 0; + color: var(--matterColorAnti); + padding-top: 4px; + padding-bottom: 14px; @media (--viewportMedium) { - margin-top: auto; - margin-bottom: 20px; - } - - @media (--viewportLarge) { - margin-top: 4px; - margin-bottom: 22px; + padding-top: 11px; + padding-bottom: 21px; } } diff --git a/src/components/BookingBreakdown/BookingBreakdown.example.js b/src/components/BookingBreakdown/BookingBreakdown.example.js index 271536f5..04c4f8aa 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.example.js +++ b/src/components/BookingBreakdown/BookingBreakdown.example.js @@ -10,7 +10,13 @@ import { TRANSITION_CONFIRM_PAYMENT, TX_TRANSITION_ACTOR_CUSTOMER, } from '../../util/transaction'; -import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS } from '../../util/types'; +import { + LINE_ITEM_DAY, + LINE_ITEM_NIGHT, + LINE_ITEM_UNITS, + DATE_TYPE_DATE, + DATE_TYPE_DATETIME, +} from '../../util/types'; import config from '../../config'; import BookingBreakdown from './BookingBreakdown'; @@ -60,6 +66,7 @@ export const Checkout = { props: { userRole: 'customer', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(9000, CURRENCY), payoutTotal: new Money(9000, CURRENCY), @@ -86,6 +93,7 @@ export const CustomerOrder = { props: { userRole: 'customer', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(9000, CURRENCY), payoutTotal: new Money(9000, CURRENCY), @@ -112,6 +120,7 @@ export const ProviderSale = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(9000, CURRENCY), payoutTotal: new Money(7000, CURRENCY), @@ -145,6 +154,7 @@ export const ProviderSaleZeroCommission = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(9000, CURRENCY), payoutTotal: new Money(9000, CURRENCY), @@ -178,6 +188,7 @@ export const ProviderSaleSingleNight = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATE, transaction: exampleTransaction({ payinTotal: new Money(4500, CURRENCY), payoutTotal: new Money(2500, CURRENCY), @@ -211,6 +222,7 @@ export const ProviderSalePreauthorized = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ lastTransition: TRANSITION_CONFIRM_PAYMENT, payinTotal: new Money(4500, CURRENCY), @@ -245,6 +257,7 @@ export const ProviderSaleAccepted = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ lastTransition: TRANSITION_ACCEPT, payinTotal: new Money(4500, CURRENCY), @@ -279,6 +292,7 @@ export const ProviderSaleDeclined = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ lastTransition: TRANSITION_DECLINE, payinTotal: new Money(4500, CURRENCY), @@ -313,6 +327,7 @@ export const ProviderSaleAutoDeclined = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ lastTransition: TRANSITION_EXPIRE, payinTotal: new Money(4500, CURRENCY), @@ -347,6 +362,7 @@ export const ProviderSaleDelivered = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ lastTransition: TRANSITION_COMPLETE, payinTotal: new Money(4500, CURRENCY), @@ -381,6 +397,7 @@ export const ProviderSaleCanceled = { props: { userRole: 'provider', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ lastTransition: TRANSITION_CANCEL, payinTotal: new Money(0, CURRENCY), @@ -432,6 +449,7 @@ export const SingleDay = { props: { userRole: 'customer', unitType: LINE_ITEM_DAY, + dateType: DATE_TYPE_DATE, transaction: exampleTransaction({ payinTotal: new Money(4500, CURRENCY), payoutTotal: new Money(4500, CURRENCY), @@ -458,6 +476,7 @@ export const MultipleDays = { props: { userRole: 'customer', unitType: LINE_ITEM_DAY, + dateType: DATE_TYPE_DATE, transaction: exampleTransaction({ payinTotal: new Money(9000, CURRENCY), payoutTotal: new Money(9000, CURRENCY), @@ -484,6 +503,7 @@ export const UnitsType = { props: { userRole: 'customer', unitType: LINE_ITEM_UNITS, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(9000, CURRENCY), payoutTotal: new Money(9000, CURRENCY), @@ -510,6 +530,7 @@ export const CustomPricing = { props: { userRole: 'customer', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(12800, CURRENCY), payoutTotal: new Money(12600, CURRENCY), @@ -560,6 +581,7 @@ export const CustomPricingWithRefund = { props: { userRole: 'customer', unitType: LINE_ITEM_NIGHT, + dateType: DATE_TYPE_DATETIME, transaction: exampleTransaction({ payinTotal: new Money(0, CURRENCY), payoutTotal: new Money(0, CURRENCY), diff --git a/src/components/BookingBreakdown/BookingBreakdown.js b/src/components/BookingBreakdown/BookingBreakdown.js index 6d5cee30..176d6867 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.js +++ b/src/components/BookingBreakdown/BookingBreakdown.js @@ -12,8 +12,8 @@ import { LINE_ITEM_PROVIDER_COMMISSION, } from '../../util/types'; -import LineItemUnitPriceMaybe from './LineItemUnitPriceMaybe'; import LineItemBookingPeriod from './LineItemBookingPeriod'; +import LineItemBasePriceMaybe from './LineItemBasePriceMaybe'; import LineItemUnitsMaybe from './LineItemUnitsMaybe'; import LineItemSubTotalMaybe from './LineItemSubTotalMaybe'; import LineItemCustomerCommissionMaybe from './LineItemCustomerCommissionMaybe'; @@ -27,7 +27,16 @@ import LineItemUnknownItemsMaybe from './LineItemUnknownItemsMaybe'; import css from './BookingBreakdown.css'; export const BookingBreakdownComponent = props => { - const { rootClassName, className, userRole, unitType, transaction, booking, intl } = props; + const { + rootClassName, + className, + userRole, + unitType, + transaction, + booking, + intl, + dateType, + } = props; const isCustomer = userRole === 'customer'; const isProvider = userRole === 'provider'; @@ -40,12 +49,49 @@ export const BookingBreakdownComponent = props => { const classes = classNames(rootClassName || css.root, className); + /** + * BookingBreakdown contains different line items: + * + * LineItemBookingPeriod: prints booking start and booking end types. Prop dateType + * determines if the date and time or only the date is shown + * + * LineItemUnitsMaybe: if he unitType is line-item/unit print the name and + * quantity of the unit + * + * LineItemBasePriceMaybe: prints the base price calculation for the listing, e.g. + * "$150.00 * 2 nights $300" + * + * LineItemUnitPriceMaybe: prints just the unit price, e.g. "Price per night $32.00". + * This line item is not used by default in the BookingBreakdown. + * + * LineItemUnknownItemsMaybe: prints the line items that are unknown. In ideal case there + * should not be unknown line items. If you are using custom pricing, you should create + * new custom line items if you need them. + * + * LineItemSubTotalMaybe: prints subtotal of line items before possible + * commission or refunds + * + * LineItemRefundMaybe: prints the amount of refund + * + * LineItemCustomerCommissionMaybe: prints the amount of customer commission + * The default transaction process used by FTW doesn't include the customer commission. + * + * LineItemCustomerCommissionRefundMaybe: prints the amount of refunded customer commission + * + * LineItemProviderCommissionMaybe: prints the amount of provider commission + * + * LineItemProviderCommissionRefundMaybe: prints the amount of refunded provider commission + * + * LineItemTotalPrice: prints total price of the transaction + * + */ + return (
- - + + { intl={intl} /> -
+ {hasCommissionLineItem ? ( @@ -89,7 +135,7 @@ export const BookingBreakdownComponent = props => { ); }; -BookingBreakdownComponent.defaultProps = { rootClassName: null, className: null }; +BookingBreakdownComponent.defaultProps = { rootClassName: null, className: null, dateType: null }; BookingBreakdownComponent.propTypes = { rootClassName: string, @@ -99,6 +145,7 @@ BookingBreakdownComponent.propTypes = { unitType: propTypes.bookingUnitType.isRequired, transaction: propTypes.transaction.isRequired, booking: propTypes.booking.isRequired, + dateType: propTypes.dateType, // from injectIntl intl: intlShape.isRequired, diff --git a/src/components/BookingBreakdown/BookingBreakdown.test.js b/src/components/BookingBreakdown/BookingBreakdown.test.js index 8d797c2c..07d3a3dd 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.test.js +++ b/src/components/BookingBreakdown/BookingBreakdown.test.js @@ -7,6 +7,7 @@ import { TRANSITION_CANCEL, TRANSITION_REQUEST_PAYMENT, TX_TRANSITION_ACTOR_CUSTOMER, + DATE_TYPE_DATE, } from '../../util/transaction'; import { LINE_ITEM_NIGHT } from '../../util/types'; import { BookingBreakdownComponent } from './BookingBreakdown'; @@ -42,6 +43,7 @@ describe('BookingBreakdown', () => { { { { { + const { transaction, unitType, intl } = props; + const isNightly = unitType === LINE_ITEM_NIGHT; + const isDaily = unitType === LINE_ITEM_DAY; + const translationKey = isNightly + ? 'BookingBreakdown.baseUnitNight' + : isDaily + ? 'BookingBreakdown.baseUnitDay' + : 'BookingBreakdown.baseUnitQuantity'; + + // Find correct line-item for given unitType prop. + // It should be one of the following: 'line-item/night, 'line-item/day', 'line-item/units', or 'line-item/time' + // These are defined in '../../util/types'; + const unitPurchase = transaction.attributes.lineItems.find( + item => item.code === unitType && !item.reversal + ); + + const quantity = unitPurchase ? unitPurchase.quantity.toString() : null; + const unitPrice = unitPurchase ? formatMoney(intl, unitPurchase.unitPrice) : null; + const total = unitPurchase ? formatMoney(intl, unitPurchase.lineTotal) : null; + + return quantity && total ? ( +
+ + + + {total} +
+ ) : null; +}; + +LineItemBasePriceMaybe.propTypes = { + transaction: propTypes.transaction.isRequired, + unitType: propTypes.bookingUnitType.isRequired, + intl: intlShape.isRequired, +}; + +export default LineItemBasePriceMaybe; diff --git a/src/components/BookingBreakdown/LineItemBookingPeriod.js b/src/components/BookingBreakdown/LineItemBookingPeriod.js index f76c3221..74c4e1e4 100644 --- a/src/components/BookingBreakdown/LineItemBookingPeriod.js +++ b/src/components/BookingBreakdown/LineItemBookingPeriod.js @@ -1,44 +1,63 @@ import React from 'react'; -import { FormattedMessage, FormattedHTMLMessage, FormattedDate } from '../../util/reactIntl'; +import { FormattedMessage, FormattedDate } from '../../util/reactIntl'; import moment from 'moment'; -import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types'; -import { daysBetween, dateFromAPIToLocalNoon } from '../../util/dates'; +import { LINE_ITEM_NIGHT, DATE_TYPE_DATE, propTypes } from '../../util/types'; +import { dateFromAPIToLocalNoon } from '../../util/dates'; import css from './BookingBreakdown.css'; const BookingPeriod = props => { - const { isSingleDay, startDate, endDate } = props; + const { startDate, endDate, dateType } = props; + + const timeFormatOptions = + dateType === DATE_TYPE_DATE + ? { + weekday: 'long', + } + : { + weekday: 'short', + hour: 'numeric', + minute: 'numeric', + }; + const dateFormatOptions = { - weekday: 'short', month: 'short', day: 'numeric', }; - if (isSingleDay) { - return ; - } - return ( - + <> +
+
+
+ +
+
+ +
+
- - ), - bookingEnd: ( - +
+
+ +
+
+ +
+
+ +
+
- - ), - }} - /> +
+
+
+ ); }; const LineItemBookingPeriod = props => { - const { transaction, booking, unitType } = props; + const { booking, unitType, dateType } = props; // 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 @@ -49,39 +68,22 @@ const LineItemBookingPeriod = props => { const localEndDateRaw = dateFromAPIToLocalNoon(displayEnd || end); const isNightly = unitType === LINE_ITEM_NIGHT; - const isDaily = unitType === LINE_ITEM_DAY; - - const dayCount = daysBetween(localStartDate, localEndDateRaw); - const isSingleDay = !isNightly && dayCount === 1; const endDay = isNightly ? localEndDateRaw : moment(localEndDateRaw).subtract(1, 'days'); - const unitPurchase = transaction.attributes.lineItems.find( - item => item.code === unitType && !item.reversal - ); - - const useQuantityForDayCount = isNightly || isDaily; - const count = useQuantityForDayCount && unitPurchase ? unitPurchase.quantity.toFixed() : dayCount; - - const unitCountMessage = ( - - ); - return ( -
- - - - {unitCountMessage} -
+ <> +
+ +
+
+ ); }; +LineItemBookingPeriod.defaultProps = { dateType: null }; LineItemBookingPeriod.propTypes = { - transaction: propTypes.transaction.isRequired, booking: propTypes.booking.isRequired, + dateType: propTypes.dateType, }; export default LineItemBookingPeriod; diff --git a/src/components/BookingBreakdown/LineItemSubTotalMaybe.js b/src/components/BookingBreakdown/LineItemSubTotalMaybe.js index f60da782..fdeaeb8f 100644 --- a/src/components/BookingBreakdown/LineItemSubTotalMaybe.js +++ b/src/components/BookingBreakdown/LineItemSubTotalMaybe.js @@ -81,12 +81,15 @@ const LineItemSubTotalMaybe = props => { const formattedSubTotal = subTotalLineItems.length > 0 ? formatMoney(intl, subTotal) : null; return formattedSubTotal && showSubTotal ? ( -
- - - - {formattedSubTotal} -
+ <> +
+
+ + + + {formattedSubTotal} +
+ ) : null; }; diff --git a/src/components/BookingBreakdown/LineItemTotalPrice.js b/src/components/BookingBreakdown/LineItemTotalPrice.js index 5a373a00..e5347a39 100644 --- a/src/components/BookingBreakdown/LineItemTotalPrice.js +++ b/src/components/BookingBreakdown/LineItemTotalPrice.js @@ -31,10 +31,13 @@ const LineItemUnitPrice = props => { const formattedTotalPrice = formatMoney(intl, totalPrice); return ( -
-
{totalLabel}
-
{formattedTotalPrice}
-
+ <> +
+
+
{totalLabel}
+
{formattedTotalPrice}
+
+ ); }; diff --git a/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap b/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap index da60e9fb..01b5d29b 100644 --- a/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap +++ b/src/components/BookingBreakdown/__snapshots__/BookingBreakdown.test.js.snap @@ -4,43 +4,70 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
-
- - - BookingBreakdown.pricePerNight - - - - 10 - -
-
- - - BookingBreakdown.bookingPeriod - - - - - -
-
-
+ Array [
+
+
+
+ + BookingBreakdown.bookingStart + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
+ + BookingBreakdown.bookingEnd + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
, +
, + ] +
+ - BookingBreakdown.total + BookingBreakdown.baseUnitNight -
-
+ + 20 -
+
+ Array [ +
, +
+
+ + BookingBreakdown.total + +
+
+ 20 +
+
, + ]
`; @@ -48,43 +75,70 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
-
- - - BookingBreakdown.pricePerNight - - - - 10 - -
-
- - - BookingBreakdown.bookingPeriod - - - - - -
-
-
+ Array [
+
+
+
+ + BookingBreakdown.bookingStart + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
+ + BookingBreakdown.bookingEnd + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
, +
, + ] +
+ - BookingBreakdown.total + BookingBreakdown.baseUnitNight -
-
+ + 20 -
+
+ Array [ +
, +
+
+ + BookingBreakdown.total + +
+
+ 20 +
+
, + ]
`; @@ -92,42 +146,70 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
+ Array [ +
+
+
+
+ + BookingBreakdown.bookingStart + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
+ + BookingBreakdown.bookingEnd + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
, +
, + ]
- BookingBreakdown.pricePerNight - - - - 10 - -
-
- - - BookingBreakdown.bookingPeriod - - - - - -
-
- - - BookingBreakdown.subTotal + BookingBreakdown.baseUnitNight 20
+ Array [ +
, +
+ + + BookingBreakdown.subTotal + + + + 20 + +
, + ]
@@ -158,17 +240,19 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1` 2
-
-
+ Array [ +
,
- - BookingBreakdown.providerTotalCanceled - -
-
- 0 -
-
+
+ + BookingBreakdown.providerTotalCanceled + +
+
+ 0 +
+
, + ] BookingBreakdown.commissionFeeNote @@ -181,42 +265,70 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
+ Array [ +
+
+
+
+ + BookingBreakdown.bookingStart + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
+ + BookingBreakdown.bookingEnd + +
+
+ + Sat 12:00 PM + +
+
+ + Jun 10 + +
+
+
+
, +
, + ]
- BookingBreakdown.pricePerNight - - - - 10 - -
-
- - - BookingBreakdown.bookingPeriod - - - - - -
-
- - - BookingBreakdown.subTotal + BookingBreakdown.baseUnitNight 20
+ Array [ +
, +
+ + + BookingBreakdown.subTotal + + + + 20 + +
, + ]
@@ -227,17 +339,19 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = ` -2
-
-
+ Array [ +
,
- - BookingBreakdown.providerTotalDefault - -
-
- 18 -
-
+
+ + BookingBreakdown.providerTotalDefault + +
+
+ 18 +
+
, + ] BookingBreakdown.commissionFeeNote diff --git a/src/components/BookingTimeInfo/BookingTimeInfo.js b/src/components/BookingTimeInfo/BookingTimeInfo.js index b90a4781..81b3cb97 100644 --- a/src/components/BookingTimeInfo/BookingTimeInfo.js +++ b/src/components/BookingTimeInfo/BookingTimeInfo.js @@ -1,6 +1,6 @@ import React from 'react'; import moment from 'moment'; -import { bool, oneOf } from 'prop-types'; +import { bool } from 'prop-types'; import classNames from 'classnames'; import { txIsEnquired } from '../../util/transaction'; import { dateFromAPIToLocalNoon, daysBetween, formatDateToText } from '../../util/dates'; @@ -90,7 +90,7 @@ BookingTimeInfoComponent.propTypes = { isOrder: bool.isRequired, tx: propTypes.transaction.isRequired, unitType: propTypes.bookingUnitType.isRequired, - dateType: oneOf(DATE_TYPE_DATE, DATE_TYPE_DATETIME), + dateType: propTypes.dateType, }; const BookingTimeInfo = injectIntl(BookingTimeInfoComponent); diff --git a/src/components/TransactionPanel/BreakdownMaybe.js b/src/components/TransactionPanel/BreakdownMaybe.js index 109af9ee..b64aa78f 100644 --- a/src/components/TransactionPanel/BreakdownMaybe.js +++ b/src/components/TransactionPanel/BreakdownMaybe.js @@ -1,7 +1,7 @@ import React from 'react'; -import { FormattedMessage } from '../../util/reactIntl'; import classNames from 'classnames'; import config from '../../config'; +import { DATE_TYPE_DATE } from '../../util/types'; import { BookingBreakdown } from '../../components'; import css from './TransactionPanel.css'; @@ -16,15 +16,13 @@ const BreakdownMaybe = props => { return loaded ? (
-

- -

) : null; diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js index 9f4ddfd7..797978c3 100644 --- a/src/containers/CheckoutPage/CheckoutPage.js +++ b/src/containers/CheckoutPage/CheckoutPage.js @@ -8,7 +8,7 @@ import classNames from 'classnames'; import config from '../../config'; import routeConfiguration from '../../routeConfiguration'; import { pathByRouteName, findRouteByRouteName } from '../../util/routes'; -import { propTypes, LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types'; +import { propTypes, LINE_ITEM_NIGHT, LINE_ITEM_DAY, DATE_TYPE_DATE } from '../../util/types'; import { ensureListing, ensureCurrentUser, @@ -586,6 +586,7 @@ export class CheckoutPageComponent extends Component { unitType={config.bookingUnitType} transaction={tx} booking={txBooking} + dateType={DATE_TYPE_DATE} /> ) : null; @@ -769,9 +770,6 @@ export class CheckoutPageComponent extends Component {
-

- -

{speculateTransactionErrorMessage} {breakdown}
@@ -837,9 +835,6 @@ export class CheckoutPageComponent extends Component {

{listingTitle}

{detailsSubTitle}

-

- -

{speculateTransactionErrorMessage} {breakdown} diff --git a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap index 112093b6..2f464eaa 100644 --- a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap +++ b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap @@ -77,14 +77,7 @@ exports[`CheckoutPage matches snapshot 1`] = ` /> -
-

- -

-
+
-

- -

diff --git a/src/forms/BookingDatesForm/EstimatedBreakdownMaybe.js b/src/forms/BookingDatesForm/EstimatedBreakdownMaybe.js index 6fa01417..ed61710f 100644 --- a/src/forms/BookingDatesForm/EstimatedBreakdownMaybe.js +++ b/src/forms/BookingDatesForm/EstimatedBreakdownMaybe.js @@ -31,7 +31,7 @@ import Decimal from 'decimal.js'; import { types as sdkTypes } from '../../util/sdkLoader'; import { dateFromLocalToAPI, nightsBetween, daysBetween } from '../../util/dates'; import { TRANSITION_REQUEST_PAYMENT, TX_TRANSITION_ACTOR_CUSTOMER } from '../../util/transaction'; -import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS } from '../../util/types'; +import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, LINE_ITEM_UNITS, DATE_TYPE_DATE } from '../../util/types'; import { unitDivisor, convertMoneyToNumber, convertUnitToSubUnit } from '../../util/currency'; import { BookingBreakdown } from '../../components'; @@ -136,6 +136,7 @@ const EstimatedBreakdownMaybe = props => { unitType={unitType} transaction={tx} booking={tx.booking} + dateType={DATE_TYPE_DATE} /> ); }; diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css index 7767fff1..ca5520ce 100644 --- a/src/marketplaceFonts.css +++ b/src/marketplaceFonts.css @@ -32,6 +32,13 @@ } } + --marketplaceSmallFontStyles: { + font-family: 'sofiapro', Helvetica, Arial, sans-serif; + font-weight: var(--fontWeightMedium); + font-size: 15px; + line-height: 24px; + } + /* ================ Body font ================ */ --marketplaceBodyFontStyles: { diff --git a/src/translations/en.json b/src/translations/en.json index b464fef5..4a9185cc 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -37,7 +37,11 @@ "AuthenticationPage.verifyEmailTitle": "{name}, check your inbox to verify your email", "Avatar.bannedUserDisplayName": "Banned user", "Avatar.deletedUserDisplayName": "Deleted user", - "BookingBreakdown.bookingPeriod": "{bookingStart} – {bookingEnd}", + "BookingBreakdown.baseUnitDay": "{unitPrice} * {quantity, number} {quantity, plural, one {day} other {days}}", + "BookingBreakdown.baseUnitNight": "{unitPrice} * {quantity, number} {quantity, plural, one {night} other {nights}}", + "BookingBreakdown.baseUnitQuantity": "{unitPrice} * {quantity, number} {quantity, plural, one {person} other {persons}}", + "BookingBreakdown.bookingEnd": "Booking end", + "BookingBreakdown.bookingStart": "Booking start", "BookingBreakdown.commission": "Saunatime fee *", "BookingBreakdown.commissionFeeNote": "* The fee helps us run the platform and provide the best possible service to you!", "BookingBreakdown.dayCount": "{count, number} {count, plural, one {day} other {days}}", diff --git a/src/util/types.js b/src/util/types.js index c8e4133d..e40bb0f6 100644 --- a/src/util/types.js +++ b/src/util/types.js @@ -496,8 +496,10 @@ propTypes.error = shape({ apiErrors: arrayOf(propTypes.apiError), }); -export { propTypes }; - // Options for showing just date or date and time on BookingTimeInfo and BookingBreakdown export const DATE_TYPE_DATE = 'date'; export const DATE_TYPE_DATETIME = 'datetime'; + +propTypes.dateType = oneOf([DATE_TYPE_DATE, DATE_TYPE_DATETIME]); + +export { propTypes };