feat: better error messages on conformité (#1127)

* feat: better error messages on conformité * content: improve error message Signed-off-by: Xavier Jp <[email protected]> * style: improve error display --------- Signed-off-by: Xavier Jp <[email protected]>
annuaire-entreprises-data-gouv-fr · Jul 18, 2024 · 321b002 · 321b002
1 parent 6003447
commit 321b002
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 110 deletions.
diff --git a/app/(header-default)/documents/[slug]/_components/conformite-section.tsx b/app/(header-default)/documents/[slug]/_components/conformite-section.tsx
diff --git a/components-ui/icon/index.tsx b/components-ui/icon/index.tsx
@@ -119,6 +119,7 @@ const alertFill = (
     height="100%"
     fill="currentColor"
     stroke="currentColor"
+    strokeWidth="0"
   >
     <path d="m12.866 3 9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0ZM11 16v2h2v-2h-2Zm0-7v5h2V9h-2Z" />
   </svg>

diff --git a/components-ui/show-more/index.tsx b/components-ui/show-more/index.tsx
@@ -22,7 +22,7 @@ Design point of attention:
 export default function ShowMore(props: IProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const id = useId();
-  const collapsedHeight = props.collapsedHeight ?? '25rem';
+  const collapsedHeight = props.collapsedHeight ?? '30rem';
   return (
     <div
       className={isExpanded ? styles['expanded'] : styles['collapsed']}

diff --git a/components/espace-agent-components/administration-information.tsx b/components/espace-agent-components/administration-information.tsx
diff --git a/components/espace-agent-components/conformite-section.tsx b/components/espace-agent-components/conformite-section.tsx
@@ -36,13 +36,19 @@ function ConformiteSection({ uniteLegale, session }: IProps) {
         {(conformite) => (
           <TwoColumnTable
             body={[
-              ['Conformité fiscale', <Conformite data={conformite?.fiscale} />],
+              [
+                'Conformité fiscale',
+                <Conformite
+                  data={conformite?.fiscale}
+                  administration="DGFiP"
+                />,
+              ],
               [
                 'Conformité sociale',
                 <>
                   <Conformite
                     data={conformite?.vigilance}
-                    administration="Urssaf"
+                    administration="URSSAF"
                   />
                   <br />
                   <Conformite data={conformite?.msa} administration="MSA" />

diff --git a/components/espace-agent-components/conformite.tsx b/components/espace-agent-components/conformite.tsx
@@ -2,65 +2,72 @@ import React from 'react';
 import { Icon } from '#components-ui/icon/wrapper';
 import {
   IAPINotRespondingError,
+  isAPI404,
   isAPINotResponding,
 } from '#models/api-not-responding';
 import { IConformite } from '#models/espace-agent/conformite';
-import AdministrationInformation from './administration-information';
 
 const APINotRespongingElement: React.FC<{
   data: IAPINotRespondingError;
-  administration?: string;
+  administration: string;
 }> = ({ data, administration }) => {
   return (
-    <Icon slug="closed">
-      {(data?.errorType === 404 && (
-        <AdministrationInformation
-          str="document non trouvé"
-          administration={administration}
-        />
-      )) ||
-        (data?.errorType === 408 && (
-          <AdministrationInformation
-            str="la récupération du document a pris trop de temps"
-            administration={administration}
-          />
-        )) || (
-          <AdministrationInformation
-            str={`erreur ${data?.errorType}`}
-            administration={administration}
-          />
-        )}
-    </Icon>
+    <>
+      {(data?.errorType === 408 && (
+        <>
+          <i>
+            <Icon slug="alertFill" color="orange">
+              La récupération du document auprès des services {administration} a
+              pris trop de temps.
+            </Icon>
+          </i>
+          <br />
+          <a href="">Rechargez la page</a> ou ré-essayez plus-tard.
+          <br />
+          <br />
+        </>
+      )) || (
+        <>
+          <i>
+            <Icon slug="errorFill" color="#df0a00">
+              La récupération du document auprès des services {administration} a
+              échoué.
+            </Icon>
+          </i>
+          <br />
+          Ré-essayez plus tard ou rapprochez-vous de l’entreprise pour lui
+          demander la pièce directement.
+          <br />
+          <br />
+        </>
+      )}
+    </>
   );
 };
 
 const Conformite: React.FC<{
   data: IConformite | IAPINotRespondingError;
-  administration?: string;
+  administration: string;
 }> = ({ data, administration }) => {
   if (isAPINotResponding(data)) {
-    return (
-      <APINotRespongingElement data={data} administration={administration} />
-    );
+    if (isAPI404(data)) {
+      return (
+        <Icon slug="closed">{administration} : document introuvable.</Icon>
+      );
+    } else {
+      return (
+        <APINotRespongingElement data={data} administration={administration} />
+      );
+    }
   }
 
+  const valid = data.isValid === true;
+  const iconSlug = valid ? 'open' : 'closed';
+  const label = `${administration} : ${valid ? '' : 'non-'}conforme`;
+
   return (
     <div className="layout-space-between">
-      {data.isValid === true ? (
-        <Icon slug="open">
-          <AdministrationInformation
-            str="conforme"
-            administration={administration}
-          />
-        </Icon>
-      ) : (
-        <Icon slug="closed">
-          <AdministrationInformation
-            str="non conforme"
-            administration={administration}
-          />
-        </Icon>
-      )}
+      <Icon slug={iconSlug}>{label}</Icon>
       {data.url && (
         <a href={data.url}>
           <Icon slug="download">{data.label || 'télécharger'}</Icon>