fix: always use totalPrice to display roomCharge
This commit is contained in:
Simon Emanuelsson
@@ -1,330 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { Fragment } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
|
||||
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 "./priceDetailsTable.module.css"
|
||||
|
||||
import type { Price } from "@/types/components/hotelReservation/price"
|
||||
import type { Room } from "@/stores/my-stay/myStayRoomDetailsStore"
|
||||
|
||||
function Row({
|
||||
label,
|
||||
value,
|
||||
bold,
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
bold?: boolean
|
||||
}) {
|
||||
return (
|
||||
<tr className={styles.row}>
|
||||
<td>
|
||||
<Typography
|
||||
variant={
|
||||
bold
|
||||
? "Body/Supporting text (caption)/smBold"
|
||||
: "Body/Supporting text (caption)/smRegular"
|
||||
}
|
||||
>
|
||||
<span>{label}</span>
|
||||
</Typography>
|
||||
</td>
|
||||
<td className={styles.price}>
|
||||
<Typography
|
||||
variant={
|
||||
bold
|
||||
? "Body/Supporting text (caption)/smBold"
|
||||
: "Body/Supporting text (caption)/smRegular"
|
||||
}
|
||||
>
|
||||
<span>{value}</span>
|
||||
</Typography>
|
||||
</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}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span>{title}</span>
|
||||
</Typography>
|
||||
</th>
|
||||
</tr>
|
||||
{subtitle && (
|
||||
<tr>
|
||||
<th colSpan={2}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span>{subtitle}</span>
|
||||
</Typography>
|
||||
</th>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export type RoomPriceDetails = Pick<
|
||||
Room,
|
||||
| "adults"
|
||||
| "bedType"
|
||||
| "breakfast"
|
||||
| "childrenInRoom"
|
||||
| "roomPrice"
|
||||
| "roomName"
|
||||
| "packages"
|
||||
| "isCancelled"
|
||||
> & {
|
||||
guest?: Room["guest"]
|
||||
}
|
||||
|
||||
export interface PriceDetailsTableProps {
|
||||
bookingCode?: string | null
|
||||
fromDate: string
|
||||
bookedRoom: RoomPriceDetails
|
||||
linkedReservationRooms: RoomPriceDetails[]
|
||||
toDate: string
|
||||
totalPrice: Price
|
||||
vat: number
|
||||
}
|
||||
|
||||
export default function PriceDetailsTable({
|
||||
bookingCode,
|
||||
fromDate,
|
||||
bookedRoom,
|
||||
linkedReservationRooms,
|
||||
toDate,
|
||||
totalPrice,
|
||||
vat,
|
||||
}: PriceDetailsTableProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
|
||||
const rooms = [bookedRoom, ...linkedReservationRooms].filter(
|
||||
(room) => !room.isCancelled
|
||||
)
|
||||
|
||||
const diff = dt(toDate).diff(fromDate, "days")
|
||||
const nights = intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
|
||||
},
|
||||
{ totalNights: diff }
|
||||
)
|
||||
const vatPercentage = vat / 100
|
||||
const vatAmount = totalPrice.local.price * vatPercentage
|
||||
|
||||
const priceExclVat = totalPrice.local.price - vatAmount
|
||||
|
||||
const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
|
||||
-
|
||||
${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
|
||||
|
||||
return (
|
||||
<table className={styles.priceDetailsTable}>
|
||||
{rooms.map((room, idx) => {
|
||||
const totalAdultsMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{totalAdults, plural, one {# adult} other {# adults}}",
|
||||
},
|
||||
{
|
||||
totalAdults: room.adults,
|
||||
}
|
||||
)
|
||||
|
||||
const totalChildrenMsg = intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"{totalChildren, plural, one {# child} other {# children}}",
|
||||
},
|
||||
{
|
||||
totalChildren: room.childrenInRoom.length,
|
||||
}
|
||||
)
|
||||
|
||||
const guestsCountMsg = [totalAdultsMsg]
|
||||
if (room.childrenInRoom.length) {
|
||||
guestsCountMsg.push(totalChildrenMsg)
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
<TableSection>
|
||||
{rooms.length > 1 && (
|
||||
<tr>
|
||||
<td>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{ roomIndex: idx + 1 }
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
<TableSectionHeader title={room.roomName} subtitle={duration} />
|
||||
<Row
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Average price per night",
|
||||
})}
|
||||
value={formatPrice(
|
||||
intl,
|
||||
room.roomPrice.perNight.local.price,
|
||||
room.roomPrice.perNight.local.currency
|
||||
)}
|
||||
/>
|
||||
{room.packages
|
||||
? room.packages.map((feature) => (
|
||||
<Row
|
||||
key={feature.code}
|
||||
label={feature.description}
|
||||
value={formatPrice(
|
||||
intl,
|
||||
+feature.localPrice.totalPrice,
|
||||
feature.localPrice.currency
|
||||
)}
|
||||
/>
|
||||
))
|
||||
: null}
|
||||
<Row
|
||||
bold
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Room charge",
|
||||
})}
|
||||
value={formatPrice(
|
||||
intl,
|
||||
room.roomPrice.perStay.local.price,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
/>
|
||||
</TableSection>
|
||||
{room.breakfast ? (
|
||||
<TableSection>
|
||||
<Row
|
||||
label={intl.formatMessage(
|
||||
{
|
||||
defaultMessage:
|
||||
"Breakfast ({guestsCount}) x {totalBreakfasts}",
|
||||
},
|
||||
{
|
||||
guestsCount: guestsCountMsg.join(", "),
|
||||
totalBreakfasts: diff,
|
||||
}
|
||||
)}
|
||||
value={formatPrice(
|
||||
intl,
|
||||
room.breakfast.localPrice.totalPrice,
|
||||
room.breakfast.localPrice.currency
|
||||
)}
|
||||
/>
|
||||
<Row
|
||||
bold
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Breakfast charge",
|
||||
})}
|
||||
value={formatPrice(
|
||||
intl,
|
||||
room.breakfast.localPrice.totalPrice,
|
||||
room.breakfast.localPrice.currency
|
||||
)}
|
||||
/>
|
||||
</TableSection>
|
||||
) : null}
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
<TableSection>
|
||||
<TableSectionHeader
|
||||
title={intl.formatMessage({
|
||||
defaultMessage: "Total",
|
||||
})}
|
||||
/>
|
||||
<Row
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Price excluding VAT",
|
||||
})}
|
||||
value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
|
||||
/>
|
||||
<Row
|
||||
label={intl.formatMessage(
|
||||
{
|
||||
defaultMessage: "VAT {vat}%",
|
||||
},
|
||||
{ vat }
|
||||
)}
|
||||
value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
|
||||
/>
|
||||
<tr className={styles.row}>
|
||||
<td>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "Price including VAT",
|
||||
})}
|
||||
</Body>
|
||||
</td>
|
||||
<td className={styles.price}>
|
||||
<Body textTransform="bold">
|
||||
{formatPrice(
|
||||
intl,
|
||||
totalPrice.local.price,
|
||||
totalPrice.local.currency
|
||||
)}
|
||||
</Body>
|
||||
</td>
|
||||
</tr>
|
||||
{totalPrice.local.regularPrice && (
|
||||
<tr className={styles.row}>
|
||||
<td></td>
|
||||
<td className={styles.price}>
|
||||
<Caption color="uiTextMediumContrast" striked={true}>
|
||||
{formatPrice(
|
||||
intl,
|
||||
totalPrice.local.regularPrice,
|
||||
totalPrice.local.currency
|
||||
)}
|
||||
</Caption>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{bookingCode && totalPrice.local.regularPrice && (
|
||||
<tr className={styles.row}>
|
||||
<td>
|
||||
<MaterialIcon icon="sell" />
|
||||
{bookingCode}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
)}
|
||||
</TableSection>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import { dt } from "@/lib/dt"
|
||||
|
||||
import { sumPackages } from "@/components/HotelReservation/utils"
|
||||
|
||||
import { PriceTypeEnum } from "@/types/components/hotelReservation/myStay/myStay"
|
||||
import type { Price } from "@/types/components/hotelReservation/price"
|
||||
import { CurrencyEnum } from "@/types/enums/currency"
|
||||
@@ -12,7 +10,7 @@ export function mapToPrice(room: Room) {
|
||||
case PriceTypeEnum.cheque:
|
||||
return {
|
||||
corporateCheque: {
|
||||
additionalPricePerStay: room.roomPrice.perStay.local.price,
|
||||
additionalPricePerStay: room.totalPrice,
|
||||
currency: room.roomPrice.perStay.local.currency,
|
||||
numberOfCheques: room.cheques,
|
||||
},
|
||||
@@ -21,8 +19,8 @@ export function mapToPrice(room: Room) {
|
||||
return {
|
||||
regular: {
|
||||
currency: room.currencyCode,
|
||||
pricePerNight: room.roomPrice.perNight,
|
||||
pricePerStay: room.roomPrice.perStay,
|
||||
pricePerNight: room.roomPrice.perNight.local.price,
|
||||
pricePerStay: room.totalPrice,
|
||||
},
|
||||
}
|
||||
case PriceTypeEnum.points:
|
||||
@@ -31,8 +29,8 @@ export function mapToPrice(room: Room) {
|
||||
.diff(dt(room.checkInDate).startOf("day"), "days")
|
||||
return {
|
||||
redemption: {
|
||||
additionalPricePerStay: room.roomPrice.perStay.local.price,
|
||||
currency: room.roomPrice.perStay.local.currency,
|
||||
additionalPricePerStay: room.totalPrice,
|
||||
currency: room.currencyCode,
|
||||
pointsPerNight: room.roomPoints / nights,
|
||||
pointsPerStay: room.roomPoints,
|
||||
},
|
||||
@@ -51,11 +49,6 @@ export function mapToPrice(room: Room) {
|
||||
export function calculateTotalPrice(rooms: Room[], currency: CurrencyEnum) {
|
||||
return rooms.reduce<Price>(
|
||||
(total, room) => {
|
||||
const pkgsSum = sumPackages(room.packages)
|
||||
let breakfastPrice = 0
|
||||
if (room.breakfast && !room.rateDefinition.breakfastIncluded) {
|
||||
breakfastPrice = room.breakfast.localPrice.totalPrice
|
||||
}
|
||||
switch (room.priceType) {
|
||||
case PriceTypeEnum.cheque:
|
||||
{
|
||||
@@ -65,11 +58,7 @@ export function calculateTotalPrice(rooms: Room[], currency: CurrencyEnum) {
|
||||
break
|
||||
case PriceTypeEnum.money:
|
||||
{
|
||||
total.local.price =
|
||||
total.local.price +
|
||||
room.roomPrice.perStay.local.price +
|
||||
pkgsSum.price +
|
||||
breakfastPrice
|
||||
total.local.price = total.local.price + room.totalPrice
|
||||
|
||||
if (!total.local.currency) {
|
||||
total.local.currency = room.currencyCode
|
||||
@@ -93,17 +82,14 @@ export function calculateTotalPrice(rooms: Room[], currency: CurrencyEnum) {
|
||||
case PriceTypeEnum.points:
|
||||
case PriceTypeEnum.voucher:
|
||||
{
|
||||
if (room.roomPrice.perStay.local.price || pkgsSum) {
|
||||
if (room.totalPrice) {
|
||||
total.local.additionalPrice =
|
||||
room.roomPrice.perStay.local.price +
|
||||
pkgsSum.price +
|
||||
breakfastPrice
|
||||
(total.local.additionalPrice || 0) + room.totalPrice
|
||||
}
|
||||
|
||||
if (!total.local.additionalPriceCurrency) {
|
||||
if (room.roomPrice.perStay.local.currency) {
|
||||
total.local.additionalPriceCurrency =
|
||||
room.roomPrice.perStay.local.currency
|
||||
if (room.currencyCode) {
|
||||
total.local.additionalPriceCurrency = room.currencyCode
|
||||
} else {
|
||||
total.local.additionalPriceCurrency = currency
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user