From 6c0137d1e42bd89d55b2089fa7bbc54d9081ad9b Mon Sep 17 00:00:00 2001
From: Thomas Bernard <thomashbernard@gmail.com>
Date: Wed, 5 Jun 2024 11:53:35 +0200
Subject: [PATCH] Merge resultStore and stepsStore

---
 frontend/.eslintrc-auto-import.json           |  1 -
 frontend/src/auto-imports.d.ts                |  8 ++--
 frontend/src/components/AskingExpert.vue      | 28 +++++++-------
 frontend/src/components/PopupVideo.vue        |  6 +--
 frontend/src/components/ResultPage.vue        | 26 ++++++-------
 frontend/src/stores/result.ts                 | 23 ++++++++---
 frontend/src/stores/steps.ts                  | 38 -------------------
 frontend/src/utils/storage-utils.ts           | 13 +++----
 .../GuideIdentificationFirearm.vue            | 20 +++++-----
 .../IdentificationBlankGun.vue                | 16 +++-----
 .../IdentificationSelectAmmo.vue              | 16 ++++----
 .../SecuringAchievement.vue                   | 10 ++---
 .../SecuringSelectOptionContent.vue           | 20 +++++-----
 .../SecuringTutorialContent.vue               | 10 ++---
 frontend/src/views/InstructionsPage.vue       | 18 ++++-----
 frontend/src/views/MissingCardPage.vue        |  6 +--
 frontend/src/views/StartPage.vue              |  8 ++--
 17 files changed, 109 insertions(+), 158 deletions(-)
 delete mode 100644 frontend/src/stores/steps.ts

diff --git a/frontend/.eslintrc-auto-import.json b/frontend/.eslintrc-auto-import.json
index 378e58a2..85f45d94 100644
--- a/frontend/.eslintrc-auto-import.json
+++ b/frontend/.eslintrc-auto-import.json
@@ -238,7 +238,6 @@
     "useSpeechRecognition": true,
     "useSpeechSynthesis": true,
     "useStepper": true,
-    "useStepsStore": true,
     "useStorage": true,
     "useStorageAsync": true,
     "useStyleTag": true,
