From 69455ee4a7ffdb098c1085583a1c3cb16565e6fc Mon Sep 17 00:00:00 2001
From: Arthur L-Brjc <a.lambert-bourjac@octo.com>
Date: Tue, 19 Nov 2024 10:16:53 +0100
Subject: [PATCH] feat: commenter action

---
 .../actions/[idAction]/DetailActionPage.tsx   |   5 +-
 clients/firebase.client.ts                    | 128 ++++++++++++----
 components/Details.tsx                        |  62 ++++++++
 components/action/CommentaireAction.tsx       | 106 ++++++++++++++
 components/action/HistoriqueAction.tsx        |  73 +++------
 components/action/InfoAction.tsx              |   4 +-
 components/chat/Conversation.tsx              |  13 +-
 components/chat/ConversationBeneficiaire.tsx  |   2 +-
 components/chat/DisplayMessageConseiller.tsx  |   8 +
 components/chat/LienAction.tsx                |  26 ++++
 components/chat/LienOffre.tsx                 |   4 +-
 components/chat/MessagesDuJour.tsx            |  14 +-
 components/chat/RechercheMessage.tsx          |   8 +-
 fixtures/message.ts                           |   1 +
 interfaces/message.ts                         |   8 +
 services/messages.service.ts                  | 138 ++++++++++++------
 .../ConversationBeneficiaire.test.tsx         |   7 +-
 tests/components/MessagesDuJour.test.tsx      |   8 +-
 tests/pages/DetailActionPage.test.tsx         | 105 +++++++++++--
 tests/services/messages.service.test.ts       | 126 ++++++++++++----
 20 files changed, 645 insertions(+), 201 deletions(-)
 create mode 100644 components/Details.tsx
 create mode 100644 components/action/CommentaireAction.tsx
 create mode 100644 components/chat/LienAction.tsx

diff --git a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx
index a138df3da..4f6eba3eb 100644
--- a/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx
+++ b/app/(connected)/(with-sidebar)/(with-chat)/mes-jeunes/[idJeune]/actions/[idAction]/DetailActionPage.tsx
@@ -5,7 +5,8 @@ import { DateTime } from 'luxon'
 import { useRouter } from 'next/navigation'
 import React, { useRef, useState } from 'react'
 
-import { HistoriqueAction } from 'components/action/HistoriqueAction'
+import CommentaireAction from 'components/action/CommentaireAction'
+import HistoriqueAction from 'components/action/HistoriqueAction'
 import StatutActionForm from 'components/action/StatutActionForm'
 import Modal, { ModalHandles } from 'components/Modal'
 import PageActionsPortal from 'components/PageActionsPortal'
