feat: add mobile ui to calendar

components/Forms/BookingWidget/index.tsx

@@ -1,22 +1,17 @@
 "use client"
-import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter } from "next/navigation"
-import { FormProvider, useForm } from "react-hook-form"
+import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { dt } from "@/lib/dt"
-
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import FormContent from "./FormContent"
-import { bookingWidgetSchema } from "./schema"
 
 import styles from "./form.module.css"
 
 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"
 
@@ -24,40 +19,8 @@ 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: initialSelectedLocation?.name ?? "",
-      location: 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.
-        from: dt().utc().format("YYYY-MM-DD"),
-        to: dt().utc().add(1, "day").format("YYYY-MM-DD"),
-      },
-      bookingCode: "",
-      redemption: false,
-      voucher: false,
-      rooms: [
-        {
-          adults: 1,
-          childs: [],
-        },
-      ],
-    },
-    shouldFocusError: false,
-    mode: "all",
-    resolver: zodResolver(bookingWidgetSchema),
-    reValidateMode: "onChange",
-  })
+  const { formState, handleSubmit, register } =
+    useFormContext<BookingWidgetSchema>()
 
   function onSubmit(data: BookingWidgetSchema) {
     data.location = JSON.parse(decodeURIComponent(data.location))
@@ -70,25 +33,24 @@ export default function Form({ locations }: BookingWidgetFormProps) {
   return (
     <section className={styles.section}>
       <form
-        onSubmit={methods.handleSubmit(onSubmit)}
+        onSubmit={handleSubmit(onSubmit)}
         className={styles.form}
         id={formId}
       >
-        <FormProvider {...methods}>
-          <input {...methods.register("location")} type="hidden" />
-          <FormContent locations={locations} />
-        </FormProvider>
+        <input {...register("location")} type="hidden" />
+        <FormContent locations={locations} />
       </form>
       <Button
-        type="submit"
+        className={styles.button}
+        disabled={!formState.isValid}
         form={formId}
+        intent="primary"
         size="small"
         theme="base"
-        intent="primary"
-        className={styles.button}
+        type="submit"
       >
         <Caption color="white" textTransform="bold">
-          {intl.formatMessage({ id: "Find hotels" })}
+          {intl.formatMessage({ id: "Search" })}
         </Caption>
       </Button>
     </section>