feat: SW-683 SW-684 Prefill location & date in BW via query params

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

@@ -3,7 +3,13 @@ import { serverClient } from "@/lib/trpc/server"
 
 import BookingWidget, { preload } from "@/components/BookingWidget"
 
-export default async function BookingWidgetPage() {
+import { BookingWidgetSearchParams } from "@/types/components/bookingWidget"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function BookingWidgetPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, BookingWidgetSearchParams>) {
   if (env.HIDE_FOR_NEXT_RELEASE) {
     return null
   }
@@ -18,5 +24,5 @@ export default async function BookingWidgetPage() {
     return null
   }
 
-  return <BookingWidget />
+  return <BookingWidget searchParams={searchParams} />
 }

components/BookingWidget/Client.tsx

@@ -10,6 +10,7 @@ import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
 import { CloseLargeIcon } from "@/components/Icons"
 import { debounce } from "@/utils/debounce"
 
+import getHotelReservationQueryParams from "../HotelReservation/SelectRate/RoomSelection/utils"
 import MobileToggleButton from "./MobileToggleButton"
 
 import styles from "./bookingWidget.module.css"
@@ -23,6 +24,7 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 export default function BookingWidgetClient({
   locations,
   type,
+  searchParams,
 }: BookingWidgetClientProps) {
   const [isOpen, setIsOpen] = useState(false)
 
@@ -33,17 +35,59 @@ export default function BookingWidgetClient({
   const initialSelectedLocation: Location | undefined = sessionStorageSearchData
     ? JSON.parse(sessionStorageSearchData)
     : undefined
+
+  const bookingWidgetSearchParams = searchParams
+    ? new URLSearchParams(searchParams)
+    : undefined
+  const bookingWidgetSearchData = bookingWidgetSearchParams
+    ? getHotelReservationQueryParams(bookingWidgetSearchParams)
+    : undefined
+
+  const getLocationObj = (destination: string): Location | undefined => {
+    if (destination) {
+      const location: Location | undefined = locations.find((location) => {
+        return (
+          location.name.toLowerCase() === destination.toLowerCase() ||
+          //@ts-ignore (due to operaId not property error)
+          (location.operaId && location.operaId == destination)
+        )
+      })
+      return location
+    }
+    return undefined
+  }
+
+  const isDateParamValid =
+    bookingWidgetSearchData?.fromDate &&
+    bookingWidgetSearchData?.toDate &&
+    dt(bookingWidgetSearchData?.toDate.toString()).isAfter(
+      dt(bookingWidgetSearchData?.fromDate.toString())
+    )
+
+  const selectedLocation = bookingWidgetSearchData
+    ? getLocationObj(
+        (bookingWidgetSearchData.city ??
+          bookingWidgetSearchData.hotel) as string
+      )
+    : undefined
+
   const methods = useForm<BookingWidgetSchema>({
     defaultValues: {
-      search: initialSelectedLocation?.name ?? "",
+      search: selectedLocation?.name ?? initialSelectedLocation?.name ?? "",
-      location: sessionStorageSearchData
+      location: selectedLocation
+        ? JSON.stringify(selectedLocation)
+        : sessionStorageSearchData
           ? encodeURIComponent(sessionStorageSearchData)
           : undefined,
       date: {
         // UTC is required to handle requests from far away timezones https://scandichotels.atlassian.net/browse/SWAP-6375 & PET-507
         // This is specifically to handle timezones falling in different dates.
-        fromDate: dt().utc().format("YYYY-MM-DD"),
+        fromDate: isDateParamValid
-        toDate: dt().utc().add(1, "day").format("YYYY-MM-DD"),
+          ? bookingWidgetSearchData?.fromDate.toString()
+          : dt().utc().format("YYYY-MM-DD"),
+        toDate: isDateParamValid
+          ? bookingWidgetSearchData?.toDate?.toString()
+          : dt().utc().add(1, "day").format("YYYY-MM-DD"),
       },
       bookingCode: "",
       redemption: false,

components/BookingWidget/bookingWidget.module.css

@@ -50,3 +50,9 @@
     display: none;
   }
 }
+
+@media screen and (min-width: 1367px) {
+  .container {
+    z-index: 9;
+  }
+}

components/BookingWidget/index.tsx

@@ -8,12 +8,21 @@ export function preload() {
   void getLocations()
 }
 
-export default async function BookingWidget({ type }: BookingWidgetProps) {
+export default async function BookingWidget({
+  type,
+  searchParams,
+}: BookingWidgetProps) {
   const locations = await getLocations()
 
   if (!locations || "error" in locations) {
     return null
   }
 
-  return <BookingWidgetClient locations={locations.data} type={type} />
+  return (
+    <BookingWidgetClient
+      locations={locations.data}
+      type={type}
+      searchParams={searchParams}
+    />
+  )
 }

components/Forms/BookingWidget/index.tsx

@@ -33,7 +33,10 @@ export default function Form({ locations, type }: BookingWidgetFormProps) {
 
     const bookingFlowPage =
       locationData.type == "cities" ? selectHotel[lang] : selectRate[lang]
-    const bookingWidgetParams = new URLSearchParams(data.date)
+    const bookingWidgetParams = new URLSearchParams({
+      fromDate: data.date.from,
+      toDate: data.date.to,
+    })
 
     if (locationData.type == "cities")
       bookingWidgetParams.set("city", locationData.name)

types/components/bookingWidget/index.ts

@@ -8,17 +8,27 @@ import type { Locations } from "@/types/trpc/routers/hotel/locations"
 
 export type BookingWidgetSchema = z.output<typeof bookingWidgetSchema>
 
+export type BookingWidgetSearchParams = {
+  city?: string
+  hotel?: string
+  fromDate?: string
+  toDate?: string
+  room?: string
+}
+
 export type BookingWidgetType = VariantProps<
   typeof bookingWidgetVariants
 >["type"]
 
 export interface BookingWidgetProps {
   type?: BookingWidgetType
+  searchParams?: BookingWidgetSearchParams
 }
 
 export interface BookingWidgetClientProps {
   locations: Locations
   type?: BookingWidgetType
+  searchParams?: BookingWidgetSearchParams
 }
 
 export interface BookingWidgetToggleButtonProps {