f5e0214313
feat: initial display of linkedReservations on confirmation page * feat: initial display of linkedReservations on confirmation page * refactor: move notFound Approved-by: Tobias Johansson
99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
"use client "
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./linkedReservation.module.css"
|
|
|
|
import type { LinkedReservationSchema } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
|
|
|
|
interface LinkedReservationProps {
|
|
linkedReservation: LinkedReservationSchema
|
|
roomIndex: number
|
|
}
|
|
|
|
export function LinkedReservation({
|
|
linkedReservation,
|
|
roomIndex,
|
|
}: LinkedReservationProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const {
|
|
checkinDate,
|
|
checkoutDate,
|
|
confirmationNumber,
|
|
roomTypeCode,
|
|
adults,
|
|
children,
|
|
} = linkedReservation
|
|
|
|
const fromDate = dt(checkinDate).locale(lang)
|
|
const toDate = dt(checkoutDate).locale(lang)
|
|
return (
|
|
<div className={styles.reservation}>
|
|
<Subtitle color="uiTextHighContrast" type="two">
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Room {roomIndex}",
|
|
},
|
|
{
|
|
roomIndex: roomIndex + 2,
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
<ul className={styles.details}>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Booking number" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{confirmationNumber}</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Check-in" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{checkInDate} from {checkInTime}" },
|
|
{
|
|
checkInDate: fromDate.format("ddd, D MMM"),
|
|
checkInTime: fromDate.format("HH:mm"),
|
|
}
|
|
)}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Check-out" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{checkOutDate} from {checkOutTime}" },
|
|
{
|
|
checkOutDate: toDate.format("ddd, D MMM"),
|
|
checkOutTime: toDate.format("HH:mm"),
|
|
}
|
|
)}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Adults" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{adults}</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Children" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{children}</Body>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|