From 1554e3b5a2915e0b18ffbd7f5eaee8fe4e58ee75 Mon Sep 17 00:00:00 2001
From: Guillaume Fay <guillaume_fay@hotmail.com>
Date: Mon, 13 Nov 2023 15:20:11 +0100
Subject: [PATCH] feedback Jules

---
 ...ation-infos.js => certification-infos.tsx} | 98 +++++++++++--------
 components/bal/commune-tab.tsx                |  2 +-
 2 files changed, 58 insertions(+), 42 deletions(-)
 rename components/bal/{certification-infos.js => certification-infos.tsx} (64%)

diff --git a/components/bal/certification-infos.js b/components/bal/certification-infos.tsx
similarity index 64%
rename from components/bal/certification-infos.js
rename to components/bal/certification-infos.tsx
index f5bf796c3..f3a36ca1a 100644
--- a/components/bal/certification-infos.js
+++ b/components/bal/certification-infos.tsx
@@ -1,13 +1,31 @@
 import {useState, useContext, useEffect} from 'react'
-import {Pane, Heading, Dialog, Button, Text, Alert, EndorsedIcon, WarningSignIcon, LightbulbIcon, ChevronUpIcon, ChevronDownIcon} from 'evergreen-ui'
+import {
+  Pane,
+  Heading,
+  Dialog,
+  Button,
+  Text,
+  Alert,
+  EndorsedIcon,
+  WarningSignIcon,
+  LightbulbIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  LockIcon
+} from 'evergreen-ui'
 
 import BalDataContext from '@/contexts/bal-data'
 
 import ProgressBar from '@/components/progress-bar'
 import Counter from '@/components/counter'
 
