mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-25 22:37:18 +10:00
Update BookingBreakdown
This commit is contained in:
Jenni Nurmi
parent
a00bbbfd80
commit
dbf963445c
11 changed files with 477 additions and 258 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={classes}>
|
||||
<LineItemUnitPriceMaybe transaction={transaction} unitType={unitType} intl={intl} />
|
||||
<LineItemBookingPeriod transaction={transaction} booking={booking} unitType={unitType} />
|
||||
<LineItemBookingPeriod booking={booking} unitType={unitType} dateType={dateType} />
|
||||
<LineItemUnitsMaybe transaction={transaction} unitType={unitType} />
|
||||
|
||||
<LineItemBasePriceMaybe transaction={transaction} unitType={unitType} intl={intl} />
|
||||
<LineItemUnknownItemsMaybe transaction={transaction} intl={intl} />
|
||||
|
||||
<LineItemSubTotalMaybe
|
||||
|
|
@ -78,8 +124,8 @@ export const BookingBreakdownComponent = props => {
|
|||
intl={intl}
|
||||
/>
|
||||
|
||||
<hr className={css.totalDivider} />
|
||||
<LineItemTotalPrice transaction={transaction} isProvider={isProvider} intl={intl} />
|
||||
|
||||
{hasCommissionLineItem ? (
|
||||
<span className={css.feeInfo}>
|
||||
<FormattedMessage id="BookingBreakdown.commissionFeeNote" />
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
|||
<BookingBreakdownComponent
|
||||
userRole="customer"
|
||||
unitType={LINE_ITEM_NIGHT}
|
||||
dateType={DATE_TYPE_DATE}
|
||||
transaction={exampleTransaction({
|
||||
payinTotal: new Money(2000, 'USD'),
|
||||
payoutTotal: new Money(2000, 'USD'),
|
||||
|
|
@ -71,6 +73,7 @@ describe('BookingBreakdown', () => {
|
|||
<BookingBreakdownComponent
|
||||
userRole="customer"
|
||||
unitType={LINE_ITEM_NIGHT}
|
||||
dateType={DATE_TYPE_DATE}
|
||||
transaction={exampleTransaction({
|
||||
payinTotal: new Money(2000, 'USD'),
|
||||
payoutTotal: new Money(2000, 'USD'),
|
||||
|
|
@ -100,6 +103,7 @@ describe('BookingBreakdown', () => {
|
|||
<BookingBreakdownComponent
|
||||
userRole="provider"
|
||||
unitType={LINE_ITEM_NIGHT}
|
||||
dateType={DATE_TYPE_DATE}
|
||||
transaction={exampleTransaction({
|
||||
payinTotal: new Money(2000, 'USD'),
|
||||
payoutTotal: new Money(1800, 'USD'),
|
||||
|
|
@ -135,6 +139,7 @@ describe('BookingBreakdown', () => {
|
|||
<BookingBreakdownComponent
|
||||
userRole="provider"
|
||||
unitType={LINE_ITEM_NIGHT}
|
||||
dateType={DATE_TYPE_DATE}
|
||||
transaction={exampleTransaction({
|
||||
lastTransition: TRANSITION_CANCEL,
|
||||
payinTotal: new Money(0, 'USD'),
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ const LineItemBasePriceMaybe = props => {
|
|||
? '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
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 <FormattedDate value={startDate} {...dateFormatOptions} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<FormattedMessage
|
||||
id="BookingBreakdown.bookingPeriod"
|
||||
values={{
|
||||
bookingStart: (
|
||||
<span className={css.nowrap}>
|
||||
<>
|
||||
<div className={css.bookingPeriod}>
|
||||
<div className={css.bookingPeriodSection}>
|
||||
<div className={css.dayLabel}>
|
||||
<FormattedMessage id="BookingBreakdown.bookingStart" />
|
||||
</div>
|
||||
<div className={css.dayInfo}>
|
||||
<FormattedDate value={startDate} {...timeFormatOptions} />
|
||||
</div>
|
||||
<div className={css.itemLabel}>
|
||||
<FormattedDate value={startDate} {...dateFormatOptions} />
|
||||
</span>
|
||||
),
|
||||
bookingEnd: (
|
||||
<span className={css.nowrap}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={css.bookingPeriodSectionRigth}>
|
||||
<div className={css.dayLabel}>
|
||||
<FormattedMessage id="BookingBreakdown.bookingEnd" />
|
||||
</div>
|
||||
<div className={css.dayInfo}>
|
||||
<FormattedDate value={endDate} {...timeFormatOptions} />
|
||||
</div>
|
||||
<div className={css.itemLabel}>
|
||||
<FormattedDate value={endDate} {...dateFormatOptions} />
|
||||
</span>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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 = (
|
||||
<FormattedHTMLMessage
|
||||
id={isNightly ? 'BookingBreakdown.nightCount' : 'BookingBreakdown.dayCount'}
|
||||
values={{ count }}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={css.lineItem}>
|
||||
<span className={css.itemLabel}>
|
||||
<BookingPeriod isSingleDay={isSingleDay} startDate={localStartDate} endDate={endDay} />
|
||||
</span>
|
||||
<span className={css.itemValue}>{unitCountMessage}</span>
|
||||
</div>
|
||||
<>
|
||||
<div className={css.lineItem}>
|
||||
<BookingPeriod startDate={localStartDate} endDate={endDay} dateType={dateType} />
|
||||
</div>
|
||||
<hr className={css.totalDivider} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
LineItemBookingPeriod.defaultProps = { dateType: null };
|
||||
|
||||
LineItemBookingPeriod.propTypes = {
|
||||
transaction: propTypes.transaction.isRequired,
|
||||
booking: propTypes.booking.isRequired,
|
||||
dateType: propTypes.dateType,
|
||||
};
|
||||
|
||||
export default LineItemBookingPeriod;
|
||||
|
|
|
|||
|
|
@ -81,12 +81,15 @@ const LineItemSubTotalMaybe = props => {
|
|||
const formattedSubTotal = subTotalLineItems.length > 0 ? formatMoney(intl, subTotal) : null;
|
||||
|
||||
return formattedSubTotal && showSubTotal ? (
|
||||
<div className={css.subTotalLineItem}>
|
||||
<span className={css.itemLabel}>
|
||||
<FormattedMessage id="BookingBreakdown.subTotal" />
|
||||
</span>
|
||||
<span className={css.itemValue}>{formattedSubTotal}</span>
|
||||
</div>
|
||||
<>
|
||||
<hr className={css.totalDivider} />
|
||||
<div className={css.subTotalLineItem}>
|
||||
<span className={css.itemLabel}>
|
||||
<FormattedMessage id="BookingBreakdown.subTotal" />
|
||||
</span>
|
||||
<span className={css.itemValue}>{formattedSubTotal}</span>
|
||||
</div>
|
||||
</>
|
||||
) : null;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -31,10 +31,13 @@ const LineItemUnitPrice = props => {
|
|||
const formattedTotalPrice = formatMoney(intl, totalPrice);
|
||||
|
||||
return (
|
||||
<div className={css.lineItem}>
|
||||
<div className={css.totalLabel}>{totalLabel}</div>
|
||||
<div className={css.totalPrice}>{formattedTotalPrice}</div>
|
||||
</div>
|
||||
<>
|
||||
<hr className={css.totalDivider} />
|
||||
<div className={css.lineItemTotal}>
|
||||
<div className={css.totalLabel}>{totalLabel}</div>
|
||||
<div className={css.totalPrice}>{formattedTotalPrice}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,43 +4,70 @@ exports[`BookingBreakdown customer transaction data matches snapshot 1`] = `
|
|||
<div
|
||||
className=""
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.pricePerNight
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
10
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.bookingPeriod
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "BookingBreakdown.nightCount",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
Array [
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingStart
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingEnd
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<hr />,
|
||||
]
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.total
|
||||
BookingBreakdown.baseUnitNight
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
</span>
|
||||
<span>
|
||||
20
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
Array [
|
||||
<hr />,
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.total
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
20
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -48,43 +75,70 @@ exports[`BookingBreakdown pretransaction data matches snapshot 1`] = `
|
|||
<div
|
||||
className=""
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.pricePerNight
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
10
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.bookingPeriod
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "BookingBreakdown.nightCount",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
Array [
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingStart
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingEnd
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<hr />,
|
||||
]
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.total
|
||||
BookingBreakdown.baseUnitNight
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
</span>
|
||||
<span>
|
||||
20
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
Array [
|
||||
<hr />,
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.total
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
20
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -92,42 +146,70 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
|
|||
<div
|
||||
className=""
|
||||
>
|
||||
Array [
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingStart
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingEnd
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<hr />,
|
||||
]
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.pricePerNight
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
10
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.bookingPeriod
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "BookingBreakdown.nightCount",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.subTotal
|
||||
BookingBreakdown.baseUnitNight
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
20
|
||||
</span>
|
||||
</div>
|
||||
Array [
|
||||
<hr />,
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.subTotal
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
20
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
|
|
@ -158,17 +240,19 @@ exports[`BookingBreakdown provider canceled transaction data matches snapshot 1`
|
|||
2
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
Array [
|
||||
<hr />,
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.providerTotalCanceled
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.providerTotalCanceled
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
0
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.commissionFeeNote
|
||||
|
|
@ -181,42 +265,70 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
|
|||
<div
|
||||
className=""
|
||||
>
|
||||
Array [
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingStart
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.bookingEnd
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Sat 12:00 PM
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Jun 10
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<hr />,
|
||||
]
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.pricePerNight
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
10
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.bookingPeriod
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
dangerouslySetInnerHTML={
|
||||
Object {
|
||||
"__html": "BookingBreakdown.nightCount",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.subTotal
|
||||
BookingBreakdown.baseUnitNight
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
20
|
||||
</span>
|
||||
</div>
|
||||
Array [
|
||||
<hr />,
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.subTotal
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
20
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
<div>
|
||||
<span>
|
||||
<span>
|
||||
|
|
@ -227,17 +339,19 @@ exports[`BookingBreakdown provider transaction data matches snapshot 1`] = `
|
|||
-2
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
Array [
|
||||
<hr />,
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.providerTotalDefault
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
18
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
BookingBreakdown.providerTotalDefault
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
18
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
<span>
|
||||
<span>
|
||||
BookingBreakdown.commissionFeeNote
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@
|
|||
"AuthenticationPage.verifyEmailTitle": "{name}, check your inbox to verify your email",
|
||||
"Avatar.bannedUserDisplayName": "Banned user",
|
||||
"Avatar.deletedUserDisplayName": "Deleted user",
|
||||
"BookingBreakdown.baseUnitDay": "{unitPrice} * {quantity} days",
|
||||
"BookingBreakdown.baseUnitNight": "{unitPrice} * {quantity} nights",
|
||||
"BookingBreakdown.baseUnitQuantity": "{unitPrice} * {quantity} persons",
|
||||
"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 *",
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue