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/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 || ""}
-        src={image.imageSizes.large}
+        alt={image.altText || image.altText_En || ""}
+        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}
-              alt={image.metaData.altText}
+              src={image.src}
+              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
-            src={room?.images[0]?.imageSizes.small ?? ""}
-            alt={roomName}
-            fill
-          />
+          {room?.images[0]?.src ? (
+            <Image src={room.images[0].src} 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
-        alt={roomName}
-        className={styles.image}
-        height={960}
-        src={image?.imageSizes.small ?? ""}
-        width={640}
-      />
+      {image?.src ? (
+        <Image
+          alt={roomName}
+          className={styles.image}
+          height={960}
+          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 ??
-      additionalData.gallery?.heroImages[0]?.imageSizes.large ??
-      hotel.galleryImages[0]?.imageSizes.large
+      hotel.hotelContent.images.src ||
+      additionalData.gallery?.heroImages[0]?.src ||
+      hotel.galleryImages[0]?.src
 
     const baseUrl = env.PUBLIC_URL || "https://www.scandichotels.com"
     const promoUrl = new URL(`${baseUrl}/${lang}/`)