feat(SW-240): refactor booking widget

components/Forms/BookingWidget/index.tsx

@@ -0,0 +1,61 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+
+import { dt } from "@/lib/dt"
+
+import FormContent from "./FormContent"
+import { bookingWidgetSchema } from "./schema"
+
+import styles from "./form.module.css"
+
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
+
+const formId = "booking-widget"
+
+export default function Form() {
+  const methods = useForm<BookingWidgetSchema>({
+    defaultValues: {
+      search: {
+        stayType: "",
+        stayValue: "",
+      },
+      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.
+        fromDate: dt().utc().format("DD/MM/YYYY"),
+        toDate: dt().utc().add(1, "day").format("DD/MM/YYYY"),
+      },
+      bookingCode: "",
+      redemption: false,
+      voucher: false,
+      rooms: [
+        {
+          adults: 1,
+          childs: [],
+        },
+      ],
+    },
+    mode: "all",
+    resolver: zodResolver(bookingWidgetSchema),
+    reValidateMode: "onChange",
+  })
+
+  function onSubmit(data: BookingWidgetSchema) {
+    console.log(data)
+    // Parse data and route accordignly to Select hotel or select room-rate page
+    console.log("to be routing")
+  }
+
+  return (
+    <form
+      onSubmit={methods.handleSubmit(onSubmit)}
+      className={styles.form}
+      id={formId}
+    >
+      <FormProvider {...methods}>
+        <FormContent />
+      </FormProvider>
+    </form>
+  )
+}