feat: SW-65 Working on booking widget wrapper component

components/BookingWidget/index.tsx

@@ -0,0 +1,62 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useFormState as useReactFormState } from "react-dom"
+import { FormProvider, useForm } from "react-hook-form"
+
+import { updateBookingWidget } from "@/actions/updateBookingWidget"
+
+import { SearchWidget } from "../SearchWidget"
+import Button from "../TempDesignSystem/Button"
+import { type BookingWidgetSchema, bookingWidgetSchema } from "./schema"
+
+import styles from "./bookingWidget.module.css"
+
+import { State } from "@/types/components/myPages/myProfile/edit"
+
+export function BookingWidget() {
+  const [state, formAction] = useReactFormState<State, FormData>(
+    updateBookingWidget,
+    null
+  )
+  const methods = useForm<BookingWidgetSchema>({
+    defaultValues: {
+      search: {
+        stayType: "",
+        stayValue: "",
+      },
+      nights: {
+        fromDate: new Date(),
+        toDate: new Date(new Date().setDate(+1)),
+      },
+      bookingCode: {
+        value: "",
+      },
+      redemption: false,
+      voucher: false,
+      rooms: [
+        {
+          Adults: 1,
+          Child: 0,
+        },
+      ],
+    },
+    mode: "all",
+    resolver: zodResolver(bookingWidgetSchema),
+    reValidateMode: "onChange",
+  })
+
+  return (
+    <div id="booking-widget" className={styles.container}>
+      <form action={formAction} className={styles.form}>
+        <FormProvider {...methods}>
+          <div>Search</div>
+          <div>Nights</div>
+          <div>Rooms</div>
+          <div>Bonus code</div>
+          <div>Bonus cheque or reward nights</div>
+          <Button type="submit">Search</Button>
+        </FormProvider>
+      </form>
+    </div>
+  )
+}