chore: handled create and update components in projecr estimates

web/components/estimates/create/modal.tsx

@@ -138,11 +138,16 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
             />
           )}
           {estimatePoints && (
-            <EstimatePointCreateRoot
+            <>
-              estimateType={estimateSystem}
+              <EstimatePointCreateRoot
-              estimatePoints={estimatePoints}
+                workspaceSlug={workspaceSlug}
-              setEstimatePoints={setEstimatePoints}
+                projectId={projectId}
-            />
+                estimateId={undefined}
+                estimateType={estimateSystem}
+                estimatePoints={estimatePoints}
+                setEstimatePoints={setEstimatePoints}
+              />
+            </>
           )}
         </div>
 

web/components/estimates/points/create-root.tsx

@@ -0,0 +1,142 @@
+import { Dispatch, FC, SetStateAction, useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { Plus } from "lucide-react";
+import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
+import { Button, Draggable, Sortable } from "@plane/ui";
+// components
+import { EstimatePointItemPreview, EstimatePointCreate } from "@/components/estimates/points";
+// constants
+import { maxEstimatesCount } from "@/constants/estimates";
+// hooks
+import { useEstimate } from "@/hooks/store";
+
+type TEstimatePointCreateRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  setEstimatePoints: Dispatch<SetStateAction<TEstimatePointsObject[] | undefined>>;
+};
+
+export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((props) => {
+  // props
+  const { workspaceSlug, projectId, estimateId, estimateType, estimatePoints, setEstimatePoints } = props;
+  // hooks
+  const { asJson: estimate, updateEstimateSortOrder } = useEstimate(estimateId);
+  // states
+  const [estimatePointCreate, setEstimatePointCreate] = useState<TEstimatePointsObject[] | undefined>(undefined);
+
+  const handleEstimatePoint = useCallback(
+    (mode: "add" | "remove" | "update", value: TEstimatePointsObject) => {
+      switch (mode) {
+        case "add":
+          setEstimatePoints((prevValue) => {
+            prevValue = prevValue ? [...prevValue] : [];
+            return [...prevValue, value];
+          });
+          break;
+        case "update":
+          setEstimatePoints((prevValue) => {
+            prevValue = prevValue ? [...prevValue] : [];
+            return prevValue.map((item) => (item.key === value.key ? { ...item, value: value.value } : item));
+          });
+          break;
+        case "remove":
+          setEstimatePoints((prevValue) => {
+            prevValue = prevValue ? [...prevValue] : [];
+            return prevValue.filter((item) => item.key !== value.key);
+          });
+          break;
+        default:
+          break;
+      }
+    },
+    [setEstimatePoints]
+  );
+
+  const handleEstimatePointCreate = (mode: "add" | "remove", value: TEstimatePointsObject) => {
+    switch (mode) {
+      case "add":
+        setEstimatePointCreate((prevValue) => {
+          prevValue = prevValue ? [...prevValue] : [];
+          return [...prevValue, value];
+        });
+        break;
+      case "remove":
+        setEstimatePointCreate((prevValue) => {
+          prevValue = prevValue ? [...prevValue] : [];
+          return prevValue.filter((item) => item.key !== value.key);
+        });
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleDragEstimatePoints = (updatedEstimatedOrder: TEstimatePointsObject[]) => {
+    const updatedEstimateKeysOrder = updatedEstimatedOrder.map((item, index) => ({ ...item, key: index + 1 }));
+    updateEstimateSortOrder(workspaceSlug, projectId, updatedEstimateKeysOrder);
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+  return (
+    <div className="space-y-3">
+      <div className="text-sm font-medium text-custom-text-200 capitalize">{estimate?.type}</div>
+      <Sortable
+        data={estimatePoints}
+        render={(value: TEstimatePointsObject) => (
+          <Draggable data={value}>
+            <EstimatePointItemPreview
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              estimateId={estimateId}
+              estimateType={estimateType}
+              estimatePointId={value?.id}
+              estimatePoints={estimatePoints}
+              estimatePoint={value}
+              handleEstimatePointValueUpdate={(estimatePointValue: string) =>
+                handleEstimatePoint("update", { ...value, value: estimatePointValue })
+              }
+              handleEstimatePointValueRemove={() => handleEstimatePoint("remove", value)}
+            />
+          </Draggable>
+        )}
+        onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
+        keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
+      />
+
+      {estimatePointCreate &&
+        estimatePointCreate.map((estimatePoint) => (
+          <EstimatePointCreate
+            key={estimatePoint?.key}
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            estimateId={estimateId}
+            estimateType={estimateType}
+            estimatePoints={estimatePoints}
+            handleEstimatePointValue={(estimatePointValue: string) =>
+              handleEstimatePoint("add", { ...estimatePoint, value: estimatePointValue })
+            }
+            closeCallBack={() => handleEstimatePointCreate("remove", estimatePoint)}
+          />
+        ))}
+      {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= maxEstimatesCount && (
+        <Button
+          variant="link-primary"
+          size="sm"
+          prependIcon={<Plus />}
+          onClick={() =>
+            handleEstimatePointCreate("add", {
+              id: undefined,
+              key: estimatePoints.length + (estimatePointCreate?.length || 0) + 1,
+              value: "",
+            })
+          }
+        >
+          Add {estimate?.type}
+        </Button>
+      )}
+    </div>
+  );
+});

web/components/estimates/points/create.tsx

@@ -0,0 +1,154 @@
+import { FC, FormEvent, useState } from "react";
+import { observer } from "mobx-react";
+import { Check, Info, X } from "lucide-react";
+import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
+import { Spinner, Tooltip } from "@plane/ui";
+// constants
+import { EEstimateSystem } from "@/constants/estimates";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { isEstimatePointValuesRepeated } from "@/helpers/estimates";
+// hooks
+import { useEstimate } from "@/hooks/store";
+
+type TEstimatePointCreate = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  handleEstimatePointValue?: (estimateValue: string) => void;
+  closeCallBack: () => void;
+};
+
+export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePoints,
+    handleEstimatePointValue,
+    closeCallBack,
+  } = props;
+  // hooks
+  const { creteEstimatePoint } = useEstimate(estimateId);
+  // states
+  const [estimateInputValue, setEstimateInputValue] = useState("");
+  const [loader, setLoader] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  const handleSuccess = (value: string) => {
+    handleEstimatePointValue && handleEstimatePointValue(value);
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleClose = () => {
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleCreate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!workspaceSlug || !projectId) return;
+
+    setError(undefined);
+
+    if (estimateInputValue) {
+      const currentEstimateType: EEstimateSystem | undefined = estimateType;
+      let isEstimateValid = false;
+
+      const currentEstimatePointValues = estimatePoints
+        .map((point) => point?.value || undefined)
+        .filter((value) => value != undefined) as string[];
+      const isRepeated =
+        (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
+        false;
+
+      if (!isRepeated) {
+        if (currentEstimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(currentEstimateType)) {
+          if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
+            isEstimateValid = true;
+          }
+        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
+          if (estimateInputValue && estimateInputValue.length > 0) {
+            isEstimateValid = true;
+          }
+        }
+
+        if (isEstimateValid) {
+          if (estimateId != undefined) {
+            try {
+              setLoader(true);
+
+              const payload = {
+                key: estimatePoints?.length + 1,
+                value: estimateInputValue,
+              };
+              await creteEstimatePoint(workspaceSlug, projectId, payload);
+
+              setLoader(false);
+              setError(undefined);
+              handleClose();
+            } catch {
+              setLoader(false);
+              setError("something went wrong. please try again later");
+            }
+          } else {
+            handleSuccess(estimateInputValue);
+            setError("Please fill the input field");
+          }
+        } else {
+          setLoader(false);
+          setError("please enter a valid estimate value");
+        }
+      } else setError("Estimate point values cannot be repeated");
+    } else setError("Please fill the input field");
+  };
+
+  return (
+    <form onSubmit={handleCreate} className="relative flex items-center gap-2 text-base">
+      <div
+        className={cn(
+          "relative w-full border rounded flex items-center",
+          error ? `border-red-500` : `border-custom-border-200`
+        )}
+      >
+        <input
+          type="text"
+          value={estimateInputValue}
+          onChange={(e) => setEstimateInputValue(e.target.value)}
+          className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
+          placeholder="Enter estimate point"
+          autoFocus
+        />
+        {error && (
+          <>
+            <Tooltip tooltipContent={error} position="bottom">
+              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+                <Info size={14} />
+              </div>
+            </Tooltip>
+          </>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
+        disabled={loader}
+      >
+        {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
+      </button>
+      <button
+        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
+        onClick={handleClose}
+        disabled={loader}
+      >
+        <X size={14} className="text-custom-text-200" />
+      </button>
+    </form>
+  );
+});

web/components/estimates/points/create/index.ts

@@ -1,3 +0,0 @@
-export * from "./root";
-export * from "./preview";
-export * from "./update";

web/components/estimates/points/create/preview.tsx

@@ -1,65 +0,0 @@
-import { FC, useEffect, useRef, useState } from "react";
-import { observer } from "mobx-react";
-import { GripVertical, Pencil, Trash2 } from "lucide-react";
-import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
-// components
-import { EstimatePointItemCreateUpdate } from "@/components/estimates/points";
-
-type TEstimatePointItemCreatePreview = {
-  estimateType: TEstimateSystemKeys;
-  estimatePoint: TEstimatePointsObject;
-  handleEstimatePoint: (mode: "add" | "remove" | "update", value: TEstimatePointsObject) => void;
-};
-
-export const EstimatePointItemCreatePreview: FC<TEstimatePointItemCreatePreview> = observer((props) => {
-  const { estimateType, estimatePoint, handleEstimatePoint } = props;
-  // state
-  const [estimatePointEditToggle, setEstimatePointEditToggle] = useState(false);
-  // ref
-  const EstimatePointValueRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!estimatePointEditToggle)
-      EstimatePointValueRef?.current?.addEventListener("dblclick", () => setEstimatePointEditToggle(true));
-  }, [estimatePointEditToggle]);
-
-  return (
-    <div>
-      {!estimatePointEditToggle && (
-        <div className="border border-custom-border-200 rounded relative flex items-center px-2.5 gap-2 text-base">
-          <div className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer">
-            <GripVertical size={14} className="text-custom-text-200" />
-          </div>
-          <div ref={EstimatePointValueRef} className="py-2.5 w-full">
-            {estimatePoint?.value ? (
-              estimatePoint?.value
-            ) : (
-              <span className="text-custom-text-400">Enter estimate point</span>
-            )}
-          </div>
-          <div
-            className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
-            onClick={() => setEstimatePointEditToggle(true)}
-          >
-            <Pencil size={14} className="text-custom-text-200" />
-          </div>
-          <div
-            className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
-            onClick={() => handleEstimatePoint("remove", estimatePoint)}
-          >
-            <Trash2 size={14} className="text-custom-text-200" />
-          </div>
-        </div>
-      )}
-
-      {estimatePoint && estimatePointEditToggle && (
-        <EstimatePointItemCreateUpdate
-          estimateType={estimateType}
-          estimatePoint={estimatePoint}
-          updateEstimateValue={(value: string) => handleEstimatePoint("update", { ...estimatePoint, value })}
-          callback={() => setEstimatePointEditToggle(false)}
-        />
-      )}
-    </div>
-  );
-});

