feat: Integrate feature flags for conditional rendering

client/src/containers/profile/index.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 
 import Link from "next/link";
 
 import { useSetAtom } from "jotai";
 
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
 import CustomProjects from "@/containers/profile/custom-projects";
 import DeleteAccount from "@/containers/profile/delete-account";
 import FileUpload, { TEMPLATE_FILES } from "@/containers/profile/file-upload";
@@ -52,11 +54,22 @@ const sections = [
       "This action will permanently delete your account. By doing this you will loose access to all your custom scenarios.",
     Component: DeleteAccount,
   },
-];
+] as const;
 
 export default function Profile() {
   const ref = useRef<HTMLDivElement>(null);
   const setIntersecting = useSetAtom(intersectingAtom);
+  const featureFlags = useFeatureFlags();
+  const currentSections = useMemo(() => {
+    return sections.filter((section) => {
+      const featureFlagExists = section.id in featureFlags;
+      const isFeatureEnabled =
+        featureFlagExists &&
+        featureFlags[section.id as keyof typeof featureFlags];
+
+      return !featureFlagExists || isFeatureEnabled;
+    });
+  }, [featureFlags]);
 
   useEffect(() => {
     if (!ref.current) return;
@@ -99,11 +112,11 @@ export default function Profile() {
 
       <div className="relative grid h-full grid-cols-[317px_1fr] gap-6 overflow-hidden pl-4">
         <ProfileSidebar
-          navItems={sections.map((s) => ({ id: s.id, name: s.title }))}
+          navItems={currentSections.map((s) => ({ id: s.id, name: s.title }))}
         />
         <ScrollArea ref={ref} className="pr-6" showGradient>
           <div id="profile-sections-container" className="space-y-2 pb-80">
-            {sections.map(({ Component, ...rest }) => (
+            {currentSections.map(({ Component, ...rest }) => (
               <ProfileSection key={rest.id} {...rest}>
                 <Component />
               </ProfileSection>

client/src/containers/projects/custom-project/details/index.tsx

@@ -3,9 +3,13 @@ import { FC } from "react";
 import { ACTIVITY } from "@shared/entities/activity.enum";
 import { CARBON_REVENUES_TO_COVER } from "@shared/entities/custom-project.entity";
 import { ECOSYSTEM } from "@shared/entities/ecosystem.enum";
+import { FileEdit } from "lucide-react";
+
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
 
 import DetailItem from "@/containers/projects/custom-project/details/detail-item";
 
+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 
 interface ProjectDetailsProps {
@@ -38,15 +42,18 @@ const ProjectDetails: FC<ProjectDetailsProps> = ({ data }) => {
     lossRate,
     emissionFactors,
   } = data;
+  const featureFlags = useFeatureFlags();
+
   return (
     <Card className="flex-1 space-y-1">
       <div className="flex items-center justify-between">
         <h2 className="text-base font-semibold">Project details</h2>
-        {/* TODO: Uncomment when feature is available */}
-        {/* <Button type="button" variant="ghost">
-          <FileEdit />
-          <span>Edit project</span>
-        </Button> */}
+        {featureFlags["edit-project"] && (
+          <Button type="button" variant="ghost">
+            <FileEdit />
+            <span>Edit project</span>
+          </Button>
+        )}
       </div>
       <div className="grid grid-cols-3 gap-6">
         <div className="space-y-3">

client/src/containers/projects/custom-project/summary/index.tsx

@@ -2,10 +2,12 @@ import { FC } from "react";
 
 import { type CustomProjectSummary } from "@shared/dtos/custom-projects/custom-project-output.dto";
 import { useSetAtom } from "jotai";
-import { XIcon } from "lucide-react";
+import { FileEdit, XIcon } from "lucide-react";
 
 import { projectsUIState } from "@/app/projects/store";
 
+import { useFeatureFlags } from "@/hooks/use-feature-flags";
+
 import { PROJECT_SUMMARY } from "@/constants/tooltip";
 
 import { SUMMARY_SIDEBAR_WIDTH } from "@/containers/projects/custom-project";
@@ -40,6 +42,7 @@ interface ProjectSummaryProps {
 }
 const ProjectSummary: FC<ProjectSummaryProps> = ({ data }) => {
   const setProjectSummaryOpen = useSetAtom(projectsUIState);
+  const featureFlags = useFeatureFlags();
 
   return (
     <div
@@ -91,11 +94,12 @@ const ProjectSummary: FC<ProjectSummaryProps> = ({ data }) => {
           Calculations based on project setup parameters. For new calculations,
           edit project details.
         </p>
-        {/* TODO: Uncomment when feature is available */}
-        {/* <Button type="button" variant="outline">
-          <FileEdit />
-          <span>Edit Project</span>
-        </Button> */}
+        {featureFlags["edit-project"] && (
+          <Button type="button" variant="outline">
+            <FileEdit />
+            <span>Edit Project</span>
+          </Button>
+        )}
       </div>
     </div>
   );

client/src/hooks/use-feature-flags.ts

@@ -0,0 +1,11 @@
+const FEATURE_FLAGS = {
+  "edit-project": false,
+  "share-information": false,
+} as const;
+
+type FeatureFlags = typeof FEATURE_FLAGS;
+
+export function useFeatureFlags(): FeatureFlags {
+  // TODO: Implement feature flags with env variable
+  return FEATURE_FLAGS;
+}