feat: faq dans les actions classiques (#961)

src/components/custom/Action/ActionClassique.vue

@@ -18,12 +18,25 @@
       <h2>Aides et bons plans !</h2>
       <GrilleAidesDUneAction :aides="actionClassiqueViewModel.aides" />
     </section>
+
+    <section v-if="actionClassiqueViewModel.faq?.length > 0" class="fr-p-2w fr-mt-2w">
+      <h2>On répond à vos <span class="fr-text--bold"> questions ! </span></h2>
+      <div class="fr-accordions-group">
+        <Accordeon v-for="faq in actionClassiqueViewModel.faq" :key="faq.question" :name-id="faq.question">
+          <template #titre>{{ faq.question }}</template>
+          <template #contenu>
+            <p v-html="faq.reponse"></p>
+          </template>
+        </Accordeon>
+      </div>
+    </section>
   </section>
 </template>
 
 <script lang="ts" setup>
   import ActionWidgetServices from '@/components/custom/Action/ActionWidgetServices.vue';
   import GrilleAidesDUneAction from '@/components/custom/Aides/GrilleAidesDUneAction.vue';
+  import Accordeon from '@/components/dsfr/Accordeon.vue';
   import { ActionClassiqueViewModel } from '@/domaines/actions/ports/action.presenter';
 
   defineProps<{ actionClassiqueViewModel: ActionClassiqueViewModel }>();

src/components/custom/Action/ActionWidgetServices.vue

@@ -3,16 +3,14 @@
     <div v-for="service in services" :key="service.type">
       <WidgetServiceRecettes v-if="service.type === 'recettes'" :parametre-de-recherche="service.parametreDuService" />
 
-      <WidgetServiceLongueVieAuxObjets
-        v-if="service.type === 'longue_vie_objets'"
-        :parametre-de-recherche="service.parametreDuService"
-        :commune="commune"
-      />
+      <section v-if="service.type === 'longue_vie_objets'" class="fr-mt-4w">
+        <WidgetServiceLongueVieAuxObjets :commune="commune" :parametre-de-recherche="service.parametreDuService" />
+      </section>
     </div>
   </section>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
   import WidgetServiceLongueVieAuxObjets from '@/components/pages/PagesService/components/WidgetServiceLongueVieAuxObjets.vue';
   import WidgetServiceRecettes from '@/components/pages/PagesService/components/WidgetServiceRecettes.vue';
   import { ActionClassiqueViewModel } from '@/domaines/actions/ports/action.presenter';

src/domaines/actions/adapters/action.presenter.impl.ts

@@ -14,11 +14,17 @@ export class ActionPresenterImpl implements ActionPresenter {
   ) {}
 
   async presenteActionClassique(action: ActionDetail) {
-    const [titre, sousTitre, astuces, introduction] = await Promise.all([
+    const [titre, sousTitre, astuces, introduction, faq] = await Promise.all([
       marked.parseInline(action.titre),
       marked.parseInline(action.sousTitre ?? ''),
       marked.parse(action.corps.astuces ?? ''),
       marked.parse(action.corps.introduction ?? ''),
+      Promise.all(
+        action.faq.map(async faq => ({
+          question: faq.question,
+          reponse: await marked.parseInline(faq.reponse),
+        })),
+      ),
     ]);
 
     this.actionClassiqueViewModel({
@@ -41,6 +47,7 @@ export class ActionPresenterImpl implements ActionPresenter {
         montantMaximum: aide.montantMaximum ? `${aide.montantMaximum}€` : undefined,
         estGratuit: aide.estGratuit,
       })),
+      faq: faq,
     });
   }
 

src/domaines/actions/adapters/actions.repository.axios.ts

@@ -35,6 +35,10 @@ interface ActionDetailApiModel {
     partenaire_logo_url: string;
     est_gratuit: boolean;
   }[];
+  faqs: {
+    question: string;
+    reponse: string;
+  }[];
 }
 
 interface CatalogueActionsApiModel {
@@ -98,6 +102,10 @@ export class ActionsRepositoryAxios implements ActionsRepository {
         montantMaximum: aide.montant_max,
         estGratuit: aide.est_gratuit,
       })),
+      faq: response.data.faqs.map(faq => ({
+        question: faq.question,
+        reponse: faq.reponse,
+      })),
     };
   }
 

src/domaines/actions/ports/action.presenter.ts

@@ -22,6 +22,7 @@ export interface ActionClassiqueViewModel extends ActionBaseViewModel {
   };
   services: ActionServiceViewModel[];
   aides: ActionAideViewModel[];
