import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import DatePicker from "react-datepicker"; import { Popover } from "@headlessui/react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // components import { AcceptIssueModal, DeclineIssueModal, DeleteInboxIssueModal, FiltersDropdown, SelectDuplicateInboxIssueModal, } from "components/inbox"; // ui import { Button } from "@plane/ui"; // icons import { CheckCircle2, ChevronDown, ChevronUp, Clock, FileStack, Inbox, Trash2, XCircle } from "lucide-react"; // types import type { TInboxStatus } from "types"; export const InboxActionsHeader = observer(() => { const [date, setDate] = useState(new Date()); const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false); const [acceptIssueModal, setAcceptIssueModal] = useState(false); const [declineIssueModal, setDeclineIssueModal] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query; const { inboxIssues: inboxIssuesStore, inboxIssueDetails: inboxIssueDetailsStore, user: userStore } = useMobxStore(); const user = userStore?.currentUser; const userRole = userStore.currentProjectRole; const issuesList = inboxId ? inboxIssuesStore.inboxIssues[inboxId.toString()] : null; const { setToastAlert } = useToast(); const markInboxStatus = async (data: TInboxStatus) => { if (!workspaceSlug || !projectId || !inboxId || !inboxIssueId || !issuesList) return; await inboxIssueDetailsStore .updateIssueStatus( workspaceSlug.toString(), projectId.toString(), inboxId.toString(), issuesList.find((inboxIssue: any) => inboxIssue.issue_inbox[0].id === inboxIssueId)?.issue_inbox[0].id!, data ) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Something went wrong while updating inbox status. Please try again.", }) ); }; const issue = issuesList?.find((issue) => issue.issue_inbox[0].id === inboxIssueId); const currentIssueIndex = issuesList?.findIndex((issue) => issue.issue_inbox[0].id === inboxIssueId) ?? 0; useEffect(() => { if (!issue?.issue_inbox[0].snoozed_till) return; setDate(new Date(issue.issue_inbox[0].snoozed_till)); }, [issue]); const issueStatus = issue?.issue_inbox[0].status; const isAllowed = userRole === 15 || userRole === 20; const today = new Date(); const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1); return ( <> {issue && ( <> setSelectDuplicateIssue(false)} value={issue?.issue_inbox[0].duplicate_to} onSubmit={(dupIssueId) => { markInboxStatus({ status: 2, duplicate_to: dupIssueId, }).finally(() => setSelectDuplicateIssue(false)); }} /> setAcceptIssueModal(false)} onSubmit={async () => { await markInboxStatus({ status: 1, }).finally(() => setAcceptIssueModal(false)); }} /> setDeclineIssueModal(false)} onSubmit={async () => { await markInboxStatus({ status: -1, }).finally(() => setDeclineIssueModal(false)); }} /> setDeleteIssueModal(false)} /> )}

Inbox

{inboxIssueId && (
{currentIssueIndex + 1}/{issuesList?.length ?? 0}
{isAllowed && (issueStatus === 0 || issueStatus === -2) && (
{({ close }) => (
{ if (!val) return; setDate(val); }} dateFormat="dd-MM-yyyy" minDate={tomorrow} inline />
)}
)} {isAllowed && issueStatus === -2 && (
)} {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
)} {isAllowed && issueStatus === -2 && (
)} {(isAllowed || user?.id === issue?.created_by) && (
)}
)}
); });