Feat/SW-2271 hotel list filtering

* feat(SW-2271): Changes to hotel data types in preperation for filtering
* feat(SW-2271): Added filter and sort functionality

Approved-by: Matilda Landström

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

@@ -1,29 +1,30 @@
-import { SortOption } from "@scandic-hotels/trpc/enums/destinationFilterAndSort"
+import {
+  type HotelListingHotelData,
+  type HotelSortItem,
+  HotelSortOption,
+} from "@scandic-hotels/trpc/types/hotel"
 
 import type { DestinationCityListItem } from "@scandic-hotels/trpc/types/destinationCityPage"
-import type { DestinationPagesHotelData } from "@scandic-hotels/trpc/types/hotel"
-
-import type { SortItem } from "@/types/components/destinationFilterAndSort"
 
 const HOTEL_SORTING_STRATEGIES: Partial<
   Record<
-    SortOption,
-    (a: DestinationPagesHotelData, b: DestinationPagesHotelData) => number
+    HotelSortOption,
+    (a: HotelListingHotelData, b: HotelListingHotelData) => number
   >
 > = {
-  [SortOption.Name]: function (a, b) {
+  [HotelSortOption.Name]: function (a, b) {
     return a.hotel.name.localeCompare(b.hotel.name)
   },
-  [SortOption.TripAdvisorRating]: function (a, b) {
+  [HotelSortOption.TripAdvisorRating]: function (a, b) {
     return (b.hotel.tripadvisor ?? 0) - (a.hotel.tripadvisor ?? 0)
   },
-  [SortOption.Distance]: function (a, b) {
+  [HotelSortOption.Distance]: function (a, b) {
     return a.hotel.location.distanceToCentre - b.hotel.location.distanceToCentre
   },
 }
 
 export function getFilteredHotels(
-  hotels: DestinationPagesHotelData[],
+  hotels: HotelListingHotelData[],
   filters: string[]
 ) {
   if (filters.length) {
@@ -37,7 +38,7 @@ export function getFilteredHotels(
 }
 
 export function getFilteredCities(
-  filteredHotels: DestinationPagesHotelData[],
+  filteredHotels: HotelListingHotelData[],
   cities: DestinationCityListItem[]
 ) {
   const filteredCityIdentifiers = filteredHotels.map(
@@ -52,8 +53,8 @@ export function getFilteredCities(
 }
 
 export function getSortedHotels(
-  hotels: DestinationPagesHotelData[],
-  sortOption: SortOption
+  hotels: HotelListingHotelData[],
+  sortOption: HotelSortOption
 ) {
   const sortFn = HOTEL_SORTING_STRATEGIES[sortOption]
   return sortFn ? [...hotels].sort(sortFn) : hotels
@@ -61,9 +62,9 @@ export function getSortedHotels(
 
 export function isValidSortOption(
   value: string,
-  sortItems: SortItem[]
-): value is SortOption {
-  return sortItems.map((item) => item.value).includes(value as SortOption)
+  sortItems: HotelSortItem[]
+): value is HotelSortOption {
+  return sortItems.map((item) => item.value).includes(value as HotelSortOption)
 }
 
 export function getBasePathNameWithoutFilters(

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

@@ -18,7 +18,7 @@ import {
   isValidSortOption,
 } from "./helper"
 
-import type { Filter } from "@scandic-hotels/trpc/types/destinationFilterAndSort"
+import type { HotelFilter } from "@scandic-hotels/trpc/types/hotel"
 
 import type {
   DestinationDataState,
@@ -36,8 +36,8 @@ export function createDestinationDataStore({
 }: InitialState) {
   const defaultSort =
     sortItems.find((s) => s.isDefault)?.value ?? sortItems[0].value
-  const allFilterSlugs = Object.values(allFilters).flatMap((filter: Filter[]) =>
-    filter.map((f) => f.slug)
+  const allFilterSlugs = Object.values(allFilters).flatMap(
+    (filter: HotelFilter[]) => filter.map((f) => f.slug)
   )
 
   const activeFilters: string[] = filterFromUrl ? [filterFromUrl] : []

apps/scandic-web/stores/hotel-listing-data/helper.ts

@@ -0,0 +1,64 @@
+import {
+  type HotelListingHotelData,
+  type HotelSortItem,
+  HotelSortOption,
+} from "@scandic-hotels/trpc/types/hotel"
+
+const HOTEL_SORTING_STRATEGIES: Partial<
+  Record<
+    HotelSortOption,
+    (a: HotelListingHotelData, b: HotelListingHotelData) => number
+  >
+> = {
+  [HotelSortOption.Name]: function (a, b) {
+    return a.hotel.name.localeCompare(b.hotel.name)
+  },
+  [HotelSortOption.TripAdvisorRating]: function (a, b) {
+    return (b.hotel.tripadvisor ?? 0) - (a.hotel.tripadvisor ?? 0)
+  },
+}
+
+export function getFilteredHotels(
+  hotels: HotelListingHotelData[],
+  filters: string[]
+) {
+  if (filters.length) {
+    return hotels.filter(({ hotel }) =>
+      filters.every((filter) => {
+        const matchesFacility = hotel.detailedFacilities.some(
+          (facility) => facility.slug === filter
+        )
+        const matchesCountry =
+          hotel.countryCode.toLowerCase() === filter.toLowerCase()
+        return matchesFacility || matchesCountry
+      })
+    )
+  }
+  return hotels
+}
+
+export function getSortedHotels(
+  hotels: HotelListingHotelData[],
+  sortOption: HotelSortOption
+) {
+  const sortFn = HOTEL_SORTING_STRATEGIES[sortOption]
+  return sortFn ? [...hotels].sort(sortFn) : hotels
+}
+
+export function isValidSortOption(
+  value: string,
+  sortItems: HotelSortItem[]
+): value is HotelSortOption {
+  return sortItems.map((item) => item.value).includes(value as HotelSortOption)
+}
+
+export function getBasePathNameWithoutFilters(
+  pathname: string,
+  filterSlugs: string[]
+) {
+  const pathSegments = pathname.split("/")
+  const filteredSegments = pathSegments.filter(
+    (segment) => !filterSlugs.includes(segment)
+  )
+  return filteredSegments.join("/")
+}

apps/scandic-web/stores/hotel-listing-data/index.ts

@@ -0,0 +1,175 @@
+import { produce } from "immer"
+import { useContext } from "react"
+import { create, useStore } from "zustand"
+
+import { HotelListingDataContext } from "@/contexts/HotelListingData"
+import {
+  trackFilterChangeEvent,
+  trackSortingChangeEvent,
+} from "@/utils/tracking/destinationPage"
+
+import { getFilteredHotels, getSortedHotels, isValidSortOption } from "./helper"
+
+import type { HotelFilter } from "@scandic-hotels/trpc/types/hotel"
+
+import type {
+  HotelListingDataState,
+  InitialState,
+} from "@/types/stores/hotel-listing-data"
+
+export function createHotelListingDataStore({
+  allHotels,
+  allFilters,
+  sortItems,
+  searchParams,
+}: InitialState) {
+  const defaultSort =
+    sortItems.find((s) => s.isDefault)?.value ?? sortItems[0].value
+  const allFilterSlugs = Object.values(allFilters).flatMap(
+    (filter: HotelFilter[]) => filter.map((f) => f.slug)
+  )
+
+  const activeFilters: string[] = []
+
+  let activeSort = defaultSort
+  if (searchParams) {
+    const sortParam = searchParams.get("sort")
+    const filterParam = searchParams.get("filter")
+
+    if (sortParam && isValidSortOption(sortParam, sortItems)) {
+      activeSort = sortParam
+    }
+
+    if (filterParam) {
+      const filters = filterParam.split(",")
+      filters.forEach((filter) => {
+        if (allFilterSlugs.includes(filter)) {
+          activeFilters.push(filter)
+        }
+      })
+    }
+  }
+  const filteredHotels = getFilteredHotels(allHotels, activeFilters)
+  const activeHotels = getSortedHotels(filteredHotels, activeSort)
+
+  return create<HotelListingDataState>((set) => ({
+    actions: {
+      updateActiveFiltersAndSort(filters, sort) {
+        return set(
+          produce((state: HotelListingDataState) => {
+            const newSort =
+              sort && isValidSortOption(sort, state.sortItems)
+                ? sort
+                : state.defaultSort
+            const filteredHotels = getFilteredHotels(state.allHotels, filters)
+            const sortedHotels = getSortedHotels(filteredHotels, newSort)
+
+            // Tracking
+            if (newSort !== state.activeSort) {
+              trackSortingChangeEvent(newSort)
+            }
+            if (
+              JSON.stringify(filters) !== JSON.stringify(state.activeFilters)
+            ) {
+              const facilityFiltersUsed = filters.filter((f) =>
+                state.allFilters.facilityFilters
+                  .map((ff) => ff.slug)
+                  .includes(f)
+              )
+              const surroundingsFiltersUsed = filters.filter((f) =>
+                state.allFilters.surroundingsFilters
+                  .map((sf) => sf.slug)
+                  .includes(f)
+              )
+
+              trackFilterChangeEvent(
+                facilityFiltersUsed,
+                surroundingsFiltersUsed
+              )
+            }
+
+            state.activeSort = newSort
+            state.activeFilters = filters
+            state.activeHotels = sortedHotels
+
+            state.pendingFilters = filters
+            state.pendingSort = newSort
+            state.pendingHotelCount = filteredHotels.length
+            state.isLoading = false
+          })
+        )
+      },
+      setIsLoading(isLoading) {
+        return set(
+          produce((state: HotelListingDataState) => {
+            state.isLoading = isLoading
+          })
+        )
+      },
+      setPendingSort(sort) {
+        return set(
+          produce((state: HotelListingDataState) => {
+            state.pendingSort = sort
+          })
+        )
+      },
+      togglePendingFilter(filter) {
+        return set(
+          produce((state: HotelListingDataState) => {
+            const isActive = state.pendingFilters.includes(filter)
+            const filters = isActive
+              ? state.pendingFilters.filter((f) => f !== filter)
+              : [...state.pendingFilters, filter]
+            const pendingHotels = getFilteredHotels(state.allHotels, filters)
+
+            state.pendingFilters = filters
+            state.pendingHotelCount = pendingHotels.length
+          })
+        )
+      },
+      clearPendingFilters() {
+        return set(
+          produce((state: HotelListingDataState) => {
+            state.pendingFilters = []
+            state.pendingHotelCount = state.allHotels.length
+          })
+        )
+      },
+      resetPendingValues() {
+        return set(
+          produce((state: HotelListingDataState) => {
+            state.pendingFilters = state.activeFilters
+            state.pendingSort = state.activeSort
+            state.pendingHotelCount = state.activeHotels.length
+          })
+        )
+      },
+    },
+    allHotels,
+    activeHotels: activeHotels,
+    pendingHotelCount: activeHotels.length,
+    activeSort,
+    pendingSort: activeSort,
+    defaultSort,
+    activeFilters,
+    pendingFilters: activeFilters,
+    allFilters,
+    allFilterSlugs,
+    sortItems,
+    isLoading: false,
+  }))
+}
+
+export function useHotelListingDataStore<T>(
+  selector: (store: HotelListingDataState) => T
+) {
+  const store = useContext(HotelListingDataContext)
+
+  if (!store) {
+    throw new Error(
+      "useHotelListingDataStore must be used within HotelListingDataProvider"
+    )
+  }
+
+  return useStore(store, selector)
+}