From e1f1386332badbd2fcb1cbb5fb5df03c94562f2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Omar=20L=C3=B3pez?= <zomars@me.com>
Date: Wed, 22 Sep 2021 05:04:32 -0600
Subject: [PATCH] Feat disable guests for events (#719)

* Abstracts CheckboxField

* Allows disabling the guests field while booking

Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
---
 components/booking/pages/BookingPage.tsx      | 72 ++++++++++---------
 components/ui/form/CheckboxField.tsx          | 37 ++++++++++
 pages/[user]/book.tsx                         |  1 +
 pages/api/availability/eventtype.ts           |  1 +
 pages/event-types/[type].tsx                  | 53 ++++++--------
 pages/team/[slug]/book.tsx                    |  1 +
 .../migration.sql                             |  2 +
 prisma/schema.prisma                          |  1 +
 8 files changed, 104 insertions(+), 64 deletions(-)
 create mode 100644 components/ui/form/CheckboxField.tsx
 create mode 100644 prisma/migrations/20210922004424_add_disable_guests_to_event_type/migration.sql

diff --git a/components/booking/pages/BookingPage.tsx b/components/booking/pages/BookingPage.tsx
index bb492fa2..295d3a6c 100644
--- a/components/booking/pages/BookingPage.tsx
+++ b/components/booking/pages/BookingPage.tsx
@@ -329,42 +329,48 @@ const BookingPage = (props: any): JSX.Element => {
                           )}
                         </div>
                       ))}
-                  <div className="mb-4">
-                    {!guestToggle && (
-                      <label
-                        onClick={toggleGuestEmailInput}
-                        htmlFor="guests"
-                        className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
-                        + Additional Guests
-                      </label>
-                    )}
-                    {guestToggle && (
-                      <div>
+                  {!props.eventType.disableGuests && (
+                    <div className="mb-4">
+                      {!guestToggle && (
                         <label
+                          onClick={toggleGuestEmailInput}
                           htmlFor="guests"
-                          className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
-                          Guests
+                          className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
+                          + Additional Guests
                         </label>
-                        <ReactMultiEmail
-                          placeholder="guest@example.com"
-                          emails={guestEmails}
-                          onChange={(_emails: string[]) => {
-                            setGuestEmails(_emails);
-                          }}
-                          getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
-                            return (
-                              <div data-tag key={index}>
-                                {email}
-                                <span data-tag-handle onClick={() => removeEmail(index)}>
-                                  ×
-                                </span>
-                              </div>
-                            );
-                          }}
-                        />
-                      </div>
-                    )}
-                  </div>
+                      )}
+                      {guestToggle && (
+                        <div>
+                          <label
+                            htmlFor="guests"
+                            className="block text-sm font-medium dark:text-white text-gray-700 mb-1">
+                            Guests
+                          </label>
+                          <ReactMultiEmail
+                            placeholder="guest@example.com"
+                            emails={guestEmails}
+                            onChange={(_emails: string[]) => {
+                              setGuestEmails(_emails);
+                            }}
+                            getLabel={(
+                              email: string,
+                              index: number,
+                              removeEmail: (index: number) => void
+                            ) => {
+                              return (
+                                <div data-tag key={index}>
+                                  {email}
+                                  <span data-tag-handle onClick={() => removeEmail(index)}>
+                                    ×
+                                  </span>
+                                </div>
+                              );
+                            }}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  )}
                   <div className="mb-4">
                     <label
                       htmlFor="notes"
