Working version ready for testing

* More tests to be added to verify slots logic
* Adds Jest
* Implements logic to the booking code to take into account grayed days
* Slots take workhours into account

TODO: Improve the tests, evaluate the structure, small re-orgs here and
there for improved readability / better code

.eslintrc.json

@@ -18,12 +18,14 @@
   "rules": {
     "prettier/prettier": ["error"],
     "@typescript-eslint/no-unused-vars": "error",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/prop-types": "off"
   },
   "env": {
     "browser": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "settings": {
     "react": {

components/booking/AvailableTimes.tsx

@@ -1,87 +1,35 @@
-import dayjs, {Dayjs} from "dayjs";
-import isBetween from 'dayjs/plugin/isBetween';
-dayjs.extend(isBetween);
-import {useEffect, useMemo, useState} from "react";
-import getSlots from "../../lib/slots";
 import Link from "next/link";
-import {timeZone} from "../../lib/clock";
 import { useRouter } from "next/router";
+import Slots from "./Slots";
 
-const AvailableTimes = (props) => {
+const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeFormat }) => {
-
   const router = useRouter();
   const { user, rescheduleUid } = router.query;
-  const [loaded, setLoaded] = useState(false);
+  const { slots } = Slots({ date, eventLength, workingHours });
-
-  const times = getSlots({
-      calendarTimeZone: props.user.timeZone,
-      selectedTimeZone: timeZone(),
-      eventLength: props.eventType.length,
-      selectedDate: props.date,
-      dayStartTime: props.user.startTime,
-      dayEndTime: props.user.endTime,
-    });
-
-  const handleAvailableSlots = (busyTimes: []) => {
-    // Check for conflicts
-    for (let i = times.length - 1; i >= 0; i -= 1) {
-      busyTimes.forEach(busyTime => {
-        let startTime = dayjs(busyTime.start);
-        let endTime = dayjs(busyTime.end);
-
-        // Check if start times are the same
-        if (dayjs(times[i]).format('HH:mm') == startTime.format('HH:mm')) {
-          times.splice(i, 1);
-        }
-
-        // Check if time is between start and end times
-        if (dayjs(times[i]).isBetween(startTime, endTime)) {
-          times.splice(i, 1);
-        }
-
-        // Check if slot end time is between start and end time
-        if (dayjs(times[i]).add(props.eventType.length, 'minutes').isBetween(startTime, endTime)) {
-          times.splice(i, 1);
-        }
-
-        // Check if startTime is between slot
-        if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, 'minutes'))) {
-          times.splice(i, 1);
-        }
-      });
-    }
-    // Display available times
-    setLoaded(true);
-  };
-
-  // Re-render only when invitee changes date
-  useEffect(() => {
-    setLoaded(false);
-    fetch(`/api/availability/${user}?dateFrom=${props.date.startOf('day').utc().format()}&dateTo=${props.date.endOf('day').utc().format()}`)
-      .then( res => res.json())
-      .then(handleAvailableSlots);
-  }, [props.date]);
-
   return (
     <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3  md:max-h-97 overflow-y-auto">
       <div className="text-gray-600 font-light text-xl mb-4 text-left">
-        <span className="w-1/2">
+        <span className="w-1/2">{date.format("dddd DD MMMM YYYY")}</span>
-          {props.date.format("dddd DD MMMM YYYY")}
-        </span>
       </div>
-      {
+      {slots.length > 0 ? (
-        loaded ? times.map((time) =>
+        slots.map((slot) => (
-          <div key={dayjs(time).utc().format()}>
+          <div key={slot.format()}>
             <Link
-              href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")}>
+              href={
-              <a key={dayjs(time).format("hh:mma")}
+                `/${user}/book?date=${slot.utc().format()}&type=${eventTypeId}` +
-                 className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).tz(timeZone()).format(props.timeFormat)}</a>
+                (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")
+              }>
+              <a className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">
+                {slot.format(timeFormat)}
+              </a>
             </Link>
           </div>
-        ) : <div className="loader"></div>
+        ))
-      }
+      ) : (
+        <div className="loader" />
+      )}
     </div>
   );
-}
+};
 
 export default AvailableTimes;

components/booking/DatePicker.tsx

@@ -1,90 +1,90 @@
-import dayjs from "dayjs";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
 import { useEffect, useState } from "react";
+import dayjs, { Dayjs } from "dayjs";
+import isToday from "dayjs/plugin/isToday";
+dayjs.extend(isToday);
 
-const DatePicker = ({ weekStart, onDatePicked }) => {
+const DatePicker = ({ weekStart, onDatePicked, workingHours, disableToday }) => {
-
+  const workingDays = workingHours.reduce((workingDays: number[], wh) => [...workingDays, ...wh.days], []);
   const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
-  const [selectedDay, setSelectedDay] = useState(dayjs().date());
+  const [selectedDate, setSelectedDate] = useState();
-  const [hasPickedDate, setHasPickedDate] = useState(false);
 
   useEffect(() => {
-    if (hasPickedDate) {
+    if (selectedDate) onDatePicked(selectedDate);
-      onDatePicked(dayjs().month(selectedMonth).date(selectedDay));
+  }, [selectedDate, onDatePicked]);
-    }
-  }, [hasPickedDate, selectedDay]);
 
   // Handle month changes
   const incrementMonth = () => {
     setSelectedMonth(selectedMonth + 1);
-  }
+  };
 
   const decrementMonth = () => {
     setSelectedMonth(selectedMonth - 1);
-  }
+  };
 
   // Set up calendar
-  var daysInMonth = dayjs().month(selectedMonth).daysInMonth();
+  const daysInMonth = dayjs().month(selectedMonth).daysInMonth();
-  var days = [];
+  const days = [];
   for (let i = 1; i <= daysInMonth; i++) {
     days.push(i);
   }
 
   // Create placeholder elements for empty days in first week
   let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
-  if (weekStart === 'Monday') {
+  if (weekStart === "Monday") {
     weekdayOfFirst -= 1;
-    if (weekdayOfFirst < 0)
+    if (weekdayOfFirst < 0) weekdayOfFirst = 6;
-      weekdayOfFirst = 6;
   }
-  const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) =>
+  const emptyDays = Array(weekdayOfFirst)
+    .fill(null)
+    .map((day, i) => (
       <div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
         {null}
       </div>
+    ));
+
+  const isDisabled = (day: number) => {
+    const date: Dayjs = dayjs().month(selectedMonth).date(day);
+    return (
+      date.isBefore(dayjs()) || !workingDays.includes(+date.format("d")) || (date.isToday() && disableToday)
     );
+  };
 
   // Combine placeholder days with actual days
-  const calendar = [...emptyDays, ...days.map((day) =>
+  const calendar = [
-    <button key={day}
+    ...emptyDays,
-            onClick={() => { setHasPickedDate(true); setSelectedDay(day) }}
+    ...days.map((day) => (
+      <button
+        key={day}
+        onClick={() => setSelectedDate(dayjs().month(selectedMonth).date(day))}
         disabled={
-              selectedMonth < parseInt(dayjs().format('MM')) && dayjs().month(selectedMonth).format("D") > day
+          (selectedMonth < parseInt(dayjs().format("MM")) &&
+            dayjs().month(selectedMonth).format("D") > day) ||
+          isDisabled(day)
         }
         className={
-              "text-center w-10 h-10 rounded-full mx-auto " + (
+          "text-center w-10 h-10 rounded-full mx-auto" +
-                dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)
+          (isDisabled(day) ? " text-gray-400 font-light" : " text-blue-600 font-medium") +
-                ) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light'
+          (selectedDate && selectedDate.isSame(dayjs().month(selectedMonth).date(day), "day")
-              ) + (
+            ? " bg-blue-600 text-white-important"
-                dayjs().date(selectedDay).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : ''
+            : !isDisabled(day)
-              )
+            ? " bg-blue-50"
+            : "")
         }>
         {day}
       </button>
-  )];
+    )),
+  ];
 
   return (
-    <div
+    <div className={"mt-8 sm:mt-0 " + (selectedDate ? "sm:w-1/3 border-r sm:px-4" : "sm:w-1/2 sm:pl-4")}>
-      className={
-        "mt-8 sm:mt-0 " +
-        (hasPickedDate
-          ? "sm:w-1/3 border-r sm:px-4"
-          : "sm:w-1/2 sm:pl-4")
-      }
-    >
       <div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
-                  <span className="w-1/2">
+        <span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
-                    {dayjs().month(selectedMonth).format("MMMM YYYY")}
-                  </span>
         <div className="w-1/2 text-right">
           <button
             onClick={decrementMonth}
-            className={
+            className={"mr-4 " + (selectedMonth < parseInt(dayjs().format("MM")) && "text-gray-400")}
-              "mr-4 " +
+            disabled={selectedMonth < parseInt(dayjs().format("MM"))}>
-              (selectedMonth < parseInt(dayjs().format("MM")) &&
-                "text-gray-400")
-            }
-            disabled={selectedMonth < parseInt(dayjs().format("MM"))}
-          >
             <ChevronLeftIcon className="w-5 h-5" />
           </button>
           <button onClick={incrementMonth}>
@@ -93,17 +93,17 @@ const DatePicker = ({ weekStart, onDatePicked }) => {
         </div>
       </div>
       <div className="grid grid-cols-7 gap-y-4 text-center">
-        {
+        {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
-          ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
-            .sort( (a, b) => weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0 )
+          .map((weekDay) => (
-            .map( (weekDay) =>
+            <div key={weekDay} className="uppercase text-gray-400 text-xs tracking-widest">
-              <div key={weekDay} className="uppercase text-gray-400 text-xs tracking-widest">{weekDay}</div>
+              {weekDay}
-            )
+            </div>
-        }
+          ))}
         {calendar}
       </div>
     </div>
   );
-}
+};
 
 export default DatePicker;

