[TM-874] solved PR - add transifex and remove mocked data

wri · Jun 13, 2024 · 7968367 · 7968367
1 parent 02017fc
commit 7968367
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 90 deletions.
diff --git a/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx b/src/components/elements/MapPolygonPanel/MapEditPolygonPanel.tsx
@@ -23,73 +23,71 @@ const MapEditPolygonPanel = ({
   tabEditPolygon,
   setTabEditPolygon,
   setPreviewVersion
-}: MapEditPolygonPanelProps) => {
-  return (
-    <>
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <Text variant="text-12-light" className="text-white ">
-            Faja Lobi Project
-          </Text>
-          <Text variant="text-20-bold" className="mb-4 text-white">
-            Iseme Site
-          </Text>
-        </div>
-
-        <Button variant="text" onClick={() => setEditPolygon(false)} className="text-white hover:text-primary">
-          <Icon name={IconNames.CLEAR} className="h-4 w-4" />
-        </Button>
-      </div>
-      <div className="flex rounded-lg bg-white">
-        <button
-          className={classNames(
-            "text-12-semibold w-1/3 rounded-l-lg border border-neutral-300 p-3 hover:bg-neutral-100",
-            tabEditPolygon === "Attributes"
-              ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
-              : "border border-neutral-300"
-          )}
-          onClick={() => {
-            setTabEditPolygon("Attributes");
-          }}
-        >
-          {t("Attributes")}
-        </button>
-        <button
-          className={classNames(
-            "text-12-semibold w-1/3 border border-neutral-300 p-3 hover:bg-neutral-100",
-            tabEditPolygon === "Checklist"
-              ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
-              : "border border-neutral-300"
-          )}
-          onClick={() => {
-            setTabEditPolygon("Checklist");
-          }}
-        >
-          {t("Checklist")}
-        </button>
-        <button
-          className={classNames(
-            "text-12-semibold w-1/3 rounded-r-lg border border-neutral-300 p-3 hover:bg-neutral-100",
-            tabEditPolygon === "Version"
-              ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
-              : "border border-neutral-300"
-          )}
-          onClick={() => {
-            setTabEditPolygon("Version");
-          }}
-        >
-          {t("Version")}
-        </button>
+}: MapEditPolygonPanelProps) => (
+  <>
+    <div className="flex items-start justify-between gap-4">
+      <div>
+        <Text variant="text-12-light" className="text-white ">
+          -
+        </Text>
+        <Text variant="text-20-bold" className="mb-4 text-white">
+          -
+        </Text>
       </div>
-      <div className="mr-[-10px] mt-4 h-[calc(100%-132px)] overflow-y-auto pr-2">
-        <When condition={tabEditPolygon === "Attributes"}>{AttributeInformation}</When>
-        <When condition={tabEditPolygon === "Checklist"}>{ChecklistInformation}</When>
-        <When condition={tabEditPolygon === "Version"}>
-          <VersionInformation setPreviewVersion={setPreviewVersion} />
-        </When>
-      </div>
-    </>
-  );
-};
+
+      <Button variant="text" onClick={() => setEditPolygon(false)} className="text-white hover:text-primary">
+        <Icon name={IconNames.CLEAR} className="h-4 w-4" />
+      </Button>
+    </div>
+    <div className="flex rounded-lg bg-white">
+      <button
+        className={classNames(
+          "text-12-semibold w-1/3 rounded-l-lg border border-neutral-300 p-3 hover:bg-neutral-100",
+          tabEditPolygon === "Attributes"
+            ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
+            : "border border-neutral-300"
+        )}
+        onClick={() => {
+          setTabEditPolygon("Attributes");
+        }}
+      >
+        {t("Attributes")}
+      </button>
+      <button
+        className={classNames(
+          "text-12-semibold w-1/3 border border-neutral-300 p-3 hover:bg-neutral-100",
+          tabEditPolygon === "Checklist"
+            ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
+            : "border border-neutral-300"
+        )}
+        onClick={() => {
+          setTabEditPolygon("Checklist");
+        }}
+      >
+        {t("Checklist")}
+      </button>
+      <button
+        className={classNames(
+          "text-12-semibold w-1/3 rounded-r-lg border border-neutral-300 p-3 hover:bg-neutral-100",
+          tabEditPolygon === "Version"
+            ? "border-0 border-b-4 border-primary bg-blueCustom-10 pb-2"
+            : "border border-neutral-300"
+        )}
+        onClick={() => {
+          setTabEditPolygon("Version");
+        }}
+      >
+        {t("Version")}
+      </button>
+    </div>
+    <div className="mr-[-10px] mt-4 h-[calc(100%-132px)] overflow-y-auto pr-2">
+      <When condition={tabEditPolygon === "Attributes"}>{AttributeInformation}</When>
+      <When condition={tabEditPolygon === "Checklist"}>{ChecklistInformation}</When>
+      <When condition={tabEditPolygon === "Version"}>
+        <VersionInformation setPreviewVersion={setPreviewVersion} />
+      </When>
+    </div>
+  </>
+);
 
 export default MapEditPolygonPanel;
diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCheckPanelItem.tsx
@@ -1,3 +1,4 @@
+import { useT } from "@transifex/react";
 import classNames from "classnames";
 import { DetailedHTMLProps, Dispatch, HTMLAttributes, SetStateAction, useState } from "react";
 import { When } from "react-if";
@@ -37,35 +38,37 @@ const MapPolygonCheckPanelItem = ({
 }: MapPolygonCheckPanelItemProps) => {
   const { openModal, closeModal } = useModalContext();
   const [openCollapse, setOpenCollapse] = useState(true);
+  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={() => {}}
       />
@@ -78,7 +81,7 @@ const MapPolygonCheckPanelItem = ({
       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: () => {
@@ -92,7 +95,7 @@ const MapPolygonCheckPanelItem = ({
       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>
       )
     },
@@ -101,7 +104,7 @@ const MapPolygonCheckPanelItem = ({
       render: () => (
         <Text variant="text-14-semibold" className="flex items-center">
           <Icon name={IconNames.DOWNLOAD_PA} className="h-4 w-4 lg:h-5 lg:w-5" />
-          &nbsp; Download
+          &nbsp; {t("Download")}
         </Text>
       )
     },
@@ -111,7 +114,7 @@ const MapPolygonCheckPanelItem = ({
         <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>
       )
@@ -122,7 +125,7 @@ const MapPolygonCheckPanelItem = ({
         <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>
       )
@@ -133,7 +136,7 @@ const MapPolygonCheckPanelItem = ({
         <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>
       )
@@ -162,7 +165,7 @@ const MapPolygonCheckPanelItem = ({
           <div className={classNames("h-4 w-4 rounded-full", dynamicClasses(status))} />{" "}
           <div className="flex flex-1 flex-col">
             <Text variant="text-14-light" className="text-white">
-              {title}
+              {t(title)}
             </Text>
           </div>
           <div className="flex h-full items-start self-start">
@@ -196,7 +199,7 @@ const MapPolygonCheckPanelItem = ({
               <div key={index} className="flex items-center gap-2">
                 <Icon name={IconNames.ERROR_WHITE_BORDER_RED} className="h-4 w-4 rounded-lg text-white lg:h-5 lg:w-5" />
                 <Text variant="text-14-light" className="text-white">
-                  {item}
+                  {t(item)}
                 </Text>
               </div>
             ))}

diff --git a/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx b/src/components/elements/MapPolygonPanel/MapPolygonCkeckPanel.tsx
@@ -23,12 +23,12 @@ const MapPlygonCheckPanel = ({ emptyText, onLoadMore, setEditPolygon, selected }
   return (
     <>
       <Text variant="text-14" className="mb-6 text-white">
-        Available polygons
+        {t("Available polygons")}
       </Text>
       <div className="h-[calc(100%-150px)] rounded-bl-lg">
         {PolygonAvailableData.length === 0 && (
           <Text variant="text-16-light" className="mt-8 text-white">
-            {emptyText || t("No result")}
+            {t(emptyText) ?? t("No result")}
           </Text>
         )}
         <div
@@ -60,7 +60,7 @@ const MapPlygonCheckPanel = ({ emptyText, onLoadMore, setEditPolygon, selected }
       </div>
       <Text variant="text-14-bold" className="mt-6 flex items-center uppercase text-white">
         <Icon name={IconNames.PLUS_PA} className="h-4 w-4" />
-        &nbsp; Add Polygon
+        &nbsp; {t("Add Polygon")}
       </Text>
     </>
   );

diff --git a/src/components/elements/MapPolygonPanel/VersionInformation.tsx b/src/components/elements/MapPolygonPanel/VersionInformation.tsx
@@ -17,8 +17,8 @@ const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch
   const openFormModalHandlerConfirm = () => {
     openModal(
       <ModalConfirm
-        title={"Confirm Version Delete?"}
-        content="Do you want to delete this version?"
+        title={t("Confirm Version Delete?")}
+        content={t("Do you want to delete this version?")}
         onClose={closeModal}
         onConfirm={() => {}}
       />
@@ -71,8 +71,8 @@ const VersionInformation = ({ setPreviewVersion }: { setPreviewVersion: Dispatch
         <div className="flex justify-between">
           <button
             className={classNames("text-10-bold w-[64%] rounded-md border border-white", {
-              "bg-white text-[#797F62]": true, // Replace 'item.current === "Yes"' with 'true' or provide a valid variable
-              "bg-transparent text-white": false // Replace 'item.current === "No"' with 'false' or provide a valid variable
+              "bg-white text-[#797F62]": true,
+              "bg-transparent text-white": false
             })}
           >
             -