97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useMyStayStore } from "@/stores/my-stay"
|
|
|
|
import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
|
|
import PriceDetails from "@/components/HotelReservation/MyStay/PriceDetails"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
|
|
import BookingInformation from "./BookingInformation"
|
|
import Details from "./Details"
|
|
import Header from "./Header"
|
|
import Img from "./Img"
|
|
import Packages from "./Packages"
|
|
|
|
import styles from "./room.module.css"
|
|
|
|
import type { SafeUser } from "@/types/user"
|
|
|
|
interface RoomProps {
|
|
user: SafeUser
|
|
}
|
|
|
|
export default function SingleRoom({ user }: RoomProps) {
|
|
const {
|
|
confirmationNumber,
|
|
guest,
|
|
isCancelled,
|
|
isMultiRoom,
|
|
roomName,
|
|
roomNumber,
|
|
} = useMyStayStore((state) => ({
|
|
confirmationNumber: state.bookedRoom.confirmationNumber,
|
|
guest: state.bookedRoom.guest,
|
|
isCancelled: state.bookedRoom.isCancelled,
|
|
isMultiRoom: state.rooms.length > 1,
|
|
roomName: state.bookedRoom.roomName,
|
|
roomNumber: state.bookedRoom.roomNumber,
|
|
}))
|
|
|
|
if (isMultiRoom) {
|
|
return null
|
|
}
|
|
|
|
if (!roomNumber) {
|
|
return (
|
|
<div className={styles.room}>
|
|
<SkeletonShimmer width={"200px"} height="30px" />
|
|
<SkeletonShimmer width="100%" height="750px" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.container}>
|
|
<article className={styles.room}>
|
|
<Typography variant="Title/Subtitle/lg">
|
|
<p className={styles.roomName}>{roomName}</p>
|
|
</Typography>
|
|
<Header user={user} />
|
|
<div className={styles.booking}>
|
|
<div
|
|
className={`${styles.content} ${isCancelled ? styles.cancelled : ""}`}
|
|
>
|
|
<Packages />
|
|
<Img />
|
|
<div className={styles.roomDetails}>
|
|
<Details />
|
|
<div className={styles.guestDetailsDesktopWrapper}>
|
|
<GuestDetails
|
|
confirmationNumber={confirmationNumber}
|
|
guest={guest}
|
|
isCancelled={isCancelled}
|
|
user={user}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<BookingInformation />
|
|
</div>
|
|
<PriceDetails />
|
|
<div className={styles.guestDetailsMobileWrapper}>
|
|
<GuestDetails
|
|
confirmationNumber={confirmationNumber}
|
|
guest={guest}
|
|
isCancelled={isCancelled}
|
|
user={user}
|
|
/>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|