From a1ea44c1f8f95b114f88464f6ec916579f51e756 Mon Sep 17 00:00:00 2001
From: dlamande <contact@dorianlamande.com>
Date: Fri, 19 Jan 2024 10:24:43 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20le=20clique=20sur=20une=20recommandatio?=
 =?UTF-8?q?n=20personnalis=C3=A9e=20peut=20=C3=AAtre=20un=20objectif=20de?=
 =?UTF-8?q?=20mission=20(#265)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: octo-guic <guillaume.chauvet@octo.com>
---
 src/App.vue                                   |  1 -
 src/components/Coach.vue                      |  2 +-
 .../CoachCardRecommandationHighlight.vue      | 29 +++++----
 .../custom/Coach/CoachCardRecommandations.vue | 31 +++++----
 src/components/custom/Coach/CoachCardToDo.vue | 13 +---
 src/components/custom/Coach/CoachToDo.vue     |  1 +
 src/components/custom/PageQuizComposant.vue   |  1 -
 src/components/custom/ScoreHeader.vue         |  8 +++
 src/components/pages/PageArticle.vue          | 15 ++---
 src/components/pages/PageQuiz.vue             |  5 +-
 src/composables/interactionAEteCliquee.ts     | 13 ----
 ...ndationsPersonnalisees.repository.axios.ts |  7 +++
 ...ecommandationsPersonnalisees.repository.ts |  1 +
 ...andationPersonnaliseAEteCliquee.usecase.ts | 15 +++++
 src/router/index.ts                           | 12 ++++
 src/shell/interactionType.ts                  |  1 +
 src/store/interaction.ts                      | 28 ---------
 .../adapters/toDoList.presenter.impl.ts       |  6 +-
 src/toDoList/toDoListEventBusImpl.ts          |  2 +
 ...andationsPersonnalisees.repository.mock.ts | 50 +++++++++++++++
 ...mandationsPersonnalisees.repository.spy.ts | 19 ++++++
 ...onPersonnaliseeAEteCliquee.usecase.spec.ts | 24 +++++++
 ...ommandationsPersonnalisees.usecase.spec.ts | 49 +--------------
 .../adapters/mockToDoListRepository.ts        | 23 +++++--
 .../recupererToDoList.usecase.spec.ts         | 63 ++++++++++++-------
 tests/toDoList/spyTodoListEventBus.ts         |  1 +
 26 files changed, 253 insertions(+), 167 deletions(-)
 delete mode 100644 src/composables/interactionAEteCliquee.ts
 create mode 100644 src/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase.ts
 delete mode 100644 src/store/interaction.ts
 create mode 100644 tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.mock.ts
 create mode 100644 tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.spy.ts
 create mode 100644 tests/recommandationsPersonnalisees/recommandationPersonnaliseeAEteCliquee.usecase.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 1be1cbc26..2eafee3d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,6 @@
   const appName = 'Agir ! -';
   router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
     const { title, estPublique } = to.meta;
-    window.scrollTo(0, 0);
 
     if (title) {
       document.title = `${appName} ${title as string}`;
diff --git a/src/components/Coach.vue b/src/components/Coach.vue
index 16ce1b1d7..219ac2d2b 100644
--- a/src/components/Coach.vue
+++ b/src/components/Coach.vue
@@ -38,7 +38,7 @@
       },
     }"
   >
-    <div class="fr-container" v-if="!isLoading">
+    <div id="recommandations" class="fr-container" v-if="!isLoading">
       <CoachRecommandations
         v-if="recommandationsPersonnaliseesViewModel"
         :recommandations="recommandationsPersonnaliseesViewModel"
diff --git a/src/components/custom/Coach/CoachCardRecommandationHighlight.vue b/src/components/custom/Coach/CoachCardRecommandationHighlight.vue
index a0b507423..fb056820e 100644
--- a/src/components/custom/Coach/CoachCardRecommandationHighlight.vue
+++ b/src/components/custom/Coach/CoachCardRecommandationHighlight.vue
@@ -4,18 +4,18 @@
       <div class="fr-col-4">
         <div
           class="card-recommandation-highlight__image"
-          :style="`background-image: url('${props.recommandation.image}')`"
+          :style="`background-image: url('${recommandation.image}')`"
           aria-hidden="true"
         ></div>
       </div>
       <div class="fr-col-8">
         <span class="fr-text--bold">L'article à lire !</span>
-        <h3 class="fr-h4 text--gris-dark">{{ props.recommandation.titre }}</h3>
-        <p>{{ props.recommandation.description }}</p>
+        <h3 class="fr-h4 text--gris-dark">{{ recommandation.titre }}</h3>
+        <p>{{ recommandation.description }}</p>
         <router-link
-          :to="props.recommandation.url"
+          @click="recommandationAEteCliquee"
+          :to="recommandation.url"
           class="card-recommandation-highlight__link fr-link"
