ae1010bfce
feat: SW-2079 Show points in confirmation page * feat: SW-2079 Show points in confirmation page * feat: SW-2079 Optimized code * feat: SW-2079 Updated Body to Typography * feat: SW-2079 Multi-room total cost display * feat: SW-2079 Add reward nights condition rate title * feat: SW-2079 Removed extra checks * feat: SW-2079 Optimmized formatPrice function * feat: SW-2079 Typo fix Approved-by: Christian Andolf
252 lines
7.4 KiB
TypeScript
252 lines
7.4 KiB
TypeScript
"use client"
|
|
import React from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
|
|
|
|
import Modal from "@/components/Modal"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import useLang from "@/hooks/useLang"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./priceDetailsModal.module.css"
|
|
|
|
function Row({
|
|
label,
|
|
value,
|
|
bold,
|
|
}: {
|
|
label: string
|
|
value: string
|
|
bold?: boolean
|
|
}) {
|
|
return (
|
|
<tr className={styles.row}>
|
|
<td>
|
|
<Caption type={bold ? "bold" : undefined}>{label}</Caption>
|
|
</td>
|
|
<td className={styles.price}>
|
|
<Caption type={bold ? "bold" : undefined}>{value}</Caption>
|
|
</td>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
function TableSection({ children }: React.PropsWithChildren) {
|
|
return <tbody className={styles.tableSection}>{children}</tbody>
|
|
}
|
|
|
|
function TableSectionHeader({
|
|
title,
|
|
subtitle,
|
|
}: {
|
|
title: string
|
|
subtitle?: string
|
|
}) {
|
|
return (
|
|
<tr>
|
|
<th colSpan={2}>
|
|
<Body>{title}</Body>
|
|
{subtitle ? <Body>{subtitle}</Body> : null}
|
|
</th>
|
|
</tr>
|
|
)
|
|
}
|
|
|
|
export default function PriceDetailsModal() {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const {
|
|
rooms,
|
|
currencyCode,
|
|
vat,
|
|
fromDate,
|
|
toDate,
|
|
bookingCode,
|
|
isVatCurrency,
|
|
formattedTotalCost,
|
|
} = useBookingConfirmationStore((state) => ({
|
|
rooms: state.rooms,
|
|
currencyCode: state.currencyCode,
|
|
vat: state.vat,
|
|
fromDate: state.fromDate,
|
|
toDate: state.toDate,
|
|
bookingCode: state.bookingCode,
|
|
isVatCurrency: state.isVatCurrency,
|
|
formattedTotalCost: state.formattedTotalCost,
|
|
}))
|
|
|
|
if (!rooms[0]) {
|
|
return null
|
|
}
|
|
|
|
const checkInDate = dt(fromDate).format("YYYY-MM-DD")
|
|
const checkOutDate = dt(toDate).format("YYYY-MM-DD")
|
|
|
|
const bookingTotal = rooms.reduce(
|
|
(acc, room) => {
|
|
if (room) {
|
|
return {
|
|
price: acc.price + room.totalPrice,
|
|
priceExVat: acc.priceExVat + room.totalPriceExVat,
|
|
vatAmount: acc.vatAmount + room.vatAmount,
|
|
}
|
|
}
|
|
return acc
|
|
},
|
|
{ price: 0, priceExVat: 0, vatAmount: 0 }
|
|
)
|
|
|
|
const diff = dt(checkOutDate).diff(checkInDate, "days")
|
|
const nights = intl.formatMessage(
|
|
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
|
|
{ totalNights: diff }
|
|
)
|
|
|
|
const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
|
|
-
|
|
${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
|
|
return (
|
|
<Modal
|
|
title={intl.formatMessage({ id: "Price details" })}
|
|
trigger={
|
|
<Button intent="text">
|
|
<Caption color="burgundy">
|
|
{intl.formatMessage({ id: "Price details" })}
|
|
</Caption>
|
|
<MaterialIcon icon="chevron_right" color="CurrentColor" size={20} />
|
|
</Button>
|
|
}
|
|
>
|
|
<table className={styles.priceDetailsTable}>
|
|
{rooms.map((room, idx) => {
|
|
return room ? (
|
|
<React.Fragment key={idx}>
|
|
<TableSection>
|
|
{rooms.length > 1 && (
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage(
|
|
{ id: "Room {roomIndex}" },
|
|
{ roomIndex: idx + 1 }
|
|
)}
|
|
</Body>
|
|
)}
|
|
<TableSectionHeader title={room.name} subtitle={duration} />
|
|
{room.roomFeatures
|
|
? room.roomFeatures.map((feature) => (
|
|
<Row
|
|
key={feature.code}
|
|
label={feature.description}
|
|
value={formatPrice(
|
|
intl,
|
|
feature.totalPrice,
|
|
currencyCode
|
|
)}
|
|
/>
|
|
))
|
|
: null}
|
|
{room.bedDescription ? (
|
|
<Row
|
|
label={room.bedDescription}
|
|
value={formatPrice(intl, 0, currencyCode)}
|
|
/>
|
|
) : null}
|
|
<Row
|
|
bold
|
|
label={intl.formatMessage({ id: "Room charge" })}
|
|
value={room.formattedTotalCost}
|
|
/>
|
|
</TableSection>
|
|
|
|
{room.breakfast ? (
|
|
<TableSection>
|
|
<Row
|
|
label={intl.formatMessage(
|
|
{
|
|
id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
|
|
},
|
|
{ totalAdults: room.adults, totalBreakfasts: diff }
|
|
)}
|
|
value={formatPrice(
|
|
intl,
|
|
room.breakfast.unitPrice * room.adults,
|
|
currencyCode
|
|
)}
|
|
/>
|
|
{room.children ? (
|
|
<Row
|
|
label={intl.formatMessage(
|
|
{
|
|
id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
|
|
},
|
|
{
|
|
totalChildren: room.children,
|
|
totalBreakfasts: diff,
|
|
}
|
|
)}
|
|
value={formatPrice(intl, 0, currencyCode)}
|
|
/>
|
|
) : null}
|
|
<Row
|
|
bold
|
|
label={intl.formatMessage({
|
|
id: "Breakfast charge",
|
|
})}
|
|
value={formatPrice(
|
|
intl,
|
|
room.breakfast.totalPrice,
|
|
currencyCode
|
|
)}
|
|
/>
|
|
</TableSection>
|
|
) : null}
|
|
</React.Fragment>
|
|
) : null
|
|
})}
|
|
<TableSection>
|
|
<TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
|
|
{isVatCurrency ? (
|
|
<>
|
|
<Row
|
|
label={intl.formatMessage({ id: "Price excluding VAT" })}
|
|
value={formatPrice(intl, bookingTotal.priceExVat, currencyCode)}
|
|
/>
|
|
<Row
|
|
label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
|
|
value={formatPrice(intl, bookingTotal.vatAmount, currencyCode)}
|
|
/>
|
|
</>
|
|
) : null}
|
|
<tr className={styles.row}>
|
|
<td>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<span>{intl.formatMessage({ id: "Price including VAT" })}</span>
|
|
</Typography>
|
|
</td>
|
|
<td className={styles.price}>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<span>{formattedTotalCost}</span>
|
|
</Typography>
|
|
</td>
|
|
</tr>
|
|
{bookingCode && (
|
|
<tr className={styles.row}>
|
|
<td>
|
|
<MaterialIcon icon="sell" />
|
|
{bookingCode}
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
)}
|
|
</TableSection>
|
|
</table>
|
|
</Modal>
|
|
)
|
|
}
|