components/booking/Slots.tsx

@@ -0,0 +1,66 @@
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import getSlots from "../../lib/slots";
+
+const Slots = (props) => {
+  const router = useRouter();
+  const { user } = router.query;
+  const [slots, setSlots] = useState([]);
+
+  useEffect(() => {
+    setSlots([]);
+    fetch(
+      `/api/availability/${user}?dateFrom=${props.date.startOf("day").utc().format()}&dateTo=${props.date
+        .endOf("day")
+        .utc()
+        .format()}`
+    )
+      .then((res) => res.json())
+      .then(handleAvailableSlots);
+  }, [props.date]);
+
+  const handleAvailableSlots = (busyTimes: []) => {
+    const times = getSlots({
+      frequency: props.eventLength,
+      inviteeDate: props.date,
+      workingHours: props.workingHours,
+      minimumBookingNotice: 0,
+    });
+
+    // Check for conflicts
+    for (let i = times.length - 1; i >= 0; i -= 1) {
+      busyTimes.forEach((busyTime) => {
+        const startTime = dayjs(busyTime.start);
+        const endTime = dayjs(busyTime.end);
+
+        // Check if start times are the same
+        if (dayjs(times[i]).format("HH:mm") == startTime.format("HH:mm")) {
+          times.splice(i, 1);
+        }
+
+        // Check if time is between start and end times
+        if (dayjs(times[i]).isBetween(startTime, endTime)) {
+          times.splice(i, 1);
+        }
+
+        // Check if slot end time is between start and end time
+        if (dayjs(times[i]).add(props.eventType.length, "minutes").isBetween(startTime, endTime)) {
+          times.splice(i, 1);
+        }
+
+        // Check if startTime is between slot
+        if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, "minutes"))) {
+          times.splice(i, 1);
+        }
+      });
+    }
+    // Display available times
+    setSlots(times);
+  };
+
+  return {
+    slots,
+  };
+};
+
+export default Slots;

components/ui/Scheduler.tsx

@@ -1,45 +1,48 @@
 import React, { useEffect, useState } from "react";
 import TimezoneSelect from "react-timezone-select";
-import {PencilAltIcon, TrashIcon} from "@heroicons/react/outline";
+import { TrashIcon } from "@heroicons/react/outline";
-import {WeekdaySelect, Weekday} from "./WeekdaySelect";
+import { WeekdaySelect } from "./WeekdaySelect";
 import SetTimesModal from "./modal/SetTimesModal";
-import Schedule from '../../lib/schedule.model';
+import Schedule from "../../lib/schedule.model";
-import dayjs, {Dayjs} from "dayjs";
+import dayjs from "dayjs";
-import utc from 'dayjs/plugin/utc';
+import utc from "dayjs/plugin/utc";
-import timezone from 'dayjs/plugin/timezone';
+import timezone from "dayjs/plugin/timezone";
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 export const Scheduler = (props) => {
-
+  const [schedules, setSchedules]: Schedule[] = useState(
-  const [ schedules, setSchedules ]: Schedule[] = useState(props.schedules.map( schedule => {
+    props.schedules.map((schedule) => {
-    const startDate = schedule.isOverride ? dayjs(schedule.startDate) : dayjs.utc().startOf('day').add(schedule.startTime, 'minutes')
+      const startDate = schedule.isOverride
-    return (
+        ? dayjs(schedule.startDate)
-      {
+        : dayjs.utc().startOf("day").add(schedule.startTime, "minutes").tz(props.timeZone);
+      return {
         days: schedule.days,
         startDate,
-        endDate: startDate.add(schedule.length, 'minutes')
+        endDate: startDate.add(schedule.length, "minutes"),
-      }
+      };
-    )
+    })
-  }));
+  );
 
   const [timeZone, setTimeZone] = useState(props.timeZone);
   const [editSchedule, setEditSchedule] = useState(-1);
 
   useEffect(() => {
     props.onChange(schedules);
-  }, [schedules])
+  }, [schedules]);
 
   const addNewSchedule = () => setEditSchedule(schedules.length);
 
   const applyEditSchedule = (changed: Schedule) => {
     const replaceWith = {
       ...schedules[editSchedule],
-      ...changed
+      ...changed,
     };
+
     schedules.splice(editSchedule, 1, replaceWith);
+
     setSchedules([].concat(schedules));
-  }
+  };
 
   const removeScheduleAt = (toRemove: number) => {
     schedules.splice(toRemove, 1);
@@ -49,7 +52,7 @@ export const Scheduler = (props) => {
   const setWeekdays = (idx: number, days: number[]) => {
     schedules[idx].days = days;
     setSchedules([].concat(schedules));
-  }
+  };
 
   return (
     <div>
@@ -60,26 +63,40 @@ export const Scheduler = (props) => {
               Timezone
             </label>
             <div className="mt-1">
-              <TimezoneSelect id="timeZone" value={timeZone} onChange={setTimeZone} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" />
+              <TimezoneSelect
+                id="timeZone"
+                value={timeZone}
+                onChange={setTimeZone}
+                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
+              />
             </div>
           </div>
           <ul>
-            {schedules.map( (schedule, idx) =>
+            {schedules.map((schedule, idx) => (
               <li key={idx} className="py-2 flex justify-between border-t">
                 <div className="inline-flex ml-2">
-                <WeekdaySelect defaultValue={schedules[idx].days} onSelect={(days: number[]) => setWeekdays(idx, days)} />
+                  <WeekdaySelect
+                    defaultValue={schedules[idx].days}
+                    onSelect={(days: number[]) => setWeekdays(idx, days)}
+                  />
                   <button className="ml-2 text-sm px-2" type="button" onClick={() => setEditSchedule(idx)}>
-                  {schedule.startDate.format(schedule.startDate.minute() === 0 ? 'ha' : 'h:mma')} until {schedule.endDate.format(schedule.endDate.minute() === 0 ? 'ha' : 'h:mma')}
+                    {dayjs(schedule.startDate).format(schedule.startDate.minute() === 0 ? "ha" : "h:mma")}{" "}
+                    until {dayjs(schedule.endDate).format(schedule.endDate.minute() === 0 ? "ha" : "h:mma")}
                   </button>
                 </div>
-              <button type="button" onClick={() => removeScheduleAt(idx)}
+                <button
+                  type="button"
+                  onClick={() => removeScheduleAt(idx)}
                   className="btn-sm bg-transparent px-2 py-1 ml-1">
                   <TrashIcon className="h-6 w-6 inline text-gray-400 -mt-1" />
                 </button>
-            </li>)}
+              </li>
+            ))}
           </ul>
           <hr />
-          <button type="button" onClick={addNewSchedule} className="btn-white btn-sm m-2">Add another</button>
+          <button type="button" onClick={addNewSchedule} className="btn-white btn-sm m-2">
+            Add another
+          </button>
         </div>
         <div className="border-l p-2 w-2/5 text-sm bg-gray-50">
           {/*<p className="font-bold mb-2">Add date overrides</p>
@@ -89,14 +106,16 @@ export const Scheduler = (props) => {
           <button className="btn-sm btn-white">Add a date override</button>*/}
         </div>
       </div>
-      {editSchedule >= 0 &&
+      {editSchedule >= 0 && (
-        <SetTimesModal schedule={schedules[editSchedule]}
+        <SetTimesModal
+          schedule={schedules[editSchedule]}
           onChange={applyEditSchedule}
-                       onExit={() => setEditSchedule(-1)} />
+          onExit={() => setEditSchedule(-1)}
-      }
+        />
+      )}
       {/*{showDateOverrideModal &&
         <DateOverrideModal />
       }*/}
     </div>
   );
-}
+};