@@ -242,6 +243,8 @@ function DetailActionPage({
         </dl>
       </div>
 
+      <CommentaireAction action={action} beneficiaire={jeune} />
+
       <HistoriqueAction action={action} />
 
       {showSuppression && (
diff --git a/clients/firebase.client.ts b/clients/firebase.client.ts
index a926160e7..c7e3b8404 100644
--- a/clients/firebase.client.ts
+++ b/clients/firebase.client.ts
@@ -29,7 +29,8 @@ import {
 import { DateTime } from 'luxon'
 
 import { apiGet } from 'clients/api.client'
-import { Chat } from 'interfaces/beneficiaire'
+import { Action } from 'interfaces/action'
+import { BeneficiaireEtChat, Chat } from 'interfaces/beneficiaire'
 import { UserType } from 'interfaces/conseiller'
 import { InfoFichier } from 'interfaces/fichier'
 import {
@@ -51,6 +52,7 @@ type TypeMessageFirebase =
   | 'MESSAGE_EVENEMENT'
   | 'MESSAGE_EVENEMENT_EMPLOI'
   | 'MESSAGE_SESSION_MILO'
+  | 'MESSAGE_ACTION'
   | 'NOUVEAU_CONSEILLER_TEMPORAIRE'
 
 export type FirebaseMessage = {
@@ -63,6 +65,7 @@ export type FirebaseMessage = {
   type: TypeMessageFirebase | undefined
   status?: string
   offre?: InfoOffreFirebase
+  action?: InfoActionFirebase
   evenement?: EvenementPartage
   evenementEmploi?: EvenementEmploi
   sessionMilo?: SessionMilo
@@ -98,6 +101,11 @@ export type InfoOffreFirebase = {
   type?: string
 }
 
+export type InfoActionFirebase = {
+  id: string
+  titre: string
+}
+
 export interface EvenementPartage {
   id: string
   titre: string
@@ -123,7 +131,7 @@ type BaseCreateFirebaseMessage = {
   date: DateTime
 }
 
-type BaseCreateFirebaseMessageImportant = {
+type CreateFirebaseMessageImportant = {
   idConseiller: string
   dateDebut: DateTime
   dateFin: DateTime
@@ -134,10 +142,15 @@ type BaseCreateFirebaseMessageImportant = {
 export type CreateFirebaseMessage = BaseCreateFirebaseMessage & {
   infoPieceJointe?: InfoFichier
 }
-export type CreateFirebaseMessageWithOffre = BaseCreateFirebaseMessage & {
+export type CreateFirebaseMessagePartageOffre = BaseCreateFirebaseMessage & {
   offre: BaseOffre
 }
 
+export type CreateFirebaseMessageCommentaireAction =
+  BaseCreateFirebaseMessage & {
+    action: Action
+  }
+
 type UpdateFirebaseMessage = {
   message: string
   date: DateTime
@@ -186,7 +199,7 @@ export async function addMessage(
 }
 
 export async function addMessageImportant(
-  data: BaseCreateFirebaseMessageImportant
+  data: CreateFirebaseMessageImportant
 ): Promise<string> {
   const firebaseMessage = createFirebaseMessageImportant(data)
 
@@ -359,6 +372,35 @@ export async function getChatsDuConseiller(
   }
 }
 
+export async function getChatDuBeneficiaire(
+  idConseiller: string,
+  idBeneficiaire: string
+): Promise<Chat | undefined> {
+  try {
+    const collectionRef = collection(
+      getDb(),
+      chatCollection
+    ) as CollectionReference<FirebaseChat, FirebaseChat>
+
+    const querySnapshots: QuerySnapshot<FirebaseChat, FirebaseChat> =
+      await getDocs(
+        query<FirebaseChat, FirebaseChat>(
+          collectionRef,
+          where('conseillerId', '==', idConseiller),
+          where('jeuneId', '==', idBeneficiaire)
+        )
+      )
+    if (querySnapshots.empty) return
+
+    const document = querySnapshots.docs[0]
+    return chatFromFirebase(document.id, document.data())
+  } catch (e) {
+    console.error(e)
+    captureError(e as Error)
+    throw e
+  }
+}
+
 export async function getMessagesGroupe(
   idConseiller: string,
   idGroupe: string
@@ -413,22 +455,24 @@ export function observeChat(
 }
 
 export function observeDerniersMessagesDuChat(
-  idChat: string,
+  beneficiaireEtChat: BeneficiaireEtChat,
   nbMessages: number,
   onMessagesAntechronologiques: (messages: Message[]) => void
 ): () => void {
   try {
     return onSnapshot<FirebaseMessage, FirebaseMessage>(
       query<FirebaseMessage, FirebaseMessage>(
-        collection(getChatReference(idChat), 'messages') as CollectionReference<
-          FirebaseMessage,
-          FirebaseMessage
-        >,
+        collection(
+          getChatReference(beneficiaireEtChat.chatId),
+          'messages'
+        ) as CollectionReference<FirebaseMessage, FirebaseMessage>,
         orderBy('creationDate', 'desc'),
         limit(nbMessages)
       ),
       (querySnapshot: QuerySnapshot<FirebaseMessage, FirebaseMessage>) => {
-        const messages: Message[] = querySnapshot.docs.map(docSnapshotToMessage)
+        const messages: Message[] = querySnapshot.docs.map((doc) =>
+          docSnapshotToMessage(doc, beneficiaireEtChat.id)
+        )
         if (messages.length && !messages.at(-1)!.creationDate) {
           return
         }
@@ -443,12 +487,9 @@ export function observeDerniersMessagesDuChat(
   }
 }
 
-export async function getMessageImportantSnapshot(
+export async function findMessageImportant(
   idConseiller: string
-): Promise<
-  | DocumentSnapshot<FirebaseMessageImportant, FirebaseMessageImportant>
-  | undefined
-> {
+): Promise<(FirebaseMessageImportant & { id: string }) | undefined> {
   const collectionRef = collection(
     getDb(),
     messageImportantCollection
@@ -464,7 +505,10 @@ export async function getMessageImportantSnapshot(
     )
   )
 
-  if (querySnapshots.docs.length > 0) return querySnapshots.docs[0]
+  if (!querySnapshots.empty) {
+    const document = querySnapshots.docs[0]
+    return { ...document.data(), id: document.id }
+  }
 }
 
 export async function rechercherMessages(
@@ -497,18 +541,19 @@ export async function rechercherMessages(
             message.creationDate._seconds * 1000
           ),
         },
-        id
+        id,
+        idBeneficiaire
       ),
     }
   })
 }
 
 export async function getMessagesPeriode(
-  idChat: string,
+  beneficiaireEtChat: BeneficiaireEtChat,
   debut: DateTime,
   fin: DateTime
 ): Promise<Message[]> {
-  const chatRef = getChatReference(idChat)
+  const chatRef = getChatReference(beneficiaireEtChat.chatId)
   const querySnapshots: QuerySnapshot<FirebaseMessage, FirebaseMessage> =
     await getDocs(
       query<FirebaseMessage, FirebaseMessage>(
@@ -522,7 +567,9 @@ export async function getMessagesPeriode(
       )
     )
 
-  return querySnapshots.docs.map(docSnapshotToMessage)
+  return querySnapshots.docs.map((doc) =>
+    docSnapshotToMessage(doc, beneficiaireEtChat.id)
+  )
 }
 
 function retrieveApp() {
@@ -560,7 +607,7 @@ async function getGroupeSnapshot(
       )
     )
 
-  if (querySnapshots.docs.length > 0) return querySnapshots.docs[0]
+  if (!querySnapshots.empty) return querySnapshots.docs[0]
 }
 
 async function getChatsSnapshot(
@@ -623,7 +670,10 @@ function getMessageReference(
 }
 
 function createFirebaseMessage(
-  data: CreateFirebaseMessage | CreateFirebaseMessageWithOffre
+  data:
+    | CreateFirebaseMessage
+    | CreateFirebaseMessagePartageOffre
+    | CreateFirebaseMessageCommentaireAction
 ): FirebaseMessage {
   const type: TypeMessage = TypeMessage.MESSAGE
   let { encryptedText, iv } = data.message
@@ -649,26 +699,31 @@ function createFirebaseMessage(
       id,
       titre,
       type: typeOffre,
-    } = (data as CreateFirebaseMessageWithOffre).offre
+    } = (data as CreateFirebaseMessagePartageOffre).offre
     firebaseMessage.offre = { id, titre, type: typeToFirebase(typeOffre) }
   }
 
+  if (Object.prototype.hasOwnProperty.call(data, 'action')) {
+    firebaseMessage.type = TypeMessage.MESSAGE_ACTION
+    const { id, titre } = (data as CreateFirebaseMessageCommentaireAction)
+      .action
+    firebaseMessage.action = { id, titre }
+  }
+
   return firebaseMessage
 }
 
 function createFirebaseMessageImportant(
-  data: BaseCreateFirebaseMessageImportant
+  data: CreateFirebaseMessageImportant
 ): FirebaseMessageImportant {
   let { encryptedText, iv } = data.message
-  const firebaseMessage: FirebaseMessageImportant = {
+  return {
     content: encryptedText,
     iv,
     idConseiller: data.idConseiller,
     dateDebut: toTimestamp(data.dateDebut),
     dateFin: toTimestamp(data.dateFin),
   }
-
-  return firebaseMessage
 }
 
 type FirebaseChat = {
@@ -763,10 +818,15 @@ export function chatToFirebase(chat: Partial<Chat>): Partial<FirebaseChat> {
 }
 
 export function docSnapshotToMessage(
-  docSnapshot: QueryDocumentSnapshot<FirebaseMessage>
+  docSnapshot: QueryDocumentSnapshot<FirebaseMessage>,
+  idBeneficiaire: string
 ): Message {
   const firebaseMessage = docSnapshot.data()
-  return firebaseMessageToMessage(firebaseMessage, docSnapshot.id)
+  return firebaseMessageToMessage(
+    firebaseMessage,
+    docSnapshot.id,
+    idBeneficiaire
+  )
 }
 
 function chatFromFirebase(chatId: string, firebaseChat: FirebaseChat): Chat {
@@ -792,10 +852,12 @@ function chatFromFirebase(chatId: string, firebaseChat: FirebaseChat): Chat {
 
 function firebaseMessageToMessage(
   firebaseMessage: FirebaseMessage,
-  id: string
+  id: string,
+  idBeneficiaire: string
 ): Message {
   const message: Message = {
     id,
+    idBeneficiaire,
     sentBy: firebaseMessage.sentBy,
     content: firebaseMessage.content,
     iv: firebaseMessage.iv,
@@ -813,6 +875,10 @@ function firebaseMessageToMessage(
     message.infoOffre = offreFromFirebase(firebaseMessage.offre)
   }
 
+  if (message.type === TypeMessage.MESSAGE_ACTION && firebaseMessage.action) {
+    message.infoAction = firebaseMessage.action
+  }
+
   if (
     message.type === TypeMessage.MESSAGE_EVENEMENT &&
     firebaseMessage.evenement
@@ -879,6 +945,8 @@ function firebaseToMessageType(
       return TypeMessage.MESSAGE_PJ
     case 'MESSAGE_OFFRE':
       return TypeMessage.MESSAGE_OFFRE
+    case 'MESSAGE_ACTION':
+      return TypeMessage.MESSAGE_ACTION
     case 'MESSAGE_EVENEMENT':
       return TypeMessage.MESSAGE_EVENEMENT
     case 'MESSAGE_EVENEMENT_EMPLOI':
diff --git a/components/Details.tsx b/components/Details.tsx
new file mode 100644
index 000000000..75c0ee28a
--- /dev/null
+++ b/components/Details.tsx
@@ -0,0 +1,62 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+
+import IconComponent, { IconName } from 'components/ui/IconComponent'
+
+interface DetailsProps {
+  summary: string
+  children: ReactNode
+}
+
+function Details(
+  { summary, children }: DetailsProps,
+  ref: ForwardedRef<{ focusSummary: () => void }>
+) {
+  const detailsRef = useRef<HTMLDetailsElement>(null)
+  useImperativeHandle(ref, () => ({
+    focusSummary: () => detailsRef.current!.querySelector('summary')!.focus(),
+  }))
+
+  const [expanded, setExpanded] = useState<boolean>()
+
+  useEffect(() => {
+    function toggleExpanded() {
+      setExpanded(detailsRef.current!.open)
+    }
+
+    const detailsNode = detailsRef.current!
+    detailsNode.addEventListener('toggle', toggleExpanded)
+    return () => detailsNode.removeEventListener('toggle', toggleExpanded)
+  }, [])
+
+  return (
+    <details
+      ref={detailsRef}
+      className='bg-primary_lighten p-6 mt-8 rounded-base shadow-base'
+    >
+      <summary
+        className={`text-m-bold text-primary relative flex justify-between items-center cursor-pointer ${expanded ? 'mb-5' : ''}`}
+        title={`${expanded ? 'Cacher' : 'Voir'} ${summary}`}
+      >
+        {summary}
+        <IconComponent
+          name={expanded ? IconName.ChevronUp : IconName.ChevronDown}
+          className='h-6 w-6 fill-current'
+          focusable={false}
+          aria-hidden={true}
+        />
+      </summary>
+
+      {children}
+    </details>
+  )
+}
+
+export default forwardRef(Details)
diff --git a/components/action/CommentaireAction.tsx b/components/action/CommentaireAction.tsx
new file mode 100644
index 000000000..b604bef5b
--- /dev/null
+++ b/components/action/CommentaireAction.tsx
@@ -0,0 +1,106 @@
+import React, { useRef, useState } from 'react'
+
+import Details from 'components/Details'
+import Button from 'components/ui/Button/Button'
+import { InputError } from 'components/ui/Form/InputError'
+import Textarea from 'components/ui/Form/Textarea'
+import SuccessAlert from 'components/ui/Notifications/SuccessAlert'
+import { ValueWithError } from 'components/ValueWithError'
+import { Action } from 'interfaces/action'
+import { BaseBeneficiaire } from 'interfaces/beneficiaire'
+import { commenterAction as _commenterAction } from 'services/messages.service'
+import { useChatCredentials } from 'utils/chat/chatCredentialsContext'
+
+interface CommentaireActionProps {
+  beneficiaire: BaseBeneficiaire
+  action: Action
+}
+
+export default function CommentaireAction({
+  beneficiaire,
+  action,
+}: CommentaireActionProps) {
+  const chatCredentials = useChatCredentials()
+  const detailsRef = useRef<{ focusSummary: () => void }>(null)
+  const inputRef = useRef<HTMLTextAreaElement>(null)
+
+  const [message, setMessage] = useState<ValueWithError<string | undefined>>({
+    value: undefined,
+  })
+  const [envoiEnCours, setEnvoiEnCours] = useState<boolean>(false)
+  const [succesEnvoi, setSuccesEnvoi] = useState<boolean | undefined>(undefined)
+
+  async function commenterAction() {
+    setSuccesEnvoi(undefined)
+    if (!message.value) {
+      setMessage({
+        ...message,
+        error: 'Veuillez saisir un message à envoyer au bénéficiaire.',
+      })
+      return
+    }
+
+    try {
+      setEnvoiEnCours(true)
+      await _commenterAction({
+        idDestinataire: beneficiaire.id,
+        action,
+        message: message.value,
+        cleChiffrement: chatCredentials!.cleChiffrement,
+      })
+      setSuccesEnvoi(true)
+      inputRef.current!.value = ''
+    } catch {
+      setSuccesEnvoi(false)
+    } finally {
+      setEnvoiEnCours(false)
+    }
+  }
+
+  return (
+    <Details summary='Commentaire' ref={detailsRef}>
+      {succesEnvoi && (
+        <SuccessAlert
+          label='Votre message a bien été envoyé, retrouvez le dans votre conversation avec le bénéficiaire.'
+          onAcknowledge={() => {
+            setSuccesEnvoi(undefined)
+            detailsRef.current!.focusSummary()
+          }}
+        />
+      )}
+
+      <label htmlFor='commentaire-action' className='text-s-regular mb-3'>
+        Demander plus d’information au bénéficiaire sur l’action
+      </label>
+      {message.error && (
+        <InputError id='commentaire-action--error' ref={(e) => e?.focus()}>
+          {message.error}
+        </InputError>
+      )}
+      <Textarea
+        ref={inputRef}
+        id='commentaire-action'
+        onChange={(value) => setMessage({ value })}
+        invalid={Boolean(message.error)}
+        required
+      />
+
+      {succesEnvoi === false && (
+        <InputError id='envoi-button--error' ref={(e) => e?.focus()}>
+          Erreur lors de l’envoi du message, veuillez réessayer plus tard.
+        </InputError>
+      )}
+
+      <Button
+        type='button'
+        className='block ml-auto'
+        onClick={commenterAction}
+        isLoading={envoiEnCours}
+        describedBy={succesEnvoi === false ? 'envoi-button--error' : undefined}
+        disabled={!message.value}
+      >
+        Envoyer au bénéficiaire
+      </Button>
+    </Details>
+  )
+}
diff --git a/components/action/HistoriqueAction.tsx b/components/action/HistoriqueAction.tsx
index c3f656884..eb6bee7e5 100644
--- a/components/action/HistoriqueAction.tsx
+++ b/components/action/HistoriqueAction.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import InfoAction from 'components/action/InfoAction'
-import IconComponent, { IconName } from 'components/ui/IconComponent'
+import Details from 'components/Details'
 import { Action } from 'interfaces/action'
 import { toShortDate } from 'utils/date'
 
@@ -9,61 +9,28 @@ interface HistoriqueActionProps {
   action: Action
 }
 
-export function HistoriqueAction({ action }: HistoriqueActionProps) {
-  const [expanded, setExpanded] = useState<boolean>(false)
-
+export default function HistoriqueAction({ action }: HistoriqueActionProps) {
   const lastUpdate = toShortDate(action.lastUpdate)
   const creationDate = toShortDate(action.creationDate)
 
   return (
-    <div className='bg-primary_lighten p-6 mt-8 rounded-base shadow-base'>
-      <div
-        className={`relative flex justify-between cursor-pointer ${
-          expanded ? 'mb-5' : ''
-        }`}
-      >
-        <h2 className='text-m-bold text-primary'>Historique</h2>
-        <button
-          type='button'
-          onClick={() => setExpanded(!expanded)}
-          aria-controls='historique-action'
-          aria-expanded={expanded}
-          className='p-2 hover:bg-white hover:rounded-l before:absolute before:inset-0 before:z-10'
-        >
-          <IconComponent
-            name={expanded ? IconName.ChevronUp : IconName.ChevronDown}
-            title={`${expanded ? 'Cacher' : 'Voir'} l’historique`}
-            className='h-6 w-6 fill-primary'
-            focusable={false}
-            aria-hidden={true}
-          />
-          <span className='sr-only'>
-            {expanded ? 'Cacher' : 'Voir'} l’historique
-          </span>
-        </button>
+    <Details summary='Historique'>
+      <div className='bg-white border border-solid border-grey_100 rounded-base p-4 mb-8'>
+        <h3 className='text-m-bold text-grey_800 mb-6 mt-2'>
+          Historique de l’action
+        </h3>
+        <dl className='grid grid-cols-[auto_1fr] grid-rows-[repeat(4,_auto)]'>
+          <InfoAction label="Créateur de l'action" isInline={true}>
+            {action.creator}
+          </InfoAction>
+          <InfoAction label='Date de création' isInline={true}>
+            {creationDate}
+          </InfoAction>
+          <InfoAction label='Date d’actualisation' isInline={true}>
+            {lastUpdate}
+          </InfoAction>
+        </dl>
       </div>
-
-      {expanded && (
-        <div
-          id='historique-action'
-          className='bg-white border border-solid border-grey_100 rounded-base p-4 mb-8'
-        >
-          <h2 className='text-m-bold text-grey_800 mb-6 mt-2'>
-            Historique de l’action
-          </h2>
-          <dl className='grid grid-cols-[auto_1fr] grid-rows-[repeat(4,_auto)]'>
-            <InfoAction label="Créateur de l'action" isInline={true}>
-              {action.creator}
-            </InfoAction>
-            <InfoAction label='Date de création' isInline={true}>
-              {creationDate}
-            </InfoAction>
-            <InfoAction label='Date d’actualisation' isInline={true}>
-              {lastUpdate}
-            </InfoAction>
-          </dl>
-        </div>
-      )}
-    </div>
+    </Details>
   )
 }
diff --git a/components/action/InfoAction.tsx b/components/action/InfoAction.tsx
index a0bc2475a..7fd93fed9 100644
--- a/components/action/InfoAction.tsx
+++ b/components/action/InfoAction.tsx
@@ -7,7 +7,7 @@ interface InfoActionProps {
   isInline?: boolean
 }
 
-function InfoAction({
+export default function InfoAction({
   label,
   children,
   isForm = false,
@@ -47,5 +47,3 @@ function InfoAction({
     </>
   )
 }
-
-export default InfoAction
diff --git a/components/chat/Conversation.tsx b/components/chat/Conversation.tsx
index c1efa45d4..f45786d8f 100644
--- a/components/chat/Conversation.tsx
+++ b/components/chat/Conversation.tsx
@@ -108,11 +108,11 @@ export function Conversation({
   const pjErrorRef = useRef<HTMLDivElement | null>(null)
 
   const observerMessages = useCallback(
-    (idChatToObserve: string, nombreDePages: number) => {
+    (beneficiaireEtChat: BeneficiaireEtChat, nombreDePages: number) => {
       if (!chatCredentials) return () => {}
 
       return observeDerniersMessages(
-        idChatToObserve,
+        beneficiaireEtChat,
         chatCredentials.cleChiffrement,
         { pages: nombreDePages, taillePage: NB_MESSAGES_PAR_PAGE },
         (messagesGroupesParJour: ByDay<Message>) => {
@@ -125,7 +125,7 @@ export function Conversation({
           setLoadingMoreMessages(false)
 
           if (document.activeElement === inputRef.current) {
-            setReadByConseiller(idChatToObserve)
+            setReadByConseiller(beneficiaireEtChat.chatId)
           }
         }
       )
@@ -176,7 +176,7 @@ export function Conversation({
 
     unsubscribeFromMessages.current()
     unsubscribeFromMessages.current = observerMessages(
-      beneficiaireChat.chatId,
+      beneficiaireChat,
       pageSuivante
     )
   }
@@ -295,10 +295,7 @@ export function Conversation({
   }
 
   useEffect(() => {
-    unsubscribeFromMessages.current = observerMessages(
-      beneficiaireChat.chatId,
-      1
-    )
+    unsubscribeFromMessages.current = observerMessages(beneficiaireChat, 1)
     setReadByConseiller(beneficiaireChat.chatId)
 
     return unsubscribeFromMessages.current
diff --git a/components/chat/ConversationBeneficiaire.tsx b/components/chat/ConversationBeneficiaire.tsx
index 355fa2891..17320c2a2 100644
--- a/components/chat/ConversationBeneficiaire.tsx
+++ b/components/chat/ConversationBeneficiaire.tsx
@@ -51,7 +51,7 @@ export default function ConversationBeneficiaire({
         <RechercheMessage
           beneficiaireNomComplet={beneficiaireNomComplet}
           getConseillerNomComplet={getConseillerNomComplet}
-          beneficiaireChat={beneficiaireChat}
+          beneficiaireEtChat={beneficiaireChat}
           toggleAfficherRecherche={() => setAfficherRecherche(false)}
         />
       )}
diff --git a/components/chat/DisplayMessageConseiller.tsx b/components/chat/DisplayMessageConseiller.tsx
index c5e68843e..d297e007d 100644
--- a/components/chat/DisplayMessageConseiller.tsx
+++ b/components/chat/DisplayMessageConseiller.tsx
@@ -1,6 +1,7 @@
 import { DateTime } from 'luxon'
 import React, { useState } from 'react'
 
+import LienAction from 'components/chat/LienAction'
 import LienEvenement from 'components/chat/LienEvenement'
 import LienEvenementEmploi from 'components/chat/LienEvenementEmploi'
 import LienOffre from 'components/chat/LienOffre'
@@ -141,6 +142,13 @@ function MessageConseiller(props: DisplayMessageConseillerProps) {
         <LienOffre infoOffre={message.infoOffre} isSentByConseiller={true} />
       )}
 
+      {message.type === TypeMessage.MESSAGE_ACTION && message.infoAction && (
+        <LienAction
+          infoAction={message.infoAction}
+          idBeneficiaire={message.idBeneficiaire}
+        />
+      )}
+
       {message.type === TypeMessage.MESSAGE_SESSION_MILO &&
         message.infoSessionImilo && (
           <LienSessionMilo infoSessionMilo={message.infoSessionImilo} />
diff --git a/components/chat/LienAction.tsx b/components/chat/LienAction.tsx
new file mode 100644
index 000000000..844cdd9a8
--- /dev/null
+++ b/components/chat/LienAction.tsx
@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import React from 'react'
+
+import { InfoAction, InfoOffre } from 'interfaces/message'
+import { TypeOffre } from 'interfaces/offre'
+
+export default function LienAction({
+  infoAction,
+  idBeneficiaire,
+}: {
+  infoAction: InfoAction
+  idBeneficiaire: string
+}) {
+  return (
+    <div className='mt-4 p-4 rounded-base bg-primary_darken'>
+      <p className='text-base-bold text-white'>{infoAction.titre}</p>
+
+      <Link
+        href={`/mes-jeunes/${idBeneficiaire}/actions/${infoAction.id}`}
+        className='mt-4 w-max ml-auto text-s-regular underline text-white hover:text-primary_lighten'
+      >
+        Voir l’action<span className='sr-only'> {infoAction.titre}</span>
+      </Link>
+    </div>
+  )
+}
diff --git a/components/chat/LienOffre.tsx b/components/chat/LienOffre.tsx
index e5afddff1..f2536c564 100644
--- a/components/chat/LienOffre.tsx
+++ b/components/chat/LienOffre.tsx
@@ -27,13 +27,13 @@ export default function LienOffre({
 
       <Link
         href={`/offres/${typeToUrlParam(infoOffre.type)}/${infoOffre.id}`}
-        className={`mt-4 w-max ml-auto text-s-regular underline ${
+        className={`mt-4 w-max ml-auto text-s-regular ${
           isSentByConseiller
             ? 'text-white underline hover:text-primary_lighten'
             : 'text-primary_darken hover:text-primary'
         }`}
       >
-        Voir l’offre <span className='sr-only'>{infoOffre.titre}</span>
+        Voir l’offre<span className='sr-only'> {infoOffre.titre}</span>
       </Link>
     </div>
   )
diff --git a/components/chat/MessagesDuJour.tsx b/components/chat/MessagesDuJour.tsx
index be055af8f..12e6374c2 100644
--- a/components/chat/MessagesDuJour.tsx
+++ b/components/chat/MessagesDuJour.tsx
@@ -3,7 +3,7 @@ import React, { FormEvent, Fragment, useEffect, useRef, useState } from 'react'
 import DisplayMessageBeneficiaire from 'components/chat/DisplayMessageBeneficiaire'
 import DisplayMessageConseiller from 'components/chat/DisplayMessageConseiller'
 import IconComponent, { IconName } from 'components/ui/IconComponent'
-import { Chat } from 'interfaces/beneficiaire'
+import { BeneficiaireEtChat } from 'interfaces/beneficiaire'
 import { fromConseiller, Message } from 'interfaces/message'
 import {
   getMessagesDuMemeJour,
@@ -17,13 +17,13 @@ import { toLongMonthDate, toShortDate } from 'utils/date'
 import { getPreviousItemId } from 'utils/helpers'
 
 export default function MessagesDuJour({
-  conversation,
+  beneficiaireEtChat,
   messageSelectionne,
   beneficiaireNomComplet,
   idConseiller,
   getConseillerNomComplet,
 }: {
-  conversation: Chat
+  beneficiaireEtChat: BeneficiaireEtChat
   messageSelectionne: Message
   beneficiaireNomComplet: string
   idConseiller: string
@@ -47,7 +47,7 @@ export default function MessagesDuJour({
     if (!messageAModifier || !userInput) return
 
     const messageModifie = await _modifierMessage(
-      conversation.chatId,
+      beneficiaireEtChat.chatId,
       messageAModifier,
       userInput,
       chatCredentials!.cleChiffrement
@@ -75,7 +75,7 @@ export default function MessagesDuJour({
       messagesDuJour
     )
     const messageSupprime = await _supprimerMessage(
-      conversation.chatId,
+      beneficiaireEtChat.chatId,
       messageASupprimer,
       chatCredentials!.cleChiffrement
     )
@@ -108,7 +108,7 @@ export default function MessagesDuJour({
     if (!chatCredentials) return
 
     getMessagesDuMemeJour(
-      conversation.chatId,
+      beneficiaireEtChat,
       messageSelectionne,
       chatCredentials.cleChiffrement
     ).then(setMessagesDuJour)
@@ -161,7 +161,7 @@ export default function MessagesDuJour({
                 conseillerNomComplet={getConseillerNomComplet(message)}
                 isConseillerCourant={message.conseillerId === idConseiller}
                 isEnCoursDeModification={false}
-                lastSeenByJeune={conversation.lastJeuneReading}
+                lastSeenByJeune={beneficiaireEtChat.lastJeuneReading}
                 onSuppression={() => supprimerMessage(message)}
                 onModification={() => setMessageAModifier(message)}
               />
diff --git a/components/chat/RechercheMessage.tsx b/components/chat/RechercheMessage.tsx
index cf9104f8e..d07041543 100644
--- a/components/chat/RechercheMessage.tsx
+++ b/components/chat/RechercheMessage.tsx
@@ -30,13 +30,13 @@ import { useConseiller } from 'utils/conseiller/conseillerContext'
 type RechercheMessageProps = {
   beneficiaireNomComplet: string
   getConseillerNomComplet: (message: Message) => string | undefined
-  beneficiaireChat: BeneficiaireEtChat
+  beneficiaireEtChat: BeneficiaireEtChat
   toggleAfficherRecherche: () => void
 }
 export function RechercheMessage({
   beneficiaireNomComplet,
   getConseillerNomComplet,
-  beneficiaireChat,
+  beneficiaireEtChat,
   toggleAfficherRecherche,
 }: RechercheMessageProps) {
   const [conseiller] = useConseiller()
@@ -58,7 +58,7 @@ export function RechercheMessage({
 
       {messageSelectionne && (
         <MessagesDuJour
-          conversation={beneficiaireChat}
+          beneficiaireEtChat={beneficiaireEtChat}
           messageSelectionne={messageSelectionne}
           beneficiaireNomComplet={beneficiaireNomComplet}
           getConseillerNomComplet={getConseillerNomComplet}
@@ -70,7 +70,7 @@ export function RechercheMessage({
         <>
           <RechercheMessageForm
             ref={!resultatsRecherche ? (e) => e?.focus() : undefined}
-            idJeuneChat={beneficiaireChat.id}
+            idJeuneChat={beneficiaireEtChat.id}
             onResultat={setResultatsRecherche}
           />
 
diff --git a/fixtures/message.ts b/fixtures/message.ts
index d67c6bd5d..170306dd4 100644
--- a/fixtures/message.ts
+++ b/fixtures/message.ts
@@ -11,6 +11,7 @@ import { TypeOffre } from 'interfaces/offre'
 export const unMessage = (args: Partial<Message> = {}): Message => {
   const defaults: Message = {
     id: 'idMessage',
+    idBeneficiaire: 'idBeneficiaire',
     content: 'content',
     creationDate: DateTime.now(),
     sentBy: 'conseiller',
diff --git a/interfaces/message.ts b/interfaces/message.ts
index 4737eee5a..166c5e43a 100644
--- a/interfaces/message.ts
+++ b/interfaces/message.ts
@@ -9,6 +9,7 @@ export enum TypeMessage {
   MESSAGE = 'MESSAGE',
   MESSAGE_PJ = 'MESSAGE_PJ',
   MESSAGE_OFFRE = 'MESSAGE_OFFRE',
+  MESSAGE_ACTION = 'MESSAGE_ACTION',
   MESSAGE_EVENEMENT = 'MESSAGE_EVENEMENT',
   MESSAGE_EVENEMENT_EMPLOI = 'MESSAGE_EVENEMENT_EMPLOI',
   MESSAGE_SESSION_MILO = 'MESSAGE_SESSION_MILO',
@@ -21,10 +22,12 @@ export interface Message {
   sentBy: string
   iv: string | undefined
   conseillerId: string | undefined
+  idBeneficiaire: string
   type: TypeMessage
   status?: string
   infoPiecesJointes?: InfoFichier[]
   infoOffre?: InfoOffre
+  infoAction?: InfoAction
   infoEvenement?: InfoEvenement
   infoEvenementEmploi?: InfoEvenementEmploi
   infoSessionImilo?: InfoSessionMilo
@@ -66,6 +69,11 @@ export interface InfoOffre {
   type: TypeOffre
 }
 
+export interface InfoAction {
+  id: string
+  titre: string
+}
+
 export interface InfoEvenement {
   id: string
   titre: string
diff --git a/services/messages.service.ts b/services/messages.service.ts
index fa3f359b9..50221f889 100644
--- a/services/messages.service.ts
+++ b/services/messages.service.ts
@@ -7,12 +7,13 @@ import {
   addMessage,
   addMessageImportant,
   CreateFirebaseMessage,
-  CreateFirebaseMessageWithOffre,
+  CreateFirebaseMessageCommentaireAction,
+  CreateFirebaseMessagePartageOffre,
   deleteMessageImportant,
   findAndObserveChatsDuConseiller,
   getChatsDuConseiller,
   getIdLastMessage,
-  getMessageImportantSnapshot,
+  findMessageImportant,
   getMessagesGroupe,
   getMessagesPeriode,
   observeChat,
@@ -22,7 +23,9 @@ import {
   signOut as _signOut,
   updateChat,
   updateMessage,
+  getChatDuBeneficiaire,
 } from 'clients/firebase.client'
+import { Action } from 'interfaces/action'
 import {
   BaseBeneficiaire,
   BeneficiaireEtChat,
@@ -65,13 +68,20 @@ export type FormNouveauMessageGroupe = FormNouveauMessage & {
   idsListesDeDiffusion: string[]
 }
 
-type FormPartageOffre = {
+type PartageOffre = {
   offre: BaseOffre
   idsDestinataires: string[]
   cleChiffrement: string
   message: string
 }
 
+type PartageAction = {
+  action: Action
+  idDestinataire: string
+  cleChiffrement: string
+  message: string
+}
+
 export type MessageImportantPreRempli = {
   id: string
   dateDebut: string
@@ -79,7 +89,7 @@ export type MessageImportantPreRempli = {
   message: string
 }
 
-type MessageType =
+type MessageTypeEvenement =
   | 'MESSAGE_ENVOYE'
   | 'MESSAGE_ENVOYE_PJ'
   | 'MESSAGE_ENVOYE_MULTIPLE'
@@ -89,6 +99,7 @@ type MessageType =
   | 'MESSAGE_SUPPRIME'
   | 'MESSAGE_IMPORTANT_MODIFIE'
   | 'MESSAGE_IMPORTANT_SUPPRIME'
+  | 'MESSAGE_ACTION_COMMENTEE'
 
 export async function getChatCredentials(): Promise<ChatCredentials> {
   const session = await getSession()
@@ -160,13 +171,13 @@ export async function observeConseillerChats(
 }
 
 export function observeDerniersMessages(
-  idChat: string,
+  beneficiaireEtChat: BeneficiaireEtChat,
   cleChiffrement: string,
   { pages, taillePage }: { pages: number; taillePage: number },
   onMessagesGroupesParJour: (messagesGroupesParJour: ByDay<Message>) => void
 ): () => void {
   return observeDerniersMessagesDuChat(
-    idChat,
+    beneficiaireEtChat,
     pages * taillePage,
     (messagesAntechronologiques: Message[]) => {
       const messagesGroupesParJour: ByDay<Message> = grouperMessagesParJour(
@@ -235,25 +246,21 @@ export async function getMessageImportant(
   cleChiffrement: string
 ): Promise<MessageImportantPreRempli | undefined> {
   const session = await getSession()
-  const snapshot = await getMessageImportantSnapshot(session!.user.id)
-  if (!snapshot) return
-
-  const messageImportant = snapshot.data()
+  const messageImportant = await findMessageImportant(session!.user.id)
+  if (!messageImportant) return
 
-  if (messageImportant) {
-    const contenu = decrypt(
-      { encryptedText: messageImportant.content, iv: messageImportant.iv },
-      cleChiffrement
-    )
-    const dateFin = DateTime.fromMillis(
-      messageImportant.dateFin.toMillis()
-    ).toISODate()
-    const dateDebut = DateTime.fromMillis(
-      messageImportant.dateDebut.toMillis()
-    ).toISODate()
-
-    return { message: contenu, dateDebut, dateFin, id: snapshot.id }
-  }
+  const contenu = decrypt(
+    { encryptedText: messageImportant.content, iv: messageImportant.iv },
+    cleChiffrement
+  )
+  const dateFin = DateTime.fromMillis(
+    messageImportant.dateFin.toMillis()
+  ).toISODate()
+  const dateDebut = DateTime.fromMillis(
+    messageImportant.dateDebut.toMillis()
+  ).toISODate()
+
+  return { message: contenu, dateDebut, dateFin, id: messageImportant.id }
 }
 
 export async function countMessagesNotRead(
@@ -272,14 +279,14 @@ export async function countMessagesNotRead(
 }
 
 export async function getMessagesDuMemeJour(
-  idChat: string,
+  beneficiaireEtChat: BeneficiaireEtChat,
   messageSource: Message,
   cleChiffrement: string
 ): Promise<Message[]> {
   const debut = messageSource.creationDate.startOf('day')
   const fin = messageSource.creationDate.endOf('day')
 
-  const messages = await getMessagesPeriode(idChat, debut, fin)
+  const messages = await getMessagesPeriode(beneficiaireEtChat, debut, fin)
   return messages.map((message) => {
     if (!message.iv) return message
     return {
@@ -312,7 +319,7 @@ export async function sendNouveauMessage({
     date: now,
   }
 
-  let type: MessageType = 'MESSAGE_ENVOYE'
+  let type: MessageTypeEvenement = 'MESSAGE_ENVOYE'
   if (infoPieceJointe) {
     nouveauMessage.infoPieceJointe = {
       ...infoPieceJointe,
@@ -434,24 +441,37 @@ export async function partagerOffre({
   idsDestinataires,
   message,
   offre,
-}: FormPartageOffre) {
+}: PartageOffre) {
   const session = await getSession()
   const now = DateTime.now()
   const encryptedMessage = encrypt(message, cleChiffrement)
-  const nouveauMessage: CreateFirebaseMessageWithOffre = {
+  const nouveauMessage: CreateFirebaseMessagePartageOffre = {
     idConseiller: session!.user.id,
     message: encryptedMessage,
     offre: offre,
     date: now,
   }
 
-  await envoyerPartageOffre(
-    idsDestinataires,
-    nouveauMessage,
-    'MESSAGE_OFFRE_PARTAGEE',
-    session!,
-    now
-  )
+  await envoyerPartageOffre(idsDestinataires, nouveauMessage, session!)
+}
+
+export async function commenterAction({
+  cleChiffrement,
+  idDestinataire,
+  message,
+  action,
+}: PartageAction): Promise<void> {
+  const session = await getSession()
+  const now = DateTime.now()
+  const encryptedMessage = encrypt(message, cleChiffrement)
+  const nouveauMessage: CreateFirebaseMessageCommentaireAction = {
+    idConseiller: session!.user.id,
+    message: encryptedMessage,
+    action,
+    date: now,
+  }
+
+  await envoyerCommentaireAction(idDestinataire, nouveauMessage, session!)
 }
 
 export async function modifierMessage(
@@ -520,10 +540,8 @@ export async function supprimerMessage(
 
 async function envoyerPartageOffre(
   idsDestinataires: string[],
-  nouveauMessage: CreateFirebaseMessageWithOffre,
-  type: MessageType,
-  session: Session,
-  date: DateTime
+  nouveauMessage: CreateFirebaseMessagePartageOffre,
+  session: Session
 ) {
   const chats = await getChatsDuConseiller(session.user.id)
   const chatsDestinataires = Object.entries(chats)
@@ -537,7 +555,7 @@ async function envoyerPartageOffre(
         updateChat(chat.chatId, {
           lastMessageContent: nouveauMessage.message.encryptedText,
           lastMessageIv: nouveauMessage.message.iv,
-          lastMessageSentAt: date,
+          lastMessageSentAt: nouveauMessage.date,
           lastMessageSentBy: UserType.CONSEILLER.toLowerCase(),
           newConseillerMessageCount: chat.newConseillerMessageCount + 1,
         }),
@@ -552,7 +570,7 @@ async function envoyerPartageOffre(
       session.accessToken
     ),
     evenementMessage(
-      type,
+      'MESSAGE_OFFRE_PARTAGEE',
       session.user.structure,
       session.user.id,
       session.accessToken
@@ -560,6 +578,40 @@ async function envoyerPartageOffre(
   ])
 }
 
+async function envoyerCommentaireAction(
+  idDestinataire: string,
+  nouveauMessage: CreateFirebaseMessageCommentaireAction,
+  session: Session
+) {
+  const chat = await getChatDuBeneficiaire(session.user.id, idDestinataire)
+  if (!chat) throw new Error('Conversation non trouvée')
+
+  await Promise.all([
+    addMessage(chat.chatId, nouveauMessage),
+    updateChat(chat.chatId, {
+      lastMessageContent: nouveauMessage.message.encryptedText,
+      lastMessageIv: nouveauMessage.message.iv,
+      lastMessageSentAt: nouveauMessage.date,
+      lastMessageSentBy: UserType.CONSEILLER.toLowerCase(),
+      newConseillerMessageCount: chat.newConseillerMessageCount + 1,
+    }),
+  ])
+
+  await Promise.all([
+    notifierNouveauMessage(
+      session!.user.id,
+      [idDestinataire],
+      session!.accessToken
+    ),
+    evenementMessage(
+      'MESSAGE_ACTION_COMMENTEE',
+      session!.user.structure,
+      session!.user.id,
+      session!.accessToken
+    ),
+  ])
+}
+
 async function notifierNouveauMessage(
   idConseiller: string,
   idsJeunes: string[],
@@ -573,7 +625,7 @@ async function notifierNouveauMessage(
 }
 
 async function evenementMessage(
-  type: MessageType,
+  type: MessageTypeEvenement,
   structure: string,
   idConseiller: string,
   accessToken: string
diff --git a/tests/components/ConversationBeneficiaire.test.tsx b/tests/components/ConversationBeneficiaire.test.tsx
index bb27f73ac..558a2e005 100644
--- a/tests/components/ConversationBeneficiaire.test.tsx
+++ b/tests/components/ConversationBeneficiaire.test.tsx
@@ -33,14 +33,13 @@ jest.mock('services/messages.service')
 jest.mock('services/fichiers.service')
 
 describe('<ConversationBeneficiaire />', () => {
-  let beneficiaireChat: BeneficiaireEtChat
+  const beneficiaireChat = unBeneficiaireChat()
 
   let conseillersBeneficiaires: ConseillerHistorique[]
   let rerender: (children: ReactElement) => void
   const messagesParJour = desMessagesParJour()
   let unsubscribe: () => void
   beforeEach(async () => {
-    beneficiaireChat = unBeneficiaireChat()
     conseillersBeneficiaires = desConseillersBeneficiaire()
     unsubscribe = jest.fn()
     ;(getChatCredentials as jest.Mock).mockResolvedValue({
@@ -89,7 +88,7 @@ describe('<ConversationBeneficiaire />', () => {
   it('s’abonne au message de la conversation', async () => {
     // Then
     expect(observeDerniersMessages).toHaveBeenCalledWith(
-      beneficiaireChat.chatId,
+      beneficiaireChat,
       'cleChiffrement',
       { pages: 1, taillePage: 10 },
       expect.any(Function)
@@ -107,7 +106,7 @@ describe('<ConversationBeneficiaire />', () => {
     // Then
     expect(unsubscribe).toHaveBeenCalledTimes(1)
     expect(observeDerniersMessages).toHaveBeenCalledWith(
-      beneficiaireChat.chatId,
+      beneficiaireChat,
       'cleChiffrement',
       { pages: 2, taillePage: 10 },
       expect.any(Function)
diff --git a/tests/components/MessagesDuJour.test.tsx b/tests/components/MessagesDuJour.test.tsx
index 0eb3bc28a..a634fbce1 100644
--- a/tests/components/MessagesDuJour.test.tsx
+++ b/tests/components/MessagesDuJour.test.tsx
@@ -4,7 +4,7 @@ import { DateTime } from 'luxon'
 import React from 'react'
 
 import MessagesDuJour from 'components/chat/MessagesDuJour'
-import { unChat } from 'fixtures/beneficiaire'
+import { unBeneficiaireChat, unChat } from 'fixtures/beneficiaire'
 import { unMessage } from 'fixtures/message'
 import { Message } from 'interfaces/message'
 import {
@@ -17,7 +17,7 @@ import renderWithContexts from 'tests/renderWithContexts'
 jest.mock('services/messages.service')
 
 describe('<MessagesDuJour />', () => {
-  const conversation = unChat()
+  const conversation = unBeneficiaireChat()
   const messageSelectionne = unMessage({
     id: 'message-selectionne',
     creationDate: DateTime.fromISO('2023-04-12T05:21'),
@@ -33,7 +33,7 @@ describe('<MessagesDuJour />', () => {
     await act(async () => {
       renderWithContexts(
         <MessagesDuJour
-          conversation={conversation}
+          beneficiaireEtChat={conversation}
           messageSelectionne={messageSelectionne}
           beneficiaireNomComplet='Kenji Jirac'
           idConseiller='id-conseiller'
@@ -47,7 +47,7 @@ describe('<MessagesDuJour />', () => {
     // Then
     expect(getMessagesDuMemeJour).toHaveBeenCalledTimes(1)
     expect(getMessagesDuMemeJour).toHaveBeenCalledWith(
-      conversation.chatId,
+      conversation,
       messageSelectionne,
       'cleChiffrement'
     )
diff --git a/tests/pages/DetailActionPage.test.tsx b/tests/pages/DetailActionPage.test.tsx
index 3a7626935..46301525c 100644
--- a/tests/pages/DetailActionPage.test.tsx
+++ b/tests/pages/DetailActionPage.test.tsx
@@ -1,4 +1,4 @@
-import { act, screen, waitFor } from '@testing-library/react'
+import { act, fireEvent, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { AxeResults } from 'axe-core'
 import { axe } from 'jest-axe'
@@ -12,10 +12,12 @@ import { BaseBeneficiaire } from 'interfaces/beneficiaire'
 import { StructureConseiller } from 'interfaces/conseiller'
 import { AlerteParam } from 'referentiel/alerteParam'
 import { deleteAction, modifierAction } from 'services/actions.service'
+import { commenterAction } from 'services/messages.service'
 import getByDescriptionTerm from 'tests/querySelector'
 import renderWithContexts from 'tests/renderWithContexts'
 
 jest.mock('services/actions.service')
+jest.mock('services/messages.service')
 jest.mock('components/PageActionsPortal')
 
 describe('ActionPage client side', () => {
@@ -36,7 +38,7 @@ describe('ActionPage client side', () => {
     ;(modifierAction as jest.Mock).mockImplementation(
       async (_, statut) => statut
     )
-    ;(deleteAction as jest.Mock).mockResolvedValue({})
+    ;(deleteAction as jest.Mock).mockResolvedValue(undefined)
     ;(useRouter as jest.Mock).mockReturnValue({
       push: routerPush,
     })
@@ -73,7 +75,9 @@ describe('ActionPage client side', () => {
       )
 
       await userEvent.click(
-        screen.getByRole('button', { name: 'Voir l’historique' })
+        Array.from(container.querySelectorAll('details summary')).find((el) =>
+          /Historique/.test(el.textContent!)
+        )!
       )
       expect(getByDescriptionTerm('Date de création :')).toHaveTextContent(
         '15/02/2022'
@@ -126,6 +130,83 @@ describe('ActionPage client side', () => {
         expect(screen.getByText('Date de réalisation :')).toBeInTheDocument()
       })
     })
+
+    describe('Partage action', () => {
+      let group: HTMLDetailsElement
+      let boutonVoir: HTMLElement
+      beforeEach(async () => {
+        group = Array.from(container.querySelectorAll('details')).find((el) =>
+          /Commentaire/.test(el.textContent!)
+        ) as HTMLDetailsElement
+
+        boutonVoir = group.querySelector('summary') as HTMLElement
+      })
+
+      it('est caché par défaut', async () => {
+        // Then
+        expect(group).not.toHaveAttribute('open')
+      })
+
+      describe('quand on ouvre l’accordéon', () => {
+        beforeEach(async () => {
+          // When
+          await userEvent.click(boutonVoir)
+        })
+
+        it('demande la saisi d’un message', async () => {
+          expect(
+            within(group).getByRole('button', {
+              name: 'Envoyer au bénéficiaire',
+            })
+          ).toHaveAttribute('disabled')
+        })
+
+        it('envoie un message', async () => {
+          //
+          expect(group).toHaveAttribute('open')
+
+          // Given
+          const pouet = within(group).getByRole('textbox', {
+            name: 'Demander plus d’information au bénéficiaire sur l’action',
+          })
+          // FIXME pourquoi ça marche pas avec userEvent.click ? 🤨
+          fireEvent.change(pouet, {
+            target: {
+              value: 'Peux tu me détailler quelles recherches tu as fait stp ?',
+            },
+          })
+
+          // When
+          await userEvent.click(
+            within(group).getByRole('button', {
+              name: 'Envoyer au bénéficiaire',
+            })
+          )
+
+          // Then
+          expect(commenterAction).toHaveBeenCalledWith({
+            cleChiffrement: 'cleChiffrement',
+            idDestinataire: jeune.id,
+            message: 'Peux tu me détailler quelles recherches tu as fait stp ?',
+            action,
+          })
+          expect(document.activeElement).toHaveTextContent(
+            'Votre message a bien été envoyé, retrouvez le dans votre conversation avec le bénéficiaire.'
+          )
+        })
+
+        it('a11y', async () => {
+          // When
+          let results: AxeResults
+
+          await act(async () => {
+            results = await axe(container)
+          })
+
+          expect(results!).toHaveNoViolations()
+        })
+      })
+    })
   })
 
   describe("quand le conseiller n'est pas le conseiller du jeune", () => {
@@ -315,6 +396,12 @@ describe('ActionPage client side', () => {
   })
 
   describe("quand l'action qualifiée", () => {
+    const jeune: BaseBeneficiaire & { idConseiller: string } = {
+      id: 'beneficiaire-1',
+      prenom: 'Nadia',
+      nom: 'Sanfamiye',
+      idConseiller: 'id-conseiller',
+    }
     describe('qualifiée en SNP', () => {
       //Given
       const actionAQualifier = uneAction({
@@ -325,12 +412,6 @@ describe('ActionPage client side', () => {
           isSituationNonProfessionnelle: true,
         },
       })
-      const jeune: BaseBeneficiaire & { idConseiller: string } = {
-        id: 'beneficiaire-1',
-        prenom: 'Nadia',
-        nom: 'Sanfamiye',
-        idConseiller: 'id-conseiller',
-      }
 
       //When
       beforeEach(async () => {
@@ -382,12 +463,6 @@ describe('ActionPage client side', () => {
           isSituationNonProfessionnelle: false,
         },
       })
-      const jeune: BaseBeneficiaire & { idConseiller: string } = {
-        id: 'beneficiaire-1',
-        prenom: 'Nadia',
-        nom: 'Sanfamiye',
-        idConseiller: 'id-conseiller',
-      }
 
       //When
       beforeEach(async () => {
diff --git a/tests/services/messages.service.test.ts b/tests/services/messages.service.test.ts
index 96f81140a..a4f483121 100644
--- a/tests/services/messages.service.test.ts
+++ b/tests/services/messages.service.test.ts
@@ -1,4 +1,4 @@
-import { DocumentSnapshot, Timestamp } from 'firebase/firestore'
+import { Timestamp } from 'firebase/firestore'
 import { DateTime } from 'luxon'
 
 import { apiPost } from 'clients/api.client'
@@ -7,10 +7,11 @@ import {
   addMessageImportant,
   deleteMessageImportant,
   findAndObserveChatsDuConseiller,
+  findMessageImportant,
   FirebaseMessageImportant,
+  getChatDuBeneficiaire,
   getChatsDuConseiller,
   getIdLastMessage,
-  getMessageImportantSnapshot,
   getMessagesGroupe,
   getMessagesPeriode,
   observeChat,
@@ -21,11 +22,12 @@ import {
   updateChat,
   updateMessage,
 } from 'clients/firebase.client'
+import { uneAction } from 'fixtures/action'
 import {
   desItemsBeneficiaires,
+  unBeneficiaireChat,
   unChat,
   uneBaseBeneficiaire,
-  unBeneficiaireChat,
 } from 'fixtures/beneficiaire'
 import {
   desMessagesAntechronologiques,
@@ -36,23 +38,24 @@ import {
 } from 'fixtures/message'
 import { unDetailOffreEmploi } from 'fixtures/offre'
 import {
-  Chat,
   BeneficiaireEtChat,
   BeneficiaireFromListe,
+  Chat,
 } from 'interfaces/beneficiaire'
 import { ByDay, Message } from 'interfaces/message'
 import { DetailOffreEmploi } from 'interfaces/offre'
 import {
+  commenterAction,
   countMessagesNotRead,
   desactiverMessageImportant,
   getMessageImportant,
+  getMessagesDuMemeJour,
   getMessagesListeDeDiffusion,
   modifierMessage,
   observeConseillerChats,
   observeDerniersMessages,
   observeJeuneReadingDate,
   partagerOffre,
-  getMessagesDuMemeJour,
   rechercherMessagesConversation,
   sendNouveauMessage,
   sendNouveauMessageGroupe,
@@ -205,7 +208,7 @@ describe('MessagesFirebaseAndApiService', () => {
   describe('.observeDerniersMessages', () => {
     const beneficiaireEtChat = unBeneficiaireChat()
     let onMessagesAntechronologiques: (
-      messagesGroupesParJour: ByDay<Message>[]
+      messagesGroupesParJour: ByDay<Message>
     ) => void
     beforeEach(async () => {
       // Given
@@ -543,23 +546,18 @@ describe('MessagesFirebaseAndApiService', () => {
   describe('.getMessageImportant', () => {
     it('récupère le messsage important depuis firebase', async () => {
       //Given
-      const messageSnapshot: DocumentSnapshot<
-        FirebaseMessageImportant,
-        FirebaseMessageImportant
-      > = {
+      const messageSnapshot: FirebaseMessageImportant & { id: string } = {
         id: 'document-id',
-        data: () => ({
-          idConseiller: 'idConseiller',
-          iv: 'iv-message',
-          content: 'contenu-message',
-          dateDebut: Timestamp.fromMillis(
-            DateTime.fromISO('2024-04-25').toMillis()
-          ),
-          dateFin: Timestamp.fromMillis(
-            DateTime.fromISO('2024-04-26').toMillis()
-          ),
-        }),
-      } as DocumentSnapshot<FirebaseMessageImportant, FirebaseMessageImportant>
+        idConseiller: 'idConseiller',
+        iv: 'iv-message',
+        content: 'contenu-message',
+        dateDebut: Timestamp.fromMillis(
+          DateTime.fromISO('2024-04-25').toMillis()
+        ),
+        dateFin: Timestamp.fromMillis(
+          DateTime.fromISO('2024-04-26').toMillis()
+        ),
+      }
 
       const expectedMessage = {
         id: 'document-id',
@@ -568,15 +566,13 @@ describe('MessagesFirebaseAndApiService', () => {
         dateFin: '2024-04-26',
       }
 
-      ;(getMessageImportantSnapshot as jest.Mock).mockResolvedValue(
-        messageSnapshot
-      )
+      ;(findMessageImportant as jest.Mock).mockResolvedValue(messageSnapshot)
 
       //When
       const message = await getMessageImportant('cleChiffrement')
 
       //Then
-      expect(getMessageImportantSnapshot).toHaveBeenCalledWith('idConseiller')
+      expect(findMessageImportant).toHaveBeenCalledWith('idConseiller')
       expect(message).toEqual(expectedMessage)
     })
   })
@@ -673,6 +669,84 @@ describe('MessagesFirebaseAndApiService', () => {
     })
   })
 
+  describe('.envoyerCommentaireAction', () => {
+    const chat = unChat()
+    const newMessage =
+      'Peux-tu me détailler quelles recherches tu as faites stp ?'
+    const action = uneAction()
+    const now = DateTime.now()
+    beforeEach(async () => {
+      // Given
+      jest.spyOn(DateTime, 'now').mockReturnValue(now)
+      ;(getChatDuBeneficiaire as jest.Mock).mockResolvedValue(chat)
+
+      await commenterAction({
+        action,
+        idDestinataire: 'idBeneficiaire',
+        message: newMessage,
+        cleChiffrement,
+      })
+    })
+
+    it('récupère le chat du bénéficiaire avec son conseiller', () => {
+      // Then
+      expect(getChatDuBeneficiaire).toHaveBeenCalledWith(
+        'idConseiller',
+        'idBeneficiaire'
+      )
+    })
+
+    it('ajoute un nouveau message à firebase', () => {
+      // Then
+
+      expect(addMessage).toHaveBeenCalledWith(chat.chatId, {
+        action,
+        idConseiller: 'idConseiller',
+        message: {
+          encryptedText: `Encrypted: ${newMessage}`,
+          iv: `IV: ${newMessage}`,
+        },
+        date: now,
+      })
+    })
+
+    it('met à jour le chat dans firebase', () => {
+      // Then
+      expect(updateChat).toHaveBeenCalledWith(chat.chatId, {
+        lastMessageContent: `Encrypted: ${newMessage}`,
+        lastMessageIv: `IV: ${newMessage}`,
+        lastMessageSentAt: now,
+        lastMessageSentBy: 'conseiller',
+        newConseillerMessageCount: chat.newConseillerMessageCount + 1,
+      })
+    })
+
+    it('notifie envoi de message', () => {
+      // Then
+      expect(apiPost).toHaveBeenCalledWith(
+        `/conseillers/idConseiller/jeunes/notify-messages`,
+        { idsJeunes: ['idBeneficiaire'] },
+        accessToken
+      )
+    })
+
+    it('tracks partage d’offre', () => {
+      // Then
+      expect(apiPost).toHaveBeenCalledWith(
+        '/evenements',
+        {
+          type: 'MESSAGE_ACTION_COMMENTEE',
+          emetteur: {
+            type: 'CONSEILLER',
+            structure: 'MILO',
+            id: 'idConseiller',
+          },
+        },
+        accessToken
+      )
+    })
+  })
+
   describe('.supprimerMessage', () => {
     const beneficiaireChat = unBeneficiaireChat()
     const message = unMessage()