feat(SW-713): update folder structure

components/SidePeeks/RoomSidePeek/facilityIcon.ts

@@ -0,0 +1,124 @@
+import { FC } from "react"
+
+import {
+  AcIcon,
+  BathtubIcon,
+  BedDoubleIcon,
+  ChairIcon,
+  CityIcon,
+  DeskIcon,
+  HairdryerIcon,
+  HandSoapIcon,
+  HeartIcon,
+  IronIcon,
+  MirrorIcon,
+  NatureIcon,
+  NoSmokingIcon,
+  SafetyBoxIcon,
+  ShowerIcon,
+  StreetIcon,
+  WifiIcon,
+  WindowCurtainsAltIcon,
+  WindowNotAvailableIcon,
+  WineBarIcon,
+  WoodFloorIcon,
+  YardIcon,
+} from "@/components/Icons"
+
+import { IconProps } from "@/types/components/icon"
+
+export function getFacilityIcon(name: string): FC<IconProps> | null {
+  const iconMappings = [
+    {
+      icon: DeskIcon,
+      texts: ["Desk and chair"],
+    },
+    {
+      icon: HairdryerIcon,
+      texts: ["Hairdryer"],
+    },
+    {
+      icon: AcIcon,
+      texts: ["Air Condition"],
+    },
+    {
+      icon: ChairIcon,
+      texts: ["Armchair / armchairs"],
+    },
+    {
+      icon: BathtubIcon,
+      texts: ["Bathroom with shower or bathtub"],
+    },
+    {
+      icon: WindowCurtainsAltIcon,
+      texts: ["Blackout curtains"],
+    },
+    {
+      icon: MirrorIcon,
+      texts: ["Cosmetic mirror"],
+    },
+    {
+      icon: WifiIcon,
+      texts: ["Free WiFi"],
+    },
+    {
+      icon: ChairIcon,
+      texts: ["Connecting rooms"],
+    },
+    {
+      icon: YardIcon,
+      texts: ["View - atrium view"],
+    },
+    {
+      icon: CityIcon,
+      texts: ["View - city view"],
+    },
+    {
+      icon: NatureIcon,
+      texts: ["View - park view"],
+    },
+    {
+      icon: StreetIcon,
+      texts: ["View - street view"],
+    },
+    {
+      icon: WineBarIcon,
+      texts: ["Minibar"],
+    },
+    {
+      icon: NoSmokingIcon,
+      texts: ["Non smoking"],
+    },
+    {
+      icon: ShowerIcon,
+      texts: ["Rain shower"],
+    },
+    {
+      icon: SafetyBoxIcon,
+      texts: ["Safety box"],
+    },
+    {
+      icon: BedDoubleIcon,
+      texts: ["Set of two pillows"],
+    },
+    {
+      icon: IronIcon,
+      texts: ["Iron and ironing board"],
+    },
+    {
+      icon: HandSoapIcon,
+      texts: ["Toiletries"],
+    },
+    {
+      icon: WoodFloorIcon,
+      texts: ["Wooden floor"],
+    },
+    {
+      icon: WindowNotAvailableIcon,
+      texts: ["Not window"],
+    },
+  ]
+
+  const icon = iconMappings.find((icon) => icon.texts.includes(name))
+  return icon ? icon.icon : HeartIcon
+}

components/SidePeeks/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 "../../HotelReservation/SelectRate/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>
+  )
+}

components/SidePeeks/RoomSidePeek/roomSidePeek.module.css

@@ -0,0 +1,29 @@
+.button {
+  margin-left: auto;
+  padding: 0 0 0 var(--Spacing-x-half);
+  text-decoration: none;
+}
+
+.imageContainer {
+  min-height: 185px;
+  position: relative;
+}
+
+.description {
+  margin-top: var(--Spacing-x-one-and-half);
+  margin-bottom: var(--Spacing-x2);
+}
+.facilityList {
+  margin-top: var(--Spacing-x-one-and-half);
+  column-count: 2;
+  column-gap: var(--Spacing-x2);
+}
+.facilityList li {
+  display: flex;
+  gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
+}
+
+.noIcon {
+  margin-left: var(--Spacing-x4);
+}