d5e5b9a526
feat(SW-1652): Fetching additional rooms on confirmation page * feat(SW-1652): Fetching additional rooms on confirmation page Approved-by: Tobias Johansson
89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { ChevronRightSmallIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import Room from "../Room"
|
|
|
|
import styles from "./rooms.module.css"
|
|
|
|
import type { BookingConfirmationReceiptRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
|
|
|
|
export default function ReceiptRooms({
|
|
booking,
|
|
room,
|
|
linkedReservations,
|
|
}: BookingConfirmationReceiptRoomsProps) {
|
|
const intl = useIntl()
|
|
|
|
if (linkedReservations.some((reservation) => !reservation)) {
|
|
return null
|
|
}
|
|
|
|
const grandTotal = linkedReservations.reduce((acc, reservation) => {
|
|
const reservationTotalPrice = reservation?.booking.totalPrice || 0
|
|
return acc + reservationTotalPrice
|
|
}, booking.totalPrice)
|
|
|
|
return (
|
|
<>
|
|
<Room
|
|
booking={booking}
|
|
room={room}
|
|
roomNumber={linkedReservations.length ? 1 : null}
|
|
/>
|
|
{linkedReservations.map((reservation, idx) => {
|
|
if (!reservation?.room) {
|
|
return null
|
|
}
|
|
return (
|
|
<Room
|
|
key={reservation?.booking.confirmationNumber}
|
|
booking={reservation.booking}
|
|
room={reservation.room}
|
|
roomNumber={idx + 2}
|
|
/>
|
|
)
|
|
})}
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.price}>
|
|
<div className={styles.entry}>
|
|
<Body textTransform="bold">
|
|
{intl.formatMessage({ id: "Total price" })}
|
|
</Body>
|
|
<Body textTransform="bold">
|
|
{formatPrice(intl, grandTotal, booking.currencyCode)}
|
|
</Body>
|
|
</div>
|
|
<div className={styles.entry}>
|
|
<Button
|
|
className={styles.btn}
|
|
intent="text"
|
|
size="small"
|
|
theme="base"
|
|
variant="icon"
|
|
wrapping
|
|
>
|
|
{intl.formatMessage({ id: "Price details" })}
|
|
<ChevronRightSmallIcon />
|
|
</Button>
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "Approx. {value}" },
|
|
{
|
|
value: "N/A",
|
|
}
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|