Release Feb 18th, 2025

package.json

@@ -70,7 +70,7 @@
     "@trpc/react-query": "^10.25.0",
     "@trpc/server": "^10.25.0",
     "@turf/turf": "^5.1.6",
-    "@types/geojson": "^7946.0.10",
+    "@types/geojson": "^7946.0.16",
     "@types/papaparse": "^5.3.2",
     "@types/qrcode": "^1.5.0",
     "@types/react-gtm-module": "^2.0.1",

public/static/locales/en/me.json

@@ -137,6 +137,12 @@
     "referred": "Referred",
     "in-dispute": "In Dispute",
     "dispute-lost": "Dispute Lost",
+    "closed": "Closed",
+    "missing-account": "Bank Account Missing",
+    "open": "Open",
+    "processing": "Processing",
+    "review-required": "Payout Under Review",
+    "signed": "Signed",
     "nameForest": "{name}'s Forest",
     "taxReceipt": "Tax Receipt",
     "history": "History",
@@ -183,7 +189,6 @@
     "transferFee": "Transfer Fee",
     "giftComment": "Comment (Private)",
     "giftOccasion": "Occasion",
-    "open": "Open",
     "downloads": "Downloads",
     "account": "Account",
     "loadMore": "Load More",
@@ -284,7 +289,6 @@
     "composite-donation": "Mixed Donation",
     "platform-payout": "Platform Payout",
     "vplatform-payout": "Platform Payout",
-    "processing": "Processing",
     "bankDetails": "Bank Details",
     "refundAmount": "Refunded Amount"
   }

src/features/user/CompleteSignup/index.tsx

@@ -492,6 +492,10 @@ export default function CompleteSignup(): ReactElement | null {
                         value: postalRegex as RegExp,
                         message: t('validationErrors.zipCodeInvalid'),
                       },
+                      maxLength: {
+                        value: 15,
+                        message: t('validationErrors.zipCodeInvalid'),
+                      },
                     }}
                     defaultValue={
                       getStoredConfig('loc').postalCode === 'T1' ||

src/features/user/Settings/EditProfile/AddressManagement/microComponents/AddressForm.tsx

@@ -182,6 +182,10 @@ const AddressForm = ({
               value: postalRegex as RegExp,
               message: t('validationErrors.zipCodeInvalid'),
             },
+            maxLength: {
+              value: 15,
+              message: t('validationErrors.zipCodeInvalid'),
+            },
           }}
           render={({ field: { onChange, value, onBlur } }) => (
             <TextField

src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.module.scss

@@ -136,8 +136,11 @@
           .individualSpeciesContainer {
             display: flex;
 
-            .speciesName {
+            > *:not(:last-child) {
               border-right: 1px solid #68b03066;
+            }
+
+            .speciesName {
               width: 120px;
               white-space: nowrap;
               overflow: hidden;
@@ -147,7 +150,6 @@
             }
 
             .count {
-              border-right: 1px solid #68b03066;
               display: flex;
               justify-content: center;
               align-items: center;

src/features/user/TreeMapper/Analytics/components/Map/components/PlantLocationDetails/index.tsx

@@ -77,13 +77,16 @@ const ListOfSpeciesPlanted = ({
               <div className={styles.count}>
                 {getFormattedNumber(locale, species.treeCount)}
               </div>
-              <div className={styles.totalPercentage}>
-                {(
-                  (species.treeCount / plantLocationDetails.totalPlantedTrees) *
-                  100
-                ).toFixed(2)}
-                %
-              </div>
+              {plantLocationDetails.totalPlantedTrees > 1 && (
+                <div className={styles.totalPercentage}>
+                  {(
+                    (species.treeCount /
+                      plantLocationDetails.totalPlantedTrees) *
+                    100
+                  ).toFixed(2)}
+                  %
+                </div>
+              )}
             </div>
           );
         })}

src/features/user/TreeMapper/Analytics/components/Map/index.tsx

@@ -9,9 +9,9 @@ import type {
 } from '../../../../../common/types/dataExplorer';
 import type { ProjectType } from '../ProjectTypeSelector';
 import type { ChangeEvent, MutableRefObject } from 'react';
-import type { ViewportProps } from 'react-map-gl';
+import type { ViewportProps, MapRef, MapEvent } from 'react-map-gl';
 
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { TextField } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { Search } from '@mui/icons-material';
@@ -91,7 +91,7 @@ export const MapContainer = () => {
   const { setErrors } = useContext(ErrorHandlingContext);
   const t = useTranslations('TreemapperAnalytics');
 
-  const mapRef: MutableRefObject<null> = useRef(null);
+  const mapRef: MutableRefObject<MapRef | null> = useRef(null);
   const [mapState, setMapState] = useState({
     mapStyle: EMPTY_STYLE,
     dragPan: true,
@@ -340,6 +340,22 @@ export const MapContainer = () => {
     }
   };
 
+  const onMouseEnter = useCallback((event: MapEvent) => {
+    if (event.features && event.features.length > 0) {
+      if (mapRef.current) {
+        const map = mapRef.current.getMap();
+        map.getCanvas().style.cursor = 'pointer';
+      }
+    }
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    if (mapRef.current) {
+      const map = mapRef.current.getMap();
+      map.getCanvas().style.cursor = '';
+    }
+  }, []);
+
   // Handle search input change
   // This will be used to filter the plant locations on the map based on the search input
   // The search input can be either a HID or a Date
@@ -432,8 +448,20 @@ export const MapContainer = () => {
               onViewStateChange={_handleViewport}
               onViewportChange={(viewport) => setViewport(viewport)}
               onClick={handleMapClick}
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+              interactiveLayerIds={['point-layer', 'plant-locations-fill']}
             >
               <Source type="geojson" data={plantLocations}>
+                <Layer
+                  id={`point-layer`}
+                  type="circle"
+                  paint={{
+                    'circle-color': '#007A49',
+                    'circle-opacity': 0.5,
+                  }}
+                  filter={['==', ['geometry-type'], 'Point']}
+                />
                 <Layer
                   id="plant-locations-fill"
                   type="fill"