snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { TEstimateSystemKeys } from "@plane/types";
+import { EEstimateSystem } from "@plane/types";
+
+export const isEstimateSystemEnabled = (key: TEstimateSystemKeys) => {
+  switch (key) {
+    case EEstimateSystem.POINTS:
+      return true;
+    case EEstimateSystem.CATEGORIES:
+      return true;
+    default:
+      return false;
+  }
+};

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

@@ -0,0 +1,215 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { ChevronLeftOutline } from "@makeplane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// hooks
+import { useProjectEstimates } from "@/hooks/store/estimates";
+// local imports
+import { EstimatePointCreateRoot } from "../points";
+import { EstimateCreateStageOne } from "./stage-one";
+
+type TCreateEstimateModal = {
+  workspaceSlug: string;
+  projectId: string;
+  isOpen: boolean;
+  handleClose: () => void;
+};
+
+export const CreateEstimateModal = observer(function CreateEstimateModal(props: TCreateEstimateModal) {
+  // props
+  const { workspaceSlug, projectId, isOpen, handleClose } = props;
+  // hooks
+  const { createEstimate } = useProjectEstimates();
+  const { t } = useTranslation();
+  // states
+  const [estimateSystem, setEstimateSystem] = useState<TEstimateSystemKeys>(EEstimateSystem.POINTS);
+  const [estimatePoints, setEstimatePoints] = useState<TEstimatePointsObject[] | undefined>(undefined);
+  const [estimatePointError, setEstimatePointError] = useState<TEstimateTypeError>(undefined);
+  const [buttonLoader, setButtonLoader] = useState(false);
+
+  const handleUpdatePoints = (newPoints: TEstimatePointsObject[] | undefined) => setEstimatePoints(newPoints);
+
+  const handleEstimatePointError = (
+    key: number,
+    oldValue: string,
+    newValue: string,
+    message: string | undefined,
+    mode: "add" | "delete" = "add"
+  ) => {
+    setEstimatePointError((prev) => {
+      if (mode === "add") {
+        return { ...prev, [key]: { oldValue, newValue, message } };
+      } else {
+        const newError = { ...prev };
+        delete newError[key];
+        return newError;
+      }
+    });
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setEstimateSystem(EEstimateSystem.POINTS);
+      setEstimatePoints(undefined);
+      setEstimatePointError([]);
+    }
+  }, [isOpen]);
+
+  const validateEstimatePointError = () => {
+    let estimateError = false;
+    if (!estimatePointError) return estimateError;
+
+    Object.keys(estimatePointError || {}).forEach((key) => {
+      const currentKey = key as unknown as number;
+      if (
+        estimatePointError[currentKey]?.oldValue != estimatePointError[currentKey]?.newValue ||
+        estimatePointError[currentKey]?.newValue === "" ||
+        estimatePointError[currentKey]?.message
+      ) {
+        estimateError = true;
+      }
+    });
+
+    return estimateError;
+  };
+
+  const handleCreateEstimate = async () => {
+    if (!validateEstimatePointError()) {
+      try {
+        if (!workspaceSlug || !projectId || !estimatePoints) return;
+        setButtonLoader(true);
+        const payload: IEstimateFormData = {
+          estimate: {
+            name: ESTIMATE_SYSTEMS[estimateSystem]?.name,
+            type: estimateSystem,
+            last_used: true,
+          },
+          estimate_points: estimatePoints,
+        };
+        await createEstimate(workspaceSlug, projectId, payload);
+        setButtonLoader(false);
+        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 {
+        setButtonLoader(false);
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("project_settings.estimates.toasts.created.error.title"),
+          message: t("project_settings.estimates.toasts.created.error.message"),
+        });
+      }
+    } else {
+      setEstimatePointError((prev) => {
+        const newError = { ...prev };
+        Object.keys(newError || {}).forEach((key) => {
+          const currentKey = key as unknown as number;
+          if (
+            newError[currentKey]?.newValue != "" &&
+            newError[currentKey]?.oldValue === newError[currentKey]?.newValue
+          ) {
+            delete newError[currentKey];
+          } else {
+            newError[currentKey].message =
+              newError[currentKey].message || t("project_settings.estimates.validation.remove_empty");
+          }
+        });
+        return newError;
+      });
+    }
+  };
+
+  // derived values
+  const renderEstimateStepsCount = useMemo(() => (estimatePoints ? "2" : "1"), [estimatePoints]);
+  // const isEstimatePointError = useMemo(() => {
+  //   if (!estimatePointError) return false;
+  //   return Object.keys(estimatePointError).length > 0;
+  // }, [estimatePointError]);
+
+  return (
+    <ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
+      <div className="relative space-y-6 py-5">
+        {/* heading */}
+        <div className="relative flex items-center justify-between gap-2 px-5">
+          <div className="relative flex items-center gap-1">
+            {estimatePoints && (
+              <div
+                onClick={() => {
+                  setEstimateSystem(EEstimateSystem.POINTS);
+                  handleUpdatePoints(undefined);
+                }}
+                className="flex h-5 w-5 flex-shrink-0 cursor-pointer items-center justify-center"
+              >
+                <ChevronLeftOutline className="h-4 w-4" />
+              </div>
+            )}
+            <div className="text-18 font-medium text-primary">{t("project_settings.estimates.new")}</div>
+          </div>
+          <div className="text-gray-400 text-11">
+            {t("project_settings.estimates.create.step", {
+              step: renderEstimateStepsCount,
+              total: 2,
+            })}
+          </div>
+        </div>
+
+        {/* estimate steps */}
+        <div className="px-5">
+          {!estimatePoints && (
+            <EstimateCreateStageOne
+              estimateSystem={estimateSystem}
+              handleEstimateSystem={setEstimateSystem}
+              handleEstimatePoints={(templateType: string) =>
+                handleUpdatePoints(ESTIMATE_SYSTEMS[estimateSystem].templates[templateType].values)
+              }
+            />
+          )}
+          {estimatePoints && (
+            <EstimatePointCreateRoot
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              estimateId={undefined}
+              estimateType={estimateSystem}
+              estimatePoints={estimatePoints}
+              setEstimatePoints={setEstimatePoints}
+              estimatePointError={estimatePointError}
+              handleEstimatePointError={handleEstimatePointError}
+            />
+          )}
+          {/* {isEstimatePointError && (
+            <div className="pt-5 text-13 text-danger-primary">
+              Estimate points can&apos;t be empty. Enter a value in each field or remove those you don&apos;t have
+              values for.
+            </div>
+          )} */}
+        </div>
+
+        <div className="relative flex items-center justify-end gap-3 border-t border-subtle px-5 pt-5">
+          <Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
+            {t("common.cancel")}
+          </Button>
+          {estimatePoints && (
+            <Button variant="primary" size="lg" onClick={handleCreateEstimate} disabled={buttonLoader}>
+              {buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
+            </Button>
+          )}
+        </div>
+      </div>
+    </ModalCore>
+  );
+});

