feat: init

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

@@ -0,0 +1,176 @@
+"use client";
+
+import type { Dispatch, FC, SetStateAction } from "react";
+import { useCallback, useState } from "react";
+import { observer } from "mobx-react";
+import { Plus } from "lucide-react";
+// plane imports
+import { estimateCount } from "@plane/constants";
+import { Button } from "@plane/propel/button";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeError } from "@plane/types";
+import { Sortable } from "@plane/ui";
+// local imports
+import { EstimatePointCreate } from "./create";
+import { EstimatePointItemPreview } from "./preview";
+
+type TEstimatePointCreateRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  setEstimatePoints: Dispatch<SetStateAction<TEstimatePointsObject[] | undefined>>;
+  estimatePointError?: TEstimateTypeError;
+  handleEstimatePointError?: (
+    key: number,
+    oldValue: string,
+    newValue: string,
+    message: string | undefined,
+    mode: "add" | "delete"
+  ) => void;
+};
+
+export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((props) => {
+  // props
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePoints,
+    setEstimatePoints,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // 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 }));
+    setEstimatePoints(() => updatedEstimateKeysOrder);
+  };
+
+  const handleCreate = () => {
+    if (estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1) {
+      const currentKey = estimatePoints.length + (estimatePointCreate?.length || 0) + 1;
+      handleEstimatePointCreate("add", {
+        id: undefined,
+        key: currentKey,
+        value: "",
+      });
+      handleEstimatePointError?.(currentKey, "", "", undefined, "add");
+    }
+  };
+
+  if (!workspaceSlug || !projectId) return <></>;
+  return (
+    <div className="space-y-1">
+      <div className="text-sm font-medium text-custom-text-200 capitalize">{estimateType}</div>
+
+      <div>
+        <Sortable
+          data={estimatePoints}
+          render={(value: TEstimatePointsObject) => (
+            <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)}
+              estimatePointError={estimatePointError?.[value.key] || undefined}
+              handleEstimatePointError={(
+                newValue: string,
+                message: string | undefined,
+                mode: "add" | "delete" = "add"
+              ) =>
+                handleEstimatePointError && handleEstimatePointError(value.key, value.value, newValue, message, mode)
+              }
+            />
+          )}
+          onChange={(data: TEstimatePointsObject[]) => handleDragEstimatePoints(data)}
+          keyExtractor={(item: TEstimatePointsObject) => item?.id?.toString() || item.value.toString()}
+        />
+      </div>
+
+      {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)}
+            handleCreateCallback={() => estimatePointCreate.length === 1 && handleCreate()}
+            estimatePointError={estimatePointError?.[estimatePoint.key] || undefined}
+            handleEstimatePointError={(newValue: string, message: string | undefined, mode: "add" | "delete" = "add") =>
+              handleEstimatePointError &&
+              handleEstimatePointError(estimatePoint.key, estimatePoint.value, newValue, message, mode)
+            }
+          />
+        ))}
+      {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
+        <Button variant="link-primary" size="sm" prependIcon={<Plus />} onClick={handleCreate}>
+          Add {estimateType}
+        </Button>
+      )}
+    </div>
+  );
+});

