Adding validation for name and email (#2612)

apps/web/components/booking/pages/BookingPage.tsx

@@ -5,6 +5,7 @@ import {
   ExclamationIcon,
   InformationCircleIcon,
 } from "@heroicons/react/solid";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType } from "@prisma/client";
 import { useContracts } from "contexts/contractsContext";
 import dayjs from "dayjs";
@@ -17,6 +18,7 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
 import { useMutation } from "react-query";
+import { z } from "zod";
 
 import {
   useIsEmbed,
@@ -195,8 +197,14 @@ const BookingPage = ({
     };
   };
 
+  const bookingFormSchema = z.object({
+    name: z.string().min(1),
+    email: z.string().email(),
+  });
+
   const bookingForm = useForm<BookingFormValues>({
     defaultValues: defaultValues(),
+    resolver: zodResolver(bookingFormSchema), // Since this isnt set to strict we only validate the fields in the schema
   });
 
   const selectedLocation = useWatch({
@@ -389,7 +397,7 @@ const BookingPage = ({
                     </label>
                     <div className="mt-1">
                       <input
-                        {...bookingForm.register("name")}
+                        {...bookingForm.register("name", { required: true })}
                         type="text"
                         name="name"
                         id="name"