diff --git a/frontend/src/auto-imports.d.ts b/frontend/src/auto-imports.d.ts
index 85e2547e..d78c821a 100644
--- a/frontend/src/auto-imports.d.ts
+++ b/frontend/src/auto-imports.d.ts
@@ -238,9 +238,9 @@ declare global {
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
-  const useStepsStore: typeof import('./stores/steps')['useStepsStore']
   const useStorage: typeof import('@vueuse/core')['useStorage']
   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStore: typeof import('./stores/result')['useStore']
   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
   const useSupported: typeof import('@vueuse/core')['useSupported']
   const useSwipe: typeof import('@vueuse/core')['useSwipe']
@@ -519,7 +519,6 @@ declare module 'vue' {
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useResultStore: UnwrapRef<typeof import('./stores/result')['useResultStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScheme: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useScheme']>
@@ -537,9 +536,9 @@ declare module 'vue' {
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
-    readonly useStepsStore: UnwrapRef<typeof import('./stores/steps')['useStepsStore']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStore: UnwrapRef<typeof import('./stores/result')['useStore']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
@@ -811,7 +810,6 @@ declare module '@vue/runtime-core' {
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
-    readonly useResultStore: UnwrapRef<typeof import('./stores/result')['useResultStore']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
     readonly useScheme: UnwrapRef<typeof import('@gouvminint/vue-dsfr')['useScheme']>
@@ -829,9 +827,9 @@ declare module '@vue/runtime-core' {
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
-    readonly useStepsStore: UnwrapRef<typeof import('./stores/steps')['useStepsStore']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStore: UnwrapRef<typeof import('./stores/result')['useStore']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
diff --git a/frontend/src/components/AskingExpert.vue b/frontend/src/components/AskingExpert.vue
index 9e317d8f..ce993be5 100644
--- a/frontend/src/components/AskingExpert.vue
+++ b/frontend/src/components/AskingExpert.vue
@@ -4,41 +4,39 @@ import axios from 'axios'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useSnackbarStore } from '@/stores/snackbar'
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import SnackbarAlert from '@/components/SnackbarAlert.vue'
 
 const { setMessage } = useSnackbarStore()
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
+const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-const typology = computed(() => resultStore.typology)
-const confidence = computed(() => resultStore.confidence)
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const imgUrl = computed(() => resultStore.imgUrl)
+const typology = computed(() => store.typology)
+const confidence = computed(() => store.confidence)
+const confidenceLevel = computed(() => store.confidenceLevel)
+const imgUrl = computed(() => store.imgUrl)
 
 const showModal = ref(false)
 
 function onClose () {
-  stepsStore.tutorialFeedback = ''
+  store.tutorialFeedback = ''
   showModal.value = false
 }
 
 async function sendTutorialFeedback () {
   const feedback = {
     image_url: imgUrl.value,
-    tutorial_feedback: stepsStore.tutorialFeedback,
+    tutorial_feedback: store.tutorialFeedback,
     label: typology.value,
-    tutorial_option: stepsStore.currentOptionStep[stepsStore.currentStep] || null,
+    tutorial_option: store.currentOptionStep[store.currentStep] || null,
     route_name: route.name,
     confidence: confidence.value,
     confidence_level: confidenceLevel.value,
   }
   await axios.post('/tutorial-feedback', feedback)
     .then(async () => {
-      stepsStore.tutorialFeedback = feedback.tutorial_feedback
+      store.tutorialFeedback = feedback.tutorial_feedback
       setMessage({ type: 'success', message: 'Votre message a été pris en compte' })
     })
     .catch(async (err) => {
@@ -46,7 +44,7 @@ async function sendTutorialFeedback () {
       setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant de votre message.' })
     })
     .finally(() => setTimeout(() => {
-      stepsStore.tutorialFeedback = ''
+      store.tutorialFeedback = ''
       router.push({ name: 'ResultPage' })
     }, 3000))
 }
@@ -84,7 +82,7 @@ async function sendTutorialFeedback () {
             <br>En attendant, vous pouvez nous permettre d'améliorer le contenu de ce tutoriel en nous décrivant votre problème ci-dessous.
           </p>
           <DsfrInput
-            v-model="stepsStore.tutorialFeedback"
+            v-model="store.tutorialFeedback"
             label="Décrivez votre problème"
             label-visible
             is-textarea
@@ -97,7 +95,7 @@ async function sendTutorialFeedback () {
         <div class="modal-footer">
           <DsfrButton
             label="Valider et retour au résultat"
-            :disabled="!stepsStore.tutorialFeedback"
+            :disabled="!store.tutorialFeedback"
             @click="sendTutorialFeedback()"
           />
         </div>
diff --git a/frontend/src/components/PopupVideo.vue b/frontend/src/components/PopupVideo.vue
index f98bb9ff..d2621c01 100644
--- a/frontend/src/components/PopupVideo.vue
+++ b/frontend/src/components/PopupVideo.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import semiAutoMilitairePistoletMitralleurVideoS from '@/assets/guide-mise-en-securite/videos/semi_auto_militaire_autre/semi_auto_mil_uzi_surete.mp4'
 import epauleAVerrouVideoS from '@/assets/guide-mise-en-securite/videos/epaule_a_verrou/epaule_verrou_surete.mp4'
 
-const resultStore = useResultStore()
-const typology = computed(() => resultStore.typology)
+const store = useStore()
+const typology = computed(() => store.typology)
 const showModal = ref(false)
 
 function onClose () {
diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
index 78f892f4..e3225248 100644
--- a/frontend/src/components/ResultPage.vue
+++ b/frontend/src/components/ResultPage.vue
@@ -5,23 +5,21 @@ import SnackbarAlert from '@/components/SnackbarAlert.vue'
 import { TYPOLOGIES, MEASURED_GUNS_TYPOLOGIES } from '@/utils/firearms-utils/index'
 import { isUserUsingCrosscall } from '@/utils/isUserUsingCrosscall'
 import { useSnackbarStore } from '@/stores/snackbar'
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import { getMentionsFromCategories } from '@/utils/mentions'
 
 const { setMessage } = useSnackbarStore()
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
+const store = useStore()
 
-const confidence = computed(() => resultStore.confidence)
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const img = computed(() => resultStore.img)
+const confidence = computed(() => store.confidence)
+const confidenceLevel = computed(() => store.confidenceLevel)
+const img = computed(() => store.img)
 
-const typology = TYPOLOGIES[resultStore.typology]
+const typology = TYPOLOGIES[store.typology]
 
-const isDummy = computed(() => stepsStore.isDummy)
+const isDummy = computed(() => store.isDummy)
 const hasDummyOptions = typology?.dummyOptions !== undefined
-const isCardDetected = computed(() => resultStore.gunLength !== null && resultStore.gunBarrelLength !== null)
+const isCardDetected = computed(() => store.gunLength !== null && store.gunBarrelLength !== null)
 
 const isUp = ref(false)
 const isDown = ref(false)
@@ -30,14 +28,14 @@ const isFeedbackDone = ref(false)
 const label = computed(() => typology?.displayLabel)
 
 const category = computed(() => {
-  if (stepsStore.selectedAlarmGun && stepsStore.selectedAlarmGun !== '') {
+  if (store.selectedAlarmGun && store.selectedAlarmGun !== '') {
     return 'D'
   } else if (isDummy.value) {
     return 'Non Classée'
   } else if (typology.displayLabel === 'Revolver') {
     return typology?.categoryWithoutSecuring
   } else {
-    return typology?.getCategory(resultStore.gunLength, resultStore.gunBarrelLength)
+    return typology?.getCategory(store.gunLength, store.gunBarrelLength)
   }
 })
 
@@ -45,7 +43,7 @@ const disclaimer = computed(() => typology && Object.hasOwn(typology, 'getDiscla
 
 function sendFeedback (isCorrect: boolean) {
   const json = {
-    image_url: resultStore.imgUrl,
+    image_url: store.imgUrl,
     feedback: isCorrect,
     confidence: confidence.value,
     label: typology.value,
@@ -132,7 +130,7 @@ function sendFeedback (isCorrect: boolean) {
                 Arme factice de type {{ label }}
               </h2>
               <h2
-                v-else-if="stepsStore.selectedAlarmGun"
+                v-else-if="store.selectedAlarmGun"
                 class="fr-alert__title"
               >
                 Arme d'alarme de type {{ label }}
diff --git a/frontend/src/stores/result.ts b/frontend/src/stores/result.ts
index 49d0f5cb..39a6a195 100644
--- a/frontend/src/stores/result.ts
+++ b/frontend/src/stores/result.ts
@@ -1,12 +1,13 @@
 import { defineStore } from 'pinia'
 import { useLocalStorage } from '@vueuse/core'
+import { computed } from 'vue'
 
 import { serializer } from '@/utils/storage-utils'
 import type { TYPOLOGIES } from '@/utils/firearms-utils'
 
 type TypologyKey = keyof typeof TYPOLOGIES
 
-export const useResultStore = defineStore('result', () => {
+export const useStore = defineStore('result', () => {
   const typology = useLocalStorage<TypologyKey>('typology', null, { serializer })
   const confidence = useLocalStorage<number>('confidence', null, { serializer })
   const confidenceLevel = useLocalStorage<string>('confidenceLevel', null, { serializer })
@@ -17,14 +18,19 @@ export const useResultStore = defineStore('result', () => {
   const resultText = useLocalStorage<string>('resultText', null, { serializer })
   const securingTutorial = ref(false)
 
-  const updateTypology = (selectedOptionStep: TypologyKey) => {
-    const extra = (selectedOptionStep === 'revolver_black_powder' ? '_black_powder' : '')
-    typology.value = typology.value + extra as TypologyKey
+  const selectedOptions = useLocalStorage<Array<string>>('selectedOptions', [])
+  const selectedAmmo = useLocalStorage<string | undefined>('selectedAmmo', undefined, { serializer })
+  const selectedAlarmGun = useLocalStorage<string | undefined>('selectedAlarmGun', undefined, { serializer })
+  const tutorialFeedback = useLocalStorage('tutorialFeedback', '')
+  const isDummy = useLocalStorage('isDummy', computed(() => !!(selectedAmmo.value === 'billes')), { serializer })
+  const isModalTransparentAmmoOpened = useLocalStorage<boolean | undefined>('isModalTransparentAmmoOpened', undefined, { serializer })
+
+  function $reset () {
+    selectedAlarmGun.value = ''
   }
 
   return {
     typology,
-    updateTypology,
     confidence,
     confidenceLevel,
     gunLength,
@@ -33,5 +39,12 @@ export const useResultStore = defineStore('result', () => {
     imgUrl,
     resultText,
     securingTutorial,
+    selectedOptions,
+    selectedAmmo,
+    selectedAlarmGun,
+    tutorialFeedback,
+    isDummy,
+    isModalTransparentAmmoOpened,
+    $reset,
   }
 })
diff --git a/frontend/src/stores/steps.ts b/frontend/src/stores/steps.ts
deleted file mode 100644
index 942f55c7..00000000
--- a/frontend/src/stores/steps.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { defineStore } from 'pinia'
-import { computed } from 'vue'
-import { useLocalStorage } from '@vueuse/core'
-import { serializer } from '@/utils/storage-utils'
-
-export const useStepsStore = defineStore('steps', () => {
-  const selectedOptions = useLocalStorage<Array<string>>('selectedOptions', [])
-
-  const selectedAmmo = useLocalStorage<string | undefined>('selectedAmmo', undefined, { serializer })
-  const selectedAlarmGun = useLocalStorage<string | undefined>('selectedAlarmGun', undefined, { serializer })
-  const tutorialFeedback = useLocalStorage('tutorialFeedback', '')
-
-  const isDummy = useLocalStorage('isDummy', computed(() => !!(selectedAmmo.value === 'billes')), { serializer })
-
-  const isModalTransparentAmmoOpened = useLocalStorage<boolean | undefined>('isModalTransparentAmmoOpened', undefined, { serializer })
-
-  function setAmmo (ammo?: string) {
-    selectedAmmo.value = ammo
-  }
-
-  function $reset () {
-    selectedAlarmGun.value = ''
-  }
-
-  return {
-    selectedOptions,
-    selectedAmmo,
-    selectedAlarmGun,
-    tutorialFeedback,
-    isDummy,
-    setModalTransparentAmmoOpened (val?: boolean) {
-      isModalTransparentAmmoOpened.value = val
-    },
-    isModalTransparentAmmoOpened,
-    setAmmo,
-    $reset,
-  }
-})
diff --git a/frontend/src/utils/storage-utils.ts b/frontend/src/utils/storage-utils.ts
index 32c7f393..2d7697b0 100644
--- a/frontend/src/utils/storage-utils.ts
+++ b/frontend/src/utils/storage-utils.ts
@@ -1,6 +1,5 @@
 import type { NavigationGuardWithThis } from 'vue-router'
-import { useResultStore } from '@/stores/result'
-import { useStepsStore } from '@/stores/steps'
+import { useStore } from '@/stores/result'
 
 export const serializer = {
   // @ts-ignore this uses dynamic values
@@ -9,13 +8,9 @@ export const serializer = {
 }
 
 export const clearLocalStorage: NavigationGuardWithThis<undefined> = (to, from, next) => {
-  const { setAmmo, setModalTransparentAmmoOpened } = useStepsStore()
-  const resultStore = useResultStore()
+  const store = useStore()
 
-  setModalTransparentAmmoOpened(undefined)
-  setAmmo(undefined)
-
-  resultStore.$patch({
+  store.$patch({
     typology: undefined,
     confidence: undefined,
     confidenceLevel: undefined,
@@ -24,6 +19,8 @@ export const clearLocalStorage: NavigationGuardWithThis<undefined> = (to, from,
     img: undefined,
     imgUrl: undefined,
     resultText: undefined,
+    isModalTransparentAmmoOpened: undefined,
+    selectedAmmo: undefined,
   })
 
   next()
diff --git a/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue b/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
index 6284d077..0f1e9ec2 100644
--- a/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
+++ b/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
@@ -8,23 +8,21 @@ import {
   TYPOLOGIES,
   ALARM_GUNS_TYPOLOGIES,
 } from '@/utils/firearms-utils/index'
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 
-const stepsStore = useStepsStore()
-const resultStore = useResultStore()
+const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
-const confidenceLevel = computed(() => resultStore.confidenceLevel)
-const typology = computed(() => resultStore.typology)
+const confidenceLevel = computed(() => store.confidenceLevel)
+const typology = computed(() => store.typology)
 
 const currentStep = ref(1)
 const isLowConfidence = confidenceLevel.value === 'low'
 
 const steps = computed(() => {
   if (TYPOLOGIES[typology]?.dummyOptions || !isLowConfidence) {
-    if (ALARM_GUNS_TYPOLOGIES.includes(resultStore.typology) && stepsStore.selectedAmmo === 'cartouches') {
+    if (ALARM_GUNS_TYPOLOGIES.includes(store.typology) && store.selectedAmmo === 'cartouches') {
       return ['Typologie de l\'arme', 'Compléments', 'Typologie de munitions', 'Identification d\'une arme d\'alarme', 'Résultat final']
     } else {
       return ['Typologie de l\'arme', 'Compléments', 'Typologie de munitions', 'Résultat final']
@@ -34,7 +32,7 @@ const steps = computed(() => {
   }
 })
 
-const disabledValidation = computed(() => currentStep.value === 3 && stepsStore.selectedAmmo === undefined)
+const disabledValidation = computed(() => currentStep.value === 3 && store.selectedAmmo === undefined)
 
 const goToNewRoute = () => {
   router.push({ name: identificationGuideSteps[currentStep.value - 1] })
@@ -56,8 +54,8 @@ const arrowOrCircleIcon = () => (
   currentStep.value === 4 ? 'ri-checkbox-circle-line' : 'ri-arrow-right-line'
 )
 
-const calculateRoute = (stepsStore) => {
-  return stepsStore.selectedAmmo === 'billes'
+const calculateRoute = (store) => {
+  return store.selectedAmmo === 'billes'
     ? { name: 'IdentificationFinalResult' }
     : { name: 'IdentificationBlankGun' }
 }
@@ -150,7 +148,7 @@ const showDiv = ref(false)
         :icon="arrowOrCircleIcon()"
         :label="goOnAndFollow"
         :icon-right="true"
-        @click="$router.push(calculateRoute(stepsStore)); currentStep++"
+        @click="$router.push(calculateRoute(store)); currentStep++"
       />
     </div>
   </div>
diff --git a/frontend/src/views/GuideIdentificationFirearm/IdentificationBlankGun.vue b/frontend/src/views/GuideIdentificationFirearm/IdentificationBlankGun.vue
index 17556355..774034ef 100644
--- a/frontend/src/views/GuideIdentificationFirearm/IdentificationBlankGun.vue
+++ b/frontend/src/views/GuideIdentificationFirearm/IdentificationBlankGun.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 import { ref, defineProps } from 'vue'
 
-import { useStepsStore } from '@/stores/steps'
+import { useStore } from '@/stores/result'
 import { arme_alarme as alarmGuns } from '@/utils/firearms-utils/arme-alarme'
 
-import { useResultStore } from '@/stores/result'
-
 import { TYPOLOGIES } from '@/utils/firearms-utils/index'
 
-const resultStore = useResultStore()
-const typology = TYPOLOGIES[resultStore.typology]
-
-const stepsStore = useStepsStore()
+const store = useStore()
+const typology = TYPOLOGIES[store.typology]
 
 const zoom = ref<number|null>(null)
 
@@ -19,7 +15,7 @@ defineProps<{
   showDiv: boolean
 }>()
 
-const alarmGunsOptions = alarmGuns.options.filter(gun => gun.typology === resultStore.typology)
+const alarmGunsOptions = alarmGuns.options.filter(gun => gun.typology === store.typology)
 
 </script>
 
@@ -53,7 +49,7 @@ const alarmGunsOptions = alarmGuns.options.filter(gun => gun.typology === result
         class="relative"
       >
         <DsfrRadioButton
-          v-model="stepsStore.selectedAlarmGun"
+          v-model="store.selectedAlarmGun"
           v-bind="gun"
           class="radio"
           :img="gun.img"
@@ -91,7 +87,7 @@ const alarmGunsOptions = alarmGuns.options.filter(gun => gun.typology === result
               id="radio-rich-2"
               type="radio"
               name="armeAlarme"
-              @input="stepsStore.selectedAlarmGun = ''"
+              @input="store.selectedAlarmGun = ''"
             >
             <label
               class="fr-label"
diff --git a/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue b/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
index 3bcf0e72..82154942 100644
--- a/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
+++ b/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted } from 'vue'
 
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 
 import TransparentMagazine from '@/assets/guide-identification/photos/semi_auto_militaire_autre/autre-epaule-transparent-magazine.jpg'
 import FocusTransparentMagazine from '@/assets/guide-identification/photos/semi_auto_militaire_autre/autre-epaule-transparent-magazine-focus.jpg'
@@ -12,17 +11,16 @@ import type { pistolet_semi_auto_moderne } from '@/utils/firearms-utils/pistolet
 import type { semi_auto_style_militaire_autre } from '@/utils/firearms-utils/semi-auto-style-militaire-autre' // eslint-disable-line camelcase
 import type { revolver } from '@/utils/firearms-utils/revolver'
 
-const resultStore = useResultStore()
-const stepsStore = useStepsStore()
+const store = useStore()
 
-const typology = computed(() => resultStore.typology)
+const typology = computed(() => store.typology)
 
 const selectedAmmo = computed({
   get  () {
-    return stepsStore.selectedAmmo
+    return store.selectedAmmo
   },
   set (ammo) {
-    stepsStore.setAmmo(ammo)
+    store.selectedAmmo = ammo
   },
 })
 
@@ -42,11 +40,11 @@ function closeModal () {
 
 function openModal () {
   showModal.value = true
-  stepsStore.isModalTransparentAmmoOpened = true
+  store.isModalTransparentAmmoOpened = true
 }
 
 onMounted(() => {
-  if (stepsStore.isModalTransparentAmmoOpened === undefined) {
+  if (store.isModalTransparentAmmoOpened === undefined) {
     openModal()
   } else { showModal.value = false }
 })
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
index 0c909385..b2a55a58 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { useResultStore } from '@/stores/result'
-import { TYPOLOGIES, MEASURED_GUNS_TYPOLOGIES } from '@/utils/firearms-utils/index'
+import { useStore } from '@/stores/result'
+import { MEASURED_GUNS_TYPOLOGIES, TYPOLOGIES } from '@/utils/firearms-utils/index'
 import { isUserUsingCrosscall } from '@/utils/isUserUsingCrosscall'
 import { DsfrButton } from '@gouvminint/vue-dsfr'
 
-const resultStore = useResultStore()
+const store = useStore()
 
-const typology = computed(() => resultStore.typology)
-const isCardDetected = computed(() => resultStore.gunLength !== null && resultStore.gunBarrelLength !== null)
+const typology = computed(() => store.typology)
+const isCardDetected = computed(() => store.gunLength !== null && store.gunBarrelLength !== null)
 
 function goToMissingCardPageIfMissing () {
   if (isCardDetected.value === false && MEASURED_GUNS_TYPOLOGIES.includes(typology.value)) {
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
index 8c35d402..e685421b 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue
@@ -3,8 +3,7 @@ import { computed, ref } from 'vue'
 
 import { useRouter } from 'vue-router'
 
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 import { TYPOLOGIES } from '@/utils/firearms-utils/index'
 
 import AskingExpert from '@/components/AskingExpert.vue'
@@ -15,21 +14,20 @@ const props = defineProps<{
   step: 1 | 2 | 3
 }>()
 
-const resultStore = useResultStore()
-const stepsStore = useStepsStore()
+const store = useStore()
 
-const typology = TYPOLOGIES[resultStore.typology]
+const typology = TYPOLOGIES[store.typology]
 
 const selectedOptionValue = computed({
   get () {
-    return stepsStore.selectedOptions[props.step - 1]
+    return store.selectedOptions[props.step - 1]
   },
   set (option) {
-    if (stepsStore.selectedOptions[props.step - 1]) { stepsStore.selectedOptions[props.step - 1] = option || '' } else { stepsStore.selectedOptions.push(option || '') }
+    if (store.selectedOptions[props.step - 1]) { store.selectedOptions[props.step - 1] = option || '' } else { store.selectedOptions.push(option || '') }
   },
 })
 
-const disabledValidation = computed(() => stepsStore.selectedOptions[props.step - 1] === undefined)
+const disabledValidation = computed(() => store.selectedOptions[props.step - 1] === undefined)
 
 const zoom = ref('')
 
@@ -40,14 +38,14 @@ const zoomOn = (imgValue: string) => {
 function updateTypology () {
   if (props.step === 1 && selectedOptionValue.value === 'revolver_black_powder') {
     // Remember if it is a revolver with black powder
-    resultStore.updateTypology(selectedOptionValue.value)
+    store.updateTypology(selectedOptionValue.value)
   }
 }
 
 const nextTo = computed(() => {
   if (typology.displayLabel === 'Revolver') {
     if (props.step === 1) {
-      if (stepsStore.selectedOptions.at(-1) === 'revolver_black_powder') {
+      if (store.selectedOptions[0] === 'revolver_black_powder') {
         return {
           name: 'SecuringAchievement',
         }
@@ -58,7 +56,7 @@ const nextTo = computed(() => {
       }
     }
     if (props.step === 2) {
-      if (stepsStore.selectedOptions.at(-1) !== 'revolver_portiere') {
+      if (store.selectedOptions.at(-1) !== 'revolver_portiere') {
         return {
           name: 'SecuringTutorialContent',
         }
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
index 701746cb..5d09e686 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringTutorialContent.vue
@@ -1,23 +1,21 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { useStepsStore } from '@/stores/steps'
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 
 import { TYPOLOGIES } from '@/utils/firearms-utils/index'
 import SecuringFooter from '@/views/GuideSecuringFirearm/SecuringFooter.vue'
 
 import AskingExpert from '@/components/AskingExpert.vue'
 
-const resultStore = useResultStore()
-const stepsStore = useStepsStore()
+const store = useStore()
 
-const typology = TYPOLOGIES[resultStore.typology]
+const typology = TYPOLOGIES[store.typology]
 
 // Tutorial object from last selected option
 const selectedOption = computed(() => {
   if (typology.securingSteps[0].text) {
-    return typology.securingSteps.at(stepsStore.selectedOptions.length - 1).options.find((option) => option.value === stepsStore.selectedOptions.at(-1))
+    return typology.securingSteps.at(store.selectedOptions.length - 1).options.find((option) => option.value === store.selectedOptions.at(-1))
   }
   return typology.securingSteps[0].options[0]
 })
diff --git a/frontend/src/views/InstructionsPage.vue b/frontend/src/views/InstructionsPage.vue
index 413ce73a..ad4205ec 100644
--- a/frontend/src/views/InstructionsPage.vue
+++ b/frontend/src/views/InstructionsPage.vue
@@ -5,15 +5,13 @@ import { ref } from 'vue'
 import axios from 'axios'
 import { useRouter, useRoute } from 'vue-router'
 
-import { useResultStore } from '@/stores/result'
-import { useStepsStore } from '@/stores/steps'
+import { useStore } from '@/stores/result'
 import { getNextRouteAfterResult } from '@/utils/firearms-utils/get-next-route-after-result'
 
 const loading = ref(false)
 const fileInput = ref<HTMLInputElement | null>(null)
 
-const resultStore = useResultStore()
-const stepsStore = useStepsStore()
+const store = useStore()
 const router = useRouter()
 const route = useRoute()
 
@@ -28,7 +26,7 @@ async function uploadImage (base64: string, fileName: string) {
 
   try {
     const { data } = await axios.post('/upload', fd)
-    resultStore.$patch({
+    store.$patch({
       typology: data.label,
       confidence: data.confidence,
       confidenceLevel: data.confidence_level,
@@ -41,10 +39,10 @@ async function uploadImage (base64: string, fileName: string) {
     console.log(route.params)
     const nextRoute = getNextRouteAfterResult(
       Boolean(route.query.securingTutorial),
-      resultStore.confidenceLevel,
-      resultStore.typology,
-      resultStore.gunLength,
-      resultStore.gunBarrelLength,
+      store.confidenceLevel,
+      store.typology,
+      store.gunLength,
+      store.gunBarrelLength,
     )
     router.push(nextRoute)
   } catch (error) {
@@ -150,7 +148,7 @@ function onFileSelected (event: InputEvent & { target: InputEvent['target'] & {
             label="Prendre la photo"
             icon="ri-camera-fill"
             :icon-right="true"
-            @click="$refs.fileInput.click(); stepsStore.$reset()"
+            @click="$refs.fileInput.click(); store.$reset()"
           />
         </div>
       </div>
diff --git a/frontend/src/views/MissingCardPage.vue b/frontend/src/views/MissingCardPage.vue
index cf6ab9f3..dbdc524a 100644
--- a/frontend/src/views/MissingCardPage.vue
+++ b/frontend/src/views/MissingCardPage.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useResultStore } from '@/stores/result'
-const resultStore = useResultStore()
+import { useStore } from '@/stores/result'
+const store = useStore()
 
 </script>
 
@@ -31,7 +31,7 @@ const resultStore = useResultStore()
         <div class="fr-col">
           <button
             class="fr-btn w-100 text-center"
-            @click="resultStore.$patch({ securingTutorial: false }); $router.push({ name: 'InstructionsPage'})"
+            @click="store.$patch({ securingTutorial: false }); $router.push({ name: 'InstructionsPage'})"
           >
             Reprendre la photo <span
               class="fr-icon-camera-fill mx-1"
diff --git a/frontend/src/views/StartPage.vue b/frontend/src/views/StartPage.vue
index af3b3693..754fdd7c 100644
--- a/frontend/src/views/StartPage.vue
+++ b/frontend/src/views/StartPage.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useResultStore } from '@/stores/result'
+import { useStore } from '@/stores/result'
 
-const resultStore = useResultStore()
+const store = useStore()
 </script>
 
 <template>
@@ -24,7 +24,7 @@ const resultStore = useResultStore()
         size="small"
         @click="
           $router.push({ name: 'GuideSecuringFirearm'});
-          resultStore.$patch({ securingTutorial: true });
+          store.$patch({ securingTutorial: true });
         "
       />
     </div>
@@ -36,7 +36,7 @@ const resultStore = useResultStore()
         size="small"
         @click="
           $router.push({ name: 'InstructionsPage'});
-          resultStore.$patch({ securingTutorial: false });
+          store.$patch({ securingTutorial: false });
         "
       />
     </div>