scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Hrishikesh Vaipurkar
2025-07-28 08:51:43 +00:00
parent 42ab6e58b3
commit 36e8ac11d1
5 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
View File

@@ -102,13 +102,13 @@ export default function Room({
</header> </header>
<div className={styles.booking}> <div className={styles.booking}>
<Image <Image
alt={img.metaData.altText} alt={img?.metaData.altText ?? ""}
className={styles.img} className={styles.img}
focalPoint={{ x: 50, y: 50 }} focalPoint={{ x: 50, y: 50 }}
height={204} height={204}
src={img.imageSizes.medium} src={img?.imageSizes.medium ?? ""}
style={{ borderRadius: "var(--Corner-radius-md)" }} style={{ borderRadius: "var(--Corner-radius-md)" }}
title={img.metaData.title} title={img?.metaData.title ?? ""}
width={204} width={204}
/> />
<div className={styles.roomDetails}> <div className={styles.roomDetails}>

2
apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Img/index.tsx
View File

@@ -23,7 +23,7 @@ export default function Img() {
alt={roomName} alt={roomName}
className={styles.image} className={styles.image}
height={960} height={960}
src={image.imageSizes.small} src={image?.imageSizes.small ?? ""}
width={640} width={640}
/> />
</div> </div>

6
apps/scandic-web/components/Image.tsx
View File

@@ -2,6 +2,8 @@
import NextImage, { type ImageLoaderProps } from "next/image" import NextImage, { type ImageLoaderProps } from "next/image"
import ImageFallback from "./ImageFallback"
import type { CSSProperties } from "react" import type { CSSProperties } from "react"
import type { ImageProps } from "@/types/components/image" import type { ImageProps } from "@/types/components/image"
@@ -27,5 +29,9 @@ export default function Image({ focalPoint, style, ...props }: ImageProps) {
} }
: { ...style } : { ...style }
if (!props.src) {
return <ImageFallback />
}
return <NextImage {...props} style={styles} loader={imageLoader} /> return <NextImage {...props} style={styles} loader={imageLoader} />
} }

4
apps/scandic-web/components/ImageFallback/imageFallback.module.css
View File

@@ -2,7 +2,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 200px; height: 100%;
width: 100%; width: 100%;
min-width: 200px;
min-height: 200px;
background-color: var(--Surface-Feedback-Neutral); background-color: var(--Surface-Feedback-Neutral);
} }

2
apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/room.ts
View File

@@ -4,6 +4,6 @@ export interface RoomProps {
booking: BookingConfirmation["booking"] booking: BookingConfirmation["booking"]
checkInTime: string checkInTime: string
checkOutTime: string checkOutTime: string
img: NonNullable<BookingConfirmation["room"]>["images"][number] img?: NonNullable<BookingConfirmation["room"]>["images"][number]
roomName: NonNullable<BookingConfirmation["room"]>["name"] roomName: NonNullable<BookingConfirmation["room"]>["name"]
} }