Merge pull request #1555 from SocialGouv/feat/us-3063-archivate-benef…

…iciaires-pilotage

feat: archivage bénéficiaires pilotage

app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/FicheBeneficiairePage.tsx

@@ -12,16 +12,12 @@ import {
   Onglet,
 } from 'app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/rendez-vous-passes/FicheBeneficiaireProps'
 import DetailsJeune from 'components/jeune/DetailsJeune'
-import Modal from 'components/Modal'
 import PageActionsPortal from 'components/PageActionsPortal'
 import Button, { ButtonStyle } from 'components/ui/Button/Button'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
-import { IllustrationName } from 'components/ui/IllustrationComponent'
 import FailureAlert from 'components/ui/Notifications/FailureAlert'
 import InformationMessage from 'components/ui/Notifications/InformationMessage'
 import { IndicateursSemaine } from 'interfaces/beneficiaire'
-import { SuppressionBeneficiaireFormData } from 'interfaces/json/beneficiaire'
-import { MotifSuppressionBeneficiaire } from 'interfaces/referentiel'
 import { AlerteParam } from 'referentiel/alerteParam'
 import { getIndicateursJeuneAlleges } from 'services/beneficiaires.service'
 import { useAlerte } from 'utils/alerteContext'
@@ -37,11 +33,8 @@ const FicheBeneficiaireMilo = dynamic(
 const FicheBeneficiairePasMilo = dynamic(
   () => import('components/jeune/FicheBeneficiairePasMilo')
 )
-const DeleteBeneficiaireActifModal = dynamic(
-  () => import('components/jeune/DeleteBeneficiaireActifModal')
-)
-const DeleteJeuneInactifModal = dynamic(
-  () => import('components/jeune/DeleteJeuneInactifModal')
+const DeleteBeneficiaireModal = dynamic(
+  () => import('components/jeune/DeleteBeneficiaireModal')
 )
 
 function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
@@ -53,30 +46,18 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
     ? '/etablissement/beneficiaires'
     : '/mes-jeunes'
 
-  const [portefeuille, setPortefeuille] = usePortefeuille()
+  const [portefeuille] = usePortefeuille()
   const chats = useChats()
   const [currentConversation, setCurrentConversation] = useCurrentConversation()
   const [conseiller] = useConseiller()
   const [alerte] = useAlerte()
 
-  const [motifsSuppression, setMotifsSuppression] = useState<
-    MotifSuppressionBeneficiaire[]
-  >([])
-
   const [indicateursSemaine, setIndicateursSemaine] = useState<
     IndicateursSemaine | undefined
   >()
 
-  const [
-    showModaleDeleteBeneficiaireActif,
-    setShowModaleDeleteBeneficiaireActif,
-  ] = useState<boolean>(false)
-  const [showModaleDeleteJeuneInactif, setShowModaleDeleteJeuneInactif] =
+  const [showModaleDeleteBeneficiaire, setShowModaleDeleteBeneficiaire] =
     useState<boolean>(false)
-  const [
-    showModaleSuccesDeleteBeneficiaire,
-    setShowModaleSuccesDeleteBeneficiaire,
-  ] = useState<boolean>(false)
 
   const [
     showSuppressionCompteBeneficiaireError,
@@ -117,72 +98,6 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
     router.replace(`${pathPrefix}/${beneficiaire.id}?onglet=${tab}`)
   }
 
-  async function openDeleteJeuneModal(e: React.MouseEvent<HTMLElement>) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    if (beneficiaire.isActivated) {
-      setShowModaleDeleteBeneficiaireActif(true)
-
-      if (motifsSuppression.length === 0) {
-        const { getMotifsSuppression } = await import(
-          'services/beneficiaires.service'
-        )
-        const result = await getMotifsSuppression()
-        setMotifsSuppression(result)
-      }
-    }
-
-    if (!beneficiaire.isActivated) {
-      setShowModaleDeleteJeuneInactif(true)
-    }
-  }
-
-  async function archiverJeuneActif(
-    payload: SuppressionBeneficiaireFormData
-  ): Promise<void> {
-    try {
-      const { archiverJeune } = await import('services/beneficiaires.service')
-      await archiverJeune(beneficiaire.id, payload)
-
-      removeBeneficiaireFromPortefeuille(beneficiaire.id)
-      setShowModaleSuccesDeleteBeneficiaire(true)
-    } catch {
-      setShowSuppressionCompteBeneficiaireError(true)
-      setTrackingLabel(`${pageTracking} - Erreur suppr. compte`)
-    } finally {
-      setShowModaleDeleteBeneficiaireActif(false)
-    }
-  }
-
-  async function supprimerJeuneInactif(): Promise<void> {
-    try {
-      const { supprimerJeuneInactif: _supprimerJeuneInactif } = await import(
-        'services/beneficiaires.service'
-      )
-      await _supprimerJeuneInactif(beneficiaire.id)
-
-      removeBeneficiaireFromPortefeuille(beneficiaire.id)
-      setShowModaleSuccesDeleteBeneficiaire(true)
-    } catch {
-      setShowSuppressionCompteBeneficiaireError(true)
-      setTrackingLabel(`${pageTracking} - Erreur suppr. compte`)
-    } finally {
-      setShowModaleDeleteJeuneInactif(false)
-    }
-  }
-
-  function removeBeneficiaireFromPortefeuille(idBeneficiaire: string): void {
-    const updatedPortefeuille = [...portefeuille]
-    const index = updatedPortefeuille.findIndex(
-      ({ id }) => id === idBeneficiaire
-    )
-    updatedPortefeuille.splice(index, 1)
-    setPortefeuille(updatedPortefeuille)
-    if (currentConversation?.conversation.id === idBeneficiaire)
-      setCurrentConversation(undefined)
-  }
-
   useMatomo(trackingLabel, portefeuille.length > 0)
 
   useEffect(() => {
@@ -209,7 +124,7 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
       {!lectureSeule && (
         <PageActionsPortal>
           <Button
-            onClick={openDeleteJeuneModal}
+            onClick={() => setShowModaleDeleteBeneficiaire(true)}
             style={ButtonStyle.SECONDARY}
             type='button'
           >
@@ -353,39 +268,16 @@ function FicheBeneficiairePage(props: FicheBeneficiaireProps) {
         <FicheBeneficiairePasMilo onSwitchTab={switchTab} {...props} />
       )}
 
-      {showModaleDeleteBeneficiaireActif && (
-        <DeleteBeneficiaireActifModal
+      {showModaleDeleteBeneficiaire && (
+        <DeleteBeneficiaireModal
           beneficiaire={beneficiaire}
-          onClose={() => setShowModaleDeleteBeneficiaireActif(false)}
-          motifsSuppression={motifsSuppression}
-          soumettreSuppression={archiverJeuneActif}
-        />
-      )}
-
-      {showModaleDeleteJeuneInactif && (
-        <DeleteJeuneInactifModal
-          jeune={beneficiaire}
-          onClose={() => setShowModaleDeleteJeuneInactif(false)}
-          onDelete={supprimerJeuneInactif}
+          onClose={() => setShowModaleDeleteBeneficiaire(false)}
+          onError={() => {
+            setShowSuppressionCompteBeneficiaireError(true)
+            setTrackingLabel(`${pageTracking} - Erreur suppr. compte`)
+          }}
         />
       )}
-
-      {showModaleSuccesDeleteBeneficiaire && (
-        <Modal
-          title={`Le compte bénéficiaire : ${beneficiaire.prenom} ${beneficiaire.nom} a bien été supprimé.`}
-          onClose={() => router.push('/mes-jeunes')}
-          titleIllustration={IllustrationName.Check}
-        >
-          <Button
-            type='button'
-            style={ButtonStyle.PRIMARY}
-            className='block m-auto'
-            onClick={() => router.push('/mes-jeunes')}
-          >
-            Revenir à mon portefeuille
-          </Button>
-        </Modal>
-      )}
     </>
   )
 }

app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { withTransaction } from '@elastic/apm-rum-react'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 import React, { ReactElement, useState } from 'react'
 
@@ -41,6 +42,7 @@ function CreationBeneficiaireFranceTravailPage(): ReactElement {
       setPortefeuille(
         portefeuille.concat({
           ...beneficiaireCree,
+          creationDate: DateTime.now().toISO(),
           isActivated: false,
           estAArchiver: false,
         })

app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { withTransaction } from '@elastic/apm-rum-react'
+import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 import React, { ForwardedRef, forwardRef, useRef, useState } from 'react'
 
@@ -62,6 +63,7 @@ function CreationBeneficiaireMiloPage() {
       setPortefeuille(
         portefeuille.concat({
           ...beneficiaireCree,
+          creationDate: DateTime.now().toISO(),
           isActivated: false,
           estAArchiver: false,
         })

app/(connected)/(with-sidebar)/PageLayout.tsx

@@ -3,7 +3,6 @@
 import { ReactNode } from 'react'
 
 import layout from 'app/(connected)/(with-sidebar)/PageLayout.module.css'
-import { ID_CONTENU } from 'components/globals'
 import AlerteDisplayer from 'components/layouts/AlerteDisplayer'
 import Footer from 'components/layouts/Footer'
 import Header from 'components/layouts/Header'
@@ -26,8 +25,6 @@ export default function PageLayout({
 
       <main
         role='main'
-        id={ID_CONTENU}
-        tabIndex={-1}
         className={`${layout.content} ${
           fullWidth ? layout.content_fullWidth : layout.content_centered
         }`}

components/ModalContainer.tsx

@@ -15,7 +15,7 @@ import styles from 'styles/components/Modal.module.css'
 
 export type ModalHandles = {
   focusClose: () => void
-  closeModal: (e: KeyboardEvent | MouseEvent) => void
+  closeModal: (e?: KeyboardEvent | MouseEvent) => void
 }
 export type ModalContainerProps = {
   onClose: () => void
@@ -68,8 +68,8 @@ function ModalContainer(
     }
   }
 
-  function handleClose(e: KeyboardEvent | MouseEvent) {
-    e.preventDefault()
+  function handleClose(e?: KeyboardEvent | MouseEvent) {
+    e?.preventDefault()
     if (previousFocusedElement.current) previousFocusedElement.current.focus()
     onClose()
   }

components/jeune/DeleteBeneficiaireActifModal.tsx

@@ -20,31 +20,38 @@ import Textarea from 'components/ui/Form/Textarea'
 import { IllustrationName } from 'components/ui/IllustrationComponent'
 import InformationMessage from 'components/ui/Notifications/InformationMessage'
 import { ValueWithError } from 'components/ValueWithError'
-import { BaseBeneficiaire, DetailBeneficiaire } from 'interfaces/beneficiaire'
+import {
+  BaseBeneficiaire,
+  BeneficiaireWithActivity,
+} from 'interfaces/beneficiaire'
 import { SuppressionBeneficiaireFormData } from 'interfaces/json/beneficiaire'
 import { MotifSuppressionBeneficiaire } from 'interfaces/referentiel'
 import useMatomo from 'utils/analytics/useMatomo'
 import { dateIsInInterval, toShortDate } from 'utils/date'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 interface DeleteBeneficiaireActifModalProps {
-  beneficiaire: DetailBeneficiaire
+  beneficiaire: BeneficiaireWithActivity
   motifsSuppression: MotifSuppressionBeneficiaire[]
   onClose: () => void
   soumettreSuppression: (
     payload: SuppressionBeneficiaireFormData
   ) => Promise<void>
 }
 
-export default function DeleteBeneficiaireActifModal({
-  beneficiaire,
-  motifsSuppression,
-  onClose,
-  soumettreSuppression,
-}: DeleteBeneficiaireActifModalProps) {
+function DeleteBeneficiaireActifModal(
+  {
+    beneficiaire,
+    motifsSuppression,
+    onClose,
+    soumettreSuppression,
+  }: DeleteBeneficiaireActifModalProps,
+  ref: ForwardedRef<ModalHandles>
+) {
   const [portefeuille] = usePortefeuille()
 
   const modalRef = useRef<ModalHandles>(null)
+  useImperativeHandle(ref, () => modalRef.current!)
 
   const [showModalConfirmation, setShowModalConfirmation] =
     useState<boolean>(true)
@@ -90,6 +97,7 @@ export default function DeleteBeneficiaireActifModal({
     </>
   )
 }
+export default forwardRef(DeleteBeneficiaireActifModal)
 
 const ModalConfirmation = forwardRef(
   (
@@ -151,7 +159,7 @@ const ModalSuppressionForm = forwardRef(
       onSuppression,
       onClose,
     }: {
-      beneficiaire: DetailBeneficiaire
+      beneficiaire: BeneficiaireWithActivity
       motifsSuppression: MotifSuppressionBeneficiaire[]
       onSuppression: (payload: SuppressionBeneficiaireFormData) => Promise<void>
       onClose: () => void

components/jeune/DeleteJeuneInactifModal.tsx → components/jeune/DeleteBeneficiaireInactifModal.tsx

@@ -1,4 +1,9 @@
-import React, { useRef } from 'react'
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
 import Modal, { ModalHandles } from 'components/Modal'
 import Button, { ButtonStyle } from 'components/ui/Button/Button'
@@ -8,19 +13,19 @@ import useMatomo from 'utils/analytics/useMatomo'
 import { usePortefeuille } from 'utils/portefeuilleContext'
 
 interface DeleteJeuneInactifModalProps {
-  jeune: BaseBeneficiaire
+  beneficiaire: BaseBeneficiaire
   onClose: () => void
   onDelete: () => Promise<void>
 }
 
-export default function DeleteJeuneInactifModal({
-  jeune,
-  onClose,
-  onDelete,
-}: DeleteJeuneInactifModalProps) {
+function DeleteBeneficiaireInactifModal(
+  { beneficiaire, onClose, onDelete }: DeleteJeuneInactifModalProps,
+  ref: ForwardedRef<ModalHandles>
+) {
   const [portefeuille] = usePortefeuille()
 
   const modalRef = useRef<ModalHandles>(null)
+  useImperativeHandle(ref, () => modalRef.current!)
 
   useMatomo(
     'Détail Jeune - Pop-in confirmation suppression',
@@ -30,7 +35,7 @@ export default function DeleteJeuneInactifModal({
   return (
     <Modal
       ref={modalRef}
-      title={`Suppression du compte bénéficiaire ${jeune.prenom} ${jeune.nom}`}
+      title={`Suppression du compte bénéficiaire ${beneficiaire.prenom} ${beneficiaire.nom}`}
       onClose={onClose}
       titleIllustration={IllustrationName.Delete}
     >
@@ -58,3 +63,4 @@ export default function DeleteJeuneInactifModal({
     </Modal>
   )
 }
+export default forwardRef(DeleteBeneficiaireInactifModal)