Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

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

@@ -0,0 +1,212 @@
+"use client";
+
+import type { FC } from "react";
+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 { ChevronLeftIcon } from "@plane/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: FC<TCreateEstimateModal> = observer((props) => {
+  // 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 justify-between items-center gap-2 px-5">
+          <div className="relative flex items-center gap-1">
+            {estimatePoints && (
+              <div
+                onClick={() => {
+                  setEstimateSystem(EEstimateSystem.POINTS);
+                  handleUpdatePoints(undefined);
+                }}
+                className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
+              >
+                <ChevronLeftIcon className="w-4 h-4" />
+              </div>
+            )}
+            <div className="text-xl font-medium text-custom-text-100">{t("project_settings.estimates.new")}</div>
+          </div>
+          <div className="text-xs text-gray-400">
+            {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-sm text-red-500">
+              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 justify-end items-center gap-3 px-5 pt-5 border-t border-custom-border-200">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose} disabled={buttonLoader}>
+            {t("common.cancel")}
+          </Button>
+          {estimatePoints && (
+            <Button variant="primary" size="sm" 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,121 @@
+"use client";
+
+import type { FC } from "react";
+import { Info } from "lucide-react";
+// plane imports
+import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/propel/tooltip";
+import type { TEstimateSystemKeys } from "@plane/types";
+// components
+import { convertMinutesToHoursMinutesString } from "@plane/utils";
+// plane web imports
+import { isEstimateSystemEnabled } from "@/plane-web/components/estimates/helper";
+import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
+import { RadioInput } from "../radio-select";
+// local imports
+
+type TEstimateCreateStageOne = {
+  estimateSystem: TEstimateSystemKeys;
+  handleEstimateSystem: (value: TEstimateSystemKeys) => void;
+  handleEstimatePoints: (value: string) => void;
+};
+
+export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
+  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="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
+        <RadioInput
+          options={Object.keys(ESTIMATE_SYSTEMS).map((system) => {
+            const currentSystem = system as TEstimateSystemKeys;
+            const isEnabled = isEstimateSystemEnabled(currentSystem);
+            return {
+              label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
+                <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                  {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                  <Tooltip tooltipContent={t("common.coming_soon")}>
+                    <Info size={12} />
+                  </Tooltip>
+                </div>
+              ) : !isEnabled ? (
+                <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                  {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                  <UpgradeBadge />
+                </div>
+              ) : (
+                <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
+              ),
+              value: system,
+              disabled: !isEnabled,
+            };
+          })}
+          name="estimate-radio-input"
+          label={t("project_settings.estimates.create.choose_estimate_system")}
+          labelClassName="text-sm font-medium text-custom-text-200 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-sm font-medium text-custom-text-200">
+              {t("project_settings.estimates.create.start_from_scratch")}
+            </div>
+            <button
+              className="border border-custom-border-200 rounded-md p-3 py-2.5 text-left space-y-1 w-full block hover:bg-custom-background-90"
+              onClick={() => handleEstimatePoints("custom")}
+            >
+              <p className="text-base font-medium">{t("project_settings.estimates.create.custom")}</p>
+              <p className="text-xs text-custom-text-300">
+                {/* 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-sm font-medium text-custom-text-200">
+              {t("project_settings.estimates.create.choose_template")}
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+              {Object.keys(currentEstimateSystem.templates).map((name) =>
+                currentEstimateSystem.templates[name]?.hide ? null : (
+                  <button
+                    key={name}
+                    className="border border-custom-border-200 rounded-md p-3 py-2.5 text-left space-y-1 hover:bg-custom-background-90"
+                    onClick={() => handleEstimatePoints(name)}
+                  >
+                    <p className="text-base font-medium">{currentEstimateSystem.templates[name]?.title}</p>
+                    <p className="text-xs text-custom-text-300">
+                      {currentEstimateSystem.templates[name]?.values
+                        ?.map((template) =>
+                          estimateSystem === EEstimateSystem.TIME
+                            ? convertMinutesToHoursMinutesString(Number(template.value)).trim()
+                            : template.value
+                        )
+                        ?.join(", ")}
+                    </p>
+                  </button>
+                )
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+//