Merge pull request #255 from wri/feat/TM-872_Site_0_state_display

[TM-872] site 0 state display

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

@@ -21,6 +21,7 @@ import { BBox } from "./GeoJSON";
 import type { TooltipType } from "./Map.d";
 import CheckPolygonControl from "./MapControls/CheckPolygonControl";
 import EditControl from "./MapControls/EditControl";
+import EmptyStateDisplay from "./MapControls/EmptyStateDisplay";
 import { FilterControl } from "./MapControls/FilterControl";
 import ImageControl from "./MapControls/ImageControl";
 import PolygonCheck from "./MapControls/PolygonCheck";
@@ -78,6 +79,7 @@ interface MapProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
   mapFunctions?: any;
   tooltipType?: TooltipType;
   sitePolygonData?: SitePolygonsDataResponse;
+  polygonsExists?: boolean;
 }
 
 export const MapContainer = ({
@@ -102,6 +104,7 @@ export const MapContainer = ({
   showLegend = false,
   mapFunctions,
   tooltipType = "view",
+  polygonsExists = true,
   ...props
 }: MapProps) => {
   const [viewImages, setViewImages] = useState(false);
@@ -291,6 +294,9 @@ export const MapContainer = ({
           <PolygonCheck />
         </ControlGroup>
       </When>
+      <When condition={!polygonsExists}>
+        <EmptyStateDisplay />
+      </When>
     </div>
   );
 };

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

@@ -0,0 +1,20 @@
+import { useT } from "@transifex/react";
+
+import Text from "../../Text/Text";
+
+const EmptyStateDisplay = () => {
+  const t = useT();
+  return (
+    <div className="absolute left-[56%] top-[43%] z-30 grid gap-2" id="emptystatedisplay">
+      <div className="rounded-lg bg-[#ffffff26] py-3 px-11 text-center text-white backdrop-blur-md">
+        <Text variant="text-10-light">
+          {t("Polygons have not been")}
+          <br />
+          {t("created for this site")}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyStateDisplay;

src/pages/project/[uuid]/components/OverviewMapArea.tsx

@@ -7,6 +7,7 @@ import { MapContainer } from "@/components/elements/Map-mapbox/Map";
 import { getPolygonsData } from "@/components/elements/Map-mapbox/utils";
 import MapSidePanel from "@/components/elements/MapSidePanel/MapSidePanel";
 import { APPROVED, DRAFT, NEEDS_MORE_INFORMATION, SUBMITTED } from "@/constants/statuses";
+import { fetchGetV2DashboardCountryCountry } from "@/generated/apiComponents";
 import { SitePolygonsDataResponse } from "@/generated/apiSchemas";
 import { useDate } from "@/hooks/useDate";
 
@@ -30,7 +31,19 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => {
       setEntityBbox(result.bbox as BBox);
     }
   };
-
+  const callCountryBBox = async () => {
+    let currentCountry = entityModel?.country;
+    if (type === "sites") {
+      currentCountry = entityModel?.project?.country;
+    }
+    const countryBbox = await fetchGetV2DashboardCountryCountry({
+      pathParams: { country: currentCountry }
+    });
+    if (Array.isArray(countryBbox.bbox) && countryBbox.bbox.length > 1) {
+      const bboxFormat = countryBbox.bbox[1] as unknown as BBox;
+      setEntityBbox(bboxFormat);
+    }
+  };
   useEffect(() => {
     if (entityModel?.uuid) {
       const statusFilter = checkedValues.join(",");
@@ -55,6 +68,7 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => {
         [NEEDS_MORE_INFORMATION]: [],
         [DRAFT]: []
       });
+      callCountryBBox();
     }
   }, [polygonsData]);
 
@@ -94,6 +108,7 @@ const OverviewMapArea = ({ entityModel, type }: EntityAreaProps) => {
         showLegend
         siteData={true}
         className="flex-1 rounded-r-lg"
+        polygonsExists={polygonsData.length > 0}
       />
     </>
   );