fix: correction des tags thématiques pour les recommandations

betagouv · Nov 14, 2024 · f247b76 · f247b76
1 parent 290fbab
commit f247b76
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 70 deletions.
diff --git a/src/components/custom/Coach/CoachCardRecommandation.vue b/src/components/custom/Coach/CoachCardRecommandation.vue
@@ -16,9 +16,7 @@
     </div>
     <div class="fr-py-2w full-width">
       <div class="fr-grid-row flex-space-between">
-        <span class="fr-text--sm text--black fr-m-0 fr-p-0">
-          {{ recommandation.thematique }}
-        </span>
+        <ThematiqueTag :tag="recommandation.thematiqueTag" />
       </div>
       <p class="fr-text--lg text--semi-bold text--black fr-mt-1w fr-mb-0">
         <router-link
@@ -34,6 +32,7 @@
 </template>
 
 <script setup lang="ts">
+  import ThematiqueTag from '@/components/custom/Thematiques/ThematiqueTag.vue';
   import { RecommandationViewModel } from '@/domaines/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl';
 
   defineProps<{ recommandation: RecommandationViewModel }>();

diff --git a/src/components/custom/Thematiques/ThematiqueTag.vue b/src/components/custom/Thematiques/ThematiqueTag.vue
@@ -1,6 +1,6 @@
 <template>
   <span class="tag border-radius--xl text--xs text--semi-bold fr-py-1v fr-px-3v">
-    <span class="fr-mr-1v">{{ tag.style.emoji }}</span>
+    <span class="fr-mr-1v" aria-hidden="true">{{ tag.style.emoji }}</span>
     {{ tag.label }}
   </span>
 </template>

diff --git a/...es/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl.ts b/...es/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.presenter.impl.ts
@@ -1,5 +1,7 @@
 import { RecommandationsPersonnaliseesPresenter } from '@/domaines/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.presenter';
 import { RecommandationPersonnalisee } from '@/domaines/recommandationsPersonnalisees/recupererRecommandationsPersonnalisees.usecase';
