feat/SW-689-image-gallery-sizes (pull request #781)

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

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}
+            src={image.imageSizes.medium}
-            alt={image.alt}
+            alt={image.metaData.altText}
-            title={image.title}
+            title={image.metaData.title}
             width={index === 0 ? 752 : 292}
             height={index === 0 ? 540 : 266}
             className={styles.image}

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)}

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}>

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
+    <Lightbox images={images} dialogTitle={title}>
-      images={images.map((image) => ({
-        url: image.imageSizes.small,
-        alt: image.metaData.altText,
-        title: image.metaData.title,
-      }))}
-      dialogTitle={title}
-    >
       <div className={styles.triggerArea} id="lightboxTrigger">
         <Image
           src={images[0].imageSizes.medium}

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>

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}
+                src={mainImage.imageSizes.medium}
-                alt={mainImage.alt}
+                alt={mainImage.metaData.altText}
-                layout="fill"
+                fill
-                objectFit="cover"
+                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}
+                  src={image.imageSizes.tiny}
-                  alt={image.alt}
+                  alt={image.metaData.altText}
-                  layout="fill"
+                  fill
-                  objectFit="cover"
+                  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}
+                  src={image.imageSizes.small}
-                  alt={image.alt}
+                  alt={image.metaData.altText}
-                  layout="fill"
+                  fill
-                  objectFit="cover"
+                  className={styles.image}
                 />
               </motion.div>
             ))}

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 {

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)}

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(
+  heroImages: z.array(imageSchema),
-    z.object({
+  smallerImages: z.array(imageSchema),
-      metaData: imageMetaDataSchema,
-      imageSizes: imageSizesSchema,
-    })
-  ),
-  smallerImages: z.array(
-    z.object({
-      metaData: imageMetaDataSchema,
-      imageSizes: imageSizesSchema,
-    })
-  ),
 })
 
 const healthFacilitySchema = z.object({
   type: z.string(),
   content: z.object({
-    images: z.array(
+    images: z.array(imageSchema),
-      z.object({
-        metaData: imageMetaDataSchema,
-        imageSizes: imageSizesSchema,
-      })
-    ),
     texts: z.object({
       facilityInformation: z.string().optional(),
       surroundingInformation: z.string().optional(),

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

server/routers/utils/hotels.ts

@@ -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
-}

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
 }

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 }

types/components/lightbox/lightbox.ts

@@ -1,26 +1,22 @@
-export interface ImageItem {
+import type { GalleryImage } from "@/types/hotel"
-  url: string
-  alt: string
-  title: string
-}
 
 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

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 GalleryImage = z.infer<typeof imageSchema>
-export type GalleryImages = GallerySchema["heroImages"]
 
 export type PointOfInterest = z.output<typeof pointOfInterestSchema>