Mise en production 22/11/2024

.github/workflows/main.yml

@@ -58,6 +58,7 @@ jobs:
       - name: Install
         run: yarn install --immutable
         env:
+          CYPRESS_INSTALL_BINARY: 0
           PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
 
       - name: Build

.github/workflows/pull-request.yml

@@ -61,6 +61,7 @@ jobs:
       - name: Install
         run: yarn install --immutable
         env:
+          CYPRESS_INSTALL_BINARY: 0
           PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true
 
       - name: Build

frontend/src/colors.scss

@@ -314,4 +314,6 @@
   --beige-gris-galet-moon-125: #2e2924;
   --beige-gris-galet-moon-100: #28231f;
   --beige-gris-galet-moon-75: #211d19;
+
+
 }

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';
@@ -86,17 +85,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 +95,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',

frontend/src/components/HousingList/HousingList.tsx

@@ -175,9 +175,11 @@ const HousingList = ({
     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>
+      <>
+        <AppLink className="capitalize" isSimple to={`/logements/${id}`}>
+          {rawAddress.map((line) => capitalize(line)).join('\n')}
+        </AppLink>
+      </>
     )
   };
 

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,15 @@ 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.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>
       )}
     </>
   );

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 color={fr.colors.decisions.text.default.grey.default}>{props.owner.rawAddress ? props.owner.rawAddress.join(' ') : '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: Base Adresse Nationale)
           </LabelNext>
-          <Typography>{address}</Typography>
+          <Typography>{props.owner.banAddress ? formatAddress(props.owner.banAddress).join(' ') :  'Inconnue'}</Typography>
         </Grid>
 
+
         {!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 &quot;Modifier&quot;.
                   </Typography>
                 </>
               }