From 60b6f0457bd58442f488724eb98791da3bceefc7 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 13 Nov 2024 14:18:33 +0100
Subject: [PATCH] feat(SW-828): Moved placeholder image to ImageGallery

---
 components/HotelReservation/HotelCard/index.tsx |  7 +------
 .../SelectRate/HotelInfoCard/index.tsx          | 10 ++++------
 .../ImageGallery/imageGallery.module.css        | 17 +++++++++++++++++
 .../SelectRate/ImageGallery/index.tsx           |  3 +++
 .../SelectRate/RoomSelection/RoomCard/index.tsx |  6 +-----
 .../RoomSelection/RoomCard/roomCard.module.css  | 17 -----------------
 components/SidePeeks/RoomSidePeek/index.tsx     |  8 +++-----
 .../hotelReservation/selectRate/imageGallery.ts |  2 +-
 8 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 623990987..87b191cf0 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/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" />
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
index 1d0fb8df7..9ec4cf8fd 100644
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/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" />
diff --git a/components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css b/components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css
index 5d156f77a..c346f4d04 100644
--- a/components/HotelReservation/SelectRate/ImageGallery/imageGallery.module.css
+++ b/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;
+}
diff --git a/components/HotelReservation/SelectRate/ImageGallery/index.tsx b/components/HotelReservation/SelectRate/ImageGallery/index.tsx
index 4ff21af9f..83a88c3d0 100644
--- a/components/HotelReservation/SelectRate/ImageGallery/index.tsx
+++ b/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">
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index 83602b102..fc4681412 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/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>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
index 9567e3734..799726d1b 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/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;
-}
diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx
index 4a66117b8..2453968e8 100644
--- a/components/SidePeeks/RoomSidePeek/index.tsx
+++ b/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}>
diff --git a/types/components/hotelReservation/selectRate/imageGallery.ts b/types/components/hotelReservation/selectRate/imageGallery.ts
index 5d75189fa..0c16c82e0 100644
--- a/types/components/hotelReservation/selectRate/imageGallery.ts
+++ b/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 }