Merge pull request #348 from emrysal/bugfix/available-slots-timezone

Fixes #347: timeZone is not applied to AvailableTimes

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 {
-      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;
 

pages/[user]/[type].tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from "react";
 import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { ChevronDownIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid";
-import prisma from "../../lib/prisma";
 import { useRouter } from "next/router";
 import { Dayjs } from "dayjs";
 
+import prisma, { whereAndSelect } from "@lib/prisma";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
 import AvailableTimes from "../../components/booking/AvailableTimes";
 import TimeOptions from "../../components/booking/TimeOptions";
@@ -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}
@@ -149,26 +150,27 @@ export default function Type(props): Type {
 }
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
-  const user = await prisma.user.findFirst({
+  const user = await whereAndSelect(
-    where: {
+    prisma.user.findFirst,
+    {
       username: context.query.user.toLowerCase(),
     },
-    select: {
+    [
-      id: true,
+      "id",
-      username: true,
+      "username",
-      name: true,
+      "name",
-      email: true,
+      "email",
-      bio: true,
+      "bio",
-      avatar: true,
+      "avatar",
-      eventTypes: true,
+      "eventTypes",
-      startTime: true,
+      "startTime",
-      timeZone: true,
+      "endTime",
-      endTime: true,
+      "timeZone",
-      weekStart: true,
+      "weekStart",
-      availability: true,
+      "availability",
-      hideBranding: true,
+      "hideBranding",
-    },
+    ]
-  });
+  );
 
   if (!user) {
     return {
@@ -176,22 +178,14 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     };
   }
 
-  const eventType = await prisma.eventType.findFirst({
+  const eventType = await whereAndSelect(
-    where: {
+    prisma.eventType.findFirst,
+    {
       userId: user.id,
-      slug: {
+      slug: context.query.type,
-        equals: context.query.type,
-      },
     },
-    select: {
+    ["id", "title", "description", "length", "availability", "timeZone"]
-      id: true,
+  );
-      title: true,
-      description: true,
-      length: true,
-      availability: true,
-      timeZone: true,
-    },
-  });
 
   if (!eventType) {
     return {