feat(SW-66, SW-348): search functionality and ui

components/Forms/BookingWidget/index.tsx

@@ -14,19 +14,29 @@ import { bookingWidgetSchema } from "./schema"
 
 import styles from "./form.module.css"
 
-import { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
+import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidget"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 const formId = "booking-widget"
 
-export default function Form() {
+export default function Form({ locations }: BookingWidgetFormProps) {
   const intl = useIntl()
   const router = useRouter()
+
+  const sessionStorageSearchData =
+    typeof window !== "undefined"
+      ? sessionStorage.getItem("searchData")
+      : undefined
+  const initialSelectedLocation: Location | undefined = sessionStorageSearchData
+    ? JSON.parse(sessionStorageSearchData)
+    : undefined
   const methods = useForm<BookingWidgetSchema>({
     defaultValues: {
-      search: {
-        stayType: "",
-        stayValue: "",
-      },
+      search: initialSelectedLocation?.name ?? "",
+      location: sessionStorageSearchData
+        ? encodeURIComponent(sessionStorageSearchData)
+        : undefined,
       nights: {
         // 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.
@@ -43,12 +53,14 @@ export default function Form() {
         },
       ],
     },
+    shouldFocusError: false,
     mode: "all",
     resolver: zodResolver(bookingWidgetSchema),
     reValidateMode: "onChange",
   })
 
   function onSubmit(data: BookingWidgetSchema) {
+    data.location = JSON.parse(decodeURIComponent(data.location))
     console.log(data)
     // TODO: Parse data and route accordignly to Select hotel or select room-rate page
     console.log("to be routing")
@@ -63,7 +75,8 @@ export default function Form() {
         id={formId}
       >
         <FormProvider {...methods}>
-          <FormContent />
+          <input {...methods.register("location")} type="hidden" />
+          <FormContent locations={locations} />
         </FormProvider>
       </form>
       <Button