From 4f92d1da0878b367676bf7922d11ff3513b2eaa5 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Wed, 11 Dec 2024 13:39:15 +0100
Subject: [PATCH] feat(SW-977): Scenario 1

---
 components/BookingWidget/Client.tsx           |  4 ++--
 .../FormContent/Search/index.tsx              | 23 +++++++++++++------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx
index 3c17caf8e..40eb5ccd7 100644
--- a/components/BookingWidget/Client.tsx
+++ b/components/BookingWidget/Client.tsx
@@ -79,8 +79,8 @@ export default function BookingWidgetClient({
 
   const selectedLocation = bookingWidgetSearchData
     ? getLocationObj(
-        (bookingWidgetSearchData.city ??
-          bookingWidgetSearchData.hotel) as string
+        (bookingWidgetSearchData.hotel ??
+          bookingWidgetSearchData.city) as string
       )
     : undefined
 
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 28b53bb1b..607fb709b 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -28,16 +28,19 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 const name = "search"
 
 export default function Search({ locations, handlePressEnter }: SearchProps) {
-  const { register, setValue, unregister } =
+  const { register, setValue, unregister, getValues } =
     useFormContext<BookingWidgetSchema>()
   const intl = useIntl()
   const value = useWatch({ name })
+  const locationString = getValues("location")
+  const location = locationString
+    ? JSON.parse(decodeURIComponent(locationString))
+    : null
   const [state, dispatch] = useReducer(
     reducer,
     { defaultLocations: locations },
     init
   )
-
   const handleMatchLocations = useCallback(
     function (searchValue: string) {
       return locations.filter((location) => {
@@ -157,6 +160,16 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
     }
   }, [stayType, stayValue, unregister, setValue])
 
+  function getLocationLabel(): string {
+    if (state.searchData?.type === "hotels") {
+      return state.searchData?.relationships?.city?.name || ""
+    }
+    if (location?.type === "hotels") {
+      return location?.relationships?.city?.name || ""
+    }
+    return intl.formatMessage({ id: "Where to" })
+  }
+
   return (
     <Downshift
       initialSelectedItem={state.searchData}
@@ -187,11 +200,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
               color={isOpen ? "uiTextActive" : "red"}
               asChild
             >
-              <span>
-                {state.searchData?.type === "hotels"
-                  ? state.searchData?.relationships?.city?.name
-                  : intl.formatMessage({ id: "Where to" })}
-              </span>
+              <span>{getLocationLabel()}</span>
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>