From 567a7c8f12abc4d0548296bee6b7e978cf99b049 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Sat, 11 Jun 2022 00:32:54 +0100
Subject: [PATCH] Adding UI for Requires Confirmation (#3017)

---
 .../booking/pages/AvailabilityPage.tsx        | 17 +++-
 .../components/booking/pages/BookingPage.tsx  |  7 ++
 apps/web/pages/[user]/[type].tsx              | 74 +++++++----------
 apps/web/pages/[user]/book.tsx                | 31 +------
 apps/web/pages/d/[link]/[slug].tsx            | 48 +----------
 apps/web/pages/d/[link]/book.tsx              | 36 +--------
 apps/web/pages/team/[slug]/[type].tsx         |  1 +
 apps/web/pages/team/[slug]/book.tsx           |  1 +
 packages/prisma/selects/event-types.ts        | 80 +++++++++++++++++++
 9 files changed, 140 insertions(+), 155 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 19c1772280..97caa287ce 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -9,6 +9,7 @@ import {
   GlobeIcon,
   InformationCircleIcon,
   LocationMarkerIcon,
+  ClipboardCheckIcon,
   RefreshIcon,
   VideoCameraIcon,
 } from "@heroicons/react/solid";
@@ -260,6 +261,12 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                             {eventType.description}
                           </p>
                         )}
+                        {eventType?.requiresConfirmation && (
+                          <p className="text-gray-600 dark:text-white">
+                            <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                            {t("requires_confirmation")}
+                          </p>
+                        )}
                         {eventType.locations.length === 1 && (
                           <p className="text-gray-600 dark:text-white">
                             {Object.values(AppStoreLocationType).includes(
@@ -395,6 +402,14 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                         <p>{eventType.description}</p>
                       </div>
                     )}
+                    {eventType?.requiresConfirmation && (
+                      <div className="flex text-gray-600 dark:text-white">
+                        <div>
+                          <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        </div>
+                        {t("requires_confirmation")}
+                      </div>
+                    )}
                     {eventType.locations.length === 1 && (
                       <p className="text-gray-600 dark:text-white">
                         {Object.values(AppStoreLocationType).includes(
@@ -542,7 +557,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
   function TimezoneDropdown() {
     return (
       <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-        <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
+        <Collapsible.Trigger className="min-w-32 text-gray mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
           <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
           {timeZone()}
           {isTimeOptionsOpen ? (
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index dbfbeebbe3..d699a67928 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -5,6 +5,7 @@ import {
   ExclamationCircleIcon,
   ExclamationIcon,
   InformationCircleIcon,
+  ClipboardCheckIcon,
   RefreshIcon,
 } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -497,6 +498,12 @@ const BookingPage = ({
                     {eventType.description}
                   </p>
                 )}
+                {eventType?.requiresConfirmation && (
+                  <p className="text-bookinglight mb-2 dark:text-white">
+                    <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                    {t("requires_confirmation")}
+                  </p>
+                )}
                 <p className="text-bookinglight mb-2 dark:text-white">
                   <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                   {eventType.length} {t("minutes")}
diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index 8c9f8be239..65ac334b20 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -6,6 +6,7 @@ import { locationHiddenFilter, LocationObject } from "@calcom/app-store/location
 import { parseRecurringEvent } from "@calcom/lib";
 import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { availiblityPageEventTypeSelect } from "@calcom/prisma/selects";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { getWorkingHours } from "@lib/availability";
@@ -71,49 +72,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     throw new Error(`File is not named [type]/[user]`);
   }
 
-  const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
-    id: true,
-    title: true,
-    availability: true,
-    description: true,
-    length: true,
-    price: true,
-    currency: true,
-    periodType: true,
-    periodStartDate: true,
-    periodEndDate: true,
-    periodDays: true,
-    periodCountCalendarDays: true,
-    locations: true,
-    schedulingType: true,
-    recurringEvent: true,
-    schedule: {
-      select: {
-        availability: true,
-        timeZone: true,
-      },
-    },
-    hidden: true,
-    slug: true,
-    minimumBookingNotice: true,
-    beforeEventBuffer: true,
-    afterEventBuffer: true,
-    timeZone: true,
-    metadata: true,
-    slotInterval: true,
-    seatsPerTimeSlot: true,
-    users: {
-      select: {
-        avatar: true,
-        name: true,
-        username: true,
-        hideBranding: true,
-        plan: true,
-        timeZone: true,
-      },
-    },
-  });
-
   const users = await prisma.user.findMany({
     where: {
       username: {
@@ -158,7 +116,20 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
             },
           ],
         },
-        select: eventTypeSelect,
+        select: {
+          ...availiblityPageEventTypeSelect,
+          users: {
+            select: {
+              id: false,
+              avatar: true,
+              name: true,
+              username: true,
+              hideBranding: true,
+              plan: true,
+              timeZone: true,
+            },
+          },
+        },
       },
     },
   });
@@ -184,7 +155,20 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
           },
         ],
       },
-      select: eventTypeSelect,
+      select: {
+        ...availiblityPageEventTypeSelect,
+        users: {
+          select: {
+            id: false,
+            avatar: true,
+            name: true,
+            username: true,
+            hideBranding: true,
+            plan: true,
+            timeZone: true,
+          },
+        },
+      },
     });
     if (!eventTypeBackwardsCompat) {
       return {
diff --git a/apps/web/pages/[user]/book.tsx b/apps/web/pages/[user]/book.tsx
index a423b7b19c..ba389252ff 100644
--- a/apps/web/pages/[user]/book.tsx
+++ b/apps/web/pages/[user]/book.tsx
@@ -13,6 +13,7 @@ import {
   getUsernameList,
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { bookEventTypeSelect } from "@calcom/prisma";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import getBooking, { GetBookingType } from "@lib/getBooking";
@@ -110,35 +111,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
             id: parseInt(asStringOrThrow(context.query.type)),
           },
           select: {
-            id: true,
-            title: true,
-            slug: true,
-            description: true,
-            length: true,
-            locations: true,
-            customInputs: true,
-            periodType: true,
-            periodDays: true,
-            periodStartDate: true,
-            periodEndDate: true,
-            recurringEvent: true,
-            metadata: true,
-            periodCountCalendarDays: true,
-            price: true,
-            currency: true,
-            disableGuests: true,
-            seatsPerTimeSlot: true,
-            users: {
-              select: {
-                id: true,
-                username: true,
-                name: true,
-                email: true,
-                bio: true,
-                avatar: true,
-                theme: true,
-              },
-            },
+            ...bookEventTypeSelect,
           },
         });
 