components/ui/WeekdaySelect.tsx

@@ -1,42 +1,53 @@
 import React, { useEffect, useState } from "react";
 
 export const WeekdaySelect = (props) => {
+  const [activeDays, setActiveDays] = useState(
+    [...Array(7).keys()].map((v, i) => (props.defaultValue || []).includes(i))
+  );
 
-  const [ activeDays, setActiveDays ] = useState([1,2,3,4,5,6,7].map( (v) => (props.defaultValue || []).indexOf(v) !== -1));
+  const days = ["S", "M", "T", "W", "T", "F", "S"];
-  const days = [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ];
 
   useEffect(() => {
-    props.onSelect(activeDays.map( (isActive, idx) => isActive ? idx + 1 : 0).filter( (v) => 0 !== v ));
+    props.onSelect(activeDays.map((v, idx) => (v ? idx : -1)).filter((v) => v !== -1));
   }, [activeDays]);
 
   const toggleDay = (e, idx: number) => {
     e.preventDefault();
     activeDays[idx] = !activeDays[idx];
     setActiveDays([].concat(activeDays));
-  }
+  };
 
   return (
     <div className="weekdaySelect">
       <div className="inline-flex">
-        {days.map( (day, idx) => activeDays[idx] ?
+        {days.map((day, idx) =>
-          <button key={idx} onClick={(e) => toggleDay(e, idx)}
+          activeDays[idx] ? (
-                  style={ {"marginLeft": "-2px"} }
+            <button
+              key={idx}
+              onClick={(e) => toggleDay(e, idx)}
+              style={{ marginLeft: "-2px" }}
               className={`
                     active focus:outline-none border-2 border-blue-500 px-2 py-1 rounded 
-                    ${activeDays[idx+1] ? 'rounded-r-none': ''} 
+                    ${activeDays[idx + 1] ? "rounded-r-none" : ""} 
-                    ${activeDays[idx-1] ? 'rounded-l-none': ''} 
+                    ${activeDays[idx - 1] ? "rounded-l-none" : ""} 
-                    ${idx === 0 ? 'rounded-l' : ''} 
+                    ${idx === 0 ? "rounded-l" : ""} 
-                    ${idx === days.length-1 ? 'rounded-r' : ''}
+                    ${idx === days.length - 1 ? "rounded-r" : ""}
                   `}>
               {day}
             </button>
-          :
+          ) : (
-          <button key={idx} onClick={(e) => toggleDay(e, idx)}
+            <button
-                  style={ {"marginTop": "1px", "marginBottom": "1px"} }
+              key={idx}
-                  className={`border focus:outline-none px-2 py-1 rounded-none ${idx === 0 ? 'rounded-l' : 'border-l-0'} ${idx === days.length-1 ? 'rounded-r' : ''}`}>
+              onClick={(e) => toggleDay(e, idx)}
+              style={{ marginTop: "1px", marginBottom: "1px" }}
+              className={`border focus:outline-none px-2 py-1 rounded-none ${
+                idx === 0 ? "rounded-l" : "border-l-0"
+              } ${idx === days.length - 1 ? "rounded-r" : ""}`}>
               {day}
             </button>
+          )
         )}
       </div>
-    </div>);
+    </div>
-}
+  );
+};

components/ui/modal/SetTimesModal.tsx

