From 36e8ac11d18c285da3297830400ed5ae1edf9191 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Mon, 28 Jul 2025 08:51:43 +0000
Subject: [PATCH] Merged in fix/SW-2500-sync-hotel-images-and- (pull request
 #2569)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-2500): Fixed no image gives error on confirmation and booking page

* fix(SW-2500): Fixed no image gives error on confirmation and booking page


Approved-by: Anton Gunnarsson
Approved-by: Matilda Landström
---
 .../BookingConfirmation/Rooms/Room/index.tsx                | 6 +++---
 .../HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx  | 2 +-
 apps/scandic-web/components/Image.tsx                       | 6 ++++++
 .../components/ImageFallback/imageFallback.module.css       | 4 +++-
 .../hotelReservation/bookingConfirmation/rooms/room.ts      | 2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
index 9aa2f00b9..883667c2c 100644
--- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
@@ -102,13 +102,13 @@ export default function Room({
       </header>
       <div className={styles.booking}>
         <Image
-          alt={img.metaData.altText}
+          alt={img?.metaData.altText ?? ""}
           className={styles.img}
           focalPoint={{ x: 50, y: 50 }}
           height={204}
-          src={img.imageSizes.medium}
+          src={img?.imageSizes.medium ?? ""}
           style={{ borderRadius: "var(--Corner-radius-md)" }}
-          title={img.metaData.title}
+          title={img?.metaData.title ?? ""}
           width={204}
         />
         <div className={styles.roomDetails}>
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx
index 91b209ca2..5b5fbf77f 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx
@@ -23,7 +23,7 @@ export default function Img() {
         alt={roomName}
         className={styles.image}
         height={960}
-        src={image.imageSizes.small}
+        src={image?.imageSizes.small ?? ""}
         width={640}
       />
     </div>
diff --git a/apps/scandic-web/components/Image.tsx b/apps/scandic-web/components/Image.tsx
index 4568decaa..840e69a5b 100644
--- a/apps/scandic-web/components/Image.tsx
+++ b/apps/scandic-web/components/Image.tsx
@@ -2,6 +2,8 @@
 
 import NextImage, { type ImageLoaderProps } from "next/image"
 
+import ImageFallback from "./ImageFallback"
+
 import type { CSSProperties } from "react"
 
 import type { ImageProps } from "@/types/components/image"
@@ -27,5 +29,9 @@ export default function Image({ focalPoint, style, ...props }: ImageProps) {
       }
     : { ...style }
 
+  if (!props.src) {
+    return <ImageFallback />
+  }
+
   return <NextImage {...props} style={styles} loader={imageLoader} />
 }
diff --git a/apps/scandic-web/components/ImageFallback/imageFallback.module.css b/apps/scandic-web/components/ImageFallback/imageFallback.module.css
index 4e27868d4..20ec0a52f 100644
--- a/apps/scandic-web/components/ImageFallback/imageFallback.module.css
+++ b/apps/scandic-web/components/ImageFallback/imageFallback.module.css
@@ -2,7 +2,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 200px;
+  height: 100%;
   width: 100%;
+  min-width: 200px;
+  min-height: 200px;
   background-color: var(--Surface-Feedback-Neutral);
 }
diff --git a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts
index 2f1b5679e..5ca288aed 100644
--- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts
+++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts
@@ -4,6 +4,6 @@ export interface RoomProps {
   booking: BookingConfirmation["booking"]
   checkInTime: string
   checkOutTime: string
-  img: NonNullable<BookingConfirmation["room"]>["images"][number]
+  img?: NonNullable<BookingConfirmation["room"]>["images"][number]
   roomName: NonNullable<BookingConfirmation["room"]>["name"]
 }