53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { Suspense } from "react"
|
|
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import { LinkedReservationCardSkeleton } from "./LinkedReservation/LinkedReservationCardSkeleton"
|
|
import { LinkedReservation } from "./LinkedReservation"
|
|
import Room from "./Room"
|
|
|
|
import styles from "./rooms.module.css"
|
|
|
|
import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
|
|
|
|
export default async function Rooms({
|
|
booking,
|
|
mainRoom,
|
|
linkedReservations,
|
|
}: BookingConfirmationRoomsProps) {
|
|
const intl = await getIntl()
|
|
return (
|
|
<section className={styles.rooms}>
|
|
<div className={styles.room}>
|
|
{(linkedReservations?.length ?? 0 > 0) ? (
|
|
<Subtitle color="mainGrey60" type="two">
|
|
{intl.formatMessage({ id: "Room {roomIndex}" }, { roomIndex: 1 })}
|
|
</Subtitle>
|
|
) : null}
|
|
<Room
|
|
booking={booking}
|
|
img={mainRoom.images[0]}
|
|
roomName={mainRoom.name}
|
|
/>
|
|
</div>
|
|
|
|
{linkedReservations?.map((reservation, idx) => (
|
|
<div className={styles.room} key={reservation.confirmationNumber}>
|
|
<Subtitle color="mainGrey60" type="two">
|
|
{intl.formatMessage(
|
|
{ id: "Room {roomIndex}" },
|
|
{ roomIndex: idx + 2 }
|
|
)}
|
|
</Subtitle>
|
|
<Suspense fallback={<LinkedReservationCardSkeleton />}>
|
|
<LinkedReservation
|
|
confirmationNumber={reservation.confirmationNumber}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
))}
|
|
</section>
|
|
)
|
|
}
|