Merged in feat/SW-1956-add-English-caption-fallback (pull request #2574)

Feat/SW-1956 add English caption fallback

* feat(SW-1956): add English fallback to gallery caption

* feat(SW-1956): add English fallback to gallery caption


Approved-by: Anton Gunnarsson

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

@@ -108,7 +108,7 @@ export default function Room({
           height={204}
           src={img?.imageSizes.medium ?? ""}
           style={{ borderRadius: "var(--Corner-radius-md)" }}
-          title={img?.metaData.title ?? ""}
+          title={img?.metaData.title || img?.metaData.title_En || ""}
           width={204}
         />
         <div className={styles.roomDetails}>

apps/scandic-web/utils/facilityCards.ts

@@ -125,7 +125,7 @@ export function setFacilityCardGrids(
           const img: FacilityImage = {
             backgroundImage: {
               url: image.imageSizes.large,
-              title: image.metaData.title,
+              title: image.metaData.title || image.metaData.title_En,
               meta: {
                 alt: image.metaData.altText,
                 caption: image.metaData.altText_En,

apps/scandic-web/utils/imageGallery.ts

@@ -1,6 +1,7 @@
-import type { GalleryImage } from "@/types/components/imageGallery"
-import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
 import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
+import type { ImageVaultAsset } from "@scandic-hotels/trpc/types/imageVault"
+
+import type { GalleryImage } from "@/types/components/imageGallery"
 
 function mapApiImageToGalleryImage(apiImage: ApiImage): GalleryImage {
   return {
@@ -8,8 +9,9 @@ function mapApiImageToGalleryImage(apiImage: ApiImage): GalleryImage {
     alt:
       apiImage.metaData.altText ||
       apiImage.metaData.altText_En ||
-      apiImage.metaData.title,
+      apiImage.metaData.title ||
-    caption: apiImage.metaData.title,
+      apiImage.metaData.title_En,
+    caption: apiImage.metaData.title || apiImage.metaData.title_En,
     smallSrc: apiImage.imageSizes.small,
   }
 }

apps/scandic-web/utils/jsonSchemas.ts

@@ -1,5 +1,7 @@
 import { env } from "@/env/server"
 
+import type { Breadcrumbs } from "@scandic-hotels/trpc/types/breadcrumbs"
+import type { HotelData } from "@scandic-hotels/trpc/types/hotel"
 import type {
   BreadcrumbList,
   Hotel as HotelSchema,
@@ -7,9 +9,6 @@ import type {
   WithContext,
 } from "schema-dts"
 
-import type { HotelData } from "@scandic-hotels/trpc/types/hotel"
-import type { Breadcrumbs } from "@scandic-hotels/trpc/types/breadcrumbs"
-
 export function generateBreadcrumbsSchema(breadcrumbs: Breadcrumbs) {
   const itemListElement: ListItem[] = breadcrumbs.map((item, index) => ({
     "@type": "ListItem",
@@ -63,7 +62,7 @@ export function generateHotelSchema(hotelData: HotelData) {
     jsonLd.image = {
       "@type": "ImageObject",
       url: image.imageSizes.small,
-      caption: image.metaData.title,
+      caption: image.metaData.title || image.metaData.title_En,
     }
   }
 

packages/trpc/lib/routers/hotels/schemas/image.ts

@@ -14,6 +14,7 @@ export const imageMetaDataSchema = z.object({
   altText_En: nullableStringValidator,
   copyRight: nullableStringValidator,
   title: nullableStringValidator,
+  title_En: nullableStringValidator,
 })
 
 const DEFAULT_IMAGE_OBJ = {
@@ -22,6 +23,7 @@ const DEFAULT_IMAGE_OBJ = {
     altText_En: "Default image",
     copyRight: "Default image",
     title: "Default image",
+    title_En: "Default image",
   },
   imageSizes: {
     tiny: "https://placehold.co/1280x720",