Ajout groupe de boutons de démarrage de simulation depuis la page "Toutes les aides"

src/components/buttons/home-simulation-group-buttons.vue

@@ -1,46 +1,76 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance } from "vue"
+import { computed, getCurrentInstance, defineProps } from "vue"
 import { useStore } from "@/stores/index.js"
-import { useRoute } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 import { EventAction, EventCategory } from "@lib/enums/event.js"
 
-const { proxy } = getCurrentInstance() as any
-
 const store = useStore()
 const route = useRoute()
+const router = useRouter()
+
+const { proxy } = getCurrentInstance() as any
+const SIMULATION_START_PATH = "/simulation/individu/demandeur/date_naissance"
 
 const hasExistingSituation = computed(() => store.passSanityCheck)
 
 const ctaLabel = computed(() =>
   hasExistingSituation.value
     ? "Commencer une nouvelle simulation"
-    : "Je commence"
+    : "Commencer une simulation"
 )
 
+const initializeOpenfiscaParameters = () => {
+  store.setOpenFiscaParameters()
+  if (process.env.VITE_CONTEXT !== "production") {
+    store.verifyOpenfiscaBenefitVariables()
+  }
+}
+
 const newSituation = () => {
   store.clear(route.query.external_id as string)
-  next()
+  initializeOpenfiscaParameters()
+  router.push(SIMULATION_START_PATH)
 }
 
-const next = () => {
-  store.setOpenFiscaParameters()
-  if (process.env.VITE_CONTEXT !== "production") {
-    store.verifyBenefitVariables()
-  }
+const resumeSimulation = () => {
+  initializeOpenfiscaParameters()
   proxy?.$push()
 }
+
+const props = defineProps({
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: null,
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+})
 </script>
 
 <template>
-  <ul class="fr-btns-group">
+  <ul
+    class="fr-btns-group"
+    :class="{
+      'fr-btns-group--inline-md': props.horizontal,
+      'fr-btns-group--sm': props.size === 'small',
+      'fr-btns-group--inline-reverse': props.reverse,
+      'fr-btns-group--right': props.reverse,
+    }"
+  >
     <li v-if="hasExistingSituation">
       <button
         v-analytics="{
           action: EventAction.ReprendreMaSimulation,
           category: EventCategory.Home,
         }"
         class="fr-btn"
-        @click="next"
+        @click="resumeSimulation"
       >
         Reprendre ma simulation
       </button>
@@ -60,7 +90,7 @@ const next = () => {
         v-analytics="{ action: ctaLabel, category: EventCategory.Home }"
         class="fr-btn"
         data-testid="new-simulation"
-        to="/simulation/individu/demandeur/date_naissance"
+        :to="SIMULATION_START_PATH"
         @click="newSituation"
       >
         {{ ctaLabel }}

src/router.ts

@@ -322,7 +322,7 @@ router.beforeEach((to, from, next) => {
       process.env.VITE_CONTEXT !== "production" ||
       to?.redirectedFrom?.fullPath === "/init-ci"
     ) {
-      store.verifyBenefitVariables()
+      store.verifyOpenfiscaBenefitVariables()
     }
 
     if (

src/stores/index.ts

@@ -546,7 +546,7 @@ export const useStore = defineStore("store", {
           this.openFiscaParameters = response.data
         })
     },
-    verifyBenefitVariables() {
+    verifyOpenfiscaBenefitVariables() {
       return axios
         .get("/api/openfisca/missingbenefits")
         .then((response) => response.data)

src/styles/aides-jeunes.css

@@ -280,6 +280,13 @@ textarea {
   text-align: right;
 }
 
+.aj-home-group-buttons-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+}
+
 @media (max-width: 576px) {
   .aj-hero-section {
     max-height: none;
@@ -297,6 +304,11 @@ textarea {
     padding-bottom: 72px;
   }
 
+  .aj-home-group-buttons-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .aj-action-buttons {
     position: fixed;
     inset: auto 0 0 0;

src/views/liste-aides.vue

@@ -1,18 +1,32 @@
 <template>
   <article class="fr-article">
-    <h1>Toutes les aides</h1>
-    <BackButton
-      size="small"
-      data-testid="benefits-liste-back-button"
-      class="fr-mb-2w"
-      as-link
-      to="/"
-    >
-      Retour à l'accueil
-    </BackButton>
+    <div class="fr-grid-row fr-grid-row--gutters">
+      <div class="fr-col-12">
+        <h1>Toutes les aides</h1>
+      </div>
+      <div class="aj-home-group-buttons-container">
+        <div class="fr-mb-2w fr-mr-2w">
+          <BackButton
+            data-testid="benefits-liste-back-button"
+            as-link
+            to="/"
+            size="small"
+          >
+            Retour à l'accueil
+          </BackButton>
+        </div>
+        <HomeSimulationGroupButtons
+          :horizontal="true"
+          size="small"
+          :reverse="true"
+        />
+      </div>
+    </div>
+
     <div>
-      <p class="fr-badge fr-mb-2w">Total : {{ benefitsCount }} aides</p>
+      <p class="fr-badge fr-my-2w">Total : {{ benefitsCount }} aides</p>
     </div>
+
     <div class="fr-grid-row fr-grid-row--gutters">
       <div class="fr-col-12 fr-col-md-6">
         <div class="fr-form-group">
@@ -123,7 +137,7 @@ import CommuneMethods from "@/lib/commune.js"
 import { Commune } from "@lib/types/commune.d.js"
 import { capitalize, normalizeString } from "@lib/utils.js"
 import BackButton from "@/components/buttons/back-button.vue"
-
+import HomeSimulationGroupButtons from "@/components/buttons/home-simulation-group-buttons.vue"
 const zipCode = ref<string | null>(null)
 const selectedCommune = ref<Commune | null>(null)
 const searchTerms = ref<string | null>(null)
@@ -232,3 +246,5 @@ const alertClass = computed(() =>
   countFilteredBenefits() > 0 ? "fr-alert--success" : "fr-alert--error"
 )
 </script>
+
+<style scoped></style>