Fixes #347 & some other minor things when timezones differ

components/booking/AvailableTimes.tsx

@@ -3,10 +3,25 @@ import { useRouter } from "next/router";
 import Slots from "./Slots";
 import { ExclamationIcon } from "@heroicons/react/solid";
 
-const AvailableTimes = ({ date, eventLength, eventTypeId, workingHours, timeFormat, user }) => {
+const AvailableTimes = ({
+  date,
+  eventLength,
+  eventTypeId,
+  workingHours,
+  timeFormat,
+  user,
+  organizerTimeZone,
+}) => {
   const router = useRouter();
   const { rescheduleUid } = router.query;
-  const { slots, isFullyBooked, hasErrors } = Slots({ date, eventLength, workingHours });
+
+  const { slots, isFullyBooked, hasErrors } = Slots({
+    date,
+    eventLength,
+    workingHours,
+    organizerTimeZone,
+  });
+
   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">

components/booking/Slots.tsx

@@ -1,10 +1,9 @@
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import getSlots from "../../lib/slots";
 import dayjs, { Dayjs } from "dayjs";
 import isBetween from "dayjs/plugin/isBetween";
 import utc from "dayjs/plugin/utc";
-
 dayjs.extend(isBetween);
 dayjs.extend(utc);
 
@@ -12,9 +11,11 @@ type Props = {
   eventLength: number;
   minimumBookingNotice?: number;
   date: Dayjs;
+  workingHours: [];
+  organizerTimeZone: string;
 };
 
-const Slots = ({ eventLength, minimumBookingNotice, date, workingHours, organizerUtcOffset }: Props) => {
+const Slots = ({ eventLength, minimumBookingNotice, date, workingHours, organizerTimeZone }: Props) => {
   minimumBookingNotice = minimumBookingNotice || 0;
 
   const router = useRouter();
@@ -48,7 +49,7 @@ const Slots = ({ eventLength, minimumBookingNotice, date, workingHours, organize
       inviteeDate: date,
       workingHours,
       minimumBookingNotice,
-      organizerUtcOffset,
+      organizerTimeZone,
     });
 
     const timesLengthBeforeConflicts: number = times.length;

lib/slots.ts

@@ -81,9 +81,12 @@ const organizerBoundaries = (
         }
       }
     } else {
+      if (item.days.includes(startDay)) {
         boundaries.push({ lowerBound, upperBound });
       }
+    }
   });
+
   return boundaries;
 };
 
@@ -116,7 +119,7 @@ const getSlots = ({
   workingHours,
   organizerTimeZone,
 }: GetSlots): Dayjs[] => {
-  const startTime = dayjs.utc().isSame(dayjs(inviteeDate), "day")
+  const startTime = dayjs().utcOffset(inviteeDate.utcOffset()).isSame(inviteeDate, "day")
     ? inviteeDate.hour() * 60 + inviteeDate.minute() + (minimumBookingNotice || 0)
     : 0;
 

pages/[user]/[type].tsx

@@ -134,6 +134,7 @@ export default function Type(props): Type {
               <AvailableTimes
                 workingHours={props.workingHours}
                 timeFormat={timeFormat}
+                organizerTimeZone={props.eventType.timeZone || props.user.timeZone}
                 eventLength={props.eventType.length}
                 eventTypeId={props.eventType.id}
                 date={selectedDate}