Merged in feat/sw-2861-move-autocomplete-router-to-trpc-package (pull request #2417)

feat(SW-2861): Move autocomplete router to trpc package

* Apply lint rules

* Use direct imports from trpc package

* Add lint-staged config to trpc

* Move lang enum to common

* Restructure trpc package folder structure

* WIP first step

* update internal imports in trpc

* Fix most errors in scandic-web

Just 100 left...

* Move Props type out of trpc

* Fix CategorizedFilters types

* Move more schemas in hotel router

* Fix deps

* fix getNonContentstackUrls

* Fix import error

* Fix entry error handling

* Fix generateMetadata metrics

* Fix alertType enum

* Fix duplicated types

* lint:fix

* Merge branch 'master' into feat/sw-2863-move-contentstack-router-to-trpc-package

* Fix broken imports

* Move booking router to trpc package

* Move partners router to trpc package

* Move autocomplete router to trpc package

* Merge branch 'master' into feat/sw-2861-move-autocomplete-router-to-trpc-package


Approved-by: Linus Flood

packages/trpc/lib/routers/autocomplete/util/filterAndCategorizeAutoComplete.ts

@@ -0,0 +1,68 @@
+import { filterAutoCompleteLocations } from "./filterAutoCompleteLocations"
+
+import type { AutoCompleteLocation } from "../schema"
+
+export type DestinationsAutoCompleteOutput = {
+  hits: {
+    hotels: AutoCompleteLocation[]
+    cities: AutoCompleteLocation[]
+    countries: AutoCompleteLocation[]
+  }
+  currentSelection: {
+    hotel: (AutoCompleteLocation & { type: "hotels" }) | null
+    city: (AutoCompleteLocation & { type: "cities" }) | null
+  }
+}
+
+export function filterAndCategorizeAutoComplete({
+  locations,
+  query,
+  includeTypes,
+}: {
+  locations: AutoCompleteLocation[]
+  query: string
+  includeTypes: ("cities" | "hotels" | "countries")[]
+}) {
+  const rankedLocations = filterAutoCompleteLocations(locations, query)
+
+  const sortedCities = rankedLocations.filter(
+    (loc) => shouldIncludeType(includeTypes, loc) && isCity(loc)
+  )
+  const sortedHotels = rankedLocations.filter(
+    (loc) => shouldIncludeType(includeTypes, loc) && isHotel(loc)
+  )
+  const sortedCountries = rankedLocations.filter(
+    (loc) => shouldIncludeType(includeTypes, loc) && isCountry(loc)
+  )
+
+  return {
+    cities: sortedCities,
+    hotels: sortedHotels,
+    countries: sortedCountries,
+  }
+}
+
+function shouldIncludeType(
+  includedTypes: ("cities" | "hotels" | "countries")[],
+  location: AutoCompleteLocation
+) {
+  return includedTypes.includes(location.type)
+}
+
+function isHotel(
+  location: AutoCompleteLocation | null | undefined
+): location is AutoCompleteLocation & { type: "hotels" } {
+  return !!location && location.type === "hotels"
+}
+
+function isCountry(
+  location: AutoCompleteLocation | null | undefined
+): location is AutoCompleteLocation & { type: "countries" } {
+  return !!location && location.type === "countries"
+}
+
+function isCity(
+  location: AutoCompleteLocation | null | undefined
+): location is AutoCompleteLocation & { type: "cities" } {
+  return !!location && location.type === "cities"
+}

packages/trpc/lib/routers/autocomplete/util/filterAutoCompleteLocations.test.ts

@@ -0,0 +1,226 @@
+import { describe, expect, it } from "vitest"
+
+import { filterAutoCompleteLocations } from "./filterAutoCompleteLocations"
+
+import type { DeepPartial } from "../../../types/deepPartial"
+import type { AutoCompleteLocation } from "../schema"
+
+describe("rankAutoCompleteLocations", () => {
+  it("should give no hits when the query does not match", () => {
+    const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "NonMatchingQuery"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(0)
+  })
+
+  it("should include items when the query matches parts of name", () => {
+    const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+  })
+
+  it("should allow multiple search terms", () => {
+    const locations = [scandicAlborgOst] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Aalborg Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+  })
+
+  it("should rank full word higher than part of word", () => {
+    const locations = [
+      scandicSyvSostre,
+      scandicAlborgOst,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(2)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+    expect(ranked.at(1)!.name).toEqual("Scandic Syv Søstre")
+  })
+
+  it("should ignore items without match", () => {
+    const locations = [
+      scandicSyvSostre,
+      scandicAlborgOst,
+      berlinLodge,
+      scandicBrennemoen,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Øst"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(3)
+    expect(ranked.at(0)!.name).toEqual("Scandic Aalborg Øst")
+    expect(ranked.at(1)!.name).toEqual("Scandic Syv Søstre")
+    expect(ranked.at(2)!.name).toEqual("Scandic Brennemoen")
+  })
+
+  it("should ignore 'scandic' from name and destination when searching", () => {
+    const locations = [scandicAlborgOst, scandicBrennemoen].map((x) => ({
+      ...x,
+      searchTokens: [],
+    })) as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "scandic"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(0)
+  })
+
+  it("should get hits for destination", () => {
+    const locations = [
+      scandicAlborgOst,
+      scandicBrennemoen,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "Mysen"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toBe("Scandic Brennemoen")
+  })
+
+  it("should get hits for searchTokens", () => {
+    const locations = [
+      scandicAlborgOst,
+      scandicBrennemoen,
+    ] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "tusenfryd"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toBe("Scandic Brennemoen")
+  })
+
+  it("should match when using the wrong aumlaut ö -> ø", () => {
+    const locations = [scandicBodo] as DeepPartial<AutoCompleteLocation>[]
+
+    const query = "bodö"
+    const ranked = filterAutoCompleteLocations(
+      locations as AutoCompleteLocation[],
+      query
+    )
+
+    expect(ranked.length).toBe(1)
+    expect(ranked.at(0)!.name).toBe("Scandic Bodø")
+  })
+})
+
+const scandicAlborgOst: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Aalborg Øst",
+  destination: "Aalborg",
+  searchTokens: [
+    "aalborg",
+    "aalborg øst",
+    "scandic aalborg øst",
+    "aalborg ost",
+    "scandic aalborg ost",
+  ],
+}
+
+const scandicBrennemoen: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Brennemoen",
+  destination: "Mysen",
+  searchTokens: [
+    "mysen",
+    "askim",
+    "indre østfold",
+    "drøbak",
+    "slitu",
+    "morenen",
+    "østfoldbadet",
+    "tusenfryd",
+    "brennemoen",
+    "scandic brennemoen",
+    "indre ostfold",
+    "drobak",
+    "ostfoldbadet",
+  ],
+}
+
+const scandicSyvSostre: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Syv Søstre",
+  destination: "Sandnessjoen",
+  searchTokens: [
+    "syv sostre",
+    "sandnessjoen",
+    "sandnessjøen",
+    "syv søstre",
+    "scandic syv søstre",
+    "scandic syv sostre",
+  ],
+}
+
+const berlinLodge: DeepPartial<AutoCompleteLocation> = {
+  name: "Berlin Lodge",
+  searchTokens: [],
+}
+
+const scandicBodo: DeepPartial<AutoCompleteLocation> = {
+  name: "Scandic Bodø",
+  destination: "Bodo",
+  searchTokens: [
+    "bodo",
+    "kjerringoy",
+    "bodo i vinden",
+    "visit bodo",
+    "badin",
+    "scandic bodo",
+    "bodø",
+    "stormen",
+    "midnattsol",
+    "hurtigruten",
+    "saltstraumen",
+    "nord universitet",
+    "kjerringøy",
+    "nordlys",
+    "tuvsjyen",
+    "stella polaris",
+    "topptur",
+    "svartisen",
+    "polarsirkelen",
+    "aurora borealis",
+    "bodø i vinden",
+    "visit bodø",
+    "bådin",
+    "norsk luftfartsmuseum",
+    "rib",
+    "scandic bodø",
+  ],
+}

packages/trpc/lib/routers/autocomplete/util/filterAutoCompleteLocations.ts

@@ -0,0 +1,66 @@
+import Fuse from "fuse.js"
+
+import type { AutoCompleteLocation } from "../schema"
+
+type SearchableAutoCompleteLocation = AutoCompleteLocation & {
+  nameTokens: string[]
+  destinationTokens: string[]
+}
+type SearchableKey = keyof SearchableAutoCompleteLocation
+
+const fuseConfig = new Fuse([] as SearchableAutoCompleteLocation[], {
+  minMatchCharLength: 2,
+  isCaseSensitive: false,
+  ignoreDiacritics: true,
+  includeMatches: true,
+  includeScore: true,
+  threshold: 0.2,
+  keys: [
+    {
+      name: "nameTokens" satisfies SearchableKey,
+      weight: 3,
+    },
+    {
+      name: "destinationTokens" satisfies SearchableKey,
+      weight: 2,
+    },
+    {
+      name: "searchTokens" satisfies SearchableKey,
+      weight: 1,
+    },
+  ],
+})
+
+export function filterAutoCompleteLocations<T extends AutoCompleteLocation>(
+  locations: T[],
+  query: string
+) {
+  const searchable = locations.map((x) => ({
+    ...x,
+    nameTokens: extractTokens(x.name),
+    destinationTokens: extractTokens(x.destination),
+  }))
+  fuseConfig.setCollection(searchable)
+
+  const searchResults = fuseConfig.search(query, { limit: 50 })
+
+  return searchResults.map(
+    (x) =>
+      ({
+        id: x.item.id,
+        name: x.item.name,
+        cityIdentifier: x.item.cityIdentifier,
+        destination: x.item.destination,
+        searchTokens: x.item.searchTokens,
+        type: x.item.type,
+        url: x.item.url,
+      }) satisfies AutoCompleteLocation
+  )
+}
+
+function extractTokens(value: string): string[] {
+  const cleaned = value?.toLowerCase().replaceAll("scandic", "").trim() ?? ""
+  const output = [...new Set([cleaned, ...cleaned.split(" ")])]
+
+  return output
+}

packages/trpc/lib/routers/autocomplete/util/getSearchTokens.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest"
+
+import { getSearchTokens } from "./getSearchTokens"
+
+import type { Location } from "@scandic-hotels/trpc/types/locations"
+
+import type { DeepPartial } from "../../../types/deepPartial"
+
+describe("getSearchTokens", () => {
+  it("should return lowercased tokens for a hotel location", () => {
+    const location: DeepPartial<Location> = {
+      keyWords: ["Beach", "Luxury"],
+      name: "Grand Hotel",
+      type: "hotels",
+      relationships: { city: { name: "Stockholm" } },
+    }
+
+    const result = getSearchTokens(location as Location)
+    expect(result).toEqual(["beach", "luxury", "grand hotel", "stockholm"])
+  })
+
+  it("should generate additional tokens for diacritics replacement on a non-hotel location", () => {
+    const location: DeepPartial<Location> = {
+      keyWords: ["Ångström", "Café"],
+      name: "München",
+      country: "Frånce",
+      type: "cities",
+    }
+
+    const result = getSearchTokens(location as Location)
+    expect(result.toSorted()).toEqual(
+      [
+        "ångström",
+        "café",
+        "münchen",
+        "frånce",
+        "angstrom",
+        "cafe",
+        "munchen",
+        "france",
+      ].toSorted()
+    )
+  })
+
+  it("should filter out empty or falsey tokens", () => {
+    const location: DeepPartial<Location> = {
+      keyWords: ["", "Valid"],
+      name: "",
+      type: "hotels",
+      relationships: { city: { name: "" } },
+    }
+
+    const result = getSearchTokens(location as Location)
+    expect(result).toEqual(["valid"])
+  })
+})

packages/trpc/lib/routers/autocomplete/util/getSearchTokens.ts

@@ -0,0 +1,22 @@
+import { normalizeAumlauts } from "./normalizeAumlauts"
+
+import type { Location } from "../../../types/locations"
+
+export function getSearchTokens(location: Location) {
+  const tokens = [
+    ...(location.keyWords?.map((x) => x.toLocaleLowerCase()) ?? []),
+    location.name,
+    location.type === "hotels"
+      ? location.relationships.city.name
+      : location.country,
+  ]
+    .filter(hasValue)
+    .map((x) => x.toLocaleLowerCase())
+
+  const normalizedTokens = normalizeAumlauts(tokens)
+  return normalizedTokens
+}
+
+function hasValue(value: string | null | undefined): value is string {
+  return !!value && value.length > 0
+}

packages/trpc/lib/routers/autocomplete/util/mapLocationToAutoCompleteLocation.ts

@@ -0,0 +1,24 @@
+import { getSearchTokens } from "./getSearchTokens"
+
+import type { Location } from "../../../types/locations"
+import type { AutoCompleteLocation } from "../schema"
+
+export function mapLocationToAutoCompleteLocation(
+  location: (Location & { url?: string }) | null | undefined
+): AutoCompleteLocation | null {
+  if (!location) return null
+
+  return {
+    id: location.id,
+    name: location.name,
+    type: location.type,
+    url: location.url,
+    searchTokens: getSearchTokens(location),
+    destination:
+      location.type === "hotels"
+        ? location.relationships.city.name
+        : location.country,
+    cityIdentifier:
+      location.type === "cities" ? location.cityIdentifier : undefined,
+  }
+}

packages/trpc/lib/routers/autocomplete/util/normalizeAumlauts.ts

@@ -0,0 +1,22 @@
+export function normalizeAumlauts(terms: string[]): string[] {
+  const additionalTerms: string[] = []
+
+  terms.forEach((token) => {
+    if (!token) return
+
+    const replaced = token
+      .replace(/å/g, "a")
+      .replace(/ä/g, "a")
+      .replace(/ö/g, "o")
+      .replace(/ø/g, "o")
+      .replace(/æ/g, "a")
+      .replace(/é/g, "e")
+      .replace(/ü/g, "u")
+
+    if (replaced !== token) {
+      additionalTerms.push(replaced)
+    }
+  })
+
+  return [...new Set([...additionalTerms, ...terms])]
+}