web/components/estimates/points/create/root.tsx

@@ -1,90 +0,0 @@
-import { Dispatch, FC, SetStateAction, useCallback } from "react";
-import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
-import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
-import { Button, Draggable, Sortable } from "@plane/ui";
-// components
-import { EstimatePointItemCreatePreview } from "@/components/estimates/points";
-// constants
-import { maxEstimatesCount } from "@/constants/estimates";
-
-type TEstimatePointCreateRoot = {
-  estimateType: TEstimateSystemKeys;
-  estimatePoints: TEstimatePointsObject[];
-  setEstimatePoints: Dispatch<SetStateAction<TEstimatePointsObject[] | undefined>>;
-};
-
-export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((props) => {
-  // props
-  const { estimateType, estimatePoints, setEstimatePoints } = props;
-
-  const handleEstimatePoint = useCallback(
-    (mode: "add" | "remove" | "update", value: TEstimatePointsObject) => {
-      switch (mode) {
-        case "add":
-          setEstimatePoints((prevValue) => {
-            prevValue = prevValue ? [...prevValue] : [];
-            return [...prevValue, value];
-          });
-          break;
-        case "update":
-          setEstimatePoints((prevValue) => {
-            prevValue = prevValue ? [...prevValue] : [];
-            return prevValue.map((item) => (item.key === value.key ? { ...item, value: value.value } : item));
-          });
-          break;
-        case "remove":
-          setEstimatePoints((prevValue) => {
-            prevValue = prevValue ? [...prevValue] : [];
-            return prevValue.filter((item) => item.key !== value.key);
-          });
-          break;
-        default:
-          break;
-      }
-    },
-    [setEstimatePoints]
-  );
-
-  const handleDragEstimatePoints = (updatedEstimatedOrder: TEstimatePointsObject[]) => {
-    const updatedEstimateKeysOrder = updatedEstimatedOrder.map((item, index) => ({ ...item, key: index + 1 }));
-    setEstimatePoints(updatedEstimateKeysOrder);
-  };
-
-  return (
-    <div className="space-y-3">
-      <div className="text-sm font-medium text-custom-text-200">{estimateType}</div>
-      <Sortable
-        data={estimatePoints}
-        render={(value: TEstimatePointsObject) => (
-          <Draggable data={value}>
-            <EstimatePointItemCreatePreview
-              estimateType={estimateType}
-              estimatePoint={value}
-              handleEstimatePoint={handleEstimatePoint}
-            />
-          </Draggable>
-        )}
-        onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
-        keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
-      />
-
-      {estimatePoints && estimatePoints.length <= maxEstimatesCount && (
-        <Button
-          variant="link-primary"
-          size="sm"
-          prependIcon={<Plus />}
-          onClick={() =>
-            handleEstimatePoint("add", {
-              id: undefined,
-              key: estimatePoints.length + 1,
-              value: "",
-            })
-          }
-        >
-          Add {estimateType}
-        </Button>
-      )}
-    </div>
-  );
-});

