71 lines
1.8 KiB
TypeScript
71 lines
1.8 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 TotalPrice from "../TotalPrice"
|
|
import Room from "./Room"
|
|
|
|
import styles from "./multiRoom.module.css"
|
|
|
|
import type { SafeUser } from "@/types/user"
|
|
|
|
interface MultiRoomProps {
|
|
user: SafeUser
|
|
}
|
|
|
|
export default function MultiRoom(props: MultiRoomProps) {
|
|
const intl = useIntl()
|
|
const { allRoomsAreCancelled, rooms } = useMyStayStore((state) => ({
|
|
allRoomsAreCancelled: state.allRoomsAreCancelled,
|
|
rooms: state.rooms,
|
|
}))
|
|
|
|
if (rooms.length <= 1) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<Typography variant="Title/sm">
|
|
<h2 className={styles.title}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Your rooms",
|
|
})}
|
|
</h2>
|
|
</Typography>
|
|
<div className={styles.container}>
|
|
<div className={styles.roomsContainer}>
|
|
{rooms.map((booking, index) => (
|
|
<div
|
|
key={booking.confirmationNumber}
|
|
className={styles.roomWrapper}
|
|
>
|
|
<Room {...props} booking={booking} roomNr={index + 1} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<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>
|
|
)
|
|
}
|