diff --git a/apps/web/pages/d/[link]/[slug].tsx b/apps/web/pages/d/[link]/[slug].tsx
index 2edb2925be..f5591695e3 100644
--- a/apps/web/pages/d/[link]/[slug].tsx
+++ b/apps/web/pages/d/[link]/[slug].tsx
@@ -3,6 +3,7 @@ import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
 import { parseRecurringEvent } from "@calcom/lib";
+import { availiblityPageEventTypeSelect } from "@calcom/prisma";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { getWorkingHours } from "@lib/availability";
@@ -27,51 +28,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const slug = asStringOrNull(context.query.slug) || "";
   const dateParam = asStringOrNull(context.query.date);
 
-  const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
-    id: true,
-    title: true,
-    availability: true,
-    description: true,
-    length: true,
-    price: true,
-    currency: true,
-    periodType: true,
-    periodStartDate: true,
-    periodEndDate: true,
-    periodDays: true,
-    periodCountCalendarDays: true,
-    recurringEvent: true,
-    schedulingType: true,
-    seatsPerTimeSlot: true,
-    userId: true,
-    schedule: {
-      select: {
-        availability: true,
-        timeZone: true,
-      },
-    },
-    hidden: true,
-    slug: true,
-    minimumBookingNotice: true,
-    beforeEventBuffer: true,
-    afterEventBuffer: true,
-    locations: true,
-    timeZone: true,
-    metadata: true,
-    slotInterval: true,
-    users: {
-      select: {
-        id: true,
-        avatar: true,
-        name: true,
-        username: true,
-        hideBranding: true,
-        plan: true,
-        timeZone: true,
-      },
-    },
-  });
-
   const hashedLink = await prisma.hashedLink.findUnique({
     where: {
       link,
@@ -79,7 +35,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     select: {
       eventTypeId: true,
       eventType: {
-        select: eventTypeSelect,
+        select: availiblityPageEventTypeSelect,
       },
     },
   });
diff --git a/apps/web/pages/d/[link]/book.tsx b/apps/web/pages/d/[link]/book.tsx
index 71f1217fa1..d367882c65 100644
--- a/apps/web/pages/d/[link]/book.tsx
+++ b/apps/web/pages/d/[link]/book.tsx
@@ -8,6 +8,7 @@ import { JSONObject } from "superjson/dist/types";
 import { getLocationLabels } from "@calcom/app-store/utils";
 import { parseRecurringEvent } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { bookEventTypeSelect } from "@calcom/prisma/selects";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import prisma from "@lib/prisma";
@@ -34,39 +35,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const link = asStringOrThrow(context.query.link as string);
   const recurringEventCountQuery = asStringOrNull(context.query.count);
 
-  const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
-    id: true,
-    title: true,
-    slug: true,
-    description: true,
-    length: true,
-    locations: true,
-    customInputs: true,
-    periodType: true,
-    periodDays: true,
-    periodStartDate: true,
-    recurringEvent: true,
-    periodEndDate: true,
-    metadata: true,
-    periodCountCalendarDays: true,
-    seatsPerTimeSlot: true,
-    price: true,
-    currency: true,
-    disableGuests: true,
-    userId: true,
-    users: {
-      select: {
-        id: true,
-        username: true,
-        name: true,
-        email: true,
-        bio: true,
-        avatar: true,
-        theme: true,
-      },
-    },
-  });
-
   const hashedLink = await prisma.hashedLink.findUnique({
     where: {
       link,
@@ -74,7 +42,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     select: {
       eventTypeId: true,
       eventType: {
-        select: eventTypeSelect,
+        select: bookEventTypeSelect,
       },
     },
   });
diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx
index 6ab35f2d01..4fae6c83ea 100644
--- a/apps/web/pages/team/[slug]/[type].tsx
+++ b/apps/web/pages/team/[slug]/[type].tsx
@@ -72,6 +72,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
           beforeEventBuffer: true,
           afterEventBuffer: true,
           recurringEvent: true,
+          requiresConfirmation: true,
           locations: true,
           price: true,
           currency: true,
diff --git a/apps/web/pages/team/[slug]/book.tsx b/apps/web/pages/team/[slug]/book.tsx
index fbe79d8981..d09e26bfde 100644
--- a/apps/web/pages/team/[slug]/book.tsx
+++ b/apps/web/pages/team/[slug]/book.tsx
@@ -48,6 +48,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       periodEndDate: true,
       periodCountCalendarDays: true,
       recurringEvent: true,
+      requiresConfirmation: true,
       disableGuests: true,
       price: true,
       currency: true,
diff --git a/packages/prisma/selects/event-types.ts b/packages/prisma/selects/event-types.ts
index 59e4d3199d..9af3c0e355 100644
--- a/packages/prisma/selects/event-types.ts
+++ b/packages/prisma/selects/event-types.ts
@@ -13,3 +13,83 @@ export const baseEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
   currency: true,
   requiresConfirmation: true,
 });
