fix: show correct unit type for manage projects list screen

public/static/locales/en/common.json

@@ -1,5 +1,9 @@
 {
   "Common": {
+    "unitTypes": {
+      "tree": "{count, plural, one {{formattedCount} Tree} other {{formattedCount} Trees}}",
+      "m2": "{formattedCount} m²"
+    },
     "and": "and",
     "tree": "{count, plural, =1 {Tree} other {Trees}}",
     "m2": "m²",

src/features/common/types/project.d.ts

@@ -101,7 +101,7 @@ export interface Properties {
   currency: string;
   image: string;
   unit: string;
-  unitType: string;
+  unitType: 'tree' | 'm2';
   unitCost: number;
   taxDeductionCountries: CountryCode[];
   isApproved: boolean;
@@ -118,6 +118,20 @@ export interface Properties {
   paymentDefaults: Nullable<DefaultPaymentConfig>;
 }
 
+export interface TreeProperties extends Properties {
+  unitsContributed: Units;
+  unitsTargeted: Units;
+}
+
+export interface ConservProperties extends Properties {
+  unitsContributed: {
+    m2: number;
+  };
+  unitsTargeted: {
+    m2: number;
+  };
+}
+
 export interface ManageProjectsProps {
   GUID?: string;
   token: string;

src/features/user/ManageProjects/ProjectsContainer.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import React from 'react';
+import React, { useMemo } from 'react';
 import LazyLoad from 'react-lazyload';
 import NotFound from '../../../../public/assets/images/NotFound';
 import { getAuthenticatedRequest } from '../../../utils/apiRequests/api';
@@ -11,7 +11,7 @@ import styles from './ProjectsContainer.module.scss';
 import GlobeContentLoader from '../../../../src/features/common/ContentLoaders/Projects/GlobeLoader';
 import { useLocale, useTranslations } from 'next-intl';
 import { handleError, APIError } from '@planet-sdk/common';
-import { Properties } from '../../common/types/project';
+import { ConservProperties, TreeProperties } from '../../common/types/project';
 import { Geometry } from '@turf/turf';
 import { useTenant } from '../../common/Layout/TenantContext';
 import DashboardView from '../../common/Layout/DashboardView';
@@ -22,10 +22,14 @@ import { generateProjectLink } from '../../../utils/projectV2';
 interface UserProjectsType {
   type: string;
   geometry: Geometry;
-  properties: Properties;
+  properties: TreeProperties | ConservProperties;
 }
 
-function SingleProject({ project }: { project: Properties }) {
+function SingleProject({
+  project,
+}: {
+  project: TreeProperties | ConservProperties;
+}) {
   const ImageSource = project.image
     ? getImageUrl('project', 'medium', project.image)
     : '';
@@ -34,6 +38,14 @@ function SingleProject({ project }: { project: Properties }) {
   const tCountry = useTranslations('Country');
   const locale = useLocale();
   const router = useRouter();
+  const count =
+    project.unitType === 'tree'
+      ? (project as TreeProperties).unitsContributed?.tree
+      : project.unitsContributed.m2;
+  const formattedCount = useMemo(
+    () => localizedAbbreviatedNumber(locale, Number(count), 1),
+    [count]
+  );
   return (
     <div className={styles.singleProject} key={project.id}>
       {ImageSource ? (
@@ -58,18 +70,8 @@ function SingleProject({ project }: { project: Properties }) {
             tCountry((project.country || '').toLowerCase())
           )}
         </p>
-        {project.purpose === 'trees' ? (
-          <p>
-            {localizedAbbreviatedNumber(
-              locale,
-              Number(project.countPlanted),
-              1
-            )}{' '}
-            {tCommon('tree', { count: Number(project.countPlanted) })}
-          </p>
-        ) : (
-          <></>
-        )}
+        {count !== undefined &&
+          tCommon(`unitTypes.${project.unitType}`, { formattedCount, count })}
         <div className={styles.projectLabels}>
           {/* Needed in future */}
           {/* {!project.isFeatured && (