From f5738c1f59390a1a618b3df971a3144328165641 Mon Sep 17 00:00:00 2001
From: Diego <diego@vizonomy.com>
Date: Fri, 7 Jun 2024 17:16:36 -0400
Subject: [PATCH] add transifex

---
 .../Map-mapbox/MapControls/CheckPolygonControl.tsx        | 8 +++++---
 .../elements/Map-mapbox/MapControls/ImageControl.tsx      | 2 +-
 .../elements/Map-mapbox/MapControls/PolygonCheck.tsx      | 5 ++++-
 .../elements/Map-mapbox/MapControls/SiteStatus.tsx        | 4 +++-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/elements/Map-mapbox/MapControls/CheckPolygonControl.tsx b/src/components/elements/Map-mapbox/MapControls/CheckPolygonControl.tsx
index 6006e968f..c8e1c9dfc 100644
--- a/src/components/elements/Map-mapbox/MapControls/CheckPolygonControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/CheckPolygonControl.tsx
@@ -1,3 +1,4 @@
+import { useT } from "@transifex/react";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 
@@ -36,6 +37,7 @@ const CheckPolygonControl = (props: CheckSitePolygonProps) => {
   const [clickedValidation, setClickedValidation] = useState(false);
   const context = useSitePolygonData();
   const sitePolygonData = context?.sitePolygonData;
+  const t = useT();
   const { data: currentValidationSite, refetch: reloadSitePolygonValidation } = useGetV2TerrafundValidationSite<
     CheckedPolygon[]
   >(
@@ -96,13 +98,13 @@ const CheckPolygonControl = (props: CheckSitePolygonProps) => {
   return (
     <div className="grid gap-2">
       <div className="rounded-lg bg-[#ffffff26] p-3 text-center text-white backdrop-blur-md">
-        <Text variant="text-10-light">Your polygons have been updated</Text>
+        <Text variant="text-10-light">{t("Your polygons have been updated")}</Text>
         <Button
           variant="text"
           className="text-10-bold my-2 flex w-full justify-center rounded-lg border border-tertiary-600 bg-tertiary-600 p-2 hover:border-white"
           onClick={() => setClickedValidation(true)}
         >
-          Check Polygons
+          {t("Check Polygons")}
         </Button>
       </div>
       <div className="relative flex w-[231px] flex-col gap-2 rounded-xl p-3">
@@ -114,7 +116,7 @@ const CheckPolygonControl = (props: CheckSitePolygonProps) => {
           className="flex items-center justify-between"
         >
           <Text variant="text-10-bold" className="text-white">
-            Polygon Checks
+            {t("Polygon Checks")}
           </Text>
           <Icon
             name={IconNames.CHEVRON_DOWN}
diff --git a/src/components/elements/Map-mapbox/MapControls/ImageControl.tsx b/src/components/elements/Map-mapbox/MapControls/ImageControl.tsx
index 7b4c01a0d..e4d9b93b5 100644
--- a/src/components/elements/Map-mapbox/MapControls/ImageControl.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/ImageControl.tsx
@@ -27,7 +27,7 @@ const ImageControl = ({
         descriptionInput="Drag and drop a geotagged or non-geotagged PNG, GIF or JPEG for your site Tannous/Brayton Road.."
         descriptionList={
           <Text variant="text-12-bold" className="mt-9 ">
-            Uploaded Files
+            {t("Uploaded Files")}
           </Text>
         }
         onClose={closeModal}
diff --git a/src/components/elements/Map-mapbox/MapControls/PolygonCheck.tsx b/src/components/elements/Map-mapbox/MapControls/PolygonCheck.tsx
index 3b399fa5d..738685541 100644
--- a/src/components/elements/Map-mapbox/MapControls/PolygonCheck.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/PolygonCheck.tsx
@@ -1,8 +1,11 @@
+import { useT } from "@transifex/react";
+
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 
 import Text from "../../Text/Text";
 
 const PolygonCheck = () => {
+  const t = useT();
   const polygonCheckData = [
     {
       id: "1",
@@ -55,7 +58,7 @@ const PolygonCheck = () => {
     <div className="relative flex w-[231px] flex-col gap-2 rounded-xl p-3">
       <div className="absolute top-0 left-0 -z-10 h-full w-full rounded-xl bg-[#FFFFFF33] backdrop-blur-md" />
       <Text variant="text-10-bold" className="text-white">
-        Polygon Checks
+        {t("Polygon Checks")}
       </Text>
       {polygonCheckData.map(polygon => (
         <div key={polygon.id} className="flex items-center gap-2">
diff --git a/src/components/elements/Map-mapbox/MapControls/SiteStatus.tsx b/src/components/elements/Map-mapbox/MapControls/SiteStatus.tsx
index 046c4a327..ae96844f0 100644
--- a/src/components/elements/Map-mapbox/MapControls/SiteStatus.tsx
+++ b/src/components/elements/Map-mapbox/MapControls/SiteStatus.tsx
@@ -1,3 +1,4 @@
+import { useT } from "@transifex/react";
 import { useState } from "react";
 
 import ModalConfirm from "@/components/extensive/Modal/ModalConfirm";
@@ -37,6 +38,7 @@ const dropdownOptions = [
 const SiteStatus = ({ record, refresh }: { record: any; refresh: any }) => {
   const { openModal, closeModal } = useModalContext();
   const [confirmChange, setConfirmChange] = useState(true);
+  const t = useT();
 
   const openFormModalHandler = (indexes: any[]) => {
     const optionSelected = dropdownOptions.find(option => option.value === indexes[0]);
@@ -46,7 +48,7 @@ const SiteStatus = ({ record, refresh }: { record: any; refresh: any }) => {
         commentArea
         content={
           <Text variant="text-14-light" className="text-center">
-            Are you sure you want to change the site status to {optionSelected?.title}?
+            {t("Are you sure you want to change the site status to")} {optionSelected?.title}?
           </Text>
         }
         onClose={closeModal}