Merged in feat/SW-1521-image-gallery-lightbox (pull request #1226)

Feat/SW-1521 image gallery lightbox

* feat(SW-1453): added city listing component

* feat(SW-1521): added more generic types to ImageGallery and Lightbox components

* feat(SW-1521): added lightbox functionality for top images

* feat(SW-1521): added support for setting activeIndex on open inside Lightbox


Approved-by: Fredrik Thorsson
Approved-by: Chuma Mcphoy (We Ahead)

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -10,6 +10,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ReadMore from "../../ReadMore"
@@ -38,16 +39,14 @@ export default async function HotelInfoCard({
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
+  const galleryImages = mapApiImagesToGalleryImages(hotel?.galleryImages || [])
+
   return (
     <article className={styles.container}>
       {hotel && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            <ImageGallery
-              title={hotel.name}
-              images={hotel.galleryImages}
-              fill
-            />
+            <ImageGallery title={hotel.name} images={galleryImages} fill />
             {hotel.ratings?.tripAdvisor && (
               <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
             )}

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

@@ -13,6 +13,7 @@ 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 { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import FlexibilityOption from "../FlexibilityOption"
 import { cardVariants } from "./cardVariants"
@@ -184,6 +185,7 @@ export default function RoomCard({
       })
     }
   }
+  const galleryImages = mapApiImagesToGalleryImages(images || [])
 
   return (
     <li className={classNames}>
@@ -213,10 +215,8 @@ export default function RoomCard({
                 </span>
               ))}
           </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}
+            images={galleryImages}
             title={roomConfiguration.roomType}
             fill
           />