Implements slot logic with the DatePicker, more tests for slots

components/booking/DatePicker.tsx

@@ -1,13 +1,20 @@
 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);
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import getSlots from "@lib/slots";
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
-const DatePicker = ({ weekStart, onDatePicked, workingHours, disableToday }) => {
-  const workingDays = workingHours.reduce((workingDays: number[], wh) => [...workingDays, ...wh.days], []);
-  const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
-  const [selectedDate, setSelectedDate] = useState();
+const DatePicker = ({ weekStart, onDatePicked, workingHours, organizerTimeZone, inviteeTimeZone }) => {
+  const [calendar, setCalendar] = useState([]);
+  const [selectedMonth, setSelectedMonth]: number = useState();
+  const [selectedDate, setSelectedDate]: Dayjs = useState();
+
+  useEffect(() => {
+    setSelectedMonth(dayjs().tz(inviteeTimeZone).month());
+  }, []);
 
   useEffect(() => {
     if (selectedDate) onDatePicked(selectedDate);
@@ -22,69 +29,80 @@ const DatePicker = ({ weekStart, onDatePicked, workingHours, disableToday }) =>
     setSelectedMonth(selectedMonth - 1);
   };
 
-  // Set up calendar
-  const daysInMonth = dayjs().month(selectedMonth).daysInMonth();
-  const days = [];
-  for (let i = 1; i <= daysInMonth; i++) {
-    days.push(i);
-  }
+  useEffect(() => {
+    if (!selectedMonth) {
+      // wish next had a way of dealing with this magically;
+      return;
+    }
 
-  // Create placeholder elements for empty days in first week
-  let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
-  if (weekStart === "Monday") {
-    weekdayOfFirst -= 1;
-    if (weekdayOfFirst < 0) weekdayOfFirst = 6;
-  }
-  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 inviteeDate = dayjs().tz(inviteeTimeZone).month(selectedMonth);
 
-  const isDisabled = (day: number) => {
-    const date: Dayjs = dayjs().month(selectedMonth).date(day);
-    return (
-      date.isBefore(dayjs()) || !workingDays.includes(+date.format("d")) || (date.isToday() && disableToday)
-    );
-  };
+    const isDisabled = (day: number) => {
+      const date: Dayjs = inviteeDate.date(day);
+      return (
+        date.endOf("day").isBefore(dayjs().tz(inviteeTimeZone)) ||
+        !getSlots({
+          inviteeDate: date,
+          frequency: 30,
+          workingHours,
+          organizerTimeZone,
+        }).length
+      );
+    };
 
-  // Combine placeholder days with actual days
-  const calendar = [
-    ...emptyDays,
-    ...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) ||
-          isDisabled(day)
-        }
-        className={
-          "text-center w-10 h-10 rounded-full mx-auto" +
-          (isDisabled(day) ? " text-gray-400 font-light" : " text-blue-600 font-medium") +
-          (selectedDate && selectedDate.isSame(dayjs().month(selectedMonth).date(day), "day")
-            ? " bg-blue-600 text-white-important"
-            : !isDisabled(day)
-            ? " bg-blue-50"
-            : "")
-        }>
-        {day}
-      </button>
-    )),
-  ];
+    // Set up calendar
+    const daysInMonth = inviteeDate.daysInMonth();
+    const days = [];
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(i);
+    }
 
-  return (
+    // Create placeholder elements for empty days in first week
+    let weekdayOfFirst = inviteeDate.date(1).day();
+    if (weekStart === "Monday") {
+      weekdayOfFirst -= 1;
+      if (weekdayOfFirst < 0) weekdayOfFirst = 6;
+    }
+    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>
+      ));
+
+    // Combine placeholder days with actual days
+    setCalendar([
+      ...emptyDays,
+      ...days.map((day) => (
+        <button
+          key={day}
+          onClick={() => setSelectedDate(inviteeDate.date(day))}
+          disabled={isDisabled(day)}
+          className={
+            "text-center w-10 h-10 rounded-full mx-auto" +
+            (isDisabled(day) ? " text-gray-400 font-light" : " text-blue-600 font-medium") +
+            (selectedDate && selectedDate.isSame(inviteeDate.date(day), "day")
+              ? " bg-blue-600 text-white-important"
+              : !isDisabled(day)
+              ? " bg-blue-50"
+              : "")
+          }>
+          {day}
+        </button>
+      )),
+    ]);
+  }, [selectedMonth, inviteeTimeZone]);
+
+  return selectedMonth ? (
     <div className={"mt-8 sm:mt-0 " + (selectedDate ? "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">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
         <div className="w-1/2 text-right">
           <button
             onClick={decrementMonth}
-            className={"mr-4 " + (selectedMonth < parseInt(dayjs().format("MM")) && "text-gray-400")}
-            disabled={selectedMonth < parseInt(dayjs().format("MM"))}>
+            className={"mr-4 " + (selectedMonth <= dayjs().tz(inviteeTimeZone).month() && "text-gray-400")}
+            disabled={selectedMonth <= dayjs().tz(inviteeTimeZone).month()}>
             <ChevronLeftIcon className="w-5 h-5" />
           </button>
           <button onClick={incrementMonth}>
@@ -103,7 +121,7 @@ const DatePicker = ({ weekStart, onDatePicked, workingHours, disableToday }) =>
         {calendar}
       </div>
     </div>
-  );
+  ) : null;
 };
 
 export default DatePicker;

