Fix BSVHU DSFR form (#3676)

* fix(Form): fix the way the DSFR form handles errors, normalize & type tab<>path methods, improve error display, prevent infinite loop * fix(BSVHU): fix contact fields overwriting, add error on wrong subtype for destination * fix(BSVHU): use classNames in identificationNumbers component
MTES-MCT · Oct 17, 2024 · 51f8fa8 · 51f8fa8
1 parent 5fbb7a4
commit 51f8fa8
Show file tree

Hide file tree

Showing 9 changed files with 285 additions and 208 deletions.
diff --git a/front/src/Apps/Dashboard/Creation/FormStepsContent.tsx b/front/src/Apps/Dashboard/Creation/FormStepsContent.tsx
@@ -5,15 +5,17 @@ import FormStepsTabs from "../../Forms/Components/FormStepsTabs/FormStepsTabs";
 import { Loader } from "../../common/Components";
 import { SealedFieldsContext } from "./context";
 import {
-  TabsName,
+  NormalizedError,
+  SupportedBsdTypes,
+  TabId,
   getNextTab,
   getPrevTab,
   getTabs,
   handleGraphQlError
 } from "./utils";
 
 interface FormStepsContentProps {
-  isCrematorium?: boolean;
+  bsdType: SupportedBsdTypes;
   sealedFields?: string[];
   isLoading: boolean;
   useformMethods: UseFormReturn<any>;
@@ -26,11 +28,11 @@ interface FormStepsContentProps {
     transporter: React.JSX.Element;
     destination: React.JSX.Element;
   };
-  setPublishErrors: Function;
-  errorTabIds?: string[] | (TabsName | undefined)[];
+  setPublishErrors: (normalizedErrors: NormalizedError[]) => void;
+  errorTabIds?: TabId[];
 }
 const FormStepsContent = ({
-  isCrematorium = false,
+  bsdType,
   tabsContent,
   sealedFields = [],
   isLoading,
@@ -41,9 +43,9 @@ const FormStepsContent = ({
   setPublishErrors,
   errorTabIds
 }: FormStepsContentProps) => {
-  const [selectedTabId, setSelectedTabId] = useState<TabsName>("waste");
+  const [selectedTabId, setSelectedTabId] = useState<TabId>(TabId.waste);
   const navigate = useNavigate();
-  const tabList = getTabs(isCrematorium, errorTabIds);
+  const tabList = getTabs(bsdType, errorTabIds);
   const tabIds = tabList.map(tab => tab.tabId);
   const lastTabId = tabIds[tabIds.length - 1];
   const firstTabId = tabIds[0];

diff --git a/front/src/Apps/Dashboard/Creation/bspaoh/FormSteps.tsx b/front/src/Apps/Dashboard/Creation/bspaoh/FormSteps.tsx
@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  BsdType,
   BspaohInput,
   Mutation,
   MutationCreateBspaohArgs,
@@ -34,8 +35,7 @@ import { Destination } from "./steps/Destination";
 import {
   getErrorTabIds,
   getPublishErrorMessages,
-  getPublishErrorTabIds,
-  getTabs
+  getPublishErrorTabIds
 } from "../utils";
 
 const paohToInput = (paoh: BspaohInput): BspaohInput => {
@@ -139,17 +139,23 @@ export function ControlledTabs(props: Readonly<Props>) {
     }
   }
 
-  const tabIds = getTabs().map(tab => tab.tabId);
   const errorsFromPublishApi =
     publishErrors || props?.publishErrorsFromRedirect;
   const publishErrorTabIds = getPublishErrorTabIds(
-    errorsFromPublishApi,
-    tabIds
+    BsdType.Bspaoh,
+    errorsFromPublishApi
   );
   const formStateErrorsKeys = Object.keys(methods?.formState?.errors);
-  const errorTabIds = getErrorTabIds(publishErrorTabIds, formStateErrorsKeys);
+  const errorTabIds = getErrorTabIds(
+    BsdType.Bspaoh,
+    publishErrorTabIds,
+    formStateErrorsKeys
+  );
 
-  const publishErrorMessages = getPublishErrorMessages(errorsFromPublishApi);
+  const publishErrorMessages = getPublishErrorMessages(
+    BsdType.Bspaoh,
+    errorsFromPublishApi
+  );
 
   const tabsContent = {
     waste: <Waste />,
@@ -179,13 +185,13 @@ export function ControlledTabs(props: Readonly<Props>) {
   return (
     <>
       <FormStepsContent
+        bsdType={BsdType.Bspaoh}
         draftCtaLabel={draftCtaLabel}
         isLoading={loading}
         mainCtaLabel={mainCtaLabel}
         saveForm={saveForm}
         sealedFields={sealedFields}
         useformMethods={methods}
-        isCrematorium={true}
         tabsContent={tabsContent}
         setPublishErrors={setPublishErrors}
         errorTabIds={errorTabIds}

diff --git a/front/src/Apps/Dashboard/Creation/bsvhu/BsvhuFormSteps.tsx b/front/src/Apps/Dashboard/Creation/bsvhu/BsvhuFormSteps.tsx
@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@apollo/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+  BsdType,
   BsvhuInput,
   Mutation,
   MutationCreateBsvhuArgs,
@@ -32,7 +33,7 @@ import {
   getErrorTabIds,
   getPublishErrorMessages,
   getPublishErrorTabIds,
-  getTabs
+  TabId
 } from "../utils";
 
 const vhuToInput = (paoh: BsvhuInput): BsvhuInput => {
@@ -134,49 +135,61 @@ const BsvhuFormSteps = ({
     }
   };
 
-  const tabIds = getTabs().map(tab => tab.tabId);
   const errorsFromPublishApi = publishErrors || publishErrorsFromRedirect;
   const publishErrorTabIds = getPublishErrorTabIds(
-    errorsFromPublishApi,
-    tabIds
+    BsdType.Bsvhu,
+    errorsFromPublishApi
   );
   const formStateErrorsKeys = Object.keys(methods?.formState?.errors);
-  const errorTabIds = getErrorTabIds(publishErrorTabIds, formStateErrorsKeys);
+  const errorTabIds = getErrorTabIds(
+    BsdType.Bsvhu,
+    publishErrorTabIds,
+    formStateErrorsKeys
+  );
 
-  const publishErrorMessages = getPublishErrorMessages(errorsFromPublishApi);
+  const publishErrorMessages = useMemo(
+    () => getPublishErrorMessages(BsdType.Bsvhu, errorsFromPublishApi),
+    [errorsFromPublishApi]
+  );
 
-  const tabsContent = {
-    waste: (
-      <WasteBsvhu
-        errors={publishErrorMessages?.filter(error => error.tabId === "waste")}
-      />
-    ),
-    emitter: (
-      <EmitterBsvhu
-        errors={publishErrorMessages?.filter(
-          error => error.tabId === "emitter"
-        )}
-      />
-    ),
-    transporter: (
-      <TransporterBsvhu
-        errors={publishErrorMessages?.filter(
-          error => error.tabId === "transporter"
-        )}
-      />
-    ),
-    destination: (
-      <DestinationBsvhu
-        errors={publishErrorMessages?.filter(
-          error => error.tabId === "destination"
-        )}
-      />
-    )
-  };
+  const tabsContent = useMemo(
+    () => ({
+      waste: (
+        <WasteBsvhu
+          errors={publishErrorMessages.filter(
+            error => error.tabId === TabId.waste
+          )}
+        />
+      ),
+      emitter: (
+        <EmitterBsvhu
+          errors={publishErrorMessages.filter(
+            error => error.tabId === TabId.emitter
+          )}
+        />
+      ),
+      transporter: (
+        <TransporterBsvhu
+          errors={publishErrorMessages.filter(
+            error => error.tabId === TabId.transporter
+          )}
+        />
+      ),
+      destination: (
+        <DestinationBsvhu
+          errors={publishErrorMessages.filter(
+            error => error.tabId === TabId.destination
+          )}
+        />
+      )
+    }),
+    [publishErrorMessages]
+  );
 
   return (
     <>
       <FormStepsContent
+        bsdType={BsdType.Bsvhu}
         draftCtaLabel={draftCtaLabel}
         isLoading={loading}
         mainCtaLabel={mainCtaLabel}

diff --git a/front/src/Apps/Dashboard/Creation/bsvhu/steps/Destination.tsx b/front/src/Apps/Dashboard/Creation/bsvhu/steps/Destination.tsx
@@ -33,14 +33,12 @@ const DestinationBsvhu = ({ errors }) => {
 
   useEffect(() => {
     if (errors?.length) {
-      if (!destination?.company?.siret) {
-        setFieldError(
-          errors,
-          `${actor}.company.siret`,
-          formState.errors?.[actor]?.["company"]?.siret,
-          setError
-        );
-      }
+      setFieldError(
+        errors,
+        `${actor}.company.siret`,
+        formState.errors?.[actor]?.["company"]?.siret,
+        setError
+      );
       if (!destination?.company?.contact) {
         setFieldError(
           errors,
@@ -90,20 +88,8 @@ const DestinationBsvhu = ({ errors }) => {
         );
       }
     }
-  }, [
-    errors,
-    errors?.length,
-    formState.errors,
-    formState.errors.length,
-    setError,
-    destination?.company?.siret,
-    destination?.company?.contact,
-    destination?.company?.address,
-    destination?.company?.phone,
-    destination?.company?.mail,
-    destination?.company?.vatNumber,
-    destination?.agrementNumber
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors]);
 
   const updateAgrementNumber = (destination, type?) => {
     const destinationType = type || destination?.type;
@@ -162,6 +148,8 @@ const DestinationBsvhu = ({ errors }) => {
         return "Cet établissement n'est pas inscrit sur Trackdéchets, il ne peut pas être ajouté sur le bordereau.";
       } else if (!company.companyTypes?.includes(CompanyType.WasteVehicles)) {
         return "Cet établissement n'a pas le profil Installation de traitement de VHU.";
+      } else if (formState.errors?.destination?.["company"]?.siret?.message) {
+        return formState.errors?.destination?.["company"]?.siret?.message;
       }
     }
     return null;
@@ -215,41 +203,48 @@ const DestinationBsvhu = ({ errors }) => {
           selectedCompanyError={selectedCompanyError}
           onCompanySelected={company => {
             if (company) {
+              if (company.siret !== destination?.company?.siret) {
+                setValue(`${actor}.company.contact`, company.contact);
+                setValue(`${actor}.company.phone`, company.contactPhone);
+
+                setValue(`${actor}.company.mail`, company.contactEmail);
+                if (errors?.length) {
+                  // server errors
+                  clearCompanyError(destination, actor, clearErrors);
+                  clearErrors(`${actor}.agrementNumber`);
+                }
+              } else {
+                setValue(
+                  `${actor}.company.contact`,
+                  destination?.company?.contact || company.contact
+                );
+                setValue(
+                  `${actor}.company.phone`,
+                  destination?.company?.phone || company.contactPhone
+                );
+
+                setValue(
+                  `${actor}.company.mail`,
+                  destination?.company?.mail || company.contactEmail
+                );
+              }
               setValue(`${actor}.company.orgId`, company.orgId);
               setValue(`${actor}.company.siret`, company.siret);
               setValue(`${actor}.company.name`, company.name);
               setValue(`${actor}.company.vatNumber`, company.vatNumber);
               setValue(`${actor}.company.address`, company.address);
-              setValue(
-                `${actor}.company.contact`,
-                destination?.company?.contact || company.contact
-              );
-              setValue(
-                `${actor}.company.phone`,
-                destination?.company?.phone || company.contactPhone
-              );
-
-              setValue(
-                `${actor}.company.mail`,
-                destination?.company?.mail || company.contactEmail
-              );
 
               setSelectedDestination(company);
               updateAgrementNumber(company, destination?.type);
-
-              if (errors?.length) {
-                // server errors
-                clearCompanyError(destination, actor, clearErrors);
-                clearErrors(`${actor}.agrementNumber`);
-              }
             }
           }}
         />
-        {formState.errors?.destination?.["company"]?.siret && (
-          <p className="fr-text--sm fr-error-text fr-mb-4v">
-            {formState.errors?.destination?.["company"]?.siret?.message}
-          </p>
-        )}
+        {!destination?.company?.siret &&
+          formState.errors?.destination?.["company"]?.siret && (
+            <p className="fr-text--sm fr-error-text fr-mb-4v">
+              {formState.errors?.destination?.["company"]?.siret?.message}
+            </p>
+          )}
         <CompanyContactInfo
           fieldName={`${actor}.company`}
           name={actor}

diff --git a/front/src/Apps/Dashboard/Creation/bsvhu/steps/Transporter.tsx b/front/src/Apps/Dashboard/Creation/bsvhu/steps/Transporter.tsx
@@ -126,29 +126,34 @@ const TransporterBsvhu = ({ errors }) => {
           selectedCompanyError={selectedCompanyError}
           onCompanySelected={company => {
             if (company) {
+              if (company.siret !== transporter?.company?.siret) {
+                setValue(`${actor}.company.contact`, company.contact);
+                setValue(`${actor}.company.phone`, company.contactPhone);
+                setValue(`${actor}.company.mail`, company.contactEmail);
+                if (errors?.length) {
+                  // server errors
+                  clearCompanyError(transporter, actor, clearErrors);
+                }
+              } else {
+                setValue(
+                  `${actor}.company.contact`,
+                  transporter?.company?.contact || company.contact
+                );
+                setValue(
+                  `${actor}.company.phone`,
+                  transporter?.company?.phone || company.contactPhone
+                );
+
+                setValue(
+                  `${actor}.company.mail`,
+                  transporter?.company?.mail || company.contactEmail
+                );
+              }
               setValue(`${actor}.company.orgId`, company.orgId);
               setValue(`${actor}.company.siret`, company.siret);
               setValue(`${actor}.company.name`, company.name);
               setValue(`${actor}.company.vatNumber`, company.vatNumber);
               setValue(`${actor}.company.address`, company.address);
-              setValue(
-                `${actor}.company.contact`,
-                transporter?.company?.contact || company.contact
-              );
-              setValue(
-                `${actor}.company.phone`,
-                transporter?.company?.phone || company.contactPhone
-              );
-
-              setValue(
-                `${actor}.company.mail`,
-                transporter?.company?.mail || company.contactEmail
-              );
-
-              if (errors?.length) {
-                // server errors
-                clearCompanyError(transporter, actor, clearErrors);
-              }
             }
           }}
         />