web/components/estimates/points/create/update.tsx

@@ -1,107 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { observer } from "mobx-react";
-import { Check, Info, X } from "lucide-react";
-import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
-import { Tooltip } from "@plane/ui";
-// constants
-import { EEstimateSystem } from "@/constants/estimates";
-// helpers
-import { cn } from "@/helpers/common.helper";
-
-type TEstimatePointItemCreateUpdate = {
-  estimateType: TEstimateSystemKeys;
-  estimatePoint: TEstimatePointsObject;
-  updateEstimateValue: (value: string) => void;
-  callback: () => void;
-};
-
-export const EstimatePointItemCreateUpdate: FC<TEstimatePointItemCreateUpdate> = observer((props) => {
-  const { estimateType, estimatePoint, updateEstimateValue, callback } = props;
-  // states
-  const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
-  const [error, setError] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (estimateInputValue === undefined && estimatePoint) setEstimateInputValue(estimatePoint?.value || "");
-  }, [estimateInputValue, estimatePoint]);
-
-  const handleClose = () => {
-    setEstimateInputValue("");
-    callback();
-  };
-
-  const handleCreate = async () => {
-    if (!estimatePoint) return;
-    if (estimateInputValue)
-      try {
-        setError(undefined);
-
-        const currentEstimateType: EEstimateSystem | undefined = estimateType;
-        let isEstimateValid = false;
-
-        if (currentEstimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(currentEstimateType)) {
-          if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
-            isEstimateValid = true;
-          }
-        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
-          if (estimateInputValue && estimateInputValue.length > 0) {
-            isEstimateValid = true;
-          }
-        }
-
-        if (isEstimateValid) {
-          updateEstimateValue(estimateInputValue);
-          setError(undefined);
-          handleClose();
-        } else {
-          setError("please enter a valid estimate value");
-        }
-      } catch {
-        setError("something went wrong. please try again later");
-      }
-    else {
-      setError("Please fill the input field");
-    }
-  };
-
-  return (
-    <div className="relative flex items-center gap-2 text-base">
-      <div
-        className={cn(
-          "relative w-full border rounded flex items-center",
-          error ? `border-red-500` : `border-custom-border-200`
-        )}
-      >
-        <input
-          type="text"
-          value={estimateInputValue}
-          onChange={(e) => setEstimateInputValue(e.target.value)}
-          className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
-          placeholder="Enter estimate point"
-          autoFocus
-        />
-        {error && (
-          <>
-            <Tooltip tooltipContent={error} position="bottom">
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
-                <Info size={14} />
-              </div>
-            </Tooltip>
-          </>
-        )}
-      </div>
-      <div
-        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
-        onClick={handleCreate}
-      >
-        <Check size={14} />
-      </div>
-      <div
-        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
-        onClick={handleClose}
-      >
-        <X size={14} className="text-custom-text-200" />
-      </div>
-    </div>
-  );
-});

