126 lines
4.3 KiB
TypeScript
126 lines
4.3 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import ImageGallery from "@/components/ImageGallery"
|
|
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import { getBedIcon } from "./bedIcon"
|
|
import { getFacilityIcon } from "./facilityIcon"
|
|
|
|
import styles from "./roomSidePeek.module.css"
|
|
|
|
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
|
|
import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek"
|
|
|
|
export default function RoomSidePeek({
|
|
room,
|
|
activeSidePeek,
|
|
close,
|
|
}: RoomSidePeekProps) {
|
|
const intl = useIntl()
|
|
|
|
const roomSize = room.roomSize
|
|
const totalOccupancy = room.occupancy
|
|
const roomDescription = room.descriptions.medium
|
|
const images = room.images
|
|
|
|
return (
|
|
<SidePeek
|
|
title={room.name}
|
|
isOpen={activeSidePeek === SidePeekEnum.roomDetails}
|
|
handleClose={close}
|
|
>
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.mainContent}>
|
|
<Body color="baseTextMediumContrast">
|
|
{roomSize.min === roomSize.max
|
|
? intl.formatMessage(
|
|
{
|
|
id: "{roomSize} m². Accommodates up to {max, plural, one {{range} person} other {{range} people}}",
|
|
},
|
|
{
|
|
roomSize: roomSize.min,
|
|
max: room.totalOccupancy.max,
|
|
range: room.totalOccupancy.range,
|
|
}
|
|
)
|
|
: intl.formatMessage(
|
|
{
|
|
id: "{roomSizeMin} - {roomSizeMax} m². Accommodates up to {max, plural, one {{range} person} other {{range} people}}",
|
|
},
|
|
{
|
|
roomSizeMin: roomSize.min,
|
|
roomSizeMax: roomSize.max,
|
|
max: room.totalOccupancy.max,
|
|
range: room.totalOccupancy.range,
|
|
}
|
|
)}
|
|
</Body>
|
|
<div className={styles.imageContainer}>
|
|
<ImageGallery images={images} title={room.name} height={280} />
|
|
</div>
|
|
<Body color="uiTextHighContrast">{roomDescription}</Body>
|
|
</div>
|
|
<div className={styles.listContainer}>
|
|
<Subtitle type="two" color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "This room is equipped with" })}
|
|
</Subtitle>
|
|
<ul className={styles.facilityList}>
|
|
{room.roomFacilities
|
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
.map((facility) => {
|
|
const Icon = getFacilityIcon(facility.icon)
|
|
return (
|
|
<li key={facility.name}>
|
|
{Icon && (
|
|
<Icon
|
|
width={24}
|
|
height={24}
|
|
color="uiTextMediumContrast"
|
|
/>
|
|
)}
|
|
<Body
|
|
asChild
|
|
className={!Icon ? styles.noIcon : undefined}
|
|
color="uiTextMediumContrast"
|
|
>
|
|
<span>{facility.name}</span>
|
|
</Body>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
<div className={styles.listContainer}>
|
|
<Subtitle type="two" color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "Bed options" })}
|
|
</Subtitle>
|
|
<Body color="grey">
|
|
{intl.formatMessage({ id: "Based on availability" })}
|
|
</Body>
|
|
<ul className={styles.bedOptions}>
|
|
{room.roomTypes.map((roomType) => {
|
|
const BedIcon = getBedIcon(roomType.mainBed.type)
|
|
return (
|
|
<li key={roomType.code}>
|
|
{BedIcon && (
|
|
<BedIcon
|
|
color="uiTextMediumContrast"
|
|
width={24}
|
|
height={24}
|
|
/>
|
|
)}
|
|
<Body color="uiTextMediumContrast" asChild>
|
|
<span>{roomType.mainBed.description}</span>
|
|
</Body>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</SidePeek>
|
|
)
|
|
}
|