Refactor GuideSecuringFirearm and footer / stepper css

frontend/src/components/FooterMES.vue

@@ -21,10 +21,6 @@
 </template>
 
 <style>
-.footer {
-  background-color: #fff;
-  box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
-}
 
 .footer button {
   width: 50%;

frontend/src/components/StepsGuide.vue

@@ -16,18 +16,3 @@ withDefaults(defineProps<{
     :steps="steps"
   />
 </template>
-
-<style scoped>
-
-:deep(.fr-stepper__state) {
-  display: inline flow-root !important;
-  color: var(--default-grey);
-  font-size: .9rem;
-}
-
-:deep(.fr-stepper__title) {
-  font-weight: normal;
-  color: var(--default-grey);
-  font-size: .9rem;
-}
-</style>

frontend/src/main.css

@@ -25,7 +25,7 @@ a {
   top: 100%;
   left: 50%;
   transform: translate(-50%, -100%);
-  background-color: #f5f5fe;
+  background-color: #ffffff;
   box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
   padding: 15px;
   width: 100%;
@@ -75,6 +75,14 @@ h5 {
   background-image: var(--underline-img), var(--underline-img) !important;
 }
 
+.w-60 {
+  width: 60% !important;
+}
+
+.w-80 {
+  width: 80% !important;
+}
+
 .w-100 {
   width: 100% !important;
 }

frontend/src/router/index.ts

@@ -15,11 +15,8 @@ const ContactPage = () => import('@/views/ContactPage.vue')
 const AccessibilityPage = () => import('@/views/AccessibilityPage.vue')
 
 const GuideSecuringFirearm = () => import('@/views/GuideSecuringFirearm/GuideSecuringFirearm.vue')
-const SecuringIntroduction = () => import('@/views/GuideSecuringFirearm/SecuringIntroduction.vue')
-const SecuringInstructions = () => import('@/views/GuideSecuringFirearm/SecuringInstructions.vue')
 const SecuringSelectOptionContent = () => import('@/views/GuideSecuringFirearm/SecuringSelectOptionContent.vue')
 const SecuringTutorialContent = () => import('@/views/GuideSecuringFirearm/SecuringTutorialContent.vue')
-const SecuringRecommendations = () => import('@/views/GuideSecuringFirearm/SecuringRecommendations.vue')
 const SecuringAchievement = () => import('@/views/GuideSecuringFirearm/SecuringAchievement.vue')
 const GuideIdentificationFirearm = () => import('@/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue')
 const IdentificationTypologyResult = () => import('@/views/GuideIdentificationFirearm/IdentificationTypologyResult.vue')
@@ -64,23 +61,6 @@ const routes: RouteRecordRaw[] = [
     path: '/guide-mise-en-securite',
     name: 'GuideSecuringFirearm',
     component: GuideSecuringFirearm,
-    children: [
-      {
-        path: 'mise-en-securite-instructions',
-        name: 'SecuringInstructions',
-        component: SecuringInstructions,
-      },
-      {
-        path: 'mise-en-securite-recommandations',
-        name: 'SecuringRecommendations',
-        component: SecuringRecommendations,
-      },
-      {
-        path: 'mise-en-securite-introduction',
-        name: 'SecuringIntroduction',
-        component: SecuringIntroduction,
-      },
-    ],
   },
   {
     path: '/mise-en-securite-choix-option-etape/:step',

frontend/src/utils/firearms-utils/index.ts

@@ -29,24 +29,13 @@ export const TYPOLOGIES = {
   arme_alarme,
 } as const
 
-// Tuto Mise en sécurité
-const securingInstructions = 'SecuringInstructions'
-const securingRecommendations = 'SecuringRecommendations'
-const securingIntroduction = 'SecuringIntroduction'
-
 // Tuto Mise en securité identification
 const IdentificationTypologyResult = 'IdentificationTypologyResult'
 const IdentificationFurtherInformations = 'IdentificationFurtherInformations'
 const IdentificationSelectAmmo = 'IdentificationSelectAmmo'
 const IdentificationBlankGun = 'IdentificationBlankGun'
 const IdentificationFinalResult = 'IdentificationFinalResult'
 
-export const securingGuideSteps = [
-  securingRecommendations,
-  securingInstructions,
-  securingIntroduction,
-] as const
-
 export const identificationGuideSteps = [
   IdentificationTypologyResult,
   IdentificationFurtherInformations,

frontend/src/views/GuideIdentificationFirearm/GuideIdentificationFirearm.vue

@@ -238,21 +238,8 @@ const showDiv = ref(false)
   max-width: 1000px;
 }
 
-:deep(div.fr-stepper__steps) {
-  border-radius: 5px 5px 5px 5px;
-}
-
-:deep(.fr-stepper__state::after) {
-  content: " :\a";
-}
-
 :deep(.fr-icon-home-3-line) {
   color: var(--blue-france-sun-113-625);
 }
 
-.footer {
-  text-align: center;
-  background-color: #fff;
-  box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
-}
 </style>

frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue

@@ -1,90 +1,102 @@
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
+import { isUserUsingCrosscall } from '@/utils/isUserUsingCrosscall'
 
-import { securingGuideSteps } from '@/utils/firearms-utils/index'
 import StepsGuide from '@/components/StepsGuide.vue'
 
 const steps = ['Mise en garde', 'Consignes de sécurité', 'Photo']
 const currentStep = ref(0)
 
-const router = useRouter()
-
-const getNextRoute = () => {
-  if (currentStep.value < 0) {
-    router.push({ name: 'StartPage' })
-  } else if (currentStep.value >= steps.length) {
-    router.push({ name: 'InstructionsPage' })
-  } else {
-    router.push({ name: securingGuideSteps[currentStep.value] })
-  }
-}
-
 </script>
 
 <template>
-  <div class="mt-5 fr-container">
-    <div class="result fr-col-11 fr-col-lg-6 mx-auto">
-      <div>
-        <StepsGuide
-          class="my-auto"
-          :steps="steps"
-          :current-step="currentStep + 1"
-        />
-        <h2 class="m-2.5">
-          Mettre en sécurité mon arme
-        </h2>
-        <RouterView />
-      </div>
+  <div class="fr-container mt-5">
+    <div class="fr-col-12 fr-col-lg-6 fr-px-1w  mx-auto">
+      <StepsGuide
+        class="my-auto"
+        :steps="steps"
+        :current-step="currentStep + 1"
+      />
+      <h2 class="fr-mt-2w">
+        Mettre en sécurité mon arme
+      </h2>
+
+      <template v-if="currentStep === 0">
+        <div v-if="isUserUsingCrosscall()">
+          <p class="leading-7 mt-3">
+            Vous allez recevoir des <span class="font-bold">instructions</span> pour <span class="font-bold">extraire des munitions</span> de l’arme.
+            En cas de doute, <span class="font-bold">arrêtez vous et faites appel à un expert</span>.
+          </p>
+          <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
+            <img
+              src="@/assets/guide-mise-en-securite/icones/preconisations.jpg"
+              alt="alt"
+              class="img-deco"
+            >
+          </div>
+        </div>
+        <div v-else>
+          <p class="leading-7 mt-3 pb-4">
+            Vous allez recevoir des instructions pour <span class="font-bold">extraire des munitions</span> de l’arme.
+            Si vous avez le <span class="font-bold">moindre doute</span> quant à votre capacité à effectuer en toute sécurité les manœuvres qui suivent, <span class="font-bold">n’essayez pas de suivre les étapes suivantes</span>.
+            Contactez <span class="font-bold">la gendarmerie ou le commissariat le plus proche</span>.
+          </p>
+          <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
+            <img
+              src="@/assets/guide-mise-en-securite/icones/take-care.jpg"
+              alt="alt"
+              class="w-60 w-fr-mt-n4w"
+            >
+          </div>
+        </div>
+      </template>
+      <template v-if="currentStep === 1">
+        <p class="leading-7 mt-3">
+          Une arme doit <span class="font-bold">toujours</span> être <span class="font-bold">considérée comme chargée</span>.
+        </p>
+        <p>
+          <span class="font-bold">Toujours</span> maintenir l'arme dans une <span class="font-bold">DIRECTION
+            SÛRE</span>, en maintenant <span class="font-bold">le doigt hors du pontet</span>.
+        </p>
+        <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
+          <img
+            src="@/assets/guide-mise-en-securite/icones/consignes-securite.jpg"
+            alt="alt"
+            class="w-80 fr-mt-2w"
+          >
+        </div>
+      </template>
+      <template v-if="currentStep === 2">
+        <p class="leading-7 mt-3">
+          Pour que Basegun vous propose un <span class="font-bold">tutoriel adapté à votre arme</span>, vous serez
+          invité à prendre en photo votre arme et à préciser certains mécanismes sur l'arme.
+        </p>
+        <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
+          <img
+            src="@/assets/guide-mise-en-securite/icones/instructions.jpg"
+            alt="alt"
+            class="w-100 fr-mt-5w"
+          >
+        </div>
+      </template>
     </div>
     <div class="footer">
-      <div
-        class="fr-col-11 fr-col-lg-6 footer-actions mx-auto"
-      >
+      <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--; getNextRoute()"
+          @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++; getNextRoute()"
+          @click="currentStep < 2 ? currentStep++ : $router.push({ name: 'InstructionsPage' })"
         />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped>
-
-.result {
-  margin: 0 auto;
-  max-width: 1000px;
-}
-
-h4 {
-  color: unset;
-}
-
-:deep(div.fr-stepper__steps) {
-  border-radius: 5px 5px 5px 5px;
-}
-
-:deep(.fr-stepper__state::after) {
-  content: " :\a";
-}
-
-:deep(.fr-icon-home-3-line) {
-  color: var(--blue-france-sun-113-625);
-}
-
-.footer {
-  background-color: #fff;
-  box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
-}
-</style>

frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue

@@ -111,8 +111,5 @@ function goToMissingCardPageIfMissing () {
 :deep(.fr-icon-home-3-line) {
   color: var(--blue-france-sun-113-625);
 }
-.footer {
-  text-align: center;
-}
 
 </style>