apps/web/core/components/estimates/create/stage-one.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { InfoOutline } from "@makeplane/propel/icons";
+// plane imports
+import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import type { TEstimateSystemKeys } from "@plane/types";
+// helpers
+import { isEstimateSystemEnabled } from "./helper";
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// components
+import { UpgradeBadge } from "@/components/workspace/upgrade-badge";
+import { RadioInput } from "../radio-select";
+
+type TEstimateCreateStageOne = {
+  estimateSystem: TEstimateSystemKeys;
+  handleEstimateSystem: (value: TEstimateSystemKeys) => void;
+  handleEstimatePoints: (value: string) => void;
+};
+
+export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
+  const { estimateSystem, handleEstimateSystem, handleEstimatePoints } = props;
+
+  // i18n
+  const { t } = useTranslation();
+
+  const currentEstimateSystem = ESTIMATE_SYSTEMS[estimateSystem] || undefined;
+
+  if (!currentEstimateSystem) return <></>;
+  return (
+    <div className="space-y-6">
+      <div className="mb-2 gap-2 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
+        <RadioInput
+          options={Object.keys(ESTIMATE_SYSTEMS)
+            .map((system) => {
+              const currentSystem = system as TEstimateSystemKeys;
+              const isEnabled = isEstimateSystemEnabled(currentSystem);
+              if (!isEnabled) return null;
+              return {
+                label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <Tooltip label={t("common.coming_soon")}>
+                      <InfoOutline width={12} height={12} />
+                    </Tooltip>
+                  </div>
+                ) : !isEnabled ? (
+                  <div className="relative flex cursor-no-drop items-center gap-2 text-tertiary">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <UpgradeBadge />
+                  </div>
+                ) : (
+                  <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
+                ),
+                value: system,
+                disabled: !isEnabled,
+              };
+            })
+            .filter((option) => option !== null)}
+          name="estimate-radio-input"
+          label={t("project_settings.estimates.create.choose_estimate_system")}
+          labelClassName="text-13 font-medium text-secondary mb-1.5"
+          wrapperClassName="relative flex flex-wrap gap-14"
+          fieldClassName="relative flex items-center gap-1.5"
+          buttonClassName="size-4"
+          selected={estimateSystem}
+          onChange={(value) => handleEstimateSystem(value as TEstimateSystemKeys)}
+        />
+      </div>
+      {ESTIMATE_SYSTEMS[estimateSystem]?.is_available && !ESTIMATE_SYSTEMS[estimateSystem]?.is_ee && (
+        <>
+          <div className="space-y-1.5">
+            <div className="text-13 font-medium text-secondary">
+              {t("project_settings.estimates.create.start_from_scratch")}
+            </div>
+            <button
+              className="block w-full space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-layer-transparent-hover"
+              onClick={() => handleEstimatePoints("custom")}
+            >
+              <p className="text-14 font-medium">{t("project_settings.estimates.create.custom")}</p>
+              <p className="text-11 text-tertiary">
+                {/* TODO: Translate here */}
+                Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch.
+              </p>
+            </button>
+          </div>
+
+          <div className="space-y-1.5">
+            <div className="text-13 font-medium text-secondary">
+              {t("project_settings.estimates.create.choose_template")}
+            </div>
+            <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
+              {Object.keys(currentEstimateSystem.templates).map((name) =>
+                currentEstimateSystem.templates[name]?.hide ? null : (
+                  <button
+                    key={name}
+                    className="space-y-1 rounded-md border border-subtle p-3 py-2.5 text-left hover:bg-surface-2"
+                    onClick={() => handleEstimatePoints(name)}
+                  >
+                    <p className="text-14 font-medium">{currentEstimateSystem.templates[name]?.title}</p>
+                    <p className="text-11 text-tertiary">
+                      {currentEstimateSystem.templates[name]?.values
+                        ?.map((template) =>
+                          estimateSystem === (EEstimateSystem.TIME as TEstimateSystemKeys)
+                            ? convertMinutesToHoursMinutesString(Number(template.value)).trim()
+                            : template.value
+                        )
+                        ?.join(", ")}
+                    </p>
+                  </button>
+                )
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+//