From be102b1b09a4fdb6340c29d5e94fcc35b8a281e2 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Thu, 8 Jul 2021 21:14:29 +0000
Subject: [PATCH] Fixes #347 & some other minor things when timezones differ

---
 components/booking/AvailableTimes.tsx | 19 +++++++++++++++++--
 components/booking/Slots.tsx          |  9 +++++----
 lib/slots.ts                          |  7 +++++--
 pages/[user]/[type].tsx               |  1 +
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/components/booking/AvailableTimes.tsx b/components/booking/AvailableTimes.tsx
index bfa4a0cf..fa45e750 100644
--- a/components/booking/AvailableTimes.tsx
+++ b/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">
diff --git a/components/booking/Slots.tsx b/components/booking/Slots.tsx
index 1b4a8bfd..29ed9e72 100644
--- a/components/booking/Slots.tsx
+++ b/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;
diff --git a/lib/slots.ts b/lib/slots.ts
index 3313fbce..862e8b14 100644
--- a/lib/slots.ts
+++ b/lib/slots.ts
@@ -81,9 +81,12 @@ const organizerBoundaries = (
         }
       }
     } else {
-      boundaries.push({ lowerBound, upperBound });
+      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;
 
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index 82ba5d2e..e81812a1 100644
--- a/pages/[user]/[type].tsx
+++ b/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}