[TM-1343] learn more link

src/components/elements/Map-mapbox/Map.tsx

@@ -16,6 +16,7 @@ import { ModalId } from "@/components/extensive/Modal/ModalConst";
 import ModalImageDetails from "@/components/extensive/Modal/ModalImageDetails";
 import { LAYERS_NAMES, layersList } from "@/constants/layers";
 import { DELETED_POLYGONS } from "@/constants/statuses";
+import { useDashboardContext } from "@/context/dashboard.provider";
 import { useLoading } from "@/context/loaderAdmin.provider";
 import { useMapAreaContext } from "@/context/mapArea.provider";
 import { useModalContext } from "@/context/modal.provider";
@@ -167,6 +168,8 @@ export const MapContainer = ({
   const { polygonsData, bbox, setPolygonFromMap, polygonFromMap, sitePolygonData, selectedCountry } = props;
   const context = useSitePolygonData();
   const contextMapArea = useMapAreaContext();
+  const dashboardContext = useDashboardContext();
+  const { setFilters, dashboardCountries } = dashboardContext ?? {};
   const { reloadSiteData } = context ?? {};
   const t = useT();
   const { mutateAsync } = usePostV2ExportImage();
@@ -246,7 +249,9 @@ export const MapContainer = ({
             editPolygonSelected,
             setEditPolygon,
             draw.current,
-            isDashboard
+            isDashboard,
+            setFilters,
+            dashboardCountries
           );
         }
       };

src/components/elements/Map-mapbox/components/DashboardPopup.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { Provider as ReduxProvider } from "react-redux";
 
 import { LAYERS_NAMES } from "@/constants/layers";
+import { CountriesProps } from "@/context/dashboard.provider";
 import {
   fetchGetV2DashboardPolygonDataUuid,
   fetchGetV2DashboardProjectDataUuid,
@@ -24,8 +25,7 @@ type Item = {
 export const DashboardPopup = (event: any) => {
   const isoCountry = event?.feature?.properties?.iso;
   const itemUuid = event?.feature?.properties?.uuid;
-
-  const { addPopupToMap, layerName } = event;
+  const { addPopupToMap, layerName, setFilters, dashboardCountries } = event;
 
   const [items, setItems] = useState<Item[]>([]);
   const [label, setLabel] = useState<string>(event?.feature?.properties?.country);
@@ -114,10 +114,26 @@ export const DashboardPopup = (event: any) => {
       fetchPolygonData();
     }
   }, [isoCountry, layerName, itemUuid]);
+  const learnMoreEvent = () => {
+    if (isoCountry && layerName === LAYERS_NAMES.WORLD_COUNTRIES) {
+      const selectedCountry = dashboardCountries?.find(
+        (country: CountriesProps) => country.country_slug === isoCountry
+      );
+      if (selectedCountry) {
+        setFilters((prevValues: any) => ({
+          ...prevValues,
+          uuid: "",
+          country: selectedCountry
+        }));
+      }
+    } else if (itemUuid && layerName === LAYERS_NAMES.CENTROIDS) {
+      setFilters((prevValues: any) => ({ ...prevValues, uuid: itemUuid }));
+    }
+  };
   return (
     <ReduxProvider store={ApiSlice.redux}>
       <QueryClientProvider client={client}>
-        <TooltipGridMap label={label} learnMore={true} isoCountry={isoCountry} items={items} />
+        <TooltipGridMap label={label} learnMore={learnMoreEvent} isoCountry={isoCountry} items={items} />
       </QueryClientProvider>
     </ReduxProvider>
   );

src/components/elements/Map-mapbox/utils.ts

@@ -172,7 +172,9 @@ const handleLayerClick = (
   editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string },
   setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void,
   layerName?: string,
-  isDashboard?: string | undefined
+  isDashboard?: string | undefined,
+  setFilters?: any,
+  dashboardCountries?: any
 ) => {
   removePopups("POLYGON");
   const { lngLat, features } = e;
@@ -205,7 +207,9 @@ const handleLayerClick = (
     const addPopupToMap = () => {
       newPopup.addTo(map);
     };
-    root.render(createElement(PopupComponent, { ...commonProps, addPopupToMap, layerName }));
+    root.render(
+      createElement(PopupComponent, { ...commonProps, addPopupToMap, layerName, setFilters, dashboardCountries })
+    );
   } else {
     newPopup.addTo(map);
     root.render(createElement(PopupComponent, commonProps));
@@ -411,7 +415,9 @@ export const addPopupsToMap = (
   editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string },
   setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void,
   draw: MapboxDraw,
-  isDashboard?: string | undefined
+  isDashboard?: string | undefined,
+  setFilters?: any,
+  dashboardCountries?: any
 ) => {
   if (popupComponent) {
     layersList.forEach((layer: LayerType) => {
@@ -425,7 +431,9 @@ export const addPopupsToMap = (
         editPolygon,
         setEditPolygon,
         draw,
-        isDashboard
+        isDashboard,
+        setFilters,
+        dashboardCountries
       );
     });
   }
@@ -442,7 +450,9 @@ export const addPopupToLayer = (
   editPolygon: { isOpen: boolean; uuid: string; primary_uuid?: string },
   setEditPolygon: (value: { isOpen: boolean; uuid: string; primary_uuid?: string }) => void,
   draw: MapboxDraw,
-  isDashboard?: string | undefined
+  isDashboard?: string | undefined,
+  setFilters?: any,
+  dashboardCountries?: any
 ) => {
   if (popupComponent) {
     const { name } = layer;
@@ -473,7 +483,9 @@ export const addPopupToLayer = (
         editPolygon,
         setEditPolygon,
         name,
-        isDashboard
+        isDashboard,
+        setFilters,
+        dashboardCountries
       );
     };
     targetLayers.forEach(targetLayer => {

src/pages/dashboard/components/TooltipGridMap.tsx

@@ -1,5 +1,4 @@
 import { useT } from "@transifex/react";
-import { When } from "react-if";
 
 import Text from "@/components/elements/Text/Text";
 
@@ -11,7 +10,7 @@ export interface TooltipItemProps {
 
 export interface TooltipGridProps {
   label: string;
-  learnMore?: boolean;
+  learnMore?: any;
   isoCountry?: string;
   items?: TooltipItemProps[];
 }
@@ -48,12 +47,9 @@ const TooltipGridMap = (props: TooltipGridProps) => {
               </div>
             ))}
         </div>
-
-        <When condition={learnMore}>
-          <Text className="mt-1 text-start text-primary underline" variant="text-12-bold">
-            {t("Learn More")}
-          </Text>
-        </When>
+        <Text onClick={() => learnMore()} className="mt-1 text-start text-primary underline" variant="text-12-bold">
+          {t("Learn More")}
+        </Text>
       </div>
     </div>
   );