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