-          @click="interactionAEteCliquee"
         >
           Continuer la lecture
         </router-link>
@@ -26,17 +26,22 @@
 
 <script setup lang="ts">
   import { RecommandationViewModel } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl';
-  import { useInteraction } from '@/composables/interactionAEteCliquee';
+  import { RecommandationPersonnaliseAEteCliqueeUsecase } from '@/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase';
+  import { RecommandationsPersonnaliseesRepositoryAxios } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios';
+  import { ToDoListEventBusImpl } from '@/toDoList/toDoListEventBusImpl';
+  import { utilisateurStore } from '@/store/utilisateur';
 
-  const props = defineProps<{
+  defineProps<{
     recommandation: RecommandationViewModel;
   }>();
 
-  const { interactionAEteCliquee } = useInteraction({
-    type: props.recommandation.type,
-    nombreDePointsAGagner: props.recommandation.nombreDePointsAGagner,
-    idDuContenu: props.recommandation.contentId,
-  });
+  const recommandationAEteCliquee = () => {
+    const recommandationPersonnaliseAEteCliqueeUsecase = new RecommandationPersonnaliseAEteCliqueeUsecase(
+      new RecommandationsPersonnaliseesRepositoryAxios(),
+      ToDoListEventBusImpl.getInstance()
+    );
+    recommandationPersonnaliseAEteCliqueeUsecase.execute(utilisateurStore().utilisateur.id);
+  };
 </script>
 
 <style scoped>
diff --git a/src/components/custom/Coach/CoachCardRecommandations.vue b/src/components/custom/Coach/CoachCardRecommandations.vue
index a8e17ebdb..b2f50c75a 100644
--- a/src/components/custom/Coach/CoachCardRecommandations.vue
+++ b/src/components/custom/Coach/CoachCardRecommandations.vue
@@ -1,36 +1,41 @@
 <template>
   <div class="card-recommandation shadow">
     <div class="fr-p-3w">
-      <span class="fr-text--bold fr-text--xs text--black">{{ props.recommandation.thematique }}</span>
+      <span class="fr-text--bold fr-text--xs text--black">{{ recommandation.thematique }}</span>
       <h3 class="card-recommandation__titre fr-text--xl fr-mb-0 text--gris-dark">
         <router-link
-          :to="props.recommandation.url"
+          :to="recommandation.url"
           class="card-recommandation__link"
-          :title="props.recommandation.titre"
-          @click="interactionAEteCliquee"
+          :title="recommandation.titre"
+          @click="recommandationAEteCliquee"
         >
-          {{ props.recommandation.titre }}
+          {{ recommandation.titre }}
         </router-link>
       </h3>
     </div>
-    <img :src="props.recommandation.image" alt="" class="card-recommandation__image" />
+    <img :src="recommandation.image" alt="" class="card-recommandation__image" />
     <span class="fr-icon-arrow-right-line card-recommandation__picto text--bleu shadow" aria-hidden="true"></span>
   </div>
 </template>
 
 <script setup lang="ts">
   import { RecommandationViewModel } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl';
-  import { useInteraction } from '@/composables/interactionAEteCliquee';
+  import { RecommandationPersonnaliseAEteCliqueeUsecase } from '@/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase';
+  import { RecommandationsPersonnaliseesRepositoryAxios } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios';
+  import { ToDoListEventBusImpl } from '@/toDoList/toDoListEventBusImpl';
+  import { utilisateurStore } from '@/store/utilisateur';
 
-  const props = defineProps<{
+  defineProps<{
     recommandation: RecommandationViewModel;
   }>();
 
-  const { interactionAEteCliquee } = useInteraction({
-    type: props.recommandation.type,
-    nombreDePointsAGagner: props.recommandation.nombreDePointsAGagner,
-    idDuContenu: props.recommandation.contentId,
-  });
+  const recommandationAEteCliquee = () => {
+    const recommandationPersonnaliseAEteCliqueeUsecase = new RecommandationPersonnaliseAEteCliqueeUsecase(
+      new RecommandationsPersonnaliseesRepositoryAxios(),
+      ToDoListEventBusImpl.getInstance()
+    );
+    recommandationPersonnaliseAEteCliqueeUsecase.execute(utilisateurStore().utilisateur.id);
+  };
 </script>
 
 <style scoped>
diff --git a/src/components/custom/Coach/CoachCardToDo.vue b/src/components/custom/Coach/CoachCardToDo.vue
index 5e085f28a..0e63efc4f 100644
--- a/src/components/custom/Coach/CoachCardToDo.vue
+++ b/src/components/custom/Coach/CoachCardToDo.vue
@@ -4,8 +4,7 @@
     <div class="fr-col fr-col-md-9">
       <h4 class="fr-m-0">
         <router-link
-          :to="{ path: url }"
-          @click="interactionAEteCliquee"
+          :to="{ path: url, hash: hash }"
           class="todo__link display-block fr-text--bold fr-text--lg text--bleu fr-mb-0"
         >
           {{ titre }}
@@ -26,9 +25,8 @@
 
 <script setup lang="ts">
   import CoachCardTodoProgression from '@/components/custom/Coach/CoachCardTodoProgression.vue';
-  import { useInteraction } from '@/composables/interactionAEteCliquee';
 
-  const props = defineProps<{
+  defineProps<{
     type: string;
     idDuContenu: string;
     nombreDePointsAGagner: number;
@@ -36,13 +34,8 @@
     value: number;
     valueMax: number;
     url: string;
+    hash?: string;
   }>();
-
-  const { interactionAEteCliquee } = useInteraction({
-    type: props.type,
-    idDuContenu: props.idDuContenu,
-    nombreDePointsAGagner: props.nombreDePointsAGagner.toString(),
-  });
 </script>
 
 <style scoped>
diff --git a/src/components/custom/Coach/CoachToDo.vue b/src/components/custom/Coach/CoachToDo.vue
index 79ef33006..597b2b89e 100644
--- a/src/components/custom/Coach/CoachToDo.vue
+++ b/src/components/custom/Coach/CoachToDo.vue
@@ -30,6 +30,7 @@
               :value="todo.progession.etapeCourante"
               :value-max="todo.progession.etapeTotal"
               :url="todo.url"
+              :hash="todo.hash"
             />
           </li>
         </ul>
diff --git a/src/components/custom/PageQuizComposant.vue b/src/components/custom/PageQuizComposant.vue
index 7851acb94..9b70618ea 100644
--- a/src/components/custom/PageQuizComposant.vue
+++ b/src/components/custom/PageQuizComposant.vue
@@ -27,7 +27,6 @@
 
   defineProps<{
     quizViewModel: QuizViewModel;
-    nombreDePointsAGagner: string;
     idUtilisateur: string;
     isModePrevisualisation: boolean;
     idQuiz: string;
diff --git a/src/components/custom/ScoreHeader.vue b/src/components/custom/ScoreHeader.vue
index 904b49d89..1140c857e 100644
--- a/src/components/custom/ScoreHeader.vue
+++ b/src/components/custom/ScoreHeader.vue
@@ -126,6 +126,13 @@
     ToDoListEventBusImpl.getInstance().subscribe(subscriberName, ToDoListEvent.TODO_KYC_A_ETE_REPONDU, () => {
       mettreAJourLeScore();
     });
+    ToDoListEventBusImpl.getInstance().subscribe(
+      subscriberName,
+      ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE,
+      () => {
+        mettreAJourLeScore();
+      }
+    );
   });
 
   onUnmounted(() => {
@@ -134,6 +141,7 @@
     ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_A_ETE_TERMINEE);
     ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_QUIZ_ETE_TERMINE);
     ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_KYC_A_ETE_REPONDU);
+    ToDoListEventBusImpl.getInstance().unsubscribe(subscriberName, ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE);
   });
 </script>
 
