import { ClockIcon } from "@heroicons/react/outline"; import dayjs from "dayjs"; import customParseFormat from "dayjs/plugin/customParseFormat"; import { useRef, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import Button from "@calcom/ui/Button"; import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; dayjs.extend(customParseFormat); interface SetTimesModalProps { isOpen: boolean; startTime: number; endTime: number; onChange: (times: { startTime: number; endTime: number }) => void; onExit: (...p: unknown[]) => void; } export default function SetTimesModal(props: SetTimesModalProps) { const { t } = useLocale(); const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60]; const [endHours, endMinutes] = [Math.floor(props.endTime / 60), props.endTime % 60]; const startHoursRef = useRef(null!); const startMinsRef = useRef(null!); const endHoursRef = useRef(null!); const endMinsRef = useRef(null!); const [endMinuteDisable, setEndMinuteDisable] = useState(false); const [maximumStartTime, setMaximumStartTime] = useState({ hour: endHours, minute: 59 }); const [minimumEndTime, setMinimumEndTime] = useState({ hour: startHours, minute: 59 }); const STEP = 15; const isValidTime = (startTime: number, endTime: number) => { if (new Date(startTime) > new Date(endTime)) { showToast(t("error_end_time_before_start_time"), "error"); return false; } if (endTime > 1440) { showToast(t("error_end_time_next_day"), "error"); return false; } return true; }; // compute dynamic range for minimum and maximum allowed hours/minutes. const setEdgeTimes = ( (step) => ( startHoursRef: React.MutableRefObject, startMinsRef: React.MutableRefObject, endHoursRef: React.MutableRefObject, endMinsRef: React.MutableRefObject ) => { //parse all the refs const startHour = parseInt(startHoursRef.current.value); let startMinute = parseInt(startMinsRef.current.value); const endHour = parseInt(endHoursRef.current.value); let endMinute = parseInt(endMinsRef.current.value); //convert to dayjs object const startTime = dayjs(`${startHour}:${startMinute}`, "hh:mm"); const endTime = dayjs(`${endHour}:${endMinute}`, "hh:mm"); //compute minimin and maximum allowed const maximumStartTime = endTime.subtract(step, "minute"); const maximumStartHour = maximumStartTime.hour(); const maximumStartMinute = startHour === endHour ? maximumStartTime.minute() : 59; const minimumEndTime = startTime.add(step, "minute"); const minimumEndHour = minimumEndTime.hour(); const minimumEndMinute = startHour === endHour ? minimumEndTime.minute() : 0; //check allow min/max minutes when the end/start hour matches if (startHoursRef.current.value === endHoursRef.current.value) { if (parseInt(startMinsRef.current.value) >= maximumStartMinute) startMinsRef.current.value = maximumStartMinute.toString(); if (parseInt(endMinsRef.current.value) <= minimumEndMinute) endMinsRef.current.value = minimumEndMinute.toString(); } //save into state setMaximumStartTime({ hour: maximumStartHour, minute: maximumStartMinute }); setMinimumEndTime({ hour: minimumEndHour, minute: minimumEndMinute }); } )(STEP); return (

{t("set_work_schedule")}

setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} />
:
setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} />
{ if (endHoursRef.current.value === "24") endMinsRef.current.value = "0"; setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef); setEndMinuteDisable(endHoursRef.current.value === "24"); }} />
:
setEdgeTimes(startHoursRef, startMinsRef, endHoursRef, endMinsRef)} />
); }