feat(SW-977): Add more controls if Json is valid

components/BookingWidget/Client.tsx

@@ -13,6 +13,7 @@ import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
 import { CloseLargeIcon } from "@/components/Icons"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
+import isValidJson from "@/utils/isValidJson"
 import { getFormattedUrlQueryParams } from "@/utils/url"
 
 import MobileToggleButton, {
@@ -153,8 +154,9 @@ export default function BookingWidgetClient({
       typeof window !== "undefined"
         ? sessionStorage.getItem("searchData")
         : undefined
+
     const initialSelectedLocation: Location | undefined =
-      sessionStorageSearchData
+      sessionStorageSearchData && isValidJson(sessionStorageSearchData)
         ? JSON.parse(sessionStorageSearchData)
         : undefined
 

components/BookingWidget/MobileToggleButton/index.tsx

@@ -1,10 +1,8 @@
 "use client"
-import { useEffect, useMemo, useRef, useState } from "react"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
-import { StickyElementNameEnum } from "@/stores/sticky-position"
 
 import { EditIcon, SearchIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
@@ -12,7 +10,7 @@ import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import useLang from "@/hooks/useLang"
-import useStickyPosition from "@/hooks/useStickyPosition"
+import isValidJson from "@/utils/isValidJson"
 
 import styles from "./button.module.css"
 
@@ -31,9 +29,10 @@ export default function MobileToggleButton({
   const location = useWatch({ name: "location" })
   const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" })
 
-  const parsedLocation: Location | null = location
-    ? JSON.parse(decodeURIComponent(location))
-    : null
+  const parsedLocation: Location | null =
+    location && isValidJson(location)
+      ? JSON.parse(decodeURIComponent(location))
+      : null
 
   const nights = dt(d.toDate).diff(dt(d.fromDate), "days")
 

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

@@ -34,9 +34,10 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
   const intl = useIntl()
   const value = useWatch({ name })
   const locationString = getValues("location")
-  const location = locationString
-    ? JSON.parse(decodeURIComponent(locationString))
-    : null
+  const location =
+    locationString && isValidJson(locationString)
+      ? JSON.parse(decodeURIComponent(locationString))
+      : null
   const [state, dispatch] = useReducer(
     reducer,
     { defaultLocations: locations },

components/Forms/BookingWidget/schema.ts

@@ -45,7 +45,10 @@ export const bookingWidgetSchema = z
     }),
     location: z.string().refine(
       (value) => {
-        if (value) {
+        if (!value) {
+          return false
+        }
+        try {
           const parsedValue: Location = JSON.parse(decodeURIComponent(value))
           switch (parsedValue?.type) {
             case "cities":
@@ -54,6 +57,8 @@ export const bookingWidgetSchema = z
             default:
               return false
           }
+        } catch (error) {
+          return false
         }
       },
       { message: "Required" }