apps/web/core/components/estimates/points/create.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import type { FC, FormEvent } from "react";
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Check, Info, X } from "lucide-react";
+import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { cn, isEstimatePointValuesRepeated } from "@plane/utils";
+import { EstimateInputRoot } from "@/components/estimates/inputs/root";
+// helpers
+// hooks
+import { useEstimate } from "@/hooks/store/estimates/use-estimate";
+// plane web constants
+
+type TEstimatePointCreate = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  handleEstimatePointValue?: (estimateValue: string) => void;
+  closeCallBack: () => void;
+  handleCreateCallback: () => void;
+  estimatePointError?: TEstimateTypeErrorObject | undefined;
+  handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
+};
+
+export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePoints,
+    handleEstimatePointValue,
+    closeCallBack,
+    handleCreateCallback,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // hooks
+  const { creteEstimatePoint } = useEstimate(estimateId);
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [estimateInputValue, setEstimateInputValue] = useState("");
+  const [loader, setLoader] = useState(false);
+
+  const handleSuccess = (value: string) => {
+    handleEstimatePointValue && handleEstimatePointValue(value);
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleClose = () => {
+    handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
+    setEstimateInputValue("");
+    closeCallBack();
+  };
+
+  const handleEstimateInputValue = (value: string) => {
+    if (value.length <= MAX_ESTIMATE_POINT_INPUT_LENGTH) {
+      setEstimateInputValue(value);
+      if (handleEstimatePointError) handleEstimatePointError(value, undefined);
+    }
+  };
+
+  const handleCreate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!workspaceSlug || !projectId) return;
+
+    if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined, "delete");
+
+    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 && !isNaN(Number(estimateInputValue))) {
+            if (Number(estimateInputValue) <= 0) {
+              if (handleEstimatePointError)
+                handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.min_length"));
+              return;
+            } else {
+              isEstimateValid = true;
+            }
+          }
+        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
+          if (estimateInputValue && estimateInputValue.length > 0 && isNaN(Number(estimateInputValue))) {
+            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);
+              handleEstimatePointError && handleEstimatePointError(estimateInputValue, undefined, "delete");
+              setToast({
+                type: TOAST_TYPE.SUCCESS,
+                title: t("project_settings.estimates.toasts.created.success.title"),
+                message: t("project_settings.estimates.toasts.created.success.message"),
+              });
+              handleClose();
+            } catch {
+              setLoader(false);
+              handleEstimatePointError &&
+                handleEstimatePointError(
+                  estimateInputValue,
+                  t("project_settings.estimates.validation.unable_to_process")
+                );
+              setToast({
+                type: TOAST_TYPE.ERROR,
+                title: t("project_settings.estimates.toasts.created.error.title"),
+                message: t("project_settings.estimates.toasts.created.error.message"),
+              });
+            }
+          } else {
+            handleSuccess(estimateInputValue);
+            if (handleCreateCallback) {
+              handleCreateCallback();
+            }
+          }
+        } else {
+          setLoader(false);
+          handleEstimatePointError &&
+            handleEstimatePointError(
+              estimateInputValue,
+              [EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)
+                ? t("project_settings.estimates.validation.numeric")
+                : t("project_settings.estimates.validation.character")
+            );
+        }
+      } else
+        handleEstimatePointError &&
+          handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.already_exists"));
+    } else
+      handleEstimatePointError &&
+        handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.empty"));
+  };
+
+  // derived values
+  const inputProps = {
+    type: "text",
+    maxlength: MAX_ESTIMATE_POINT_INPUT_LENGTH,
+  };
+
+  return (
+    <form onSubmit={handleCreate} className="relative flex items-center gap-2 text-base pr-2.5">
+      <div
+        className={cn(
+          "relative w-full border rounded flex items-center my-1",
+          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+        )}
+      >
+        <EstimateInputRoot
+          estimateType={estimateType}
+          handleEstimateInputValue={handleEstimateInputValue}
+          value={estimateInputValue}
+        />
+        {estimatePointError?.message && (
+          <Tooltip tooltipContent={estimatePointError?.message} 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>
+
+      {estimateInputValue && estimateInputValue.length > 0 && (
+        <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
+        type="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>
+  );
+});

apps/web/core/components/estimates/points/index.ts

@@ -0,0 +1 @@
+export * from "./create-root";

apps/web/core/components/estimates/points/preview.tsx

@@ -0,0 +1,126 @@
+import type { FC } from "react";
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { GripVertical, Pencil, Trash2 } from "lucide-react";
+// plane imports
+import { EEstimateSystem, estimateCount } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// plane web imports
+import { EstimatePointDelete } from "@/plane-web/components/estimates";
+// local imports
+import { EstimatePointUpdate } from "./update";
+
+type TEstimatePointItemPreview = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePointId: string | undefined;
+  estimatePoint: TEstimatePointsObject;
+  estimatePoints: TEstimatePointsObject[];
+  handleEstimatePointValueUpdate?: (estimateValue: string) => void;
+  handleEstimatePointValueRemove?: () => void;
+  estimatePointError?: TEstimateTypeErrorObject | undefined;
+  handleEstimatePointError?: (newValue: string, message: string | undefined) => void;
+};
+
+export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimateType,
+    estimatePointId,
+    estimatePoint,
+    estimatePoints,
+    handleEstimatePointValueUpdate,
+    handleEstimatePointValueRemove,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // state
+  const [estimatePointEditToggle, setEstimatePointEditToggle] = useState(false);
+  const [estimatePointDeleteToggle, setEstimatePointDeleteToggle] = useState(false);
+  // ref
+  const EstimatePointValueRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!estimatePointEditToggle && !estimatePointDeleteToggle)
+      EstimatePointValueRef?.current?.addEventListener("dblclick", () => setEstimatePointEditToggle(true));
+  }, [estimatePointDeleteToggle, estimatePointEditToggle]);
+
+  return (
+    <div>
+      {!estimatePointEditToggle && !estimatePointDeleteToggle && (
+        <div className="border border-custom-border-200 rounded relative flex items-center px-1 gap-2 text-base my-1">
+          <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 w-full text-sm">
+            {estimatePoint?.value ? (
+              `${estimateType === EEstimateSystem.TIME ? convertMinutesToHoursMinutesString(Number(estimatePoint?.value)) : estimatePoint?.value}`
+            ) : (
+              <span className="text-custom-text-400">
+                {t("project_settings.estimates.create.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>
+          {estimatePoints.length > estimateCount.min && (
+            <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={() =>
+                estimateId && estimatePointId
+                  ? setEstimatePointDeleteToggle(true)
+                  : handleEstimatePointValueRemove && handleEstimatePointValueRemove()
+              }
+            >
+              <Trash2 size={14} className="text-custom-text-200" />
+            </div>
+          )}
+        </div>
+      )}
+
+      {estimatePoint && estimatePointEditToggle && (
+        <EstimatePointUpdate
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          estimateId={estimateId}
+          estimateType={estimateType}
+          estimatePointId={estimatePointId}
+          estimatePoints={estimatePoints}
+          estimatePoint={estimatePoint}
+          handleEstimatePointValueUpdate={(estimatePointValue: string) =>
+            handleEstimatePointValueUpdate && handleEstimatePointValueUpdate(estimatePointValue)
+          }
+          closeCallBack={() => setEstimatePointEditToggle(false)}
+          estimatePointError={estimatePointError}
+          handleEstimatePointError={handleEstimatePointError}
+        />
+      )}
+
+      {estimateId && estimatePointId && estimatePointDeleteToggle && (
+        <EstimatePointDelete
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          estimateId={estimateId}
+          estimatePointId={estimatePointId}
+          estimatePoints={estimatePoints}
+          callback={() => estimateId && setEstimatePointDeleteToggle(false)}
+          estimatePointError={estimatePointError}
+          handleEstimatePointError={handleEstimatePointError}
+          estimateSystem={estimateType}
+        />
+      )}
+    </div>
+  );
+});

apps/web/core/components/estimates/points/update.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import type { FC, FormEvent } from "react";
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { Check, Info, X } from "lucide-react";
+import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
+import { Spinner } from "@plane/ui";
+import { cn, isEstimatePointValuesRepeated } from "@plane/utils";
+import { EstimateInputRoot } from "@/components/estimates/inputs/root";
+// helpers
+// hooks
+import { useEstimatePoint } from "@/hooks/store/estimates/use-estimate-point";
+// plane web constants
+
+type TEstimatePointUpdate = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string | undefined;
+  estimatePointId: string | undefined;
+  estimateType: TEstimateSystemKeys;
+  estimatePoints: TEstimatePointsObject[];
+  estimatePoint: TEstimatePointsObject;
+  handleEstimatePointValueUpdate: (estimateValue: string) => void;
+  closeCallBack: () => void;
+  estimatePointError?: TEstimateTypeErrorObject | undefined;
+  handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
+};
+
+export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) => {
+  const {
+    workspaceSlug,
+    projectId,
+    estimateId,
+    estimatePointId,
+    estimateType,
+    estimatePoints,
+    estimatePoint,
+    handleEstimatePointValueUpdate,
+    closeCallBack,
+    estimatePointError,
+    handleEstimatePointError,
+  } = props;
+  // hooks
+  const { updateEstimatePoint } = useEstimatePoint(estimateId, estimatePointId);
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [loader, setLoader] = useState(false);
+  const [estimateInputValue, setEstimateInputValue] = 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 handleEstimateInputValue = (value: string) => {
+    if (value.length <= MAX_ESTIMATE_POINT_INPUT_LENGTH) {
+      setEstimateInputValue(() => value);
+      handleEstimatePointError && handleEstimatePointError(value, undefined);
+    }
+  };
+
+  const handleUpdate = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    if (!workspaceSlug || !projectId) return;
+
+    handleEstimatePointError && handleEstimatePointError(estimateInputValue || "", undefined, "delete");
+
+    if (estimateInputValue) {
+      const currentEstimateType: EEstimateSystem | undefined = estimateType;
+      let isEstimateValid = false;
+
+      const currentEstimatePointValues = estimatePoints
+        .map((point) => (point?.key != estimatePoint?.key ? 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 && !isNaN(Number(estimateInputValue))) {
+            if (Number(estimateInputValue) <= 0) {
+              if (handleEstimatePointError)
+                handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.min_length"));
+              return;
+            } else {
+              isEstimateValid = true;
+            }
+          }
+        } else if (currentEstimateType && currentEstimateType === EEstimateSystem.CATEGORIES) {
+          if (estimateInputValue && estimateInputValue.length > 0 && isNaN(Number(estimateInputValue))) {
+            isEstimateValid = true;
+          }
+        }
+
+        if (isEstimateValid) {
+          if (estimateId != undefined) {
+            if (estimateInputValue === estimatePoint.value) {
+              setLoader(false);
+              if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined);
+
+              handleClose();
+            } else
+              try {
+                setLoader(true);
+
+                const payload = {
+                  value: estimateInputValue,
+                };
+                await updateEstimatePoint(workspaceSlug, projectId, payload);
+
+                setLoader(false);
+                if (handleEstimatePointError) handleEstimatePointError(estimateInputValue, undefined, "delete");
+                handleClose();
+                setToast({
+                  type: TOAST_TYPE.SUCCESS,
+                  title: t("project_settings.estimates.toasts.updated.success.title"),
+                  message: t("project_settings.estimates.toasts.updated.success.message"),
+                });
+              } catch {
+                setLoader(false);
+                if (handleEstimatePointError)
+                  handleEstimatePointError(
+                    estimateInputValue,
+                    t("project_settings.estimates.validation.unable_to_process")
+                  );
+                setToast({
+                  type: TOAST_TYPE.ERROR,
+                  title: t("project_settings.estimates.toasts.updated.error.title"),
+                  message: t("project_settings.estimates.toasts.updated.error.message"),
+                });
+              }
+          } else {
+            handleSuccess(estimateInputValue);
+          }
+        } else {
+          setLoader(false);
+          if (handleEstimatePointError)
+            handleEstimatePointError(
+              estimateInputValue,
+              [EEstimateSystem.POINTS, EEstimateSystem.TIME].includes(estimateType)
+                ? t("project_settings.estimates.validation.numeric")
+                : t("project_settings.estimates.validation.character")
+            );
+        }
+      } else if (handleEstimatePointError)
+        handleEstimatePointError(estimateInputValue, t("project_settings.estimates.validation.already_exists"));
+    } else if (handleEstimatePointError)
+      handleEstimatePointError(estimateInputValue || "", t("project_settings.estimates.validation.empty"));
+  };
+
+  return (
+    <form onSubmit={handleUpdate} className="relative flex items-center gap-2 text-base pr-2.5">
+      <div
+        className={cn(
+          "relative w-full border rounded flex items-center my-1",
+          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+        )}
+      >
+        <EstimateInputRoot
+          estimateType={estimateType}
+          handleEstimateInputValue={handleEstimateInputValue}
+          value={estimateInputValue}
+        />
+        {estimatePointError?.message && (
+          <>
+            <Tooltip
+              tooltipContent={
+                (estimateInputValue || "")?.length >= 1
+                  ? t("project_settings.estimates.validation.unsaved_changes")
+                  : estimatePointError?.message
+              }
+              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>
+
+      {estimateInputValue && estimateInputValue.length > 0 && (
+        <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
+        type="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>
+  );
+});