feat: add signalement client authentification

.env.sample

@@ -9,4 +9,5 @@ NEXT_PUBLIC_MATOMO_SITE_ID=
 NEXT_PUBLIC_MATOMO_TRACKER_URL=https://stats.beta.gouv.fr/
 NEXT_PUBLIC_BAL_ADMIN_URL=
 NEXT_PUBLIC_API_SIGNALEMENT=
-PORT=3000
+PORT=3000
+SIGNALEMENT_CLIENT_TOKEN=

components/bal/address-preview.tsx

@@ -1,31 +1,14 @@
 import { Pane, Text } from "evergreen-ui";
 
-import { computeCompletNumero } from "@/lib/utils/numero";
 import { CommuneType } from "@/types/commune";
-
-const getAddressPreview = (numero, suffixe, toponyme, voie, commune) => {
-  const completNumero = computeCompletNumero(numero, suffixe) || "";
-  if (toponyme) {
-    return `${completNumero} ${voie}, ${toponyme} - ${commune.nom} (${commune.code})`;
-  }
-
-  if (voie) {
-    return `${completNumero} ${voie} - ${commune.nom} (${commune.code})`;
-  }
-
-  if (!voie && !toponyme) {
-    return `${completNumero} - ${commune.nom} (${commune.code})`;
-  }
-
-  return `${completNumero} ${voie} - ${commune.nom} (${commune.code})`;
-};
+import { getAddressPreview } from "@/lib/utils/address";
 
 interface AddressPreviewProps {
   numero: string | number;
   suffixe?: string;
-  selectedNomToponyme: string;
-  voie: string;
-  commune: CommuneType;
+  selectedNomToponyme?: string;
+  voie?: string;
+  commune?: CommuneType;
 }
 
 function AddressPreview({
@@ -38,9 +21,9 @@ function AddressPreview({
   const address = getAddressPreview(
     numero,
     suffixe,
+    commune,
     selectedNomToponyme,
-    voie,
-    commune
+    voie
   );
 
   return (

components/bal/habilitation-infos.tsx

@@ -61,9 +61,8 @@ function HabilitationInfos({ commune }: HabilitationInfosProps) {
           }
         >
           <Text marginTop={5} is="p">
-            Cette Base Adresse Locale détient une habilitation permettant
-            d&apos;alimenter la Base Adresse Nationale pour la commune de{" "}
-            {commune.nom}. Cette habilitation est valide jusqu&apos;au{" "}
+            Toutes les modifications remonteront automatiquement dans la Base
+            Adresse Nationale jusqu&apos;au{" "}
             <b>{format(new Date(habilitation.expiresAt), "dd/MM/yyyy")}</b>.
           </Text>
         </Alert>

components/bal/numero-editor.tsx

@@ -85,7 +85,7 @@
     refreshBALSync,
     reloadVoies,
   } = useContext(BalDataContext);
-  const { selectedParcelles } = useContext(ParcellesContext);
+  const { highlightedParcelles } = useContext(ParcellesContext);
   const { markers, suggestedNumero, setCompleteNumero } =
     useContext(MarkersContext);
   const { reloadTiles } = useContext(MapContext);
@@ -116,7 +116,7 @@
       numero: Number(numero),
       suffixe: suffixe?.length > 0 ? suffixe.toLowerCase().trim() : null,
       comment: comment.length > 0 ? comment : null,
-      parcelles: selectedParcelles,
+      parcelles: highlightedParcelles,
       certifie: certifie ?? (initialValue?.certifie || false),
     };
 
@@ -143,7 +143,7 @@
     certifie,
     toponymeId,
     comment,
-    selectedParcelles,
+    highlightedParcelles,
   ]);
 
   const onFormSubmit = useCallback(
@@ -262,14 +262,14 @@
     if (onVoieChanged) {
       onVoieChanged();
     }
   }, []);
 
   const handleNomVoieChange = useCallback((nomVoie) => {
     onNomVoieChange(nomVoie);
     if (onVoieChanged) {
       onVoieChanged();
     }
   }, []);
 
   useEffect(() => {
     let nom = null;

components/bal/numero-editor/select-parcelles.tsx

@@ -26,8 +26,8 @@ function SelectParcelles({
   const { isCadastreDisplayed, setIsCadastreDisplayed } =
     useContext(MapContext);
   const {
-    selectedParcelles,
-    setSelectedParcelles,
+    highlightedParcelles,
+    setHighlightedParcelles,
     setIsParcelleSelectionEnabled,
     hoveredParcelle,
     handleHoveredParcelle,
@@ -36,23 +36,27 @@ function SelectParcelles({
   const addressType = isToponyme ? "toponyme" : "numéro";
 
   useEffect(() => {
-    setSelectedParcelles(initialParcelles);
+    setHighlightedParcelles(initialParcelles);
     setIsParcelleSelectionEnabled(true);
 
     return () => {
       setIsParcelleSelectionEnabled(false);
     };
-  }, []);
+  }, [
+    setHighlightedParcelles,
+    setIsParcelleSelectionEnabled,
+    initialParcelles,
+  ]);
 
   return (
     <Pane display="flex" flexDirection="column">
       <InputLabel
         title="Parcelles cadastre"
         help={`Depuis la carte, cliquez sur les parcelles que vous souhaitez ajouter au ${addressType}. En précisant les parcelles associées à cette adresse, vous accélérez sa réutilisation par de nombreux services, DDFiP, opérateurs de courrier, de fibre et de GPS.`}
       />
-      {selectedParcelles.length > 0 ? (
+      {highlightedParcelles.length > 0 ? (
         <Pane display="grid" gridTemplateColumns="1fr 1fr 1fr">
-          {selectedParcelles.map((parcelle) => {
+          {highlightedParcelles.map((parcelle) => {
             const isHovered = parcelle === hoveredParcelle?.id;
 
             return (

components/bal/signalement-infos.tsx

@@ -1,25 +1,49 @@
 import React from "react";
-import NextLink from "next/link";
-import { Pane, Text, Heading, Link } from "evergreen-ui";
+import { Pane, Heading, Button, Alert } from "evergreen-ui";
 import { Signalement } from "@/lib/openapi-signalement";
+import { useRouter } from "next/navigation";
 
 interface SignalementInfosProps {
   balId: string;
   signalements: Signalement[];
 }
 
 function SignalementInfos({ balId, signalements }: SignalementInfosProps) {
+  const router = useRouter();
+  const onClick = () => {
+    router.push(`/bal/${balId}/signalements`);
+  };
+
   return (
-    <Pane backgroundColor="white" padding={8} borderRadius={10} margin={8}>
+    <Pane
+      display="flex"
+      flexDirection="column"
+      backgroundColor="white"
+      padding={8}
+      borderRadius={10}
+      margin={8}
+    >
       <Heading marginBottom={15}>Signalements</Heading>
-      <Text marginTop={5} is="p">
-        Vous avez <b>{signalements.length}</b>{" "}
-        {signalements.length > 1 ? "signalements" : "signalement"} en attente de
-        traitement.
-      </Text>
-      <Link is={NextLink} href={`/bal/${balId}/signalements`}>
-        Consulter les signalements
-      </Link>
+      <Alert
+        intent="info"
+        title={
+          <Pane fontWeight="normal">
+            Vous avez reçu <b>{signalements.length}</b>{" "}
+            {signalements.length > 1 ? "propositions" : "proposition"}.
+          </Pane>
+        }
+      >
+        <Button
+          marginTop="1rem"
+          type="button"
+          onClick={onClick}
+          width="fit-content"
+          alignSelf="center"
+          appearance="primary"
+        >
+          Consulter les signalements
+        </Button>
+      </Alert>
     </Pane>
   );
 }

components/bal/toponyme-editor.tsx

@@ -52,7 +52,7 @@ function ToponymeEditor({
     reloadParcelles,
   } = useContext(BalDataContext);
   const { markers } = useContext(MarkersContext);
-  const { selectedParcelles } = useContext(ParcellesContext);
+  const { highlightedParcelles } = useContext(ParcellesContext);
   const [ref, setIsFocus] = useFocus(true);
 
   const onFormSubmit = useCallback(
@@ -66,7 +66,7 @@ function ToponymeEditor({
         nom,
         nomAlt: Object.keys(nomAlt).length > 0 ? nomAlt : null,
         positions: [],
-        parcelles: selectedParcelles,
+        parcelles: highlightedParcelles,
       };
 
       if (markers) {
@@ -133,7 +133,7 @@ function ToponymeEditor({
       nom,
       nomAlt,
       markers,
-      selectedParcelles,
+      highlightedParcelles,
       setToponyme,
       closeForm,
       refreshBALSync,

components/base-locale-card/base-locale-card-content.tsx

@@ -38,6 +38,7 @@ interface BaseLocaleCardContentProps {
   onRemove?: (e: any) => void;
   onHide?: (e: any) => void;
   isShownHabilitationStatus?: boolean;
+  pendingSignalementsCount?: number;
 }
 
 function BaseLocaleCardContent({
@@ -50,6 +51,7 @@ function BaseLocaleCardContent({
   onSelect,
   onRemove,
   onHide,
+  pendingSignalementsCount,
 }: BaseLocaleCardContentProps) {
   const { status, createdAt, emails } = baseLocale;
   const { isMobile } = useContext(LayoutContext);
@@ -120,6 +122,20 @@ function BaseLocaleCardContent({
           </Pane>
         )}
 
+        {pendingSignalementsCount && (
+          <Pane
+            flex={1}
+            textAlign="center"
+            margin="auto"
+            {...(isMobile && { marginBottom: 10 })}
+          >
+            <Text display="block">Signalements</Text>
+            <Text fontWeight="bold" whiteSpace="nowrap">
+              {pendingSignalementsCount}
+            </Text>
+          </Pane>
+        )}
+
         {commune && (
           <Pane
             flex={1}

components/base-locale-card/index.tsx

@@ -16,12 +16,14 @@ import { ApiGeoService } from "@/lib/geo-api";
 import StatusBadge from "@/components/status-badge";
 import BaseLocaleCardContent from "@/components/base-locale-card/base-locale-card-content";
 import {
+  BaseLocale,
   ExtendedBaseLocaleDTO,
   HabilitationDTO,
   HabilitationService,
   OpenAPI,
 } from "@/lib/openapi";
 import { CommuneApiGeoType } from "@/lib/geo-api/type";
+import { Signalement, SignalementsService } from "@/lib/openapi-signalement";
 
 const ADRESSE_URL =
   process.env.NEXT_PUBLIC_ADRESSE_URL || "https://adresse.data.gouv.fr";
@@ -52,6 +54,8 @@ function BaseLocaleCard({
   const [habilitation, setHabilitation] = useState<HabilitationDTO | null>(
     null
   );
+  const [pendingSignalementsCount, setPendingSignalementsCount] =
+    useState<number>();
   const [isHabilitationValid, setIsHabilitationValid] =
     useState<boolean>(false);
   const [isOpen, setIsOpen] = useState(isAdmin ? isDefaultOpen : false);
@@ -100,11 +104,27 @@ function BaseLocaleCard({
       Object.assign(OpenAPI, { TOKEN: null });
     };
 
+    const fetchPendingSignalementsCount = async () => {
+      const paginatedSignalements = await SignalementsService.getSignalements(
+        [baseLocale.commune],
+        undefined,
+        undefined,
+        [Signalement.status.PENDING]
+      );
+      setPendingSignalementsCount(paginatedSignalements.total);
+    };
+
     void fetchCommune();
 
     if (!baseLocale.token) {
       void fetchHabilitationIsValid();
     } else {
+      if (
+        baseLocale.status === BaseLocale.status.PUBLISHED &&
+        process.env.NEXT_PUBLIC_API_SIGNALEMENT
+      ) {
+        void fetchPendingSignalementsCount();
+      }
       void fetchHabilitation();
     }
   }, [baseLocale]);
@@ -181,6 +201,7 @@ function BaseLocaleCard({
           onSelect={onSelect}
           onRemove={onRemove}
           onHide={onHide}
+          pendingSignalementsCount={pendingSignalementsCount}
         />
       )}
     </Card>

components/breadcrumbs.tsx

@@ -38,7 +38,7 @@ function Breadcrumbs({
   if (innerPath === "signalements" && router.query.idSignalement) {
     const signalementId = router.query.idSignalement;
     const signalement = signalements.find(
-      (signalement) => signalement._id === signalementId
+      (signalement) => signalement.id === signalementId
     );
     signalementLabel = signalement && getSignalementLabel(signalement);
   }

components/certification-button.tsx

@@ -82,18 +82,12 @@ function CertificationButton({
           position: sticky;
           width: 100%;
           bottom: -12px;
-          // bottom: 0;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-wrap: wrap;
           padding: 10px 0;
-
           background-color: #e6e8f0;
-
-          // background-color: white;
-          // border-radius: 8px;
-          // border: 1px solid #c1c4d6;
         }
 
         .certification-button-wrapper > div {