@@ -1,14 +1,20 @@
 import { ClockIcon } from "@heroicons/react/outline";
 import { useRef } from "react";
 import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/utc";
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 export default function SetTimesModal(props) {
-
   const { startDate, endDate } = props.schedule || {
-    startDate: dayjs().startOf('day').add(540, 'minutes'),
+    startDate: dayjs.utc().startOf("day").add(540, "minutes"),
-    endDate: dayjs().startOf('day').add(1020, 'minutes'),
+    endDate: dayjs.utc().startOf("day").add(1020, "minutes"),
   };
 
+  startDate.tz(props.timeZone);
+  endDate.tz(props.timeZone);
+
   const startHoursRef = useRef<HTMLInputElement>();
   const startMinsRef = useRef<HTMLInputElement>();
   const endHoursRef = useRef<HTMLInputElement>();
@@ -31,17 +37,21 @@ export default function SetTimesModal(props) {
   }
 
   return (
-    <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <div
+      className="fixed z-10 inset-0 overflow-y-auto"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true">
       <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
         <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
 
-        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+          &#8203;
+        </span>
 
-        <div
+        <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-          className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
           <div className="sm:flex sm:items-start mb-4">
-            <div
+            <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-              className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
               <ClockIcon className="h-6 w-6 text-blue-600" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
@@ -49,42 +59,86 @@ export default function SetTimesModal(props) {
                 Change when you are available for bookings
               </h3>
               <div>
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-gray-500">Set your work schedule</p>
-                  Set your work schedule
-                </p>
               </div>
             </div>
           </div>
           <div className="flex mb-4">
             <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">Start time</label>
             <div>
-              <label htmlFor="startHours" className="sr-only">Hours</label>
+              <label htmlFor="startHours" className="sr-only">
-              <input ref={startHoursRef} type="number" min="0" max="23" maxLength="2"  name="hours" id="startHours"
+                Hours
+              </label>
+              <input
+                ref={startHoursRef}
+                type="number"
+                min="0"
+                max="23"
+                maxLength="2"
+                name="hours"
+                id="startHours"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                     placeholder="9" defaultValue={startDate.format('H')} />
+                placeholder="9"
+                defaultValue={startDate.format("H")}
+              />
             </div>
             <span className="mx-2 pt-1">:</span>
             <div>
-              <label htmlFor="startMinutes" className="sr-only">Minutes</label>
+              <label htmlFor="startMinutes" className="sr-only">
-              <input ref={startMinsRef} type="number" min="0" max="59" step="15" maxLength="2" name="minutes" id="startMinutes"
+                Minutes
+              </label>
+              <input
+                ref={startMinsRef}
+                type="number"
+                min="0"
+                max="59"
+                step="15"
+                maxLength="2"
+                name="minutes"
+                id="startMinutes"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                     placeholder="30" defaultValue={startDate.format('m')} />
+                placeholder="30"
+                defaultValue={startDate.format("m")}
+              />
             </div>
           </div>
           <div className="flex">
             <label className="w-1/4 pt-2 block text-sm font-medium text-gray-700">End time</label>
             <div>
-              <label htmlFor="endHours" className="sr-only">Hours</label>
+              <label htmlFor="endHours" className="sr-only">
-              <input ref={endHoursRef} type="number" min="0" max="23" maxLength="2" name="hours" id="endHours"
+                Hours
+              </label>
+              <input
+                ref={endHoursRef}
+                type="number"
+                min="0"
+                max="24"
+                maxLength="2"
+                name="hours"
+                id="endHours"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                     placeholder="17" defaultValue={endDate.format('H')} />
+                placeholder="17"
+                defaultValue={endDate.format("H")}
+              />
             </div>
             <span className="mx-2 pt-1">:</span>
             <div>
-              <label htmlFor="endMinutes" className="sr-only">Minutes</label>
+              <label htmlFor="endMinutes" className="sr-only">
-              <input ref={endMinsRef} type="number" min="0" max="59" maxLength="2" step="15" name="minutes" id="endMinutes"
+                Minutes
+              </label>
+              <input
+                ref={endMinsRef}
+                type="number"
+                min="0"
+                max="59"
+                maxLength="2"
+                step="15"
+                name="minutes"
+                id="endMinutes"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                     placeholder="30" defaultValue={endDate.format('m')} />
+                placeholder="30"
+                defaultValue={endDate.format("m")}
+              />
             </div>
           </div>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
@@ -97,5 +151,6 @@ export default function SetTimesModal(props) {
           </div>
         </div>
       </div>
-    </div>);
+    </div>
+  );
 }

lib/slots.ts

@@ -1,94 +1,108 @@
-const dayjs = require("dayjs");
+import dayjs, { Dayjs } from "dayjs";
-
+import utc from "dayjs/plugin/utc";
-const isToday = require("dayjs/plugin/isToday");
-const utc = require("dayjs/plugin/utc");
-const timezone = require("dayjs/plugin/timezone");
-
-dayjs.extend(isToday);
 dayjs.extend(utc);
-dayjs.extend(timezone);
 
-const getMinutesFromMidnight = (date) => {
+interface GetSlotsType {
-  return date.hour() * 60 + date.minute();
+  inviteeDate: Dayjs;
+  frequency: number;
+  workingHours: { [WeekDay]: Boundary[] };
+  minimumBookingNotice?: number;
+}
+
+interface Boundary {
+  lowerBound: number;
+  upperBound: number;
+}
+
+const freqApply: number = (cb, value: number, frequency: number): number => cb(value / frequency) * frequency;
+
+const intersectBoundary = (a: Boundary, b: Boundary) => {
+  if (a.upperBound < b.lowerBound || a.lowerBound > b.upperBound) {
+    return;
+  }
+  return {
+    lowerBound: Math.max(b.lowerBound, a.lowerBound),
+    upperBound: Math.min(b.upperBound, a.upperBound),
+  };
 };
 
-const getSlots = ({
+// say invitee is -60,1380, and boundary is -120,240 - the overlap is -60,240
-  calendarTimeZone,
+const getOverlaps = (inviteeBoundary: Boundary, boundaries: Boundary[]) =>
-  eventLength,
+  boundaries.map((boundary) => intersectBoundary(inviteeBoundary, boundary)).filter(Boolean);
-  selectedTimeZone,
-  selectedDate,
-  dayStartTime,
-  dayEndTime
-}) => {
 
-  if(!selectedDate) return []
+const organizerBoundaries = (workingHours: [], inviteeDate: Dayjs, inviteeBounds: Boundary): Boundary[] => {
+  const boundaries: Boundary[] = [];
 
-  const lowerBound = selectedDate.tz(selectedTimeZone).startOf("day");
+  const startDay: number = +inviteeDate
-
+    .utc()
-  // Simple case, same timezone
-  if (calendarTimeZone === selectedTimeZone) {
-    const slots = [];
-    const now = dayjs();
-    for (
-      let minutes = dayStartTime;
-      minutes <= dayEndTime - eventLength;
-      minutes += parseInt(eventLength, 10)
-    ) {
-      const slot = lowerBound.add(minutes, "minutes");
-      if (slot > now) {
-        slots.push(slot);
-      }
-    }
-    return slots;
-  }
-
-  const upperBound = selectedDate.tz(selectedTimeZone).endOf("day");
-
-  // We need to start generating slots from the start of the calendarTimeZone day
-  const startDateTime = lowerBound
-    .tz(calendarTimeZone)
     .startOf("day")
-    .add(dayStartTime, "minutes");
+    .add(inviteeBounds.lowerBound, "minutes")
+    .format("d");
+  const endDay: number = +inviteeDate
+    .utc()
+    .startOf("day")
+    .add(inviteeBounds.upperBound, "minutes")
+    .format("d");
 
-  let phase = 0;
+  workingHours.forEach((item) => {
-  if (startDateTime < lowerBound) {
+    const lowerBound: number = item.startTime;
-    // Getting minutes of the first event in the day of the chooser
+    const upperBound: number = lowerBound + item.length;
-    const diff = lowerBound.diff(startDateTime, "minutes");
+    if (startDay !== endDay) {
-
+      if (inviteeBounds.lowerBound < 0) {
-    // finding first event
+        // lowerBound edges into the previous day
-    phase = diff + eventLength - (diff % eventLength);
+        if (item.days.includes(startDay)) {
+          boundaries.push({ lowerBound: lowerBound - 1440, upperBound: upperBound - 1440 });
         }
-
+        if (item.days.includes(endDay)) {
-  // We can stop as soon as the selectedTimeZone day ends
+          boundaries.push({ lowerBound, upperBound });
-  const endDateTime = upperBound
-    .tz(calendarTimeZone)
-    .subtract(eventLength, "minutes");
-
-  const maxMinutes = endDateTime.diff(startDateTime, "minutes");
-
-  const slots = [];
-  const now = dayjs();
-  for (
-    let minutes = phase;
-    minutes <= maxMinutes;
-    minutes += parseInt(eventLength, 10)
-  ) {
-    const slot = startDateTime.add(minutes, "minutes");
-
-    const minutesFromMidnight = getMinutesFromMidnight(slot);
-
-    if (
-      minutesFromMidnight < dayStartTime ||
-      minutesFromMidnight > dayEndTime - eventLength ||
-      slot < now
-    ) {
-      continue;
         }
-
+      } else {
-    slots.push(slot.tz(selectedTimeZone));
+        // upperBound edges into the next day
+        if (item.days.includes(endDay)) {
+          boundaries.push({ lowerBound: lowerBound + 1440, upperBound: upperBound + 1440 });
         }
+        if (item.days.includes(startDay)) {
+          boundaries.push({ lowerBound, upperBound });
+        }
+      }
+    } else {
+      boundaries.push({ lowerBound, upperBound });
+    }
+  });
+  return boundaries;
+};
 
+const inviteeBoundary = (startTime: number, utcOffset: number, frequency: number): Boundary => {
+  const upperBound: number = freqApply(Math.floor, 1440 - utcOffset, frequency);
+  const lowerBound: number = freqApply(Math.ceil, startTime - utcOffset, frequency);
+  return {
+    lowerBound,
+    upperBound,
+  };
+};
+
+const getSlotsBetweenBoundary = (frequency: number, { lowerBound, upperBound }: Boundary) => {
+  const slots: Dayjs[] = [];
+  for (let minutes = 0; lowerBound + minutes <= upperBound - frequency; minutes += frequency) {
+    slots.push(
+      <Dayjs>dayjs
+        .utc()
+        .startOf("day")
+        .add(lowerBound + minutes, "minutes")
+    );
+  }
   return slots;
 };
 
-export default getSlots
+const getSlots = ({ inviteeDate, frequency, minimumBookingNotice, workingHours }: GetSlotsType): Dayjs[] => {
+  const startTime = dayjs.utc().isSame(dayjs(inviteeDate), "day")
+    ? inviteeDate.hour() * 60 + inviteeDate.minute() + minimumBookingNotice
+    : 0;
+
+  const inviteeBounds = inviteeBoundary(startTime, inviteeDate.utcOffset(), frequency);
+  return getOverlaps(inviteeBounds, organizerBoundaries(workingHours, inviteeDate, inviteeBounds))
+    .reduce((slots, boundary: Boundary) => [...slots, ...getSlotsBetweenBoundary(frequency, boundary)], [])
+    .map((slot) => slot.utcOffset(dayjs(inviteeDate).utcOffset()));
+};
+
+export default getSlots;

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest",
     "build": "next build",
     "start": "next start",
     "postinstall": "prisma generate",
@@ -36,6 +37,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@types/jest": "^26.0.23",
     "@types/node": "^14.14.33",
     "@types/react": "^17.0.3",
     "@typescript-eslint/eslint-plugin": "^4.27.0",
@@ -47,7 +49,9 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
+    "jest": "^27.0.5",
     "lint-staged": "^11.0.0",
+    "mockdate": "^3.0.5",
     "postcss": "^8.2.8",
     "prettier": "^2.3.1",
     "prisma": "^2.23.0",
@@ -59,5 +63,19 @@
       "prettier --write",
       "eslint"
     ]
+  },
+  "jest": {
+    "verbose": true,
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleFileExtensions": [
+      "js",
+      "ts"
+    ],
+    "moduleNameMapper": {
+      "^@components(.*)$": "<rootDir>/components$1",
+      "^@lib(.*)$": "<rootDir>/lib$1"
+    }
   }
 }

pages/[user]/[type].tsx

@@ -1,58 +1,64 @@
-import {useEffect, useState, useMemo} from 'react';
+import { useEffect, useState, useMemo } from "react";
-import Head from 'next/head';
+import Head from "next/head";
-import Link from 'next/link';
+import prisma from "../../lib/prisma";
-import prisma from '../../lib/prisma';
+import dayjs, { Dayjs } from "dayjs";
-import dayjs, { Dayjs } from 'dayjs';
+import { ClockIcon, GlobeIcon, ChevronDownIcon } from "@heroicons/react/solid";
-import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import utc from "dayjs/plugin/utc";
-import utc from 'dayjs/plugin/utc';
+import timezone from "dayjs/plugin/timezone";
-import timezone from 'dayjs/plugin/timezone';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
 import AvailableTimes from "../../components/booking/AvailableTimes";
-import TimeOptions from "../../components/booking/TimeOptions"
+import TimeOptions from "../../components/booking/TimeOptions";
-import Avatar from '../../components/Avatar';
+import Avatar from "../../components/Avatar";
 import { timeZone } from "../../lib/clock";
 import DatePicker from "../../components/booking/DatePicker";
 import PoweredByCalendso from "../../components/ui/PoweredByCalendso";
 import { useRouter } from "next/router";
+import getSlots from "@lib/slots";
 
 export default function Type(props) {
-
-  // Get router variables
   const router = useRouter();
   const { rescheduleUid } = router.query;
 
-  // Initialise state
   const [selectedDate, setSelectedDate] = useState<Dayjs>();
-  const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
   const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
-  const [timeFormat, setTimeFormat] = useState('h:mma');
+  const [timeFormat, setTimeFormat] = useState("h:mma");
   const telemetry = useTelemetry();
 
+  const today: string = dayjs().utc().format("YYYY-MM-DDTHH:mm");
+  const noSlotsToday = useMemo(
+    () =>
+      getSlots({
+        frequency: props.eventType.length,
+        inviteeDate: dayjs.utc(today) as Dayjs,
+        workingHours: props.workingHours,
+        minimumBookingNotice: 0,
+      }).length === 0,
+    [today, props.eventType.length, props.workingHours]
+  );
+
   useEffect(() => {
-    telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()))
+    telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()));
-  }, []);
+  }, [telemetry]);
 
   const changeDate = (date: Dayjs) => {
-    telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()))
+    telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()));
     setSelectedDate(date);
   };
 
   const handleSelectTimeZone = (selectedTimeZone: string) => {
     if (selectedDate) {
-      setSelectedDate(selectedDate.tz(selectedTimeZone))
+      setSelectedDate(selectedDate.tz(selectedTimeZone));
     }
   };
 
   const handleToggle24hClock = (is24hClock: boolean) => {
-    if (selectedDate) {
+    setTimeFormat(is24hClock ? "HH:mm" : "h:mma");
-      setTimeFormat(is24hClock ? 'HH:mm' : 'h:mma');
+  };
-    }
-  }
 
   return (
     <div>
@@ -67,40 +73,47 @@ export default function Type(props) {
         className={
           "mx-auto my-24 transition-max-width ease-in-out duration-500 " +
           (selectedDate ? "max-w-6xl" : "max-w-3xl")
-        }
+        }>
-      >
         <div className="bg-white shadow rounded-lg">
           <div className="sm:flex px-4 py-5 sm:p-4">
-            <div
+            <div className={"pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")}>
-              className={
-                "pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
-              }
-            >
               <Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
               <h2 className="font-medium text-gray-500">{props.user.name}</h2>
