Translating french and english

package.json

@@ -15,8 +15,10 @@
   "dependencies": {
     "@dts-stn/service-canada-design-system": "^1.67.3",
     "dotenv": "^16.4.5",
+    "i18next": "^23.11.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2",
     "react-zoom-pan-pinch": "^3.4.4"
   },
   "devDependencies": {

public/locales/en.json

@@ -0,0 +1,57 @@
+{
+    "analyzingText": "Your file is being analyzed",
+    "submitButton": "Submit",
+    "fileSelectionLabel": "File Selection",
+    "cameraLabel": "Camera",
+    "confirmationPage": "Confirmation Page",
+    "cancelButton": "Cancel",
+    "confirmButton": "Confirm",
+    "closeCard": "Close show more information",
+    "saveButton": "Save",
+    "modifyButton": "Modify",
+    "approveButton": "Approve",
+    "showMoreButton": "Show more",
+    "CFIALogo": "CFIA logo",
+    "textHeader":"Link to CFIA",
+    "headerLinkTitle":"CFIA",
+    "headerAlphaVersionText":"Alpha Version",
+    "fileListNoElement":"No element added",
+    "dragAndDropFileH3":"Attach a document",
+    "captureButton":"Capture",
+    "switchCameraButton":"Switch Camera",
+    "dragAndDropFilePOption1":"Drag & drop your files here or",
+    "dragAndDropFilePOption2":"Take a picture or",
+    "browseFileButton":"Browse Files",
+    "noPicture":"No picture",
+    "name": "Name",
+    "address": "Address",
+    "website": "Website",
+    "phoneNumber": "Phone Number",
+    "registrationNumber": "Registration Number",
+    "lotNumber": "Lot Number",
+    "npk": "NPK (Nitrogen, Phosphorus, Potassium)",
+    "precautionary_fr": "Precautionary (French)",
+    "precautionary_en": "Precautionary (English)",
+    "instructions_fr": "Instructions (French)",
+    "instructions_en": "Instructions (English)",
+    "ingredients_fr": "Ingredients (French)",
+    "ingredients_en": "Ingredients (English)",
+    "specifications_fr": "Specifications (French)",
+    "specifications_en": "Specifications (English)",
+    "cautions_fr": "Cautions (French)",
+    "cautions_en": "Cautions (English)",
+    "recommendation_fr": "Recommendation (French)",
+    "recommendation_en": "Recommendation (English)",
+    "firstAid_fr": "First Aid (French)",
+    "firstAid_en": "First Aid (English)",
+    "warranty_fr": "Warranty (French)",
+    "warranty_en": "Warranty (English)",
+    "danger_fr": "Danger (French)",
+    "danger_en": "Danger (English)",
+    "guaranteedAnalysis": "Guaranteed Analysis",
+    "nutrient": "Nutrient",
+    "percentage": "Percentage",
+    "weight": "Weight",
+    "density": "Density",
+    "volume": "Volume"
+}

public/locales/fr.json

@@ -0,0 +1,57 @@
+{
+    "analyzingText": "Votre fichier est en cours d'analyse",
+    "submitButton": "Soumettre",
+    "fileSelectionLabel": "Sélection de fichiers",
+    "cameraLabel": "Caméra",
+    "confirmationPage": "Page de confirmation",
+    "cancelButton": "Annuler",
+    "confirmButton": "Confirmer",
+    "closeCard": "Fermer la section afficher plus d'information",
+    "saveButton": "Enregistrer",
+    "modifyButton": "Modifier",
+    "approveButton": "Apprové",
+    "showMoreButton": "Voir plus",
+    "CFIALogo": "Logo ACIA",
+    "textHeader":"Lien à l'ACIA",
+    "headerLinkTitle":"ACIA",
+    "headerAlphaVersionText":"Version Alpha",
+    "fileListNoElement":"Aucun élément ajouté",
+    "dragAndDropFileH3":"Ajouter un document",
+    "captureButton":"Prendre",
+    "dragAndDropFilePOption1":"Glissez et déposez vos fichiers ici ou",
+    "dragAndDropFilePOption2":"Prendre une photo ou",
+    "browseFileButton":"Parcourir les fichiers",
+    "switchCameraButton":"Changer Camera",
+    "noPicture":"Aucune photo",
+    "name": "Nom",
+    "address": "Adresse",
+    "website": "Site web",
+    "phone_number": "Numéro de téléphone",
+    "registrationNumber": "Numéro d'enregistrement",
+    "lotNumber": "Numéro de lot",
+    "npk": "NPK( Azote, Phosphore et Potassium )",
+    "precautionary_fr": "Précaution (français)",
+    "precautionary_en": "Précaution (anglais)",
+    "instructions_fr": "Instruction (français)",
+    "instructions_en": "Instruction (anglais)",
+    "ingredients_fr": "Ingredient (français)",
+    "ingredients_en": "Ingredient (anglais)",
+    "specifications_fr": "Spécification (français)",
+    "specifications_en": "Spécification (anglais)",
+    "cautions_fr": "Caution (français)",
+    "cautions_en": "Caution (anglais)",
+    "recommendation_fr": "Recommendation (français)",
+    "recommendation_en": "Recommendation (anglais)",
+    "first_aid_fr": "Premier soin (français)",
+    "first_aid_en": "Premier soin (anglais)",
+    "warranty_fr": "Garantie (français)",
+    "warranty_en": "Garantie (anglais)",
+    "danger_fr": "Danger (français)",
+    "danger_en": "Danger (anglais)",
+    "guaranteed_analysis": "Analyse garantie",
+    "nutrient_in_guaranteed_analysis": "Nutriment",
+    "percentage_in_guaranteed_analysis": "Pourcentage",
+    "weight": "Poids",
+    "density": "Densité",
+    "volume": "Volume"
+}

src/Components/Carousel/Carousel.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import "./Carousel.css";
 import ImageZoomInOut from "../ImageZoomInOut/ImageZoomInOut";
+import { useTranslation } from "react-i18next";
+
 interface CarouselProps {
   imgs: {
     url: string;
@@ -20,6 +22,7 @@ class imgObject {
 }
 
 const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
+  const { t } = useTranslation();
   const [currImg, setCurrImg] = useState<number>(0);
 
   const imgList: imgObject[] = [];
@@ -49,7 +52,7 @@ const Carousel: React.FC<CarouselProps> = ({ imgs }) => {
         <ImageZoomInOut
           className="main-img"
           imageUrl={imgList.length > 0 ? imgList[currImg].url : ""}
-          alt="No picture"
+          alt={t("noPicture")}
         />
         <a className="next" onClick={() => selectImg(currImg + 1)}>
           &#10095;

src/Components/DragDropFileInput/DragDropFileInput.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import "./DragDropFileInput.css";
+import { useTranslation } from "react-i18next";
 
 interface FileInputProps {
   sendChange: (files: File[]) => void;
@@ -14,6 +15,7 @@ const DragDropFileInput: React.FC<FileInputProps> = ({
   file,
   mode,
 }) => {
+  const { t } = useTranslation();
   const [dragActive, setDragActive] = useState(false);
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [cameraMode, setCameraMode] = useState<"environment" | "user">(
@@ -145,7 +147,7 @@ const DragDropFileInput: React.FC<FileInputProps> = ({
 
   return (
     <div className="drag-drop-container">
-      <h3 className="title">Attach a document</h3>
+      <h3 className="title">{t("dragAndDropFileH3")}</h3>
 
       <div className="entry-wrapper">
         <div className={`input-wrapper ${mode == FILE_MODE ? "active" : ""}`}>
@@ -182,9 +184,11 @@ const DragDropFileInput: React.FC<FileInputProps> = ({
           <div className="camera-controls">
             <button id="capture" onClick={handleCapture} disabled={!stream}>
               {" "}
-              Capture{" "}
+              {t("captureButton")}{" "}
+            </button>
+            <button onClick={toggleCameraMode}>
+              {t("switchCameraButton")}
             </button>
-            <button onClick={toggleCameraMode}>Switch Camera</button>
           </div>
           <canvas
             id="canvas"
@@ -198,16 +202,16 @@ const DragDropFileInput: React.FC<FileInputProps> = ({
       <div className="drag-drop-inner">
         <p>
           {mode == FILE_MODE
-            ? "Drag & drop your files here or"
-            : "Take a picture or"}
+            ? t("dragAndDropFilePOption1")
+            : t("dragAndDropFilePOption2")}
         </p>
         <button type="button" onClick={selectFiles}>
           {" "}
-          Browse Files
+          {t("browseFileButton")}
         </button>
         <button type="button" onClick={handleCancel}>
           {" "}
-          Cancel{" "}
+          {t("cancelButton")}{" "}
         </button>
       </div>
     </div>

src/Components/FileList/FileList.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import "./FileList.css";
 import FileElement from "./FileElement/FileElement";
+import { useTranslation } from "react-i18next";
 
 interface FileListProps {
   files: File[];
@@ -13,6 +14,7 @@ const FileList: React.FC<FileListProps> = ({
   onSelectedChange,
   propagateDelete,
 }) => {
+  const { t } = useTranslation();
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
   const handleSelectFile = (file: File | null) => {
@@ -32,7 +34,7 @@ const FileList: React.FC<FileListProps> = ({
   return (
     <div className={`file-list ${files.length === 0 ? "empty" : ""}`}>
       <div className={`no-element ${files.length === 0 ? "active" : ""}`}>
-        No element to show
+        {t("fileListNoElement")}
       </div>
       {[...files].map((file: File, index: number) => (
         <FileElement

src/Components/Header/Header.tsx

@@ -1,11 +1,14 @@
 import { useRef } from "react";
 import cfia from "../../assets/CFIA_Banner.png";
 import "./Header.css";
+import { useTranslation } from "react-i18next";
+
 const environment = {
   version: "0.0.1",
 };
 
 function Header() {
+  const { t } = useTranslation();
   const header = useRef<HTMLElement | null>(null);
 
   // When the user scrolls the page, execute myFunction
@@ -28,17 +31,20 @@ function Header() {
       <nav>
         <ul>
           <li>
-            <a href="https://inspection.canada.ca/" title="ACIA | CFIA">
+            <a
+              href="https://inspection.canada.ca/"
+              title={t("headerLinkTitle")}
+            >
               <img
                 src={cfia}
                 id="header-img"
-                alt="CFIA logo"
-                aria-label="Link to CFIA | Lien à l'ACIA"
+                alt={t("CFIALogo")}
+                aria-label={t("textHeader")}
               />
             </a>
           </li>
           <li id="version">
-            Alpha Version{" "}
+            {t("headerAlphaVersionText")}{" "}
             {environment.version !== "" ? "v" + environment.version : ""}
           </li>
         </ul>