-function CertificationInfos() {
-  const {certifyAllNumeros, baseLocale, reloadBaseLocale} = useContext(BalDataContext)
+interface CertificationInfosProps {
+  openRecoveryDialog?: () => void;
+}
+
+function CertificationInfos({openRecoveryDialog}: CertificationInfosProps) {
+  const {certifyAllNumeros, baseLocale, reloadBaseLocale} =
+    useContext(BalDataContext)
   const [isDialogShown, setIsDialogShown] = useState(false)
   const [isInfosShown, setIsInfosShown] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
@@ -34,12 +52,7 @@ function CertificationInfos() {
   }
 
   return (
-    <Pane
-      backgroundColor='white'
-      padding={8}
-      borderRadius={10}
-      margin={8}
-    >
+    <Pane backgroundColor='white' padding={8} borderRadius={10} margin={8}>
       {!baseLocale.isAllCertified && (
         <>
           <Heading>Nombre d’adresses certifiées</Heading>
@@ -66,11 +79,7 @@ function CertificationInfos() {
               onCloseComplete={handleClose}
               footer={
                 <Pane>
-                  <Button
-                    onClick={handleClose}
-                  >
-                    Annuler
-                  </Button>
+                  <Button onClick={handleClose}>Annuler</Button>
                   <Button
                     isLoading={isLoading}
                     appearance='primary'
@@ -84,17 +93,12 @@ function CertificationInfos() {
               }
             >
               <Pane>
-                <Pane
-                  display='flex'
-                  alignItems='center'
-                >
-                  <WarningSignIcon
-                    size={65}
-                    margin={20}
-                    color='warning'
-                  />
+                <Pane display='flex' alignItems='center'>
+                  <WarningSignIcon size={65} margin={20} color='warning' />
                   <Text size={500}>
-                    Vous vous apprêtez à certifier <b>{nbNumeros - nbNumerosCertifies}</b> adresses de votre commune, <b> cette action ne peut pas être annulée</b>
+                    Vous vous apprêtez à certifier{' '}
+                    <b>{nbNumeros - nbNumerosCertifies}</b> adresses de votre
+                    commune, <b> cette action ne peut pas être annulée</b>
                   </Text>
                 </Pane>
               </Pane>
@@ -105,7 +109,9 @@ function CertificationInfos() {
                 iconBefore={LightbulbIcon}
                 iconAfter={isInfosShown ? ChevronUpIcon : ChevronDownIcon}
                 appearance='minimal'
-                onClick={() => setIsInfosShown(!isInfosShown)}
+                onClick={() => {
+                  setIsInfosShown(!isInfosShown)
+                }}
               >
                 En savoir plus sur la certification
               </Button>
@@ -118,16 +124,26 @@ function CertificationInfos() {
         <Pane paddingTop={15}>
           <Alert>
             <Heading size={400}>
-              Pour faciliter la réutilisation des adresses, <u>il est conseillé de les certifier</u>.
+              Pour faciliter la réutilisation des adresses,{' '}
+              <u>il est conseillé de les certifier</u>.
             </Heading>
             <br />
             <Text>
-              Il est tout à fait possible de publier une Base Adresse Locale dont l’ensemble des <u>numéros n’ont pas encore été vérifiés : ils doivent rester non-certifiés.</u>
+              Il est tout à fait possible de publier une Base Adresse Locale
+              dont l’ensemble des{' '}
+              <u>
+                numéros n’ont pas encore été vérifiés : ils doivent rester
+                non-certifiés.
+              </u>
               <br />
             </Text>
             <Pane paddingTop={15}>
               <Text>
-                En revanche, les numéros qui auront été authentifiés par la commune <u>devront être certifiés</u>, qu’ils soient nouvellement crées par la commune ou que leur correspondance avec la liste officielle qui ressort du Conseil municipal, soit avérée.
+                En revanche, les numéros qui auront été authentifiés par la
+                commune <u>devront être certifiés</u>, qu’ils soient
+                nouvellement crées par la commune ou que leur correspondance
+                avec la liste officielle qui ressort du Conseil municipal, soit
+                avérée.
               </Text>
             </Pane>
             <Heading paddingY={15}>
@@ -135,19 +151,24 @@ function CertificationInfos() {
             </Heading>
             <Pane>
               <Text>
-                Si vous avez déjà procédé à la vérification de toutes les adresses de votre commune, cliquez sur le bouton «certifier mes adresses».
+                Si vous avez déjà procédé à la vérification de toutes les
+                adresses de votre commune, cliquez sur le bouton «certifier mes
+                adresses».
               </Text>
             </Pane>
-            <Pane
-              display='flex'
-              justifyContent='end'
-              paddingTop={15}
-            >
+            <Pane display='flex' justifyContent='end' paddingTop={15}>
               <Button
                 isLoading={isLoading}
+                iconBefore={openRecoveryDialog && LockIcon}
                 intent='infos'
                 appearance='primary'
-                onClick={() => setIsDialogShown(true)}
+                onClick={() => {
+                  if (openRecoveryDialog) {
+                    openRecoveryDialog()
+                  } else {
+                    setIsDialogShown(true)
+                  }
+                }}
               >
                 Certifier mes adresses
               </Button>
@@ -157,12 +178,7 @@ function CertificationInfos() {
       )}
 
       {baseLocale.isAllCertified && (
-        <Pane
-          display='flex'
-          alignItems='center'
-          marginY='1em'
-          marginX='4px'
-        >
+        <Pane display='flex' alignItems='center' marginY='1em' marginX='4px'>
           <EndorsedIcon color='success' size={50} />
           <Text size={500} paddingLeft={20}>
             Toutes les adresses sont certifiées par la commune
diff --git a/components/bal/commune-tab.tsx b/components/bal/commune-tab.tsx
index 085fcfc4f..4e547a638 100644
--- a/components/bal/commune-tab.tsx
+++ b/components/bal/commune-tab.tsx
@@ -22,7 +22,7 @@ function CommuneTab({commune, openRecoveryDialog}: CommuneTabProps) {
     <Pane overflowY='auto'>
       {!token && <ReadOnlyInfos openRecoveryDialog={openRecoveryDialog} />}
       {token && baseLocale.status !== 'demo' && <HabilitationInfos commune={commune} />}
-      <CertificationInfos />
+      <CertificationInfos openRecoveryDialog={!token && openRecoveryDialog} />
     </Pane>
   )
 }