From 0bc7cb549ce1c6887082176f7363b1679081da28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 13 Nov 2024 12:15:05 +0100
Subject: [PATCH 01/12] feat: show DGFIP address on owner edition modals

---
 .../AddressSearchableSelectNext.tsx           |  13 +-
 .../components/HousingList/HousingList.tsx    |  10 +-
 .../OwnerAddressEdition.tsx                   | 124 ++----------------
 .../src/components/OwnerCard/OwnerCard.tsx    |  37 +++---
 .../OwnerEditionSideMenu.tsx                  |  52 ++++++--
 .../HousingOwnersModal/HousingOwnersModal.tsx |   7 +-
 server/src/controllers/housingController.ts   |   2 +-
 7 files changed, 88 insertions(+), 157 deletions(-)

diff --git a/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx b/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx
index 3c72721b9..142041a10 100644
--- a/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx
+++ b/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx
@@ -86,17 +86,6 @@ function AddressSearchableSelectNext(props: Props) {
                 justifyContent="space-between"
                 sm
               >
-                <Typography component="span">
-                  Adresse (source : 
-                  <a
-                    href="https://adresse.data.gouv.fr/base-adresse-nationale#4.4/46.9/1.7"
-                    rel="noreferrer"
-                    target="_blank"
-                  >
-                    Base Adresse Nationale
-                  </a>
-                  )
-                </Typography>
                 <a
                   className={fr.cx('fr-link--sm')}
                   href="https://zerologementvacant.crisp.help/fr/article/comment-choisir-entre-ladresse-ban-et-ladresse-lovac-1ivvuep/?bust=1705403706774"
@@ -107,7 +96,7 @@ function AddressSearchableSelectNext(props: Props) {
                 </a>
               </Grid>
             }
-            hintText="Commencez à taper votre recherche dans le champ de saisi et choisissez une des options proposées dans la liste (exemple : 72 rue de Varenne, Paris)"
+            hintText="Cette adresse est la plus proche identifiée dans la Base Adresse Nationale. Ce format est recommandé pour vos courriers. Pour modifier l'adresse, commencez à saisir votre recherche et choisissez une des options dans la liste."
             nativeInputProps={{
               type: 'search',
               placeholder: 'Rechercher une adresse',
diff --git a/frontend/src/components/HousingList/HousingList.tsx b/frontend/src/components/HousingList/HousingList.tsx
index deefb2db5..16d691e52 100644
--- a/frontend/src/components/HousingList/HousingList.tsx
+++ b/frontend/src/components/HousingList/HousingList.tsx
@@ -174,10 +174,12 @@ const HousingList = ({
   const addressColumn = {
     name: 'address',
     headerRender: () => getSortButton('rawAddress', 'Adresse du logement'),
-    render: ({ id, rawAddress }: Housing) => (
-      <AppLink className="capitalize" isSimple to={`/logements/${id}`}>
-        {rawAddress.map((line) => capitalize(line)).join('\n')}
-      </AppLink>
+    render: ({ id, rawAddress, owner }: Housing) => (
+      <>
+        <AppLink className="capitalize" isSimple to={`/logements/${id}`}>
+          {rawAddress.map((line) => capitalize(line)).join('\n')}
+        </AppLink>
+      </>
     )
   };
 
diff --git a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
index 4b287f729..b7b7c46bd 100644
--- a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
+++ b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
@@ -1,12 +1,9 @@
-import Button from '@codegouvfr/react-dsfr/Button';
-import ButtonsGroup from '@codegouvfr/react-dsfr/ButtonsGroup';
-import Typography from '@mui/material/Typography';
 import { useState } from 'react';
 
-import { Text } from '../_dsfr';
 import { Address, isBanEligible } from '../../models/Address';
 import { AddressSearchResult } from '../../services/address.service';
 import AddressSearchableSelectNext from '../AddressSearchableSelect/AddressSearchableSelectNext';
+import CallOut from '@codegouvfr/react-dsfr/CallOut';
 
 interface Props {
   banAddress?: Address;
@@ -15,66 +12,15 @@ interface Props {
   help?: boolean;
   rawAddress: string[];
   onSelectAddress(address: AddressSearchResult | null): void;
+  warningVisible: boolean;
+  setWarningVisible: (visible: boolean) => void;
 }
 
 function OwnerAddressEdition(props: Props) {
-  const [searchAddressFromLovac, setSearchAddressFromLovac] = useState(false);
-  const [previousAddress, setPreviousAddress] = useState<AddressSearchResult>();
 
   const [inputValue, setInputValue] = useState('');
   const [open, setOpen] = useState(false);
 
-  if (searchAddressFromLovac) {
-    return (
-      <>
-        <AddressSearchableSelectNext
-          className="fr-mb-2w"
-          disabled={props.disabled}
-          value={props.banAddress ?? null}
-          inputValue={inputValue}
-          open={open}
-          onChange={(address) => {
-            props.onSelectAddress(
-              address
-                ? {
-                    ...address,
-                    banId: address.banId ?? '',
-                    latitude: address.latitude ?? 0,
-                    longitude: address.longitude ?? 0,
-                    // Consider that the user has validated the address
-                    score: 1
-                  }
-                : null
-            );
-          }}
-          onInputChange={setInputValue}
-          onOpen={() => setOpen(true)}
-          onClose={() => setOpen(false)}
-          stateRelatedMessage={props.errorMessage}
-        />
-        {previousAddress && (
-          <div className="fr-p-2w fr-mb-2w bg-bf975">
-            <Typography mb={2}>Adresse précédente :</Typography>
-            <Typography mb={2} sx={{ fontWeight: 900 }}>
-              {previousAddress.label}
-            </Typography>
-            <div className="align-right">
-              <Button
-                priority="secondary"
-                onClick={() => {
-                  setSearchAddressFromLovac(false);
-                  props.onSelectAddress(previousAddress);
-                }}
-              >
-                Appliquer
-              </Button>
-            </div>
-          </div>
-        )}
-      </>
-    );
-  }
-
   return (
     <>
       <AddressSearchableSelectNext
@@ -101,60 +47,16 @@ function OwnerAddressEdition(props: Props) {
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}
       />
-      {props.banAddress && !isBanEligible(props.banAddress) && (
-        <div className="fr-mt-3w fr-p-2w bg-bf975">
-          <Text size="md" className="color-info-425 weight-900">
-            Amélioration possible
-          </Text>
-          <Typography mb={2}>
-            L’adresse issue de la <u>Base Adresse Nationale</u>, indiquée dans
-            le champ Adresse ci-dessus, semble différente de l’adresse issue de
-            la <u>DGFIP</u> : <b>{props.rawAddress.join(' ')}</b>
-          </Typography>
-          <Typography mb={2}>
-            Modifier le champ Adresse à partir de l’adresse DGFIP ?
-          </Typography>
-          <ButtonsGroup
-            buttons={[
-              {
-                children: 'Oui',
-                priority: 'secondary',
-                onClick: () => {
-                  if (props.banAddress) {
-                    setPreviousAddress({
-                      ...props.banAddress,
-                      banId: props.banAddress.banId ?? '',
-                      latitude: props.banAddress.latitude ?? 0,
-                      longitude: props.banAddress.longitude ?? 0,
-                      score: props.banAddress.score ?? Number.NaN
-                    });
-                  }
-                  setInputValue(props.rawAddress.join(' '));
-                  setSearchAddressFromLovac(true);
-                  setOpen(true);
-                }
-              },
-              {
-                children: 'Non',
-                priority: 'secondary',
-                onClick: () => {
-                  if (props.banAddress) {
-                    props.onSelectAddress({
-                      ...props.banAddress,
-                      banId: props.banAddress.banId ?? '',
-                      latitude: props.banAddress.latitude ?? 0,
-                      longitude: props.banAddress.longitude ?? 0,
-                      // Consider that the user has validated the address
-                      score: 1
-                    });
-                  }
-                }
-              }
-            ]}
-            alignment="left"
-            inlineLayoutWhen="sm and up"
-          ></ButtonsGroup>
-        </div>
+      {props.banAddress && props.warningVisible && !isBanEligible(props.banAddress) && (
+        <CallOut
+        className="fr-mt-3w"
+        buttonProps={{
+          children: 'Ignorer',
+          onClick: () => {props.setWarningVisible(false)}
+        }}
+      >
+        L'adresse de la Base Adresse Nationale diffère de celle de la DGFIP. Veuillez vérifier attentivement ces informations ou ignorez l’alerte.
+      </CallOut>
       )}
     </>
   );
diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
index c7aa2adc8..9025e9e4a 100644
--- a/frontend/src/components/OwnerCard/OwnerCard.tsx
+++ b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -29,12 +29,6 @@ function OwnerCard(props: OwnerCardProps) {
   const archivedOwners =
     props.coOwners?.filter((owner) => owner.rank <= 0) ?? [];
 
-  const address: ReadonlyArray<ReactNode> = (
-    props.owner.banAddress
-      ? formatAddress(props.owner.banAddress)
-      : props.owner.rawAddress
-  ).map((line: string) => <Typography key={line}>{line}</Typography>);
-
   return (
     <Paper component="article" elevation={0} sx={{ padding: 3 }}>
       <Grid component="header" container sx={{ mb: 1 }}>
@@ -64,6 +58,22 @@ function OwnerCard(props: OwnerCardProps) {
           </Grid>
         ) : null}
 
+        <Grid xs={12}>
+          <LabelNext component="h3">
+            <span
+              className={fr.cx(
+                'fr-icon-bank-line',
+                'fr-icon--sm',
+                'fr-mr-1w'
+              )}
+              aria-hidden={true}
+            />
+            Adresse fiscale (source: DGFIP)
+          </LabelNext>
+          <Typography>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+        </Grid>
+
+
         <Grid xs={12}>
           <LabelNext component="h3">
             <span
@@ -74,27 +84,24 @@ function OwnerCard(props: OwnerCardProps) {
               )}
               aria-hidden={true}
             />
-            Adresse postale
+            Adresse postale (source: BAN)
           </LabelNext>
-          <Typography>{address}</Typography>
+          <Typography>{props.owner.banAddress ? formatAddress(props.owner.banAddress) :  'Inconnue'}</Typography>
         </Grid>
 
-        {!isBanEligible(props.owner.banAddress) && (
+
+        {props.owner.banAddress && !isBanEligible(props.owner.banAddress) && (
           <Grid xs={12}>
             <Alert
               severity="info"
               classes={{ title: fr.cx('fr-mb-2w') }}
-              title="Adresse à vérifier"
-              as="h3"
               description={
                 <>
                   <Typography>
-                    Cette adresse issue de la BAN est différente de l’adresse
-                    fiscale.
+                    L'adresse Base Adresse Nationale ne correspond pas à celle de la DGFIP.
                   </Typography>
                   <Typography>
-                    Cliquez sur “Modifier” pour valider l’adresse que vous
-                    souhaitez utiliser.
+                    Nous vous recommandons de vérifier en cliquant sur "Modifier".
                   </Typography>
                 </>
               }
diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index 6bfa4cb97..c25ca8956 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -1,3 +1,4 @@
+import { fr } from '@codegouvfr/react-dsfr';
 import Button from '@codegouvfr/react-dsfr/Button';
 import { FormEvent, useState } from 'react';
 import { object, string } from 'yup';
@@ -10,6 +11,8 @@ import { Owner } from '../../models/Owner';
 import { banAddressValidator, useForm } from '../../hooks/useForm';
 import { useUpdateOwnerMutation } from '../../services/owner.service';
 import { useNotification } from '../../hooks/useNotification';
+import { Grid, Typography } from '@mui/material';
+import LabelNext from '../Label/LabelNext';
 
 interface Props {
   className?: string;
@@ -19,15 +22,16 @@ interface Props {
 function OwnerEditionSideMenu(props: Props) {
   const { active, setActive, toggle } = useToggle();
 
+  const storedWarningVisible = localStorage.getItem('OwnerEdition.warningVisible');
+  const [warningVisible, setWarningVisible] = useState(storedWarningVisible === null || storedWarningVisible === 'true');
+
   const shape = {
-    fullName: string().optional(),
     address: banAddressValidator.optional(),
     additionalAddress: string().optional().nullable()
   };
   type FormShape = typeof shape;
   const schema = object(shape);
 
-  const [fullName, setFullName] = useState(props.owner.fullName);
   const [address, setAddress] = useState(props.owner.banAddress);
   const [additionalAddress, setAdditionalAddress] = useState(
     props.owner.additionalAddress ?? ''
@@ -35,8 +39,7 @@ function OwnerEditionSideMenu(props: Props) {
   const formId = 'owner-edition-form';
   const form = useForm(schema, {
     address,
-    additionalAddress,
-    fullName
+    additionalAddress
   });
 
   function open(): void {
@@ -50,11 +53,11 @@ function OwnerEditionSideMenu(props: Props) {
   const [updateOwner, mutation] = useUpdateOwnerMutation();
 
   async function save(event: FormEvent): Promise<void> {
+    localStorage.setItem('OwnerEditionSideMenu.warningVisible', warningVisible.toString());
     event.preventDefault();
     await form.validate(async () => {
       await updateOwner({
         ...props.owner,
-        fullName,
         banAddress: address,
         additionalAddress
       }).unwrap();
@@ -97,20 +100,43 @@ function OwnerEditionSideMenu(props: Props) {
         title="Modifier les informations du propriétaire"
         content={
           <form id={formId} className="fr-px-6w">
-            <AppTextInput<FormShape>
-              inputForm={form}
-              inputKey="fullName"
-              label="Nom prénom"
-              value={fullName}
-              onChange={(e) => setFullName(e.target.value)}
-            />
-            <section className="fr-mb-3w">
+            <Grid>
+              <LabelNext component="h3">
+                <span
+                  className={fr.cx(
+                    'fr-icon-bank-line',
+                    'fr-icon--sm',
+                    'fr-mr-1w'
+                  )}
+                  aria-hidden={true}
+                />
+                Adresse fiscale (source: DGFIP)
+              </LabelNext>
+              <Grid>
+                <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
+                <Typography>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+              </Grid>
+            </Grid>
+            <section className="fr-mb-3w fr-mt-3w">
+              <LabelNext component="h3">
+                <span
+                  className={fr.cx(
+                    'fr-icon-home-4-line',
+                    'fr-icon--sm',
+                    'fr-mr-1w'
+                  )}
+                  aria-hidden={true}
+                />
+                Adresse postale (source: Base Adresse Nationale)
+              </LabelNext>
               <OwnerAddressEdition
                 banAddress={address}
                 errorMessage={form.message('address')}
                 help={false}
                 rawAddress={props.owner.rawAddress}
                 onSelectAddress={(value) => setAddress(value ?? undefined)}
+                warningVisible={warningVisible}
+                setWarningVisible={setWarningVisible}
               />
             </section>
             <AppTextInput<FormShape>
diff --git a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
index 50b3d69b4..0d6a42729 100644
--- a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
+++ b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
@@ -49,6 +49,9 @@ function HousingOwnersModal({
 }: Props) {
   const { isVisitor } = useUser();
 
+  const storedWarningVisible = localStorage.getItem('OwnerEdition.warningVisible');
+  const [warningVisible, setWarningVisible] = useState(storedWarningVisible === null || storedWarningVisible === 'true');
+
   const [modalMode, setModalMode] = useState<'list' | 'add'>('list');
   const [
     housingOwners,
@@ -224,7 +227,7 @@ function HousingOwnersModal({
             </Text>
             {!isBanEligible(housingOwner.banAddress) && (
               <Badge severity="info" className="fr-ml-1w">
-                ADRESSE À VÉRIFIER
+                ADRESSE AMÉLIORABLE
               </Badge>
             )}
           </div>
@@ -297,6 +300,8 @@ function HousingOwnersModal({
                 onSelectAddress(housingOwner, address ?? undefined)
               }
               errorMessage={message(`banAddress-${housingOwner.id}`)}
+              warningVisible={warningVisible}
+              setWarningVisible={setWarningVisible}
             />
           </Col>
           <Col n="12">
diff --git a/server/src/controllers/housingController.ts b/server/src/controllers/housingController.ts
index dae9f747c..020fe6fd5 100644
--- a/server/src/controllers/housingController.ts
+++ b/server/src/controllers/housingController.ts
@@ -58,7 +58,7 @@ async function get(request: Request, response: Response) {
     id,
     localId,
     includes: ['events', 'owner', 'perimeters', 'campaigns']
-  });
+  });  
   if (!housing) {
     throw new HousingMissingError(params.id);
   }

From dd7bfd4914365489d54214c255153b6f176f732b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 13 Nov 2024 12:15:05 +0100
Subject: [PATCH 02/12] feat: show DGFIP address on owner edition modals

---
 .../AddressSearchableSelect/AddressSearchableSelectNext.tsx   | 1 -
 frontend/src/components/HousingList/HousingList.tsx           | 2 +-
 .../components/OwnerAddressEdition/OwnerAddressEdition.tsx    | 4 ++--
 frontend/src/components/OwnerCard/OwnerCard.tsx               | 4 ++--
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx b/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx
index 142041a10..02a44f86f 100644
--- a/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx
+++ b/frontend/src/components/AddressSearchableSelect/AddressSearchableSelectNext.tsx
@@ -1,7 +1,6 @@
 import { fr } from '@codegouvfr/react-dsfr';
 import Input, { InputProps } from '@codegouvfr/react-dsfr/Input';
 import Autocomplete from '@mui/material/Autocomplete';
-import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useDebounce, useList, usePreviousDistinct } from 'react-use';
 import type { MarkOptional } from 'ts-essentials';
diff --git a/frontend/src/components/HousingList/HousingList.tsx b/frontend/src/components/HousingList/HousingList.tsx
index 16d691e52..db541feb1 100644
--- a/frontend/src/components/HousingList/HousingList.tsx
+++ b/frontend/src/components/HousingList/HousingList.tsx
@@ -174,7 +174,7 @@ const HousingList = ({
   const addressColumn = {
     name: 'address',
     headerRender: () => getSortButton('rawAddress', 'Adresse du logement'),
-    render: ({ id, rawAddress, owner }: Housing) => (
+    render: ({ id, rawAddress }: Housing) => (
       <>
         <AppLink className="capitalize" isSimple to={`/logements/${id}`}>
           {rawAddress.map((line) => capitalize(line)).join('\n')}
diff --git a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
index b7b7c46bd..e3a44d653 100644
--- a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
+++ b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
@@ -52,10 +52,10 @@ function OwnerAddressEdition(props: Props) {
         className="fr-mt-3w"
         buttonProps={{
           children: 'Ignorer',
-          onClick: () => {props.setWarningVisible(false)}
+          onClick: () => {props.setWarningVisible(false)},
         }}
       >
-        L'adresse de la Base Adresse Nationale diffère de celle de la DGFIP. Veuillez vérifier attentivement ces informations ou ignorez l’alerte.
+        L’adresse de la Base Adresse Nationale diffère de celle de la DGFIP. Veuillez vérifier attentivement ces informations ou ignorez l’alerte.
       </CallOut>
       )}
     </>
diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
index 9025e9e4a..28716fe17 100644
--- a/frontend/src/components/OwnerCard/OwnerCard.tsx
+++ b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -98,10 +98,10 @@ function OwnerCard(props: OwnerCardProps) {
               description={
                 <>
                   <Typography>
-                    L'adresse Base Adresse Nationale ne correspond pas à celle de la DGFIP.
+                    L’adresse Base Adresse Nationale ne correspond pas à celle de la DGFIP.
                   </Typography>
                   <Typography>
-                    Nous vous recommandons de vérifier en cliquant sur "Modifier".
+                    Nous vous recommandons de vérifier en cliquant sur &quot;Modifier&quot;.
                   </Typography>
                 </>
               }

From 2a53449d4e17fcb239daaf52f6fd4dbdc6fe1393 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 13 Nov 2024 12:15:05 +0100
Subject: [PATCH 03/12] feat: show DGFIP address on owner edition modals

---
 .../components/OwnerAddressEdition/OwnerAddressEdition.tsx   | 5 ++---
 .../modals/OwnerEditionModal/OwnerEditionModal.tsx           | 5 +++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
index e3a44d653..b19fb1e07 100644
--- a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
+++ b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
@@ -52,9 +52,8 @@ function OwnerAddressEdition(props: Props) {
         className="fr-mt-3w"
         buttonProps={{
           children: 'Ignorer',
-          onClick: () => {props.setWarningVisible(false)},
-        }}
-      >
+          onClick: () => {props.setWarningVisible(false);},
+        }}>
         L’adresse de la Base Adresse Nationale diffère de celle de la DGFIP. Veuillez vérifier attentivement ces informations ou ignorez l’alerte.
       </CallOut>
       )}
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index 48f6b1612..1fafce0aa 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -39,6 +39,9 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
     owner?.additionalAddress
   );
 
+  const storedWarningVisible = localStorage.getItem('OwnerEdition.warningVisible');
+  const [warningVisible, setWarningVisible] = useState(storedWarningVisible === null || storedWarningVisible === 'true');
+
   const [updateOwner, { isError: isUpdateError }] = useUpdateOwnerMutation();
 
   const shape = {
@@ -133,6 +136,8 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
               rawAddress={owner.rawAddress}
               onSelectAddress={(a) => setBanAddress(a ?? undefined)}
               errorMessage={form.message('banAddress')}
+              warningVisible={warningVisible}
+              setWarningVisible={setWarningVisible}
             />
           </Col>
           <Col n="12">

From c6be7120c02fc41e014225387448b757c9948720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 13 Nov 2024 15:41:09 +0100
Subject: [PATCH 04/12] test: add test to ignore warning message on address
 edit

---
 .../OwnerEditionSideMenu.tsx                  |  2 +-
 .../views/Campaign/test/CampaignView.test.tsx | 44 +++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index c25ca8956..441fd80c7 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -53,7 +53,7 @@ function OwnerEditionSideMenu(props: Props) {
   const [updateOwner, mutation] = useUpdateOwnerMutation();
 
   async function save(event: FormEvent): Promise<void> {
-    localStorage.setItem('OwnerEditionSideMenu.warningVisible', warningVisible.toString());
+    localStorage.setItem('OwnerEdition.warningVisible', warningVisible.toString());
     event.preventDefault();
     await form.validate(async () => {
       await updateOwner({
diff --git a/frontend/src/views/Campaign/test/CampaignView.test.tsx b/frontend/src/views/Campaign/test/CampaignView.test.tsx
index 7058f5561..1f4a64537 100644
--- a/frontend/src/views/Campaign/test/CampaignView.test.tsx
+++ b/frontend/src/views/Campaign/test/CampaignView.test.tsx
@@ -9,6 +9,7 @@ import { AppStore } from '../../../store/store';
 import CampaignView from '../CampaignView';
 import Notification from '../../../components/Notification/Notification';
 import {
+  AddressKinds,
   CampaignDTO,
   DraftDTO,
   HousingDTO,
@@ -43,6 +44,17 @@ describe('Campaign view', () => {
     sender = genSenderDTO();
     draft = genDraftDTO(sender);
     owner = genOwnerDTO();
+
+    owner.banAddress = {
+      street: '1 rue de la vallée',
+      postalCode: '85130',
+      city: 'Tiffauges',
+      refId: faker.string.uuid(),
+      addressKind: AddressKinds.Owner,
+      label: 'Home Address',
+      score: 0.7
+    };
+
     housings = Array.from({ length: 3 }, () => genHousingDTO(owner));
 
     data.housings.push(...housings);
@@ -261,15 +273,41 @@ describe('Campaign view', () => {
     });
     await user.click(edit);
     const [aside] = await screen.findAllByRole('complementary');
-    const fullName = await within(aside).findByLabelText('Nom prénom');
-    await user.clear(fullName);
-    await user.type(fullName, 'John Doe');
+    const address = await within(aside).findByPlaceholderText('Rechercher une adresse');
+    await user.clear(address);
+    await user.type(address, 'Rue de la vallée 85130 Tiffauges');
     const save = await within(aside).findByRole('button', {
       name: /^Enregistrer/
     });
     await user.click(save);
   });
 
+  it('should dismiss the warning message when the user clicks the \'Ignore\' button while editing the recipient’s address', async () => {
+    renderComponent();
+    localStorage.clear();
+
+    const tab = await screen.findByRole('tab', { name: /^Destinataires/ });
+    await user.click(tab);
+    const [edit] = await screen.findAllByRole('button', {
+      name: /^Éditer l’adresse/
+    });
+    await user.click(edit);
+    const [aside] = await screen.findAllByRole('complementary');
+    let [ ignoreButton ] = await within(aside).findAllByRole('button', {
+      name: /^Ignorer/
+    });
+    expect(ignoreButton).toBeInTheDocument();
+    await user.click(ignoreButton);
+    const save = await within(aside).findByRole('button', {
+      name: /^Enregistrer/
+    });
+    await user.click(save);
+
+    await user.click(edit);
+
+    expect(ignoreButton).not.toBeInTheDocument();
+  });
+
   it('should update the page when the campaign has been generated', async () => {
     const campaign: CampaignDTO = { ...genCampaignDTO(), status: 'sending' };
     data.campaigns.push(campaign);

From 8ffdca5c285bdb2955f3c626f9109435ea5ef117 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 13 Nov 2024 16:08:15 +0100
Subject: [PATCH 05/12] fix: lint

---
 frontend/src/views/Campaign/test/CampaignView.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Campaign/test/CampaignView.test.tsx b/frontend/src/views/Campaign/test/CampaignView.test.tsx
index 1f4a64537..f9e35c35d 100644
--- a/frontend/src/views/Campaign/test/CampaignView.test.tsx
+++ b/frontend/src/views/Campaign/test/CampaignView.test.tsx
@@ -293,7 +293,7 @@ describe('Campaign view', () => {
     });
     await user.click(edit);
     const [aside] = await screen.findAllByRole('complementary');
-    let [ ignoreButton ] = await within(aside).findAllByRole('button', {
+    const [ ignoreButton ] = await within(aside).findAllByRole('button', {
       name: /^Ignorer/
     });
     expect(ignoreButton).toBeInTheDocument();

From 829d731659246a9f12d2aa593a192c02c46a32aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Thu, 14 Nov 2024 09:51:42 +0100
Subject: [PATCH 06/12] fix: ensure address verification modal appears when BAN
 address is empty

---
 .../src/components/OwnerAddressEdition/OwnerAddressEdition.tsx  | 2 +-
 frontend/src/components/OwnerCard/OwnerCard.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
index b19fb1e07..113d10f55 100644
--- a/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
+++ b/frontend/src/components/OwnerAddressEdition/OwnerAddressEdition.tsx
@@ -47,7 +47,7 @@ function OwnerAddressEdition(props: Props) {
         onOpen={() => setOpen(true)}
         onClose={() => setOpen(false)}
       />
-      {props.banAddress && props.warningVisible && !isBanEligible(props.banAddress) && (
+      {props.warningVisible && !isBanEligible(props.banAddress) && (
         <CallOut
         className="fr-mt-3w"
         buttonProps={{
diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
index 28716fe17..e64baadd5 100644
--- a/frontend/src/components/OwnerCard/OwnerCard.tsx
+++ b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -90,7 +90,7 @@ function OwnerCard(props: OwnerCardProps) {
         </Grid>
 
 
-        {props.owner.banAddress && !isBanEligible(props.owner.banAddress) && (
+        {!isBanEligible(props.owner.banAddress) && (
           <Grid xs={12}>
             <Alert
               severity="info"

From 8d551ccc4b9821495063eb92265dbba93fb23d85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 20 Nov 2024 11:39:35 +0100
Subject: [PATCH 07/12] feat: add missing DGFIP address on owner edition modal

---
 .../OwnerEditionModal/OwnerEditionModal.tsx   | 30 +++++++++++++++++++
 .../owner-edition-modal.module.scss           | 11 ++-----
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index 1fafce0aa..ed08f5cf7 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -17,6 +17,10 @@ import { createModal } from '@codegouvfr/react-dsfr/Modal';
 import Button from '@codegouvfr/react-dsfr/Button';
 import OwnerAddressEdition from '../../OwnerAddressEdition/OwnerAddressEdition';
 import { useUser } from '../../../hooks/useUser';
+import { Typography } from '@mui/material';
+import LabelNext from '../../Label/LabelNext';
+import { fr } from '@codegouvfr/react-dsfr';
+import styles from './owner-edition-modal.module.scss';
 
 const modal = createModal({
   id: 'owner-edition-modal',
@@ -131,6 +135,32 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
             />
           </Col>
           <Col n="12">
+            <LabelNext component="h3">
+              <span
+                className={fr.cx(
+                  'fr-icon-bank-line',
+                  'fr-icon--sm',
+                  'fr-mr-1w'
+                )}
+                aria-hidden={true}
+              />
+              Adresse fiscale (source: DGFIP)
+            </LabelNext>
+            <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
+            <Typography className={styles.dgfipAddress}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
+          </Col>
+          <Col n="12">
+            <LabelNext component="h3">
+              <span
+                className={fr.cx(
+                  'fr-icon-home-4-line',
+                  'fr-icon--sm',
+                  'fr-mr-1w'
+                )}
+                aria-hidden={true}
+              />
+              Adresse postale (source: Base Adresse Nationale)
+            </LabelNext>
             <OwnerAddressEdition
               banAddress={owner.banAddress}
               rawAddress={owner.rawAddress}
diff --git a/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss b/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss
index 37b734835..7c19ab6d9 100644
--- a/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss
+++ b/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss
@@ -1,10 +1,3 @@
-.itemError {
-  section {
-    border: 1px solid var(--error-425);
-  }
-  h3 {
-    button {
-      color: var(--error-425) !important;
-    }
-  }
+.dgfipAddress {
+  color: #3A3A3A;
 }

From a645e3d2f9e03ff6e32c1db86c9d73cee05b5444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 20 Nov 2024 12:12:07 +0100
Subject: [PATCH 08/12] feat: add missing DGFIP address on owners edition modal

---
 frontend/src/colors.scss                      |  3 +++
 .../src/components/OwnerCard/OwnerCard.tsx    |  4 +--
 .../OwnerEditionSideMenu.tsx                  | 10 +++----
 .../HousingOwnersModal/HousingOwnersModal.tsx | 26 +++++++++++++++++++
 .../OwnerEditionModal/OwnerEditionModal.tsx   | 11 ++++----
 .../owner-edition-modal.module.scss           |  3 ---
 6 files changed, 41 insertions(+), 16 deletions(-)
 delete mode 100644 frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss

diff --git a/frontend/src/colors.scss b/frontend/src/colors.scss
index edad85039..d262b7eb2 100644
--- a/frontend/src/colors.scss
+++ b/frontend/src/colors.scss
@@ -15,6 +15,7 @@
   --red-marianne-925: #fddede;
   --red-marianne-850: #fcbfbf;
 
+  --grey-200: #3a3a3a;
   --grey-main-525: #7b7b7b;
   --grey-425: #666666;
   --grey-625: #929292;
@@ -314,4 +315,6 @@
   --beige-gris-galet-moon-125: #2e2924;
   --beige-gris-galet-moon-100: #28231f;
   --beige-gris-galet-moon-75: #211d19;
+
+
 }
diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
index e64baadd5..2447ae896 100644
--- a/frontend/src/components/OwnerCard/OwnerCard.tsx
+++ b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -70,7 +70,7 @@ function OwnerCard(props: OwnerCardProps) {
             />
             Adresse fiscale (source: DGFIP)
           </LabelNext>
-          <Typography>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+          <Typography color={'var(--grey-200)'}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
         </Grid>
 
 
@@ -84,7 +84,7 @@ function OwnerCard(props: OwnerCardProps) {
               )}
               aria-hidden={true}
             />
-            Adresse postale (source: BAN)
+            Adresse postale (source: Base Adresse Nationale)
           </LabelNext>
           <Typography>{props.owner.banAddress ? formatAddress(props.owner.banAddress) :  'Inconnue'}</Typography>
         </Grid>
diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index 441fd80c7..d406fce3a 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -101,7 +101,7 @@ function OwnerEditionSideMenu(props: Props) {
         content={
           <form id={formId} className="fr-px-6w">
             <Grid>
-              <LabelNext component="h3">
+              <Typography component="h3" color={'var(--black-50)'}>
                 <span
                   className={fr.cx(
                     'fr-icon-bank-line',
@@ -111,14 +111,14 @@ function OwnerEditionSideMenu(props: Props) {
                   aria-hidden={true}
                 />
                 Adresse fiscale (source: DGFIP)
-              </LabelNext>
+              </Typography>
               <Grid>
                 <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-                <Typography>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+                <Typography color={'var(--grey-200)'}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
               </Grid>
             </Grid>
             <section className="fr-mb-3w fr-mt-3w">
-              <LabelNext component="h3">
+              <Typography component="h3" color={'var(--black-50)'}>
                 <span
                   className={fr.cx(
                     'fr-icon-home-4-line',
@@ -128,7 +128,7 @@ function OwnerEditionSideMenu(props: Props) {
                   aria-hidden={true}
                 />
                 Adresse postale (source: Base Adresse Nationale)
-              </LabelNext>
+              </Typography>
               <OwnerAddressEdition
                 banAddress={address}
                 errorMessage={form.message('address')}
diff --git a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
index 0d6a42729..9aa1f5928 100644
--- a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
+++ b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
@@ -292,6 +292,32 @@ function HousingOwnersModal({
             />
           </Col>
           <Col n="12">
+            <Typography component="h3" color={'var(--black-50)'}>
+              <span
+                className={fr.cx(
+                  'fr-icon-bank-line',
+                  'fr-icon--sm',
+                  'fr-mr-1w'
+                )}
+                aria-hidden={true}
+              />
+              Adresse fiscale (source: DGFIP)
+            </Typography>
+            <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
+            <Typography color={'var(--grey-200)'}>{housingOwner.rawAddress ? housingOwner.rawAddress : 'Inconnue'}</Typography>
+          </Col>
+          <Col n="12">
+            <Typography component="h3" color={'var(--black-50)'}>
+              <span
+                className={fr.cx(
+                  'fr-icon-home-4-line',
+                  'fr-icon--sm',
+                  'fr-mr-1w'
+                )}
+                aria-hidden={true}
+              />
+              Adresse postale (source: Base Adresse Nationale)
+            </Typography>
             <OwnerAddressEdition
               banAddress={housingOwner.banAddress}
               rawAddress={housingOwner.rawAddress}
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index ed08f5cf7..7108652ae 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -20,7 +20,6 @@ import { useUser } from '../../../hooks/useUser';
 import { Typography } from '@mui/material';
 import LabelNext from '../../Label/LabelNext';
 import { fr } from '@codegouvfr/react-dsfr';
-import styles from './owner-edition-modal.module.scss';
 
 const modal = createModal({
   id: 'owner-edition-modal',
@@ -135,7 +134,7 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
             />
           </Col>
           <Col n="12">
-            <LabelNext component="h3">
+            <Typography component="h3" color={'var(--black-50)'}>
               <span
                 className={fr.cx(
                   'fr-icon-bank-line',
@@ -145,12 +144,12 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
                 aria-hidden={true}
               />
               Adresse fiscale (source: DGFIP)
-            </LabelNext>
+            </Typography>
             <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-            <Typography className={styles.dgfipAddress}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
+            <Typography color={'var(--grey-200)'}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
-            <LabelNext component="h3">
+            <Typography component="h3" color={'var(--black-50)'}>
               <span
                 className={fr.cx(
                   'fr-icon-home-4-line',
@@ -160,7 +159,7 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
                 aria-hidden={true}
               />
               Adresse postale (source: Base Adresse Nationale)
-            </LabelNext>
+            </Typography>
             <OwnerAddressEdition
               banAddress={owner.banAddress}
               rawAddress={owner.rawAddress}
diff --git a/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss b/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss
deleted file mode 100644
index 7c19ab6d9..000000000
--- a/frontend/src/components/modals/OwnerEditionModal/owner-edition-modal.module.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.dgfipAddress {
-  color: #3A3A3A;
-}

From c5676feeadcbd9ef7765578467480024bd9bf914 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 20 Nov 2024 15:12:34 +0100
Subject: [PATCH 09/12] refactor: remove useless color

---
 frontend/src/colors.scss                                        | 1 -
 frontend/src/components/OwnerCard/OwnerCard.tsx                 | 2 +-
 .../components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx    | 2 +-
 .../components/modals/HousingOwnersModal/HousingOwnersModal.tsx | 2 +-
 .../components/modals/OwnerEditionModal/OwnerEditionModal.tsx   | 2 +-
 5 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/colors.scss b/frontend/src/colors.scss
index d262b7eb2..f442fb575 100644
--- a/frontend/src/colors.scss
+++ b/frontend/src/colors.scss
@@ -15,7 +15,6 @@
   --red-marianne-925: #fddede;
   --red-marianne-850: #fcbfbf;
 
-  --grey-200: #3a3a3a;
   --grey-main-525: #7b7b7b;
   --grey-425: #666666;
   --grey-625: #929292;
diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
index 2447ae896..b223eee6f 100644
--- a/frontend/src/components/OwnerCard/OwnerCard.tsx
+++ b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -70,7 +70,7 @@ function OwnerCard(props: OwnerCardProps) {
             />
             Adresse fiscale (source: DGFIP)
           </LabelNext>
-          <Typography color={'var(--grey-200)'}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+          <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
         </Grid>
 
 
diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index d406fce3a..ba4bead5d 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -114,7 +114,7 @@ function OwnerEditionSideMenu(props: Props) {
               </Typography>
               <Grid>
                 <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-                <Typography color={'var(--grey-200)'}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+                <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
               </Grid>
             </Grid>
             <section className="fr-mb-3w fr-mt-3w">
diff --git a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
index 9aa1f5928..fe67ab94f 100644
--- a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
+++ b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
@@ -304,7 +304,7 @@ function HousingOwnersModal({
               Adresse fiscale (source: DGFIP)
             </Typography>
             <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-            <Typography color={'var(--grey-200)'}>{housingOwner.rawAddress ? housingOwner.rawAddress : 'Inconnue'}</Typography>
+            <Typography color={fr.colors.decisions.text.default.grey.default}>{housingOwner.rawAddress ? housingOwner.rawAddress : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
             <Typography component="h3" color={'var(--black-50)'}>
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index 7108652ae..798665f9a 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -146,7 +146,7 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
               Adresse fiscale (source: DGFIP)
             </Typography>
             <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-            <Typography color={'var(--grey-200)'}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
+            <Typography color={fr.colors.decisions.text.default.grey.default}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
             <Typography component="h3" color={'var(--black-50)'}>

From c30b4263cfadc2cdfeef2f12bd79e4baed5f7701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Wed, 20 Nov 2024 15:22:26 +0100
Subject: [PATCH 10/12] refactor: use DSFR constant for grey color #161616

---
 .../OwnerEditionSideMenu/OwnerEditionSideMenu.tsx           | 6 +++---
 .../modals/HousingOwnersModal/HousingOwnersModal.tsx        | 4 ++--
 .../modals/OwnerEditionModal/OwnerEditionModal.tsx          | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index ba4bead5d..cc1a764d7 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -100,8 +100,8 @@ function OwnerEditionSideMenu(props: Props) {
         title="Modifier les informations du propriétaire"
         content={
           <form id={formId} className="fr-px-6w">
-            <Grid>
-              <Typography component="h3" color={'var(--black-50)'}>
+            <Grid container>
+              <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
                 <span
                   className={fr.cx(
                     'fr-icon-bank-line',
@@ -118,7 +118,7 @@ function OwnerEditionSideMenu(props: Props) {
               </Grid>
             </Grid>
             <section className="fr-mb-3w fr-mt-3w">
-              <Typography component="h3" color={'var(--black-50)'}>
+              <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
                 <span
                   className={fr.cx(
                     'fr-icon-home-4-line',
diff --git a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
index fe67ab94f..66a8b9fe1 100644
--- a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
+++ b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
@@ -292,7 +292,7 @@ function HousingOwnersModal({
             />
           </Col>
           <Col n="12">
-            <Typography component="h3" color={'var(--black-50)'}>
+            <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
               <span
                 className={fr.cx(
                   'fr-icon-bank-line',
@@ -307,7 +307,7 @@ function HousingOwnersModal({
             <Typography color={fr.colors.decisions.text.default.grey.default}>{housingOwner.rawAddress ? housingOwner.rawAddress : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
-            <Typography component="h3" color={'var(--black-50)'}>
+            <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
               <span
                 className={fr.cx(
                   'fr-icon-home-4-line',
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index 798665f9a..9669c4b97 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -134,7 +134,7 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
             />
           </Col>
           <Col n="12">
-            <Typography component="h3" color={'var(--black-50)'}>
+            <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
               <span
                 className={fr.cx(
                   'fr-icon-bank-line',
@@ -149,7 +149,7 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
             <Typography color={fr.colors.decisions.text.default.grey.default}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
-            <Typography component="h3" color={'var(--black-50)'}>
+            <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
               <span
                 className={fr.cx(
                   'fr-icon-home-4-line',

From ef61cf158d2c96c7599dbc89d61c5c889d82c827 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Thu, 21 Nov 2024 14:24:33 +0100
Subject: [PATCH 11/12] fix: handle cases where addresses are arrays and join
 them with a space character

---
 frontend/src/components/OwnerCard/OwnerCard.tsx               | 4 ++--
 .../components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx  | 2 +-
 .../modals/HousingOwnersModal/HousingOwnersModal.tsx          | 2 +-
 .../components/modals/OwnerEditionModal/OwnerEditionModal.tsx | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/OwnerCard/OwnerCard.tsx b/frontend/src/components/OwnerCard/OwnerCard.tsx
index b223eee6f..31eb35ad6 100644
--- a/frontend/src/components/OwnerCard/OwnerCard.tsx
+++ b/frontend/src/components/OwnerCard/OwnerCard.tsx
@@ -70,7 +70,7 @@ function OwnerCard(props: OwnerCardProps) {
             />
             Adresse fiscale (source: DGFIP)
           </LabelNext>
-          <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+          <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress.join(' ') : 'Inconnue'}</Typography>
         </Grid>
 
 
@@ -86,7 +86,7 @@ function OwnerCard(props: OwnerCardProps) {
             />
             Adresse postale (source: Base Adresse Nationale)
           </LabelNext>
-          <Typography>{props.owner.banAddress ? formatAddress(props.owner.banAddress) :  'Inconnue'}</Typography>
+          <Typography>{props.owner.banAddress ? formatAddress(props.owner.banAddress).join(' ') :  'Inconnue'}</Typography>
         </Grid>
 
 
diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index cc1a764d7..eade18c15 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -114,7 +114,7 @@ function OwnerEditionSideMenu(props: Props) {
               </Typography>
               <Grid>
                 <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-                <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress : 'Inconnue'}</Typography>
+                <Typography color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress.join(' ') : 'Inconnue'}</Typography>
               </Grid>
             </Grid>
             <section className="fr-mb-3w fr-mt-3w">
diff --git a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
index 66a8b9fe1..dc337a309 100644
--- a/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
+++ b/frontend/src/components/modals/HousingOwnersModal/HousingOwnersModal.tsx
@@ -304,7 +304,7 @@ function HousingOwnersModal({
               Adresse fiscale (source: DGFIP)
             </Typography>
             <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-            <Typography color={fr.colors.decisions.text.default.grey.default}>{housingOwner.rawAddress ? housingOwner.rawAddress : 'Inconnue'}</Typography>
+            <Typography color={fr.colors.decisions.text.default.grey.default}>{housingOwner.rawAddress ? housingOwner.rawAddress.join(' ') : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
             <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index 9669c4b97..086182d86 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -146,7 +146,7 @@ const OwnerEditionModal = ({ owner, onCancel }: Props) => {
               Adresse fiscale (source: DGFIP)
             </Typography>
             <span className='fr-hint-text'>Cette adresse est issue du fichier LOVAC, récupérée via le fichier 1767BIS-COM. Celle-ci n’est pas modifiable.</span>
-            <Typography color={fr.colors.decisions.text.default.grey.default}>{owner.rawAddress ? owner.rawAddress : 'Inconnue'}</Typography>
+            <Typography color={fr.colors.decisions.text.default.grey.default}>{owner.rawAddress ? owner.rawAddress.join(' ') : 'Inconnue'}</Typography>
           </Col>
           <Col n="12">
             <Typography component="h3" color={fr.colors.decisions.text.active.grey.default}>

From 76649cf2464052f85ce2e2756b01b401bc625d0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Guillois?= <contact@loicguillois.fr>
Date: Fri, 22 Nov 2024 08:13:21 +0100
Subject: [PATCH 12/12] fix: lint

---
 .../src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx | 1 -
 .../components/modals/OwnerEditionModal/OwnerEditionModal.tsx    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
index eade18c15..1d508152b 100644
--- a/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
+++ b/frontend/src/components/OwnerEditionSideMenu/OwnerEditionSideMenu.tsx
@@ -12,7 +12,6 @@ import { banAddressValidator, useForm } from '../../hooks/useForm';
 import { useUpdateOwnerMutation } from '../../services/owner.service';
 import { useNotification } from '../../hooks/useNotification';
 import { Grid, Typography } from '@mui/material';
-import LabelNext from '../Label/LabelNext';
 
 interface Props {
   className?: string;
diff --git a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
index 086182d86..daadc7b76 100644
--- a/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
+++ b/frontend/src/components/modals/OwnerEditionModal/OwnerEditionModal.tsx
@@ -18,7 +18,6 @@ import Button from '@codegouvfr/react-dsfr/Button';
 import OwnerAddressEdition from '../../OwnerAddressEdition/OwnerAddressEdition';
 import { useUser } from '../../../hooks/useUser';
 import { Typography } from '@mui/material';
-import LabelNext from '../../Label/LabelNext';
 import { fr } from '@codegouvfr/react-dsfr';
 
 const modal = createModal({