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

feat(SW-3151): Added original to imageSchema and added transform to a more generic image type

Browse Source 
Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-09-10 08:29:05 +00:00
parent a5790ee454
commit f04fe467da
35 changed files with 182 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/scandic-web/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
View File

@@ -45,8 +45,11 @@ function CardContent({ stay }: StayCardProps) {
<article className={styles.stay}>
<Image
className={styles.image}
alt={hotelInformation.hotelContent.images.metaData.altText}
src={hotelInformation.hotelContent.images.imageSizes.small}
alt={
hotelInformation.hotelContent.images.altText ||
hotelInformation.hotelContent.images.altText_En
}
src={hotelInformation.hotelContent.images.src}
width={420}
height={240}
/>

4
apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx
View File

@@ -41,8 +41,8 @@ export default async function HotelListingItem({
return (
<article className={styles.container}>
<Image
src={image.imageSizes.large}
alt={image.metaData.altText || image.metaData.altText_En}
src={image.src}
alt={image.altText || image.altText_En}
width={400}
height={300}
sizes="(min-width: 768px) 400px, 100vw"

12
apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
View File

@@ -63,10 +63,12 @@ export default function HotelCardCarousel({
}
function getImage({ hotel }: Pick<HotelListingHotelData, "hotel">) {
return {
src: hotel.galleryImages?.[0]?.imageSizes.large,
alt:
hotel.galleryImages?.[0]?.metaData.altText ||
hotel.galleryImages?.[0]?.metaData.altText_En,
if (hotel.galleryImages?.length) {
const image = hotel.galleryImages[0]
return {
src: image.src,
alt: image.altText || image.altText_En,
}
}
return null
}

12
apps/scandic-web/components/ContentType/DestinationPage/Map/utils.ts
View File

@@ -53,10 +53,12 @@ export function getHotelMapMarkers(hotels: HotelListingHotelData[]) {
}
function getImage({ hotel }: Pick<HotelListingHotelData, "hotel">) {
return {
src: hotel.galleryImages?.[0]?.imageSizes.large,
alt:
hotel.galleryImages?.[0]?.metaData.altText ||
hotel.galleryImages?.[0]?.metaData.altText_En,
if (hotel.galleryImages?.length) {
const image = hotel.galleryImages[0]
return {
src: image.src,
alt: image.altText || image.altText_En,
}
}
return null
}

8
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Images/index.tsx
View File

@@ -17,11 +17,11 @@ export default function SidePeekImages({ images }: SidePeekImagesProps) {
return (
<div className={styles.sidePeekImages}>
{images.map(({ metaData, imageSizes }) => (
{images.map(({ src, altText, altText_En }) => (
<Image
key={imageSizes.tiny}
src={imageSizes.tiny}
alt={metaData.altText}
key={src}
src={src}
alt={altText || altText_En}
height={240}
width={imageWidth}
sizes={sizesString}

4
apps/scandic-web/components/ContentType/HotelSubpage/HeroHeader/index.tsx
View File

@@ -26,8 +26,8 @@ export default async function HeroHeader({
{heroImage ? (
<div className={styles.heroWrapper}>
<Hero
src={heroImage.imageSizes.medium}
alt={heroImage.metaData.altText || ""}
src={heroImage.src}
alt={heroImage.altText || heroImage.altText_En}
/>
</div>
) : null}

4
apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
View File

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

4
apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
View File

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

11
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
View File

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

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

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

6
apps/scandic-web/components/HotelReservation/MyStay/index.tsx
View File

@@ -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}/`)

6
apps/scandic-web/components/TempDesignSystem/MeetingRoomCard/index.tsx
View File

@@ -34,10 +34,10 @@ export default function MeetingRoomCard({ room }: MeetingRoomCardProps) {
return (
<article className={styles.card}>
{image?.imageSizes.small ? (
{image?.src ? (
<Image
src={image?.imageSizes.small}
alt={image?.metaData.altText || image?.metaData.altText_En || ""}
src={image.src}
alt={image.altText || image.altText_En || ""}
className={styles.image}
width={386}
height={200}

12
apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts
View File

@@ -1,13 +1,8 @@
import type { imageSchema } from "@scandic-hotels/trpc/routers/hotels/schemas/image"
import type { ProductTypeCheque } from "@scandic-hotels/trpc/types/availability"
import type { Amenities } from "@scandic-hotels/trpc/types/hotel"
import type { z } from "zod"
import type { Coordinates } from "@/types/components/maps/coordinates"
type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
export type HotelPin = {
bookingCode?: string | null
name: string
@@ -20,8 +15,11 @@ export type HotelPin = {
rateType: string | null
currency: string
images: {
imageSizes: ImageSizes
metaData: ImageMetaData
src: string
altText: string
altText_En: string
title: string
title_En: string
}[]
amenities: Amenities
ratings: number | null

1
apps/scandic-web/types/components/imageGallery.ts
View File

@@ -2,5 +2,4 @@ export interface GalleryImage {
src: string
alt: string
caption?: string | null
smallSrc?: string | null
}

12
apps/scandic-web/utils/facilityCards.ts
View File

@@ -124,16 +124,16 @@ export function setFacilityCardGrids(
// Can be a maximum 2 images per grid
const img: FacilityImage = {
backgroundImage: {
url: image.imageSizes.large,
title: image.metaData.title || image.metaData.title_En,
url: image.src,
title: image.title || image.title_En,
meta: {
alt: image.metaData.altText,
caption: image.metaData.altText_En,
alt: image.altText,
caption: image.altText_En,
},
id: image.imageSizes.large,
id: image.src,
},
theme: "image",
id: image.imageSizes.large,
id: image.src,
}
return img
})

13
apps/scandic-web/utils/imageGallery.ts
View File

@@ -5,14 +5,13 @@ import type { GalleryImage } from "@/types/components/imageGallery"
function mapApiImageToGalleryImage(apiImage: ApiImage): GalleryImage {
return {
src: apiImage.imageSizes.medium,
src: apiImage.src,
alt:
apiImage.metaData.altText ||
apiImage.metaData.altText_En ||
apiImage.metaData.title ||
apiImage.metaData.title_En,
caption: apiImage.metaData.title || apiImage.metaData.title_En,
smallSrc: apiImage.imageSizes.small,
apiImage.altText ||
apiImage.altText_En ||
apiImage.title ||
apiImage.title_En,
caption: apiImage.title || apiImage.title_En,
}
}

4
apps/scandic-web/utils/jsonSchemas.ts
View File

@@ -61,8 +61,8 @@ export function generateHotelSchema(hotelData: HotelData) {
if (image) {
jsonLd.image = {
"@type": "ImageObject",
url: image.imageSizes.small,
caption: image.metaData.title || image.metaData.title_En,
url: image.src,
caption: image.title || image.title_En,
}
}

38
apps/scandic-web/utils/metadata/image.ts
View File

@@ -24,11 +24,8 @@ export function getImage(data: RawMetadataSchema) {
const restaurantImage = restaurantSubPage?.content?.images?.[0]
if (restaurantImage) {
subpageImage = {
url: restaurantImage.imageSizes.small,
alt:
restaurantImage.metaData.altText ||
restaurantImage.metaData.altText_En ||
"",
url: restaurantImage.src,
alt: restaurantImage.altText || restaurantImage.altText_En || "",
}
}
@@ -38,11 +35,8 @@ export function getImage(data: RawMetadataSchema) {
data.additionalHotelData?.parkingImages?.heroImages[0]
if (parkingImage) {
subpageImage = {
url: parkingImage.imageSizes.small,
alt:
parkingImage.metaData.altText ||
parkingImage.metaData.altText_En ||
"",
url: parkingImage.src,
alt: parkingImage.altText || parkingImage.altText_En || "",
}
}
break
@@ -52,11 +46,8 @@ export function getImage(data: RawMetadataSchema) {
)?.content.images[0]
if (wellnessImage) {
subpageImage = {
url: wellnessImage.imageSizes.small,
alt:
wellnessImage.metaData.altText ||
wellnessImage.metaData.altText_En ||
"",
url: wellnessImage.src,
alt: wellnessImage.altText || wellnessImage.altText_En || "",
}
}
break
@@ -65,10 +56,10 @@ export function getImage(data: RawMetadataSchema) {
data.additionalHotelData?.accessibility?.heroImages[0]
if (accessibilityImage) {
subpageImage = {
url: accessibilityImage.imageSizes.small,
url: accessibilityImage.src,
alt:
accessibilityImage.metaData.altText ||
accessibilityImage.metaData.altText_En ||
accessibilityImage.altText ||
accessibilityImage.altText_En ||
"",
}
}
@@ -78,11 +69,8 @@ export function getImage(data: RawMetadataSchema) {
data.additionalHotelData?.conferencesAndMeetings?.heroImages[0]
if (meetingImage) {
subpageImage = {
url: meetingImage.imageSizes.small,
alt:
meetingImage.metaData.altText ||
meetingImage.metaData.altText_En ||
"",
url: meetingImage.src,
alt: meetingImage.altText || meetingImage.altText_En || "",
}
}
break
@@ -100,8 +88,8 @@ export function getImage(data: RawMetadataSchema) {
data.additionalHotelData?.gallery?.smallerImages?.[0]
if (hotelImage) {
return {
url: hotelImage.imageSizes.small,
alt: hotelImage.metaData.altText || undefined,
url: hotelImage.src,
alt: hotelImage.altText || undefined,
}
}
}