diff --git a/components/ui/form/CheckboxField.tsx b/components/ui/form/CheckboxField.tsx
new file mode 100644
index 00000000..f3bc4ac3
--- /dev/null
+++ b/components/ui/form/CheckboxField.tsx
@@ -0,0 +1,37 @@
+import React, { forwardRef, InputHTMLAttributes } from "react";
+
+type Props = InputHTMLAttributes<HTMLInputElement> & {
+  label: string;
+  description: string;
+};
+
+const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
+  return (
+    <div className="items-center block sm:flex">
+      <div className="mb-4 min-w-44 sm:mb-0">
+        <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
+          {label}
+        </label>
+      </div>
+      <div className="w-full">
+        <div className="relative flex items-start">
+          <div className="flex items-center h-5">
+            <input
+              {...rest}
+              ref={ref}
+              type="checkbox"
+              className="w-4 h-4 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
+            />
+          </div>
+          <div className="ml-3 text-sm">
+            <p className="text-neutral-900">{description}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+CheckboxField.displayName = "CheckboxField";
+
+export default CheckboxField;
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index c692e713..3b8f6af4 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -43,6 +43,7 @@ export async function getServerSideProps(context) {
       periodStartDate: true,
       periodEndDate: true,
       periodCountCalendarDays: true,
+      disableGuests: true,
       users: {
         select: {
           username: true,
diff --git a/pages/api/availability/eventtype.ts b/pages/api/availability/eventtype.ts
index 4ec9a409..a6b336f4 100644
--- a/pages/api/availability/eventtype.ts
+++ b/pages/api/availability/eventtype.ts
@@ -47,6 +47,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       length: parseInt(req.body.length),
       hidden: req.body.hidden,
       requiresConfirmation: req.body.requiresConfirmation,
+      disableGuests: req.body.disableGuests,
       locations: req.body.locations,
       eventName: req.body.eventName,
       customInputs: !req.body.customInputs
diff --git a/pages/event-types/[type].tsx b/pages/event-types/[type].tsx
index 982b5c50..16aa2b3d 100644
--- a/pages/event-types/[type].tsx
+++ b/pages/event-types/[type].tsx
@@ -49,6 +49,7 @@ import classNames from "@lib/classNames";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { asStringOrThrow } from "@lib/asStringOrNull";
 import Button from "@components/ui/Button";
+import CheckboxField from "@components/ui/form/CheckboxField";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -194,7 +195,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
 
     const advancedOptionsPayload: AdvancedOptions = {};
     if (requiresConfirmationRef.current) {
-      advancedOptionsPayload.requiresConfirmation = requiresConfirmationRef.current.checked;
       advancedOptionsPayload.eventName = eventNameRef.current.value;
       advancedOptionsPayload.periodType = periodType.type;
       advancedOptionsPayload.periodDays = parseInt(periodDaysRef?.current?.value);
@@ -208,7 +208,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
       title: enteredTitle,
       slug: enteredSlug,
       description: formData.description as string,
-      length: formData.length as number,
+      length: formData.length as unknown as number,
+      requiresConfirmation: formData.requiresConfirmation === "on",
+      disableGuests: formData.disableGuests === "on",
       hidden,
       locations,
       customInputs,
@@ -720,35 +722,23 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             </ul>
                           </div>
                         </div>
-                        <div className="items-center block sm:flex">
-                          <div className="mb-4 min-w-44 sm:mb-0">
-                            <label
-                              htmlFor="requiresConfirmation"
-                              className="flex text-sm font-medium text-neutral-700">
-                              Opt-in booking
-                            </label>
-                          </div>
-                          <div className="w-full">
-                            <div className="relative flex items-start">
-                              <div className="flex items-center h-5">
-                                <input
-                                  ref={requiresConfirmationRef}
-                                  id="requiresConfirmation"
-                                  name="requiresConfirmation"
-                                  type="checkbox"
-                                  className="w-4 h-4 border-gray-300 rounded focus:ring-primary-500 text-primary-600"
-                                  defaultChecked={eventType.requiresConfirmation}
-                                />
-                              </div>
-                              <div className="ml-3 text-sm">
-                                <p className="text-neutral-900">
-                                  The booking needs to be manually confirmed before it is pushed to the
-                                  integrations and a confirmation mail is sent.
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
+
+                        <CheckboxField
+                          ref={requiresConfirmationRef}
+                          id="requiresConfirmation"
+                          name="requiresConfirmation"
+                          label="Opt-in booking"
+                          description="The booking needs to be manually confirmed before it is pushed to the integrations and a confirmation mail is sent."
+                          defaultChecked={eventType.requiresConfirmation}
+                        />
+
+                        <CheckboxField
+                          id="disableGuests"
+                          name="disableGuests"
+                          label="Disable guests"
+                          description="Disable adding aditional guests while booking."
+                          defaultChecked={eventType.disableGuests}
+                        />
 
                         <hr className="border-neutral-200" />
 
@@ -1153,6 +1143,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       periodEndDate: true,
       periodCountCalendarDays: true,
       requiresConfirmation: true,
+      disableGuests: true,
       team: {
         select: {
           slug: true,
diff --git a/pages/team/[slug]/book.tsx b/pages/team/[slug]/book.tsx
index 49daa763..ff88dda3 100644
--- a/pages/team/[slug]/book.tsx
+++ b/pages/team/[slug]/book.tsx
@@ -33,6 +33,7 @@ export async function getServerSideProps(context) {
       periodStartDate: true,
       periodEndDate: true,
       periodCountCalendarDays: true,
+      disableGuests: true,
       team: {
         select: {
           slug: true,
diff --git a/prisma/migrations/20210922004424_add_disable_guests_to_event_type/migration.sql b/prisma/migrations/20210922004424_add_disable_guests_to_event_type/migration.sql
new file mode 100644
index 00000000..840f7f98
--- /dev/null
+++ b/prisma/migrations/20210922004424_add_disable_guests_to_event_type/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "EventType" ADD COLUMN     "disableGuests" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 6a9bb33a..4d094719 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -38,6 +38,7 @@ model EventType {
   periodDays              Int?
   periodCountCalendarDays Boolean?
   requiresConfirmation    Boolean                @default(false)
+  disableGuests           Boolean                @default(false)
   minimumBookingNotice    Int                    @default(120)
   schedulingType          SchedulingType?
   Schedule                Schedule[]