import React, { useState } from "react"; import { useRouter } from "next/router"; // services import projectService from "services/project.service"; // hooks import useToast from "hooks/use-toast"; import useProjectDetails from "hooks/use-project-details"; // components import { DeleteEstimateModal } from "components/estimates"; // ui import { CustomMenu, SecondaryButton } from "components/ui"; //icons import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"; // helpers import { orderArrayBy } from "helpers/array.helper"; // types import { IEstimate } from "types"; type Props = { estimate: IEstimate; editEstimate: (estimate: IEstimate) => void; handleEstimateDelete: (estimateId: string) => void; }; export const SingleEstimate: React.FC = ({ estimate, editEstimate, handleEstimateDelete, }) => { const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const { projectDetails, mutateProjectDetails } = useProjectDetails(); const handleUseEstimate = async () => { if (!workspaceSlug || !projectId) return; const payload = { estimate: estimate.id, }; mutateProjectDetails((prevData) => { if (!prevData) return prevData; return { ...prevData, estimate: estimate.id }; }, false); await projectService .updateProject(workspaceSlug as string, projectId as string, payload) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "Estimate points could not be used. Please try again.", }); }); }; return ( <>
{estimate.name} {projectDetails?.estimate && projectDetails?.estimate === estimate.id && ( In use )}

{estimate.description}

{projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && ( Use )} { editEstimate(estimate); }} >
Edit estimate
{projectDetails?.estimate !== estimate.id && ( { setIsDeleteEstimateModalOpen(true); }} >
Delete estimate
)}
{estimate.points.length > 0 ? (
Estimate points ( {orderArrayBy(estimate.points, "key").map((point, index) => (
{point.value} {index !== estimate.points.length - 1 && ","}{" "}
))}
)
) : (

No estimate points

)}
setIsDeleteEstimateModalOpen(false)} data={estimate} handleDelete={() => { handleEstimateDelete(estimate.id); setIsDeleteEstimateModalOpen(false); }} /> ); };