feat(SW-977): Scenario 1

components/BookingWidget/Client.tsx

@@ -79,8 +79,8 @@ export default function BookingWidgetClient({
 
   const selectedLocation = bookingWidgetSearchData
     ? getLocationObj(
-        (bookingWidgetSearchData.city ??
+        (bookingWidgetSearchData.hotel ??
-          bookingWidgetSearchData.hotel) as string
+          bookingWidgetSearchData.city) as string
       )
     : undefined
 

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>
+              <span>{getLocationLabel()}</span>
-                {state.searchData?.type === "hotels"
-                  ? state.searchData?.relationships?.city?.name
-                  : intl.formatMessage({ id: "Where to" })}
-              </span>
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>