feat(SW-415): Added Image gallery

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -4,7 +4,13 @@ import { useIntl } from "react-intl"
 import { RateDefinition } from "@/server/routers/hotels/output"
 
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
-import { ChevronRightSmallIcon } from "@/components/Icons"
+import {
+  ChevronRightSmallIcon,
+  GalleryIcon,
+  ImageIcon,
+} from "@/components/Icons"
+import Image from "@/components/Image"
+import Lightbox from "@/components/Lightbox"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -53,17 +59,22 @@ export default function RoomCard({
   }
 
   const roomSize = roomCategories.find(
-    (category) => category.name === roomConfiguration.roomType
+    (room) => room.name === roomConfiguration.roomType
   )?.roomSize
 
   const occupancy = roomCategories.find(
-    (category) => category.name === roomConfiguration.roomType
+    (room) => room.name === roomConfiguration.roomType
   )?.occupancy.total
 
   const roomDescription = roomCategories.find(
     (room) => room.name === roomConfiguration.roomType
   )?.descriptions.short
 
+  const images = roomCategories.find(
+    (room) => room.name === roomConfiguration.roomType
+  )?.images
+  const mainImage = images?.[0]
+
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
@@ -78,7 +89,10 @@ export default function RoomCard({
             )}
           </Caption>
           <Caption color="uiTextMediumContrast">
-            {roomSize?.min}-{roomSize?.max} m²
+            {roomSize?.min === roomSize?.max
+              ? roomSize?.min
+              : `${roomSize?.min}-${roomSize?.max}`}
+            m²
           </Caption>
           <Button
             intent="text"
@@ -103,7 +117,7 @@ export default function RoomCard({
               id: "Breakfast selection in next step.",
             })}
           </Caption>
-          <div>
+          <div className={styles.flexibilityOptions}>
             <FlexibilityOption
               name={intl.formatMessage({ id: "Non-refundable" })}
               value="non-refundable"
@@ -128,22 +142,41 @@ export default function RoomCard({
           </div>
         </div>
       </div>
-
-      <div className={styles.imageContainer}>
-        <span className={styles.roomsLeft}>
-          <Footnote
-            color="burgundy"
-            textTransform="uppercase"
-          >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
-        </span>
-        {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
-          alt={intl.formatMessage({ id: "A photo of the room" })}
-          // TODO: Correct image URL
-          src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
-        />
-      </div>
+      {mainImage && (
+        <div className={styles.imageContainer}>
+          {roomConfiguration.roomsLeft < 5 && (
+            <span className={styles.roomsLeft}>
+              <Footnote
+                color="burgundy"
+                textTransform="uppercase"
+              >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+            </span>
+          )}
+          {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
+         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
+          <Image
+            src={mainImage.imageSizes.small}
+            alt={mainImage.metaData.altText}
+            width={330}
+            height={185}
+          />
+          {images && (
+            <Lightbox
+              images={images.map((image) => ({
+                url: image.imageSizes.small,
+                alt: image.metaData.altText,
+                title: image.metaData.title,
+              }))}
+              dialogTitle={roomConfiguration.roomType}
+            >
+              <div className={styles.galleryIcon} id="lightboxTrigger">
+                <GalleryIcon color="white" />
+                <Footnote color="white">{images.length}</Footnote>
+              </div>
+            </Lightbox>
+          )}
+        </div>
+      )}
     </div>
   )
 }

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -44,6 +44,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x2);
 }
 
 .name {
@@ -57,6 +58,12 @@
   border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
 }
 
+.flexibilityOptions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
 .roomsLeft {
   position: absolute;
   top: 12px;
@@ -65,3 +72,22 @@
   padding: var(--Spacing-x-half) var(--Spacing-x1);
   border-radius: var(--Corner-radius-Small);
 }
+
+.imageContainer {
+  min-height: 185px;
+  position: relative;
+}
+
+.galleryIcon {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  height: 24px;
+  background-color: rgba(64, 57, 55, 0.9);
+  padding: 0 var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Small);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x-quarter);
+}