components/booking/TimeOptions.tsx

@@ -1,73 +1,72 @@
-import {Switch} from "@headlessui/react";
+import { Switch } from "@headlessui/react";
 import TimezoneSelect from "react-timezone-select";
-import {useEffect, useState} from "react";
-import {timeZone, is24h} from '../../lib/clock';
+import { useEffect, useState } from "react";
+import { timeZone, is24h } from "../../lib/clock";
 
 function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
+  return classes.filter(Boolean).join(" ");
 }
 
 const TimeOptions = (props) => {
-
-  const [selectedTimeZone, setSelectedTimeZone] = useState('');
+  const [selectedTimeZone, setSelectedTimeZone] = useState("");
   const [is24hClock, setIs24hClock] = useState(false);
 
-  useEffect( () => {
+  useEffect(() => {
     setIs24hClock(is24h());
     setSelectedTimeZone(timeZone());
   }, []);
 
-  useEffect( () => {
-    props.onSelectTimeZone(timeZone(selectedTimeZone));
+  useEffect(() => {
+    if (selectedTimeZone && timeZone() && selectedTimeZone !== timeZone()) {
+      props.onSelectTimeZone(timeZone(selectedTimeZone));
+    }
   }, [selectedTimeZone]);
 
-  useEffect( () => {
+  useEffect(() => {
     props.onToggle24hClock(is24h(is24hClock));
   }, [is24hClock]);
 
-  return selectedTimeZone !== "" && (
-    <div className="w-full rounded shadow border bg-white px-4 py-2">
-      <div className="flex mb-4">
-        <div className="w-1/2 font-medium">Time Options</div>
-        <div className="w-1/2">
-          <Switch.Group
-            as="div"
-            className="flex items-center justify-end"
-          >
-            <Switch.Label as="span" className="mr-3">
-              <span className="text-sm text-gray-500">am/pm</span>
-            </Switch.Label>
-            <Switch
-              checked={is24hClock}
-              onChange={setIs24hClock}
-              className={classNames(
-                is24hClock ? "bg-blue-600" : "bg-gray-200",
-                "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-              )}
-            >
-              <span className="sr-only">Use setting</span>
-              <span
-                aria-hidden="true"
+  return (
+    selectedTimeZone !== "" && (
+      <div className="w-full rounded shadow border bg-white px-4 py-2">
+        <div className="flex mb-4">
+          <div className="w-1/2 font-medium">Time Options</div>
+          <div className="w-1/2">
+            <Switch.Group as="div" className="flex items-center justify-end">
+              <Switch.Label as="span" className="mr-3">
+                <span className="text-sm text-gray-500">am/pm</span>
+              </Switch.Label>
+              <Switch
+                checked={is24hClock}
+                onChange={setIs24hClock}
                 className={classNames(
-                  is24hClock ? "translate-x-3" : "translate-x-0",
-                  "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-                )}
-              />
-            </Switch>
-            <Switch.Label as="span" className="ml-3">
-              <span className="text-sm text-gray-500">24h</span>
-            </Switch.Label>
-          </Switch.Group>
+                  is24hClock ? "bg-blue-600" : "bg-gray-200",
+                  "relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                )}>
+                <span className="sr-only">Use setting</span>
+                <span
+                  aria-hidden="true"
+                  className={classNames(
+                    is24hClock ? "translate-x-3" : "translate-x-0",
+                    "pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+                  )}
+                />
+              </Switch>
+              <Switch.Label as="span" className="ml-3">
+                <span className="text-sm text-gray-500">24h</span>
+              </Switch.Label>
+            </Switch.Group>
+          </div>
         </div>
+        <TimezoneSelect
+          id="timeZone"
+          value={selectedTimeZone}
+          onChange={(tz) => setSelectedTimeZone(tz.value)}
+          className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
+        />
       </div>
-      <TimezoneSelect
-        id="timeZone"
-        value={selectedTimeZone}
-        onChange={(tz) => setSelectedTimeZone(tz.value)}
-        className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
-      />
-    </div>
+    )
   );
-}
+};
 
-export default TimeOptions;
+export default TimeOptions;

components/ui/Scheduler.tsx

@@ -92,8 +92,6 @@ export const Scheduler = ({
     </li>
   );
 
-  console.log(selectedTimeZone);
-
   return (
     <div>
       <div className="rounded border flex">