131 lines
4.4 KiB
TypeScript
131 lines
4.4 KiB
TypeScript
"use client"
|
|
import { notFound } from "next/navigation"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { ChevronRightSmallIcon, InfoCircleIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./receipt.module.css"
|
|
|
|
import type { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
|
|
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
|
|
|
|
export default function Receipt({
|
|
booking,
|
|
hotel,
|
|
room,
|
|
}: BookingConfirmationReceiptProps) {
|
|
const intl = useIntl()
|
|
|
|
if (!room) {
|
|
return notFound()
|
|
}
|
|
|
|
const breakfastPkgSelected = booking.packages.find(
|
|
(pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
|
|
)
|
|
const breakfastPkgIncluded = booking.packages.find(
|
|
(pkg) => pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
|
|
)
|
|
return (
|
|
<section className={styles.receipt}>
|
|
<Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
|
|
<article className={styles.room}>
|
|
<header className={styles.roomHeader}>
|
|
<Body color="uiTextHighContrast">{room.name}</Body>
|
|
{booking.rateDefinition.isMemberRate ? (
|
|
<div className={styles.memberPrice}>
|
|
<Body color="uiTextPlaceholder">
|
|
<s>N/A</s>
|
|
</Body>
|
|
<Body color="red">
|
|
{formatPrice(intl, booking.roomPrice, booking.currencyCode)}
|
|
</Body>
|
|
</div>
|
|
) : (
|
|
<Body color="uiTextHighContrast">
|
|
{formatPrice(intl, booking.roomPrice, booking.currencyCode)}
|
|
</Body>
|
|
)}
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "booking.adults" },
|
|
{
|
|
totalAdults: booking.adults,
|
|
}
|
|
)}
|
|
</Caption>
|
|
<Caption color="uiTextMediumContrast">
|
|
{booking.rateDefinition.cancellationText}
|
|
</Caption>
|
|
<Link
|
|
color="peach80"
|
|
href=""
|
|
size="small"
|
|
textDecoration="underline"
|
|
variant="icon"
|
|
>
|
|
{intl.formatMessage({ id: "Reservation policy" })}
|
|
<InfoCircleIcon color="peach80" />
|
|
</Link>
|
|
</header>
|
|
<div className={styles.entry}>
|
|
<Body color="uiTextHighContrast">{room.bedType.description}</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{formatPrice(intl, 0, booking.currencyCode)}
|
|
</Body>
|
|
</div>
|
|
<div className={styles.entry}>
|
|
<Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
|
|
{booking.rateDefinition.breakfastIncluded ?? breakfastPkgIncluded ? (
|
|
<Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
|
|
) : null}
|
|
|
|
{breakfastPkgSelected ? (
|
|
<Body color="uiTextHighContrast">
|
|
{formatPrice(
|
|
intl,
|
|
breakfastPkgSelected.totalPrice,
|
|
breakfastPkgSelected.currency
|
|
)}
|
|
</Body>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
<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, booking.totalPrice, 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." })} N/A EUR
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|