Merged in feat/sw-587-sidepeek-for-room (pull request #767)

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
2024-10-25 14:11:06 +00:00
parent 830727f20d
commit 0efa52ada5
38 changed files with 1055 additions and 45 deletions
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomSidePeek/index.tsx
@@ -0,0 +1,96 @@
+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>
+  )
+}