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
2025-09-10 08:29:05 +00:00
parent a5790ee454
commit f04fe467da
35 changed files with 182 additions and 201 deletions
--- a/packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx
+++ b/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
-          alt={img?.metaData.altText ?? ""}
-          className={styles.img}
-          focalPoint={{ x: 50, y: 50 }}
-          height={204}
-          src={img?.imageSizes.medium ?? ""}
-          style={{ borderRadius: "var(--Corner-radius-md)" }}
-          title={img?.metaData.title || img?.metaData.title_En || ""}
-          width={204}
-        />
+        {img?.src ? (
+          <Image
+            alt={img.altText || img.altText_En || ""}
+            className={styles.img}
+            focalPoint={{ x: 50, y: 50 }}
+            height={204}
+            src={img.src}
+            style={{ borderRadius: "var(--Corner-radius-md)" }}
+            title={img.title || img.title_En || ""}
+            width={204}
+          />
+        ) : (
+          <ImageFallback height="204px" />
+        )}
        <div className={styles.roomDetails}>
          <div className={styles.roomName}>
            <Typography variant="Title/Subtitle/md">
--- a/packages/booking-flow/lib/components/HotelCardDialogListing/utils.ts
+++ b/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 ImageMetaData = z.infer<typeof imageSchema>["metaData"]
-
+type ApiImage = z.infer<typeof imageSchema>
 interface Coordinates {
  lat: number
  lng: number
@@ -24,10 +22,7 @@ export type HotelPin = {
  voucherPrice: number | null
  rateType: string | null
  currency: string
-  images: {
-    imageSizes: ImageSizes
-    metaData: ImageMetaData
-  }[]
+  images: ApiImage[]
  amenities: Amenities
  ratings: number | null
  operaId: string
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/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 altText = images[0]?.metaData?.altText
+  const imageSrc = images[0]?.src
+  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}
--- a/packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/index.tsx
+++ b/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.metaData.altText_En ||
-      apiImage.metaData.title ||
-      apiImage.metaData.title_En,
-    caption: apiImage.metaData.title || apiImage.metaData.title_En,
-    smallSrc: apiImage.imageSizes.small,
+      apiImage.altText ||
+      apiImage.altText_En ||
+      apiImage.title ||
+      apiImage.title_En,
+    caption: apiImage.title || apiImage.title_En,
  }))
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/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}
--- a/packages/booking-flow/lib/misc/imageGallery.ts
+++ b/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.metaData.altText_En ||
-        apiImage.metaData.title ||
-        apiImage.metaData.title_En,
-      caption: apiImage.metaData.title || apiImage.metaData.title_En,
-      smallSrc: apiImage.imageSizes.small,
+        apiImage.altText ||
+        apiImage.altText_En ||
+        apiImage.title ||
+        apiImage.title_En,
+      caption: apiImage.title || apiImage.title_En,
    }
  })
 }
--- a/packages/booking-flow/lib/types/components/promo/promoProps.ts
+++ b/packages/booking-flow/lib/types/components/promo/promoProps.ts
@@ -4,17 +4,8 @@ export type PromoProps = {
  text: string
  title: string
  image?: {
-    imageSizes: {
-      large: string
-      medium: string
-      small: string
-      tiny: string
-    }
-    metaData: {
-      altText: string
-      altText_En: string
-      copyRight: string
-      title: string
-    }
+    src: string
+    altText: string
+    altText_En: string
  }
 }
--- a/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx
+++ b/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: [],
+  },
+}
--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
+++ b/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 ? (
-        <div className={styles.imagePlaceholder} />
+      {!imageSrc || imageError ? (
+        <ImageFallback />
      ) : (
        <Image
-          src={firstImage}
+          src={imageSrc}
          alt={altText || ''}
          fill
          onError={() => setImageError(true)}
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
+++ b/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}
--- a/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx
+++ b/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',
      },
    ],
--- a/packages/design-system/lib/components/ImageGallery/index.tsx
+++ b/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 />
  }

--- a/packages/design-system/lib/components/Lightbox/Gallery/index.tsx
+++ b/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"
--- a/packages/design-system/lib/components/Lightbox/index.tsx
+++ b/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 = {
--- a/packages/trpc/lib/routers/hotels/output.ts
+++ b/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,
--- a/packages/trpc/lib/routers/hotels/schemas/image.ts
+++ b/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_En: "Default image",
-    copyRight: "Default image",
-    title: "Default image",
-    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",
-  },
+  altText: "Default image",
+  altText_En: "Default image",
+  title: "Default image",
+  title_En: "Default image",
+  src: "https://placehold.co/1280x720",
 }

 export const imageSchema = z
  .object({
-    imageSizes: imageSizesSchema,
-    metaData: imageMetaDataSchema,
+    imageSizes: z.object({
+      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,
+    }
  })
--- a/packages/trpc/lib/routers/hotels/schemas/packages.ts
+++ b/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(),
 })