+import { MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
+import { TagStyle, TagThematique } from '@/domaines/thematiques/TagThematique';
 import { RouteAidesPath } from '@/router/aides/routes';
 import { RouteArticlePath } from '@/router/articles/routes';
 import { RouteDefiPath } from '@/router/defis/routes';
@@ -26,8 +28,7 @@ export interface RecommandationViewModel {
   idDuContenu: string;
   nombreDePointsAGagner: string;
   type: TagViewModel;
-  thematique: string;
-  joursRestants: string | null; // TO DELETE ?
+  thematiqueTag: { label: string; style: TagStyle };
   points: number;
 }
 export interface RecommandationPersonnaliseeViewModel {
@@ -42,17 +43,17 @@ export class RecommandationsPersonnaliseesPresenterImpl implements Recommandatio
   presente(recommandationsPersonnalisees: RecommandationPersonnalisee[]): void {
     const mapRecommandation = (recommandationPersonnalisee: RecommandationPersonnalisee) => {
       return {
-        thematique: recommandationPersonnalisee.thematique,
+        thematiqueTag: {
+          label: MenuThematiques.getThematiqueData(recommandationPersonnalisee.clefThematiqueAPI).labelDansLeMenu,
+          style: TagThematique.getTagThematiqueUtilitaire(recommandationPersonnalisee.clefThematiqueAPI),
+        },
         titre: recommandationPersonnalisee.titre,
         image: this.determineImage(recommandationPersonnalisee),
         bouton: this.determineBouton(recommandationPersonnalisee),
         idDuContenu: recommandationPersonnalisee.idDuContenu,
         nombreDePointsAGagner: recommandationPersonnalisee.nombreDePointsAGagner,
         type: this.determineTypeTag(recommandationPersonnalisee.type),
         points: recommandationPersonnalisee.points,
-        joursRestants: recommandationPersonnalisee.joursRestants
-          ? `Plus que ${recommandationPersonnalisee.joursRestants} jours`
-          : null,
       };
     };
 

diff --git a/.../recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts b/.../recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.axios.ts
@@ -1,12 +1,12 @@
 import { AxiosFactory, intercept401 } from '@/axios.factory';
 import { RecommandationsPersonnaliseesRepository } from '@/domaines/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
 import { RecommandationPersonnalisee } from '@/domaines/recommandationsPersonnalisees/recupererRecommandationsPersonnalisees.usecase';
+import { ClefThematiqueAPI } from '@/domaines/thematiques/MenuThematiques';
 import { InteractionType } from '@/shell/interactionType';
 
 export interface RecommandationApiModel {
   type: string;
   titre: string;
-  thematique_gamification: string;
   jours_restants: number | null;
   image_url: string;
   points: number;
@@ -29,7 +29,7 @@ export class RecommandationsPersonnaliseesRepositoryAxios implements Recommandat
       const recommandationPersonnalisee: RecommandationPersonnalisee = {
         type: apiModel.type as InteractionType,
         titre: apiModel.titre,
-        thematique: apiModel.thematique_gamification,
+        clefThematiqueAPI: apiModel.thematique_principale as ClefThematiqueAPI,
         nombreDePointsAGagner: apiModel.points.toString(),
         illustrationURL: apiModel.image_url,
         idDuContenu: apiModel.content_id,
@@ -59,7 +59,7 @@ export class RecommandationsPersonnaliseesRepositoryAxios implements Recommandat
       const recommandationPersonnalisee: RecommandationPersonnalisee = {
         type: apiModel.type as InteractionType,
         titre: apiModel.titre,
-        thematique: apiModel.thematique_gamification,
+        clefThematiqueAPI: apiModel.thematique_principale as ClefThematiqueAPI,
         nombreDePointsAGagner: apiModel.points.toString(),
         illustrationURL: apiModel.image_url,
         idDuContenu: apiModel.content_id,

diff --git a/src/domaines/recommandationsPersonnalisees/recupererRecommandationsPersonnalisees.usecase.ts b/src/domaines/recommandationsPersonnalisees/recupererRecommandationsPersonnalisees.usecase.ts
@@ -1,11 +1,12 @@
 import { RecommandationsPersonnaliseesPresenter } from '@/domaines/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.presenter';
 import { RecommandationsPersonnaliseesRepository } from '@/domaines/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
+import { ClefThematiqueAPI } from '@/domaines/thematiques/MenuThematiques';
 import { InteractionType } from '@/shell/interactionType';
 
 export interface RecommandationPersonnalisee {
   type: InteractionType;
   titre: string;
-  thematique: string;
+  clefThematiqueAPI: ClefThematiqueAPI;
   nombreDePointsAGagner: string;
   illustrationURL: string;
   idDuContenu: string;

diff --git a/...s/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.mock.ts b/...s/recommandationsPersonnalisees/adapters/recommandationsPersonnalisees.repository.mock.ts
@@ -1,6 +1,7 @@
 import { RecommandationsPersonnaliseesRepository } from '@/domaines/recommandationsPersonnalisees/ports/recommandationsPersonnalisees.repository';
 import { RecommandationPersonnalisee } from '@/domaines/recommandationsPersonnalisees/recupererRecommandationsPersonnalisees.usecase';
 import { InteractionType } from '@/shell/interactionType';
+import { ClefThematiqueAPI } from '@/domaines/thematiques/MenuThematiques';
 
 export class MockRecommandationsPersonnaliseesRepository implements RecommandationsPersonnaliseesRepository {
   chargerRecommandationsPersonnaliseesThematique(
@@ -20,7 +21,7 @@ export class MockRecommandationsPersonnaliseesRepository implements Recommandati
         type: InteractionType.QUIZ,
         titre: 'Premier Quiz',
         sousTitre: 'sousTitre',
-        thematique: '🚲 Transports',
+        clefThematiqueAPI: ClefThematiqueAPI.transports,
         nombreDePointsAGagner: 'nombreDePointsAGagner',
         illustrationURL: 'illustrationURL',
         idDuContenu: '2',
@@ -31,7 +32,7 @@ export class MockRecommandationsPersonnaliseesRepository implements Recommandati
         type: InteractionType.ARTICLE,
         titre: 'Article qui doit être en avant',
         sousTitre: 'sousTitre',
-        thematique: '🌍 Global',
+        clefThematiqueAPI: ClefThematiqueAPI.transports,
         nombreDePointsAGagner: 'nombreDePointsAGagner',
         illustrationURL: 'illustrationURL',
         idDuContenu: '2',
@@ -42,7 +43,7 @@ export class MockRecommandationsPersonnaliseesRepository implements Recommandati
         type: InteractionType.AIDE,
         titre: 'Aide vélo',
         sousTitre: 'sousTitre',
-        thematique: '🌍 Global',
+        clefThematiqueAPI: ClefThematiqueAPI.transports,
         nombreDePointsAGagner: 'nombreDePointsAGagner',
         illustrationURL: 'illustrationURL',
         idDuContenu: '1',
@@ -53,7 +54,7 @@ export class MockRecommandationsPersonnaliseesRepository implements Recommandati
         type: InteractionType.DEFIS,
         titre: 'Un défi',
         sousTitre: 'sousTitre',
-        thematique: '🌍 Global',
+        clefThematiqueAPI: ClefThematiqueAPI.transports,
         nombreDePointsAGagner: 'nombreDePointsAGagner',
         illustrationURL: 'illustrationURL',
         idDuContenu: '1',
@@ -64,7 +65,7 @@ export class MockRecommandationsPersonnaliseesRepository implements Recommandati
         titre: 'Un KYC',
         type: InteractionType.KYC,
         sousTitre: 'sousTitre',
-        thematique: '🌍 Global',
+        clefThematiqueAPI: ClefThematiqueAPI.transports,
         nombreDePointsAGagner: 'nombreDePointsAGagner',
         illustrationURL: 'illustrationURL',
         idDuContenu: '1',
@@ -75,7 +76,7 @@ export class MockRecommandationsPersonnaliseesRepository implements Recommandati
         type: InteractionType.DEFIS,
         titre: 'Un autre défi',
         sousTitre: 'sousTitre',
-        thematique: '🌍 Global',
+        clefThematiqueAPI: ClefThematiqueAPI.transports,
         nombreDePointsAGagner: 'nombreDePointsAGagner',
         illustrationURL: 'illustrationURL',
         idDuContenu: '1',

diff --git a/tests/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase.spec.ts b/tests/recommandationsPersonnalisees/recommandationsPersonnalisees.usecase.spec.ts
@@ -18,44 +18,6 @@ describe('Fichier de tests concernant le chargement des recommandations personna
     // THEN
     function expectation(recommandationsPersonnaliseesViewModel: RecommandationPersonnaliseeViewModel) {
       expect(recommandationsPersonnaliseesViewModel).toStrictEqual<RecommandationPersonnaliseeViewModel>({
-        defis: [
-          {
-            bouton: {
-              libelle: 'Faire le suivi',
-              style: 'fr-btn--icon-left fr-icon-check-line',
-              url: '/defi/1',
-            },
-            idDuContenu: '1',
-            image: '/reco_defi.webp',
-            joursRestants: 'Plus que 7 jours',
-            nombreDePointsAGagner: 'nombreDePointsAGagner',
-            thematique: '🌍 Global',
-            titre: 'Un défi',
-            points: 10,
-            type: {
-              libelle: 'Action',
-              style: 'background--bleu-ecume-hover',
-            },
-          },
-          {
-            bouton: {
-              libelle: 'Relever le défi',
-              style: 'fr-btn--icon-left fr-icon-check-line',
-              url: '/defi/1',
-            },
-            idDuContenu: '1',
-            image: '/reco_defi.webp',
-            joursRestants: null,
-            nombreDePointsAGagner: 'nombreDePointsAGagner',
-            thematique: '🌍 Global',
-            titre: 'Un autre défi',
-            points: 10,
-            type: {
-              libelle: 'Action',
-              style: 'background--bleu-ecume-hover',
-            },
-          },
-        ],
         autresRecommandations: [
           {
             bouton: {
@@ -65,11 +27,17 @@ describe('Fichier de tests concernant le chargement des recommandations personna
             },
             idDuContenu: '2',
             image: 'illustrationURL',
-            joursRestants: null,
             nombreDePointsAGagner: 'nombreDePointsAGagner',
-            thematique: '🚲 Transports',
-            titre: 'Premier Quiz',
             points: 10,
+            thematiqueTag: {
+              label: 'Me déplacer',
+              style: {
+                backgroundColor: '#D2E9FF',
+                color: '#021952',
+                emoji: '🚗',
+              },
+            },
+            titre: 'Premier Quiz',
             type: {
               libelle: 'Quiz',
               style: 'background--vert-bourgeon',
@@ -83,11 +51,17 @@ describe('Fichier de tests concernant le chargement des recommandations personna
             },
             idDuContenu: '2',
             image: 'illustrationURL',
-            joursRestants: null,
             nombreDePointsAGagner: 'nombreDePointsAGagner',
-            thematique: '🌍 Global',
-            titre: 'Article qui doit être en avant',
             points: 10,
+            thematiqueTag: {
+              label: 'Me déplacer',
+              style: {
+                backgroundColor: '#D2E9FF',
+                color: '#021952',
+                emoji: '🚗',
+              },
+            },
+            titre: 'Article qui doit être en avant',
             type: {
               libelle: 'Article',
               style: 'background--caramel',
@@ -101,11 +75,17 @@ describe('Fichier de tests concernant le chargement des recommandations personna
             },
             idDuContenu: '1',
             image: 'illustrationURL',
-            joursRestants: null,
             nombreDePointsAGagner: 'nombreDePointsAGagner',
-            thematique: '🌍 Global',
-            titre: 'Aide vélo',
             points: 10,
+            thematiqueTag: {
+              label: 'Me déplacer',
+              style: {
+                backgroundColor: '#D2E9FF',
+                color: '#021952',
+                emoji: '🚗',
+              },
+            },
+            titre: 'Aide vélo',
             type: {
               libelle: 'Aide',
               style: 'background--yellow',
@@ -119,17 +99,73 @@ describe('Fichier de tests concernant le chargement des recommandations personna
             },
             idDuContenu: '1',
             image: '/ic_kyc.svg',
-            joursRestants: null,
             nombreDePointsAGagner: 'nombreDePointsAGagner',
-            thematique: '🌍 Global',
-            titre: 'Un KYC',
             points: 10,
+            thematiqueTag: {
+              label: 'Me déplacer',
+              style: {
+                backgroundColor: '#D2E9FF',
+                color: '#021952',
+                emoji: '🚗',
+              },
+            },
+            titre: 'Un KYC',
             type: {
               libelle: 'Mieux vous connaître',
               style: 'background--pink',
             },
           },
         ],
+        defis: [
+          {
+            bouton: {
+              libelle: 'Faire le suivi',
+              style: 'fr-btn--icon-left fr-icon-check-line',
+              url: '/defi/1',
+            },
+            idDuContenu: '1',
+            image: '/reco_defi.webp',
+            nombreDePointsAGagner: 'nombreDePointsAGagner',
+            points: 10,
+            thematiqueTag: {
+              label: 'Me déplacer',
+              style: {
+                backgroundColor: '#D2E9FF',
+                color: '#021952',
+                emoji: '🚗',
+              },
+            },
+            titre: 'Un défi',
+            type: {
+              libelle: 'Action',
+              style: 'background--bleu-ecume-hover',
+            },
+          },
+          {
+            bouton: {
+              libelle: 'Relever le défi',
+              style: 'fr-btn--icon-left fr-icon-check-line',
+              url: '/defi/1',
+            },
+            idDuContenu: '1',
+            image: '/reco_defi.webp',
+            nombreDePointsAGagner: 'nombreDePointsAGagner',
+            points: 10,
+            thematiqueTag: {
+              label: 'Me déplacer',
+              style: {
+                backgroundColor: '#D2E9FF',
+                color: '#021952',
+                emoji: '🚗',
+              },
+            },
+            titre: 'Un autre défi',
+            type: {
+              libelle: 'Action',
+              style: 'background--bleu-ecume-hover',
+            },
+          },
+        ],
       });
     }
   });