feat(SW-842): Some refactoring regarding room card

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import ImageGallery from "@/components/ImageGallery"
 import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -10,7 +11,6 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../../ReadMore"
-import ImageGallery from "../ImageGallery"
 
 import styles from "./hotelInfoCard.module.css"
 
@@ -32,6 +32,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
             <ImageGallery
               title={hotelAttributes.name}
               images={hotelAttributes.galleryImages}
+              fill
             />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>

components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css

@@ -1,34 +0,0 @@
-.galleryIcon {
-  position: absolute;
-  bottom: 16px;
-  right: 16px;
-  max-height: 32px;
-  width: 48px;
-  background-color: rgba(0, 0, 0, 0.6);
-  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Small);
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x-quarter);
-}
-
-.triggerArea {
-  cursor: pointer;
-}
-
-.imagePlaceholder {
-  height: 100%;
-  min-height: 190px;
-  width: 100%;
-  background-color: #fff;
-  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
-    linear-gradient(-45deg, #000000 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #000000 75%),
-    linear-gradient(-45deg, transparent 75%, #000000 75%);
-  background-size: 160px 160px;
-  background-position:
-    0 0,
-    0 80px,
-    80px -80px,
-    -80px 0;
-}

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import { useState } from "react"
-
-import { GalleryIcon } from "@/components/Icons"
-import Image from "@/components/Image"
-import Lightbox from "@/components/Lightbox"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
-
-import styles from "./imageGallery.module.css"
-
-import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
-
-export default function ImageGallery({ images, title }: ImageGalleryProps) {
-  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
-
-  if (!images || images.length === 0) {
-    return <div className={styles.imagePlaceholder} />
-  }
-
-  return (
-    <>
-      <div
-        className={styles.triggerArea}
-        role="button"
-        onClick={() => setLightboxIsOpen(true)}
-      >
-        <Image
-          src={images[0].imageSizes.medium}
-          alt={images[0].metaData.altText}
-          fill
-        />
-        <div className={styles.galleryIcon}>
-          <GalleryIcon color="white" />
-          <Footnote color="white" type="label">
-            {images.length}
-          </Footnote>
-        </div>
-      </div>
-      <Lightbox
-        images={images}
-        dialogTitle={title}
-        isOpen={lightboxIsOpen}
-        onClose={() => setLightboxIsOpen(false)}
-      />
-    </>
-  )
-}

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

@@ -7,11 +7,11 @@ import { RateDefinition } from "@/server/routers/hotels/output"
 
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
+import ImageGallery from "@/components/ImageGallery"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import ImageGallery from "../../ImageGallery"
 import { getIconForFeatureCode } from "../../utils"
 
 import styles from "./roomCard.module.css"
@@ -164,7 +164,11 @@ export default function RoomCard({
           </div>
           {/*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. */}
-          <ImageGallery images={images} title={roomConfiguration.roomType} />
+          <ImageGallery
+            images={images}
+            title={roomConfiguration.roomType}
+            fill
+          />
         </div>
       )}
     </div>