import { FC, Fragment } from "react"; import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { Dialog, Transition } from "@headlessui/react"; import { AlertTriangleIcon } from "lucide-react"; import { observer } from "mobx-react-lite"; // ui import { Button, Input } from "@plane/ui"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // types import { IProject } from "types"; type FormData = { projectName: string; confirmLeave: string; }; const defaultValues: FormData = { projectName: "", confirmLeave: "", }; export interface ILeaveProjectModal { project: IProject; isOpen: boolean; onClose: () => void; } export const LeaveProjectModal: FC = observer((props) => { const { project, isOpen } = props; // router const router = useRouter(); const { workspaceSlug } = router.query; // store const { project: projectStore } = useMobxStore(); // toast const { setToastAlert } = useToast(); const { control, formState: { errors, isSubmitting }, handleSubmit, reset, } = useForm({ defaultValues }); const handleClose = () => { reset({ ...defaultValues }); }; const onSubmit = async (data: any) => { if (!workspaceSlug) return; if (data) { if (data.projectName === project?.name) { if (data.confirmLeave === "Leave Project") { return projectStore .leaveProject(workspaceSlug.toString(), project.id) .then(() => { handleClose(); router.push(`/${workspaceSlug}/projects`); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong please try again later.", }); }); } else { setToastAlert({ type: "error", title: "Error!", message: "Please confirm leaving the project by typing the 'Leave Project'.", }); } } else { setToastAlert({ type: "error", title: "Error!", message: "Please enter the project name as shown in the description.", }); } } else { setToastAlert({ type: "error", title: "Error!", message: "Please fill all fields.", }); } }; return (

Leave Project

Are you sure you want to leave the project - {` "${project?.name}" `}? All of the issues associated with you will become inaccessible.

Enter the project name {project?.name}{" "} to continue:

( )} />

To confirm, type Leave Project below:

( )} />
); });