Standardize securing footer

dnum-mi · Jun 3, 2024 · 0bac91a · 0bac91a
1 parent 65452c3
commit 0bac91a
Show file tree

Hide file tree

Showing 15 changed files with 116 additions and 250 deletions.
diff --git a/frontend/src/components/FooterMES.vue b/frontend/src/components/FooterMES.vue
diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
@@ -20,7 +20,7 @@ const img = computed(() => resultStore.img)
 const typology = TYPOLOGIES[resultStore.typology]
 
 const isDummy = computed(() => stepsStore.isDummy)
-const hasGuideDummy = typology?.guideDummy !== undefined
+const hasDummyOptions = typology?.dummyOptions !== undefined
 const isCardDetected = computed(() => resultStore.gunLength !== null && resultStore.gunBarrelLength !== null)
 
 const isUp = ref(false)
@@ -75,7 +75,7 @@ function sendFeedback (isCorrect: boolean) {
   <div class="result-frame -mx-8 py-5 px-8">
     <div class="result">
       <h2
-        v-if="$route.name === 'IdentificationTypologyResult' && hasGuideDummy"
+        v-if="$route.name === 'IdentificationTypologyResult' && hasDummyOptions"
         class="typology-title bg-white py-4"
       >
         Typologie de l'arme
@@ -144,7 +144,7 @@ function sendFeedback (isCorrect: boolean) {
               >
                 {{ label }}
               </h3>
-              <template v-if="confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasGuideDummy)">
+              <template v-if="confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasDummyOptions)">
                 <h3
                   class="fr-alert__title"
                   data-testid="arm-category"
@@ -157,14 +157,14 @@ function sendFeedback (isCorrect: boolean) {
               </template>
             </div>
             <div
-              v-if="disclaimer && confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasGuideDummy)"
+              v-if="disclaimer && confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasDummyOptions)"
               class="fr-alert fr-alert--warning"
             >
               <p v-html="disclaimer" />
             </div>
             <MissingCardAlert v-if="MEASURED_GUNS_TYPOLOGIES.includes(typology) && isCardDetected === false && isDummy == false" />
             <div
-              v-if="confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasGuideDummy)"
+              v-if="confidenceLevel !== 'low' && ($route.name !== 'IdentificationTypologyResult' || !hasDummyOptions)"
               class="fr-callout mt-3"
             >
               <p class="fr-callout__text">
@@ -178,7 +178,7 @@ function sendFeedback (isCorrect: boolean) {
               </p>
             </div>
             <div
-              v-if="confidenceLevel !== 'low' && $route.name === 'IdentificationTypologyResult' && hasGuideDummy"
+              v-if="confidenceLevel !== 'low' && $route.name === 'IdentificationTypologyResult' && hasDummyOptions"
               class="fr-alert fr-alert--warning"
             >
               <p>

diff --git a/frontend/src/utils/firearms-utils/epaule-a-verrou.ts b/frontend/src/utils/firearms-utils/epaule-a-verrou.ts
@@ -28,20 +28,16 @@ export const epaule_a_verrou = {
       ],
     },
   ],
-  guideDummy: [
+  dummyOptions: [
     {
-      options: [
-        {
-          label: 'Balles',
-          value: 'cartouches',
-          img_ammo: epauleAVerrouCartridges,
-        },
-        {
-          label: 'Billes ou trou pour billes',
-          value: 'billes',
-          img_ammo: epauleAVerrouBalls,
-        },
-      ],
+      label: 'Balles',
+      value: 'cartouches',
+      img_ammo: epauleAVerrouCartridges,
+    },
+    {
+      label: 'Billes ou trou pour billes',
+      value: 'billes',
+      img_ammo: epauleAVerrouBalls,
     },
   ],
   getDisclaimer: getEpaulLevierVerrouDisclaimer,

diff --git a/frontend/src/utils/firearms-utils/get-next-route-after-result.ts b/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)
 

diff --git a/frontend/src/utils/firearms-utils/pistolet-semi-auto-moderne.ts b/frontend/src/utils/firearms-utils/pistolet-semi-auto-moderne.ts
@@ -50,20 +50,16 @@ export const pistolet_semi_auto_moderne = {
       ],
     },
   ],
-  guideDummy: [
+  dummyOptions: [
     {
-      options: [
-        {
-          label: 'Cartouches',
-          value: 'cartouches',
-          img_ammo: pistoletSemiAutoModerneCartridges,
-        },
-        {
-          label: 'Billes',
-          value: 'billes',
-          img_ammo: pistoletSemiAutoModerneBalls,
-        },
-      ],
+      label: 'Cartouches',
+      value: 'cartouches',
+      img_ammo: pistoletSemiAutoModerneCartridges,
+    },
+    {
+      label: 'Billes',
+      value: 'billes',
+      img_ammo: pistoletSemiAutoModerneBalls,
     },
   ],
   getDisclaimer: (category: string) => {

diff --git a/frontend/src/utils/firearms-utils/revolver.ts b/frontend/src/utils/firearms-utils/revolver.ts
@@ -163,20 +163,16 @@ export const revolver = {
       ],
     },
   ],
