feat: 1361 fusager I give my opinion (#1248)

## Ticket(s) lié(s)
1361

## Description
Ajout d'un écran modal en fin de déclaration de séjour M-2 / J-8 pour
permettre aux utilisateurs de donner leur avis

## Screenshot / liens loom 
<img width="1024" height="542" alt="image"
src="https://github.com/user-attachments/assets/5a4d07f7-15cc-43db-922a-35dfae7f7087"
/>

## Check-list

 - [X] Ma branche est rebase sur main
- [ ] Des tests ont été écrits pour tous les endpoints créés ou modifiés
 - [X] Refacto "à la volée" des parties sur lesquelles j'ai codée
 - [X] Plus de `console.log`
- [ ] J'ai ajouté une validation de schéma sur la route que j'ai ajouté
ou modifié
 - [ ] J'ai converti les fichiers vue en `<script lang="ts">`
 - [X] Mon code est en Typescript (autant que possible)

**Testing instructions**

En tant qu'usager

    - [x] Aller dans la liste des déclarations de séjour
    - [x] Créer ou reprendre une déclaration m-2 ou J-8
    - [x] Compléter et aller jusqu' à la transmission de la déclaration
- [X] Une fois avoir cliqué sur la transmission de la déclaration une
nouvelle fenêtre s'affiche invitant à donner son avis
    - [X] Un clique sur "je donne mon avis" ouvre un nouvel onglet
- [X] Possibilité de fermer la fenêtre modale, on est alors redirigé
vers la liste des déclaration de séjours

Author: l-scherer

packages/frontend-usagers/nuxt.config.ts

@@ -61,7 +61,12 @@ export default defineNuxtConfig({
     headers: {
       crossOriginEmbedderPolicy: "unsafe-none",
       contentSecurityPolicy: {
-        "img-src": ["'self'", "*.openstreetmap.org", "data:"],
+        "img-src": [
+          "'self'",
+          "*.openstreetmap.org",
+          "jedonnemonavis.numerique.gouv.fr",
+          "data:",
+        ],
         "script-src": [
           "'self'",
           "https:",

packages/frontend-usagers/src/components/demande-sejour/ConfirmTransmission.vue

@@ -0,0 +1,56 @@
+<template>
+  <h2 class="fr-h4">
+    <span
+      class="fr-icon-check-line fr-icon--lg fr-mr-1w icon-success"
+      aria-hidden="true"
+    ></span>
+    Votre déclaration a bien été transmise
+  </h2>
+  <section class="fr-container fr-my-4w">
+    <p>Votre demande est en cours de traitement</p>
+
+    <div class="avis-box" role="region" aria-labelledby="avis-title">
+      <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
+        <div class="fr-col-12 fr-col-md-6">
+          <h3 id="avis-title" class="fr-h4">
+            Comment s’est passée votre démarche ?
+          </h3>
+
+          <p class="fr-text--sm">
+            Aidez-nous à améliorer cette démarche en donnant votre avis, cela ne
+            prend que 2 minutes.
+          </p>
+        </div>
+        <div class="fr-col-12 fr-col-md-6 fr-text--right">
+          <a
+            href="https://jedonnemonavis.numerique.gouv.fr/Demarches/4077?button=4503"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Je donne mon avis - nouvelle fenêtre"
+          >
+            <img
+              src="https://jedonnemonavis.numerique.gouv.fr/static/bouton-bleu-clair.svg"
+              alt="Je donne mon avis"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.icon-success {
+  color: var(--text-default-success);
+}
+.avis-box {
+  background-color: var(--background-contrast-blue-france);
+  padding: 1rem;
+  margin: 1rem;
+}
+a img {
+  width: 90%;
+}
+</style>

packages/frontend-usagers/src/pages/demande-sejour/[[declarationId]].vue

@@ -168,6 +168,15 @@
               </div>
             </div>
           </div>
+          <DsfrModal
+            class="fr-icon-checkbox-circle-line fr-icon--lg"
+            name="modal-confirm-transmission"
+            :opened="isModalConfirmTransmissionOpened"
+            size="md"
+            @close="onCloseConfirmTransmissionModal"
+          >
+            <DemandeSejourConfirmTransmission />
+          </DsfrModal>
         </div>
       </DsfrTabContent>
 
@@ -241,7 +250,12 @@
 
 <script setup>
 import dayjs from "dayjs";
-import { Chat, DemandeStatusBadge, fileUtils, useToaster } from "@vao/shared-ui";
+import {
+  Chat,
+  DemandeStatusBadge,
+  fileUtils,
+  useToaster,
+} from "@vao/shared-ui";
 const getFileUploadErrorMessage = fileUtils.getFileUploadErrorMessage;
 
 const route = useRoute();
@@ -475,6 +489,12 @@ const hash = computed(() => {
   return sommaireOptions[0];
 });
 
+const isModalConfirmTransmissionOpened = ref(false);
+
+async function onCloseConfirmTransmissionModal() {
+  isModalConfirmTransmissionOpened.value = false;
+  await navigateTo("/demande-sejour/liste");
+}
 const canModify = computed(() => {
   return (
     !demandeCourante.value.statut ||
@@ -663,12 +683,10 @@ async function updateOrCreate(data, type) {
       },
     });
 
-    toaster.success(
-      {
-        titleTag: "h2",
-        description: `Déclaration de séjour ${sejourId.value ? "sauvegardée" : "créée"}`,
-      }
-    );
+    toaster.success({
+      titleTag: "h2",
+      description: `Déclaration de séjour ${sejourId.value ? "sauvegardée" : "créée"}`,
+    });
     log.d(`demande de séjour ${sejourId.value} mis à jour`);
     sejourId.value = response.id;
     return await nextHash();
@@ -735,7 +753,7 @@ async function finalize(attestation) {
       });
     }
     log.d(`demande de séjour ${sejourId.value} transmise`);
-    return await navigateTo("/demande-sejour/liste");
+    isModalConfirmTransmissionOpened.value = true;
   } catch (error) {
     log.w("Finalisation de la declaration de sejour : ", { error });
     const codeError = error?.data?.name;
@@ -782,4 +800,7 @@ onMounted(async () => {
   justify-content: end;
   align-items: start;
 }
+a img {
+  display: block;
+}
 </style>