feat(SW-3151): Added original to imageSchema and added transform to a more generic image type

Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -45,8 +45,11 @@ function CardContent({ stay }: StayCardProps) {
     <article className={styles.stay}>
       <Image
         className={styles.image}
-        alt={hotelInformation.hotelContent.images.metaData.altText}
+        alt={
-        src={hotelInformation.hotelContent.images.imageSizes.small}
+          hotelInformation.hotelContent.images.altText ||
+          hotelInformation.hotelContent.images.altText_En
+        }
+        src={hotelInformation.hotelContent.images.src}
         width={420}
         height={240}
       />

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -41,8 +41,8 @@ export default async function HotelListingItem({
   return (
     <article className={styles.container}>
       <Image
-        src={image.imageSizes.large}
+        src={image.src}
-        alt={image.metaData.altText || image.metaData.altText_En}
+        alt={image.altText || image.altText_En}
         width={400}
         height={300}
         sizes="(min-width: 768px) 400px, 100vw"

apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx

@@ -63,10 +63,12 @@ export default function HotelCardCarousel({
 }
 
 function getImage({ hotel }: Pick<HotelListingHotelData, "hotel">) {
-  return {
+  if (hotel.galleryImages?.length) {
-    src: hotel.galleryImages?.[0]?.imageSizes.large,
+    const image = hotel.galleryImages[0]
-    alt:
+    return {
-      hotel.galleryImages?.[0]?.metaData.altText ||
+      src: image.src,
-      hotel.galleryImages?.[0]?.metaData.altText_En,
+      alt: image.altText || image.altText_En,
+    }
   }
+  return null
 }

apps/scandic-web/components/ContentType/DestinationPage/Map/utils.ts

@@ -53,10 +53,12 @@ export function getHotelMapMarkers(hotels: HotelListingHotelData[]) {
 }
 
 function getImage({ hotel }: Pick<HotelListingHotelData, "hotel">) {
-  return {
+  if (hotel.galleryImages?.length) {
-    src: hotel.galleryImages?.[0]?.imageSizes.large,
+    const image = hotel.galleryImages[0]
-    alt:
+    return {
-      hotel.galleryImages?.[0]?.metaData.altText ||
+      src: image.src,
-      hotel.galleryImages?.[0]?.metaData.altText_En,
+      alt: image.altText || image.altText_En,
+    }
   }
+  return null
 }

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx

@@ -17,11 +17,11 @@ export default function SidePeekImages({ images }: SidePeekImagesProps) {
 
   return (
     <div className={styles.sidePeekImages}>
-      {images.map(({ metaData, imageSizes }) => (
+      {images.map(({ src, altText, altText_En }) => (
         <Image
-          key={imageSizes.tiny}
+          key={src}
-          src={imageSizes.tiny}
+          src={src}
-          alt={metaData.altText}
+          alt={altText || altText_En}
           height={240}
           width={imageWidth}
           sizes={sizesString}

apps/scandic-web/components/ContentType/HotelSubpage/HeroHeader/index.tsx

@@ -26,8 +26,8 @@ export default async function HeroHeader({
       {heroImage ? (
         <div className={styles.heroWrapper}>
           <Hero
-            src={heroImage.imageSizes.medium}
+            src={heroImage.src}
-            alt={heroImage.metaData.altText || ""}
+            alt={heroImage.altText || heroImage.altText_En}
           />
         </div>
       ) : null}

apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx

@@ -20,8 +20,8 @@ export default async function HotelHeader({
     <header className={styles.header}>
       <Image
         className={styles.hero}
-        alt={image.metaData.altText || image.metaData.altText_En || ""}
+        alt={image.altText || image.altText_En || ""}
-        src={image.imageSizes.large}
+        src={image.src}
         height={200}
         width={1196}
       />

apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx

@@ -21,8 +21,8 @@ export default function Promo({
           <div className={styles.imageContainer}>
             <Image
               className={styles.image}
-              src={image.imageSizes.large}
+              src={image.src}
-              alt={image.metaData.altText}
+              alt={image.altText || image.altText_En}
               fill
             />
           </div>

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -12,6 +12,7 @@ import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import IconChip from "@scandic-hotels/design-system/IconChip"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
@@ -215,11 +216,11 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
           </div>
         )}
         <div className={styles.imageContainer}>
-          <Image
+          {room?.images[0]?.src ? (
-            src={room?.images[0]?.imageSizes.small ?? ""}
+            <Image src={room.images[0].src} alt={roomName} fill />
-            alt={roomName}
+          ) : (
-            fill
+            <ImageFallback />
-          />
+          )}
         </div>
         <div className={styles.details}>
           <div className={styles.row}>

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -19,13 +20,17 @@ export default function Img() {
 
   return (
     <div className={styles.imageContainer}>
-      <Image
+      {image?.src ? (
-        alt={roomName}
+        <Image
-        className={styles.image}
+          alt={roomName}
-        height={960}
+          className={styles.image}
-        src={image?.imageSizes.small ?? ""}
+          height={960}
-        width={640}
+          src={image.src}
-      />
+          width={640}
+        />
+      ) : (
+        <ImageFallback height="640px" />
+      )}
     </div>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/index.tsx

@@ -168,9 +168,9 @@ export default async function MyStay(props: {
     }
 
     const imageSrc =
-      hotel.hotelContent.images.imageSizes.large ??
+      hotel.hotelContent.images.src ||
-      additionalData.gallery?.heroImages[0]?.imageSizes.large ??
+      additionalData.gallery?.heroImages[0]?.src ||
-      hotel.galleryImages[0]?.imageSizes.large
+      hotel.galleryImages[0]?.src
 
     const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
     const promoUrl = new URL(`${baseUrl}/${lang}/`)

apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx

@@ -34,10 +34,10 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
 
   return (
     <article className={styles.card}>
-      {image?.imageSizes.small ? (
+      {image?.src ? (
         <Image
-          src={image?.imageSizes.small}
+          src={image.src}
-          alt={image?.metaData.altText || image?.metaData.altText_En || ""}
+          alt={image.altText || image.altText_En || ""}
           className={styles.image}
           width={386}
           height={200}

apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts

@@ -1,13 +1,8 @@
-import type { imageSchema } from "@scandic-hotels/trpc/routers/hotels/schemas/image"
 import type { ProductTypeCheque } from "@scandic-hotels/trpc/types/availability"
 import type { Amenities } from "@scandic-hotels/trpc/types/hotel"
-import type { z } from "zod"
 
 import type { Coordinates } from "@/types/components/maps/coordinates"
 
-type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
-type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
-
 export type HotelPin = {
   bookingCode?: string | null
   name: string
@@ -20,8 +15,11 @@ export type HotelPin = {
   rateType: string | null
   currency: string
   images: {
-    imageSizes: ImageSizes
+    src: string
-    metaData: ImageMetaData
+    altText: string
+    altText_En: string
+    title: string
+    title_En: string
   }[]
   amenities: Amenities
   ratings: number | null

apps/scandic-web/types/components/imageGallery.ts

@@ -2,5 +2,4 @@ export interface GalleryImage {
   src: string
   alt: string
   caption?: string | null
-  smallSrc?: string | null
 }

apps/scandic-web/utils/facilityCards.ts

@@ -124,16 +124,16 @@ export function setFacilityCardGrids(
           // Can be a maximum 2 images per grid
           const img: FacilityImage = {
             backgroundImage: {
-              url: image.imageSizes.large,
+              url: image.src,
-              title: image.metaData.title || image.metaData.title_En,
+              title: image.title || image.title_En,
               meta: {
-                alt: image.metaData.altText,
+                alt: image.altText,
-                caption: image.metaData.altText_En,
+                caption: image.altText_En,
               },
-              id: image.imageSizes.large,
+              id: image.src,
             },
             theme: "image",
-            id: image.imageSizes.large,
+            id: image.src,
           }
           return img
         })

apps/scandic-web/utils/imageGallery.ts

@@ -5,14 +5,13 @@ import type { GalleryImage } from "@/types/components/imageGallery"
 
 function mapApiImageToGalleryImage(apiImage: ApiImage): GalleryImage {
   return {
-    src: apiImage.imageSizes.medium,
+    src: apiImage.src,
     alt:
-      apiImage.metaData.altText ||
+      apiImage.altText ||
-      apiImage.metaData.altText_En ||
+      apiImage.altText_En ||
-      apiImage.metaData.title ||
+      apiImage.title ||
-      apiImage.metaData.title_En,
+      apiImage.title_En,
-    caption: apiImage.metaData.title || apiImage.metaData.title_En,
+    caption: apiImage.title || apiImage.title_En,
-    smallSrc: apiImage.imageSizes.small,
   }
 }
 

apps/scandic-web/utils/jsonSchemas.ts

@@ -61,8 +61,8 @@ export function generateHotelSchema(hotelData: HotelData) {
   if (image) {
     jsonLd.image = {
       "@type": "ImageObject",
-      url: image.imageSizes.small,
+      url: image.src,
-      caption: image.metaData.title || image.metaData.title_En,
+      caption: image.title || image.title_En,
     }
   }
 

apps/scandic-web/utils/metadata/image.ts

@@ -24,11 +24,8 @@ export function getImage(data: RawMetadataSchema) {
       const restaurantImage = restaurantSubPage?.content?.images?.[0]
       if (restaurantImage) {
         subpageImage = {
-          url: restaurantImage.imageSizes.small,
+          url: restaurantImage.src,
-          alt:
+          alt: restaurantImage.altText || restaurantImage.altText_En || "",
-            restaurantImage.metaData.altText ||
-            restaurantImage.metaData.altText_En ||
-            "",
         }
       }
 
@@ -38,11 +35,8 @@ export function getImage(data: RawMetadataSchema) {
             data.additionalHotelData?.parkingImages?.heroImages[0]
           if (parkingImage) {
             subpageImage = {
-              url: parkingImage.imageSizes.small,
+              url: parkingImage.src,
-              alt:
+              alt: parkingImage.altText || parkingImage.altText_En || "",
-                parkingImage.metaData.altText ||
-                parkingImage.metaData.altText_En ||
-                "",
             }
           }
           break
@@ -52,11 +46,8 @@ export function getImage(data: RawMetadataSchema) {
           )?.content.images[0]
           if (wellnessImage) {
             subpageImage = {
-              url: wellnessImage.imageSizes.small,
+              url: wellnessImage.src,
-              alt:
+              alt: wellnessImage.altText || wellnessImage.altText_En || "",
-                wellnessImage.metaData.altText ||
-                wellnessImage.metaData.altText_En ||
-                "",
             }
           }
           break
@@ -65,10 +56,10 @@ export function getImage(data: RawMetadataSchema) {
             data.additionalHotelData?.accessibility?.heroImages[0]
           if (accessibilityImage) {
             subpageImage = {
-              url: accessibilityImage.imageSizes.small,
+              url: accessibilityImage.src,
               alt:
-                accessibilityImage.metaData.altText ||
+                accessibilityImage.altText ||
-                accessibilityImage.metaData.altText_En ||
+                accessibilityImage.altText_En ||
                 "",
             }
           }
@@ -78,11 +69,8 @@ export function getImage(data: RawMetadataSchema) {
             data.additionalHotelData?.conferencesAndMeetings?.heroImages[0]
           if (meetingImage) {
             subpageImage = {
-              url: meetingImage.imageSizes.small,
+              url: meetingImage.src,
-              alt:
+              alt: meetingImage.altText || meetingImage.altText_En || "",
-                meetingImage.metaData.altText ||
-                meetingImage.metaData.altText_En ||
-                "",
             }
           }
           break
@@ -100,8 +88,8 @@ export function getImage(data: RawMetadataSchema) {
       data.additionalHotelData?.gallery?.smallerImages?.[0]
     if (hotelImage) {
       return {
-        url: hotelImage.imageSizes.small,
+        url: hotelImage.src,
-        alt: hotelImage.metaData.altText || undefined,
+        alt: hotelImage.altText || undefined,
       }
     }
   }

packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx

@@ -10,6 +10,7 @@ import {
 import { dt } from "@scandic-hotels/common/dt"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
 
@@ -114,16 +115,20 @@ export function Room({
         )}
       </header>
       <div className={styles.booking}>
-        <Image
+        {img?.src ? (
-          alt={img?.metaData.altText ?? ""}
+          <Image
-          className={styles.img}
+            alt={img.altText || img.altText_En || ""}
-          focalPoint={{ x: 50, y: 50 }}
+            className={styles.img}
-          height={204}
+            focalPoint={{ x: 50, y: 50 }}
-          src={img?.imageSizes.medium ?? ""}
+            height={204}
-          style={{ borderRadius: "var(--Corner-radius-md)" }}
+            src={img.src}
-          title={img?.metaData.title || img?.metaData.title_En || ""}
+            style={{ borderRadius: "var(--Corner-radius-md)" }}
-          width={204}
+            title={img.title || img.title_En || ""}
-        />
+            width={204}
+          />
+        ) : (
+          <ImageFallback height="204px" />
+        )}
         <div className={styles.roomDetails}>
           <div className={styles.roomName}>
             <Typography variant="Title/Subtitle/md">

packages/booking-flow/lib/components/HotelCardDialogListing/utils.ts

@@ -5,9 +5,7 @@ import type { z } from "zod"
 
 import type { HotelResponse } from "../SelectHotel/helpers"
 
-type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
+type ApiImage = z.infer<typeof imageSchema>
-type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
-
 interface Coordinates {
   lat: number
   lng: number
@@ -24,10 +22,7 @@ export type HotelPin = {
   voucherPrice: number | null
   rateType: string | null
   currency: string
-  images: {
+  images: ApiImage[]
-    imageSizes: ImageSizes
-    metaData: ImageMetaData
-  }[]
   amenities: Amenities
   ratings: number | null
   operaId: string

packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx

@@ -53,8 +53,8 @@ export default function ListingHotelCardDialog({
     voucherPrice,
     hasEnoughPoints,
   } = data
-  const firstImage = images[0]?.imageSizes?.small
+  const imageSrc = images[0]?.src
-  const altText = images[0]?.metaData?.altText
+  const altText = images[0]?.altText || images[0]?.altText_En
 
   const notEnoughPointsLabel = intl.formatMessage({
     defaultMessage: "Not enough points",
@@ -77,7 +77,7 @@ export default function ListingHotelCardDialog({
       <div className={styles.content}>
         <div className={styles.header}>
           <HotelCardDialogImage
-            firstImage={firstImage}
+            imageSrc={imageSrc}
             altText={altText}
             rating={{ tripAdvisor: ratings }}
             imageError={imageError}

packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/index.tsx

@@ -162,13 +162,12 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
 
 function mapApiImagesToGalleryImages(apiImages: ApiImage[]) {
   return apiImages.map((apiImage) => ({
-    src: apiImage.imageSizes.medium,
+    src: apiImage.src,
     alt:
-      apiImage.metaData.altText ||
+      apiImage.altText ||
-      apiImage.metaData.altText_En ||
+      apiImage.altText_En ||
-      apiImage.metaData.title ||
+      apiImage.title ||
-      apiImage.metaData.title_En,
+      apiImage.title_En,
-    caption: apiImage.metaData.title || apiImage.metaData.title_En,
+    caption: apiImage.title || apiImage.title_En,
-    smallSrc: apiImage.imageSizes.small,
   }))
 }

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx

@@ -46,6 +46,8 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
     isMainRoom ||
     (!isMainRoom && selectedRates.rates.slice(0, roomNr).every((room) => room))
 
+  const image = images?.[0]
+
   return (
     <div className={styles.selectedRoomPanel}>
       <div className={styles.content}>
@@ -64,16 +66,17 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
         <Body color="uiTextHighContrast">{selectedProductTitle}</Body>
       </div>
       <div className={styles.imageContainer}>
-        {images?.[0]?.imageSizes?.tiny ? (
+        {image?.src ? (
           <Image
             alt={
               selectedRate.roomInfo.roomType ??
-              images[0].metaData?.altText ??
+              image.altText ??
+              image.altText_En ??
               ""
             }
             className={styles.img}
             height={300}
-            src={images[0].imageSizes.tiny}
+            src={image.src}
             width={600}
           />
         ) : null}

packages/booking-flow/lib/misc/imageGallery.ts

@@ -3,14 +3,13 @@ import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
 export function mapApiImagesToGalleryImages(apiImages: ApiImage[]) {
   return apiImages.map((apiImage) => {
     return {
-      src: apiImage.imageSizes.medium,
+      src: apiImage.src,
       alt:
-        apiImage.metaData.altText ||
+        apiImage.altText ||
-        apiImage.metaData.altText_En ||
+        apiImage.altText_En ||
-        apiImage.metaData.title ||
+        apiImage.title ||
-        apiImage.metaData.title_En,
+        apiImage.title_En,
-      caption: apiImage.metaData.title || apiImage.metaData.title_En,
+      caption: apiImage.title || apiImage.title_En,
-      smallSrc: apiImage.imageSizes.small,
     }
   })
 }

packages/booking-flow/lib/types/components/promo/promoProps.ts

@@ -4,17 +4,8 @@ export type PromoProps = {
   text: string
   title: string
   image?: {
-    imageSizes: {
+    src: string
-      large: string
+    altText: string
-      medium: string
+    altText_En: string
-      small: string
-      tiny: string
-    }
-    metaData: {
-      altText: string
-      altText_En: string
-      copyRight: string
-      title: string
-    }
   }
 }

packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { HotelCard } from './index'
 
-import { fn } from 'storybook/test'
 import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
+import { fn } from 'storybook/test'
 import { Button } from '../Button'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 
@@ -70,7 +70,6 @@ export const Default: Story = {
       {
         src: 'img/img2.jpg',
         alt: 'Alt text',
-        smallSrc: 'img/img2.jpg',
         caption: 'Caption',
       },
     ],
@@ -97,3 +96,10 @@ export const MapListing: Story = {
     type: 'mapListing',
   },
 }
+
+export const WithoutImage: Story = {
+  args: {
+    ...Default.args,
+    images: [],
+  },
+}

packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx

@@ -1,12 +1,12 @@
 import Image from '../../Image'
 
-import { hotelCardDialogImageVariants } from './variants'
 import { TripAdvisorChip } from '../../TripAdvisorChip'
+import { hotelCardDialogImageVariants } from './variants'
 
-import styles from './hotelCardDialogImage.module.css'
+import ImageFallback from '../../ImageFallback'
 
 export type HotelCardDialogImageProps = {
-  firstImage?: string
+  imageSrc?: string
   altText?: string
   rating?: { tripAdvisor?: number | null }
   imageError: boolean
@@ -15,7 +15,7 @@ export type HotelCardDialogImageProps = {
 }
 
 export function HotelCardDialogImage({
-  firstImage,
+  imageSrc,
   altText,
   rating,
   imageError,
@@ -26,11 +26,11 @@ export function HotelCardDialogImage({
 
   return (
     <div className={classNames}>
-      {!firstImage || imageError ? (
+      {!imageSrc || imageError ? (
-        <div className={styles.imagePlaceholder} />
+        <ImageFallback />
       ) : (
         <Image
-          src={firstImage}
+          src={imageSrc}
           alt={altText || ''}
           fill
           onError={() => setImageError(true)}

packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx

@@ -14,14 +14,14 @@ import { OldDSButton as Button } from '../../../OldDSButton'
 import Subtitle from '../../../Subtitle'
 import { Typography } from '../../../Typography'
 
-import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
 import { HotelCardDialogImage } from '../../HotelCardDialogImage'
+import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
 
-import styles from './standaloneHotelCardDialog.module.css'
 import { Lang } from '@scandic-hotels/common/constants/language'
-import { HotelPin } from '../../../Map/types'
 import { FacilityToIcon } from '../../../FacilityToIcon'
+import { HotelPin } from '../../../Map/types'
 import { HotelPointsRow } from '../../HotelPointsRow'
+import styles from './standaloneHotelCardDialog.module.css'
 
 interface StandaloneHotelCardProps {
   data: HotelPin
@@ -75,7 +75,7 @@ export function StandaloneHotelCardDialog({
         <MaterialIcon icon="close" size={22} color="CurrentColor" />
       </IconButton>
       <HotelCardDialogImage
-        firstImage={image?.url}
+        imageSrc={image?.url}
         altText={image?.alt}
         rating={{ tripAdvisor: ratings?.tripAdvisor ?? null }}
         imageError={imageError}

packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { HotelInfoCard } from './index'
-import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
 import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
-import { Button } from '../Button'
+import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
 import { fn } from 'storybook/test'
+import { Button } from '../Button'
 import { MaterialIcon } from '../Icons/MaterialIcon'
+import { HotelInfoCard } from './index'
 const meta: Meta<typeof HotelInfoCard> = {
   title: 'Components/HotelInfoCard',
   component: HotelInfoCard,
@@ -104,19 +104,16 @@ export const Default: Story = {
       {
         src: './img/GrandHotelBudapest.png',
         alt: 'Grand Hotel Budapest',
-        smallSrc: './img/GrandHotelBudapest.png',
         caption: 'Grand Hotel Budapest',
       },
       {
         src: './img/img1.png',
         alt: 'Image 1',
-        smallSrc: './img/img1.png',
         caption: 'Image 1',
       },
       {
         src: './img/img2.png',
         alt: 'Image 2',
-        smallSrc: './img/img2.png',
         caption: 'Image 2',
       },
     ],

packages/design-system/lib/components/ImageGallery/index.tsx

@@ -7,8 +7,8 @@ import { useIntl } from 'react-intl'
 import { MaterialIcon } from '../Icons/MaterialIcon'
 import Image from '../Image'
 import ImageFallback from '../ImageFallback'
-import { Typography } from '../Typography'
 import Lightbox from '../Lightbox'
+import { Typography } from '../Typography'
 
 import styles from './imageGallery.module.css'
 
@@ -16,7 +16,6 @@ export interface GalleryImage {
   src: string
   alt: string
   caption?: string | null
-  smallSrc?: string | null
 }
 
 type ImageGalleryProps = {
@@ -50,7 +49,7 @@ function ImageGallery({
       }
     : { height, width: height * 1.5 }
 
-  if (!images || images.length === 0 || imageError) {
+  if (!images?.length || imageError) {
     return <ImageFallback />
   }
 

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -10,8 +10,8 @@ import { Typography } from '../../Typography'
 
 import Image from '../../Image'
 
-import styles from './gallery.module.css'
 import { LightboxImage } from '..'
+import styles from './gallery.module.css'
 
 type GalleryProps = {
   images: LightboxImage[]
@@ -164,7 +164,7 @@ export default function Gallery({
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div
-                key={image.smallSrc || image.src}
+                key={image.src}
                 className={styles.thumbnailContainer}
                 initial={{ opacity: 0, x: 50 }}
                 animate={{ opacity: 1, x: 0 }}
@@ -179,7 +179,7 @@ export default function Gallery({
                   })}
                 >
                   <Image
-                    src={image.smallSrc || image.src}
+                    src={image.src}
                     alt={image.alt}
                     fill
                     sizes="200px"
@@ -196,7 +196,7 @@ export default function Gallery({
       <div className={styles.mobileGallery}>
         {images.map((image, index) => (
           <motion.div
-            key={image.smallSrc || image.src}
+            key={image.src}
             className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
@@ -211,7 +211,7 @@ export default function Gallery({
               }}
             >
               <Image
-                src={image.smallSrc || image.src}
+                src={image.src}
                 alt={image.alt}
                 fill
                 sizes="100vw"

packages/design-system/lib/components/Lightbox/index.tsx

@@ -12,7 +12,6 @@ export type LightboxImage = {
   src: string
   alt: string
   caption?: string | null
-  smallSrc?: string | null
 }
 
 type LightboxProps = {

packages/trpc/lib/routers/hotels/output.ts

@@ -526,7 +526,7 @@ export const ancillaryPackagesSchema = z
             id: item.id,
             title: item.title,
             description: item.descriptions.html,
-            imageUrl: item.images[0]?.imageSizes.small || undefined,
+            imageUrl: item.images[0]?.src || undefined,
             price: {
               total: item.variants.ancillary.price.totalPrice,
               currency: item.variants.ancillary.price.currency,

packages/trpc/lib/routers/hotels/schemas/image.ts

@@ -2,46 +2,37 @@ import { z } from "zod"
 
 import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/stringValidator"
 
-export const imageSizesSchema = z.object({
-  large: nullableStringValidator,
-  medium: nullableStringValidator,
-  small: nullableStringValidator,
-  tiny: nullableStringValidator,
-})
-
-export const imageMetaDataSchema = z.object({
-  altText: nullableStringValidator,
-  altText_En: nullableStringValidator,
-  copyRight: nullableStringValidator,
-  title: nullableStringValidator,
-  title_En: nullableStringValidator,
-})
-
 const DEFAULT_IMAGE_OBJ = {
-  metaData: {
+  altText: "Default image",
-    altText: "Default image",
+  altText_En: "Default image",
-    altText_En: "Default image",
+  title: "Default image",
-    copyRight: "Default image",
+  title_En: "Default image",
-    title: "Default image",
+  src: "https://placehold.co/1280x720",
-    title_En: "Default image",
-  },
-  imageSizes: {
-    tiny: "https://placehold.co/1280x720",
-    small: "https://placehold.co/1280x720",
-    medium: "https://placehold.co/1280x720",
-    large: "https://placehold.co/1280x720",
-  },
 }
 
 export const imageSchema = z
   .object({
-    imageSizes: imageSizesSchema,
+    imageSizes: z.object({
-    metaData: imageMetaDataSchema,
+      original: nullableStringValidator,
+    }),
+    metaData: z.object({
+      altText: nullableStringValidator,
+      altText_En: nullableStringValidator,
+      copyRight: nullableStringValidator,
+      title: nullableStringValidator,
+      title_En: nullableStringValidator,
+    }),
   })
   .nullish()
   .transform((val) => {
     if (!val) {
       return DEFAULT_IMAGE_OBJ
     }
-    return val
+    return {
+      src: val.imageSizes.original,
+      altText: val.metaData.altText,
+      altText_En: val.metaData.altText_En,
+      title: val.metaData.title,
+      title_En: val.metaData.title_En,
+    }
   })

packages/trpc/lib/routers/hotels/schemas/packages.ts

@@ -5,7 +5,7 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { BreakfastPackageEnum } from "../../../enums/breakfast"
 import { PackageTypeEnum } from "../../../enums/packages"
 import { RoomPackageCodeEnum } from "../../../enums/roomFilter"
-import { imageSizesSchema } from "./image"
+import { imageSchema } from "./image"
 
 // TODO: Remove optional and default when the API change has been deployed
 export const packagePriceSchema = z
@@ -38,7 +38,7 @@ export const ancillaryContentSchema = z.object({
   }),
   title: z.string(),
   descriptions: z.object({ html: z.string() }),
-  images: z.array(z.object({ imageSizes: imageSizesSchema })),
+  images: z.array(imageSchema),
   requiresDeliveryTime: z.boolean(),
 })