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

25
packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx
View File

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

9
packages/booking-flow/lib/components/HotelCardDialogListing/utils.ts
View File

@@ -5,9 +5,7 @@ import type { z } from "zod"
import type { HotelResponse } from "../SelectHotel/helpers"
type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
type ApiImage = z.infer<typeof imageSchema>
interface Coordinates {
lat: number
lng: number
@@ -24,10 +22,7 @@ export type HotelPin = {
voucherPrice: number | null
rateType: string | null
currency: string
images: {
imageSizes: ImageSizes
metaData: ImageMetaData
}[]
images: ApiImage[]
amenities: Amenities
ratings: number | null
operaId: string

6
packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
View File

@@ -53,8 +53,8 @@ export default function ListingHotelCardDialog({
voucherPrice,
hasEnoughPoints,
} = data
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
const imageSrc = images[0]?.src
const altText = images[0]?.altText || images[0]?.altText_En
const notEnoughPointsLabel = intl.formatMessage({
defaultMessage: "Not enough points",
@@ -77,7 +77,7 @@ export default function ListingHotelCardDialog({
<div className={styles.content}>
<div className={styles.header}>
<HotelCardDialogImage
firstImage={firstImage}
imageSrc={imageSrc}
altText={altText}
rating={{ tripAdvisor: ratings }}
imageError={imageError}

13
packages/booking-flow/lib/components/RoomDetailsSidePeek/RoomSidePeekContent/index.tsx
View File

@@ -162,13 +162,12 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
function mapApiImagesToGalleryImages(apiImages: ApiImage[]) {
return apiImages.map((apiImage) => ({
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,
}))
}

9
packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
View File

@@ -46,6 +46,8 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
isMainRoom ||
(!isMainRoom && selectedRates.rates.slice(0, roomNr).every((room) => room))
const image = images?.[0]
return (
<div className={styles.selectedRoomPanel}>
<div className={styles.content}>
@@ -64,16 +66,17 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
<Body color="uiTextHighContrast">{selectedProductTitle}</Body>
</div>
<div className={styles.imageContainer}>
{images?.[0]?.imageSizes?.tiny ? (
{image?.src ? (
<Image
alt={
selectedRate.roomInfo.roomType ??
images[0].metaData?.altText ??
image.altText ??
image.altText_En ??
""
}
className={styles.img}
height={300}
src={images[0].imageSizes.tiny}
src={image.src}
width={600}
/>
) : null}

13
packages/booking-flow/lib/misc/imageGallery.ts
View File

@@ -3,14 +3,13 @@ import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
export function mapApiImagesToGalleryImages(apiImages: ApiImage[]) {
return apiImages.map((apiImage) => {
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,
}
})
}

15
packages/booking-flow/lib/types/components/promo/promoProps.ts
View File

@@ -4,17 +4,8 @@ export type PromoProps = {
text: string
title: string
image?: {
imageSizes: {
large: string
medium: string
small: string
tiny: string
}
metaData: {
altText: string
altText_En: string
copyRight: string
title: string
}
src: string
altText: string
altText_En: string
}
}

10
packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx
View File

@@ -1,8 +1,8 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { HotelCard } from './index'
import { fn } from 'storybook/test'
import { RateTypeEnum } from '@scandic-hotels/common/constants/rateType'
import { fn } from 'storybook/test'
import { Button } from '../Button'
import { MaterialIcon } from '../Icons/MaterialIcon'
@@ -70,7 +70,6 @@ export const Default: Story = {
{
src: 'img/img2.jpg',
alt: 'Alt text',
smallSrc: 'img/img2.jpg',
caption: 'Caption',
},
],
@@ -97,3 +96,10 @@ export const MapListing: Story = {
type: 'mapListing',
},
}
export const WithoutImage: Story = {
args: {
...Default.args,
images: [],
},
}

14
packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
View File

@@ -1,12 +1,12 @@
import Image from '../../Image'
import { hotelCardDialogImageVariants } from './variants'
import { TripAdvisorChip } from '../../TripAdvisorChip'
import { hotelCardDialogImageVariants } from './variants'
import styles from './hotelCardDialogImage.module.css'
import ImageFallback from '../../ImageFallback'
export type HotelCardDialogImageProps = {
firstImage?: string
imageSrc?: string
altText?: string
rating?: { tripAdvisor?: number | null }
imageError: boolean
@@ -15,7 +15,7 @@ export type HotelCardDialogImageProps = {
}
export function HotelCardDialogImage({
firstImage,
imageSrc,
altText,
rating,
imageError,
@@ -26,11 +26,11 @@ export function HotelCardDialogImage({
return (
<div className={classNames}>
{!firstImage || imageError ? (
<div className={styles.imagePlaceholder} />
{!imageSrc || imageError ? (
<ImageFallback />
) : (
<Image
src={firstImage}
src={imageSrc}
alt={altText || ''}
fill
onError={() => setImageError(true)}

8
packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
View File

@@ -14,14 +14,14 @@ import { OldDSButton as Button } from '../../../OldDSButton'
import Subtitle from '../../../Subtitle'
import { Typography } from '../../../Typography'
import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
import { HotelCardDialogImage } from '../../HotelCardDialogImage'
import { NoPriceAvailableCard } from '../../NoPriceAvailableCard'
import styles from './standaloneHotelCardDialog.module.css'
import { Lang } from '@scandic-hotels/common/constants/language'
import { HotelPin } from '../../../Map/types'
import { FacilityToIcon } from '../../../FacilityToIcon'
import { HotelPin } from '../../../Map/types'
import { HotelPointsRow } from '../../HotelPointsRow'
import styles from './standaloneHotelCardDialog.module.css'
interface StandaloneHotelCardProps {
data: HotelPin
@@ -75,7 +75,7 @@ export function StandaloneHotelCardDialog({
<MaterialIcon icon="close" size={22} color="CurrentColor" />
</IconButton>
<HotelCardDialogImage
firstImage={image?.url}
imageSrc={image?.url}
altText={image?.alt}
rating={{ tripAdvisor: ratings?.tripAdvisor ?? null }}
imageError={imageError}

9
packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx
View File

@@ -1,11 +1,11 @@
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { HotelInfoCard } from './index'
import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert'
import { Button } from '../Button'
import { FacilityEnum } from '@scandic-hotels/common/constants/facilities'
import { fn } from 'storybook/test'
import { Button } from '../Button'
import { MaterialIcon } from '../Icons/MaterialIcon'
import { HotelInfoCard } from './index'
const meta: Meta<typeof HotelInfoCard> = {
title: 'Components/HotelInfoCard',
component: HotelInfoCard,
@@ -104,19 +104,16 @@ export const Default: Story = {
{
src: './img/GrandHotelBudapest.png',
alt: 'Grand Hotel Budapest',
smallSrc: './img/GrandHotelBudapest.png',
caption: 'Grand Hotel Budapest',
},
{
src: './img/img1.png',
alt: 'Image 1',
smallSrc: './img/img1.png',
caption: 'Image 1',
},
{
src: './img/img2.png',
alt: 'Image 2',
smallSrc: './img/img2.png',
caption: 'Image 2',
},
],

5
packages/design-system/lib/components/ImageGallery/index.tsx
View File

@@ -7,8 +7,8 @@ import { useIntl } from 'react-intl'
import { MaterialIcon } from '../Icons/MaterialIcon'
import Image from '../Image'
import ImageFallback from '../ImageFallback'
import { Typography } from '../Typography'
import Lightbox from '../Lightbox'
import { Typography } from '../Typography'
import styles from './imageGallery.module.css'
@@ -16,7 +16,6 @@ export interface GalleryImage {
src: string
alt: string
caption?: string | null
smallSrc?: string | null
}
type ImageGalleryProps = {
@@ -50,7 +49,7 @@ function ImageGallery({
}
: { height, width: height * 1.5 }
if (!images || images.length === 0 || imageError) {
if (!images?.length || imageError) {
return <ImageFallback />
}

10
packages/design-system/lib/components/Lightbox/Gallery/index.tsx
View File

@@ -10,8 +10,8 @@ import { Typography } from '../../Typography'
import Image from '../../Image'
import styles from './gallery.module.css'
import { LightboxImage } from '..'
import styles from './gallery.module.css'
type GalleryProps = {
images: LightboxImage[]
@@ -164,7 +164,7 @@ export default function Gallery({
<AnimatePresence initial={false}>
{getThumbImages().map((image, index) => (
<motion.div
key={image.smallSrc || image.src}
key={image.src}
className={styles.thumbnailContainer}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
@@ -179,7 +179,7 @@ export default function Gallery({
})}
>
<Image
src={image.smallSrc || image.src}
src={image.src}
alt={image.alt}
fill
sizes="200px"
@@ -196,7 +196,7 @@ export default function Gallery({
<div className={styles.mobileGallery}>
{images.map((image, index) => (
<motion.div
key={image.smallSrc || image.src}
key={image.src}
className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -211,7 +211,7 @@ export default function Gallery({
}}
>
<Image
src={image.smallSrc || image.src}
src={image.src}
alt={image.alt}
fill
sizes="100vw"

1
packages/design-system/lib/components/Lightbox/index.tsx
View File

@@ -12,7 +12,6 @@ export type LightboxImage = {
src: string
alt: string
caption?: string | null
smallSrc?: string | null
}
type LightboxProps = {

2
packages/trpc/lib/routers/hotels/output.ts
View File

@@ -526,7 +526,7 @@ export const ancillaryPackagesSchema = z
id: item.id,
title: item.title,
description: item.descriptions.html,
imageUrl: item.images[0]?.imageSizes.small || undefined,
imageUrl: item.images[0]?.src || undefined,
price: {
total: item.variants.ancillary.price.totalPrice,
currency: item.variants.ancillary.price.currency,

53
packages/trpc/lib/routers/hotels/schemas/image.ts
View File

@@ -2,46 +2,37 @@ import { z } from "zod"
import { nullableStringValidator } from "@scandic-hotels/common/utils/zod/stringValidator"
export const imageSizesSchema = z.object({
large: nullableStringValidator,
medium: nullableStringValidator,
small: nullableStringValidator,
tiny: nullableStringValidator,
})
export const imageMetaDataSchema = z.object({
altText: nullableStringValidator,
altText_En: nullableStringValidator,
copyRight: nullableStringValidator,
title: nullableStringValidator,
title_En: nullableStringValidator,
})
const DEFAULT_IMAGE_OBJ = {
metaData: {
altText: "Default image",
altText_En: "Default image",
copyRight: "Default image",
title: "Default image",
title_En: "Default image",
},
imageSizes: {
tiny: "https://placehold.co/1280x720",
small: "https://placehold.co/1280x720",
medium: "https://placehold.co/1280x720",
large: "https://placehold.co/1280x720",
},
altText: "Default image",
altText_En: "Default image",
title: "Default image",
title_En: "Default image",
src: "https://placehold.co/1280x720",
}
export const imageSchema = z
.object({
imageSizes: imageSizesSchema,
metaData: imageMetaDataSchema,
imageSizes: z.object({
original: nullableStringValidator,
}),
metaData: z.object({
altText: nullableStringValidator,
altText_En: nullableStringValidator,
copyRight: nullableStringValidator,
title: nullableStringValidator,
title_En: nullableStringValidator,
}),
})
.nullish()
.transform((val) => {
if (!val) {
return DEFAULT_IMAGE_OBJ
}
return val
return {
src: val.imageSizes.original,
altText: val.metaData.altText,
altText_En: val.metaData.altText_En,
title: val.metaData.title,
title_En: val.metaData.title_En,
}
})

4
packages/trpc/lib/routers/hotels/schemas/packages.ts
View File

@@ -5,7 +5,7 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { BreakfastPackageEnum } from "../../../enums/breakfast"
import { PackageTypeEnum } from "../../../enums/packages"
import { RoomPackageCodeEnum } from "../../../enums/roomFilter"
import { imageSizesSchema } from "./image"
import { imageSchema } from "./image"
// TODO: Remove optional and default when the API change has been deployed
export const packagePriceSchema = z
@@ -38,7 +38,7 @@ export const ancillaryContentSchema = z.object({
}),
title: z.string(),
descriptions: z.object({ html: z.string() }),
images: z.array(z.object({ imageSizes: imageSizesSchema })),
images: z.array(imageSchema),
requiresDeliveryTime: z.boolean(),
})