+  faq: ActionFAQViewModel[];
 }
 
 export interface ActionQuizzesViewModel extends ActionBaseViewModel {
@@ -66,3 +67,8 @@ export interface ActionAideViewModel {
   montantMaximum?: string;
   estGratuit: boolean;
 }
+
+export interface ActionFAQViewModel {
+  question: string;
+  reponse: string;
+}

src/domaines/actions/ports/actions.repository.ts

@@ -49,6 +49,7 @@ export interface ActionDetail {
   nombreAidesDisponibles: number;
   services: ActionService[];
   aides: ActionAide[];
+  faq: ActionFAQ[];
 }
 
 export enum TypeAction {
@@ -72,6 +73,11 @@ export interface ActionAide {
   estGratuit: boolean;
 }
 
+export interface ActionFAQ {
+  question: string;
+  reponse: string;
+}
+
 export interface ActionsRepository {
   chargerCatalogueActions(idUtilisateur: string): Promise<CatalogueActions>;
 

tests/actions/adapters/actionQuiz.repository.mock.ts

@@ -86,6 +86,7 @@ export class ActionQuizRepositoryMock implements ActionsRepository {
           },
         },
       ],
+      faq: [],
     };
   }
 

tests/actions/chargerActionClassique.usecase.spec.ts

@@ -78,6 +78,23 @@ describe("Fichier de tests concernant la récupération d'une action", () => {
           parametreDuService: 'reparer',
         },
       ],
+      faq: [
+        {
+          question: "Est-ce qu'un composteur ça coute cher ?",
+          reponse: 'Pas tant que ça !',
+        },
+        {
+          question: 'Quelle distance est considérée comme “locale” ?',
+          reponse:
+            'Il n’y a pas de définition unique, mais en général, on peut considérer un produit comme local **à l’échelle de la région**, ou lorsqu’il provient d’une zone géographique proche, souvent **dans un rayon de 200 km.**',
+        },
+        {
+          question:
+            'Comment faire pour les produits de base qui ne viennent pas de France, comme les huiles, les pâtes ou le riz ?',
+          reponse:
+            'Certains produits peuvent effectivement ne pas être produits localement. Il ne s’agit pas d’arrêter de consommer tout ce qui ne vient pas du village d’à côté, mais plutôt de **réduire les importations**. \nDans la mesure du possible, il vaut mieux privilégier au moins ce qui est **produit en France**, voire en Europe. Pour le reste, vous pouvez par exemple vous tourner vers **les produits labellisés**, qui garantissent des pratiques durables ou le commerce équitable.',
+        },
+      ],
     };
     const usecase = new ChargerActionUsecase(
       new ChargerActionClassiqueUsecase(),
@@ -161,6 +178,23 @@ describe("Fichier de tests concernant la récupération d'une action", () => {
             estGratuit: true,
           },
         ],
+        faq: [
+          {
+            question: "Est-ce qu'un composteur ça coute cher ?",
+            reponse: 'Pas tant que ça !',
+          },
+          {
+            question: 'Quelle distance est considérée comme “locale” ?',
+            reponse:
+              'Il n’y a pas de définition unique, mais en général, on peut considérer un produit comme local <span class="text--bold">à l’échelle de la région</span>, ou lorsqu’il provient d’une zone géographique proche, souvent <span class="text--bold">dans un rayon de 200 km.</span>',
+          },
+          {
+            question:
+              'Comment faire pour les produits de base qui ne viennent pas de France, comme les huiles, les pâtes ou le riz ?',
+            reponse:
+              'Certains produits peuvent effectivement ne pas être produits localement. Il ne s’agit pas d’arrêter de consommer tout ce qui ne vient pas du village d’à côté, mais plutôt de <span class="text--bold">réduire les importations</span>. \nDans la mesure du possible, il vaut mieux privilégier au moins ce qui est <span class="text--bold">produit en France</span>, voire en Europe. Pour le reste, vous pouvez par exemple vous tourner vers <span class="text--bold">les produits labellisés</span>, qui garantissent des pratiques durables ou le commerce équitable.',
+          },
+        ],
       });
     }
   });

tests/actions/chargerActionQuiz.usecase.spec.ts

@@ -58,6 +58,7 @@ describe("Fichier de tests concernant la récupération d'une action", () => {
           parametreDuService: 'reparer',
         },
       ],
+      faq: [],
     };
     const usecase = new ChargerActionUsecase(
       new ChargerActionClassiqueUsecase(),