feat(participation): add same email validation for employer and display error message

Author: wiwski

lab/assets/js/participation/components/FieldError.tsx

@@ -16,40 +16,20 @@ export default function FieldError<T>({
 
   if (Array.isArray(fieldErrors)) {
     return (
-      <div
-        className="fr-messages-group"
+      <ErrorMessage
         id={`participation-${String(firstKey)}-messages`}
-        aria-live="polite"
-      >
-        {fieldErrors.map((errorMsg, idx) => (
-          <p
-            className="fr-message fr-message--error"
-            key={`participation-${String(firstKey)}-error-${idx}`}
-          >
-            {errorMsg}
-          </p>
-        ))}
-      </div>
+        errors={fieldErrors}
+      />
     );
   }
 
   if (!secondKey) {
     if ("non_field_errors" in fieldErrors) {
       return (
-        <div
-          className="fr-messages-group"
+        <ErrorMessage
           id={`participation-${String(firstKey)}-messages`}
-          aria-live="polite"
-        >
-          {fieldErrors.non_field_errors.map((errorMsg, idx) => (
-            <p
-              className="fr-message fr-message--error"
-              key={`participation-${String(firstKey)}-non-field-error-${idx}`}
-            >
-              {errorMsg}
-            </p>
-          ))}
-        </div>
+          errors={fieldErrors.non_field_errors}
+        />
       );
     }
     return null;
@@ -66,21 +46,23 @@ export default function FieldError<T>({
 
     if (Array.isArray(secondFieldErrors)) {
       return (
-        <div
-          className="fr-messages-group"
+        <ErrorMessage
           id={`participation-${String(firstKey)}-${String(secondKey)}-messages`}
-          aria-live="polite"
-        >
-          {secondFieldErrors.map((errorMsg, idx) => (
-            <p
-              className="fr-message fr-message--error"
-              key={`participation-${String(firstKey)}-${String(secondKey)}-error-${idx}`}
-            >
-              {errorMsg}
-            </p>
-          ))}
-        </div>
+          errors={secondFieldErrors}
+        />
       );
     }
   }
 }
+
+export function ErrorMessage({ id, errors }: { id: string; errors: string[] }) {
+  return (
+    <div className="fr-messages-group" id={id} aria-live="polite">
+      {errors.map((errorMsg, idx) => (
+        <p className="fr-message fr-message--error" key={`${id}-error-${idx}`}>
+          {errorMsg}
+        </p>
+      ))}
+    </div>
+  );
+}

lab/assets/js/participation/components/ParticipationForm.tsx

@@ -14,7 +14,7 @@ import {
   setProjectLeader,
   ValidationDataError,
 } from "../participation.service";
-import FieldError from "./FieldError";
+import FieldError, { ErrorMessage } from "./FieldError";
 import { useFormStatus } from "react-dom";
 
 interface ParticipationFormProps {
@@ -61,6 +61,9 @@ export default function ParticipationForm({
     employerFormExemptInfo: window.gettext(
       "Employer information is not required for the selected institution.",
     ),
+    sameEmailError: window.gettext(
+      "Employer email must be different from member email.",
+    ),
   };
 
   const [email, setEmail] = useState("");
@@ -109,6 +112,13 @@ export default function ParticipationForm({
     if (!institution.country) {
       return;
     }
+    if (
+      email &&
+      employer.email &&
+      email.toLowerCase() === employer.email.toLowerCase()
+    ) {
+      return;
+    }
     try {
       if (participationType === "leader") {
         await setProjectLeader(
@@ -283,6 +293,14 @@ export default function ParticipationForm({
                 firstKey="employer"
                 secondKey="email"
               />
+              {email &&
+                employer.email &&
+                email.toLowerCase() === employer.email.toLowerCase() && (
+                  <ErrorMessage
+                    id="participation-employer-email-messages"
+                    errors={[t.sameEmailError]}
+                  />
+                )}
             </div>
           </div>
           <div className="fr-fieldset__element">