Added accompanying frontend

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(

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") {

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,
     },
   });