feature: previsualisation d'une aide (#870)

src/components/custom/Coach/CoachAides.vue

@@ -10,14 +10,14 @@
         <AideLink :aide="aide" />
       </li>
     </ul>
-    <router-link class="fr-link" :to="RouteAidesPath.AIDES">Voir toutes les aides</router-link>
+    <router-link :to="RouteAidesPath.AIDES" class="fr-link">Voir toutes les aides</router-link>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
   import { onMounted, ref } from 'vue';
   import AideLink from '@/components/custom/Aides/AideLink.vue';
-  import { chargementAidesAxiosRepository } from '@/domaines/aides/adapters/chargementAidesAxiosRepository';
+  import { ChargementAidesAxiosRepository } from '@/domaines/aides/adapters/chargementAidesAxiosRepository';
   import {
     AideNonGroupeeViewModel,
     ChargementAidesNonGroupeesPresenterImpl,
@@ -33,7 +33,7 @@
   const commune = ref<string>('');
   onMounted(async () => {
     const { id: utilisateurId } = utilisateurStore().utilisateur;
-    const usecase = new ChargementAidesUsecase(new chargementAidesAxiosRepository());
+    const usecase = new ChargementAidesUsecase(new ChargementAidesAxiosRepository());
 
     const informationLogementUseCase = new RecupererInformationLogementUseCase(new LogementRepositoryAxios());
     await Promise.all([

src/components/pages/PageAides.vue

@@ -16,13 +16,13 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
   import '@gouvfr/dsfr/dist/component/alert/alert.min.css';
   import { onMounted, ref } from 'vue';
   import Aides from '@/components/custom/Aides/Aides.vue';
   import FilDAriane from '@/components/dsfr/FilDAriane.vue';
   import { ChargementAidesPresenterImpl } from '@/domaines/aides/adapters/chargementAides.presenter.impl';
-  import { chargementAidesAxiosRepository } from '@/domaines/aides/adapters/chargementAidesAxiosRepository';
+  import { ChargementAidesAxiosRepository } from '@/domaines/aides/adapters/chargementAidesAxiosRepository';
   import ChargementAidesUsecase from '@/domaines/aides/chargementAides.usecase';
   import { AidesAvecCouvertureViewModel } from '@/domaines/aides/ports/chargementAides.presenter';
   import { utilisateurStore } from '@/store/utilisateur';
@@ -32,7 +32,7 @@
 
   onMounted(async () => {
     const { id: utilisateurId } = utilisateurStore().utilisateur;
-    const usecase = new ChargementAidesUsecase(new chargementAidesAxiosRepository());
+    const usecase = new ChargementAidesUsecase(new ChargementAidesAxiosRepository());
     await usecase.execute(
       utilisateurId,
       new ChargementAidesPresenterImpl(aidesViewModel => (aides.value = aidesViewModel)),

src/components/pages/PagePrevisualisationAide.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="fr-container">
+    <div class="background--white fr-p-4w">
+      <ThematiqueTag
+        :tag="{
+          label: MenuThematiques.getThematiqueData(aide.thematique).labelDansLeMenu,
+          style: TagThematique.getTagThematiqueUtilitaire(aide.thematique),
+        }"
+        aria-hidden="true"
+      />
+      <h1 class="fr-h1 fr-mt-2w text--gris">
+        {{ aide.titre }}
+      </h1>
+      <span class="fr-col-12 fr-pr-2w">
+        <span v-if="aide.isSimulateur || aide.montantMaximum" class="fr-grid-row">
+          <span
+            v-if="aide.isSimulateur"
+            class="fr-tag background-bleu-light fr-mr-1w fr-icon-money-euro-circle-line fr-tag--icon-left"
+          >
+            <span class="fr-sr-only">: </span>
+            Simulateur
+          </span>
+          <span v-if="aide.montantMaximum" class="fr-tag">
+            <span class="fr-sr-only">, </span>
+            {{ aide.montantMaximum }}
+          </span>
+        </span>
+      </span>
+      <div class="cms__content" v-html="aide.contenu" />
+      <div class="flex align-items--center gap--small">
+        <a
+          v-if="aide.urlCommencerVotreDemarche"
+          :href="aide.urlCommencerVotreDemarche"
+          class="fr-btn"
+          rel="noopener external"
+          target="_blank"
+        >
+          Commencer votre démarche
+        </a>
+        <router-link
+          v-if="aide.isSimulateur"
+          :to="{ path: aide.url }"
+          class="fr-btn fr-btn--icon-left fr-icon-arrow-right-line"
+        >
+          Estimer le montant des aides
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+  import ThematiqueTag from '@/components/custom/Thematiques/ThematiqueTag.vue';
+  import { ChargementAidesAxiosRepository } from '@/domaines/aides/adapters/chargementAidesAxiosRepository';
+  import { Aide } from '@/domaines/aides/chargementAides.usecase';
+  import { PrevisualiserAideUsecase } from '@/domaines/aides/previsualiserAide.usecase';
+  import { ClefThematiqueAPI, MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
+  import { TagThematique } from '@/domaines/thematiques/TagThematique';
+
+  const aide = ref<Aide>({
+    id: '',
+    titre: '',
+    categorie: '',
+    contenu: '',
+    url: '',
+    isSimulateur: false,
+    thematique: ClefThematiqueAPI.services_societaux,
+  });
+
+  onMounted(async () => {
+    const route = useRoute();
+    const idArticle = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id;
+    const usecase = new PrevisualiserAideUsecase(new ChargementAidesAxiosRepository());
+    aide.value = await usecase.execute(idArticle);
+  });
+</script>

src/domaines/aides/adapters/chargementAidesAxiosRepository.ts

@@ -1,5 +1,5 @@
 import { AxiosFactory, intercept401 } from '@/axios.factory';
-import { Aides } from '@/domaines/aides/chargementAides.usecase';
+import { Aide, Aides } from '@/domaines/aides/chargementAides.usecase';
 import { ChargementAidesRepository } from '@/domaines/aides/ports/chargementAides.repository';
 import { ClefThematiqueAPI, MenuThematiques } from '@/domaines/thematiques/MenuThematiques';
 
@@ -20,7 +20,7 @@ interface AideApiModel {
   url_demande?: string;
 }
 
-export class chargementAidesAxiosRepository implements ChargementAidesRepository {
+export class ChargementAidesAxiosRepository implements ChargementAidesRepository {
   @intercept401()
   async getAides(utilisateurId: string): Promise<Aides> {
     const axios = AxiosFactory.getAxios();
@@ -46,4 +46,23 @@ export class chargementAidesAxiosRepository implements ChargementAidesRepository
         })),
     };
   }
+
+  @intercept401()
+  async previsualiser(idAide: string): Promise<Aide> {
+    const axios = AxiosFactory.getCMSAxios();
+    const aideCMS = await axios.get(
+      `/aides/${idAide}?populate[1]=imageUrl&populate[2]=partenaire&populate[3]=thematique_gamification&populate[4]=rubriques&populate[5]=thematiques&populate[6]=tags&populate[7]=besoin`,
+    );
+    return {
+      id: aideCMS.data.data.id,
+      titre: aideCMS.data.data.attributes.titre,
+      categorie: aideCMS.data.data.attributes.thematique_principale_label,
+      thematique: aideCMS.data.data.attributes.thematiques.data[0].attributes.code as ClefThematiqueAPI,
+      contenu: aideCMS.data.data.attributes.description,
+      url: aideCMS.data.data.attributes.url_source,
+      isSimulateur: aideCMS.data.data.attributes.is_simulateur,
+      montantMaximum: aideCMS.data.data.attributes.points,
+      urlCommencerVotreDemarche: aideCMS.data.data.url_commencer_votre_demarche,
+    };
+  }
 }

src/domaines/aides/ports/chargementAides.repository.ts

@@ -1,5 +1,7 @@
-import { Aides } from '@/domaines/aides/chargementAides.usecase';
+import { Aide, Aides } from '@/domaines/aides/chargementAides.usecase';
 
 export interface ChargementAidesRepository {
   getAides(codePostal: string): Promise<Aides>;
+
+  previsualiser(idAide: string): Promise<Aide>;
 }

src/domaines/aides/previsualiserAide.usecase.ts

@@ -0,0 +1,10 @@
+import { Aide } from '@/domaines/aides/chargementAides.usecase';
+import { ChargementAidesRepository } from '@/domaines/aides/ports/chargementAides.repository';
+
+export class PrevisualiserAideUsecase {
+  constructor(private readonly aideRepository: ChargementAidesRepository) {}
+
+  async execute(idAide: string): Promise<Aide> {
+    return this.aideRepository.previsualiser(idAide);
+  }
+}

src/router/aides/routes.ts

@@ -1,13 +1,16 @@
+import { RouteRecordRaw } from 'vue-router';
+import PagePrevisualisationAide from '@/components/pages/PagePrevisualisationAide.vue';
+import { RouteAidesName } from '@/router/aides/routeAidesName';
+
 const PageAidesVelo = () => import('@/components/pages/PageAidesVelo.vue');
 const PageAides = () => import('@/components/pages/PageAides.vue');
 const PageAidesVeloFormulaire = () => import('@/components/pages/PageAidesVeloFormulaire.vue');
-import { RouteRecordRaw } from 'vue-router';
-import { RouteAidesName } from '@/router/aides/routeAidesName';
 
 export enum RouteAidesPath {
   AIDES = '/aides',
   FORMULAIRE = 'formulaire',
   VELO = 'velo',
+  AIDE_PREVISUALISATION = 'previsualisation/:id',
 }
 
 const aidesRoutes: RouteRecordRaw[] = [
@@ -45,6 +48,11 @@ const aidesRoutes: RouteRecordRaw[] = [
           },
         ],
       },
+      {
+        path: RouteAidesPath.AIDE_PREVISUALISATION,
+        component: PagePrevisualisationAide,
+        meta: { estPublique: true },
+      },
     ],
   },
 ];

tests/aides/chargementAides.usecase.spec.ts

@@ -1,4 +1,4 @@
-import ChargementAidesUsecase, { Aides } from '@/domaines/aides/chargementAides.usecase';
+import ChargementAidesUsecase, { Aide, Aides } from '@/domaines/aides/chargementAides.usecase';
 import { ChargementAidesRepository } from '@/domaines/aides/ports/chargementAides.repository';
 import { ChargementAidesPresenterImpl } from '@/domaines/aides/adapters/chargementAides.presenter.impl';
 import { AidesAvecCouvertureViewModel } from '@/domaines/aides/ports/chargementAides.presenter';
@@ -115,6 +115,10 @@ class ChargementAidesRepositoryForTest implements ChargementAidesRepository {
       ],
     });
   }
+
+  previsualiser(idAide: string): Promise<Aide> {
+    throw new Error('Method not implemented.');
+  }
 }
 
 describe('Fichier de tests pour charger toutes les aides', () => {