88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useMyStayStore } from "@/stores/my-stay"
|
|
|
|
import PriceDetails from "../PriceDetails"
|
|
import MultiRoom from "./MultiRoom"
|
|
import SingleRoom from "./SingleRoom"
|
|
import TotalPrice from "./TotalPrice"
|
|
|
|
import styles from "./rooms.module.css"
|
|
|
|
import type { SafeUser } from "@/types/user"
|
|
|
|
interface RoomsProps {
|
|
user: SafeUser
|
|
}
|
|
|
|
export default function Rooms({ user }: RoomsProps) {
|
|
const intl = useIntl()
|
|
const { allRoomsAreCancelled, room, rooms } = useMyStayStore((state) => ({
|
|
allRoomsAreCancelled: state.allRoomsAreCancelled,
|
|
hotel: state.hotel,
|
|
room: state.bookedRoom.room,
|
|
rooms: state.rooms,
|
|
}))
|
|
|
|
if (!room) {
|
|
return null
|
|
}
|
|
|
|
const isMultiRoom = rooms.length > 1
|
|
|
|
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]}
|
|
user={user}
|
|
/>
|
|
) : (
|
|
<div className={styles.roomsContainer}>
|
|
{rooms.map((booking, index) => (
|
|
<div
|
|
key={booking.confirmationNumber}
|
|
className={styles.roomWrapper}
|
|
>
|
|
<MultiRoom booking={booking} roomNr={index + 1} user={user} />
|
|
</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 />
|
|
</div>
|
|
|
|
{allRoomsAreCancelled ? null : <PriceDetails />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|