feat: pilotage archivage

SocialGouv · Dec 17, 2024 · 26c33ab · 26c33ab
1 parent 3b6e711
commit 26c33ab
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 66 deletions.
diff --git a/...-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx b/...-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage.tsx
@@ -39,7 +39,11 @@ function CreationBeneficiaireFranceTravailPage(): ReactElement {
       })
 
       setPortefeuille(
-        portefeuille.concat({ ...beneficiaireCree, estAArchiver: false })
+        portefeuille.concat({
+          ...beneficiaireCree,
+          isActivated: false,
+          estAArchiver: false,
+        })
       )
       setAlerte(AlerteParam.creationBeneficiaire, beneficiaireCree.id)
       router.push('/mes-jeunes')

diff --git a/...ed)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx b/...ed)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage.tsx
@@ -60,7 +60,11 @@ function CreationBeneficiaireMiloPage() {
       )
 
       setPortefeuille(
-        portefeuille.concat({ ...beneficiaireCree, estAArchiver: false })
+        portefeuille.concat({
+          ...beneficiaireCree,
+          isActivated: false,
+          estAArchiver: false,
+        })
       )
       setAlerte(AlerteParam.creationBeneficiaire, beneficiaireCree.id)
       router.push('/mes-jeunes')

diff --git a/app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/pilotage/PilotagePage.tsx
@@ -56,7 +56,7 @@ const ongletProps: {
   },
   ARCHIVAGE: {
     queryParam: 'archivage',
-    trackingLabel: 'Archivage bénéficiaire',
+    trackingLabel: 'Archivage bénéficiaires',
   },
 }
 
