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 (