import { Fragment, FC } from "react"; import { useRouter } from "next/router"; import { useForm, Controller } from "react-hook-form"; import { Transition, Dialog } from "@headlessui/react"; import { X } from "lucide-react"; // date helper import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper"; // hooks import useToast from "hooks/use-toast"; // ui import { Button, CustomSelect } from "@plane/ui"; import { CustomDatePicker } from "components/ui"; // types import type { IUserNotification } from "types"; type SnoozeModalProps = { isOpen: boolean; onClose: () => void; onSuccess: () => void; notification: IUserNotification | null; onSubmit: (notificationId: string, dateTime?: Date | undefined) => Promise; }; type FormValues = { time: string | null; date: Date | null; period: "AM" | "PM"; }; const defaultValues: FormValues = { time: null, date: null, period: "AM", }; const timeStamps = getAllTimeIn30MinutesInterval(); export const SnoozeNotificationModal: FC = (props) => { const { isOpen, onClose, notification, onSuccess, onSubmit: handleSubmitSnooze } = props; const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const { formState: { isSubmitting }, reset, handleSubmit, control, watch, setValue, } = useForm({ defaultValues, }); const getTimeStamp = () => { const today = new Date(); const formDataDate = watch("date"); if (!formDataDate) return timeStamps; const isToday = today.toDateString() === new Date(formDataDate).toDateString(); if (!isToday) return timeStamps; const hours = today.getHours(); const minutes = today.getMinutes(); return timeStamps.filter((optionTime) => { let optionHours = parseInt(optionTime.value.split(":")[0]); const optionMinutes = parseInt(optionTime.value.split(":")[1]); const period = watch("period"); if (period === "PM" && optionHours !== 12) optionHours += 12; if (optionHours < hours) return false; if (optionHours === hours && optionMinutes < minutes) return false; return true; }); }; const onSubmit = async (formData: FormValues) => { if (!workspaceSlug || !notification || !formData.date || !formData.time) return; const period = formData.period; const time = formData.time.split(":"); const hours = parseInt( `${period === "AM" ? time[0] : parseInt(time[0]) + 12 === 24 ? "00" : parseInt(time[0]) + 12}` ); const minutes = parseInt(time[1]); const dateTime = new Date(formData.date); dateTime.setHours(hours); dateTime.setMinutes(minutes); await handleSubmitSnooze(notification.id, dateTime).then(() => { handleClose(); onSuccess(); setToastAlert({ title: "Notification snoozed", message: "Notification snoozed successfully", type: "success", }); }); }; const handleClose = () => { onClose(); const timeout = setTimeout(() => { reset({ ...defaultValues }); clearTimeout(timeout); }, 500); }; return (
Customize Snooze Time
Pick a date
( { setValue("time", null); onChange(val); }} className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none !text-sm" wrapperClassName="w-full" noBorder minDate={new Date()} /> )} />
Pick a time
( {value ? ( {value} {watch("period").toLowerCase()} ) : ( Select a time )}
} width="w-full" input >
{ setValue("period", "AM"); }} className={`w-1/2 h-full cursor-pointer flex justify-center items-center text-center ${ watch("period") === "AM" ? "bg-custom-primary-100/90 text-custom-primary-0" : "bg-custom-background-80" }`} > AM
{ setValue("period", "PM"); }} className={`w-1/2 h-full cursor-pointer flex justify-center items-center text-center ${ watch("period") === "PM" ? "bg-custom-primary-100/90 text-custom-primary-0" : "bg-custom-background-80" }`} > PM
{getTimeStamp().length > 0 ? ( getTimeStamp().map((time, index) => (
{time.label}
)) ) : (

No available time for this date.

)} )} />
); };