@@ -192,6 +192,7 @@ function PilotagePage({
               <span className='text-base-bold'> À qualifier</span>
             </dd>
           </div>
+
           {conseiller.agence?.id && (
             <>
               <div>
@@ -232,17 +233,16 @@ function PilotagePage({
               )}
             </>
           )}
-          {aDesBeneficiairesAArchiver && (
-            <div>
-              <dt className='text-base-bold'>Bénéficiaires</dt>
-              <dd
-                className={`mt-2 rounded-base px-3 py-2 ${aDesBeneficiairesAArchiver ? 'bg-warning_lighten text-warning' : 'bg-primary_lighten text-primary_darken'}`}
-              >
-                <div className='text-xl-bold'>{nbBeneficiairesAArchiver}</div>
-                <span className='text-base-bold'> À archiver</span>
-              </dd>
-            </div>
-          )}
+
+          <div>
+            <dt className='text-base-bold'>Bénéficiaires</dt>
+            <dd
+              className={`mt-2 rounded-base px-3 py-2 ${aDesBeneficiairesAArchiver ? 'bg-warning_lighten text-warning' : 'bg-primary_lighten text-primary_darken'}`}
+            >
+              <div className='text-xl-bold'>{nbBeneficiairesAArchiver}</div>
+              <span className='text-base-bold'> À archiver</span>
+            </dd>
+          </div>
         </dl>
       </div>
 
@@ -274,17 +274,15 @@ function PilotagePage({
             iconName={IconName.EventFill}
           />
         )}
-        {aDesBeneficiairesAArchiver && (
-          <Tab
-            label='Archivage'
-            ariaLabel='Archivage des bénéficiaires'
-            count={nbBeneficiairesAArchiver}
-            selected={currentTab === 'ARCHIVAGE'}
-            controls='liste-beneficiaires-a-archiver'
-            onSelectTab={() => switchTab('ARCHIVAGE')}
-            iconName={IconName.EventFill}
-          />
-        )}
+        <Tab
+          label='Archivage des comptes'
+          count={nbBeneficiairesAArchiver}
+          selected={currentTab === 'ARCHIVAGE'}
+          controls='liste-beneficiaires-a-archiver'
+          onSelectTab={() => switchTab('ARCHIVAGE')}
+          iconName={IconName.Delete}
+          important={true}
+        />
       </TabList>
 
       {currentTab === 'ACTIONS' && (
@@ -348,7 +346,7 @@ function PilotagePage({
           </div>
         )}
 
-      {currentTab === 'ARCHIVAGE' && aDesBeneficiairesAArchiver && (
+      {currentTab === 'ARCHIVAGE' && (
         <div
           role='tabpanel'
           aria-labelledby='liste-beneficiaires-a-archiver--tab'

diff --git a/components/pilotage/OngletBeneficiairesAArchiverPilotage.tsx b/components/pilotage/OngletBeneficiairesAArchiverPilotage.tsx
@@ -1,28 +1,22 @@
-import { BeneficiaireWithActivity } from '../../interfaces/beneficiaire'
+import EmptyState from 'components/EmptyState'
+import TableauBeneficiairesAArchiver from 'components/pilotage/TableauBeneficiairesAArchiver'
+import { IllustrationName } from 'components/ui/IllustrationComponent'
+import { BeneficiaireWithActivity } from 'interfaces/beneficiaire'
 
-import TableauBeneficiairesAArchiver from './TableauBeneficiairesAArchiver'
-
-import EmptyStateImage from 'assets/images/illustration-event-grey.svg'
-
-interface OngletBeneficiairesAArchiverPilotageProps {
+type OngletBeneficiairesAArchiverPilotageProps = {
   beneficiaires: BeneficiaireWithActivity[]
 }
+
 export default function OngletBeneficiairesAArchiverPilotage({
   beneficiaires,
 }: OngletBeneficiairesAArchiverPilotageProps) {
   return (
     <>
-      {Boolean(beneficiaires && beneficiaires.length === 0) && (
-        <div className='flex flex-col justify-center items-center'>
-          <EmptyStateImage
-            focusable={false}
-            aria-hidden={true}
-            className='w-[360px] h-[200px]'
-          />
-          <p className='mt-4 text-base-medium w-2/3 text-center'>
-            Vous n’avez pas de bénéficiaires à archiver.
-          </p>
-        </div>
+      {beneficiaires.length === 0 && (
+        <EmptyState
+          illustrationName={IllustrationName.People}
+          titre='Vous n’avez pas de bénéficiaires à archiver.'
+        />
       )}
 
       {beneficiaires.length > 0 && (

diff --git a/components/pilotage/TableauBeneficiairesAArchiver.tsx b/components/pilotage/TableauBeneficiairesAArchiver.tsx
@@ -1,18 +1,17 @@
 import { DateTime } from 'luxon'
 
-import {
-  BeneficiaireWithActivity,
-  getNomBeneficiaireComplet,
-} from '../../interfaces/beneficiaire'
-import { TagDate } from '../ui/Indicateurs/Tag'
-
+import { TagDate } from 'components/ui/Indicateurs/Tag'
 import Table from 'components/ui/Table/Table'
 import TD from 'components/ui/Table/TD'
 import { TH } from 'components/ui/Table/TH'
 import TR from 'components/ui/Table/TR'
+import {
+  BeneficiaireWithActivity,
+  getNomBeneficiaireComplet,
+} from 'interfaces/beneficiaire'
 import { toLongMonthDate, toRelativeDateTime } from 'utils/date'
 
-interface TableauBeneficiairesAArchiverProps {
+type TableauBeneficiairesAArchiverProps = {
   beneficiaires: BeneficiaireWithActivity[]
 }
 
@@ -38,10 +37,7 @@ export default function TableauBeneficiairesAArchiver({
           <tbody>
             {beneficiaires.map((beneficiaire: BeneficiaireWithActivity) => (
               <TR key={beneficiaire.id}>
-                <TD
-                  isBold
-                  className='h-full !p-2 !rounded-tl-base !rounded-bl-none layout_m:!rounded-l-base'
-                >
+                <TD isBold>
                   <div>{getNomBeneficiaireComplet(beneficiaire)}</div>
                 </TD>
 
@@ -72,7 +68,7 @@ export default function TableauBeneficiairesAArchiver({
                 </TD>
 
                 <TD>
-                  {beneficiaire.lastActivity && (
+                  {beneficiaire.isActivated && (
                     <>
                       <span
                         className='text-xs-regular text-grey_800'
@@ -85,7 +81,8 @@ export default function TableauBeneficiairesAArchiver({
                       </span>
                     </>
                   )}
-                  {!beneficiaire.lastActivity && (
+
+                  {!beneficiaire.isActivated && (
                     <span className='text-s-regular text-warning'>
                       Compte non activé
                     </span>

diff --git a/components/ui/Navigation/Tab.tsx b/components/ui/Navigation/Tab.tsx
@@ -7,6 +7,7 @@ export interface TabProps {
   controls: string
   selected: boolean
   onSelectTab: () => void
+  important?: boolean
   count?: number
   iconName?: IconName
   ariaLabel?: string
@@ -20,7 +21,10 @@ export default function Tab({
   count,
   iconName,
   ariaLabel,
+  important,
 }: TabProps) {
+  const accentuer = important && count && count > 0
+
   return (
     <li role='presentation'>
       <button
@@ -54,8 +58,8 @@ export default function Tab({
             <span className='sr-only'> </span>
             <Badge
               count={count}
-              textColor='primary'
-              bgColor='primary_lighten'
+              textColor={accentuer ? 'white' : 'primary'}
+              bgColor={accentuer ? 'warning' : 'primary_lighten'}
               style='ml-4'
               size={6}
             />

diff --git a/fixtures/beneficiaire.ts b/fixtures/beneficiaire.ts
@@ -41,6 +41,8 @@ export const unBeneficiaireWithActivity = (
 ): BeneficiaireWithActivity => {
   const defaults: BeneficiaireWithActivity = {
     ...uneBaseBeneficiaire(),
+    isActivated: true,
+    lastActivity: '2021-12-07T17:30:07.756Z',
     estAArchiver: false,
   }
   return { ...defaults, ...overrides }
@@ -114,8 +116,7 @@ export const unItemBeneficiaire = (
   overrides: Partial<BeneficiaireFromListe> = {}
 ): BeneficiaireFromListe => {
   const defaults: BeneficiaireFromListe = {
-    ...unBeneficiaireWithActivity({ lastActivity: '2021-12-07T17:30:07.756Z' }),
-    isActivated: true,
+    ...unBeneficiaireWithActivity(),
     isReaffectationTemporaire: false,
     situationCourante: CategorieSituation.SANS_SITUATION,
   }

diff --git a/interfaces/beneficiaire.ts b/interfaces/beneficiaire.ts
@@ -30,12 +30,12 @@ export type BaseBeneficiaire = {
 
 export type BeneficiaireWithActivity = BaseBeneficiaire & {
   estAArchiver: boolean
+  isActivated: boolean
   lastActivity?: string
   dateFinCEJ?: string
 }
 
 export type BeneficiaireFromListe = BeneficiaireWithActivity & {
-  isActivated: boolean
   isReaffectationTemporaire: boolean
   conseillerPrecedent?: {
     nom: string
@@ -240,8 +240,9 @@ export function extractBeneficiaireWithActivity(
 ): BeneficiaireWithActivity {
   return {
     ...extractBaseBeneficiaire(beneficiaire),
-    estAArchiver: beneficiaire.estAArchiver,
+    isActivated: beneficiaire.isActivated,
     lastActivity: beneficiaire.lastActivity,
     dateFinCEJ: beneficiaire.dateFinCEJ,
+    estAArchiver: beneficiaire.estAArchiver,
   }
 }
diff --git a/tests/pages/CreationBeneficiaireFranceTravailPage.test.tsx b/tests/pages/CreationBeneficiaireFranceTravailPage.test.tsx
@@ -6,7 +6,6 @@ import { useRouter } from 'next/navigation'
 import CreationBeneficiaireFranceTravailPage from 'app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireFranceTravailPage'
 import {
   desItemsBeneficiaires,
-  unBeneficiaireWithActivity,
   uneBaseBeneficiaire,
 } from 'fixtures/beneficiaire'
 import {
@@ -172,7 +171,7 @@ describe('CreationBeneficiaireFranceTravailPage client side', () => {
 
       expect(portefeuilleSetter).toHaveBeenCalledWith([
         ...portefeuille,
-        unBeneficiaireWithActivity(),
+        { ...uneBaseBeneficiaire(), isActivated: false, estAArchiver: false },
       ])
       expect(alerteSetter).toHaveBeenCalledWith(
         'creationBeneficiaire',

diff --git a/tests/pages/CreationBeneficiaireMiloPage.test.tsx b/tests/pages/CreationBeneficiaireMiloPage.test.tsx
@@ -6,7 +6,6 @@ import { useRouter } from 'next/navigation'
 import CreationBeneficiaireMiloPage from 'app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/creation-jeune/CreationBeneficiaireMiloPage'
 import {
   desItemsBeneficiaires,
-  unBeneficiaireWithActivity,
   uneBaseBeneficiaire,
 } from 'fixtures/beneficiaire'
 import { unDossierMilo } from 'fixtures/milo'
@@ -143,7 +142,7 @@ describe('CreationBeneficiaireMiloPage client side', () => {
 
       expect(setPortefeuille).toHaveBeenCalledWith([
         ...portefeuille,
-        unBeneficiaireWithActivity(),
+        { ...uneBaseBeneficiaire(), isActivated: false, estAArchiver: false },
       ])
       expect(setAlerte).toHaveBeenCalledWith(
         'creationBeneficiaire',