+
+export const bookEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
+  id: true,
+  title: true,
+  slug: true,
+  description: true,
+  length: true,
+  locations: true,
+  customInputs: true,
+  periodType: true,
+  periodDays: true,
+  periodStartDate: true,
+  periodEndDate: true,
+  recurringEvent: true,
+  requiresConfirmation: true,
+  metadata: true,
+  periodCountCalendarDays: true,
+  price: true,
+  currency: true,
+  disableGuests: true,
+  userId:true,
+  seatsPerTimeSlot: true,
+  users: {
+    select: {
+      id: true,
+      username: true,
+      name: true,
+      email: true,
+      bio: true,
+      avatar: true,
+      theme: true,
+    },
+  },
+})
+
+export const availiblityPageEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
+  id: true,
+  title: true,
+  availability: true,
+  description: true,
+  length: true,
+  price: true,
+  currency: true,
+  periodType: true,
+  periodStartDate: true,
+  periodEndDate: true,
+  periodDays: true,
+  periodCountCalendarDays: true,
+  locations: true,
+  schedulingType: true,
+  recurringEvent: true,
+  requiresConfirmation: true,
+  schedule: {
+    select: {
+      availability: true,
+      timeZone: true,
+    },
+  },
+  hidden: true,
+  userId:true,
+  slug: true,
+  minimumBookingNotice: true,
+  beforeEventBuffer: true,
+  afterEventBuffer: true,
+  timeZone: true,
+  metadata: true,
+  slotInterval: true,
+  seatsPerTimeSlot: true,
+  users: {
+    select: {
+      id:true,
+      avatar: true,
+      name: true,
+      username: true,
+      hideBranding: true,
+      plan: true,
+      timeZone: true,
+    },
+  },
+})
\ No newline at end of file