feat(BOOK-55): Listen to SEO filter slugs when navigating to such page

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström

packages/trpc/lib/graphql/Query/DestinationCityPage/Metadata.graphql

@@ -1,5 +1,6 @@
 #import "../../Fragments/Metadata.graphql"
 #import "../../Fragments/System.graphql"
+#import "../../Fragments/HotelFilter.graphql"
 
 query GetDestinationCityPageMetadata($locale: String!, $uid: String!) {
   destination_city_page(locale: $locale, uid: $uid) {
@@ -22,6 +23,15 @@ query GetDestinationCityPageMetadata($locale: String!, $uid: String!) {
     images {
       image
     }
+    seo_filters {
+      filterConnection {
+        edges {
+          node {
+            ...HotelFilter
+          }
+        }
+      }
+    }
     system {
       ...System
     }

packages/trpc/lib/routers/contentstack/destinationCityPage/output.ts

@@ -13,7 +13,7 @@ import {
 import { contentRefsSchema, contentSchema } from "../schemas/blocks/content"
 import {
   destinationFiltersRefsSchema,
-  destinationFiltersSchema,
+  transformedDestinationFiltersSchema,
 } from "../schemas/destinationFilters"
 import { mapLocationSchema } from "../schemas/mapLocation"
 import {
@@ -163,7 +163,7 @@ export const destinationCityPageSchema = z.object({
       })
       .nullish(),
     blocks: discriminatedUnionArray(blocksSchema.options).nullable(),
-    seo_filters: destinationFiltersSchema,
+    seo_filters: transformedDestinationFiltersSchema,
     system: systemSchema.merge(
       z.object({
         created_at: z.string(),

packages/trpc/lib/routers/contentstack/destinationCountryPage/output.ts

@@ -13,7 +13,7 @@ import {
 import { contentRefsSchema, contentSchema } from "../schemas/blocks/content"
 import {
   destinationFiltersRefsSchema,
-  destinationFiltersSchema,
+  transformedDestinationFiltersSchema,
 } from "../schemas/destinationFilters"
 import { mapLocationSchema } from "../schemas/mapLocation"
 import {
@@ -92,7 +92,7 @@ export const destinationCountryPageSchema = z.object({
       })
       .nullish(),
     blocks: discriminatedUnionArray(blocksSchema.options).nullable(),
-    seo_filters: destinationFiltersSchema,
+    seo_filters: transformedDestinationFiltersSchema,
     system: systemSchema.merge(
       z.object({
         created_at: z.string(),

packages/trpc/lib/routers/contentstack/metadata/output.ts

@@ -12,6 +12,7 @@ import { Country } from "../../../types/country"
 import { RTETypeEnum } from "../../../types/RTEenums"
 import { additionalDataAttributesSchema } from "../../hotels/schemas/hotel/include/additionalData"
 import { imageSchema } from "../../hotels/schemas/image"
+import { destinationFiltersSchema } from "../schemas/destinationFilters"
 import { systemSchema } from "../schemas/system"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
@@ -166,6 +167,7 @@ export const rawMetadataSchema = z.object({
       cities: z.array(z.string()).nullish(),
     })
     .nullish(),
+  seo_filters: destinationFiltersSchema,
   system: systemSchema,
 })
 

packages/trpc/lib/routers/contentstack/metadata/utils.ts

@@ -1,6 +1,9 @@
 import { ApiCountry } from "../../../types/country"
 import { HotelSortOption } from "../../../types/hotel"
-import { getFiltersFromHotels } from "../../../utils/getFiltersFromHotels"
+import {
+  getFiltersFromHotels,
+  mergeHotelFiltersAndSeoFilters,
+} from "../../../utils/getFiltersFromHotels"
 import { getSortedCities } from "../../../utils/getSortedCities"
 import {
   getCityByCityIdentifier,
@@ -9,6 +12,7 @@ import {
   getHotelsByHotelIds,
 } from "../../hotels/utils"
 import { getCityPages } from "../destinationCountryPage/utils"
+import { transformDestinationFiltersResponse } from "../schemas/destinationFilters"
 
 import type { Lang } from "@scandic-hotels/common/constants/language"
 
@@ -24,6 +28,7 @@ export async function getCityData(
   lang: Lang
 ) {
   const destinationSettings = data.destination_settings
+  const seoFilters = transformDestinationFiltersResponse(data.seo_filters)
   const filter = input.filterFromUrl
 
   if (destinationSettings) {
@@ -61,7 +66,11 @@ export async function getCityData(
 
       let filterType
       if (filter) {
-        const allFilters = getFiltersFromHotels(hotels, lang)
+        const hotelFilters = getFiltersFromHotels(hotels, lang)
+        const allFilters = mergeHotelFiltersAndSeoFilters(
+          hotelFilters,
+          seoFilters
+        )
         const facilityFilter = allFilters.facilityFilters.find(
           (f) => f.slug === filter
         )

packages/trpc/lib/routers/contentstack/schemas/destinationFilters.ts

@@ -1,8 +1,8 @@
 import { z } from "zod"
 
+import { FacilityEnum } from "@scandic-hotels/common/constants/facilities"
 import { isDefined } from "@scandic-hotels/common/utils/isDefined"
 
-import { hotelFilterSchema } from "./hotelFilter"
 import { systemSchema } from "./system"
 
 export const destinationFiltersSchema = z
@@ -11,32 +11,25 @@ export const destinationFiltersSchema = z
       filterConnection: z.object({
         edges: z.array(
           z.object({
-            node: hotelFilterSchema,
+            node: z.object({
+              title: z.string(),
+              facility_id: z
+                .nativeEnum(FacilityEnum)
+                .catch(FacilityEnum.UNKNOWN),
+              category: z.string(),
+              slug: z.string(),
+            }),
           })
         ),
       }),
     })
   )
   .nullish()
-  .transform((data) => {
-    const filters = data
-      ?.map(({ filterConnection }) => filterConnection.edges[0]?.node)
-      .filter(isDefined)
 
-    if (!data || !filters?.length) {
-      return null
-    }
-
-    const facilityFilters = filters.filter((f) => f.filterType === "facility")
-    const surroundingsFilters = filters.filter(
-      (f) => f.filterType === "surroundings"
-    )
-
-    return {
-      facilityFilters,
-      surroundingsFilters,
-    }
-  })
+export const transformedDestinationFiltersSchema =
+  destinationFiltersSchema.transform((data) =>
+    transformDestinationFiltersResponse(data)
+  )
 
 export const destinationFiltersRefsSchema = z
   .array(
@@ -53,3 +46,35 @@ export const destinationFiltersRefsSchema = z
     })
   )
   .nullish()
+
+export function transformDestinationFiltersResponse(
+  data: typeof destinationFiltersSchema._type
+) {
+  const filters = data
+    ?.map(({ filterConnection }) => filterConnection.edges[0]?.node)
+    .filter(isDefined)
+
+  if (!data || !filters?.length) {
+    return null
+  }
+
+  const transformedFilters = filters.map((filter) => ({
+    id: filter.facility_id,
+    name: filter.title,
+    filterType: filter.category,
+    slug: filter.slug,
+    sortOrder: 0,
+  }))
+
+  const facilityFilters = transformedFilters.filter(
+    (f) => f.filterType === "facility"
+  )
+  const surroundingsFilters = transformedFilters.filter(
+    (f) => f.filterType === "surroundings"
+  )
+
+  return {
+    facilityFilters,
+    surroundingsFilters,
+  }
+}

packages/trpc/lib/routers/contentstack/schemas/hotelFilter.ts

@@ -1,18 +0,0 @@
-import { z } from "zod"
-
-import { FacilityEnum } from "@scandic-hotels/common/constants/facilities"
-
-export const hotelFilterSchema = z
-  .object({
-    title: z.string(),
-    facility_id: z.nativeEnum(FacilityEnum).catch(FacilityEnum.UNKNOWN),
-    category: z.string(),
-    slug: z.string(),
-  })
-  .transform((data) => ({
-    id: data.facility_id,
-    name: data.title,
-    filterType: data.category,
-    slug: data.slug,
-    sortOrder: 0,
-  }))

packages/trpc/lib/types/destinationsData.ts

@@ -1,3 +1,5 @@
+import type { HotelFilter } from "./hotel"
+
 export type City = {
   id: string
   name: string
@@ -14,3 +16,8 @@ export type DestinationCountry = {
 }
 
 export type DestinationsData = DestinationCountry[]
+
+export type SEOFilters = {
+  facilityFilters: HotelFilter[]
+  surroundingsFilters: HotelFilter[]
+}

packages/trpc/lib/utils/getFiltersFromHotels.ts

@@ -1,5 +1,7 @@
+import type { FacilityEnum } from "@scandic-hotels/common/constants/facilities"
 import type { Lang } from "@scandic-hotels/common/constants/language"
 
+import type { SEOFilters } from "../types/destinationsData"
 import type {
   CategorizedHotelFilters,
   HotelFilter,
@@ -33,6 +35,39 @@ function sortFilters(filters: HotelFilter[]): HotelFilter[] {
   })
 }
 
+// Merges hotel and SEO filters, removing duplicates (by id).
+// In case of duplicates, the SEO filter takes precedence.
+function mergeAndDeduplicate(
+  hotelFilters: HotelFilter[],
+  seoFilters: HotelFilter[]
+): HotelFilter[] {
+  const map = new Map<FacilityEnum, HotelFilter>()
+  hotelFilters.forEach((filter) => map.set(filter.id, filter))
+  seoFilters.forEach((filter) => map.set(filter.id, filter))
+  return Array.from(map.values())
+}
+
+export function mergeHotelFiltersAndSeoFilters(
+  hotelFilters: CategorizedHotelFilters,
+  seoFilters: SEOFilters | null
+): CategorizedHotelFilters {
+  if (!seoFilters) {
+    return hotelFilters
+  }
+
+  return {
+    ...hotelFilters,
+    facilityFilters: mergeAndDeduplicate(
+      hotelFilters.facilityFilters,
+      seoFilters.facilityFilters
+    ),
+    surroundingsFilters: mergeAndDeduplicate(
+      hotelFilters.surroundingsFilters,
+      seoFilters.surroundingsFilters
+    ),
+  }
+}
+
 export function getFiltersFromHotels(
   hotels: HotelListingHotelData[],
   lang: Lang