From 24ef1e98e0b4d24b924ced0bd5a7aa8b17e81ecf Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Tue, 17 Dec 2024 15:29:20 +0100 Subject: [PATCH] feat(SW-977): Add more controls if Json is valid --- .../@bookingwidget/[contentType]/[uid]/page.tsx | 15 ++++++++------- components/BookingWidget/Client.tsx | 4 +++- .../BookingWidget/MobileToggleButton/index.tsx | 11 +++++------ .../BookingWidget/FormContent/Search/index.tsx | 7 ++++--- components/Forms/BookingWidget/schema.ts | 7 ++++++- types/components/bookingWidget/index.ts | 12 +++++------- 6 files changed, 31 insertions(+), 25 deletions(-) diff --git a/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx b/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx index 9e88b95f2..fc57012f6 100644 --- a/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx +++ b/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) { + searchParams, +}: PageArgs) { 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 + return } - - return + return } diff --git a/components/BookingWidget/Client.tsx b/components/BookingWidget/Client.tsx index 40eb5ccd7..017d9c76a 100644 --- a/components/BookingWidget/Client.tsx +++ b/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 diff --git a/components/BookingWidget/MobileToggleButton/index.tsx b/components/BookingWidget/MobileToggleButton/index.tsx index 99e691359..ce4513d58 100644 --- a/components/BookingWidget/MobileToggleButton/index.tsx +++ b/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") diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx index 2fc7f0bb7..bc6c10152 100644 --- a/components/Forms/BookingWidget/FormContent/Search/index.tsx +++ b/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 }, diff --git a/components/Forms/BookingWidget/schema.ts b/components/Forms/BookingWidget/schema.ts index a5e62a989..c8beb98d5 100644 --- a/components/Forms/BookingWidget/schema.ts +++ b/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" } diff --git a/types/components/bookingWidget/index.ts b/types/components/bookingWidget/index.ts index c668617da..7e9c79d16 100644 --- a/types/components/bookingWidget/index.ts +++ b/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