-  guideDummy: [
+  dummyOptions: [
     {
-      options: [
-        {
-          label: 'Balles',
-          value: 'cartouches',
-          img_ammo: revolverCartridges,
-        },
-        {
-          label: 'Billes ou trou pour billes',
-          value: 'billes',
-          img_ammo: revolverBalls,
-        },
-      ],
+      label: 'Balles',
+      value: 'cartouches',
+      img_ammo: revolverCartridges,
+    },
+    {
+      label: 'Billes ou trou pour billes',
+      value: 'billes',
+      img_ammo: revolverBalls,
     },
   ],
   getDisclaimer: (category: string) => {

diff --git a/frontend/src/utils/firearms-utils/semi-auto-style-militaire-autre.ts b/frontend/src/utils/firearms-utils/semi-auto-style-militaire-autre.ts
@@ -101,20 +101,16 @@ export const semi_auto_style_militaire_autre = {
       ],
     },
   ],
-  guideDummy: [
+  dummyOptions: [
     {
-      options: [
-        {
-          label: 'Cartouches',
-          value: 'cartouches',
-          img_ammo: semiAutoMilitaireCartridges,
-        },
-        {
-          label: 'Billes',
-          value: 'billes',
-          img_ammo: semiAutoMilitaireBalls,
-        },
-      ],
+      label: 'Cartouches',
+      value: 'cartouches',
+      img_ammo: semiAutoMilitaireCartridges,
+    },
+    {
+      label: 'Billes',
+      value: 'billes',
+      img_ammo: semiAutoMilitaireBalls,
     },
   ],
   getDisclaimer: () => "<strong>Catégorie A</strong> si à l'origine l’arme était à <strong>répétition automatique</strong> puis a été <strong>transformée</strong> en arme <strong>semi automatique</strong>, ou si l’arme possède <strong>une crosse rétractable / pliable</strong> et qu’en configuration la plus courte elle <strong>mesure moins de 60 cm</strong>.",

diff --git a/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue b/frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue
@@ -23,7 +23,7 @@ const currentStep = ref(1)
 const isLowConfidence = confidenceLevel.value === 'low'
 
 const steps = computed(() => {
-  if (TYPOLOGIES[typology]?.guideDummy || !isLowConfidence) {
+  if (TYPOLOGIES[typology]?.dummyOptions || !isLowConfidence) {
     if (ALARM_GUNS_TYPOLOGIES.includes(resultStore.typology) && stepsStore.selectedAmmo === 'cartouches') {
       return ['Typologie de l\'arme', 'Compléments', 'Typologie de munitions', 'Identification d\'une arme d\'alarme', 'Résultat final']
     } else {
@@ -97,7 +97,7 @@ const showDiv = ref(false)
   <div class="mt-5 fr-container">
     <div class="result fr-col-11 fr-col-lg-6 mx-auto">
       <StepsGuide
-        v-if="TYPOLOGIES[typology]?.guideDummy"
+        v-if="TYPOLOGIES[typology]?.dummyOptions"
         class="!fr-container my-auto"
         :steps="steps"
         :current-step="currentStep"
@@ -106,7 +106,7 @@ const showDiv = ref(false)
     </div>
   </div>
   <div
-    v-if="$route.path === '/guide-identification/resultat-final' || TYPOLOGIES[typology]?.guideDummy == undefined"
+    v-if="$route.path === '/guide-identification/resultat-final' || TYPOLOGIES[typology]?.dummyOptions == undefined"
     class="footer end z-1"
   >
     <div class="fr-col-11 fr-col-lg-6 mx-auto">

diff --git a/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue b/frontend/src/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 })
 
 // eslint-disable-next-line camelcase
-type HasGuideDummy = typeof epaule_a_verrou | typeof pistolet_semi_auto_moderne | typeof semi_auto_style_militaire_autre | typeof revolver
+type HasDummyOptions = typeof epaule_a_verrou | typeof pistolet_semi_auto_moderne | typeof semi_auto_style_militaire_autre | typeof revolver
 </script>
 
 <template>
@@ -123,7 +123,7 @@ type HasGuideDummy = typeof epaule_a_verrou | typeof pistolet_semi_auto_moderne
     </div>
     <div>
       <template
-        v-for="(option) in (TYPOLOGIES[typology] as HasGuideDummy)?.guideDummy[0].options"
+        v-for="(option) in (TYPOLOGIES[typology] as HasDummyOptions)?.dummyOptions"
         :key="option.value"
       >
         <div class="item">

diff --git a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue b/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>
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/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>