From 0bc7d4cedac3df5d0f574126af249229c94179f3 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Thu, 13 Jul 2023 17:33:27 +0200
Subject: [PATCH] feat: Override any day of the week (#10138)

* feat: Override any day of the week

* Having multiple workingHours would duplicate the default
---
 .../components/DateOverrideInputDialog.tsx    | 51 ++++++++-----------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx
index 6eaa738812..104cfd9173 100644
--- a/packages/features/schedules/components/DateOverrideInputDialog.tsx
+++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx
@@ -1,10 +1,9 @@
-import { useState, useMemo } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
-import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import type { WorkingHours } from "@calcom/types/schedule";
@@ -50,22 +49,23 @@ const DateOverrideForm = ({
   );
 
   const [date, setDate] = useState<Dayjs | null>(value ? dayjs.utc(value[0].start) : null);
-  const includedDates = useMemo(
-    () =>
-      workingHours
-        ? workingHours.reduce((dates, workingHour) => {
-            for (let dNum = 1; dNum <= daysInMonth(browsingDate || dayjs()); dNum++) {
-              const d = browsingDate ? browsingDate.date(dNum) : dayjs.utc().date(dNum);
-              if (workingHour.days.includes(d.day())) {
-                dates.push(yyyymmdd(d));
-              }
-            }
-            return dates;
-          }, [] as string[])
-        : [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [browsingDate]
-  );
+
+  const defaultRanges = (workingHours || []).reduce((dayRanges: TimeRange[], workingHour) => {
+    if (date && workingHour.days.includes(date.day())) {
+      dayRanges.push({
+        start: dayjs.utc().startOf("day").add(workingHour.startTime, "minute").toDate(),
+        end: dayjs.utc().startOf("day").add(workingHour.endTime, "minute").toDate(),
+      });
+    }
+    return dayRanges;
+  }, []);
+  // DayRanges does not support empty state, add 9-5 as a default
+  if (!defaultRanges.length) {
+    defaultRanges.push({
+      start: dayjs.utc().startOf("day").add(540, "minute").toDate(),
+      end: dayjs.utc().startOf("day").add(1020, "minute").toDate(),
+    });
+  }
 
   const form = useForm({
     values: {
@@ -83,15 +83,7 @@ const DateOverrideForm = ({
               dayjs.utc().hour(range.end.getUTCHours()).minute(range.end.getUTCMinutes()).second(0).format()
             ),
           }))
-        : (workingHours || []).reduce((dayRanges, workingHour) => {
-            if (date && workingHour.days.includes(date.day())) {
-              dayRanges.push({
-                start: dayjs.utc().startOf("day").add(workingHour.startTime, "minute").toDate(),
-                end: dayjs.utc().startOf("day").add(workingHour.endTime, "minute").toDate(),
-              });
-            }
-            return dayRanges;
-          }, [] as TimeRange[]),
+        : defaultRanges,
     },
   });
 
@@ -120,7 +112,6 @@ const DateOverrideForm = ({
       <div className={classNames(date && "sm:border-subtle w-full sm:border-r sm:pr-6", "sm:p-4 md:p-8")}>
         <DialogHeader title={t("date_overrides_dialog_title")} />
         <DatePicker
-          includedDates={includedDates}
           excludedDates={excludedDates}
           weekStart={0}
           selected={date}
@@ -138,7 +129,9 @@ const DateOverrideForm = ({
             <p className="text-medium text-emphasis text-sm">{t("date_overrides_dialog_which_hours")}</p>
             <div>
               {datesUnavailable ? (
-                <p className="text-subtle rounded border p-2 text-sm">{t("date_overrides_unavailable")}</p>
+                <p className="text-subtle border-default rounded border p-2 text-sm">
+                  {t("date_overrides_unavailable")}
+                </p>
               ) : (
                 <DayRanges name="range" />
               )}