From 0ac09f37f61f1d29e2f13224d41799b33d08c51f Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Tue, 7 Jan 2025 10:32:32 +0000
Subject: [PATCH] Merged in fix/sw-1177-search-history (pull request #1124)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-1177): fix localization problems in search history

* fix(SW-1177): fix localization problems in search history

When saving search history the whole location objects where stored and
also used later. This made the list display in different languages if
the user previously had search for something in another language.
Another issue where that the list where also deduped based on name of
the search item, which meant that there could be multiple history
items for the same entity and the same ID, e.g. `Gothenburg` and
`Göteborg`.


Approved-by: Bianca Widstam
---
 .../FormContent/Search/index.tsx              | 60 ++++++++++++++-----
 types/components/search.ts                    |  5 ++
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 061646635..c1f681cc8 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -26,8 +26,8 @@ import {
   ActionType,
   type SetStorageData,
 } from "@/types/components/form/bookingwidget"
-import type { SearchProps } from "@/types/components/search"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
+import type { SearchHistoryItem, SearchProps } from "@/types/components/search"
+import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
 
 const name = "search"
 
@@ -99,23 +99,30 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       sessionStorage.setItem(sessionStorageKey, stringified)
       setValue(name, selectedItem.name)
 
-      const searchHistoryMap = new Map()
-      searchHistoryMap.set(selectedItem.name, selectedItem)
-      if (state.searchHistory) {
-        state.searchHistory.forEach((location) => {
-          searchHistoryMap.set(location.name, location)
-        })
+      const newHistoryItem: SearchHistoryItem = {
+        type: selectedItem.type,
+        id: selectedItem.id,
       }
+      const oldSearchHistoryWithoutTheNew =
+        state.searchHistory?.filter(
+          (h) => h.type !== newHistoryItem.type || h.id !== newHistoryItem.id
+        ) ?? []
+      const oldHistoryItems = oldSearchHistoryWithoutTheNew.map((h) => ({
+        id: h.id,
+        type: h.type,
+      }))
 
-      const searchHistory: Location[] = []
-      searchHistoryMap.forEach((location) => {
-        searchHistory.push(location)
-      })
+      const searchHistory = [newHistoryItem, ...oldHistoryItems]
       localStorage.setItem(localStorageKey, JSON.stringify(searchHistory))
+
+      const enhancedSearchHistory: Locations = [
+        ...getEnhancedSearchHistory([newHistoryItem], locations),
+        ...oldSearchHistoryWithoutTheNew,
+      ]
       dispatch({
         payload: {
           location: selectedItem,
-          searchHistory,
+          searchHistory: enhancedSearchHistory,
         },
         type: ActionType.SELECT_ITEM,
       })
@@ -132,13 +139,16 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       payload.searchData = JSON.parse(searchData)
     }
     if (searchHistory) {
-      payload.searchHistory = JSON.parse(searchHistory)
+      payload.searchHistory = getEnhancedSearchHistory(
+        JSON.parse(searchHistory),
+        locations
+      )
     }
     dispatch({
       payload,
       type: ActionType.SET_STORAGE_DATA,
     })
-  }, [dispatch])
+  }, [dispatch, locations])
 
   const stayType = state.searchData?.type === "cities" ? "city" : "hotel"
   const stayValue =
@@ -261,9 +271,27 @@ export function SearchSkeleton() {
           <span>{intl.formatMessage({ id: "Where to" })}</span>
         </Caption>
       </div>
-      <div className={styles.input}>
+      <div>
         <SkeletonShimmer width={"100%"} />
       </div>
     </div>
   )
 }
+
+/**
+ * Takes a stored search history and returns the same history, but with the same
+ * data and the same format as the complete location objects
+ */
+function getEnhancedSearchHistory(
+  searchHistory: SearchHistoryItem[],
+  locations: Locations
+): Locations {
+  return searchHistory
+    .map((historyItem) =>
+      locations.find(
+        (location) =>
+          location.type === historyItem.type && location.id === historyItem.id
+      )
+    )
+    .filter((r) => !!r) as Locations
+}
diff --git a/types/components/search.ts b/types/components/search.ts
index 4f283a615..0c4513711 100644
--- a/types/components/search.ts
+++ b/types/components/search.ts
@@ -9,6 +9,11 @@ export interface SearchProps {
   handlePressEnter: () => void
 }
 
+export type SearchHistoryItem = {
+  type: "cities" | "hotels"
+  id: string
+}
+
 type HighlightedIndex = number | null
 
 export interface SearchListProps {