import React from "react"; import { useRouter } from "next/router"; // react-hook-form import { useForm } from "react-hook-form"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // ui import { Input, PrimaryButton, SecondaryButton } from "components/ui"; // types import type { IProject } from "types"; // types type Props = { isOpen: boolean; type: "auto-close" | "auto-archive"; initialValues: Partial; handleClose: () => void; handleChange: (formData: Partial) => Promise; }; export const SelectMonthModal: React.FC = ({ type, initialValues, isOpen, handleClose, handleChange, }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { register, formState: { errors, isSubmitting }, handleSubmit, reset, } = useForm({ defaultValues: initialValues, }); const onClose = () => { handleClose(); reset(initialValues); }; const onSubmit = (formData: Partial) => { if (!workspaceSlug && !projectId) return; handleChange(formData); onClose(); }; const inputSection = (name: string) => (
Months
); return (
Customise Time Range
{type === "auto-close" ? ( <> {inputSection("close_in")} {errors.close_in && ( Select a month between 1 and 12. )} ) : ( <> {inputSection("archive_in")} {errors.archive_in && ( Select a month between 1 and 12. )} )}
Cancel {isSubmitting ? "Submitting..." : "Submit"}
); };