cal.pub0.org/packages/features/schedules/components/Schedule.tsx

419 lines
12 KiB
TypeScript

import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
import type {
ArrayPath,
Control,
ControllerRenderProps,
FieldArrayWithId,
FieldPath,
FieldPathValue,
FieldValues,
UseFieldArrayRemove,
} from "react-hook-form";
import { Controller, useFieldArray, useFormContext } from "react-hook-form";
import type { GroupBase, Props } from "react-select";
import type { ConfigType } from "@calcom/dayjs";
import dayjs from "@calcom/dayjs";
import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import type { TimeRange } from "@calcom/types/schedule";
import {
Button,
Dropdown,
DropdownMenuContent,
DropdownMenuTrigger,
Select,
SkeletonText,
Switch,
} from "@calcom/ui";
import { FiCopy, FiPlus, FiTrash } from "@calcom/ui/components/icon";
export type { TimeRange };
export type FieldPathByValue<TFieldValues extends FieldValues, TValue> = {
[Key in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, Key> extends TValue ? Key : never;
}[FieldPath<TFieldValues>];
const ScheduleDay = <TFieldValues extends FieldValues>({
name,
weekday,
control,
CopyButton,
}: {
name: ArrayPath<TFieldValues>;
weekday: string;
control: Control<TFieldValues>;
CopyButton: JSX.Element;
}) => {
const { watch, setValue } = useFormContext();
const watchDayRange = watch(name);
return (
<div className="mb-4 flex w-full flex-col last:mb-0 sm:flex-row sm:px-0">
{/* Label & switch container */}
<div className="flex h-[36px] items-center justify-between sm:w-32">
<div>
<label className="flex flex-row items-center space-x-2 rtl:space-x-reverse">
<div>
<Switch
disabled={!watchDayRange}
defaultChecked={watchDayRange && watchDayRange.length > 0}
checked={watchDayRange && !!watchDayRange.length}
onCheckedChange={(isChecked) => {
setValue(name, (isChecked ? [DEFAULT_DAY_RANGE] : []) as TFieldValues[typeof name]);
}}
/>
</div>
<span className="inline-block min-w-[88px] text-sm capitalize">{weekday}</span>
{watchDayRange && !!watchDayRange.length && <div className="sm:hidden">{CopyButton}</div>}
</label>
</div>
</div>
<>
{watchDayRange ? (
<div className="flex sm:ml-2">
<DayRanges control={control} name={name} />
{!!watchDayRange.length && <div className="hidden sm:block">{CopyButton}</div>}
</div>
) : (
<SkeletonText className="mt-2.5 ml-1 h-6 w-48" />
)}
</>
</div>
);
};
const CopyButton = ({
getValuesFromDayRange,
weekStart,
}: {
getValuesFromDayRange: string;
weekStart: number;
}) => {
const { t } = useLocale();
const [open, setOpen] = useState(false);
const fieldArrayName = getValuesFromDayRange.substring(0, getValuesFromDayRange.lastIndexOf("."));
const { setValue, getValues } = useFormContext();
return (
<Dropdown open={open} onOpenChange={setOpen}>
<DropdownMenuTrigger asChild>
<Button
className={classNames(
"text-gray-700",
open && "ring-brand-500 !bg-gray-100 outline-none ring-2 ring-offset-1"
)}
type="button"
tooltip={t("copy_times_to_tooltip")}
color="minimal"
variant="icon"
StartIcon={FiCopy}
/>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<CopyTimes
weekStart={weekStart}
disabled={parseInt(getValuesFromDayRange.replace(fieldArrayName + ".", ""), 10)}
onClick={(selected) => {
selected.forEach((day) => setValue(`${fieldArrayName}.${day}`, getValues(getValuesFromDayRange)));
setOpen(false);
}}
onCancel={() => setOpen(false)}
/>
</DropdownMenuContent>
</Dropdown>
);
};
const Schedule = <
TFieldValues extends FieldValues,
TPath extends FieldPathByValue<TFieldValues, TimeRange[][]>
>({
name,
control,
weekStart = 0,
}: {
name: TPath;
control: Control<TFieldValues>;
weekStart?: number;
}) => {
const { i18n } = useLocale();
return (
<div className="p-4">
{/* First iterate for each day */}
{weekdayNames(i18n.language, weekStart, "long").map((weekday, num) => {
const weekdayIndex = (num + weekStart) % 7;
const dayRangeName = `${name}.${weekdayIndex}` as ArrayPath<TFieldValues>;
return (
<ScheduleDay
name={dayRangeName}
key={weekday}
weekday={weekday}
control={control}
CopyButton={<CopyButton weekStart={weekStart} getValuesFromDayRange={dayRangeName} />}
/>
);
})}
</div>
);
};
export const DayRanges = <TFieldValues extends FieldValues>({
name,
control,
}: {
name: ArrayPath<TFieldValues>;
control?: Control<TFieldValues>;
}) => {
const { t } = useLocale();
const { remove, fields, append } = useFieldArray({
control,
name,
});
return (
<div>
{fields.map((field, index: number) => (
<Fragment key={field.id}>
<div className="mb-2 flex last:mb-0">
<Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
{index === 0 && (
<Button
tooltip={t("add_time_availability")}
className="mx-2 text-gray-700 "
type="button"
color="minimal"
variant="icon"
StartIcon={FiPlus}
onClick={() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const nextRange: any = getNextRange(fields[fields.length - 1]);
if (nextRange) append(nextRange);
}}
/>
)}
{index !== 0 && <RemoveTimeButton index={index} remove={remove} className="mx-2 text-gray-700" />}
</div>
</Fragment>
))}
</div>
);
};
const RemoveTimeButton = ({
index,
remove,
className,
}: {
index: number | number[];
remove: UseFieldArrayRemove;
className?: string;
}) => {
return (
<Button
type="button"
variant="icon"
color="minimal"
StartIcon={FiTrash}
onClick={() => remove(index)}
className={className}
/>
);
};
const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
// this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
return (
<div className={className}>
<LazySelect
className="inline-block w-[100px]"
value={value.start}
max={value.end}
onChange={(option) => {
onChange({ ...value, start: new Date(option?.value as number) });
}}
/>
<span className="mx-2 w-2 self-center"> - </span>
<LazySelect
className="inline-block w-[100px] rounded-md"
value={value.end}
min={value.start}
onChange={(option) => {
onChange({ ...value, end: new Date(option?.value as number) });
}}
/>
</div>
);
};
const LazySelect = ({
value,
min,
max,
...props
}: Omit<Props<IOption, false, GroupBase<IOption>>, "value"> & {
value: ConfigType;
min?: ConfigType;
max?: ConfigType;
}) => {
// Lazy-loaded options, otherwise adding a field has a noticeable redraw delay.
const { options, filter } = useOptions();
useEffect(() => {
filter({ current: value });
}, [filter, value]);
return (
<Select
options={options}
onMenuOpen={() => {
if (min) filter({ offset: min });
if (max) filter({ limit: max });
}}
value={options.find((option) => option.value === dayjs(value).toDate().valueOf())}
onMenuClose={() => filter({ current: value })}
components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
{...props}
/>
);
};
interface IOption {
readonly label: string;
readonly value: number;
}
/**
* Creates an array of times on a 15 minute interval from
* 00:00:00 (Start of day) to
* 23:45:00 (End of day with enough time for 15 min booking)
*/
/** Begin Time Increments For Select */
const INCREMENT = 15;
const useOptions = () => {
// Get user so we can determine 12/24 hour format preferences
const query = useMeQuery();
const { timeFormat } = query.data || { timeFormat: null };
const [filteredOptions, setFilteredOptions] = useState<IOption[]>([]);
const options = useMemo(() => {
const end = dayjs().utc().endOf("day");
const options: IOption[] = [];
for (
let t = dayjs().utc().startOf("day");
t.isBefore(end);
t = t.add(INCREMENT + (!t.add(INCREMENT).isSame(t, "day") ? -1 : 0), "minutes")
) {
options.push({
value: t.toDate().valueOf(),
label: dayjs(t)
.utc()
.format(timeFormat === 12 ? "h:mma" : "HH:mm"),
});
}
// allow 23:59
options.push({
value: end.toDate().valueOf(),
label: dayjs(end)
.utc()
.format(timeFormat === 12 ? "h:mma" : "HH:mm"),
});
return options;
}, [timeFormat]);
const filter = useCallback(
({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {
if (current) {
const currentOption = options.find((option) => option.value === dayjs(current).toDate().valueOf());
if (currentOption) setFilteredOptions([currentOption]);
} else
setFilteredOptions(
options.filter((option) => {
const time = dayjs(option.value);
return (!limit || time.isBefore(limit)) && (!offset || time.isAfter(offset));
})
);
},
[options]
);
return { options: filteredOptions, filter };
};
const getNextRange = (field?: FieldArrayWithId) => {
const nextRangeStart = dayjs((field as unknown as TimeRange).end);
const nextRangeEnd = dayjs(nextRangeStart).add(1, "hour");
if (nextRangeEnd.isBefore(nextRangeStart.endOf("day"))) {
return {
start: nextRangeStart.toDate(),
end: nextRangeEnd.toDate(),
};
}
};
const CopyTimes = ({
disabled,
onClick,
onCancel,
weekStart,
}: {
disabled: number;
onClick: (selected: number[]) => void;
onCancel: () => void;
weekStart: number;
}) => {
const [selected, setSelected] = useState<number[]>([]);
const { i18n, t } = useLocale();
return (
<div className="space-y-2 py-2">
<div className="p-2">
<p className="h6 pb-3 pl-1 text-xs font-medium uppercase text-gray-400">{t("copy_times_to")}</p>
<ol className="space-y-2">
{weekdayNames(i18n.language, weekStart).map((weekday, num) => {
const weekdayIndex = (num + weekStart) % 7;
return (
<li key={weekday}>
<label className="flex w-full items-center justify-between">
<span className="px-1">{weekday}</span>
<input
value={weekdayIndex}
defaultChecked={disabled === weekdayIndex}
disabled={disabled === weekdayIndex}
onChange={(e) => {
if (e.target.checked && !selected.includes(weekdayIndex)) {
setSelected(selected.concat([weekdayIndex]));
} else if (!e.target.checked && selected.includes(weekdayIndex)) {
setSelected(selected.slice(selected.indexOf(weekdayIndex), 1));
}
}}
type="checkbox"
className="inline-block rounded-[4px] border-gray-300 text-gray-900 focus:ring-neutral-500 disabled:text-gray-400"
/>
</label>
</li>
);
})}
</ol>
</div>
<hr />
<div className="space-x-2 px-2 rtl:space-x-reverse">
<Button color="minimal" onClick={() => onCancel()}>
{t("cancel")}
</Button>
<Button color="primary" onClick={() => onClick(selected)}>
{t("apply")}
</Button>
</div>
</div>
);
};
export default Schedule;