feat: ajoute affichage dispositif beneficiaire

SocialGouv · Jan 17, 2025 · 3e34366 · 3e34366
1 parent 06ae48d
commit 3e34366
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 181 deletions.
diff --git a/components/jeune/BlocInformationJeuneFicheBeneficiaire.tsx b/components/jeune/BlocInformationJeuneFicheBeneficiaire.tsx
@@ -7,9 +7,10 @@ import {
   IdentifiantPartenaire,
   InformationNonDisponible,
 } from 'components/jeune/BlocInformationJeune'
+import DispositifTag from 'components/jeune/DispositifTag'
 import SituationTag from 'components/jeune/SituationTag'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
-import { CategorieSituation, EtatSituation } from 'interfaces/beneficiaire'
+import { CategorieSituation, DetailBeneficiaire } from 'interfaces/beneficiaire'
 import {
   Conseiller,
   estConseilDepartemental,
@@ -18,27 +19,17 @@ import {
 import { toShortDate } from 'utils/date'
 
 interface BlocInformationJeuneFicheBeneficiaireProps {
+  beneficiaire: DetailBeneficiaire
   conseiller: Conseiller
-  idBeneficiaire: string
-  dateFinCEJ?: string
-  email?: string
-  situations?: Array<{
-    etat?: EtatSituation
-    categorie: CategorieSituation
-    dateFin?: string
-  }>
   urlDossier?: string
   onIdentifiantPartenaireCopie?: () => void
   identifiantPartenaire?: string
   onIdentifiantPartenaireClick?: () => void
 }
 
 export function BlocInformationJeuneFicheBeneficiaire({
+  beneficiaire,
   conseiller,
-  dateFinCEJ,
-  email,
-  idBeneficiaire,
-  situations,
   onIdentifiantPartenaireCopie,
   identifiantPartenaire,
   onIdentifiantPartenaireClick,
@@ -49,25 +40,33 @@ export function BlocInformationJeuneFicheBeneficiaire({
   const conseillerEstMilo = estMilo(conseiller)
   const aIdentifiantFT =
     !conseillerEstMilo && !estConseilDepartemental(conseiller)
+  const { situations, dateFinCEJ, email, id, dispositif } = beneficiaire
+
   return (
     <div className='border border-solid rounded-base w-full p-4 border-grey_100'>
       <h2 className='text-m-bold text-grey_800 mb-2'>Informations</h2>
 
-      {conseillerEstMilo && (
-        <>
-          {!situations?.length && (
-            <div className='mb-3'>
-              <SituationTag situation={CategorieSituation.SANS_SITUATION} />
-            </div>
-          )}
+      <dl>
+        {conseillerEstMilo && (
+          <div className='flex gap-2 mb-4'>
+            <dt className='sr-only'>Dispositif</dt>
+            <dd>
+              <DispositifTag dispositif={dispositif} />
+            </dd>
 
-          {Boolean(situations?.length) && (
-            <SituationTag situation={situations![0].categorie} />
-          )}
-        </>
-      )}
+            <dt className='sr-only'>Situation</dt>
+            <dd>
+              {!situations?.length && (
+                <SituationTag situation={CategorieSituation.SANS_SITUATION} />
+              )}
+
+              {Boolean(situations?.length) && (
+                <SituationTag situation={situations[0].categorie} />
+              )}
+            </dd>
+          </div>
+        )}
 
-      <dl className='flex flex-col'>
         {conseillerEstMilo && (
           <div className='flex'>
             <dt className='text-base-regular'>Date de fin du CEJ :</dt>
@@ -94,10 +93,7 @@ export function BlocInformationJeuneFicheBeneficiaire({
           )}
       </dl>
 
-      <LienVersInformations
-        idBeneficiaire={idBeneficiaire}
-        pathPrefix={pathPrefix}
-      />
+      <LienVersInformations idBeneficiaire={id} pathPrefix={pathPrefix} />
     </div>
   )
 }

diff --git a/components/jeune/DetailsJeune.tsx b/components/jeune/DetailsJeune.tsx
@@ -105,10 +105,7 @@ export default function DetailsJeune({
         )}
 
         <BlocInformationJeuneFicheBeneficiaire
-          idBeneficiaire={jeune.id}
-          dateFinCEJ={jeune.dateFinCEJ}
-          email={jeune.email}
-          situations={jeune.situations}
+          beneficiaire={jeune}
           conseiller={conseiller}
           onIdentifiantPartenaireCopie={trackEventOnCopieIdentifiantPartenaire}
           identifiantPartenaire={identifiantPartenaire}

diff --git a/components/jeune/DispositifTag.tsx b/components/jeune/DispositifTag.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { TagMetier } from 'components/ui/Indicateurs/Tag'
+
+interface TagProps {
+  dispositif: string
+}
+
+function getStyle(dispositif: string): {
+  color: string
+  backgroundColor: string
+} {
+  switch (dispositif) {
+    case 'PACEA':
+      return {
+        color: 'success',
+        backgroundColor: 'success_lighten',
+      }
+    case 'CEJ':
+    default:
+      return {
+        color: 'primary',
+        backgroundColor: 'primary_lighten',
+      }
+  }
+}
+
+export default function DispositifTag({ dispositif }: TagProps) {
+  const { color, backgroundColor } = getStyle(dispositif)
+  return (
+    <TagMetier
+      label={dispositif}
+      color={color}
+      backgroundColor={backgroundColor}
+    />
+  )
+}
diff --git a/components/jeune/TableauBeneficiairesMilo.tsx b/components/jeune/TableauBeneficiairesMilo.tsx
@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon'
 import React, { useEffect, useState } from 'react'
 
+import DispositifTag from 'components/jeune/DispositifTag'
 import SituationTag from 'components/jeune/SituationTag'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
 import { TagDate } from 'components/ui/Indicateurs/Tag'
@@ -111,36 +112,45 @@ export default function TableauBeneficiairesMilo({
                   )}
                   {getNomBeneficiaireComplet(beneficiaire)}
                 </div>
-                <SituationTag situation={beneficiaire.situationCourante} />
+                <div className='mt-2 flex gap-2'>
+                  <DispositifTag dispositif={beneficiaire.dispositif} />
+                  <SituationTag situation={beneficiaire.situationCourante} />
+                </div>
               </TD>
 
               <TD className='relative h-full !p-2 after:content-none after:absolute after:right-0 after:top-4 after:bottom-4 after:border-l-2 after:border-grey_500 layout_m:after:content-[""]'>
-                <div
-                  className='text-s-regular text-grey_800'
-                  aria-hidden={true}
-                >
-                  {dateFinCEJColumn}
-                </div>
-
-                {beneficiaire.dateFinCEJ && (
-                  <TagDate
-                    label={toLongMonthDate(
-                      DateTime.fromISO(beneficiaire.dateFinCEJ)
+                {beneficiaire.dispositif === 'CEJ' && (
+                  <>
+                    <div
+                      className='text-s-regular text-grey_800 mb-2'
+                      aria-hidden={true}
+                    >
+                      {dateFinCEJColumn}
+                    </div>
+
+                    {beneficiaire.dateFinCEJ && (
+                      <TagDate
+                        label={toLongMonthDate(
+                          DateTime.fromISO(beneficiaire.dateFinCEJ)
+                        )}
+                      />
                     )}
-                  />
-                )}
 
-                {!beneficiaire.dateFinCEJ && (
-                  <>
-                    --
-                    <span className='sr-only'>information non disponible</span>
+                    {!beneficiaire.dateFinCEJ && (
+                      <>
+                        --
+                        <span className='sr-only'>
+                          information non disponible
+                        </span>
+                      </>
+                    )}
                   </>
                 )}
               </TD>
 
               <TD className='h-full !p-2'>
                 <div
-                  className='text-s-regular text-grey_800'
+                  className='text-s-regular text-grey_800 mb-2'
                   aria-hidden={true}
                 >
                   {actionsColumn}
@@ -152,7 +162,7 @@ export default function TableauBeneficiairesMilo({
 
               <TD className='h-full !p-2'>
                 <div
-                  className='text-s-regular text-grey_800'
+                  className='text-s-regular text-grey_800 mb-2'
                   aria-hidden={true}
                 >
                   {rdvColumn}
@@ -164,7 +174,7 @@ export default function TableauBeneficiairesMilo({
                 {beneficiaire.isActivated && (
                   <>
                     <span
-                      className='text-xs-regular text-grey_800'
+                      className='text-xs-regular text-grey_800 mb-2'
                       aria-hidden={true}
                     >
                       {derniereActiviteColumn}

diff --git a/fixtures/beneficiaire.ts b/fixtures/beneficiaire.ts
@@ -63,6 +63,7 @@ export const unDetailBeneficiaire = (
     situations: [],
     idConseiller: 'id-conseiller',
     estAArchiver: false,
+    dispositif: 'CEJ',
   }
   return { ...defaults, ...overrides }
 }
@@ -120,6 +121,7 @@ export const unItemBeneficiaire = (
     ...unBeneficiaireWithActivity(),
     isReaffectationTemporaire: false,
     situationCourante: CategorieSituation.SANS_SITUATION,
+    dispositif: 'CEJ',
   }
   return { ...defaults, ...overrides }
 }
@@ -168,6 +170,7 @@ export const unDetailBeneficiaireJson = (
     creationDate: '2021-12-07T17:30:07.756Z',
     lastActivity: '2023-04-12T05:42:07.756Z',
     conseiller: { id: 'id-conseiller' },
+    dispositif: 'CEJ',
   }
   return { ...defaults, ...overrides }
 }
@@ -184,6 +187,7 @@ export const unItemBeneficiaireJson = (
     isReaffectationTemporaire: false,
     creationDate: '2020-04-12T05:30:07.756Z',
     lastActivity: '2021-12-07T17:30:07.756Z',
+    dispositif: 'CEJ',
   }
   return { ...defaults, ...overrides }
 }

diff --git a/interfaces/beneficiaire.ts b/interfaces/beneficiaire.ts
@@ -38,12 +38,13 @@ export type BeneficiaireWithActivity = BaseBeneficiaire & {
 
 export type BeneficiaireFromListe = BeneficiaireWithActivity & {
   isReaffectationTemporaire: boolean
+  situationCourante: CategorieSituation
+  dispositif: string
   conseillerPrecedent?: {
     nom: string
     prenom: string
     email?: string
   }
-  situationCourante: CategorieSituation
   structureMilo?: { id: string }
 }
 
@@ -58,6 +59,7 @@ export type DetailBeneficiaire = BaseBeneficiaire & {
     dateFin?: string
   }>
   estAArchiver: boolean
+  dispositif: string
   lastActivity?: string
   email?: string
   urlDossier?: string

diff --git a/interfaces/json/beneficiaire.ts b/interfaces/json/beneficiaire.ts
@@ -34,6 +34,7 @@ export interface ItemBeneficiaireJson extends BaseBeneficiaireJson {
   isActivated: boolean
   isReaffectationTemporaire: boolean
   estAArchiver: boolean
+  dispositif: string
   lastActivity?: string
   situationCourante?: Situation
   dateFinCEJ?: string
@@ -44,6 +45,7 @@ export interface DetailBeneficiaireJson extends BaseBeneficiaireJson {
   isActivated: boolean
   isReaffectationTemporaire: boolean
   conseiller: { id: string }
+  dispositif: string
   lastActivity?: string
   email?: string
   urlDossier?: string

diff --git a/tests/pages/PortefeuillePage.test.tsx b/tests/pages/PortefeuillePage.test.tsx
@@ -102,7 +102,7 @@ describe('PortefeuillePage client side', () => {
     describe("affiche le statut d'activation du compte d'un jeune", () => {
       it("si le compte n'a pas été activé", () => {
         const row = screen.getByRole('cell', {
-          name: 'Sanfamiye Nadia Sans situation',
+          name: 'Sanfamiye Nadia CEJ Sans situation',
         }).parentElement!
 
         //THEN
@@ -113,7 +113,7 @@ describe('PortefeuillePage client side', () => {
 
       it('si le compte a été activé', () => {
         const row = screen.getByRole('cell', {
-          name: 'Jirac Kenji Sans situation',
+          name: 'Jirac Kenji CEJ Sans situation',
         }).parentElement!
 
         //THEN
@@ -127,14 +127,14 @@ describe('PortefeuillePage client side', () => {
       it('si le compte a été réaffecté temporairement', () => {
         expect(
           screen.getByRole('cell', {
-            name: "bénéficiaire temporaire D'Aböville-Muñoz François Maria Sans situation",
+            name: "bénéficiaire temporaire D'Aböville-Muñoz François Maria CEJ Sans situation",
           })
         ).toBeInTheDocument()
       })
 
       it("si le compte n'a pas été réaffecté temporairement", () => {
         const row = screen.getByRole('cell', {
-          name: 'Sanfamiye Nadia Sans situation',
+          name: 'Sanfamiye Nadia CEJ Sans situation',
         }).parentElement!
 
         //THEN