131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
"use client"
|
|
import { use, useEffect } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
|
|
import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
|
|
|
|
import styles from "./linkedReservation.module.css"
|
|
|
|
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
|
|
|
|
interface LinkedReservationProps {
|
|
bookingPromise: Promise<BookingConfirmation | null>
|
|
index: number
|
|
}
|
|
|
|
export default function LinkedReservation({
|
|
bookingPromise,
|
|
index,
|
|
}: LinkedReservationProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
const { addRoomPrice } = useMyStayTotalPriceStore()
|
|
const { addRoomDetails } = useMyStayRoomDetailsStore()
|
|
|
|
const bookingConfirmation = use(bookingPromise)
|
|
const { booking, room } = bookingConfirmation ?? {}
|
|
|
|
useEffect(() => {
|
|
if (booking) {
|
|
addRoomPrice({
|
|
id: booking.confirmationNumber ?? "",
|
|
totalPrice: booking.totalPrice,
|
|
currencyCode: booking.currencyCode,
|
|
isMainBooking: false,
|
|
})
|
|
|
|
// Add room details to the store
|
|
addRoomDetails({
|
|
id: booking.confirmationNumber ?? "",
|
|
roomName: room?.name ?? booking.roomTypeCode ?? "",
|
|
isCancelable: booking.isCancelable,
|
|
})
|
|
}
|
|
}, [booking, room, addRoomPrice, addRoomDetails])
|
|
|
|
if (!booking) return null
|
|
|
|
const fromDate = dt(booking.checkInDate).locale(lang)
|
|
const toDate = dt(booking.checkOutDate).locale(lang)
|
|
|
|
const adultsMsg = intl.formatMessage(
|
|
{ id: "{adults, plural, one {# adult} other {# adults}}" },
|
|
{
|
|
adults: booking.adults,
|
|
}
|
|
)
|
|
|
|
const childrenMsg = intl.formatMessage(
|
|
{
|
|
id: "{children, plural, one {# child} other {# children}}",
|
|
},
|
|
{
|
|
children: booking.childrenAges.length,
|
|
}
|
|
)
|
|
|
|
const adultsOnlyMsg = adultsMsg
|
|
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
|
|
|
|
return (
|
|
<article className={styles.linkedReservation}>
|
|
<div className={styles.title}>
|
|
<Subtitle color="burgundy">
|
|
{intl.formatMessage(
|
|
{ id: "Room {roomIndex}" },
|
|
{
|
|
roomIndex: index + 2,
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
</div>
|
|
<div className={styles.details}>
|
|
<Caption textTransform="uppercase" type="bold">
|
|
{intl.formatMessage({ id: "Reference" })} {booking.confirmationNumber}
|
|
</Caption>
|
|
<div>
|
|
<Caption color="uiTextHighContrast">
|
|
{booking.childrenAges.length > 0
|
|
? adultsAndChildrenMsg
|
|
: adultsOnlyMsg}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
<div className={styles.dates}>
|
|
<div className={styles.date}>
|
|
<Caption
|
|
type="bold"
|
|
textTransform="uppercase"
|
|
color="uiTextHighContrast"
|
|
>
|
|
{intl.formatMessage({ id: "Check-in" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{`${fromDate.format("dddd, D MMMM")} `}
|
|
</Caption>
|
|
</div>
|
|
<div className={styles.date}>
|
|
<Caption
|
|
type="bold"
|
|
textTransform="uppercase"
|
|
color="uiTextHighContrast"
|
|
>
|
|
{intl.formatMessage({ id: "Check-out" })}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{`${toDate.format("dddd, D MMMM")} `}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|