feat(BOOK-53): Added component for SEO filters and support filter switching

Approved-by: Chuma Mcphoy (We Ahead)

packages/trpc/lib/graphql/Fragments/HotelFilter.graphql

@@ -0,0 +1,14 @@
+#import "./System.graphql"
+
+fragment HotelFilter on HotelFilter {
+  title
+  facility_id
+  category
+  slug
+}
+
+fragment HotelFilterRef on HotelFilter {
+  system {
+    ...System
+  }
+}

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

@@ -1,5 +1,7 @@
 #import "../../Fragments/System.graphql"
 
+#import "../../Fragments/HotelFilter.graphql"
+
 #import "../../Fragments/Blocks/Accordion.graphql"
 #import "../../Fragments/Blocks/Content.graphql"
 
@@ -82,6 +84,15 @@ query GetDestinationCityPage($locale: String!, $uid: String!) {
       ...Accordion_DestinationCityPage
       ...Content_DestinationCityPage
     }
+    seo_filters {
+      filterConnection {
+        edges {
+          node {
+            ...HotelFilter
+          }
+        }
+      }
+    }
     system {
       ...System
       created_at
@@ -135,6 +146,15 @@ query GetDestinationCityPageRefs($locale: String!, $uid: String!) {
       ...Accordion_DestinationCityPageRefs
       ...Content_DestinationCityPageRefs
     }
+    seo_filters {
+      filterConnection {
+        edges {
+          node {
+            ...HotelFilterRef
+          }
+        }
+      }
+    }
     system {
       ...System
     }

packages/trpc/lib/graphql/Query/DestinationCountryPage/DestinationCountryPage.graphql

@@ -1,5 +1,7 @@
 #import "../../Fragments/System.graphql"
 
+#import "../../Fragments/HotelFilter.graphql"
+
 #import "../../Fragments/Blocks/Accordion.graphql"
 #import "../../Fragments/Blocks/Content.graphql"
 
@@ -77,6 +79,15 @@ query GetDestinationCountryPage($locale: String!, $uid: String!) {
       ...Accordion_DestinationCountryPage
       ...Content_DestinationCountryPage
     }
+    seo_filters {
+      filterConnection {
+        edges {
+          node {
+            ...HotelFilter
+          }
+        }
+      }
+    }
     system {
       ...System
       created_at
@@ -117,6 +128,15 @@ query GetDestinationCountryPageRefs($locale: String!, $uid: String!) {
       ...Accordion_DestinationCountryPageRefs
       ...Content_DestinationCountryPageRefs
     }
+    seo_filters {
+      filterConnection {
+        edges {
+          node {
+            ...HotelFilterRef
+          }
+        }
+      }
+    }
     system {
       ...System
     }

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

@@ -11,6 +11,10 @@ import {
   accordionSchema,
 } from "../schemas/blocks/accordion"
 import { contentRefsSchema, contentSchema } from "../schemas/blocks/content"
+import {
+  destinationFiltersRefsSchema,
+  destinationFiltersSchema,
+} from "../schemas/destinationFilters"
 import { mapLocationSchema } from "../schemas/mapLocation"
 import {
   linkRefsUnionSchema,
@@ -159,6 +163,7 @@ export const destinationCityPageSchema = z.object({
       })
       .nullish(),
     blocks: discriminatedUnionArray(blocksSchema.options).nullable(),
+    seo_filters: destinationFiltersSchema,
     system: systemSchema.merge(
       z.object({
         created_at: z.string(),
@@ -258,6 +263,7 @@ export const destinationCityPageRefsSchema = z.object({
       })
       .nullish(),
     blocks: discriminatedUnionArray(blocksRefsSchema.options).nullable(),
+    seo_filters: destinationFiltersRefsSchema,
     system: systemSchema,
   }),
 })

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

@@ -11,6 +11,10 @@ import {
   accordionSchema,
 } from "../schemas/blocks/accordion"
 import { contentRefsSchema, contentSchema } from "../schemas/blocks/content"
+import {
+  destinationFiltersRefsSchema,
+  destinationFiltersSchema,
+} from "../schemas/destinationFilters"
 import { mapLocationSchema } from "../schemas/mapLocation"
 import {
   linkRefsUnionSchema,
@@ -88,6 +92,7 @@ export const destinationCountryPageSchema = z.object({
       })
       .nullish(),
     blocks: discriminatedUnionArray(blocksSchema.options).nullable(),
+    seo_filters: destinationFiltersSchema,
     system: systemSchema.merge(
       z.object({
         created_at: z.string(),
@@ -160,6 +165,7 @@ export const destinationCountryPageRefsSchema = z.object({
       }),
     }),
     blocks: discriminatedUnionArray(blocksRefsSchema.options).nullable(),
+    seo_filters: destinationFiltersRefsSchema,
     system: systemSchema,
   }),
 })

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

@@ -0,0 +1,55 @@
+import { z } from "zod"
+
+import { isDefined } from "@scandic-hotels/common/utils/isDefined"
+
+import { hotelFilterSchema } from "./hotelFilter"
+import { systemSchema } from "./system"
+
+export const destinationFiltersSchema = z
+  .array(
+    z.object({
+      filterConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: hotelFilterSchema,
+          })
+        ),
+      }),
+    })
+  )
+  .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 destinationFiltersRefsSchema = z
+  .array(
+    z.object({
+      filterConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: z.object({
+              system: systemSchema,
+            }),
+          })
+        ),
+      }),
+    })
+  )
+  .nullish()

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

@@ -0,0 +1,18 @@
+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,
+  }))