Merged in fix/SW-2500-sync-hotel-images-and- (pull request #2569)

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

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

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>

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

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

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