issue #326: cautions form

public/locales/en/labelDataValidationPage.json

@@ -1,7 +1,4 @@
 {
-  "organizations": {
-    "stepTitle": "Organizations"
-  },
   "baseInformation": {
     "stepTitle": "Base Information",
     "fields": {
@@ -32,6 +29,12 @@
       }
     }
   },
+  "organizations": {
+    "stepTitle": "Organizations"
+  },
+  "cautions": {
+    "stepTitle": "Cautions"
+  },
   "verifiedQuantityMultiInput": {
     "deleteRow": "Delete this row",
     "defaultPlaceholder": "Enter value",
@@ -68,5 +71,30 @@
       "row": "Row containing inputs for unit and value",
       "errorIcon": "Icon indicating a validation error"
     }
+  },
+  "verifiedBilingualTable": {
+    "english": "English",
+    "french": "French",
+    "actions": "Actions",
+    "placeholders": {
+      "english": "Enter English text",
+      "french": "Enter French text"
+    },
+    "addRow": "Add Row",
+    "delete": "Delete Row",
+    "verify": "Mark as Verified",
+    "unverify": "Mark as Unverified",
+    "verifyAll": "Mark All as Verified",
+    "unverifyAll": "Mark All as Unverified",
+    "accessibility": {
+      "englishInput": "English text input for row {{row}}",
+      "frenchInput": "French text input for row {{row}}",
+      "deleteButton": "Button to delete this row",
+      "addRowButton": "Button to add a new row",
+      "verifyButton": "Button to mark this row as Verified",
+      "unverifyButton": "Button to mark this row as Unverified",
+      "verifyAllButton": "Button to mark all rows as Verified",
+      "unverifyAllButton": "Button to mark all rows as Unverified"
+    }
   }
 }

public/locales/fr/labelDataValidationPage.json

@@ -1,7 +1,4 @@
 {
-  "organizations": {
-    "stepTitle": "Organisations"
-  },
   "baseInformation": {
     "stepTitle": "Informations de base sur l'engrais",
     "fields": {
@@ -32,6 +29,12 @@
       }
     }
   },
+  "organizations": {
+    "stepTitle": "Organisations"
+  },
+  "cautions": {
+    "stepTitle": "Mises en garde"
+  },
   "verifiedQuantityMultiInput": {
     "deleteRow": "Supprimer cette ligne",
     "defaultPlaceholder": "Entrez une valeur",
@@ -68,5 +71,30 @@
       "row": "Ligne contenant les champs pour l'unité et la valeur",
       "errorIcon": "Icône indiquant une erreur de validation"
     }
+  },
+  "verifiedBilingualTable": {
+    "english": "Anglais",
+    "french": "Français",
+    "actions": "Actions",
+    "placeholders": {
+      "english": "Entrez le texte en anglais",
+      "french": "Entrez le texte en français"
+    },
+    "addRow": "Ajouter une ligne",
+    "delete": "Supprimer cette ligne",
+    "verify": "Marquer comme vérifié",
+    "unverify": "Marquer comme non vérifié",
+    "verifyAll": "Tout marquer comme vérifié",
+    "unverifyAll": "Tout marquer comme non vérifié",
+    "accessibility": {
+      "englishInput": "Zone de texte en anglais pour la ligne {{row}}",
+      "frenchInput": "Zone de texte en français pour la ligne {{row}}",
+      "deleteButton": "Bouton pour supprimer cette ligne",
+      "addRowButton": "Bouton pour ajouter une nouvelle ligne",
+      "verifyButton": "Bouton pour marquer cette ligne comme vérifiée",
+      "unverifyButton": "Bouton pour marquer cette ligne comme non vérifiée",
+      "verifyAllButton": "Bouton pour tout marquer comme vérifié",
+      "unverifyAllButton": "Bouton pour tout marquer comme non vérifié"
+    }
   }
 }

src/app/label-data-validation/__tests__/page.test.tsx

@@ -55,7 +55,8 @@ describe("LabelDataValidationPage Functionality", () => {
 
     fireEvent.click(nextButton);
     fireEvent.click(nextButton);
-    expect(screen.getByTestId("organizations-form")).toBeInTheDocument();
+    fireEvent.click(nextButton);
+    expect(screen.getByTestId("cautions-form")).toBeInTheDocument();
   });
 
   it("renders the mocked Image Viewer", () => {
@@ -66,11 +67,13 @@ describe("LabelDataValidationPage Functionality", () => {
   });
 });
 
