chore: handled active and availability vadilation

packages/types/src/estimate.d.ts

@@ -63,6 +63,7 @@ export type TEstimateSystem = {
   name: string;
   templates: Record<string, TTemplateValues>;
   is_available: boolean;
+  is_active: boolean;
 };
 
 export type TEstimateSystems = {

web/components/estimates/create/modal.tsx

@@ -113,7 +113,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
             {estimatePoints && (
               <div
                 onClick={() => {
-                  setEstimateSystem(EEstimateSystem.POINTS);
+                  setEstimateSystem(EEstimateSystem.CATEGORIES);
                   handleUpdatePoints(undefined);
                 }}
                 className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
@@ -123,7 +123,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
             )}
             <div className="text-xl font-medium text-custom-text-100">New Estimate System</div>
           </div>
-          <div className="text-xs text-gray-400">Step {renderEstimateStepsCount}/2</div>
+          <div className="text-xs text-gray-400">Step {renderEstimateStepsCount} of 2</div>
         </div>
 
         {/* estimate steps */}

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Info } from "lucide-react";
+import { Crown, Info } from "lucide-react";
 import { TEstimateSystemKeys } from "@plane/types";
 import { RadioInput, Tooltip } from "@plane/ui";
 // constants
@@ -19,7 +19,7 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
   if (!currentEstimateSystem) return <></>;
   return (
     <div className="space-y-6">
-      <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
+      <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;
@@ -27,19 +27,26 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
               label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
                 <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
                   {ESTIMATE_SYSTEMS[currentSystem]?.name}
-                  <Tooltip tooltipContent={"Not available now"}>
+                  <Tooltip tooltipContent={"coming soon"}>
                     <Info size={12} />
                   </Tooltip>
                 </div>
+              ) : ESTIMATE_SYSTEMS[currentSystem]?.is_active ? (
+                <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
+                  {ESTIMATE_SYSTEMS[currentSystem]?.name}
+                  <Tooltip tooltipContent={"upgrade"}>
+                    <Crown size={12} className="text-amber-400" />
+                  </Tooltip>
+                </div>
               ) : (
                 <div>{ESTIMATE_SYSTEMS[currentSystem]?.name}</div>
               ),
               value: system,
-              disabled: !ESTIMATE_SYSTEMS[currentSystem]?.is_available,
+              disabled: !ESTIMATE_SYSTEMS[currentSystem]?.is_available || ESTIMATE_SYSTEMS[currentSystem]?.is_active,
             };
           })}
           label="Choose an estimate system"
-          labelClassName="text-sm font-medium text-custom-text-200 mb-2"
+          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"
@@ -48,38 +55,44 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
         />
       </div>
 
-      <div className="space-y-2">
-        <div className="text-sm font-medium text-custom-text-200">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">Custom</p>
-          <p className="text-xs text-custom-text-300">
-            Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch
-          </p>
-        </button>
-      </div>
+      {ESTIMATE_SYSTEMS[estimateSystem]?.is_available && !ESTIMATE_SYSTEMS[estimateSystem]?.is_active && (
+        <>
+          <div className="space-y-1.5">
+            <div className="text-sm font-medium text-custom-text-200">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">Custom</p>
+              <p className="text-xs text-custom-text-300">
+                Add your own <span className="lowercase">{currentEstimateSystem.name}</span> from scratch
+              </p>
+            </button>
+          </div>
 
-      <div className="space-y-2">
-        <div className="text-sm font-medium text-custom-text-200">Choose a 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) => template?.value)?.join(", ")}
-                </p>
-              </button>
-            )
-          )}
-        </div>
-      </div>
+          <div className="space-y-1.5">
+            <div className="text-sm font-medium text-custom-text-200">Choose a 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) => template?.value)?.join(", ")}
+                    </p>
+                  </button>
+                )
+              )}
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };
+
+//

web/components/estimates/update/stage-one.tsx

@@ -1,5 +1,7 @@
 import { FC } from "react";
+import { Crown } from "lucide-react";
 import { TEstimateUpdateStageKeys } from "@plane/types";
+import { Tooltip } from "@plane/ui";
 // constants
 import { ESTIMATE_OPTIONS_STAGE_ONE } from "@/constants/estimates";
 // helpers
@@ -19,11 +21,19 @@ export const EstimateUpdateStageOne: FC<TEstimateUpdateStageOne> = (props) => {
           <div
             key={stage.key}
             className={cn(
-              "border border-custom-border-300 cursor-pointer space-y-1 p-3 rounded hover:bg-custom-background-90 transition-colors"
+              "border border-custom-border-300 cursor-pointer space-y-1 p-3 rounded transition-colors",
+              stage?.is_active ? `bg-custom-background-90` : `hover:bg-custom-background-90`
             )}
-            onClick={() => handleEstimateEditType(stage.key)}
+            onClick={() => !stage?.is_active && handleEstimateEditType(stage.key)}
           >
-            <h3 className="text-base font-medium">{stage.title}</h3>
+            <h3 className="text-base font-medium relative flex items-center gap-2">
+              {stage.title}
+              {stage?.is_active && (
+                <Tooltip tooltipContent={"upgrade"}>
+                  <Crown size={12} className="text-amber-400" />
+                </Tooltip>
+              )}
+            </h3>
             <p className="text-sm text-custom-text-200">{stage.description}</p>
           </div>
         ))}

web/constants/estimates.ts

@@ -49,6 +49,7 @@ export const ESTIMATE_SYSTEMS: TEstimateSystems = {
       },
     },
     is_available: true,
+    is_active: false,
   },
   points: {
     name: "Points",
@@ -101,6 +102,7 @@ export const ESTIMATE_SYSTEMS: TEstimateSystems = {
       },
     },
     is_available: true,
+    is_active: true,
   },
   time: {
     name: "Time",
@@ -122,6 +124,7 @@ export const ESTIMATE_SYSTEMS: TEstimateSystems = {
       },
     },
     is_available: false,
+    is_active: true,
   },
 };
 
@@ -130,10 +133,12 @@ export const ESTIMATE_OPTIONS_STAGE_ONE = [
     key: EEstimateUpdateStages.EDIT,
     title: "Add, update or remove estimates",
     description: "Manage current system either adding, updating or removing the points or categories.",
+    is_active: false,
   },
   {
     key: EEstimateUpdateStages.SWITCH,
     title: "Change estimate type",
     description: "Convert your points system to categories system and vice versa.",
+    is_active: true,
   },
 ];