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

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

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

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}

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

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

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