Merge branch 'develop' into 279-expert-contact

dnum-mi · Feb 7, 2024 · c2f75c5 · c2f75c5
2 parents d10a978 + e149f05
commit c2f75c5
Show file tree

Hide file tree

Showing 12 changed files with 307 additions and 880 deletions.
diff --git a/frontend/src/components/ContactExpert.vue b/frontend/src/components/ContactExpert.vue
@@ -22,31 +22,27 @@ function onClose () {
   </div>
   <Teleport to="body">
     <DsfrModal
-      title=""
       :opened="showModal"
       @close="onClose()"
     >
       <div class="modal">
-        <div class="modal-content" />
-        <h2>
-          <VIcon
-            name="ri-arrow-right-line"
-            scale="1.5"
-          />
-          Contact à un expert arme
-        </h2>
-        <p>
-          Sélectionnez ci-dessous votre corps de métier <br>
-        </p>
-        <div>
-          <div class="fr-col-11 fr-col-lg-6 mx-auto">
+        <div class="modal-content">
+          <h2>
+            <VIcon
+              name="ri-arrow-right-line"
+              scale="1.5"
+            />
+            Contacter un expert arme
+          </h2>
+          <p>Sélectionnez ci-dessous votre corps de métier.</p>
+          <div>
             <DsfrButton
-              class="m-1 flex justify-center w-80"
+              class="w-100 m-1"
               label="Police Nationale"
               @click="router.push({ name:'ExpertSituationPN'})"
             />
             <DsfrButton
-              class="m-1 flex justify-center w-80"
+              class="w-100 m-1"
               label="Gendarmerie Nationale"
               @click="router.push({ name:'ExpertSituationGN'})"
             />
@@ -62,27 +58,8 @@ function onClose () {
   margin: auto !important;
 }
 
-.modal {
-  display: flex;
-  flex-direction: column;
-}
-
-.modal-content {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.modal-footer {
-  position: sticky;
-  bottom: 0;
-  text-align: center;
-  background-color: #f5f5fe;
-  box-shadow: 0 -4px 16px rgb(0 0 0 / 25%);
-  padding: 1rem !important;
-  width: 100%;
-}
-.modal-footer button {
-  width: 100%;
+.w-100 {
+  width: 100% !important;
 }
 
 </style>
diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
@@ -4,6 +4,7 @@ import { useRouter, useRoute } from 'vue-router'
 
 import SnackbarAlert from '@/components/SnackbarAlert.vue'
 import { resultTree } 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'
@@ -131,18 +132,7 @@ const bypassCrosscall = true
             <p class="text-sm font-normal m-4 text-left text-current">
               Nous n'avons pas suffisamment d'éléments pour fournir une réponse fiable. Nous vous conseillons de faire appel à un expert.
             </p>
-            <div
-              v-if="foundAllKeyWords ||
-                bypassCrosscall"
-              class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center"
-            >
-              <DsfrButton
-                class="m-1 flex justify-center"
-                icon="ri-alert-line"
-                label="Contacter un spécialiste"
-                @click="router.push({ name:'ExpertiseFormInformations'})"
-              />
-            </div>
+            <ContactExpert v-if="isUserUsingCrosscall()" />
           </div>
           <div v-else>
             <div class="fr-tile__body">
@@ -162,6 +152,7 @@ const bypassCrosscall = true
                 <p class="warning-text">
                   Nous vous conseillons de faire appel à un expert pour confirmer cette réponse.
                 </p>
+                <ContactExpert v-if="isUserUsingCrosscall()" />
               </div>
               <div v-if="isDummy === false && (route.name !== 'IdentificationTypologyResult'|| isDummyTypology !== true)">
                 <p

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
@@ -23,14 +23,7 @@ const IdentificationTypologyResult = () => import('@/views/GuideIdentificationFi
 const IdentificationFinalResult = () => import('@/views/GuideIdentificationFirearm/IdentificationFinalResult.vue')
 const IdentificationFurtherInformations = () => import('@/views/GuideIdentificationFirearm/IdentificationFurtherInformations.vue')
 const IdentificationSelectAmmo = () => import('@/views/GuideIdentificationFirearm/IdentificationSelectAmmo.vue')
-const ExpertSituationPN = () => import('@/views/GuideContactExpert/ExpertSituationPN.vue')
-const ExpertSituationGN = () => import('@/views/GuideContactExpert/ExpertSituationGN.vue')
-const ExpertPTS = () => import('@/views/GuideContactExpert/ExpertPTS.vue')
-const ExpertPTSNU = () => import('@/views/GuideContactExpert/ExpertPTSNU.vue')
-const ExpertiseForm = () => import('@/views/GuideAskingExpertise/ExpertiseForm.vue')
-const ExpertiseFormFirearm = () => import('@/views/GuideAskingExpertise/ExpertiseFormFirearm.vue')
-const ExpertiseFormInformations = () => import('@/views/GuideAskingExpertise/ExpertiseFormInformations.vue')
-const ExpertiseFormPhotos = () => import('@/views/GuideAskingExpertise/ExpertiseFormPhotos.vue')
+const ExpertSituation = () => import('@/views/GuideContactExpert/ExpertSituation.vue')
 
 const routes: Parameters<typeof createRouter> [0]['routes'] = [
   {
@@ -184,22 +177,12 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
   {
     path: '/guide-contact-pn',
     name: 'ExpertSituationPN',
-    component: ExpertSituationPN,
+    component: ExpertSituation,
   },
   {
     path: '/guide-contact-gn',
     name: 'ExpertSituationGN',
-    component: ExpertSituationGN,
-  },
-  {
-    path: '/guide-contact-pn/urgence',
-    name: 'ExpertPTS',
-    component: ExpertPTS,
-  },
-  {
-    path: '/guide-contact-pn/non-urgence',
-    name: 'ExpertPTSNU',
-    component: ExpertPTSNU,
+    component: ExpertSituation,
   },
 
   // asking expertise

diff --git a/frontend/src/utils/firearms-utils/epaule-a-levier-sous-garde.ts b/frontend/src/utils/firearms-utils/epaule-a-levier-sous-garde.ts
@@ -19,12 +19,12 @@ export const epaule_a_levier_sous_garde = {
       label: 'Embout rugueux',
       value: 'front_magazine',
       text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
-        2: '<span class="font-bold">Faites très attention à ne pas déclencher l’arme durant cette manipulation</span>. Dévisser la baguette à l’avant du tube magasin',
-        3: 'Retirer complètement la baguette du magasin',
-        4: 'Vider le magasin en tapotant l’arme orientée légèrement vers le bas',
-        5: 'Actionner le levier de sous garde jusqu’en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre',
-        6: 'Contrôler visuellement que la chambre est vide',
+        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution.',
+        2: '<span class="font-bold">Faites très attention à ne pas déclencher l’arme durant cette manipulation</span>. Dévisser la baguette à l’avant du tube magasin.',
+        3: 'Retirer complètement la baguette du magasin.',
+        4: 'Vider le magasin en tapotant l’arme orientée légèrement vers le bas.',
+        5: 'Actionner le levier de sous garde jusqu’en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre.',
+        6: 'Contrôler visuellement que la chambre est vide.',
       },
       img: levierSousGardeMagasinAvantImg,
       video: levierSousGardeMagasinAvantVideo,
@@ -33,10 +33,10 @@ export const epaule_a_levier_sous_garde = {
       label: 'Pas d’embout',
       value: 'fixed_magazine',
       text_steps: {
-        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution',
-        2: 'Abaisser le levier de sous garde en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre',
-        3: '<span class="font-bold" style="color:red">Veiller à ne pas appuyer sur la queue de détente pendant cette manipulation !</span> <br> Relever et abaisser le levier de sous garde tout en extrayant les munitions tant qu’il y a toujours des munitions présentes dans le tube magasin',
-        4: 'Contrôler visuellement que la chambre est vide',
+        1: 'Observer l’arme en l’orientant dans une <span class="font-bold">direction sans risque</span>, en manipulant avec précaution.',
+        2: 'Abaisser le levier de sous garde en position basse et <span class="font-bold">retirer la munition</span> éventuelle de la chambre.',
+        3: '<span class="font-bold" style="color:red">Veiller à ne pas appuyer sur la queue de détente pendant cette manipulation !</span> <br> Relever et abaisser le levier de sous garde tout en extrayant les munitions tant qu’il y a toujours des munitions présentes dans le tube magasin.',
+        4: 'Contrôler visuellement que la chambre est vide.',
       },
       img: levierSousGardePasMagasinImg,
       video: levierSousGardePasMagasinVideo,

diff --git a/frontend/src/utils/isUserUsingCrosscall.ts b/frontend/src/utils/isUserUsingCrosscall.ts
@@ -0,0 +1,9 @@
+export function isUserUsingCrosscall () {
+  const userAgent = window.navigator.userAgent
+  const keyWords = ['Mobile', 'Mozilla', 'Crosscall']
+
+  const isUsingCrosscall = keyWords.every(keyWord => {
+    return userAgent.includes(keyWord)
+  })
+  return isUsingCrosscall
+}