Merge pull request #2325 from Plant-for-the-Planet-org/feature/salesf…

…orce-projectListcontrol-tab feat: avoid rendering project tabs for Salesforce tenant
Plant-for-the-Planet-org · Dec 10, 2024 · 95eb9c8 · 95eb9c8
2 parents 0110f3d + 557428a
commit 95eb9c8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 13 deletions.
diff --git a/src/features/projectsV2/ProjectListControls/ProjectListControlForMobile.tsx b/src/features/projectsV2/ProjectListControls/ProjectListControlForMobile.tsx
@@ -33,6 +33,7 @@ interface ProjectListControlForMobileProps {
   filteredProjects: MapProject[] | undefined;
   mapOptions: MapOptions;
   updateMapOption: (option: keyof MapOptions, value: boolean) => void;
+  shouldHideProjectTabs: boolean;
 }
 
 const ProjectListControlForMobile = ({
@@ -52,14 +53,15 @@ const ProjectListControlForMobile = ({
   setIsSearching,
   mapOptions,
   updateMapOption,
+  shouldHideProjectTabs,
 }: ProjectListControlForMobileProps) => {
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const tAllProjects = useTranslations('AllProjects');
   const { isImpersonationModeOn } = useUserProps();
   const hasFilterApplied = selectedClassification.length > 0;
   const shouldDisplayFilterResults = hasFilterApplied && selectedMode !== 'map';
   const shouldDisplayProjectListTab =
-    !hasFilterApplied && selectedMode !== 'map';
+    !hasFilterApplied && selectedMode !== 'map' && !shouldHideProjectTabs;
   const shouldDisplayMapFeatureExplorer = selectedMode === 'map';
   const projectListControlsMobileClasses = `${
     styles.projectListControlsMobile

diff --git a/src/features/projectsV2/ProjectListControls/index.tsx b/src/features/projectsV2/ProjectListControls/index.tsx
@@ -2,7 +2,7 @@ import type { SetState } from '../../common/types/common';
 import type { TreeProjectClassification } from '@planet-sdk/common';
 import type { MapProject } from '../../common/types/projectv2';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import styles from './styles/ProjectListControls.module.scss';
 import ActiveSearchField from './microComponents/ActiveSearchField';
@@ -22,6 +22,7 @@ export interface ProjectListControlsProps {
   debouncedSearchValue: string;
   setDebouncedSearchValue: SetState<string>;
   filteredProjects: MapProject[] | undefined;
+  shouldHideProjectTabs: boolean;
 }
 const ProjectListControls = ({
   projectCount,
@@ -33,11 +34,12 @@ const ProjectListControls = ({
   debouncedSearchValue,
   setDebouncedSearchValue,
   filteredProjects,
+  shouldHideProjectTabs,
 }: ProjectListControlsProps) => {
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [isSearching, setIsSearching] = useState(false);
   const tAllProjects = useTranslations('AllProjects');
-
+  const tCommon = useTranslations('Common');
   const hasFilterApplied = selectedClassification.length > 0;
 
   const projectListTabProps = {
@@ -65,21 +67,35 @@ const ProjectListControls = ({
     setSelectedClassification,
   };
 
+  const renderTabContent = useMemo(() => {
+    if (hasFilterApplied) {
+      return (
+        <div className={styles.filterResultContainer}>
+          {tAllProjects('filterResult', {
+            count: filteredProjects?.length,
+          })}
+        </div>
+      );
+    }
+
+    if (shouldHideProjectTabs) {
+      return (
+        <h2 className={styles.projectListHeaderText}>
+          {tCommon('stopTalkingStartPlanting')}
+        </h2>
+      );
+    }
+
+    return <ProjectListTabLargeScreen {...projectListTabProps} />;
+  }, [hasFilterApplied, shouldHideProjectTabs, filteredProjects]);
+
   return (
     <>
       {isSearching ? (
         <ActiveSearchField {...activeSearchFieldProps} />
       ) : (
         <div className={styles.projectListControls}>
-          {hasFilterApplied ? (
-            <div className={styles.filterResultContainer}>
-              {tAllProjects('filterResult', {
-                count: filteredProjects?.length,
-              })}
-            </div>
-          ) : (
-            <ProjectListTabLargeScreen {...projectListTabProps} />
-          )}
+          {renderTabContent}
           <SearchAndFilter {...searchAndFilterProps} />
         </div>
       )}

diff --git a/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss b/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss
@@ -26,7 +26,10 @@
     }
   }
 }
-
+.projectListHeaderText {
+  font-weight: 600;
+  margin-left: 20px;
+}
 .tabsContainer,
 .projectListControlsMobile {
   display: flex;

diff --git a/src/features/projectsV2/ProjectsSection.tsx b/src/features/projectsV2/ProjectsSection.tsx
@@ -8,6 +8,7 @@ import ProjectListControlForMobile from './ProjectListControls/ProjectListContro
 import ProjectList from './ProjectList';
 import { useProjectsMap } from './ProjectsMapContext';
 import ProjectsListMeta from '../../utils/getMetaTags/ProjectsListMeta';
+import { useTenant } from '../common/Layout/TenantContext';
 
 interface ProjectsSectionProps {
   isMobile: boolean;
@@ -31,6 +32,8 @@ const ProjectsSection = ({ isMobile }: ProjectsSectionProps) => {
   } = useProjects();
   const { mapOptions, updateMapOption } = useProjectsMap();
   const [tabSelected, setTabSelected] = useState<ProjectTabs>('topProjects');
+  const { tenantConfig } = useTenant();
+  const shouldHideProjectTabs = tenantConfig.topProjectsOnly === true;
   if ((isLoading || isError) && filteredProjects?.length === 0) {
     return <Skeleton className={styles.projectSectionSkeleton} />;
   }
@@ -47,6 +50,7 @@ const ProjectsSection = ({ isMobile }: ProjectsSectionProps) => {
     debouncedSearchValue,
     setDebouncedSearchValue,
     filteredProjects,
+    shouldHideProjectTabs,
   };
   const projectListControlMobileProps = {
     debouncedSearchValue,