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

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

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -64,7 +64,8 @@ export default async function DestinationCityPage({
   } = destinationCityPage
 
   const allHotels = await getHotelsByCityIdentifier(cityIdentifier)
-  const allFilters = getFiltersFromHotels(allHotels, lang)
+  const hotelFilters = getFiltersFromHotels(allHotels, lang)
+
   const sortItems: HotelSortItem[] = [
     {
       label: intl.formatMessage({
@@ -92,7 +93,8 @@ export default async function DestinationCityPage({
       <Suspense fallback={<DestinationCityPageSkeleton />}>
         <DestinationDataProvider
           allHotels={allHotels}
-          allFilters={allFilters}
+          hotelFilters={hotelFilters}
+          seoFilters={seo_filters}
           sortItems={sortItems}
           pathname={pathname}
         >

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -67,7 +67,7 @@ export default async function DestinationCountryPage({
     getHotelsByCountry(destination_settings.country),
     getDestinationCityPagesByCountry(destination_settings.country),
   ])
-  const allFilters = getFiltersFromHotels(allHotels, lang)
+  const hotelFilters = getFiltersFromHotels(allHotels, lang)
 
   const sortItems: HotelSortItem[] = [
     {
@@ -91,7 +91,8 @@ export default async function DestinationCountryPage({
         <DestinationDataProvider
           allHotels={allHotels}
           allCities={allCities}
-          allFilters={allFilters}
+          hotelFilters={hotelFilters}
+          seoFilters={seo_filters}
           sortItems={sortItems}
           pathname={pathname}
         >

apps/scandic-web/providers/DestinationDataProvider/index.tsx

@@ -14,7 +14,8 @@ import type { DestinationDataProviderProps } from "@/types/providers/destination
 export default function DestinationDataProvider({
   allCities = [],
   allHotels,
-  allFilters,
+  hotelFilters,
+  seoFilters,
   sortItems,
   pathname,
   children,
@@ -26,7 +27,8 @@ export default function DestinationDataProvider({
     storeRef.current = createDestinationDataStore({
       allCities,
       allHotels,
-      allFilters,
+      hotelFilters,
+      seoFilters,
       pathname,
       sortItems,
       searchParams,

apps/scandic-web/stores/destination-data/index.ts

@@ -2,6 +2,7 @@ import { produce } from "immer"
 import { useContext } from "react"
 import { create, useStore } from "zustand"
 
+import { mergeHotelFiltersAndSeoFilters } from "@scandic-hotels/trpc/utils/getFiltersFromHotels"
 import { getSortedCities } from "@scandic-hotels/trpc/utils/getSortedCities"
 
 import { DestinationDataContext } from "@/contexts/DestinationData"
@@ -28,15 +29,17 @@ import type {
 export function createDestinationDataStore({
   allCities,
   allHotels,
-  allFilters,
+  hotelFilters,
+  seoFilters,
   pathname,
   sortItems,
   searchParams,
 }: InitialState) {
   const defaultSort =
     sortItems.find((s) => s.isDefault)?.value ?? sortItems[0].value
-  const flattenedFilters = Object.values(allFilters).flat<HotelFilter[]>()
-  const allFilterSlugs = flattenedFilters.map((filter) => filter.slug)
+  const allFilters = mergeHotelFiltersAndSeoFilters(hotelFilters, seoFilters)
+  const allFlattenedFilters = Object.values(allFilters).flat<HotelFilter[]>()
+  const allFilterSlugs = allFlattenedFilters.map((filter) => filter.slug)
   const activeFilters: HotelFilter[] = []
   let filterFromUrl: HotelFilter | null = null
 
@@ -47,7 +50,7 @@ export function createDestinationDataStore({
   if (basePathnameWithoutFilters !== pathname) {
     const pathParts = pathname.split("/")
     filterFromUrl =
-      flattenedFilters.find(
+      allFlattenedFilters.find(
         (filter) => filter.slug === pathParts[pathParts.length - 1]
       ) ?? null
     if (filterFromUrl) {
@@ -76,11 +79,11 @@ export function createDestinationDataStore({
               sort && isValidSortOption(sort, state.sortItems)
                 ? sort
                 : state.defaultSort
-            const filters = flattenedFilters.filter((filter) =>
+            const filters = allFlattenedFilters.filter((filter) =>
               filterSlugs.includes(filter.slug)
             )
             const filterFromUrl =
-              flattenedFilters.find(
+              allFlattenedFilters.find(
                 (filter) => filter.slug === filterSlugFromUrl
               ) ?? null
             const filteredHotels = getFilteredHotels(state.allHotels, filters)

apps/scandic-web/types/providers/destination-data.ts

@@ -1,4 +1,5 @@
 import type { DestinationCityListItem } from "@scandic-hotels/trpc/types/destinationCityPage"
+import type { SEOFilters } from "@scandic-hotels/trpc/types/destinationsData"
 import type {
   CategorizedHotelFilters,
   HotelListingHotelData,
@@ -8,7 +9,8 @@ import type {
 export interface DestinationDataProviderProps extends React.PropsWithChildren {
   allHotels: HotelListingHotelData[]
   allCities?: DestinationCityListItem[]
-  allFilters: CategorizedHotelFilters
+  hotelFilters: CategorizedHotelFilters
+  seoFilters: SEOFilters | null
   filterFromUrl?: string
   sortItems: HotelSortItem[]
   pathname: string

apps/scandic-web/types/stores/destination-data.ts

@@ -1,4 +1,5 @@
 import type { DestinationCityListItem } from "@scandic-hotels/trpc/types/destinationCityPage"
+import type { SEOFilters } from "@scandic-hotels/trpc/types/destinationsData"
 import type {
   CategorizedHotelFilters,
   HotelFilter,
@@ -42,10 +43,9 @@ export interface DestinationDataState {
 }
 
 export interface InitialState
-  extends Pick<
-    DestinationDataState,
-    "allHotels" | "allCities" | "sortItems" | "allFilters"
-  > {
+  extends Pick<DestinationDataState, "allHotels" | "allCities" | "sortItems"> {
   pathname: string
   searchParams: ReadonlyURLSearchParams
+  seoFilters: SEOFilters | null
+  hotelFilters: CategorizedHotelFilters
 }