import { FC, Fragment } from "react"; import { observer } from "mobx-react"; import { Transition, Dialog } from "@headlessui/react"; import { TIssue } from "@plane/types"; // components import { InboxIssueCreateRoot, InboxIssueEditRoot } from "@/components/inbox/modals/create-edit-modal"; // hooks import { useProject } from "@/hooks/store"; type TInboxIssueCreateEditModalRoot = { workspaceSlug: string; projectId: string; modalState: boolean; handleModalClose: () => void; issue: Partial<TIssue> | undefined; onSubmit?: () => void; }; export const InboxIssueCreateEditModalRoot: FC<TInboxIssueCreateEditModalRoot> = observer((props) => { const { workspaceSlug, projectId, modalState, handleModalClose, issue, onSubmit } = props; // hooks const { currentProjectDetails } = useProject(); return ( <div> <Transition.Root show={modalState} as={Fragment}> <Dialog as="div" className="relative z-20" onClose={handleModalClose}> <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0" > <div className="fixed inset-0 bg-custom-backdrop transition-opacity" /> </Transition.Child> <div className="fixed inset-0 z-10 overflow-y-auto"> <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20"> <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 p-5 text-left shadow-custom-shadow-md transition-all w-full lg:max-w-4xl"> {issue && issue?.id ? ( <div className="space-y-4"> <h3 className="text-xl font-medium text-custom-text-100"> Move {currentProjectDetails?.identifier}-{issue?.sequence_id} to project issues </h3> <InboxIssueEditRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issue.id} issue={issue} handleModalClose={handleModalClose} onSubmit={onSubmit} /> </div> ) : ( <div className="space-y-4"> <h3 className="text-xl font-medium text-custom-text-100">Create Inbox Issue</h3> <InboxIssueCreateRoot workspaceSlug={workspaceSlug} projectId={projectId} handleModalClose={handleModalClose} /> </div> )} </Dialog.Panel> </Transition.Child> </div> </div> </Dialog> </Transition.Root> </div> ); });