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
2024-10-29 13:54:12 +00:00
parent 8bea10a282
commit fc8844eb96
15 changed files with 82 additions and 111 deletions
--- 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}
--- 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)}
--- 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}>
--- 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}
--- 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>
--- 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>
            ))}
--- 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 {
--- 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)}
--- 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(),
--- 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
--- a/server/routers/utils/hotels.ts
+++ b/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
-}
--- 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
 }
--- 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 }
--- 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
--- 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>