web/components/estimates/points/delete.tsx

@@ -33,16 +33,20 @@ export const EstimatePointDelete: FC<TEstimatePointDelete> = observer((props) =>
 
   const handleDelete = async () => {
     if (!workspaceSlug || !projectId || !projectId) return;
+
+    setError(undefined);
+
     if (estimateInputValue)
       try {
         setLoader(true);
-        setError(undefined);
+
         await deleteEstimatePoint(
           workspaceSlug,
           projectId,
           estimatePointId,
           estimateInputValue === "none" ? undefined : estimateInputValue
         );
+
         setLoader(false);
         setError(undefined);
         handleClose();

web/components/estimates/points/edit-root.tsx

@@ -60,17 +60,20 @@ export const EstimatePointEditRoot: FC<TEstimatePointEditRoot> = observer((props
   if (!workspaceSlug || !projectId || !estimateId) return <></>;
   return (
     <div className="space-y-3">
-      <div className="text-sm font-medium text-custom-text-200">{estimate?.type}</div>
+      <div className="text-sm font-medium text-custom-text-200 capitalize">{estimate?.type}</div>
       <Sortable
         data={estimatePoints}
         render={(value: TEstimatePointsObject) => (
           <Draggable data={value}>
-            {value?.id && (
+            {value?.id && estimate?.type && (
               <EstimatePointItemPreview
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
                 estimateId={estimateId}
                 estimatePointId={value?.id}
+                estimateType={estimate?.type}
+                estimatePoint={value}
+                estimatePoints={estimatePoints}
               />
             )}
           </Draggable>
@@ -80,15 +83,20 @@ export const EstimatePointEditRoot: FC<TEstimatePointEditRoot> = observer((props
       />
 
       {estimatePointCreate &&
-        estimatePointCreate.map((estimatePoint) => (
+        estimatePointCreate.map(
-          <EstimatePointCreate
+          (estimatePoint) =>
-            key={estimatePoint?.key}
+            estimate?.type && (
-            workspaceSlug={workspaceSlug}
+              <EstimatePointCreate
-            projectId={projectId}
+                key={estimatePoint?.key}
-            estimateId={estimateId}
+                workspaceSlug={workspaceSlug}
-            callback={() => handleEstimatePointCreate("remove", estimatePoint)}
+                projectId={projectId}
-          />
+                estimateId={estimateId}
-        ))}
+                estimateType={estimate?.type}
+                closeCallBack={() => handleEstimatePointCreate("remove", estimatePoint)}
+                estimatePoints={estimatePoints}
+              />
+            )
+        )}
       {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= maxEstimatesCount && (
         <Button
           variant="link-primary"

web/components/estimates/points/edit/create.tsx

@@ -1,139 +0,0 @@
-import { FC, useState } from "react";
-import { observer } from "mobx-react";
-import { Check, Info, X } from "lucide-react";
-import { Spinner, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
-// constants
-import { EEstimateSystem } from "@/constants/estimates";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import { isEstimatePointValuesRepeated } from "@/helpers/estimates";
-// hooks
-import { useEstimate } from "@/hooks/store";
-
-type TEstimatePointCreate = {
-  workspaceSlug: string;
-  projectId: string;
-  estimateId: string;
-  callback: () => void;
-};
-
-export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) => {
-  const { workspaceSlug, projectId, estimateId, callback } = props;
-  // hooks
-  const { asJson: estimate, estimatePointIds, estimatePointById, creteEstimatePoint } = useEstimate(estimateId);
-  // states
-  const [loader, setLoader] = useState(false);
-  const [estimateInputValue, setEstimateInputValue] = useState("");
-  const [error, setError] = useState<string | undefined>(undefined);
-
-  const handleClose = () => {
-    setEstimateInputValue("");
-    callback();
-  };
-
-  const handleCreate = async () => {
-    if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
-    if (estimateInputValue)
-      try {
-        setLoader(true);
-        setError(undefined);
-
-        const estimateType: EEstimateSystem | undefined = estimate?.type;
-        let isEstimateValid = false;
-
-        if (estimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(estimateType)) {
-          if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
-            isEstimateValid = true;
-          }
-        } else if (estimateType && estimateType === EEstimateSystem.CATEGORIES) {
-          if (estimateInputValue && estimateInputValue.length > 0) {
-            isEstimateValid = true;
-          }
-        }
-
-        const currentEstimatePointValues = estimatePointIds
-          .map((estimatePointId) => estimatePointById(estimatePointId)?.value || undefined)
-          .filter((estimateValue) => estimateValue != undefined) as string[];
-        const isRepeated =
-          (estimateType &&
-            isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
-          false;
-
-        if (!isRepeated) {
-          if (isEstimateValid) {
-            const payload = {
-              key: estimatePointIds?.length + 1,
-              value: estimateInputValue,
-            };
-            await creteEstimatePoint(workspaceSlug, projectId, payload);
-            setLoader(false);
-            setError(undefined);
-            handleClose();
-          } else {
-            setLoader(false);
-            setError("please enter a valid estimate value");
-          }
-        } else {
-          setLoader(false);
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Estimate point values cannot be repeated",
-          });
-        }
-      } catch {
-        setLoader(false);
-        setError("something went wrong. please try again later");
-      }
-    else {
-      setError("Please fill the input field");
-    }
-  };
-
-  return (
-    <div className="relative flex items-center gap-2 text-base">
-      <div
-        className={cn(
-          "relative w-full border rounded flex items-center",
-          error ? `border-red-500` : `border-custom-border-200`
-        )}
-      >
-        <input
-          type="text"
-          value={estimateInputValue}
-          onChange={(e) => setEstimateInputValue(e.target.value)}
-          className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
-          placeholder="Enter estimate point"
-          autoFocus
-        />
-        {error && (
-          <>
-            <Tooltip tooltipContent={error} position="bottom">
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
-                <Info size={14} />
-              </div>
-            </Tooltip>
-          </>
-        )}
-      </div>
-      {loader ? (
-        <div className="w-6 h-6 flex-shrink-0 relative flex justify-center items-center rota">
-          <Spinner className="w-4 h-4" />
-        </div>
-      ) : (
-        <div
-          className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
-          onClick={handleCreate}
-        >
-          <Check size={14} />
-        </div>
-      )}
-      <div
-        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
-        onClick={handleClose}
-      >
-        <X size={14} className="text-custom-text-200" />
-      </div>
-    </div>
-  );
-});

web/components/estimates/points/edit/index.ts

@@ -1,6 +0,0 @@
-export * from "./root";
-export * from "./preview";
-export * from "./create";
-export * from "./update";
-export * from "./delete";
-export * from "./select-dropdown";

web/components/estimates/points/edit/update.tsx

@@ -1,144 +0,0 @@
-import { FC, useEffect, useState } from "react";
-import { observer } from "mobx-react";
-import { Check, Info, X } from "lucide-react";
-import { Spinner, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
-// constants
-import { EEstimateSystem } from "@/constants/estimates";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import { isEstimatePointValuesRepeated } from "@/helpers/estimates";
-// hooks
-import { useEstimate, useEstimatePoint } from "@/hooks/store";
-
-type TEstimatePointUpdate = {
-  workspaceSlug: string;
-  projectId: string;
-  estimateId: string;
-  estimatePointId: string;
-  callback: () => void;
-};
-
-export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) => {
-  const { workspaceSlug, projectId, estimateId, estimatePointId, callback } = props;
-  // hooks
-  const { asJson: estimate, estimatePointIds, estimatePointById } = useEstimate(estimateId);
-  const { asJson: estimatePoint, updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
-  // states
-  const [loader, setLoader] = useState(false);
-  const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
-  const [error, setError] = useState<string | undefined>(undefined);
-
-  useEffect(() => {
-    if (estimateInputValue === undefined && estimatePoint) setEstimateInputValue(estimatePoint?.value || "");
-  }, [estimateInputValue, estimatePoint]);
-
-  const handleClose = () => {
-    setEstimateInputValue("");
-    callback();
-  };
-
-  const handleUpdate = async () => {
-    if (!workspaceSlug || !projectId || !projectId || !estimatePointIds) return;
-    if (estimateInputValue)
-      try {
-        setLoader(true);
-        setError(undefined);
-
-        const estimateType: EEstimateSystem | undefined = estimate?.type;
-        let isEstimateValid = false;
-
-        if (estimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(estimateType)) {
-          if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
-            isEstimateValid = true;
-          }
-        } else if (estimateType && estimateType === EEstimateSystem.CATEGORIES) {
-          if (estimateInputValue && estimateInputValue.length > 0) {
-            isEstimateValid = true;
-          }
-        }
-
-        const currentEstimatePointValues = estimatePointIds
-          .map((estimatePointId) => estimatePointById(estimatePointId)?.value || undefined)
-          .filter((estimateValue) => estimateValue != undefined) as string[];
-        const isRepeated =
-          (estimateType &&
-            isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
-          false;
-
-        if (!isRepeated) {
-          if (isEstimateValid) {
-            const payload = {
-              value: estimateInputValue,
-            };
-            await updateEstimatePoint(workspaceSlug, projectId, payload);
-            setLoader(false);
-            setError(undefined);
-            handleClose();
-          } else {
-            setLoader(false);
-            setError("please enter a valid estimate value");
-          }
-        } else {
-          setLoader(false);
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Estimate point values cannot be repeated",
-          });
-        }
-      } catch {
-        setLoader(false);
-        setError("something went wrong. please try again later");
-      }
-    else {
-      setError("Please fill the input field");
-    }
-  };
-
-  return (
-    <div className="relative flex items-center gap-2 text-base">
-      <div
-        className={cn(
-          "relative w-full border rounded flex items-center",
-          error ? `border-red-500` : `border-custom-border-200`
-        )}
-      >
-        <input
-          type="text"
-          value={estimateInputValue}
-          onChange={(e) => setEstimateInputValue(e.target.value)}
-          className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
-          placeholder="Enter estimate point"
-          autoFocus
-        />
-        {error && (
-          <>
-            <Tooltip tooltipContent={error} position="bottom">
-              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
-                <Info size={14} />
-              </div>
-            </Tooltip>
-          </>
-        )}
-      </div>
-      {loader ? (
-        <div className="w-6 h-6 flex-shrink-0 relative flex justify-center items-center rota">
-          <Spinner className="w-4 h-4" />
-        </div>
-      ) : (
-        <div
-          className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
-          onClick={handleUpdate}
-        >
-          <Check size={14} />
-        </div>
-      )}
-      <div
-        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
-        onClick={handleClose}
-      >
-        <X size={14} className="text-custom-text-200" />
-      </div>
-    </div>
-  );
-});

web/components/estimates/points/index.ts

@@ -1,3 +1,10 @@
+export * from "./create-root";
+export * from "./edit-root";
+
+export * from "./preview";
 export * from "./create";
-export * from "./edit";
+export * from "./update";
+export * from "./delete";
+export * from "./select-dropdown";
+
 export * from "./switch";

web/components/estimates/points/preview.tsx

@@ -1,22 +1,34 @@
 import { FC, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { GripVertical, Pencil, Trash2 } from "lucide-react";
+import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
 // components
 import { EstimatePointUpdate, EstimatePointDelete } from "@/components/estimates/points";
-// hooks
-import { useEstimatePoint } from "@/hooks/store";
 
 type TEstimatePointItemPreview = {
   workspaceSlug: string;
   projectId: string;
-  estimateId: string;
+  estimateId: string | undefined;
-  estimatePointId: string;
+  estimateType: TEstimateSystemKeys;
+  estimatePointId: string | undefined;
+  estimatePoint: TEstimatePointsObject;
+  estimatePoints: TEstimatePointsObject[];
+  handleEstimatePointValueUpdate?: (estimateValue: string) => void;
+  handleEstimatePointValueRemove?: () => void;
 };
 
 export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer((props) => {
-  const { workspaceSlug, projectId, estimateId, estimatePointId } = props;
+  const {
-  // hooks
+    workspaceSlug,
-  const { asJson: estimatePoint } = useEstimatePoint(estimateId, estimatePointId);
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePointId,
+    estimatePoint,
+    estimatePoints,
+    handleEstimatePointValueUpdate,
+    handleEstimatePointValueRemove,
+  } = props;
   // state
   const [estimatePointEditToggle, setEstimatePointEditToggle] = useState(false);
   const [estimatePointDeleteToggle, setEstimatePointDeleteToggle] = useState(false);
@@ -28,7 +40,6 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
       EstimatePointValueRef?.current?.addEventListener("dblclick", () => setEstimatePointEditToggle(true));
   }, [estimatePointDeleteToggle, estimatePointEditToggle]);
 
-  if (!estimatePoint?.id) return <></>;
   return (
     <div>
       {!estimatePointEditToggle && !estimatePointDeleteToggle && (
@@ -38,7 +49,7 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
           </div>
           <div ref={EstimatePointValueRef} className="py-2.5 w-full">
             {estimatePoint?.value ? (
-              estimatePoint?.value
+              `${estimatePoint?.value}`
             ) : (
               <span className="text-custom-text-400">Enter estimate point</span>
             )}
@@ -51,7 +62,11 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
           </div>
           <div
             className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
-            onClick={() => setEstimatePointDeleteToggle(true)}
+            onClick={() =>
+              estimateId && estimatePointId
+                ? setEstimatePointDeleteToggle(true)
+                : handleEstimatePointValueRemove && handleEstimatePointValueRemove()
+            }
           >
             <Trash2 size={14} className="text-custom-text-200" />
           </div>
@@ -63,18 +78,24 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
           workspaceSlug={workspaceSlug}
           projectId={projectId}
           estimateId={estimateId}
+          estimateType={estimateType}
           estimatePointId={estimatePointId}
-          callback={() => setEstimatePointEditToggle(false)}
+          estimatePoints={estimatePoints}
+          estimatePoint={estimatePoint}
+          handleEstimatePointValueUpdate={(estimatePointValue: string) =>
+            handleEstimatePointValueUpdate && handleEstimatePointValueUpdate(estimatePointValue)
+          }
+          closeCallBack={() => setEstimatePointEditToggle(false)}
         />
       )}
 
-      {estimatePoint && estimatePointDeleteToggle && (
+      {estimateId && estimatePointId && estimatePointDeleteToggle && (
         <EstimatePointDelete
           workspaceSlug={workspaceSlug}
           projectId={projectId}
           estimateId={estimateId}
           estimatePointId={estimatePointId}
-          callback={() => setEstimatePointDeleteToggle(false)}
+          callback={() => estimateId && setEstimatePointDeleteToggle(false)}
         />
       )}
     </div>

web/components/estimates/points/select-dropdown.tsx

@@ -29,7 +29,15 @@ export const EstimatePointDropdown: FC<TEstimatePointDropdown> = (props) => {
   useOutsideClickDetector(dropdownContainerRef, () => setIsDropdownOpen(false));
 
   // derived values
-  const selectedValue = options.find((option) => option?.id === selectedOption) || undefined;
+  const selectedValue = selectedOption
+    ? selectedOption === "none"
+      ? {
+          id: undefined,
+          key: undefined,
+          value: "None",
+        }
+      : options.find((option) => option?.id === selectedOption)
+    : undefined;
 
   return (
     <div ref={dropdownContainerRef} className="w-full relative">

web/components/estimates/points/update.tsx

@@ -0,0 +1,161 @@
+import { FC, FormEvent, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { Check, Info, X } from "lucide-react";
+import { TEstimatePointsObject, TEstimateSystemKeys } from "@plane/types";
+import { Spinner, Tooltip } from "@plane/ui";
+// constants
+import { EEstimateSystem } from "@/constants/estimates";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { isEstimatePointValuesRepeated } from "@/helpers/estimates";
+// hooks
+import { useEstimatePoint } from "@/hooks/store";
+
+type TEstimatePointUpdate = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimatePointId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  estimatePoint: TEstimatePointsObject;
+  handleEstimatePointValueUpdate: (estimateValue: string) => void;
+  closeCallBack: () => void;
+};
+
+export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimatePointId,
+    estimateType,
+    estimatePoints,
+    estimatePoint,
+    handleEstimatePointValueUpdate,
+    closeCallBack,
+  } = props;
+  // hooks
+  const { updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
+  // states
+  const [loader, setLoader] = useState(false);
+  const [estimateInputValue, setEstimateInputValue] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (estimateInputValue === undefined && estimatePoint) setEstimateInputValue(estimatePoint?.value || "");
+  }, [estimateInputValue, estimatePoint]);
+
+  const handleSuccess = (value: string) => {
+    handleEstimatePointValueUpdate(value);
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleClose = () => {
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleUpdate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!workspaceSlug || !projectId) return;
+
+    setError(undefined);
+
+    if (estimateInputValue) {
+      const currentEstimateType: EEstimateSystem | undefined = estimateType;
+      let isEstimateValid = false;
+
+      const currentEstimatePointValues = estimatePoints
+        .map((point) => point?.value || undefined)
+        .filter((value) => value != undefined) as string[];
+      const isRepeated =
+        (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
+        false;
+
+      if (!isRepeated) {
+        if (currentEstimateType && [(EEstimateSystem.TIME, EEstimateSystem.POINTS)].includes(currentEstimateType)) {
+          if (estimateInputValue && Number(estimateInputValue) && Number(estimateInputValue) >= 0) {
+            isEstimateValid = true;
+          }
+        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
+          if (estimateInputValue && estimateInputValue.length > 0) {
+            isEstimateValid = true;
+          }
+        }
+
+        if (isEstimateValid) {
+          if (estimateId != undefined) {
+            try {
+              setLoader(true);
+
+              const payload = {
+                value: estimateInputValue,
+              };
+              await updateEstimatePoint(workspaceSlug, projectId, payload);
+
+              setLoader(false);
+              setError(undefined);
+              handleClose();
+            } catch {
+              setLoader(false);
+              setError("something went wrong. please try again later");
+            }
+          } else {
+            handleSuccess(estimateInputValue);
+            setError("Please fill the input field");
+          }
+        } else {
+          setLoader(false);
+          setError("please enter a valid estimate value");
+        }
+      } else setError("Estimate point values cannot be repeated");
+    } else setError("Please fill the input field");
+  };
+
+  return (
+    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 text-base">
+      <div
+        className={cn(
+          "relative w-full border rounded flex items-center",
+          error ? `border-red-500` : `border-custom-border-200`
+        )}
+      >
+        <input
+          type="text"
+          value={estimateInputValue}
+          onChange={(e) => setEstimateInputValue(e.target.value)}
+          className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
+          placeholder="Enter estimate point"
+          autoFocus
+        />
+        {error && (
+          <>
+            <Tooltip tooltipContent={error} position="bottom">
+              <div className="flex-shrink-0 w-3.5 h-3.5 overflow-hidden mr-3 relative flex justify-center items-center text-red-500">
+                <Info size={14} />
+              </div>
+            </Tooltip>
+          </>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer text-green-500"
+        disabled={loader}
+      >
+        {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
+      </button>
+      <button
+        className="rounded-sm w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-custom-background-80 transition-colors cursor-pointer"
+        onClick={handleClose}
+        disabled={loader}
+      >
+        <X size={14} className="text-custom-text-200" />
+      </button>
+    </form>
+  );
+});