feat(BOOK-57): Adjusted metadata for destination pages with active seo filter

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/utils/metadata/image/destinationPage.ts

@@ -0,0 +1,27 @@
+import type { RawMetadataSchema } from "@scandic-hotels/trpc/routers/contentstack/metadata/output"
+
+export function getDestinationFilterSeoMetaImage(data: RawMetadataSchema) {
+  const filter = data.destinationData?.filter
+
+  if (!filter) {
+    return null
+  }
+
+  const foundSeoFilter = data.seo_filters?.find(
+    (f) => f.filterConnection.edges[0]?.node?.slug === filter
+  )
+
+  if (foundSeoFilter) {
+    const metaDataImage = foundSeoFilter.seo_metadata?.seo_image
+    if (metaDataImage) {
+      return {
+        url: metaDataImage.url,
+        alt: metaDataImage.meta.alt || undefined,
+        width: metaDataImage.dimensions.width,
+        height: metaDataImage.dimensions.height,
+      }
+    }
+  }
+
+  return null
+}

apps/scandic-web/utils/metadata/image/hotelPage.ts

@@ -0,0 +1,88 @@
+import type { RawMetadataSchema } from "@scandic-hotels/trpc/routers/contentstack/metadata/output"
+
+export function getHotelPageImage(data: RawMetadataSchema) {
+  const { subpageUrl, hotelData, additionalHotelData, hotelRestaurants } = data
+  if (!hotelData) {
+    return null
+  }
+
+  if (subpageUrl) {
+    let subpageImage: { url: string; alt?: string } | null = null
+    const restaurantSubPage = hotelRestaurants?.find(
+      (restaurant) => restaurant.nameInUrl === subpageUrl
+    )
+    const restaurantImage = restaurantSubPage?.content?.images?.[0]
+    if (restaurantImage) {
+      subpageImage = {
+        url: restaurantImage.src,
+        alt: restaurantImage.altText || restaurantImage.altText_En || undefined,
+      }
+    } else {
+      switch (subpageUrl) {
+        case additionalHotelData?.hotelParking.nameInUrl:
+          const parkingImage = additionalHotelData?.parkingImages?.heroImages[0]
+          if (parkingImage) {
+            subpageImage = {
+              url: parkingImage.src,
+              alt: parkingImage.altText || parkingImage.altText_En || undefined,
+            }
+          }
+          break
+        case additionalHotelData?.healthAndFitness.nameInUrl:
+          const wellnessImage = hotelData.healthFacilities.find(
+            (fac) => fac.content.images.length
+          )?.content.images[0]
+          if (wellnessImage) {
+            subpageImage = {
+              url: wellnessImage.src,
+              alt:
+                wellnessImage.altText || wellnessImage.altText_En || undefined,
+            }
+          }
+          break
+        case additionalHotelData?.hotelSpecialNeeds.nameInUrl:
+          const accessibilityImage =
+            additionalHotelData?.accessibility?.heroImages[0]
+          if (accessibilityImage) {
+            subpageImage = {
+              url: accessibilityImage.src,
+              alt:
+                accessibilityImage.altText ||
+                accessibilityImage.altText_En ||
+                undefined,
+            }
+          }
+          break
+        case additionalHotelData?.meetingRooms.nameInUrl:
+          const meetingImage =
+            additionalHotelData?.conferencesAndMeetings?.heroImages[0]
+          if (meetingImage) {
+            subpageImage = {
+              url: meetingImage.src,
+              alt: meetingImage.altText || meetingImage.altText_En || undefined,
+            }
+          }
+          break
+        default:
+          break
+      }
+    }
+
+    if (subpageImage) {
+      return subpageImage
+    }
+  }
+
+  const hotelImage =
+    additionalHotelData?.gallery?.heroImages?.[0] ||
+    additionalHotelData?.gallery?.smallerImages?.[0]
+
+  if (hotelImage) {
+    return {
+      url: hotelImage.src,
+      alt: hotelImage.altText || undefined,
+    }
+  }
+
+  return null
+}

apps/scandic-web/utils/metadata/image/index.ts

@@ -0,0 +1,59 @@
+import { PageContentTypeEnum } from "@scandic-hotels/trpc/enums/contentType"
+
+import { getDestinationFilterSeoMetaImage } from "@/utils/metadata/image/destinationPage"
+import { getHotelPageImage } from "@/utils/metadata/image/hotelPage"
+
+import type { RawMetadataSchema } from "@scandic-hotels/trpc/routers/contentstack/metadata/output"
+
+export function getImage(data: RawMetadataSchema) {
+  const metadataImage = data.web?.seo_metadata?.seo_image
+  const isDestinationPage = [
+    PageContentTypeEnum.destinationCityPage,
+    PageContentTypeEnum.destinationCountryPage,
+  ].includes(data.system.content_type_uid as PageContentTypeEnum)
+
+  if (isDestinationPage) {
+    const destinationFilterSeoMetaImage = getDestinationFilterSeoMetaImage(data)
+    if (destinationFilterSeoMetaImage) {
+      return destinationFilterSeoMetaImage
+    }
+  }
+
+  // Currently we don't have the possibility to get smaller images from ImageVault (2024-11-15)
+  if (metadataImage) {
+    return {
+      url: metadataImage.url,
+      alt: metadataImage.meta.alt || undefined,
+      width: metadataImage.dimensions.width,
+      height: metadataImage.dimensions.height,
+    }
+  }
+
+  let contentTypeImage: { url: string; alt?: string } | null = null
+
+  switch (data.system.content_type_uid) {
+    case PageContentTypeEnum.hotelPage:
+      contentTypeImage = getHotelPageImage(data)
+      break
+    default:
+      break
+  }
+  if (contentTypeImage) {
+    return contentTypeImage
+  }
+
+  // Fallback to hero image if no other image is found
+  const heroImage =
+    data.hero_image || data.header?.hero_image || data.images?.[0]
+
+  if (heroImage) {
+    return {
+      url: heroImage.url,
+      alt: heroImage.meta.alt || undefined,
+      width: heroImage.dimensions.width,
+      height: heroImage.dimensions.height,
+    }
+  }
+
+  return undefined
+}