diff --git a/src/components/pages/PageArticle.vue b/src/components/pages/PageArticle.vue
index 42c705238..541cc6d51 100644
--- a/src/components/pages/PageArticle.vue
+++ b/src/components/pages/PageArticle.vue
@@ -6,14 +6,12 @@
   import { useRoute, useRouter } from 'vue-router';
   import { onMounted, ref } from 'vue';
   import { utilisateurStore } from '@/store/utilisateur';
-  import { interactionEnCoursStore } from '@/store/interaction';
   import { Article, RecupererArticleUsecase } from '@/article/recupererArticle.usecase';
   import { ArticleRepositoryAxios } from '@/article/adapters/article.repository.axios';
   import { PasserUnArticleCommeLuUsecase } from '@/article/passerUnArticleCommeLu.usecase';
   import { ToDoListEventBusImpl } from '@/toDoList/toDoListEventBusImpl';
   import { RouteCommuneName } from '@/router';
 
-  const store = interactionEnCoursStore();
   const router = useRouter();
 
   const articleAAfficher = ref<Article>({
@@ -25,18 +23,17 @@
 
   onMounted(async () => {
     const route = useRoute();
-    const idArticle = route.params.id ? route.params.id.toString() : store.interactionEnCours!.idDuContenu;
+    const idArticle = route.params.id.toString();
+
     const articleRepositoryAxios = new ArticleRepositoryAxios();
     new RecupererArticleUsecase(articleRepositoryAxios)
       .execute(idArticle)
       .then(async article => {
         articleAAfficher.value = article;
-        if (!route.params.id) {
-          await new PasserUnArticleCommeLuUsecase(articleRepositoryAxios, ToDoListEventBusImpl.getInstance()).execute(
-            idArticle,
-            utilisateurStore().utilisateur.id
-          );
-        }
+        await new PasserUnArticleCommeLuUsecase(articleRepositoryAxios, ToDoListEventBusImpl.getInstance()).execute(
+          idArticle,
+          utilisateurStore().utilisateur.id
+        );
       })
       .catch(async () => {
         await router.push({ name: RouteCommuneName.NOT_FOUND });
diff --git a/src/components/pages/PageQuiz.vue b/src/components/pages/PageQuiz.vue
index aa95b30c3..0f9291096 100644
--- a/src/components/pages/PageQuiz.vue
+++ b/src/components/pages/PageQuiz.vue
@@ -1,10 +1,9 @@
 <template>
   <div v-if="isLoading">Chargement...</div>
-  <div v-else-if="!quizViewModel || !interactionEnCours">Une erreur est survenue</div>
+  <div v-else-if="!quizViewModel">Une erreur est survenue</div>
   <PageQuizComposant
     v-else
     :quiz-view-model="quizViewModel"
-    :nombreDePointsAGagner="interactionEnCours ? interactionEnCours.nombreDePointsAGagner : '0'"
     :id-utilisateur="store.utilisateur.id"
     :is-mode-previsualisation="false"
     :id-quiz="idQuiz"
@@ -18,13 +17,11 @@
   import { ChargementQuizUsecase } from '@/quiz/chargementQuiz.usecase';
   import { ChargementQuizPresenterImpl, QuizViewModel } from '@/quiz/adapters/chargementQuiz.presenter.impl';
   import { utilisateurStore } from '@/store/utilisateur';
-  import { interactionEnCoursStore } from '@/store/interaction';
   import PageQuizComposant from '@/components/custom/PageQuizComposant.vue';
   import { QuizRepositoryAxios } from '@/quiz/adapters/quizRepository.axios';
 
   const quizViewModel = ref<QuizViewModel>();
   const store = utilisateurStore();
-  const interactionEnCours = interactionEnCoursStore().interactionEnCours;
   const route = useRoute();
   const isLoading = ref<boolean>(false);
   const idQuiz = route.params.id.toString();
diff --git a/src/composables/interactionAEteCliquee.ts b/src/composables/interactionAEteCliquee.ts
deleted file mode 100644
index aa3e15696..000000000
--- a/src/composables/interactionAEteCliquee.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { interactionEnCoursStore } from '@/store/interaction';
-
-export function useInteraction(interaction: { type: string; nombreDePointsAGagner: string; idDuContenu: string }) {
-  function interactionAEteCliquee(): void {
-    interactionEnCoursStore().setInteractionEnCours({
-      type: interaction.type,
-      nombreDePointsAGagner: interaction.nombreDePointsAGagner,
-      idDuContenu: interaction.idDuContenu,
-    });
-  }
-
-  return { interactionAEteCliquee };
-}
diff --git a/src/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts b/src/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts
index 81bb82a52..8ad1c10c5 100644
--- a/src/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts
+++ b/src/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts
@@ -2,6 +2,7 @@ import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPerson
 import { RecommandationPersonnalisee } from '@/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase';
 import { AxiosFactory, intercept401 } from '@/axios.factory';
 import { InteractionType } from '@/shell/interactionType';
+import axios from 'redaxios';
 
 interface InteractionApiModel {
   type: string;
@@ -14,6 +15,12 @@ interface InteractionApiModel {
   content_id: string;
 }
 export class RecommandationsPersonnaliseesRepositoryAxios implements RecommandationsPersonnaliseesRepository {
+  @intercept401()
+  async recommandationAEteCliquee(idUtilisateur: string): Promise<void> {
+    await axios.post(`/utilisateurs/${idUtilisateur}/events`, {
+      type: 'reco_clickée',
+    });
+  }
   @intercept401()
   async chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]> {
     const axiosInstance = AxiosFactory.getAxios();
diff --git a/src/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository.ts b/src/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository.ts
index 5bcb43951..1d79e9584 100644
--- a/src/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository.ts
+++ b/src/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository.ts
@@ -2,4 +2,5 @@ import { RecommandationPersonnalisee } from '@/recommandationsPersonnalisees/rec
 
 export interface RecommandationsPersonnaliseesRepository {
   chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]>;
+  recommandationAEteCliquee(idUtilisateur: string): Promise<void>;
 }
diff --git a/src/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase.ts b/src/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase.ts
new file mode 100644
index 000000000..9ea64bab9
--- /dev/null
+++ b/src/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase.ts
@@ -0,0 +1,15 @@
+import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
+import { EventBus } from '@/shell/eventBus';
+import { ToDoListEvent } from '@/toDoList/toDoListEventBusImpl';
+
+export class RecommandationPersonnaliseAEteCliqueeUsecase {
+  constructor(
+    private readonly recommandationsPersonnaliseesRepository: RecommandationsPersonnaliseesRepository,
+    private readonly todoListEventBus: EventBus<ToDoListEvent>
+  ) {}
+
+  async execute(idUtilisateur: string): Promise<void> {
+    await this.recommandationsPersonnaliseesRepository.recommandationAEteCliquee(idUtilisateur);
+    this.todoListEventBus.publish(ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE);
+  }
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index d1f518169..76f604a06 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -100,6 +100,18 @@ const routes: RouteRecordRaw[] = [
 const router = createRouter({
   history: createWebHistory(),
   routes,
+  scrollBehavior: (to, from, savedPosition) => {
+    if (to.hash) {
+      return {
+        el: to.hash,
+        behavior: 'smooth',
+      };
+    } else if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { left: 0, top: 0 };
+    }
+  },
 });
 
 export default router;
diff --git a/src/shell/interactionType.ts b/src/shell/interactionType.ts
index ef68f8262..e0ada0156 100644
--- a/src/shell/interactionType.ts
+++ b/src/shell/interactionType.ts
@@ -6,4 +6,5 @@ export enum InteractionType {
   AIDE = 'aide',
   COMPTE = 'profile',
   SERVICE = 'service',
+  RECOMMANDATION = 'recommandations',
 }
diff --git a/src/store/interaction.ts b/src/store/interaction.ts
deleted file mode 100644
index 10ec3ac31..000000000
--- a/src/store/interaction.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineStore } from 'pinia';
-
-export interface InteractionEnCours {
-  nombreDePointsAGagner: string;
-  type: string;
-  idDuContenu: string;
-}
-interface State {
-  interactionEnCours: InteractionEnCours | null;
-}
-
-export const interactionEnCoursStore = defineStore('interaction', {
-  state: (): State => ({
-    interactionEnCours: null,
-  }),
-  actions: {
-    setInteractionEnCours(interaction: InteractionEnCours) {
-      this.interactionEnCours = interaction;
-    },
-
-    reset() {
-      this.$reset();
-    },
-  },
-  persist: {
-    storage: localStorage,
-  },
-});
diff --git a/src/toDoList/adapters/toDoList.presenter.impl.ts b/src/toDoList/adapters/toDoList.presenter.impl.ts
index 568ce642d..7238896f5 100644
--- a/src/toDoList/adapters/toDoList.presenter.impl.ts
+++ b/src/toDoList/adapters/toDoList.presenter.impl.ts
@@ -15,6 +15,7 @@ interface TodoViewModel {
   type: string;
   thematique: string;
   pointAEteRecolte: boolean;
+  hash?: string;
 }
 
 export interface TodoListViewModel {
@@ -52,6 +53,7 @@ export class ToDoListPresenterImpl implements ToDoListPresenter {
       type: todo.type,
       thematique: todo.thematique,
       pointAEteRecolte: todo.pointAEteRecolte,
+      hash: todo.type === InteractionType.RECOMMANDATION ? '#recommandations' : undefined,
     };
   }
 
@@ -62,7 +64,7 @@ export class ToDoListPresenterImpl implements ToDoListPresenter {
       case InteractionType.QUIZ:
         return `/agir/quiz/${todo.contentId}`;
       case InteractionType.ARTICLE:
-        return `/article/${todo.titre}`;
+        return `/article/${todo.titre}/${todo.contentId}`;
       case InteractionType.KYC:
         return `/kyc/${todo.contentId}`;
       case InteractionType.SUIVIDUJOUR:
@@ -71,6 +73,8 @@ export class ToDoListPresenterImpl implements ToDoListPresenter {
         return '/mon-compte';
       case InteractionType.SERVICE:
         return '/agir/services';
+      case InteractionType.RECOMMANDATION:
+        return '/agir';
       default:
         return '';
     }
diff --git a/src/toDoList/toDoListEventBusImpl.ts b/src/toDoList/toDoListEventBusImpl.ts
index 4b2b58641..682e3a1a3 100644
--- a/src/toDoList/toDoListEventBusImpl.ts
+++ b/src/toDoList/toDoListEventBusImpl.ts
@@ -6,6 +6,7 @@ export enum ToDoListEvent {
   TODO_A_ETE_TERMINEE,
   TODO_QUIZ_ETE_TERMINE,
   TODO_KYC_A_ETE_REPONDU,
+  TODO_RECOMMANDATION_A_ETE_CLIQUEE,
 }
 
 export class ToDoListEventBusImpl extends EventBus<ToDoListEvent> {
@@ -17,6 +18,7 @@ export class ToDoListEventBusImpl extends EventBus<ToDoListEvent> {
     [ToDoListEvent.TODO_A_ETE_TERMINEE]: [],
     [ToDoListEvent.TODO_QUIZ_ETE_TERMINE]: [],
     [ToDoListEvent.TODO_KYC_A_ETE_REPONDU]: [],
+    [ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE]: [],
   };
   private constructor() {
     super();
diff --git a/tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.mock.ts b/tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.mock.ts
new file mode 100644
index 000000000..7437f0272
--- /dev/null
+++ b/tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.mock.ts
@@ -0,0 +1,50 @@
+import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
+import { RecommandationPersonnalisee } from '@/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase';
+import { InteractionType } from '@/shell/interactionType';
+
+export class MockRecommandationsPersonnaliseesRepository implements RecommandationsPersonnaliseesRepository {
+  recommandationAEteCliquee(idUtilisateur: string): Promise<void> {
+    throw new Error('Method not implemented.');
+  }
+
+  chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]> {
+    return Promise.resolve([
+      {
+        type: InteractionType.QUIZ,
+        titre: 'Premier Quiz',
+        sousTitre: 'sousTitre',
+        categorie: '🚲 Transports',
+        nombreDePointsAGagner: 'nombreDePointsAGagner',
+        illustrationURL: 'illustrationURL',
+        idDuContenu: '2',
+      },
+      {
+        type: InteractionType.ARTICLE,
+        titre: 'Article qui doit être en avant',
+        sousTitre: 'sousTitre',
+        categorie: '🌍 Global',
+        nombreDePointsAGagner: 'nombreDePointsAGagner',
+        illustrationURL: 'illustrationURL',
+        idDuContenu: '2',
+      },
+      {
+        type: InteractionType.QUIZ,
+        titre: 'Un autre Quiz',
+        sousTitre: 'sousTitre',
+        categorie: '🌍 Global',
+        nombreDePointsAGagner: 'nombreDePointsAGagner',
+        illustrationURL: 'illustrationURL',
+        idDuContenu: '1',
+      },
+      {
+        type: InteractionType.ARTICLE,
+        titre: 'un autre article',
+        sousTitre: 'sousTitre',
+        categorie: '🌍 Global',
+        nombreDePointsAGagner: 'nombreDePointsAGagner',
+        illustrationURL: 'illustrationURL',
+        idDuContenu: '1',
+      },
+    ]);
+  }
+}
diff --git a/tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.spy.ts b/tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.spy.ts
new file mode 100644
index 000000000..2b1ec8eda
--- /dev/null
+++ b/tests/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.spy.ts
@@ -0,0 +1,19 @@
+import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
+import { RecommandationPersonnalisee } from '@/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase';
+
+export class SpyRecommandationsPersonnaliseesRepository implements RecommandationsPersonnaliseesRepository {
+  get recommandationAEteCliqueeAEteAppelee(): boolean {
+    return this._recommandationAEteCliqueeAEteAppelee;
+  }
+
+  private _recommandationAEteCliqueeAEteAppelee: boolean = false;
+
+  chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]> {
+    throw new Error('Method not implemented.');
+  }
+
+  recommandationAEteCliquee(idUtilisateur: string): Promise<void> {
+    this._recommandationAEteCliqueeAEteAppelee = true;
+    return Promise.resolve();
+  }
+}
diff --git a/tests/recommandationsPersonnalisees/recommandationPersonnaliseeAEteCliquee.usecase.spec.ts b/tests/recommandationsPersonnalisees/recommandationPersonnaliseeAEteCliquee.usecase.spec.ts
new file mode 100644
index 000000000..c05677075
--- /dev/null
+++ b/tests/recommandationsPersonnalisees/recommandationPersonnaliseeAEteCliquee.usecase.spec.ts
@@ -0,0 +1,24 @@
+import { RecommandationPersonnaliseAEteCliqueeUsecase } from '@/recommandationsPersonnalisees/recommandationPersonnaliseAEteCliquee.usecase';
+import { SpyToDoListEventBus } from '../toDoList/spyTodoListEventBus';
+import { expect } from 'vitest';
+import { ToDoListEvent } from '@/toDoList/toDoListEventBusImpl';
+import { SpyRecommandationsPersonnaliseesRepository } from './adapters/recommandationsPersonnalisees.repository.spy';
+
+describe('Fichier de tests concernant le clique sur les recommandations personnalisées', () => {
+  it("Lors d'un clique sur une recommandation personnalisée on doit prevenir le back qu'une recommandation a été cliquée, et emettre un evenement pour dire qu'un recommandation a été cliquée  et donc refraichir le score", async () => {
+    // GIVEN
+    const spyRecommandationsPersonnaliseesRepository = new SpyRecommandationsPersonnaliseesRepository();
+    const spyToDoListEventBus = new SpyToDoListEventBus();
+    const usecase = new RecommandationPersonnaliseAEteCliqueeUsecase(
+      spyRecommandationsPersonnaliseesRepository,
+      spyToDoListEventBus
+    );
+
+    // WHEN
+    await usecase.execute('1');
+
+    // THEN
+    expect(spyRecommandationsPersonnaliseesRepository.recommandationAEteCliqueeAEteAppelee).toBe(true);
+    expect(spyToDoListEventBus.eventName).toBe(ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE);
+  });
+});
diff --git a/tests/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase.spec.ts b/tests/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase.spec.ts
index e2461a3d4..8e405569d 100644
--- a/tests/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase.spec.ts
+++ b/tests/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase.spec.ts
@@ -1,56 +1,11 @@
-import {
-  RecommandationPersonnalisee,
-  RecommandationsPersonnaliseesUsecase,
-} from '@/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase';
+import { RecommandationsPersonnaliseesUsecase } from '@/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase';
 import { InteractionType } from '@/shell/interactionType';
 import {
   RecommandationPersonnaliseeViewModel,
   RecommandationsPersonnaliseesPresenterImpl,
 } from '@/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl';
-import { RecommandationsPersonnaliseesRepository } from '@/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
+import { MockRecommandationsPersonnaliseesRepository } from './adapters/recommandationsPersonnalisees.repository.mock';
 
-class MockRecommandationsPersonnaliseesRepository implements RecommandationsPersonnaliseesRepository {
-  chargerRecommandationsPersonnalisees(idUtilisateur: string): Promise<RecommandationPersonnalisee[]> {
-    return Promise.resolve([
-      {
-        type: InteractionType.QUIZ,
-        titre: 'Premier Quiz',
-        sousTitre: 'sousTitre',
-        categorie: '🚲 Transports',
-        nombreDePointsAGagner: 'nombreDePointsAGagner',
-        illustrationURL: 'illustrationURL',
-        idDuContenu: '2',
-      },
-      {
-        type: InteractionType.ARTICLE,
-        titre: 'Article qui doit être en avant',
-        sousTitre: 'sousTitre',
-        categorie: '🌍 Global',
-        nombreDePointsAGagner: 'nombreDePointsAGagner',
-        illustrationURL: 'illustrationURL',
-        idDuContenu: '2',
-      },
-      {
-        type: InteractionType.QUIZ,
-        titre: 'Un autre Quiz',
-        sousTitre: 'sousTitre',
-        categorie: '🌍 Global',
-        nombreDePointsAGagner: 'nombreDePointsAGagner',
-        illustrationURL: 'illustrationURL',
-        idDuContenu: '1',
-      },
-      {
-        type: InteractionType.ARTICLE,
-        titre: 'un autre article',
-        sousTitre: 'sousTitre',
-        categorie: '🌍 Global',
-        nombreDePointsAGagner: 'nombreDePointsAGagner',
-        illustrationURL: 'illustrationURL',
-        idDuContenu: '1',
-      },
-    ]);
-  }
-}
 describe('Fichier de tests concernant le chargement des recommandations personnalisees', () => {
   it('En donnant un id utilisateur doit charger 1 article mis en avant et 3 recommandations personnalisees secondaires', async () => {
     // GIVEN
diff --git a/tests/toDoList/adapters/mockToDoListRepository.ts b/tests/toDoList/adapters/mockToDoListRepository.ts
index 248256d10..94527f44c 100644
--- a/tests/toDoList/adapters/mockToDoListRepository.ts
+++ b/tests/toDoList/adapters/mockToDoListRepository.ts
@@ -21,8 +21,8 @@ export class MockToDoListRepository implements ToDoListRepository {
           id: 'id2',
           interactionId: 'interactionId2',
           titre: 'Article qui doit être en avant',
-          url: '/article/Article qui doit être en avant',
-          contentId: '',
+          url: '/article/Article qui doit être en avant/1',
+          contentId: '1',
           progession: {
             etapeCourante: 1,
             etapeTotal: 1,
@@ -37,7 +37,7 @@ export class MockToDoListRepository implements ToDoListRepository {
         {
           id: 'id3',
           interactionId: 'interactionId3',
-          titre: 'Consulter votre profile',
+          titre: 'Consulter une recommandation',
           url: '',
           contentId: '',
           progession: {
@@ -45,7 +45,7 @@ export class MockToDoListRepository implements ToDoListRepository {
             etapeTotal: 1,
           },
           nombreDePointsAGagner: 10,
-          type: InteractionType.COMPTE,
+          type: InteractionType.RECOMMANDATION,
           thematique: '🌍 Global',
           pointAEteRecolte: false,
         },
@@ -79,6 +79,21 @@ export class MockToDoListRepository implements ToDoListRepository {
           thematique: '🌍 Global',
           pointAEteRecolte: false,
         },
+        {
+          id: 'id4',
+          interactionId: 'interactionId4',
+          titre: 'Installer un service',
+          url: '',
+          contentId: '',
+          progession: {
+            etapeCourante: 1,
+            etapeTotal: 1,
+          },
+          nombreDePointsAGagner: 10,
+          type: InteractionType.SERVICE,
+          thematique: '🌍 Global',
+          pointAEteRecolte: false,
+        },
       ],
     });
   }
diff --git a/tests/toDoList/recupererToDoList.usecase.spec.ts b/tests/toDoList/recupererToDoList.usecase.spec.ts
index ccc169ff5..ebf2fd8ce 100644
--- a/tests/toDoList/recupererToDoList.usecase.spec.ts
+++ b/tests/toDoList/recupererToDoList.usecase.spec.ts
@@ -1,4 +1,3 @@
-import { InteractionType } from '@/shell/interactionType';
 import { MockToDoListRepository } from './adapters/mockToDoListRepository';
 import { RecupererToDoListUsecase } from '@/toDoList/recupererToDoList.usecase';
 import { ToDoListPresenterImpl, TodoListViewModel } from '@/toDoList/adapters/toDoList.presenter.impl';
@@ -13,41 +12,40 @@ describe('Fichier de tests concernant la récupération de la ToDo List', () =>
     // THEN
     function expectation(toDoList: TodoListViewModel) {
       expect(toDoList).toStrictEqual<TodoListViewModel>({
-        titre: 'Ma ToDo List',
-        pointFinDeMission: 30,
-        derniere: false,
         aFaire: [
           {
-            id: 'id3',
-            titre: 'Consulter votre profile',
-            url: '/mon-compte',
             contentId: '',
+            hash: '#recommandations',
+            id: 'id3',
+            nombreDePointsAGagner: 10,
+            pointAEteRecolte: false,
             progession: {
               etapeCourante: 1,
               etapeTotal: 1,
             },
-            nombreDePointsAGagner: 10,
-            type: InteractionType.COMPTE,
             thematique: '🌍 Global',
-            pointAEteRecolte: false,
+            titre: 'Consulter une recommandation',
+            type: 'recommandations',
+            url: '/agir',
           },
-
           {
-            id: 'id',
-            titre: 'Premier Quiz',
-            url: '/agir/quiz/',
             contentId: '',
+            hash: undefined,
+            id: 'id',
+            nombreDePointsAGagner: 10,
+            pointAEteRecolte: false,
             progession: {
               etapeCourante: 1,
               etapeTotal: 2,
             },
-            nombreDePointsAGagner: 10,
-            type: InteractionType.QUIZ,
             thematique: '🚲 Transports',
-            pointAEteRecolte: false,
+            titre: 'Premier Quiz',
+            type: 'quizz',
+            url: '/agir/quiz/',
           },
           {
             contentId: '',
+            hash: undefined,
             id: 'id3',
             nombreDePointsAGagner: 10,
             pointAEteRecolte: false,
@@ -60,23 +58,42 @@ describe('Fichier de tests concernant la récupération de la ToDo List', () =>
             type: 'service',
             url: '/agir/services',
           },
+          {
+            contentId: '',
+            hash: undefined,
+            id: 'id4',
+            nombreDePointsAGagner: 10,
+            pointAEteRecolte: false,
+            progession: {
+              etapeCourante: 1,
+              etapeTotal: 1,
+            },
+            thematique: '🌍 Global',
+            titre: 'Installer un service',
+            type: 'service',
+            url: '/agir/services',
+          },
         ],
+        derniere: false,
         fait: [
           {
+            contentId: '1',
+            hash: undefined,
             id: 'id2',
-            titre: 'Article qui doit être en avant',
-            url: '/article/Article qui doit être en avant',
-            contentId: '',
+            nombreDePointsAGagner: 10,
+            pointAEteRecolte: true,
             progession: {
               etapeCourante: 1,
               etapeTotal: 1,
             },
-            nombreDePointsAGagner: 10,
-            type: InteractionType.ARTICLE,
             thematique: '🌍 Global',
-            pointAEteRecolte: true,
+            titre: 'Article qui doit être en avant',
+            type: 'article',
+            url: '/article/Article qui doit être en avant/1',
           },
         ],
+        pointFinDeMission: 30,
+        titre: 'Ma ToDo List',
       });
     }
   });
diff --git a/tests/toDoList/spyTodoListEventBus.ts b/tests/toDoList/spyTodoListEventBus.ts
index 1067b3d64..a63eea198 100644
--- a/tests/toDoList/spyTodoListEventBus.ts
+++ b/tests/toDoList/spyTodoListEventBus.ts
@@ -18,5 +18,6 @@ export class SpyToDoListEventBus extends EventBus<ToDoListEvent> {
     [ToDoListEvent.TODO_A_ETE_TERMINEE]: [],
     [ToDoListEvent.TODO_QUIZ_ETE_TERMINE]: [],
     [ToDoListEvent.TODO_KYC_A_ETE_REPONDU]: [],
+    [ToDoListEvent.TODO_RECOMMANDATION_A_ETE_CLIQUEE]: [],
   };
 }