Standardize securing footer

frontend/src/utils/firearms-utils/get-next-route-after-result.ts

@@ -1,6 +1,6 @@
 import { TYPOLOGIES, MEASURED_GUNS_TYPOLOGIES } from '@/utils/firearms-utils/index'
 
-export const getNextRouteAfterResult = ({ securingTutorial, confidenceLevel, typology, gunLength, gunBarrelLength }) => {
+export const getNextRouteAfterResult = (securingTutorial: boolean, confidenceLevel: string, typology: string, gunLength: number, gunBarrelLength: number) => {
   const isCardDetected = gunLength !== null && gunBarrelLength !== null
   const isMeasuredGun = MEASURED_GUNS_TYPOLOGIES.includes(typology)
 

frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue

@@ -2,6 +2,7 @@
 import { isUserUsingCrosscall } from '@/utils/isUserUsingCrosscall'
 
 import StepsGuide from '@/components/StepsGuide.vue'
+import SecuringFooter from './SecuringFooter.vue'
 
 const steps = ['Mise en garde', 'Consignes de sécurité', 'Photo']
 const currentStep = ref(0)
@@ -79,24 +80,9 @@ const currentStep = ref(0)
         </div>
       </template>
     </div>
-    <div class="footer">
-      <div class="fr-col-12 fr-col-lg-6 footer-actions mx-auto">
-        <DsfrButton
-          class="m-1 flex justify-center w-100"
-          icon="ri-arrow-left-line"
-          :secondary="true"
-          label="Précédent"
-          @click="currentStep > 0 ? currentStep-- : $router.push({ name: 'StartPage' })"
-        />
-        <DsfrButton
-          class="m-1 flex justify-center w-100"
-          icon="ri-arrow-right-line"
-          data-testid="button-next"
-          label="Suivant"
-          :icon-right="true"
-          @click="currentStep < 2 ? currentStep++ : $router.push({ name: 'InstructionsPage' })"
-        />
-      </div>
-    </div>
+    <SecuringFooter
+      @back-click="currentStep > 0 ? currentStep-- : $router.push({ name: 'StartPage' })"
+      @next-click="currentStep < 2 ? currentStep++ : $router.push({ name: 'InstructionsPage', query: { securingTutorial: 'true' } })"
+    />
   </div>
 </template>

frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue

@@ -66,33 +66,22 @@ function goToMissingCardPageIfMissing () {
   </div>
   <div class="footer">
     <div class="fr-col-11 fr-col-lg-6 mx-auto">
-      <router-link
-        v-slot="{navigate}"
-        class="navigate"
-        :to="{name: goToMissingCardPageIfMissing()}"
-      >
-        <DsfrButton
-          class="flex justify-center !w-full"
-          label="Je veux identifier mon arme"
-          icon="ri-arrow-right-line"
-          :icon-right="true"
-          data-testid="go-to-identification"
-          @click="navigate()"
-        />
-      </router-link>
-      <router-link
-        v-slot="{navigate}"
-        :to="{name:'StartPage'}"
-      >
-        <DsfrButton
-          class="mt-3 flex justify-center !w-full"
-          label="Retour à l'accueil"
-          icon="ri-home-4-line"
-          :icon-right="true"
-          secondary
-          @click="navigate()"
-        />
-      </router-link>
+      <DsfrButton
+        class="flex justify-center !w-full"
+        label="Je veux identifier mon arme"
+        icon="ri-arrow-right-line"
+        :icon-right="true"
+        data-testid="go-to-identification"
+        @click="$router.push({name: goToMissingCardPageIfMissing()})"
+      />
+      <DsfrButton
+        class="mt-3 flex justify-center !w-full"
+        label="Retour à l'accueil"
+        icon="ri-home-4-line"
+        :icon-right="true"
+        secondary
+        @click="$router.push({name:'StartPage'})"
+      />
     </div>
   </div>
 </template>

frontend/src/views/GuideSecuringFirearm/SecuringFooter.vue

@@ -1,66 +1,32 @@
 <script lang="ts" setup>
-import type { RouteLocationRaw } from 'vue-router'
 
-const props = defineProps<{
-  backTo: RouteLocationRaw
-  nextTo: RouteLocationRaw
-  onBackClick:() => void
-  onNextClick:() => void
-  nextDisabled: boolean
+defineProps<{
+  onBackClick?:() => void
+  onNextClick?:() => void
+  nextDisabled?: boolean
 }>()
 
-const nextClick = (navigate: () => void) => {
-  if (props.onNextClick) {
-    props.onNextClick()
-  }
-  navigate()
-}
-const backClick = (navigate: () => void) => {
-  if (props.onBackClick) {
-    props.onBackClick()
-  }
-  navigate()
-}
 </script>
 
 <template>
   <div class="footer">
-    <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
-      <RouterLink
-        v-slot="{ navigate }"
-        class="m-1"
-        :to="backTo"
-      >
-        <DsfrButton
-          class="flex justify-center !w-full"
-          icon="ri-arrow-left-line"
-          :secondary="true"
-          label="Précédent"
-          @click.stop.prevent="backClick(navigate)"
-        />
-      </RouterLink>
-      <RouterLink
-        v-slot="{ navigate }"
-        class="m-1"
-        :to="nextTo"
-      >
-        <DsfrButton
-          class="flex justify-center !w-full"
-          icon="ri-arrow-right-line"
-          :disabled="nextDisabled"
-          data-testid="button-next"
-          label="Suivant"
-          :icon-right="true"
-          @click.stop.prevent="nextClick(navigate)"
-        />
-      </RouterLink>
+    <div class="fr-col-12 fr-col-lg-6 footer-actions mx-auto">
+      <DsfrButton
+        class="flex justify-center !w-full"
+        icon="ri-arrow-left-line"
+        :secondary="true"
+        label="Précédent"
+        @click="onBackClick"
+      />
+      <DsfrButton
+        class="flex justify-center !w-full"
+        icon="ri-arrow-right-line"
+        :disabled="nextDisabled"
+        data-testid="button-next"
+        label="Suivant"
+        :icon-right="true"
+        @click="onNextClick"
+      />
     </div>
   </div>
 </template>
-
-<style scoped>
-.footer a {
-  width: 50%;
-}
-
-</style>

frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 
+import { useRouter } from 'vue-router'
+
 import { useStepsStore } from '@/stores/steps'
 import { useResultStore } from '@/stores/result'
 import { TYPOLOGIES } from '@/utils/firearms-utils/index'
 
 import AskingExpert from '@/components/AskingExpert.vue'
 import SecuringFooter from './SecuringFooter.vue'
 
+const router = useRouter()
 const props = defineProps<{
   step: 1 | 2 | 3
 }>()
@@ -71,24 +74,10 @@ const nextTo = computed(() => {
   }
 })
 
-const backTo = computed(() => {
-  if (props.step === 1) {
-    return { name: 'InstructionsPage' }
-  }
-  if (props.step === 2) {
-    return {
-      name: 'SecuringSelectOption',
-      params: { step: '1' },
-    }
-  }
-  if (props.step === 3) {
-    return {
-      name: 'SecuringSelectOption',
-      params: { step: '2' },
-    }
-  }
-  return { name: 'InstructionsPage' }
-})
+function nextClick () {
+  updateTypology()
+  router.push(nextTo.value)
+}
 
 </script>
 
@@ -173,10 +162,9 @@ const backTo = computed(() => {
       <div class="big-blank" />
     </div>
     <SecuringFooter
-      :back-to="backTo"
-      :next-to="nextTo"
       :next-disabled="disabledValidation"
-      @next-click="updateTypology()"
+      @back-click="$router.back()"
+      @next-click="nextClick"
     />
   </div>
 </template>
@@ -187,10 +175,6 @@ const backTo = computed(() => {
   margin-bottom: 1rem;
 }
 
-.fr-content-media {
-  margin-block: 0.5rem;
-}
-
 .video-container {
   margin: 0 !important;
   padding: 0 !important;
@@ -234,6 +218,6 @@ const backTo = computed(() => {
 }
 
 .footer button {
-width: 50%;
+  width: 50%;
 }
 </style>

frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
 
 import { useStepsStore } from '@/stores/steps'
 import { useResultStore } from '@/stores/result'
 
 import { TYPOLOGIES } from '@/utils/firearms-utils/index'
+import SecuringFooter from '@/views/GuideSecuringFirearm/SecuringFooter.vue'
 
 import AskingExpert from '@/components/AskingExpert.vue'
 
-const router = useRouter()
 const resultStore = useResultStore()
 const stepsStore = useStepsStore()
 
@@ -27,7 +26,7 @@ const selectedOption = computed(() => {
 
 <template>
   <div class="fr-container">
-    <div class="result fr-col-11 fr-col-lg-6 mx-auto">
+    <div class="fr-col-12 fr-col-lg-6 mx-auto">
       <h2 class="mt-3 mb-1 text-center">
         Mettre en sécurité mon arme
       </h2>
@@ -68,26 +67,11 @@ const selectedOption = computed(() => {
         </div>
         <AskingExpert />
       </div>
-      <div class="footer">
-        <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
-          <DsfrButton
-            class="m-1 flex justify-center"
-            icon="ri-arrow-left-line"
-            :secondary="true"
-            label="Précédent"
-            @click="router.back()"
-          />
-          <DsfrButton
-            class="m-1 flex justify-center"
-            icon="ri-arrow-right-line"
-            data-testid="button-next"
-            label="Suivant"
-            :icon-right="true"
-            @click="router.push({ name: 'SecuringAchievement' })"
-          />
-        </div>
-      </div>
     </div>
+    <SecuringFooter
+      @back-click="$router.back()"
+      @next-click="$router.push({ name: 'SecuringAchievement' })"
+    />
   </div>
 </template>
 

frontend/src/views/InstructionsPage.vue

@@ -3,7 +3,7 @@ import GoodExamplePhoto from '@/assets/instruction-screen-gun.webp'
 
 import { ref } from 'vue'
 import axios from 'axios'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 import { useResultStore } from '@/stores/result'
 import { useStepsStore } from '@/stores/steps'
@@ -15,6 +15,7 @@ const fileInput = ref<HTMLInputElement | null>(null)
 const resultStore = useResultStore()
 const stepsStore = useStepsStore()
 const router = useRouter()
+const route = useRoute()
 
 const handledImageTypes = 'image/jpeg, image/png, image/tiff, image/webp, image/bmp, image/gif'
 
@@ -37,13 +38,14 @@ async function uploadImage (base64: string, fileName: string) {
       img: base64,
       imgUrl: data.path,
     })
-    const nextRoute = getNextRouteAfterResult({
-      securingTutorial: resultStore.securingTutorial,
-      confidenceLevel: resultStore.confidenceLevel,
-      typology: resultStore.typology,
-      gunLength: resultStore.gunLength,
-      gunBarrelLength: resultStore.gunBarrelLength,
-    })
+    console.log(route.params)
+    const nextRoute = getNextRouteAfterResult(
+      Boolean(route.query.securingTutorial),
+      resultStore.confidenceLevel,
+      resultStore.typology,
+      resultStore.gunLength,
+      resultStore.gunBarrelLength,
+    )
     router.push(nextRoute)
   } catch (error) {
     console.log(error)
@@ -126,7 +128,6 @@ function onFileSelected (event: InputEvent & { target: InputEvent['target'] & {
         alt="photo d'une carte posée au sol et arme tournée vers la droite et centrée"
       />
     </div>
-    <div class="big-blank" />
     <div class="footer">
       <div
         v-if="!loading"