-              <h1 className="text-3xl font-semibold text-gray-800 mb-4">
+              <h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
-                {props.eventType.title}
-              </h1>
               <p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
                 <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                 {props.eventType.length} minutes
               </p>
               <button
                 onClick={() => setIsTimeOptionsOpen(true)}
-                className="text-gray-500 mb-1 px-2 py-1 -ml-2"
+                className="text-gray-500 mb-1 px-2 py-1 -ml-2">
-              >
                 <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                 {timeZone()}
                 <ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
               </button>
-            { isTimeOptionsOpen && <TimeOptions onSelectTimeZone={handleSelectTimeZone}
+              {isTimeOptionsOpen && (
-                                                onToggle24hClock={handleToggle24hClock} />}
+                <TimeOptions
-            <p className="text-gray-600 mt-3 mb-8">
+                  onSelectTimeZone={handleSelectTimeZone}
-              {props.eventType.description}
+                  onToggle24hClock={handleToggle24hClock}
-            </p>
+                />
+              )}
+              <p className="text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
             </div>
-            <DatePicker weekStart={props.user.weekStart} onDatePicked={changeDate} />
+            <DatePicker
-            {selectedDate && <AvailableTimes timeFormat={timeFormat} user={props.user} eventType={props.eventType} date={selectedDate} />}
+              disableToday={noSlotsToday}
+              weekStart={props.user.weekStart}
+              onDatePicked={changeDate}
+              workingHours={props.workingHours}
+            />
+            {selectedDate && (
+              <AvailableTimes
+                workingHours={props.workingHours}
+                timeFormat={timeFormat}
+                eventLength={props.eventType.length}
+                eventTypeId={props.eventType.id}
+                date={selectedDate}
+              />
+            )}
           </div>
         </div>
         {/* note(peer):
@@ -112,6 +125,14 @@ export default function Type(props) {
   );
 }
 
+interface WorkingHours {
+  days: number[];
+  startTime: number;
+  length: number;
+}
+
+type Availability = WorkingHours;
+
 export async function getServerSideProps(context) {
   const user = await prisma.user.findFirst({
     where: {
@@ -129,13 +150,14 @@ export async function getServerSideProps(context) {
       timeZone: true,
       endTime: true,
       weekStart: true,
-    }
+      availability: true,
+    },
   });
 
   if (!user) {
     return {
       notFound: true,
-    }
+    };
   }
 
   const eventType = await prisma.eventType.findFirst({
@@ -149,20 +171,38 @@ export async function getServerSideProps(context) {
       id: true,
       title: true,
       description: true,
-      length: true
+      length: true,
-    }
+      availability: true,
+    },
   });
 
   if (!eventType) {
     return {
       notFound: true,
+    };
   }
-  }
+
+  const getWorkingHours = (providesAvailability) =>
+    providesAvailability.availability && providesAvailability.availability.length
+      ? providesAvailability.availability
+      : null;
+
+  const workingHours: WorkingHours[] =
+    getWorkingHours(eventType) ||
+    getWorkingHours(user) ||
+    [
+      {
+        days: [1, 2, 3, 4, 5, 6, 7],
+        startTime: user.startTime,
+        length: user.endTime,
+      },
+    ].filter((availability: Availability): boolean => typeof availability["days"] !== "undefined");
 
   return {
     props: {
       user,
       eventType,
+      workingHours,
     },
-  }
+  };
 }

pages/availability/event/[type].tsx

@@ -1,48 +1,44 @@
-import Head from 'next/head';
+import Head from "next/head";
-import Link from 'next/link';
+import Link from "next/link";
-import { useRouter } from 'next/router';
+import { useRouter } from "next/router";
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState } from "react";
-import Select, { OptionBase } from 'react-select';
+import Select, { OptionBase } from "react-select";
-import prisma from '../../../lib/prisma';
+import prisma from "../../../lib/prisma";
-import {LocationType} from '../../../lib/location';
+import { LocationType } from "../../../lib/location";
-import Shell from '../../../components/Shell';
+import Shell from "../../../components/Shell";
-import { useSession, getSession } from 'next-auth/client';
+import { getSession } from "next-auth/client";
 import { Scheduler } from "../../../components/ui/Scheduler";
 
-import {
+import { LocationMarkerIcon, PlusCircleIcon, XIcon, PhoneIcon } from "@heroicons/react/outline";
-  LocationMarkerIcon,
-  PlusCircleIcon,
-  XIcon,
-  PhoneIcon,
-} from '@heroicons/react/outline';
 import { EventTypeCustomInput, EventTypeCustomInputType } from "../../../lib/eventTypeInput";
 import { PlusIcon } from "@heroicons/react/solid";
 
-import dayjs, {Dayjs} from "dayjs";
+import dayjs from "dayjs";
-import utc from 'dayjs/plugin/utc';
+import utc from "dayjs/plugin/utc";
 dayjs.extend(utc);
-import timezone from 'dayjs/plugin/timezone';
+import timezone from "dayjs/plugin/timezone";
 dayjs.extend(timezone);
 
 export default function EventType(props) {
   const router = useRouter();
 
   const inputOptions: OptionBase[] = [
-      { value: EventTypeCustomInputType.Text, label: 'Text' },
+    { value: EventTypeCustomInputType.Text, label: "Text" },
-      { value: EventTypeCustomInputType.TextLong, label: 'Multiline Text' },
+    { value: EventTypeCustomInputType.TextLong, label: "Multiline Text" },
-      { value: EventTypeCustomInputType.Number, label: 'Number', },
+    { value: EventTypeCustomInputType.Number, label: "Number" },
-      { value: EventTypeCustomInputType.Bool, label: 'Checkbox', },
+    { value: EventTypeCustomInputType.Bool, label: "Checkbox" },
-    ]
+  ];
 
-    const [ session, loading ] = useSession();
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [showAddCustomModal, setShowAddCustomModal] = useState(false);
   const [selectedLocation, setSelectedLocation] = useState<OptionBase | undefined>(undefined);
   const [selectedInputOption, setSelectedInputOption] = useState<OptionBase>(inputOptions[0]);
   const [locations, setLocations] = useState(props.eventType.locations || []);
   const [schedule, setSchedule] = useState(undefined);
-    const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []);
+  const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
-    const locationOptions = props.locationOptions
+    props.eventType.customInputs.sort((a, b) => a.id - b.id) || []
+  );
+  const locationOptions = props.locationOptions;
 
   const titleRef = useRef<HTMLInputElement>();
   const slugRef = useRef<HTMLInputElement>();
@@ -51,10 +47,6 @@ export default function EventType(props) {
   const isHiddenRef = useRef<HTMLInputElement>();
   const eventNameRef = useRef<HTMLInputElement>();
 
-    if (loading) {
-        return <p className="text-gray-400">Loading...</p>;
-    }
-
   async function updateEventTypeHandler(event) {
     event.preventDefault();
 
@@ -66,60 +58,70 @@ export default function EventType(props) {
     const enteredEventName = eventNameRef.current.value;
     // TODO: Add validation
 
-        const response = await fetch('/api/availability/eventtype', {
+    await fetch("/api/availability/eventtype", {
-            method: 'PATCH',
+      method: "PATCH",
-            body: JSON.stringify({id: props.eventType.id, title: enteredTitle, slug: enteredSlug, description: enteredDescription, length: enteredLength, hidden: enteredIsHidden, locations, eventName: enteredEventName, customInputs }),
+      body: JSON.stringify({
+        id: props.eventType.id,
+        title: enteredTitle,
+        slug: enteredSlug,
+        description: enteredDescription,
+        length: enteredLength,
+        hidden: enteredIsHidden,
+        locations,
+        eventName: enteredEventName,
+        customInputs,
+      }),
       headers: {
-                'Content-Type': 'application/json'
+        "Content-Type": "application/json",
-            }
+      },
     });
 
     if (schedule) {
-
+      const schedulePayload = { overrides: [], timeZone: props.user.timeZone, openingHours: [] };
-          let schedulePayload = { "overrides": [], "timeZone": props.user.timeZone, "openingHours": [] };
       schedule.forEach((item) => {
         if (item.isOverride) {
           delete item.isOverride;
           schedulePayload.overrides.push(item);
         } else {
+          const endTime = item.endDate.hour() * 60 + item.endDate.minute() || 1440; // also handles 00:00
           schedulePayload.openingHours.push({
             days: item.days,
-                startTime: item.startDate.hour() * 60 + item.startDate.minute(),
+            startTime: item.startDate.hour() * 60 + item.startDate.minute() - item.startDate.utcOffset(),
-                endTime: item.endDate.hour() * 60 + item.endDate.minute()
+            endTime: endTime - item.endDate.utcOffset(),
           });
         }
       });
 
-          const response = await fetch('/api/availability/schedule/' + props.eventType.id, {
+      await fetch("/api/availability/schedule/" + props.eventType.id, {
-            method: 'PUT',
+        method: "PUT",
         body: JSON.stringify(schedulePayload),
         headers: {
-              'Content-Type': 'application/json'
+          "Content-Type": "application/json",
-            }
+        },
       });
     }
 
-        router.push('/availability');
+    router.push("/availability");
   }
 
   async function deleteEventTypeHandler(event) {
     event.preventDefault();
 
-        const response = await fetch('/api/availability/eventtype', {
+    await fetch("/api/availability/eventtype", {
-            method: 'DELETE',
+      method: "DELETE",
       body: JSON.stringify({ id: props.eventType.id }),
       headers: {
-                'Content-Type': 'application/json'
+        "Content-Type": "application/json",
-            }
+      },
     });
 
-        router.push('/availability');
+    router.push("/availability");
   }
 
   const openLocationModal = (type: LocationType) => {
     setSelectedLocation(locationOptions.find((option) => option.value === type));
     setShowLocationModal(true);
-    }
+  };
 
   const closeLocationModal = () => {
     setSelectedLocation(undefined);
@@ -136,27 +138,32 @@ export default function EventType(props) {
       return null;
     }
     switch (selectedLocation.value) {
-            case LocationType.InPerson:
+      case LocationType.InPerson: {
-                const address = locations.find(
+        const address = locations.find((location) => location.type === LocationType.InPerson)?.address;
-                    (location) => location.type === LocationType.InPerson
-                )?.address;
         return (
           <div>
-                        <label htmlFor="address" className="block text-sm font-medium text-gray-700">Set an address or place</label>
+            <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+              Set an address or place
+            </label>
             <div className="mt-1">
-                            <input type="text" name="address" id="address" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" defaultValue={address} />
+              <input
+                type="text"
+                name="address"
+                id="address"
+                required
+                className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                defaultValue={address}
+              />
             </div>
           </div>
-                )
+        );
+      }
       case LocationType.Phone:
-
         return (
           <p className="text-sm">Calendso will ask your invitee to enter a phone number before scheduling.</p>
-                )
+        );
       case LocationType.GoogleMeet:
-                 return (
+        return <p className="text-sm">Calendso will provide a Google Meet location.</p>;
-                    <p className="text-sm">Calendso will provide a Google Meet location.</p>
-                )
     }
     return null;
   };
@@ -171,7 +178,7 @@ export default function EventType(props) {
 
     const existingIdx = locations.findIndex((loc) => e.target.location.value === loc.type);
     if (existingIdx !== -1) {
-            let copy = locations;
+      const copy = locations;
       copy[existingIdx] = { ...locations[existingIdx], ...details };
       setLocations(copy);
     } else {
@@ -191,7 +198,7 @@ export default function EventType(props) {
     const customInput: EventTypeCustomInput = {
       label: e.target.label.value,
       required: e.target.required.checked,
-        type: e.target.type.value
+      type: e.target.type.value,
     };
 
     setCustomInputs(customInputs.concat(customInput));
@@ -205,20 +212,33 @@ export default function EventType(props) {
         <title>{props.eventType.title} | Event Type | Calendso</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-        <Shell heading={'Event Type - ' + props.eventType.title}>
+      <Shell heading={"Event Type - " + props.eventType.title}>
         <div className="grid grid-cols-3 gap-4">
           <div className="col-span-3 sm:col-span-2">
             <div className="bg-white overflow-hidden shadow rounded-lg mb-4">
               <div className="px-4 py-5 sm:p-6">
                 <form onSubmit={updateEventTypeHandler}>
                   <div className="mb-4">
-                      <label htmlFor="title" className="block text-sm font-medium text-gray-700">Title</label>
+                    <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+                      Title
+                    </label>
                     <div className="mt-1">
-                        <input ref={titleRef} type="text" name="title" id="title" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Quick Chat" defaultValue={props.eventType.title} />
+                      <input
+                        ref={titleRef}
+                        type="text"
+                        name="title"
+                        id="title"
+                        required
+                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        placeholder="Quick Chat"
+                        defaultValue={props.eventType.title}
+                      />
                     </div>
                   </div>
                   <div className="mb-4">
-                      <label htmlFor="slug" className="block text-sm font-medium text-gray-700">URL</label>
+                    <label htmlFor="slug" className="block text-sm font-medium text-gray-700">
+                      URL
+                    </label>
                     <div className="mt-1">
                       <div className="flex rounded-md shadow-sm">
                         <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
@@ -237,8 +257,11 @@ export default function EventType(props) {
                     </div>
                   </div>
                   <div className="mb-4">
-                      <label htmlFor="location" className="block text-sm font-medium text-gray-700">Location</label>
+                    <label htmlFor="location" className="block text-sm font-medium text-gray-700">
-                      {locations.length === 0 && <div className="mt-1 mb-2">
+                      Location
+                    </label>
+                    {locations.length === 0 && (
+                      <div className="mt-1 mb-2">
                         <div className="flex rounded-md shadow-sm">
                           <Select
                             name="location"
@@ -249,8 +272,10 @@ export default function EventType(props) {
                             onChange={(e) => openLocationModal(e.value)}
                           />
                         </div>
-                      </div>}
+                      </div>
-                      {locations.length > 0 && <ul className="w-96 mt-1">
+                    )}
+                    {locations.length > 0 && (
+                      <ul className="w-96 mt-1">
                         {locations.map((location) => (
                           <li key={location.type} className="bg-blue-50 mb-2 p-2 border">
                             <div className="flex justify-between">
@@ -268,12 +293,29 @@ export default function EventType(props) {
                               )}
                               {location.type === LocationType.GoogleMeet && (
                                 <div className="flex-grow flex">
-                                  <svg className="h-6 w-6" stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M12 0C6.28 0 1.636 4.641 1.636 10.364c0 5.421 4.945 9.817 10.364 9.817V24c6.295-3.194 10.364-8.333 10.364-13.636C22.364 4.64 17.72 0 12 0zM7.5 6.272h6.817a1.363 1.363 0 0 1 1.365 1.365v1.704l2.728-2.727v7.501l-2.726-2.726v1.703a1.362 1.362 0 0 1-1.365 1.365H7.5c-.35 0-.698-.133-.965-.4a1.358 1.358 0 0 1-.4-.965V7.637A1.362 1.362 0 0 1 7.5 6.272Z"></path></svg>
+                                  <svg
+                                    className="h-6 w-6"
+                                    stroke="currentColor"
+                                    fill="currentColor"
+                                    strokeWidth="0"
+                                    role="img"
+                                    viewBox="0 0 24 24"
+                                    height="1em"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <title></title>
+                                    <path d="M12 0C6.28 0 1.636 4.641 1.636 10.364c0 5.421 4.945 9.817 10.364 9.817V24c6.295-3.194 10.364-8.333 10.364-13.636C22.364 4.64 17.72 0 12 0zM7.5 6.272h6.817a1.363 1.363 0 0 1 1.365 1.365v1.704l2.728-2.727v7.501l-2.726-2.726v1.703a1.362 1.362 0 0 1-1.365 1.365H7.5c-.35 0-.698-.133-.965-.4a1.358 1.358 0 0 1-.4-.965V7.637A1.362 1.362 0 0 1 7.5 6.272Z"></path>
+                                  </svg>
                                   <span className="ml-2 text-sm">Google Meet</span>
                                 </div>
                               )}
                               <div className="flex">
-                                <button type="button" onClick={() => openLocationModal(location.type)} className="mr-2 text-sm text-blue-600">Edit</button>
+                                <button
+                                  type="button"
+                                  onClick={() => openLocationModal(location.type)}
+                                  className="mr-2 text-sm text-blue-600">
+                                  Edit
+                                </button>
                                 <button onClick={() => removeLocation(location)}>
                                   <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
                                 </button>
@@ -281,37 +323,74 @@ export default function EventType(props) {
                             </div>
                           </li>
                         ))}
-                        {locations.length > 0 && locations.length !== locationOptions.length && <li>
+                        {locations.length > 0 && locations.length !== locationOptions.length && (
-                          <button type="button" className="sm:flex sm:items-start text-sm text-blue-600" onClick={() => setShowLocationModal(true)}>
+                          <li>
+                            <button
+                              type="button"
+                              className="sm:flex sm:items-start text-sm text-blue-600"
+                              onClick={() => setShowLocationModal(true)}>
                               <PlusCircleIcon className="h-6 w-6" />
                               <span className="ml-1">Add another location option</span>
                             </button>
-                        </li>}
+                          </li>
-                      </ul>}
+                        )}
+                      </ul>
+                    )}
                   </div>
                   <div className="mb-4">
-                      <label htmlFor="description" className="block text-sm font-medium text-gray-700">Description</label>
+                    <label htmlFor="description" className="block text-sm font-medium text-gray-700">
+                      Description
+                    </label>
                     <div className="mt-1">
-                        <textarea ref={descriptionRef} name="description" id="description" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="A quick video meeting." defaultValue={props.eventType.description}></textarea>
+                      <textarea
+                        ref={descriptionRef}
+                        name="description"
+                        id="description"
+                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        placeholder="A quick video meeting."
+                        defaultValue={props.eventType.description}></textarea>
                     </div>
                   </div>
                   <div className="mb-4">
-                      <label htmlFor="length" className="block text-sm font-medium text-gray-700">Length</label>
+                    <label htmlFor="length" className="block text-sm font-medium text-gray-700">
+                      Length
+                    </label>
                     <div className="mt-1 relative rounded-md shadow-sm">
-                        <input ref={lengthRef} type="number" name="length" id="length" required className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md" placeholder="15" defaultValue={props.eventType.length} />
+                      <input
+                        ref={lengthRef}
+                        type="number"
+                        name="length"
+                        id="length"
+                        required
+                        className="focus:ring-blue-500 focus:border-blue-500 block w-full pr-20 sm:text-sm border-gray-300 rounded-md"
+                        placeholder="15"
+                        defaultValue={props.eventType.length}
+                      />
                       <div className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 text-sm">
                         minutes
                       </div>
                     </div>
                   </div>
                   <div className="mb-4">
-                      <label htmlFor="eventName" className="block text-sm font-medium text-gray-700">Calendar entry name</label>
+                    <label htmlFor="eventName" className="block text-sm font-medium text-gray-700">
+                      Calendar entry name
+                    </label>
                     <div className="mt-1 relative rounded-md shadow-sm">
-                        <input ref={eventNameRef} type="text" name="title" id="title" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Meeting with {USER}" defaultValue={props.eventType.eventName} />
+                      <input
+                        ref={eventNameRef}
+                        type="text"
+                        name="title"
+                        id="title"
+                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        placeholder="Meeting with {USER}"
+                        defaultValue={props.eventType.eventName}
+                      />
                     </div>
                   </div>
                   <div className="mb-4">
-                      <label htmlFor="additionalFields" className="block text-sm font-medium text-gray-700">Additional Inputs</label>
+                    <label htmlFor="additionalFields" className="block text-sm font-medium text-gray-700">
+                      Additional Inputs
+                    </label>
                     <ul className="w-96 mt-1">
                       {customInputs.map((customInput) => (
                         <li key={customInput.type} className="bg-blue-50 mb-2 p-2 border">
@@ -324,16 +403,16 @@ export default function EventType(props) {
                                 <span className="ml-2 text-sm">Type: {customInput.type}</span>
                               </div>
                               <div>
-                                  <span
+                                <span className="ml-2 text-sm">
-                                    className="ml-2 text-sm">{customInput.required ? "Required" : "Optional"}</span>
+                                  {customInput.required ? "Required" : "Optional"}
+                                </span>
                               </div>
                             </div>
                             <div className="flex">
-                                <button type="button" onClick={() => {
+                              <button type="button" className="mr-2 text-sm text-blue-600">
-                                }} className="mr-2 text-sm text-blue-600">Edit
+                                Edit
                               </button>
-                                <button onClick={() => {
+                              <button>
-                                }}>
                                 <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
                               </button>
                             </div>
@@ -341,7 +420,10 @@ export default function EventType(props) {
                         </li>
                       ))}
                       <li>
-                            <button type="button" className="sm:flex sm:items-start text-sm text-blue-600" onClick={() => setShowAddCustomModal(true)}>
+                        <button
+                          type="button"
+                          className="sm:flex sm:items-start text-sm text-blue-600"
+                          onClick={() => setShowAddCustomModal(true)}>
                           <PlusCircleIcon className="h-6 w-6" />
                           <span className="ml-1">Add another input</span>
                         </button>
@@ -364,17 +446,27 @@ export default function EventType(props) {
                         <label htmlFor="ishidden" className="font-medium text-gray-700">
                           Hide this event type
                         </label>
-                          <p className="text-gray-500">Hide the event type from your page, so it can only be booked through it's URL.</p>
+                        <p className="text-gray-500">
+                          Hide the event type from your page, so it can only be booked through it&apos;s URL.
+                        </p>
                       </div>
                     </div>
                   </div>
                   <hr className="my-4" />
                   <div>
                     <h3 className="mb-2">How do you want to offer your availability for this event type?</h3>
-                      <Scheduler onChange={setSchedule} timeZone={props.user.timeZone} schedules={props.schedules} />
+                    <Scheduler
+                      onChange={setSchedule}
+                      timeZone={props.user.timeZone}
+                      schedules={props.schedules}
+                    />
                     <div className="py-4 flex justify-end">
-                        <Link href="/availability"><a className="mr-2 btn btn-white">Cancel</a></Link>
+                      <Link href="/availability">
-                        <button type="submit" className="btn btn-primary">Update</button>
+                        <a className="mr-2 btn btn-white">Cancel</a>
+                      </Link>
+                      <button type="submit" className="btn btn-primary">
+                        Update
+                      </button>
                     </div>
                   </div>
                 </form>
@@ -384,16 +476,15 @@ export default function EventType(props) {
           <div>
             <div className="bg-white shadow sm:rounded-lg">
               <div className="px-4 py-5 sm:p-6">
-                  <h3 className="text-lg mb-2 leading-6 font-medium text-gray-900">
+                <h3 className="text-lg mb-2 leading-6 font-medium text-gray-900">Delete this event type</h3>
-                    Delete this event type
-                  </h3>
                 <div className="mb-4 max-w-xl text-sm text-gray-500">
-                    <p>
+                  <p>Once you delete this event type, it will be permanently removed.</p>
-                      Once you delete this event type, it will be permanently removed.
-                    </p>
                 </div>
                 <div>
-                    <button onClick={deleteEventTypeHandler} type="button" className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
+                  <button
+                    onClick={deleteEventTypeHandler}
+                    type="button"
+                    className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm">
                     Delete event type
                   </button>
                 </div>
@@ -401,12 +492,20 @@ export default function EventType(props) {
             </div>
           </div>
         </div>
-          {showLocationModal &&
+        {showLocationModal && (
-          <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+          <div
+            className="fixed z-10 inset-0 overflow-y-auto"
+            aria-labelledby="modal-title"
+            role="dialog"
+            aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-              <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
+              <div
+                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                aria-hidden="true"></div>
 
-              <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+              <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+                &#8203;
+              </span>
 
               <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                 <div className="sm:flex sm:items-start mb-4">
@@ -414,7 +513,9 @@ export default function EventType(props) {
                     <LocationMarkerIcon className="h-6 w-6 text-blue-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">Edit location</h3>
+                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                      Edit location
+                    </h3>
                   </div>
                 </div>
                 <form onSubmit={updateLocations}>
@@ -439,13 +540,22 @@ export default function EventType(props) {
               </div>
             </div>
           </div>
-          }
+        )}
-          {showAddCustomModal &&
+        {showAddCustomModal && (
-          <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+          <div
+            className="fixed z-10 inset-0 overflow-y-auto"
+            aria-labelledby="modal-title"
+            role="dialog"
+            aria-modal="true">
             <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                  <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"/>
+              <div
+                className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                aria-hidden="true"
+              />
 
-                  <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+              <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+                &#8203;
+              </span>
 
               <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                 <div className="sm:flex sm:items-start mb-4">
@@ -453,7 +563,9 @@ export default function EventType(props) {
                     <PlusIcon className="h-6 w-6 text-blue-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                              <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add new custom input field</h3>
+                    <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                      Add new custom input field
+                    </h3>
                     <div>
                       <p className="text-sm text-gray-400">
                         This input will be shown when booking this event
@@ -463,7 +575,9 @@ export default function EventType(props) {
                 </div>
                 <form onSubmit={updateCustom}>
                   <div className="mb-2">
-                            <label htmlFor="type" className="block text-sm font-medium text-gray-700">Input type</label>
+                    <label htmlFor="type" className="block text-sm font-medium text-gray-700">
+                      Input type
+                    </label>
                     <Select
                       name="type"
                       defaultValue={selectedInputOption}
@@ -475,13 +589,27 @@ export default function EventType(props) {
                     />
                   </div>
                   <div className="mb-2">
-                              <label htmlFor="label" className="block text-sm font-medium text-gray-700">Label</label>
+                    <label htmlFor="label" className="block text-sm font-medium text-gray-700">
+                      Label
+                    </label>
                     <div className="mt-1">
-                                  <input type="text" name="label" id="label" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" />
+                      <input
+                        type="text"
+                        name="label"
+                        id="label"
+                        required
+                        className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                      />
                     </div>
                   </div>
                   <div className="flex items-center h-5">
-                              <input id="required" name="required" type="checkbox" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" defaultChecked={true}/>
+                    <input
+                      id="required"
+                      name="required"
+                      type="checkbox"
+                      className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
+                      defaultChecked={true}
+                    />
                     <label htmlFor="required" className="block text-sm font-medium text-gray-700">
                       Is required
                     </label>
@@ -499,7 +627,7 @@ export default function EventType(props) {
               </div>
             </div>
           </div>
-          }
+        )}
       </Shell>
     </div>
   );
@@ -511,15 +639,16 @@ const validJson = (jsonString: string) => {
     if (o && typeof o === "object") {
       return o;
     }
+  } catch (e) {
+    // no longer empty
   }
-  catch (e) {}
   return false;
-}
+};
 
 export async function getServerSideProps(context) {
   const session = await getSession(context);
   if (!session) {
-      return { redirect: { permanent: false, destination: '/auth/login' } };
+    return { redirect: { permanent: false, destination: "/auth/login" } };
   }
 
   const user = await prisma.user.findFirst({
@@ -532,7 +661,7 @@ export async function getServerSideProps(context) {
       startTime: true,
       endTime: true,
       availability: true,
-    }
+    },
   });
 
   const eventType = await prisma.eventType.findUnique({
@@ -549,8 +678,8 @@ export async function getServerSideProps(context) {
       locations: true,
       eventName: true,
       availability: true,
-      customInputs: true
+      customInputs: true,
-    }
+    },
   });
 
   const credentials = await prisma.credential.findMany({
@@ -560,75 +689,68 @@ export async function getServerSideProps(context) {
     select: {
       id: true,
       type: true,
-            key: true
+      key: true,
-        }
+    },
   });
 
-    const integrations = [ {
+  const integrations = [
+    {
       installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)),
       enabled: credentials.find((integration) => integration.type === "google_calendar") != null,
       type: "google_calendar",
       title: "Google Calendar",
       imageSrc: "integrations/google-calendar.png",
       description: "For personal and business accounts",
-    }, {
+    },
+    {
       installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET),
       type: "office365_calendar",
       enabled: credentials.find((integration) => integration.type === "office365_calendar") != null,
       title: "Office 365 / Outlook.com Calendar",
       imageSrc: "integrations/office-365.png",
       description: "For personal and business accounts",
-    } ];
+    },
-
-    let locationOptions: OptionBase[] = [
-        { value: LocationType.InPerson, label: 'In-person meeting' },
-        { value: LocationType.Phone, label: 'Phone call', },
   ];
 
-      const hasGoogleCalendarIntegration = integrations.find((i) => i.type === "google_calendar" && i.installed === true && i.enabled)
+  const locationOptions: OptionBase[] = [
+    { value: LocationType.InPerson, label: "In-person meeting" },
+    { value: LocationType.Phone, label: "Phone call" },
+  ];
+
+  const hasGoogleCalendarIntegration = integrations.find(
+    (i) => i.type === "google_calendar" && i.installed === true && i.enabled
+  );
   if (hasGoogleCalendarIntegration) {
-        locationOptions.push( { value: LocationType.GoogleMeet, label: 'Google Meet' })
+    locationOptions.push({ value: LocationType.GoogleMeet, label: "Google Meet" });
   }
 
-      const hasOfficeIntegration = integrations.find((i) => i.type === "office365_calendar" && i.installed === true && i.enabled)
+  const hasOfficeIntegration = integrations.find(
+    (i) => i.type === "office365_calendar" && i.installed === true && i.enabled
+  );
   if (hasOfficeIntegration) {
     // TODO: Add default meeting option of the office integration.
     // Assuming it's Microsoft Teams.
   }
 
-    const eventType = await prisma.eventType.findUnique({
-        where: {
-          id: parseInt(context.query.type),
-        },
-        select: {
-            id: true,
-            title: true,
-            slug: true,
-            description: true,
-            length: true,
-            hidden: true,
-            locations: true,
-            eventName: true,
-            customInputs: true,
-            availability: true,
-        }
-    });
-
   if (!eventType) {
     return {
       notFound: true,
-    }
+    };
   }
 
-  const getAvailability = (providesAvailability) => (
+  const getAvailability = (providesAvailability) =>
     providesAvailability.availability && providesAvailability.availability.length
-  ) ? providesAvailability.availability : null;
+      ? providesAvailability.availability
+      : null;
 
-  const schedules = getAvailability(eventType) || getAvailability(user) || [ {
+  const schedules = getAvailability(eventType) ||
+    getAvailability(user) || [
+      {
         days: [1, 2, 3, 4, 5, 6, 7],
         startTime: user.startTime,
         length: user.endTime >= 1440 ? 1439 : user.endTime,
-  } ];
+      },
+    ];
 
   return {
     props: {
@@ -637,5 +759,5 @@ export async function getServerSideProps(context) {
       schedules,
       locationOptions,
     },
-  }
+  };
 }

test/lib/slots.test.ts

@@ -0,0 +1,39 @@
+import getSlots from '@lib/slots';
+import {it, expect} from '@jest/globals';
+import MockDate from 'mockdate';
+import dayjs, {Dayjs} from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+MockDate.set('2021-06-20T12:00:00Z');
+
+it('can fit 24 hourly slots for an empty day', async () => {
+  // 24h in a day.
+  expect(getSlots({
+    inviteeDate: dayjs().add(1, 'day'),
+    length: 60,
+  })).toHaveLength(24);
+});
+
+it('has slots that be in the same timezone as the invitee', async() => {
+  expect(getSlots({
+    inviteeDate: dayjs().add(1, 'day'),
+    length: 60
+  })[0].utcOffset()).toBe(-0);
+
+  expect(getSlots({
+    inviteeDate: dayjs().tz('Europe/London').add(1, 'day'),
+    length: 60
+  })[0].utcOffset()).toBe(dayjs().tz('Europe/London').utcOffset());
+})
+
+it('excludes slots that have already passed when invitee day equals today', async () => {
+  expect(getSlots({ inviteeDate: dayjs(), length: 60 })).toHaveLength(12);
+});
+
+it('supports having slots in different utc offset than the invitee', async () => {
+  expect(getSlots({ inviteeDate: dayjs(), length: 60 })).toHaveLength(12);
+  expect(getSlots({ inviteeDate: dayjs().tz('Europe/Brussels'), length: 60 })).toHaveLength(14);
+});

tsconfig.json

@@ -6,6 +6,11 @@
       "dom.iterable",
       "esnext"
     ],
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["components/*"],
+      "@lib/*": ["lib/*"]
+    },
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,