From 9234f74bec4ce767e39c44bde9f32203f07c4d0f Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Fri, 23 Jul 2021 20:19:23 +0000
Subject: [PATCH] Added accompanying frontend

---
 lib/slots.ts                        |  8 +++++--
 pages/api/availability/eventtype.ts |  1 +
 pages/availability/event/[type].tsx | 35 ++++++++++++++++++++---------
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/lib/slots.ts b/lib/slots.ts
index 957d084b10..e4fdaa4123 100644
--- a/lib/slots.ts
+++ b/lib/slots.ts
@@ -126,8 +126,12 @@ const getSlots = ({
     inviteeDate = inviteeDate.startOf("day");
   }
 
-  const startTime = startDate.isAfter(inviteeDate) ? inviteeDate.hour() * 60 + inviteeDate.minute() : 0;
-
+  const startTime = startDate.isAfter(inviteeDate)
+    ? // block out everything when inviteeDate is less than startDate
+      startDate.date() > inviteeDate.date()
+      ? 1440
+      : startDate.hour() * 60 + startDate.minute()
+    : 0;
   const inviteeBounds = inviteeBoundary(startTime, inviteeDate.utcOffset(), frequency);
 
   return getOverlaps(
diff --git a/pages/api/availability/eventtype.ts b/pages/api/availability/eventtype.ts
index 3add13cd37..69dbac993d 100644
--- a/pages/api/availability/eventtype.ts
+++ b/pages/api/availability/eventtype.ts
@@ -55,6 +55,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       periodStartDate: req.body.periodStartDate,
       periodEndDate: req.body.periodEndDate,
       periodCountCalendarDays: req.body.periodCountCalendarDays,
+      minimumBookingNotice: req.body.minimumBookingNotice,
     };
 
     if (req.method == "POST") {
diff --git a/pages/availability/event/[type].tsx b/pages/availability/event/[type].tsx
index ae15a1a298..1fec90388f 100644
--- a/pages/availability/event/[type].tsx
+++ b/pages/availability/event/[type].tsx
@@ -66,7 +66,8 @@ type EventTypeInput = {
   periodStartDate?: Date | string;
   periodEndDate?: Date | string;
   periodCountCalendarDays?: boolean;
-  enteredRequiresConfirmation: boolean;
+  requiresConfirmation: boolean;
+  minimumBookingNotice: number;
 };
 
 const PERIOD_TYPES = [
@@ -92,7 +93,6 @@ export default function EventTypePage({
 }: Props): JSX.Element {
   const router = useRouter();
 
-  console.log(eventType);
   const inputOptions: OptionBase[] = [
     { value: EventTypeCustomInputType.Text, label: "Text" },
     { value: EventTypeCustomInputType.TextLong, label: "Multiline Text" },
@@ -174,6 +174,7 @@ export default function EventTypePage({
   const lengthRef = useRef<HTMLInputElement>();
   const isHiddenRef = useRef<HTMLInputElement>();
   const requiresConfirmationRef = useRef<HTMLInputElement>();
+  const minimumBookingNoticeRef = useRef<HTMLInputElement>();
   const eventNameRef = useRef<HTMLInputElement>();
   const periodDaysRef = useRef<HTMLInputElement>();
   const periodDaysTypeRef = useRef<HTMLSelectElement>();
@@ -190,6 +191,7 @@ export default function EventTypePage({
     const enteredDescription: string = descriptionRef.current.value;
     const enteredLength: number = parseInt(lengthRef.current.value);
     const enteredIsHidden: boolean = isHiddenRef.current.checked;
+    const enteredMinimumBookingNotice: number = parseInt(minimumBookingNoticeRef.current.value);
     const enteredRequiresConfirmation: boolean = requiresConfirmationRef.current.checked;
     const enteredEventName: string = eventNameRef.current.value;
 
@@ -200,14 +202,6 @@ export default function EventTypePage({
     const enteredPeriodStartDate = periodStartDate ? periodStartDate.toDate() : null;
     const enteredPeriodEndDate = periodEndDate ? periodEndDate.toDate() : null;
 
-    console.log("values", {
-      type,
-      periodDaysTypeRef,
-      enteredPeriodDays,
-      enteredPeriodDaysType,
-      enteredPeriodStartDate,
-      enteredPeriodEndDate,
-    });
     // TODO: Add validation
 
     const payload: EventTypeInput = {
@@ -226,6 +220,7 @@ export default function EventTypePage({
       periodStartDate: enteredPeriodStartDate,
       periodEndDate: enteredPeriodEndDate,
       periodCountCalendarDays: enteredPeriodDaysType,
+      minimumBookingNotice: enteredMinimumBookingNotice,
       requiresConfirmation: enteredRequiresConfirmation,
     };
 
@@ -671,6 +666,25 @@ export default function EventTypePage({
 
                   <fieldset className="my-8">
                     <Text variant="largetitle">When can people book this event?</Text>
+                    <div className="my-4">
+                      <label htmlFor="minimumAdvance" className="block text-sm font-medium text-gray-700">
+                        Minimum booking notice
+                      </label>
+                      <div className="mt-1 relative rounded-md shadow-sm">
+                        <input
+                          ref={minimumBookingNoticeRef}
+                          type="number"
+                          name="minimumAdvance"
+                          id="minimumAdvance"
+                          required
+                          className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md"
+                          defaultValue={eventType.minimumBookingNotice}
+                        />
+                        <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
+                          minutes
+                        </div>
+                      </div>
+                    </div>
                     <hr className="my-8" />
                     <section className="space-y-12">
                       <div className="mb-4">
@@ -1019,6 +1033,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({ req, query
       periodEndDate: true,
       periodCountCalendarDays: true,
       requiresConfirmation: true,
+      minimumBookingNotice: true,
     },
   });