From fc8844eb96dc4c1392ecff32adeb55cec319950c Mon Sep 17 00:00:00 2001
From: Bianca Widstam <bianca.widstam@scandichotels.com>
Date: Tue, 29 Oct 2024 13:54:12 +0000
Subject: [PATCH] feat/SW-689-image-gallery-sizes (pull request #781)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feat/SW-689 image gallery sizes

* feat(SW-689): initial gallery changes

* feat(SW-689): remove console.log

* feat(SW-689): remove unneccessary code

* feat(SW-689): change sizes

* feat(SW-689): change size

* feat(SW-689): add design for ipad for fullview

* feat(SW-689): fix import type

* feat(SW-689): fix tripAdvisor placement

* feat(SW-689): fix image gallery type

* feat(SW-689): fix check gallery length


Approved-by: Christian Andolf
Approved-by: Matilda Landström
---
 .../HotelPage/PreviewImages/index.tsx         |  6 +--
 components/ContentType/HotelPage/index.tsx    |  4 +-
 .../SelectRate/HotelInfoCard/index.tsx        | 17 ++++-----
 .../SelectRate/ImageGallery/index.tsx         |  9 +----
 components/Lightbox/FullView.tsx              | 10 +++--
 components/Lightbox/Gallery.tsx               | 38 ++++++++++---------
 components/Lightbox/Lightbox.module.css       | 19 ++++++++++
 components/Lightbox/index.tsx                 |  2 +-
 server/routers/hotels/output.ts               | 26 ++++---------
 server/routers/hotels/query.ts                |  3 +-
 server/routers/utils/hotels.ts                | 30 ---------------
 types/components/hotelPage/previewImages.ts   |  4 +-
 .../selectRate/imageGallery.ts                |  4 +-
 types/components/lightbox/lightbox.ts         | 16 +++-----
 types/hotel.ts                                |  5 +--
 15 files changed, 82 insertions(+), 111 deletions(-)
 delete mode 100644 server/routers/utils/hotels.ts

diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx
index 99704a61b..2a0074c5c 100644
--- a/components/ContentType/HotelPage/PreviewImages/index.tsx
+++ b/components/ContentType/HotelPage/PreviewImages/index.tsx
@@ -21,9 +21,9 @@ export default async function PreviewImages({
         {images.slice(0, 3).map((image, index) => (
           <Image
             key={index}
-            src={image.url}
-            alt={image.alt}
-            title={image.title}
+            src={image.imageSizes.medium}
+            alt={image.metaData.altText}
+            title={image.metaData.title}
             width={index === 0 ? 752 : 292}
             height={index === 0 ? 540 : 266}
             className={styles.image}
diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx
index d10244040..f5718a7f2 100644
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -63,7 +63,9 @@ export default async function HotelPage() {
   return (
     <div className={styles.pageContainer}>
       <div className={styles.hotelImages}>
-        <PreviewImages images={hotelImages} hotelName={hotelName} />
+        {hotelImages?.length && (
+          <PreviewImages images={hotelImages} hotelName={hotelName} />
+        )}
       </div>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
index 120c0385d..b48220795 100644
--- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
+++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
@@ -3,7 +3,6 @@ import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
-import Image from "@/components/Image"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -29,14 +28,6 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
       {hotelAttributes && (
         <section className={styles.wrapper}>
           <div className={styles.imageWrapper}>
-            {hotelAttributes.ratings?.tripAdvisor && (
-              <div className={styles.tripAdvisor}>
-                <TripAdvisorIcon color="burgundy" />
-                <Caption color="burgundy">
-                  {hotelAttributes.ratings.tripAdvisor.rating}
-                </Caption>
-              </div>
-            )}
             {hotelAttributes.gallery && (
               <ImageGallery
                 title={hotelAttributes.name}
@@ -46,6 +37,14 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
                 ]}
               />
             )}
+            {hotelAttributes.ratings?.tripAdvisor && (
+              <div className={styles.tripAdvisor}>
+                <TripAdvisorIcon color="burgundy" />
+                <Caption color="burgundy">
+                  {hotelAttributes.ratings.tripAdvisor.rating}
+                </Caption>
+              </div>
+            )}
           </div>
           <div className={styles.hotelContent}>
             <div className={styles.hotelInformation}>
diff --git a/components/HotelReservation/SelectRate/ImageGallery/index.tsx b/components/HotelReservation/SelectRate/ImageGallery/index.tsx
index 1d4500cdb..4ff21af9f 100644
--- a/components/HotelReservation/SelectRate/ImageGallery/index.tsx
+++ b/components/HotelReservation/SelectRate/ImageGallery/index.tsx
@@ -9,14 +9,7 @@ import type { ImageGalleryProps } from "@/types/components/hotelReservation/sele
 
 export default function ImageGallery({ images, title }: ImageGalleryProps) {
   return (
-    <Lightbox
-      images={images.map((image) => ({
-        url: image.imageSizes.small,
-        alt: image.metaData.altText,
-        title: image.metaData.title,
-      }))}
-      dialogTitle={title}
-    >
+    <Lightbox images={images} dialogTitle={title}>
       <div className={styles.triggerArea} id="lightboxTrigger">
         <Image
           src={images[0].imageSizes.medium}
diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx
index 5541d365b..360b7a276 100644
--- a/components/Lightbox/FullView.tsx
+++ b/components/Lightbox/FullView.tsx
@@ -40,7 +40,7 @@ export default function FullView({
       <div className={styles.fullViewImageContainer}>
         <AnimatePresence initial={false} custom={currentIndex}>
           <motion.div
-            key={image.url}
+            key={image.imageSizes.medium}
             custom={currentIndex}
             initial={{ opacity: 0, x: 300 }}
             animate={{ opacity: 1, x: 0 }}
@@ -49,14 +49,16 @@ export default function FullView({
             className={styles.fullViewImage}
           >
             <Image
-              alt={image.alt}
+              alt={image.metaData.altText}
               fill
-              src={image.url}
+              src={image.imageSizes.medium}
               style={{ objectFit: "cover" }}
             />
 
             <div className={styles.fullViewFooter}>
-              {image.title && <Body color="white">{image.title}</Body>}
+              {image.metaData.title && (
+                <Body color="white">{image.metaData.title}</Body>
+              )}
             </div>
           </motion.div>
         </AnimatePresence>
diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx
index 23149d3de..578cc961e 100644
--- a/components/Lightbox/Gallery.tsx
+++ b/components/Lightbox/Gallery.tsx
@@ -20,7 +20,7 @@ export default function Gallery({
   selectedImage,
 }: GalleryProps) {
   const mainImage = selectedImage || images[0]
-  const mainImageIndex = images.findIndex((img) => img.url === mainImage.url)
+  const mainImageIndex = images.findIndex((img) => img === mainImage)
 
   function getThumbImages() {
     const thumbs = []
@@ -55,16 +55,18 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <div className={styles.galleryHeader}>
-          {mainImage.title && (
+          {mainImage.metaData.title && (
             <div className={styles.imageCaption}>
-              <Caption color="textMediumContrast">{mainImage.title}</Caption>
+              <Caption color="textMediumContrast">
+                {mainImage.metaData.title}
+              </Caption>
             </div>
           )}
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} mode="wait">
             <motion.div
-              key={mainImage.url}
+              key={mainImage.imageSizes.medium}
               className={styles.mainImageContainer}
               initial={{ opacity: 0, x: 300 }}
               animate={{ opacity: 1, x: 0 }}
@@ -72,10 +74,10 @@ export default function Gallery({
               transition={{ duration: 0.3 }}
             >
               <Image
-                src={mainImage.url}
-                alt={mainImage.alt}
-                layout="fill"
-                objectFit="cover"
+                src={mainImage.imageSizes.medium}
+                alt={mainImage.metaData.altText}
+                fill
+                className={styles.image}
                 onClick={onImageClick}
               />
             </motion.div>
@@ -100,7 +102,7 @@ export default function Gallery({
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div
-                key={image.url}
+                key={image.imageSizes.tiny}
                 className={styles.thumbnailContainer}
                 onClick={() => onSelectImage(image)}
                 initial={{ opacity: 0, x: 50 }}
@@ -109,10 +111,10 @@ export default function Gallery({
                 transition={{ duration: 0.2, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.url}
-                  alt={image.alt}
-                  layout="fill"
-                  objectFit="cover"
+                  src={image.imageSizes.tiny}
+                  alt={image.metaData.altText}
+                  fill
+                  className={styles.image}
                 />
               </motion.div>
             ))}
@@ -139,7 +141,7 @@ export default function Gallery({
           <div className={styles.thumbnailGrid}>
             {images.map((image, index) => (
               <motion.div
-                key={image.url}
+                key={image.imageSizes.small}
                 className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
                 onClick={() => {
                   onSelectImage(image)
@@ -150,10 +152,10 @@ export default function Gallery({
                 transition={{ duration: 0.3, delay: index * 0.05 }}
               >
                 <Image
-                  src={image.url}
-                  alt={image.alt}
-                  layout="fill"
-                  objectFit="cover"
+                  src={image.imageSizes.small}
+                  alt={image.metaData.altText}
+                  fill
+                  className={styles.image}
                 />
               </motion.div>
             ))}
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css
index ae46b5a0e..c98745601 100644
--- a/components/Lightbox/Lightbox.module.css
+++ b/components/Lightbox/Lightbox.module.css
@@ -184,6 +184,25 @@
   max-width: 548px;
 }
 
+.image {
+  object-fit: cover;
+}
+
+@media (min-width: 768px) and (max-width: 1367px) {
+  .fullViewContainer {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    padding: var(--Spacing-x5);
+  }
+
+  .fullViewImageContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    max-height: 35rem;
+  }
+}
+
 @media (min-width: 1367px) {
   .mobileGallery,
   .thumbnailGrid {
diff --git a/components/Lightbox/index.tsx b/components/Lightbox/index.tsx
index f76063848..e9e5d8fa1 100644
--- a/components/Lightbox/index.tsx
+++ b/components/Lightbox/index.tsx
@@ -97,7 +97,7 @@ export default function Lightbox({
                       onClose={() => setIsOpen(false)}
                       onSelectImage={(image) => {
                         setSelectedImageIndex(
-                          images.findIndex((img) => img.url === image.url)
+                          images.findIndex((img) => img === image)
                         )
                       }}
                       onImageClick={() => setIsFullView(true)}
diff --git a/server/routers/hotels/output.ts b/server/routers/hotels/output.ts
index 182575c2d..e4c90c5dc 100644
--- a/server/routers/hotels/output.ts
+++ b/server/routers/hotels/output.ts
@@ -163,30 +163,20 @@ export const facilitySchema = z.object({
   ),
 })
 
+export const imageSchema = z.object({
+  metaData: imageMetaDataSchema,
+  imageSizes: imageSizesSchema,
+})
+
 export const gallerySchema = z.object({
-  heroImages: z.array(
-    z.object({
-      metaData: imageMetaDataSchema,
-      imageSizes: imageSizesSchema,
-    })
-  ),
-  smallerImages: z.array(
-    z.object({
-      metaData: imageMetaDataSchema,
-      imageSizes: imageSizesSchema,
-    })
-  ),
+  heroImages: z.array(imageSchema),
+  smallerImages: z.array(imageSchema),
 })
 
 const healthFacilitySchema = z.object({
   type: z.string(),
   content: z.object({
-    images: z.array(
-      z.object({
-        metaData: imageMetaDataSchema,
-        imageSizes: imageSizesSchema,
-      })
-    ),
+    images: z.array(imageSchema),
     texts: z.object({
       facilityInformation: z.string().optional(),
       surroundingInformation: z.string().optional(),
diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts
index 883b3a3ee..c7a1da08f 100644
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -9,7 +9,6 @@ import {
   notFound,
   serverErrorByStatus,
 } from "@/server/errors/trpc"
-import { extractHotelImages } from "@/server/routers/utils/hotels"
 import {
   contentStackUidWithServiceProcedure,
   publicProcedure,
@@ -230,7 +229,7 @@ export const hotelQueryRouter = router({
       const included = validatedHotelData.data.included || []
 
       const hotelAttributes = validatedHotelData.data.data.attributes
-      const images = extractHotelImages(hotelAttributes)
+      const images = hotelAttributes.gallery?.smallerImages
       const hotelAlerts = hotelAttributes.meta?.specialAlerts || []
 
       const roomCategories = included
diff --git a/server/routers/utils/hotels.ts b/server/routers/utils/hotels.ts
deleted file mode 100644
index 37ae167cb..000000000
--- a/server/routers/utils/hotels.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { ImageItem } from "@/types/components/lightbox/lightbox"
-import type { Hotel } from "@/types/hotel"
-
-export function extractHotelImages(hotelData: Hotel): ImageItem[] {
-  const images: ImageItem[] = []
-
-  if (hotelData.hotelContent?.images) {
-    images.push({
-      url: hotelData.hotelContent.images.imageSizes.large,
-      alt: hotelData.hotelContent.images.metaData.altText,
-      title:
-        hotelData.hotelContent.images.metaData.title ||
-        hotelData.hotelContent.images.metaData.altText,
-    })
-  }
-
-  if (hotelData.healthFacilities) {
-    hotelData.healthFacilities.forEach((facility) => {
-      facility.content.images.forEach((image) => {
-        images.push({
-          url: image.imageSizes.large,
-          alt: image.metaData.altText,
-          title: image.metaData.title || image.metaData.altText,
-        })
-      })
-    })
-  }
-
-  return images
-}
diff --git a/types/components/hotelPage/previewImages.ts b/types/components/hotelPage/previewImages.ts
index 204a23fd4..d808fdcf7 100644
--- a/types/components/hotelPage/previewImages.ts
+++ b/types/components/hotelPage/previewImages.ts
@@ -1,6 +1,6 @@
-import type { ImageItem } from "@/types/components/lightbox/lightbox"
+import type { GalleryImage } from "@/types/hotel"
 
 export type PreviewImagesProps = {
-  images: ImageItem[]
+  images: GalleryImage[]
   hotelName: string
 }
diff --git a/types/components/hotelReservation/selectRate/imageGallery.ts b/types/components/hotelReservation/selectRate/imageGallery.ts
index 333ff2d94..5d75189fa 100644
--- a/types/components/hotelReservation/selectRate/imageGallery.ts
+++ b/types/components/hotelReservation/selectRate/imageGallery.ts
@@ -1,3 +1,3 @@
-import type { GalleryImages } from "@/types/hotel"
+import type { GalleryImage } from "@/types/hotel"
 
-export type ImageGalleryProps = { images: GalleryImages; title: string }
+export type ImageGalleryProps = { images: GalleryImage[]; title: string }
diff --git a/types/components/lightbox/lightbox.ts b/types/components/lightbox/lightbox.ts
index fc8d11066..af592bca6 100644
--- a/types/components/lightbox/lightbox.ts
+++ b/types/components/lightbox/lightbox.ts
@@ -1,26 +1,22 @@
-export interface ImageItem {
-  url: string
-  alt: string
-  title: string
-}
+import type { GalleryImage } from "@/types/hotel"
 
 export interface LightboxProps {
-  images: ImageItem[]
+  images: GalleryImage[]
   dialogTitle: string /* Accessible title for dialog screen readers */
   children: React.ReactNode
 }
 
 export interface GalleryProps {
-  images: ImageItem[]
+  images: GalleryImage[]
   dialogTitle: string
   onClose: () => void
-  onSelectImage: (image: ImageItem) => void
+  onSelectImage: (image: GalleryImage) => void
   onImageClick: () => void
-  selectedImage: ImageItem | null
+  selectedImage: GalleryImage | null
 }
 
 export interface FullViewProps {
-  image: ImageItem
+  image: GalleryImage
   onClose: () => void
   onNext: () => void
   onPrev: () => void
diff --git a/types/hotel.ts b/types/hotel.ts
index 972c6459e..9c95a9067 100644
--- a/types/hotel.ts
+++ b/types/hotel.ts
@@ -2,8 +2,8 @@ import { z } from "zod"
 
 import {
   facilitySchema,
-  gallerySchema,
   getHotelDataSchema,
+  imageSchema,
   parkingSchema,
   pointOfInterestSchema,
 } from "@/server/routers/hotels/output"
@@ -22,8 +22,7 @@ export type HotelTripAdvisor =
   | undefined
 
 export type RoomData = z.infer<typeof roomSchema>
-export type GallerySchema = z.infer<typeof gallerySchema>
-export type GalleryImages = GallerySchema["heroImages"]
+export type GalleryImage = z.infer<typeof imageSchema>
 
 export type PointOfInterest = z.output<typeof pointOfInterestSchema>