-describe("LabelDataValidationPage and OrganizationsForm Integration", () => {
+describe("LabelDataValidationPage and Forms Integration", () => {
   it("marks the Organizations step as Completed or Incomplete when fields are Verified", () => {
     render(<LabelDataValidationPage />);
 
-    const spans = screen.getAllByText("organizations.stepTitle", { exact: true });
+    const spans = screen.getAllByText("organizations.stepTitle", {
+      exact: true,
+    });
     const targetSpan = spans.find((span) =>
       span.classList.contains("MuiStepLabel-label"),
     );
@@ -88,13 +91,13 @@ describe("LabelDataValidationPage and OrganizationsForm Integration", () => {
 
     expect(targetSpan).not.toHaveClass("Mui-completed");
   });
-});
 
-describe("LabelDataValidationPage and BaseInformationForm Integration", () => {
   it("marks the Base Information step as Completed or Incomplete when fields are Verified", async () => {
     render(<LabelDataValidationPage />);
 
-    const spans = screen.getAllByText("baseInformation.stepTitle", { exact: true });
+    const spans = screen.getAllByText("baseInformation.stepTitle", {
+      exact: true,
+    });
     const targetSpan = spans.find((span) =>
       span.classList.contains("MuiStepLabel-label"),
     );
@@ -124,4 +127,38 @@ describe("LabelDataValidationPage and BaseInformationForm Integration", () => {
 
     expect(targetSpan).not.toHaveClass("Mui-completed");
   });
+
+  it("marks the Cautions step as Completed or Incomplete when fields are Verified", async () => {
+    render(<LabelDataValidationPage />);
+
+    const spans = screen.getAllByText("cautions.stepTitle", {
+      exact: true,
+    });
+    const targetSpan = spans.find((span) =>
+      span.classList.contains("MuiStepLabel-label"),
+    );
+    expect(targetSpan).not.toHaveClass("Mui-completed");
+
+    const button = targetSpan!.closest("button");
+    await act(async () => {
+      fireEvent.click(button!);
+    });
+
+    const verifyButtons = screen.getAllByTestId(/verify-row-btn-cautions-\d+/);
+    expect(verifyButtons.length).toBeGreaterThanOrEqual(1);
+
+    for (const button of verifyButtons) {
+      await act(async () => {
+        fireEvent.click(button);
+      });
+    }
+
+    expect(targetSpan).toHaveClass("Mui-completed");
+
+    await act(async () => {
+      fireEvent.click(verifyButtons[0]);
+    });
+
+    expect(targetSpan).not.toHaveClass("Mui-completed");
+  });
 });

src/app/label-data-validation/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 import BaseInformationForm from "@/components/BaseInformationForm";
+import CautionsForm from "@/components/CautionsForm";
 import ImageViewer from "@/components/ImageViewer";
 import OrganizationsForm from "@/components/OrganizationsForm";
 import {
@@ -32,6 +33,9 @@ function LabelDataValidationPage() {
     useState<StepStatus>(StepStatus.Incomplete);
   const [baseInformationStepStatus, setBaseInformationStepStatus] =
     useState<StepStatus>(StepStatus.Incomplete);
+  const [cautionsStepStatus, setCautionsStepStatus] = useState<StepStatus>(
+    StepStatus.Incomplete,
+  );
   const { showAlert } = useAlertStore();
 
   const createStep = (
@@ -63,6 +67,12 @@ function LabelDataValidationPage() {
       organizationsStepStatus,
       setOrganizationsStepStatus,
     ),
+    createStep(
+      t("cautions.stepTitle"),
+      CautionsForm,
+      cautionsStepStatus,
+      setCautionsStepStatus,
+    ),
   ];
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -89,6 +99,13 @@ function LabelDataValidationPage() {
     );
   }, [labelData.baseInformation, setBaseInformationStepStatus]);
 
+  useEffect(() => {
+    const verified = labelData.cautions.every((caution) => caution.verified);
+    setCautionsStepStatus(
+      verified ? StepStatus.Completed : StepStatus.Incomplete,
+    );
+  }, [labelData.cautions, setCautionsStepStatus]);
+
   return (
     <Container
       className="flex flex-col max-w-[1920px] bg-gray-100 "

src/components/CautionsForm.tsx

@@ -0,0 +1,37 @@
+import { FormComponentProps, LabelData } from "@/types/types";
+import { Box } from "@mui/material";
+import { useEffect } from "react";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import VerifiedBilingualTable from "./VerifiedBilingualTable";
+
+function CautionsForm({ labelData, setLabelData }: FormComponentProps) {
+  const methods = useForm<LabelData>({
+    defaultValues: labelData,
+  });
+
+  const { control } = methods;
+
+  const watchedCautions = useWatch({
+    control,
+    name: "cautions",
+  });
+
+  useEffect(() => {
+    if (watchedCautions) {
+      setLabelData((prevLabelData) => ({
+        ...prevLabelData,
+        cautions: watchedCautions,
+      }));
+    }
+  }, [watchedCautions, setLabelData]);
+
+  return (
+    <FormProvider {...methods}>
+      <Box className="p-4" data-testid="cautions-form">
+        <VerifiedBilingualTable path={"cautions"} />
+      </Box>
+    </FormProvider>
+  );
+}
+
+export default CautionsForm;