120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import { Suspense } from "react"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import MultiRoom from "../MultiRoom"
|
|
import MultiRoomSkeleton from "../MultiRoom/MultiRoomSkeleton"
|
|
import PriceDetails from "../PriceDetails"
|
|
import { SingleRoom } from "../SingleRoom"
|
|
import { getPriceType } from "../utils/getPriceType"
|
|
import TotalPrice from "./TotalPrice"
|
|
|
|
import styles from "./rooms.module.css"
|
|
|
|
import { type Hotel, type Room } from "@/types/hotel"
|
|
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
|
|
import type { User } from "@/types/user"
|
|
|
|
interface RoomsProps {
|
|
booking: BookingConfirmation["booking"]
|
|
room:
|
|
| (Room & {
|
|
bedType: Room["roomTypes"][number]
|
|
})
|
|
| null
|
|
hotel: Hotel
|
|
user: User | null
|
|
}
|
|
|
|
export default async function Rooms({
|
|
booking,
|
|
room,
|
|
hotel,
|
|
user,
|
|
}: RoomsProps) {
|
|
const intl = await getIntl()
|
|
|
|
if (!room) {
|
|
return null
|
|
}
|
|
|
|
const linkedBookingPromises = booking.linkedReservations
|
|
? booking.linkedReservations.map((linkedBooking) => {
|
|
return getBookingConfirmation(linkedBooking.confirmationNumber)
|
|
})
|
|
: []
|
|
|
|
const isMultiRoom = booking.linkedReservations.length > 0
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
{isMultiRoom && (
|
|
<Typography variant="Title/sm">
|
|
<h2 className={styles.title}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Your rooms",
|
|
})}
|
|
</h2>
|
|
</Typography>
|
|
)}
|
|
<div className={styles.container}>
|
|
{!isMultiRoom ? (
|
|
<SingleRoom
|
|
bedType={room.bedType}
|
|
image={room.images[0]}
|
|
hotel={hotel}
|
|
user={user}
|
|
/>
|
|
) : (
|
|
<div className={styles.roomsContainer}>
|
|
<MultiRoom booking={booking} room={room} user={user} />
|
|
{booking.linkedReservations.map((linkedRes, index) => (
|
|
<div
|
|
key={linkedRes.confirmationNumber}
|
|
className={styles.roomWrapper}
|
|
>
|
|
<Suspense fallback={<MultiRoomSkeleton />}>
|
|
<MultiRoom
|
|
bookingPromise={linkedBookingPromises[index]}
|
|
index={index}
|
|
user={user}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{isMultiRoom && (
|
|
<div className={styles.totalContainer}>
|
|
<div className={styles.total}>
|
|
<Typography variant="Body/Lead text">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Booking total",
|
|
})}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{":"}
|
|
</p>
|
|
</Typography>
|
|
<TotalPrice
|
|
variant="Title/Subtitle/lg"
|
|
type={getPriceType(
|
|
booking.cheques,
|
|
booking.roomPoints,
|
|
booking.vouchers
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<PriceDetails />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|