Merge pull request #2302 from Plant-for-the-Planet-org/projects-redes…

…ign/launch-feedback Post Launch feedback for projects facelift
Plant-for-the-Planet-org · Nov 12, 2024 · 4080b6b · 4080b6b
2 parents 355e02b + 2698608
commit 4080b6b
Show file tree

Hide file tree

Showing 21 changed files with 292 additions and 165 deletions.
diff --git a/.gitignore b/.gitignore
@@ -37,6 +37,8 @@ cypress.env.json
 # certificates
 ./certificates/localhost.crt
 ./certificates/localhost.key
+certificates/localhost-key.pem
+certificates/localhost.pem
 
 # tenant
 # tenant.config.js

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     ".next/cache"
   ],
   "scripts": {
+    "dev-https": "next dev --experimental-https",
     "dev": "next dev",
     "build": "npx prisma generate && next build",
     "analyze": "ANALYZE=true npm run build",

diff --git a/src/features/common/Layout/ProjectsLayout/ProjectsLayout.module.scss b/src/features/common/Layout/ProjectsLayout/ProjectsLayout.module.scss
@@ -49,7 +49,7 @@ $layoutPaddingBottom: 30px;
 
 .mapFeatureExplorerOverlay {
   position: absolute;
-  top: calc($layoutPaddingTop + 8px);
+  top: calc($layoutPaddingTop + 10px);
   right: calc($layoutPaddingSide + 10px);
   z-index: 1;
 }

diff --git a/src/features/projectsV2/ProjectDetails/ProjectDetails.module.scss b/src/features/projectsV2/ProjectDetails/ProjectDetails.module.scss
@@ -2,7 +2,8 @@
 
 .projectDetailsContainer {
   width: 100%;
-  height: 100%;
+  height: calc(100% + 30px);
+  padding-bottom: 30px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 10px;

diff --git a/src/features/projectsV2/ProjectDetails/components/KeyInfo.tsx b/src/features/projectsV2/ProjectDetails/components/KeyInfo.tsx
@@ -35,102 +35,98 @@ const KeyInfo = ({
   const tProjectDetails = useTranslations('ProjectDetails');
   const locale = useLocale();
 
-  const addZeroToDate = (val: string) => {
-    const arr = val.split('-');
-    const newDateArr = [arr[0]];
-    if (arr[1].length === 1) {
-      newDateArr.push(`0${arr[1]}`);
-    } else {
-      newDateArr.push(arr[1]);
-    }
-    if (arr[2].length === 1) {
-      newDateArr.push(`0${arr[2]}`);
-    } else {
-      newDateArr.push(arr[2]);
-    }
-    return newDateArr.join('-');
-  };
+  const showAbandonmentInfo = abandonment !== null && abandonment > 0;
+  const showProtectionStarted =
+    startingProtectionYear !== null && startingProtectionYear > 0;
+  const showPlantingDensity = plantingDensity !== null && plantingDensity > 0;
+  const showEmployees = employees !== null && employees > 0;
+  const showDegradationYear = degradationYear !== null && degradationYear > 0;
+  const showActivitySeasons =
+    activitySeasons !== null && activitySeasons.length > 0;
+  const showPlantingSeasons =
+    plantingSeasons !== null && plantingSeasons.length > 0;
+  const restorationDate = firstTreePlanted ? formatDate(firstTreePlanted) : '';
 
   return (
     <div className={styles.keyInfoContainer}>
-      <div className={styles.keyInfoSubContainer}>
-        {abandonment && (
-          <SingleProjectInfoItem
-            title={
-              <h2 className={styles.abandonmentTitle}>
-                {tProjectDetails('abandonment')}
-                <InfoIconPopup
-                  height={10}
-                  width={10}
-                  color={`${'rgba(var(--secondary-divider-color-new))'}`}
-                >
-                  <div className={styles.infoIconPopupContainer}>
-                    {tProjectDetails('yearAbandonedInfo')}
-                  </div>
-                </InfoIconPopup>
-              </h2>
-            }
-          >
-            <p>
-              {tCommon('approx')} {abandonment}
-            </p>
-          </SingleProjectInfoItem>
-        )}
-        {firstTreePlanted && (
-          <SingleProjectInfoItem title={tProjectDetails('restorationStarted')}>
-            <time>
-              {firstTreePlanted?.length > 0 &&
-                formatDate(
-                  firstTreePlanted.split('-')[1].length === 1 ||
-                    firstTreePlanted.split('-')[2].length === 1
-                    ? addZeroToDate(firstTreePlanted)
-                    : firstTreePlanted
-                )}
-            </time>
-          </SingleProjectInfoItem>
-        )}
-        {startingProtectionYear && (
-          <SingleProjectInfoItem title={tProjectDetails('protectionStarted')}>
-            <time>{startingProtectionYear}</time>
-          </SingleProjectInfoItem>
-        )}
-      </div>
+      {(showAbandonmentInfo ||
+        restorationDate.length > 0 ||
+        showProtectionStarted) && (
+        <div className={styles.keyInfoSubContainer}>
+          {showAbandonmentInfo && (
+            <SingleProjectInfoItem
+              title={
+                <h2 className={styles.abandonmentTitle}>
+                  {tProjectDetails('abandonment')}
+                  <InfoIconPopup
+                    height={10}
+                    width={10}
+                    color={`${'rgba(var(--secondary-divider-color-new))'}`}
+                  >
+                    <div className={styles.infoIconPopupContainer}>
+                      {tProjectDetails('yearAbandonedInfo')}
+                    </div>
+                  </InfoIconPopup>
+                </h2>
+              }
+            >
+              <p>
+                {tCommon('approx')} {abandonment}
+              </p>
+            </SingleProjectInfoItem>
+          )}
+          {restorationDate.length > 0 && (
+            <SingleProjectInfoItem
+              title={tProjectDetails('restorationStarted')}
+            >
+              <time>{restorationDate}</time>
+            </SingleProjectInfoItem>
+          )}
+          {showProtectionStarted && (
+            <SingleProjectInfoItem title={tProjectDetails('protectionStarted')}>
+              <time>{startingProtectionYear}</time>
+            </SingleProjectInfoItem>
+          )}
+        </div>
+      )}
 
-      <div className={styles.keyInfoSubContainer}>
-        {plantingDensity && (
-          <SingleProjectInfoItem title={tProjectDetails('plantingDensity')}>
-            <>
-              {getFormattedNumber(locale, plantingDensity)}
-              {maxPlantingDensity !== null
-                ? `-${getFormattedNumber(
-                    locale,
-                    maxPlantingDensity
-                  )} ${tProjectDetails('treePerHa')}`
-                : ` ${tProjectDetails('treePerHa')}`}
-            </>
-          </SingleProjectInfoItem>
-        )}
-        {employees && (
-          <SingleProjectInfoItem title={tProjectDetails('employees')}>
-            <p>{employees}</p>
-          </SingleProjectInfoItem>
-        )}
-      </div>
+      {(showPlantingDensity || showEmployees) && (
+        <div className={styles.keyInfoSubContainer}>
+          {showPlantingDensity && (
+            <SingleProjectInfoItem title={tProjectDetails('plantingDensity')}>
+              <>
+                {getFormattedNumber(locale, plantingDensity)}
+                {maxPlantingDensity !== null
+                  ? `-${getFormattedNumber(
+                      locale,
+                      maxPlantingDensity
+                    )} ${tProjectDetails('treePerHa')}`
+                  : ` ${tProjectDetails('treePerHa')}`}
+              </>
+            </SingleProjectInfoItem>
+          )}
+          {showEmployees && (
+            <SingleProjectInfoItem title={tProjectDetails('employees')}>
+              <p>{employees}</p>
+            </SingleProjectInfoItem>
+          )}
+        </div>
+      )}
 
-      <div className={styles.keyInfoSubContainer}>
-        {degradationYear && (
+      {showDegradationYear && (
+        <div className={styles.keyInfoSubContainer}>
           <SingleProjectInfoItem title={tProjectDetails('degradationYear')}>
             <p>{degradationYear}</p>
           </SingleProjectInfoItem>
-        )}
-      </div>
+        </div>
+      )}
 
-      {activitySeasons && activitySeasons.length > 0 && (
+      {showActivitySeasons && (
         <SingleProjectInfoItem title={tProjectDetails('protectionSeasons')}>
           <InterventionSeason interventionSeasons={activitySeasons} />
         </SingleProjectInfoItem>
       )}
-      {plantingSeasons && plantingSeasons.length > 0 && (
+      {showPlantingSeasons && (
         <SingleProjectInfoItem title={tProjectDetails('restorationSeasons')}>
           <InterventionSeason interventionSeasons={plantingSeasons} />
         </SingleProjectInfoItem>

diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/PlantInfoCard.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/PlantInfoCard.tsx
@@ -57,7 +57,9 @@ const PlantInfoCard = ({
         })}
       </div>
       {scientificName && (
-        <div className={`planting-details-item ${styles.plantingDetailsItem}`}>
+        <div
+          className={`planting-details-item ${styles.plantingDetailsItem} ${styles.scientificName}`}
+        >
           <h2 className={styles.label}>{tProjectDetails('scientificName')}</h2>
           <p className={styles.data}>{scientificName}</p>
         </div>

diff --git a/src/features/projectsV2/ProjectDetails/components/microComponents/SpeciesPlanted.tsx b/src/features/projectsV2/ProjectDetails/components/microComponents/SpeciesPlanted.tsx
@@ -2,7 +2,8 @@ import type { PlantedSpecies } from '../../../../common/types/plantLocation';
 
 import { useCallback } from 'react';
 import styles from '../../styles/PlantLocationInfo.module.scss';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
+import { getFormattedNumber } from '../../../../../utils/getFormattedNumber';
 
 interface Props {
   totalTreesCount: number;
@@ -11,6 +12,7 @@ interface Props {
 
 const SpeciesPlanted = ({ totalTreesCount, plantedSpecies }: Props) => {
   const tProjectDetails = useTranslations('ProjectDetails');
+  const locale = useLocale();
   const getPlantedTreePercentage = useCallback(
     (treeCount: number) => {
       const result = (treeCount / totalTreesCount) * 100;
@@ -33,7 +35,7 @@ const SpeciesPlanted = ({ totalTreesCount, plantedSpecies }: Props) => {
           <div className={styles.speciesList} key={species.id}>
             <p className={styles.speciesName}>{species.scientificName}</p>
             <div className={styles.treeMetrics}>
-              <p>{species.treeCount}</p>
+              <p>{getFormattedNumber(locale, species.treeCount)}</p>
               <p>{`${getPlantedTreePercentage(species.treeCount)}%`}</p>
             </div>
           </div>

diff --git a/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss b/src/features/projectsV2/ProjectDetails/styles/PlantLocationInfo.module.scss
@@ -177,4 +177,8 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+
+  .scientificName .data {
+    font-style: italic;
+  }
 }
diff --git a/src/features/projectsV2/ProjectsMap/MultipleProjectsView.tsx b/src/features/projectsV2/ProjectsMap/MultipleProjectsView.tsx
@@ -1,26 +1,21 @@
 import type { CategorizedProjects } from './ProjectMarkers';
-import type { SetState } from '../../common/types/common';
-import type { ViewState } from 'react-map-gl-v7/maplibre';
 import type { MapRef } from '../../common/types/projectv2';
 
 import { useEffect, useMemo } from 'react';
 import ProjectMarkers from './ProjectMarkers';
 import { useProjects } from '../ProjectsContext';
+import { useProjectsMap } from '../ProjectsMapContext'; // Add this import
 import { getProjectCategory } from '../../../utils/projectV2';
 import { zoomOutMap } from '../../../utils/mapsV2/zoomToProjectSite';
 
 interface MultipleProjectsViewProps {
-  setViewState: SetState<ViewState>;
   mapRef: MapRef;
   page: 'project-list' | 'project-details';
 }
 
-const MultipleProjectsView = ({
-  setViewState,
-  mapRef,
-  page,
-}: MultipleProjectsViewProps) => {
+const MultipleProjectsView = ({ mapRef, page }: MultipleProjectsViewProps) => {
   const { projects, isLoading, isError, filteredProjects } = useProjects();
+  const { handleViewStateChange } = useProjectsMap();
   if (isLoading || isError || !projects) {
     return null;
   }
@@ -34,11 +29,10 @@ const MultipleProjectsView = ({
           ? mapRef.current.getMap()
           : mapRef.current;
         zoomOutMap(map, () => {
-          setViewState((prevState) => ({
-            ...prevState,
+          handleViewStateChange({
             ...map.getCenter(),
             zoom: map.getZoom(),
-          }));
+          });
         });
       }
     });
@@ -68,6 +62,7 @@ const MultipleProjectsView = ({
       }
     );
   }, [projects, filteredProjects, isLoading, isError]);
+
   return (
     <ProjectMarkers categorizedProjects={categorizedProjects} page={page} />
   );

diff --git a/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/ProjectSiteList.tsx b/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/ProjectSiteList.tsx
@@ -1,3 +1,5 @@
+import { useLocale } from 'next-intl';
+import { getFormattedRoundedNumber } from '../../../../utils/getFormattedNumber';
 import type { SetState } from '../../../common/types/common';
 import type {
   PlantLocation,
@@ -27,6 +29,7 @@ const ProjectSiteList = ({
   setSelectedPlantLocation,
   setSelectedSamplePlantLocation,
 }: ProjectSiteListProps) => {
+  const locale = useLocale();
   const handleSiteSelection = (index: number) => {
     setSelectedPlantLocation(null);
     setSelectedSamplePlantLocation(null);
@@ -46,7 +49,9 @@ const ProjectSiteList = ({
             key={index}
           >
             <p>{site.siteName}</p>
-            <p className={styles.siteArea}>{Math.round(site.siteArea)}ha</p>
+            <p className={styles.siteArea}>
+              {getFormattedRoundedNumber(locale, site.siteArea, 0)} ha
+            </p>
           </li>
         );
       })}

diff --git a/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss b/src/features/projectsV2/ProjectsMap/ProjectSiteDropDown/SiteDropdown.module.scss
@@ -1,5 +1,8 @@
 @import '../../../../theme/theme';
 
+$layoutPaddingTop: 24px;
+$layoutPaddingSide: 20px;
+
 .dropdownButton {
   display: flex;
   border-radius: 12px;
@@ -12,8 +15,8 @@
   gap: 18px;
   position: absolute;
   z-index: 2;
-  top: 35px;
-  right: 30px;
+  top: calc($layoutPaddingTop + 10px);
+  right: calc($layoutPaddingSide + 10px);
 }
 .siteIconAndTextContainer {
   display: flex;