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

app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx

@@ -8,11 +8,14 @@ import type { ContentTypeParams, PageArgs } from "@/types/params"
 
 export default async function BookingWidgetPage({
   params,
-}: PageArgs<ContentTypeParams>) {
+  searchParams,
+}: PageArgs<ContentTypeParams, URLSearchParams>) {
   if (!env.ENABLE_BOOKING_WIDGET_HOTELRESERVATION_PATH) return null
 
   preload()
 
+  const urlParams = new URLSearchParams()
+
   if (params.contentType === "hotel-page") {
     const hotelPageData = await getHotelPage()
 
@@ -20,12 +23,10 @@ export default async function BookingWidgetPage({
       hotelId: hotelPageData?.hotel_page_id || "",
       language: getLang(),
     })
-    const params = new URLSearchParams()
-    params.set("hotel", hotelData?.data?.id || "")
-    params.set("city", hotelData?.data?.attributes?.cityName || "")
+    urlParams.set("hotel", hotelData?.data?.id || "")
+    urlParams.set("city", hotelData?.data?.attributes?.cityName || "")
 
-    return <BookingWidget searchParams={params} />
+    return <BookingWidget searchParams={urlParams} />
   }
-
-  return <BookingWidget />
+  return <BookingWidget searchParams={searchParams} />
 }

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" }

types/components/bookingWidget/index.ts

@@ -1,12 +1,10 @@
-import { VariantProps } from "class-variance-authority"
-import { z } from "zod"
-
-import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
-import { bookingWidgetVariants } from "@/components/Forms/BookingWidget/variants"
-
-import { GuestsRoom } from "./guestsRoomsPicker"
+import type { VariantProps } from "class-variance-authority"
+import type { z } from "zod"
 
 import type { Locations } from "@/types/trpc/routers/hotel/locations"
+import type { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
+import type { bookingWidgetVariants } from "@/components/Forms/BookingWidget/variants"
+import type { GuestsRoom } from "./guestsRoomsPicker"
 
 export type BookingWidgetSchema = z.output<typeof bookingWidgetSchema>