feat: SW-65 Working on booking widget wrapper component

components/BookingWidget/bookingWidget.module.css

@@ -0,0 +1,20 @@
+.container {
+  display: none;
+  gap: var(--Spacing-x3);
+}
+
+.form {
+  display: grid;
+  gap: var(--Spacing-x5);
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    display: grid;
+    padding: 0 var(--Spacing-x5);
+  }
+  .form {
+    grid-template-columns: auto auto auto auto auto auto;
+    align-items: center;
+  }
+}

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>
+  )
+}

components/BookingWidget/schema.ts

@@ -0,0 +1,25 @@
+import { z } from "zod"
+
+export const bookingWidgetSchema = z.object({
+  search: z.object({
+    stayType: z.string(),
+    stayValue: z.string(),
+  }),
+  nights: z.object({
+    fromDate: z.date().default(new Date()),
+    toDate: z.date().default(new Date(new Date().setDate(+1))),
+  }),
+  bookingCode: z.object({
+    value: z.string(),
+  }),
+  redemption: z.boolean().default(false),
+  voucher: z.boolean().default(false),
+  rooms: z.array(
+    z.object({
+      Adults: z.number().default(1),
+      Child: z.number().default(0),
+    })
+  ),
+})
+
+export type BookingWidgetSchema = z.infer<typeof bookingWidgetSchema>

components/Current/Header/index.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
 
+import { BookingWidget } from "../../BookingWidget"
 import { MainMenu } from "./MainMenu"
 import OfflineBanner from "./OfflineBanner"
 import TopMenu from "./TopMenu"
@@ -25,6 +26,11 @@ export default async function Header({
 
   const user = await serverClient().user.name()
 
+  /**
+   * ToDo: Create logic to get this info from ContentStack based on page
+   * */
+  const hideBookingWidget = false
+
   if (!data) {
     return null
   }
@@ -58,6 +64,7 @@ export default async function Header({
         user={user}
         lang={lang}
       />
+      {hideBookingWidget ? null : <BookingWidget />}
     </header>
   )
 }