feat: SW-65 Working on booking widget wrapper component

actions/updateBookingWidget.ts

@@ -0,0 +1,56 @@
+"use server"
+import { ZodError } from "zod"
+
+import { bookingWidgetSchema } from "@/components/BookingWidget/schema"
+
+import { type State, Status } from "@/types/components/myPages/myProfile/edit"
+
+export async function updateBookingWidget(_prevState: State, values: FormData) {
+  try {
+    const data: Record<string, any> = Object.fromEntries(values.entries())
+
+    /**
+     * ToDo: Update the data parsing
+     */
+    console.info(`Raw Data BW`)
+    console.log(data)
+    const parsedData = bookingWidgetSchema.safeParse(data)
+    if (parsedData.success) {
+      console.info(`Success`)
+      console.log(parsedData.data)
+      return {
+        message: "All good!",
+        status: Status.success,
+      }
+    } else {
+      console.error("Error parsing BW data")
+      console.error(parsedData.error)
+      return {
+        message: "Invalid data, parse failed!",
+        status: Status.error,
+      }
+    }
+  } catch (error) {
+    if (error instanceof ZodError) {
+      console.error(`ZodError handling profile edit`)
+      console.error(error)
+
+      return {
+        errors: error.issues.map((issue) => ({
+          message: `Server validation: ${issue.message}`,
+          path: issue.path.join("."),
+        })),
+        message: "Invalid form data",
+        status: Status.error,
+      }
+    }
+
+    console.error(`EditProfile Server Action Error`)
+    console.error(error)
+
+    return {
+      message: "Something went wrong. Please try again.",
+      status: Status.error,
+    }
+  }
+}

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

types/components/bookingWidget/index.ts

@@ -0,0 +1,5 @@
+import { BookingWidgetSchema } from "@/components/BookingWidget/schema"
+
+export type bwFormProps = {
+  data: BookingWidgetSchema
+}