issue #329: translation

ai-cfia · Nov 28, 2024 · 70ca32e · 70ca32e
1 parent 995c637
commit 70ca32e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/public/locales/en/labelDataValidationPage.json b/public/locales/en/labelDataValidationPage.json
@@ -39,7 +39,13 @@
     "stepTitle": "Instructions"
   },
   "guaranteedAnalysis": {
-    "stepTitle": "Guaranteed Analysis"
+    "stepTitle": "Guaranteed Analysis",
+    "title": "Title",
+    "labelFr": "French",
+    "placeholderFr": "Enter French title",
+    "labelEn": "English",
+    "placeholderEn": "Enter English title",
+    "nutrients": "Nutrients"
   },
   "verifiedQuantityMultiInput": {
     "deleteRow": "Delete this row",

diff --git a/public/locales/fr/labelDataValidationPage.json b/public/locales/fr/labelDataValidationPage.json
@@ -39,7 +39,13 @@
     "stepTitle": "Instructions"
   },
   "guaranteedAnalysis": {
-    "stepTitle": "Analyse garantie"
+    "stepTitle": "Analyse garantie",
+    "title": "Titre",
+    "labelFr": "Français",
+    "placeholderFr": "Entrez le titre en français",
+    "labelEn": "Anglais",
+    "placeholderEn": "Entrez le titre en anglais",
+    "nutrients": "Nutriments"
   },
   "verifiedQuantityMultiInput": {
     "deleteRow": "Supprimer cette ligne",

diff --git a/src/components/GuaranteedAnalysisForm.tsx b/src/components/GuaranteedAnalysisForm.tsx
@@ -2,13 +2,15 @@ import { FormComponentProps, LabelData, UNITS } from "@/types/types";
 import { Box, Typography } from "@mui/material";
 import { useEffect } from "react";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import VerifiedBilingualTable from "./VerifiedBilingualTable";
 import VerifiedInput from "./VerifiedInput";
 
 function GuaranteedAnalysisForm({
   labelData,
   setLabelData,
 }: FormComponentProps) {
+  const { t } = useTranslation("labelDataValidationPage");
   const methods = useForm<LabelData>({
     defaultValues: labelData,
   });
@@ -37,17 +39,17 @@ function GuaranteedAnalysisForm({
           fontWeight="bold"
           data-testid="guaranteed-analysis-title"
         >
-          Title
+          {t("guaranteedAnalysis.title")}
         </Typography>
         <Box className="grid grid-cols-1 items-start sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xxl:grid-cols-2 gap-4 p-4">
           <VerifiedInput
-            label={"English"}
-            placeholder={"Enter value in English"}
+            label={t("guaranteedAnalysis.labelEn")}
+            placeholder={t("guaranteedAnalysis.placeholderEn")}
             path="guaranteedAnalysis.titleEn"
           />
           <VerifiedInput
-            label={"French"}
-            placeholder={"Enter value in French"}
+            label={t("guaranteedAnalysis.labelFr")}
+            placeholder={t("guaranteedAnalysis.placeholderFr")}
             path="guaranteedAnalysis.titleFr"
           />
         </Box>
@@ -58,7 +60,7 @@ function GuaranteedAnalysisForm({
           className="!mt-16"
           data-testid="guaranteed-analysis-nutrients-title"
         >
-          Nutrients
+          {t("guaranteedAnalysis.nutrients")}
         </Typography>
         <Box className="px-4">
           <VerifiedBilingualTable