[TM-874] site profile non monitoring partner

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

@@ -232,11 +232,7 @@ export const MapContainer = ({
   };
 
   return (
-    <div
-      ref={mapContainer}
-      className={twMerge("h-[500px] wide:h-[700px]", className)}
-      id={`id_map_${Math.random().toString(36).substr(2, 9)}`}
-    >
+    <div ref={mapContainer} className={twMerge("h-[500px] wide:h-[700px]", className)} id="map-container">
       <When condition={hasControls}>
         <When condition={polygonFromMap?.isOpen}>
           <ControlGroup position="top-center">

src/components/elements/Map-mapbox/hooks/useMap.ts

@@ -47,7 +47,6 @@ export const useMap = (onSave?: (geojson: any, record: any) => void) => {
   const initMap = () => {
     if (map.current) return;
 
-    console.log("map.current", map.current);
     map.current = new mapboxgl.Map({
       container: mapContainer.current as HTMLDivElement,
       style: MAP_STYLE,

src/components/elements/MapPolygonPanel/AttributeInformation.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@transifex/react";
+
 import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
 import Input from "@/components/elements/Inputs/Input/Input";
 
@@ -67,81 +69,83 @@ const dropdownOptionsTree = [
   }
 ];
 const AttributeInformation = () => {
+  const t = useT();
+
   return (
     <div className="flex flex-col gap-4">
       <Input
-        label="Polygon Name"
+        label={t("Polygon Name")}
         labelClassName="capitalize text-white"
         labelVariant="text-14-light"
-        placeholder="Input Polygon Name"
+        placeholder={t("Input Polygon Name")}
         type="text"
         name=""
       />
       <label className="flex flex-col gap-2">
         <Text variant="text-14-light" className="text-white">
-          Plant Start Date
+          {t("Plant Start Date")}
         </Text>
         <input
           type="date"
           className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
-          placeholder="Input Plant Start Date"
+          placeholder={t("Input Plant Start Date")}
         />
       </label>
       <label className="flex flex-col gap-2">
         <Text variant="text-14-light" className="text-white">
-          Plant End Date
+          {t("Plant End Date")}
         </Text>
         <input
           type="date"
           className="rounded-lg border-neutral-200 focus:border-primary focus:shadow-none focus:ring-transparent"
-          placeholder="Input Plant Start Date"
+          placeholder={t("Input Plant Start Date")}
         />
       </label>
       <Dropdown
         multiSelect
-        label="Restoration Practice"
+        label={t("Restoration Practice")}
         labelClassName="capitalize text-white"
         labelVariant="text-14-light"
-        placeholder="Select Restoration Practice"
+        placeholder={t("Select Restoration Practice")}
         options={dropdownOptionsRestoration}
-        value={["Planting Complete"]}
+        value={[t("Planting Complete")]}
         onChange={() => {}}
         className="bg-white"
       />
       <Dropdown
-        label="Target Land Use System"
+        label={t("Target Land Use System")}
         labelClassName="capitalize text-white"
         labelVariant="text-14-light"
-        placeholder="Select Target Land Use System"
+        placeholder={t("Select Target Land Use System")}
         options={dropdownOptionsTarget}
-        value={["Planting Complete"]}
+        value={[t("Planting Complete")]}
         onChange={() => {}}
         className="bg-white"
       />
       <Dropdown
         multiSelect
-        label="Tree Distribution"
+        label={t("Tree Distribution")}
         labelClassName="capitalize text-white"
         labelVariant="text-14-light"
-        placeholder="Select Tree Distribution"
+        placeholder={t("Select Tree Distribution")}
         options={dropdownOptionsTree}
-        value={["Planting Complete"]}
+        value={[t("Planting Complete")]}
         onChange={() => {}}
         className="bg-white"
       />
       <Input
-        label="Trees Planted"
+        label={t("Trees Planted")}
         labelClassName="capitalize text-white"
         labelVariant="text-14-light"
-        placeholder="Input Trees Planted"
+        placeholder={t("Input Trees Planted")}
         type="text"
         name=""
       />
       <Input
-        label="Estimated Area"
+        label={t("Estimated Area")}
         labelClassName="capitalize text-white"
         labelVariant="text-14-light"
-        placeholder="Input Estimated Area"
+        placeholder={t("Input Estimated Area")}
         type="text"
         name=""
       />

src/components/elements/MapPolygonPanel/ChecklistInformation.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@transifex/react";
+
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import ModalWithMap from "@/components/extensive/Modal/ModalWithMap";
 import { useModalContext } from "@/context/modal.provider";
@@ -7,72 +9,74 @@ import Text from "../Text/Text";
 
 const ChecklistInformation = () => {
   const { openModal, closeModal } = useModalContext();
+  const t = useT();
+
   const openFormModalHandlerRequestPolygonSupport = () => {
     openModal(
       <ModalWithMap
-        title="Request Support"
+        title={t("Request Support")}
         onClose={closeModal}
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Submit"
+        primaryButtonText={t("Submit")}
+        content="-&nbsp;&nbsp;•&nbsp;&nbsp;-"
         primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
       ></ModalWithMap>
     );
   };
   return (
     <div className="text-white">
-      <Text variant="text-14-bold">3 out 14</Text>
-      <Text variant="text-14-light">Validation criteria are not met</Text>
+      <Text variant="text-14-bold">3 {t("out")} 14</Text>
+      <Text variant="text-14-light">{t("Validation criteria are not met")}</Text>
       <Button variant="primary" className="mt-4" onClick={openFormModalHandlerRequestPolygonSupport}>
-        request support
+        {t("request support")}
       </Button>
       <div className="mt-3 grid gap-3">
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          GeoJSON Format
+          {t("GeoJSON Format")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          WGS84 Projection
+          {t("WGS84 Projection")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
-          Earth Location
+          {t("Earth Location")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
-          Country
+          {t("Country")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          Reasonable Size Self-Intersecting Topology
+          {t("Reasonable Size Self-Intersecting Topology")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
-          Overlapping Polygons
+          {t("Overlapping Polygons")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          Spike
+          {t("Spike")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          Polygon Integrity
+          {t("Polygon Integrity")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          GeoJSON Format
+          {t("GeoJSON Format")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.CHECK_PROGRESSBAR} className="h-4 w-4 text-green-400 lg:h-5 lg:w-5" />
-          WGS84 Projection
+          {t("WGS84 Projection")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
-          Earth Location
+          {t("Earth Location")}
         </Text>
         <Text variant="text-14-light" className="flex items-center gap-2">
           <Icon name={IconNames.IC_ERROR} className="h-5 w-5 lg:h-6 lg:w-6" />
-          Country
+          {t("Country")}
         </Text>
       </div>
     </div>

src/components/elements/MapPolygonPanel/MapPolygonPanelItem.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@transifex/react";
 import classNames from "classnames";
 import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction } from "react";
 
@@ -32,35 +33,37 @@ const MapPolygonPanelItem = ({
   ...props
 }: MapPolygonPanelItemProps) => {
   const { openModal, closeModal } = useModalContext();
+  const t = useT();
+
   const openFormModalHandlerRequestPolygonSupport = () => {
     openModal(
       <ModalWithMap
-        title="Request Support"
+        title={t("Request Support")}
         onClose={closeModal}
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Submit"
+        content="-&nbsp;&nbsp;•&nbsp;&nbsp;-"
+        primaryButtonText={t("Submit")}
         primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
       ></ModalWithMap>
     );
   };
   const openFormModalHandlerAddCommentary = () => {
     openModal(
       <ModalWithLogo
-        title="Blue Forest"
+        title={t("Blue Forest")}
         onClose={closeModal}
         status={StatusEnum.UNDER_REVIEW}
         toogleButton
-        content="Faja Lobi Project&nbsp;&nbsp;•&nbsp;&nbsp;Priceless Planet Coalition"
-        primaryButtonText="Close"
+        content="-&nbsp;&nbsp;•&nbsp;&nbsp;-"
+        primaryButtonText={t("Close")}
         primaryButtonProps={{ className: "px-8 py-3", variant: "primary", onClick: closeModal }}
       />
     );
   };
   const openFormModalHandlerConfirm = () => {
     openModal(
       <ModalConfirm
-        title={"Confirm Polygon Deletion"}
-        content="Do you want to delete this polygon?"
+        title={t("Confirm Polygon Deletion")}
+        content={t("Do you want to delete this polygon?")}
         onClose={closeModal}
         onConfirm={() => {}}
       />
@@ -73,7 +76,7 @@ const MapPolygonPanelItem = ({
       render: () => (
         <Text variant="text-14-semibold" className="flex items-center">
           <Icon name={IconNames.IC_SITE_VIEW} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Edit Polygon
+          &nbsp; {t("Edit Polygon")}
         </Text>
       ),
       onClick: () => {
@@ -87,7 +90,7 @@ const MapPolygonPanelItem = ({
       render: () => (
         <Text variant="text-14-semibold" className="flex items-center">
           <Icon name={IconNames.SEARCH} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Zoom to
+          &nbsp; {t("Zoom to")}
         </Text>
       )
     },
@@ -96,7 +99,7 @@ const MapPolygonPanelItem = ({
       render: () => (
         <Text variant="text-14-semibold" className="flex items-center">
           <Icon name={IconNames.DOWNLOAD_PA} className="h-5 w-5 lg:h-6 lg:w-6" />
-          &nbsp; Download
+          &nbsp; {t("Download")}
         </Text>
       )
     },
@@ -106,7 +109,7 @@ const MapPolygonPanelItem = ({
         <Button variant="text" onClick={openFormModalHandlerAddCommentary}>
           <Text variant="text-14-semibold" className="flex items-center">
             <Icon name={IconNames.COMMENT} className="h-5 w-5 lg:h-6 lg:w-6 " />
-            &nbsp; Comment
+            &nbsp; {t("Comment")}
           </Text>
         </Button>
       )
@@ -117,7 +120,7 @@ const MapPolygonPanelItem = ({
         <Button variant="text" onClick={openFormModalHandlerRequestPolygonSupport}>
           <Text variant="text-14-semibold" className="flex items-center">
             <Icon name={IconNames.REQUEST} className="h-5 w-5 lg:h-6 lg:w-6 " />
-            &nbsp; Request Support
+            &nbsp; {t("Request Support")}
           </Text>
         </Button>
       )
@@ -128,7 +131,7 @@ const MapPolygonPanelItem = ({
         <Button variant="text" onClick={openFormModalHandlerConfirm}>
           <Text variant="text-14-semibold" className="flex items-center">
             <Icon name={IconNames.TRASH_PA} className="h-5 w-5 lg:h-6 lg:w-6 " />
-            &nbsp; Delete Polygon
+            &nbsp; {t("Delete Polygon")}
           </Text>
         </Button>
       )
@@ -148,9 +151,9 @@ const MapPolygonPanelItem = ({
           <Icon name={IconNames.MAP_THUMBNAIL} className="h-11 w-11 rounded-lg bg-neutral-300" />
           <div className="flex flex-1 flex-col">
             <Text variant="text-14-bold" className="">
-              {title}
+              {t(title)}
             </Text>
-            <Text variant="text-14-light">{subtitle}</Text>
+            <Text variant="text-14-light">{t(subtitle)}</Text>
           </div>
           <div className="lex h-full self-start">
             <Menu container={refContainer?.current} placement={MENU_PLACEMENT_RIGHT_BOTTOM} menu={itemsPrimaryMenu}>

src/components/elements/MapPolygonPanel/MapPolygonSitePanel.tsx

@@ -75,11 +75,11 @@ const MapPlygonSitePanel = ({
 
   return (
     <>
-      <FilterSearchBox placeholder={"Search"} className="mb-4 w-full" onChange={() => {}} />
+      <FilterSearchBox placeholder={t("Search")} className="mb-4 w-full" onChange={() => {}} />
       <div className="mb-3 flex items-start justify-between rounded-tl-lg">
         <Text variant="text-14-bold" className="flex items-center uppercase text-white">
           <Icon name={IconNames.PLUS_PA} className="h-4 w-4" />
-          &nbsp; new Polygon
+          &nbsp; {t("new Polygon")}
         </Text>
         <div className="flex items-center gap-2">
           <div className="relative" ref={menuRef}>
@@ -147,7 +147,7 @@ const MapPlygonSitePanel = ({
       <div className="h-[calc(100%-159px)] rounded-bl-lg">
         {PolygonData.length === 0 && (
           <Text variant="text-16-light" className="mt-8 text-white">
-            {emptyText || t("No result")}
+            {emptyText ?? t("No result")}
           </Text>
         )}
         <div