From 00c00a9aeeba96b7477d8526e1b4ae189effd82e Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Mon, 29 Aug 2022 18:34:22 +0530
Subject: [PATCH] fix: add required property on input (#3934)

* fix: add required property on input

* chore: remove console

* fix: add check in /api/book for custom inputs

* chore: var name

* wip:try zod

* fix: change zod validation

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/booking/pages/BookingPage.tsx |  4 ++++
 apps/web/pages/api/book/event.ts                  | 15 ++++++++++++++-
 packages/prisma/zod-utils.ts                      |  7 +++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index f90a5f34d1..226a9cf54e 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -692,6 +692,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           rows={3}
                           className={inputClassName}
@@ -705,6 +706,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           className={inputClassName}
                           placeholder={input.placeholder}
@@ -717,6 +719,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           className={inputClassName}
                           placeholder=""
@@ -730,6 +733,7 @@ const BookingPage = ({
                             {...bookingForm.register(`customInputs.${input.id}`, {
                               required: input.required,
                             })}
+                            required={input.required}
                             id={"custom_" + input.id}
                             className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
                             placeholder=""
diff --git a/apps/web/pages/api/book/event.ts b/apps/web/pages/api/book/event.ts
index 63120a90b3..7a19af7b9e 100644
--- a/apps/web/pages/api/book/event.ts
+++ b/apps/web/pages/api/book/event.ts
@@ -30,7 +30,7 @@ import { defaultResponder, getLuckyUser } from "@calcom/lib/server";
 import { updateWebUser as syncServicesUpdateWebUser } from "@calcom/lib/sync/SyncServiceManager";
 import getSubscribers from "@calcom/lib/webhooks/subscriptions";
 import prisma, { userSelect } from "@calcom/prisma";
-import { extendedBookingCreateBody } from "@calcom/prisma/zod-utils";
+import { extendedBookingCreateBody, requiredCustomInputSchema } from "@calcom/prisma/zod-utils";
 import type { BufferedBusyTime } from "@calcom/types/BufferedBusyTime";
 import type { AdditionalInformation, CalendarEvent } from "@calcom/types/Calendar";
 import type { EventResult, PartialReference } from "@calcom/types/EventManager";
@@ -119,6 +119,7 @@ const getEventTypesFromDB = async (eventTypeId: number) => {
     },
     select: {
       id: true,
+      customInputs: true,
       users: userSelect,
       team: {
         select: {
@@ -251,8 +252,20 @@ async function handler(req: NextApiRequest) {
 
   const eventType =
     !eventTypeId && !!eventTypeSlug ? getDefaultEvent(eventTypeSlug) : await getEventTypesFromDB(eventTypeId);
+
   if (!eventType) throw new HttpError({ statusCode: 404, message: "eventType.notFound" });
 
+  // Check if required custom inputs exist
+  if (eventType.customInputs) {
+    eventType.customInputs.forEach((customInput) => {
+      if (customInput.required) {
+        requiredCustomInputSchema.parse(
+          reqBody.customInputs.find((userInput) => userInput.label === customInput.label)?.value
+        );
+      }
+    });
+  }
+
   let timeOutOfBounds = false;
   try {
     timeOutOfBounds = isOutOfBounds(reqBody.start, {
diff --git a/packages/prisma/zod-utils.ts b/packages/prisma/zod-utils.ts
index 887aac44d2..57b0392786 100644
--- a/packages/prisma/zod-utils.ts
+++ b/packages/prisma/zod-utils.ts
@@ -87,6 +87,13 @@ export const bookingCreateBodySchema = z.object({
   hashedLink: z.string().nullish(),
 });
 
+export const requiredCustomInputSchema = z.union([
+  // string must be given & nonempty
+  z.string().trim().min(1),
+  // boolean must be true if set.
+  z.boolean().refine((v) => v === true),
+]);
+
 export type BookingCreateBody = z.input<typeof bookingCreateBodySchema>;
 
 export const bookingConfirmPatchBodySchema = z.object({