scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix (SW-1352): update PriceDetailsTable with avarage price per night

Browse Source
This commit is contained in:
Arvid Norlin
2025-01-09 16:14:24 +01:00
parent 54eefa307d
commit cb0dfcecad
7 changed files with 98 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/HotelReservation/EnterDetails/Summary/PriceDetailsTable/index.tsx
View File

@@ -8,7 +8,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import { getNights } from "@/utils/dateFormatting"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./priceDetailsTable.module.css"
@@ -16,14 +15,22 @@ import styles from "./priceDetailsTable.module.css"
import { type PriceDetailsTableProps } from "@/types/components/hotelReservation/enterDetails/priceDetailsTable"
import type { DetailsState } from "@/types/stores/enter-details"
function Row({ label, value }: { label: string; value: string }) {
function Row({
label,
value,
bold,
}: {
label: string
value: string
bold?: boolean
}) {
return (
<tr className={styles.row}>
<td>
<Caption>{label}</Caption>
<Caption type={bold ? "bold" : undefined}>{label}</Caption>
</td>
<td className={styles.price}>
<Caption>{value}</Caption>
<Caption type={bold ? "bold" : undefined}>{value}</Caption>
</td>
</tr>
)
@@ -33,11 +40,18 @@ function TableSection({ children }: React.PropsWithChildren) {
return <tbody className={styles.tableSection}>{children}</tbody>
}
function TableSectionHeader({ title }: { title: string }) {
function TableSectionHeader({
title,
subtitle,
}: {
title: string
subtitle?: string
}) {
return (
<tr>
<th colSpan={2}>
<Body>{title}</Body>
{subtitle ? <Body>{subtitle}</Body> : null}
</th>
</tr>
)
@@ -67,54 +81,58 @@ export default function PriceDetailsTable({
// TODO: Update for Multiroom later
const { adults, childrenInRoom } = booking.rooms[0]
const nights = getNights(booking.fromDate, booking.toDate)
const diff = dt(booking.toDate).diff(booking.fromDate, "days")
const nights = intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: diff }
)
const vatPercentage = vat / 100
const vatAmount = totalPrice.local.price * vatPercentage
const priceExclVat = totalPrice.local.price - vatAmount
const duration = ` ${dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
-
${dt(booking.toDate).locale(lang).format("ddd, D MMM")} (${nights})`
return (
<table className={styles.priceDetailsTable}>
<TableSection>
<TableSectionHeader title={roomType} />
{nights.map((night) => {
return (
<Row
key={night.format("YYMMDD")}
label={dt(night).locale(lang).format("ddd, D MMM YYYY")}
value={formatPrice(
intl,
roomPrice.perNight.local.price,
roomPrice.perNight.local.currency
)}
/>
)
})}
</TableSection>
{bedType ? (
<TableSection>
<TableSectionHeader title={roomType} subtitle={duration} />
<Row
label={intl.formatMessage({ id: "Average price per night" })}
value={formatPrice(
intl,
roomPrice.perNight.local.price,
roomPrice.perNight.local.currency
)}
/>
{bedType ? (
<Row
label={bedType.description}
value={formatPrice(intl, 0, roomPrice.perStay.local.currency)}
/>
</TableSection>
) : null}
) : null}
<Row
bold
label={intl.formatMessage({ id: "Room charge" })}
value={formatPrice(
intl,
roomPrice.perStay.local.price,
roomPrice.perStay.local.currency
)}
/>
</TableSection>
{breakfast ? (
<TableSection>
<TableSectionHeader title={intl.formatMessage({ id: "Breakfast" })} />
<Row
label={`${intl.formatMessage(
label={intl.formatMessage(
{
id: "{totalAdults, plural, one {# voksen} other {# voksne}}",
id: "Breakfast ({totalAdults, plural, one {# adult} other {# adults}}) x {totalBreakfasts}",
},
{ totalAdults: adults }
)}, ${intl.formatMessage(
{
id: "{totalBreakfasts, plural, one {# morgenmad} other {# morgenmad}}",
},
{ totalBreakfasts: nights.length }
)}`}
{ totalAdults: adults, totalBreakfasts: diff }
)}
value={formatPrice(
intl,
parseInt(breakfast.localPrice.totalPrice),
@@ -123,20 +141,26 @@ export default function PriceDetailsTable({
/>
{childrenInRoom?.length ? (
<Row
label={`${intl.formatMessage(
label={intl.formatMessage(
{
id: "{totalChildren, plural, one {# child} other {# children}}",
id: "Breakfast ({totalChildren, plural, one {# child} other {# children}}) x {totalBreakfasts}",
},
{ totalChildren: childrenInRoom.length }
)}, ${intl.formatMessage(
{
id: "{totalBreakfasts, plural, one {# breakfast} other {# breakfasts}}",
},
{ totalBreakfasts: nights.length }
)}`}
{ totalChildren: childrenInRoom.length, totalBreakfasts: diff }
)}
value={formatPrice(intl, 0, breakfast.localPrice.currency)}
/>
) : null}
<Row
bold
label={intl.formatMessage({
id: "Breakfast charge",
})}
value={formatPrice(
intl,
parseInt(breakfast.localPrice.totalPrice),
breakfast.localPrice.currency
)}
/>
</TableSection>
) : null}
<TableSection>