public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Override any day of the week (#10138) 

* feat: Override any day of the week

* Having multiple workingHours would duplicate the default
pull/10096/head^2
Alex van Andel 2023-07-13 17:33:27 +02:00 committed by GitHub
parent 9444f925e5
commit 0bc7d4ceda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/features/schedules/components/DateOverrideInputDialog.tsx
View File

@ -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" />
)}