0efa52ada5
Create the sidepeek for a specific roomtype. This also changes the lightbox to use react-aria instead of radix-ui, so we use the same for the lightbox and the sidepeek. Works better together! Approved-by: Bianca Widstam
97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { ChevronRightSmallIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import ImageGallery from "../../ImageGallery"
|
|
import { getFacilityIcon } from "./facilityIcon"
|
|
|
|
import styles from "./roomSidePeek.module.css"
|
|
|
|
import type { RoomSidePeekProps } from "@/types/components/hotelReservation/selectRate/roomSidePeek"
|
|
|
|
export default function RoomSidePeek({
|
|
selectedRoom,
|
|
roomConfiguration,
|
|
}: RoomSidePeekProps) {
|
|
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
|
|
const intl = useIntl()
|
|
|
|
const roomSize = selectedRoom?.roomSize
|
|
const occupancy = selectedRoom?.occupancy.total
|
|
const roomDescription = selectedRoom?.descriptions.medium
|
|
const images = selectedRoom?.images
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
intent="text"
|
|
type="button"
|
|
size="small"
|
|
theme="base"
|
|
className={styles.button}
|
|
onClick={() => setIsSidePeekOpen(true)}
|
|
>
|
|
{intl.formatMessage({ id: "See room details" })}
|
|
<ChevronRightSmallIcon color="burgundy" width={20} height={20} />
|
|
</Button>
|
|
|
|
<SidePeek
|
|
title={roomConfiguration.roomType}
|
|
isOpen={isSidePeekOpen}
|
|
handleClose={() => setIsSidePeekOpen(false)}
|
|
>
|
|
<Body color="baseTextMediumContrast">
|
|
{roomSize?.min === roomSize?.max
|
|
? roomSize?.min
|
|
: `${roomSize?.min} - ${roomSize?.max}`}
|
|
m².{" "}
|
|
{intl.formatMessage(
|
|
{
|
|
id: "booking.accommodatesUpTo",
|
|
},
|
|
{ nrOfGuests: occupancy }
|
|
)}
|
|
</Body>
|
|
|
|
{images && (
|
|
<div className={styles.imageContainer}>
|
|
<ImageGallery images={images} title={roomConfiguration.roomType} />
|
|
</div>
|
|
)}
|
|
|
|
<Body className={styles.description} color="uiTextHighContrast">
|
|
{roomDescription}
|
|
</Body>
|
|
<Subtitle type="two" color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
|
|
</Subtitle>
|
|
<ul className={styles.facilityList}>
|
|
{selectedRoom?.roomFacilities
|
|
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
.map((facility) => {
|
|
const Icon = getFacilityIcon(facility.name)
|
|
|
|
return (
|
|
<li key={facility.name}>
|
|
{Icon && <Icon color="uiTextMediumContrast" />}
|
|
<Body
|
|
asChild
|
|
className={!Icon ? styles.noIcon : undefined}
|
|
color="uiTextMediumContrast"
|
|
>
|
|
<span>{facility.name}</span>
|
|
</Body>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</SidePeek>
|
|
</div>
|
|
)
|
|
}
|