[WEB-1846] chore: integrated project other features enabled/disabled feature on project settings and updated the pro icon as a component (#5071)

* chore: integrated time traking enabled/disabled feature on project settings and updated the pro icon as a component

* chore: Showing the toggle and disabled to make any operations on project features

* chore: default exports in constants

* chore: seperated isEnabled and isPro

* chore: updated time traking key

* chore: updated UI in project feature settings

web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx

@@ -3,10 +3,10 @@
 import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
-// icons
-import { Crown } from "lucide-react";
 // ui
 import { getButtonStyling } from "@plane/ui";
+// components
+import { ProIcon } from "@/components/common";
 // constants
 import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
 import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "@/constants/cycle";
@@ -45,7 +45,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               target="_blank"
               rel="noreferrer"
             >
-              <Crown className="h-3.5 w-3.5" />
+              <ProIcon className="h-3.5 w-3.5 text-white" />
               Upgrade
             </a>
           </div>

web/ce/components/estimates/estimate-list-item-buttons.tsx

@@ -1,7 +1,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { Crown, Pen, Trash } from "lucide-react";
+import { Pen, Trash } from "lucide-react";
 import { Tooltip } from "@plane/ui";
+// components
+import { ProIcon } from "@/components/common";
 
 type TEstimateListItem = {
   estimateId: string;
@@ -22,7 +24,7 @@ export const EstimateListItemButtons: FC<TEstimateListItem> = observer((props) =
         tooltipContent={
           <div className="relative flex items-center gap-2">
             <div>Upgrade</div>
-            <Crown size={12} className="text-amber-400" />
+            <ProIcon className="w-3 h-3" />
           </div>
         }
         position="top"

web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx

@@ -1,11 +1,13 @@
-import { Crown } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
+// components
+import { ProIcon } from "@/components/common";
 
 export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
   <div
-    className={`${props.selected ? "border-custom-primary-200 border-[2px]" : ""
-      } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
+    className={`${
+      props.selected ? "border-custom-primary-200 border-[2px]" : ""
+    } w-full h-[100px] cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 shadow-custom-shadow-2xs`}
   >
     <h5 className="h-[20%] text-xs text-custom-text-300 p-2">
       {props.node?.attrs?.project_identifier}-{props?.node?.attrs?.sequence_id}
@@ -14,7 +16,7 @@ export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
       <div className="h-full backdrop-filter backdrop-blur-[30px] bg-custom-background-80 bg-opacity-30 flex items-center w-full justify-between gap-5 mt-2.5 pl-4 pr-5 py-3 max-md:max-w-full max-md:flex-wrap relative">
         <div className="flex gap-2 items-center">
           <div className="rounded">
-            <Crown className="m-2" size={16} color="#FFBA18" />
+            <ProIcon className="m-2 w-4 h-4" />
           </div>
           <div className="text-custom-text text-sm">
             Embed and access issues in pages seamlessly, upgrade to plane pro now.

web/ce/constants/project/index.ts

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

web/ce/constants/project/settings/features.tsx

@@ -0,0 +1,82 @@
+import { ReactNode } from "react";
+import { FileText, Inbox, Timer } from "lucide-react";
+import { ContrastIcon, DiceIcon, PhotoFilterIcon } from "@plane/ui";
+
+export type TFeatureList = {
+  [key: string]: {
+    property: string;
+    title: string;
+    description: string;
+    icon: ReactNode;
+    isPro: boolean;
+    isEnabled: boolean;
+  };
+};
+
+export type TProjectFeatures = {
+  [key: string]: {
+    title: string;
+    featureList: TFeatureList;
+  };
+};
+
+export const PROJECT_FEATURES_LIST: TProjectFeatures = {
+  project_features: {
+    title: "Features",
+    featureList: {
+      cycles: {
+        property: "cycle_view",
+        title: "Cycles",
+        description: "Time-box issues and boost momentum, similar to sprints in scrum.",
+        icon: <ContrastIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
+        isPro: false,
+        isEnabled: true,
+      },
+      modules: {
+        property: "module_view",
+        title: "Modules",
+        description: "Group multiple issues together and track the progress.",
+        icon: <DiceIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
+        isPro: false,
+        isEnabled: true,
+      },
+      views: {
+        property: "issue_views_view",
+        title: "Views",
+        description: "Apply filters to issues and save them to analyse and investigate work.",
+        icon: <PhotoFilterIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+        isPro: false,
+        isEnabled: true,
+      },
+      pages: {
+        property: "page_view",
+        title: "Pages",
+        description: "Document ideas, feature requirements, discussions within your project.",
+        icon: <FileText className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+        isPro: false,
+        isEnabled: true,
+      },
+      inbox: {
+        property: "inbox_view",
+        title: "Inbox",
+        description: "Capture external inputs, move valid issues to workflow.",
+        icon: <Inbox className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+        isPro: false,
+        isEnabled: true,
+      },
+    },
+  },
+  project_others: {
+    title: "Others",
+    featureList: {
+      is_time_tracking_enabled: {
+        property: "is_time_tracking_enabled",
+        title: "Time Tracking",
+        description: "Keep the work logs of the users in track ",
+        icon: <Timer className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+        isPro: true,
+        isEnabled: false,
+      },
+    },
+  },
+};

web/ce/constants/project/settings/index.ts

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