chore: handled estimates switch

web/components/estimates/points/index.ts

@@ -2,3 +2,4 @@ export * from "./estimate-point-item";
 export * from "./inline-editable";
 
 export * from "./edit";
+export * from "./switch";

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

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

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

@@ -0,0 +1,40 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { MoveRight } from "lucide-react";
+import { TEstimatePointsObject } from "@plane/types";
+// hooks
+import { useEstimatePoint } from "@/hooks/store";
+
+type TEstimatePointItemSwitchPreview = {
+  estimateId: string;
+  estimatePointId: string | undefined;
+  estimatePoint: TEstimatePointsObject;
+  handleEstimatePoint: (value: string) => void;
+};
+
+export const EstimatePointItemSwitchPreview: FC<TEstimatePointItemSwitchPreview> = observer((props) => {
+  const { estimateId, estimatePointId, estimatePoint: currentEstimatePoint, handleEstimatePoint } = props;
+  // hooks
+  const { asJson: estimatePoint } = useEstimatePoint(estimateId, estimatePointId);
+
+  if (!estimatePoint) return <></>;
+  return (
+    <div className="relative flex items-center gap-2">
+      <div className="w-full border border-custom-border-200 rounded p-2.5 bg-custom-background-90">
+        {estimatePoint?.value}
+      </div>
+      <div className="flex-shrink-0 w-4 h-4 relative flex justify-center items-center">
+        <MoveRight size={12} />
+      </div>
+      <div className="relative w-full border rounded flex items-center border-custom-border-200">
+        <input
+          type="text"
+          value={currentEstimatePoint?.value}
+          onChange={(e) => handleEstimatePoint(e.target.value)}
+          className="border-none focus:ring-0 focus:border-0 focus:outline-none p-2.5 w-full bg-transparent"
+          autoFocus
+        />
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,66 @@
+import { FC, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { TEstimatePointsObject } from "@plane/types";
+// components
+import { EstimatePointItemSwitchPreview } from "@/components/estimates/points";
+// constants
+import { EEstimateSystem, EEstimateUpdateStages } from "@/constants/estimates";
+// hooks
+import { useEstimate } from "@/hooks/store";
+
+type TEstimatePointSwitchRoot = {
+  workspaceSlug: string;
+  projectId: string;
+  estimateId: string;
+  mode?: EEstimateUpdateStages;
+};
+
+export const EstimatePointSwitchRoot: FC<TEstimatePointSwitchRoot> = observer((props) => {
+  // props
+  const { workspaceSlug, projectId, estimateId } = props;
+  // hooks
+  const { asJson: estimate, estimatePointIds, estimatePointById } = useEstimate(estimateId);
+  // states
+  const [estimatePoints, setEstimatePoints] = useState<TEstimatePointsObject[] | undefined>(undefined);
+
+  useEffect(() => {
+    if (!estimatePointIds) return;
+    setEstimatePoints(
+      estimatePointIds.map((estimatePointId: string) => {
+        const estimatePoint = estimatePointById(estimatePointId);
+        if (estimatePoint) return { id: estimatePointId, key: estimatePoint.key, value: "" };
+      }) as TEstimatePointsObject[]
+    );
+  }, [estimatePointById, estimatePointIds]);
+
+  const handleEstimatePoints = (index: number, value: string) => {
+    setEstimatePoints((prevValue) => {
+      prevValue = prevValue ? [...prevValue] : [];
+      prevValue[index].value = value;
+      return prevValue;
+    });
+  };
+
+  if (!workspaceSlug || !projectId || !estimateId || !estimatePoints) return <></>;
+  return (
+    <div className="space-y-3">
+      <div className="text-sm font-medium flex items-center gap-2">
+        <div className="w-full">Current {estimate?.type}</div>
+        <div className="flex-shrink-0 w-4 h-4" />
+        <div className="w-full">
+          New {estimate?.type === EEstimateSystem?.POINTS ? EEstimateSystem?.CATEGORIES : EEstimateSystem?.POINTS}
+        </div>
+      </div>
+
+      {estimatePoints.map((estimateObject, index) => (
+        <EstimatePointItemSwitchPreview
+          key={estimateObject?.id}
+          estimateId={estimateId}
+          estimatePointId={estimateObject.id}
+          estimatePoint={estimateObject}
+          handleEstimatePoint={(value: string) => handleEstimatePoints(index, value)}
+        />
+      ))}
+    </div>
+  );
+});

web/components/estimates/update/modal.tsx

@@ -5,7 +5,9 @@ import { TEstimateUpdateStageKeys } from "@plane/types";
 import { Button } from "@plane/ui";
 // components
 import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
-import { EstimatePointEditRoot, EstimateUpdateStageOne } from "@/components/estimates";
+import { EstimateUpdateStageOne, EstimatePointEditRoot, EstimatePointSwitchRoot } from "@/components/estimates";
+// constants
+import { EEstimateUpdateStages } from "@/constants/estimates";
 
 type TUpdateEstimateModal = {
   workspaceSlug: string;
@@ -21,12 +23,14 @@ export const UpdateEstimateModal: FC<TUpdateEstimateModal> = observer((props) =>
   // states
   const [estimateEditType, setEstimateEditType] = useState<TEstimateUpdateStageKeys | undefined>(undefined);
 
-  const handleEstimateEditType = (type: TEstimateUpdateStageKeys) => setEstimateEditType(type);
-
   useEffect(() => {
     if (!isOpen) setEstimateEditType(undefined);
   }, [isOpen]);
 
+  const handleEstimateEditType = (type: TEstimateUpdateStageKeys) => setEstimateEditType(type);
+
+  const handleSwitchEstimate = () => {};
+
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
       <div className="relative space-y-6 py-5">
@@ -43,17 +47,38 @@ export const UpdateEstimateModal: FC<TUpdateEstimateModal> = observer((props) =>
             )}
             <div className="text-xl font-medium text-custom-text-200">Edit estimate system</div>
           </div>
-          <Button variant="primary" size="sm" onClick={handleClose}>
-            Done
-          </Button>
-        </div>
 
-        <div className="px-5 pb-1">
-          {!estimateEditType && <EstimateUpdateStageOne handleEstimateEditType={handleEstimateEditType} />}
-          {estimateEditType && estimateId && (
-            <EstimatePointEditRoot workspaceSlug={workspaceSlug} projectId={projectId} estimateId={estimateId} />
+          {estimateEditType === EEstimateUpdateStages.EDIT && (
+            <Button variant="primary" size="sm" onClick={handleClose}>
+              Done
+            </Button>
           )}
         </div>
+
+        <div className="px-5">
+          {!estimateEditType && <EstimateUpdateStageOne handleEstimateEditType={handleEstimateEditType} />}
+          {estimateEditType && estimateId && (
+            <>
+              {estimateEditType === EEstimateUpdateStages.EDIT && (
+                <EstimatePointEditRoot workspaceSlug={workspaceSlug} projectId={projectId} estimateId={estimateId} />
+              )}
+              {estimateEditType === EEstimateUpdateStages.SWITCH && (
+                <EstimatePointSwitchRoot workspaceSlug={workspaceSlug} projectId={projectId} estimateId={estimateId} />
+              )}
+            </>
+          )}
+        </div>
+
+        {estimateEditType === EEstimateUpdateStages.SWITCH && (
+          <div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-custom-border-100">
+            <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="sm" onClick={handleSwitchEstimate}>
+              Update
+            </Button>
+          </div>
+        )}
       </div>
     </ModalCore>
   );