feat(SW-828): Moved placeholder image to ImageGallery

components/HotelReservation/HotelCard/index.tsx

@@ -56,12 +56,7 @@ export default function HotelCard({
       onMouseLeave={handleMouseLeave}
     >
       <section className={styles.imageContainer}>
-        {hotelData?.galleryImages && (
-          <ImageGallery
-            title={hotelData.name}
-            images={hotelData.galleryImages}
-          />
-        )}
+        <ImageGallery title={hotelData.name} images={hotelData.galleryImages} />
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -29,12 +29,10 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            {hotelAttributes?.galleryImages && (
-              <ImageGallery
-                title={hotelAttributes.name}
-                images={hotelAttributes.galleryImages}
-              />
-            )}
+            <ImageGallery
+              title={hotelAttributes.name}
+              images={hotelAttributes.galleryImages}
+            />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>
                 <TripAdvisorIcon color="burgundy" />

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

@@ -15,3 +15,20 @@
 .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

@@ -8,6 +8,9 @@ import styles from "./imageGallery.module.css"
 import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
 
 export default function ImageGallery({ images, title }: ImageGalleryProps) {
+  if (!images || images.length === 0)
+    return <div className={styles.imagePlaceholder} />
+
   return (
     <Lightbox images={images} dialogTitle={title}>
       <div className={styles.triggerArea} id="lightboxTrigger">

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

@@ -164,11 +164,7 @@ 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. */}
-          {images ? (
-            <ImageGallery images={images} title={roomConfiguration.roomType} />
-          ) : (
-            <div className={styles.imagePlaceholder} />
-          )}
+          <ImageGallery images={images} title={roomConfiguration.roomType} />
         </div>
       )}
     </div>

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

@@ -81,20 +81,3 @@
   min-height: 190px;
   position: relative;
 }
-
-.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/SidePeeks/RoomSidePeek/index.tsx

@@ -43,11 +43,9 @@ export default function RoomSidePeek({
               { nrOfGuests: occupancy }
             )}
           </Body>
-          {images && (
-            <div className={styles.imageContainer}>
-              <ImageGallery images={images} title={room.name} />
-            </div>
-          )}
+          <div className={styles.imageContainer}>
+            <ImageGallery images={images} title={room.name} />
+          </div>
           <Body color="uiTextHighContrast">{roomDescription}</Body>
         </div>
         <div className={styles.listContainer}>

types/components/hotelReservation/selectRate/imageGallery.ts

@@ -1,3 +1,3 @@
 import type { GalleryImage } from "@/types/hotel"
 
-export type ImageGalleryProps = { images: GalleryImage[]; title: string }
+export type ImageGalleryProps = { images?: GalleryImage[]; title: string }