Merged in feat/SW-977-update-bookingwidget-with-hotel-name (pull request #1071)

Feat/SW-977 update bookingwidget with hotel name

Approved-by: Fredrik Thorsson

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -13,6 +13,7 @@ import { useIntl } from "react-intl"
 
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import isValidJson from "@/utils/isValidJson"
 
 import Input from "../Input"
 import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
@@ -28,16 +29,20 @@ 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 && isValidJson(locationString)
+      ? JSON.parse(decodeURIComponent(locationString))
+      : null
   const [state, dispatch] = useReducer(
     reducer,
     { defaultLocations: locations },
     init
   )
-
   const handleMatchLocations = useCallback(
     function (searchValue: string) {
       return locations.filter((location) => {
@@ -121,6 +126,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       typeof window !== "undefined"
         ? sessionStorage.getItem(sessionStorageKey)
         : undefined
+
     const searchHistory =
       typeof window !== "undefined"
         ? localStorage.getItem(localStorageKey)
@@ -128,8 +134,14 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
     if (searchData || searchHistory) {
       dispatch({
         payload: {
-          searchData: searchData ? JSON.parse(searchData) : undefined,
-          searchHistory: searchHistory ? JSON.parse(searchHistory) : null,
+          searchData:
+            isValidJson(searchData) && searchData
+              ? JSON.parse(searchData)
+              : undefined,
+          searchHistory:
+            isValidJson(searchHistory) && searchHistory
+              ? JSON.parse(searchHistory)
+              : null,
         },
         type: ActionType.SET_STORAGE_DATA,
       })
@@ -157,6 +169,21 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
     }
   }, [stayType, stayValue, unregister, setValue])
 
+  useEffect(() => {
+    sessionStorage.setItem(sessionStorageKey, locationString)
+  }, [locationString])
+
+  function getLocationLabel(): string {
+    if (location?.type === "hotels") {
+      return location?.relationships?.city?.name || ""
+    }
+    if (state.searchData?.type === "hotels") {
+      return state.searchData?.relationships?.city?.name || ""
+    }
+
+    return intl.formatMessage({ id: "Where to" })
+  }
+
   return (
     <Downshift
       initialSelectedItem={state.searchData}
@@ -187,11 +214,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 })}>