feat: block d'alert pour revenir plus tard en cas d'erreur d'envoi SM…

…S/email + refacto en composant à part (#4744)

src/components/alert-revenir-plus-tard.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="fr-alert fr-alert--info" role="alert">
+    <p>
+      Pour ne pas perdre les données que vous avez déclarées, vous pouvez
+      <router-link
+        :to="{ name: 'revenirPlusTard' }"
+        data-testid="come-back-later-link"
+        >sauvegarder votre simulation</router-link
+      >
+      ou garder cet onglet ouvert, puis actualiser la page une fois que le
+      problème sera résolu.
+    </p>
+  </div>
+</template>

src/components/error-block.vue

@@ -22,16 +22,6 @@
       en joignant si possible une capture d'écran. Nous vous répondrons au plus
       vite et corrigerons le problème dès que possible.
     </p>
-    <p>
-      Pour ne pas perdre les données que vous avez déclarées, vous pouvez
-      <router-link
-        :to="{ name: 'revenirPlusTard' }"
-        data-testid="come-back-later-link"
-        >sauvegarder votre simulation</router-link
-      >
-      ou garder cet onglet ouvert, puis actualiser la page une fois que le
-      problème sera résolu.
-    </p>
     <div>
       <button
         class="fr-btn fr-btn--tertiary-no-outline fr-btn--sm fr-mt-2w"
@@ -52,6 +42,7 @@ import { sendError } from "@/plugins/mails.js"
 import { useStore } from "@/stores/index.js"
 import { useResultsStore } from "@/stores/results.js"
 import { EventAction, EventCategory } from "@lib/enums/event.js"
+import AlertRevenirPlusTard from "@/components/alert-revenir-plus-tard.vue"
 
 export default {
   name: "ErrorBlock",
@@ -63,6 +54,7 @@ export default {
   },
   data() {
     return {
+      alertRevenirPlusTard: AlertRevenirPlusTard,
       showDetails: false,
       issueTrackingEvent: {
         action: EventAction.Support,

src/components/modals/errors-email-and-sms-modal.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue"
 import { useStore } from "@/stores/index.js"
+import AlertRevenirPlusTard from "@/components/alert-revenir-plus-tard.vue"
 
 const store = useStore()
 
@@ -35,6 +36,16 @@ const recapEmailState = computed(() => store.recapEmailState)
           numéro valide ou utiliser l'envoi par email seulement.
         </p>
       </div>
+      <div
+        v-if="
+          recapPhoneState === 'error' ||
+          recapEmailState === 'error' ||
+          recapPhoneState === 'invalid-address'
+        "
+        class="fr-mt-2w"
+      >
+        <AlertRevenirPlusTard />
+      </div>
       <div
         v-if="recapPhoneState === 'ok' && recapEmailState === 'ok'"
         class="fr-alert fr-alert--success"

src/views/simulation/resultats/resultats.vue

@@ -33,6 +33,7 @@
 
   <ErrorBlock v-if="error" />
   <ErrorSaveBlock v-if="hasErrorSave" />
+  <AlertRevenirPlusTard v-if="hasErrorSave || error" class="fr-mb-2w" />
   <div v-show="shouldDisplayResults">
     <div v-if="!isEmpty(benefits)">
       <p class="fr-text--lg">
@@ -80,6 +81,7 @@
 </template>
 
 <script setup lang="ts">
+import AlertRevenirPlusTard from "@/components/alert-revenir-plus-tard.vue"
 import BenefitsList from "@/components/benefits-list.vue"
 import ErrorBlock from "@/components/error-block.vue"
 import ErrorSaveBlock from "@/components/error-save-block.vue"