From ab8ada9aff1d1de86d26995d4556c30b647b42dd Mon Sep 17 00:00:00 2001
From: David Mendy <davebull.dm@gmail.com>
Date: Thu, 23 Nov 2023 14:21:13 +0100
Subject: [PATCH 1/2] feat: :sparkles: add contact path for weapon expert

---
 frontend/src/components.d.ts                  |   1 +
 frontend/src/components/ContactExpert.vue     |  88 +++++++++++
 frontend/src/router/index.ts                  |  14 ++
 .../GuideContactExpert/ExpertSituationGN.vue  | 142 ++++++++++++++++++
 .../GuideContactExpert/ExpertSituationPN.vue  | 126 ++++++++++++++++
 .../SecuringAchievement.vue                   |  11 ++
 6 files changed, 382 insertions(+)
 create mode 100644 frontend/src/components/ContactExpert.vue
 create mode 100644 frontend/src/views/GuideContactExpert/ExpertSituationGN.vue
 create mode 100644 frontend/src/views/GuideContactExpert/ExpertSituationPN.vue

diff --git a/frontend/src/components.d.ts b/frontend/src/components.d.ts
index 1404e2ec..d7498099 100644
--- a/frontend/src/components.d.ts
+++ b/frontend/src/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AskingExpert: typeof import('./components/AskingExpert.vue')['default']
+    ContactExpert: typeof import('./components/ContactExpert.vue')['default']
     FooterMES: typeof import('./components/FooterMES.vue')['default']
     HeaderMain: typeof import('./components/HeaderMain.vue')['default']
     OnboardingSwiper: typeof import('./components/OnboardingSwiper.vue')['default']
diff --git a/frontend/src/components/ContactExpert.vue b/frontend/src/components/ContactExpert.vue
new file mode 100644
index 00000000..124206c3
--- /dev/null
+++ b/frontend/src/components/ContactExpert.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { DsfrButton } from '@gouvminint/vue-dsfr'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const showModal = ref(false)
+
+function onClose () {
+  showModal.value = false
+}
+
+</script>
+<template>
+  <div class="text-center">
+    <DsfrButton
+      class="m-1 flex justify-center"
+      href="#"
+      icon="ri-alert-line"
+      label="Contacter un expert"
+      @click="showModal = true"
+    />
+  </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">
+            <DsfrButton
+              class="m-1 flex justify-center w-80"
+              label="Police Nationale"
+              @click="router.push({ name:'ExpertSituationPN'})"
+            />
+            <DsfrButton
+              class="m-1 flex justify-center w-80"
+              label="Gendarmerie Nationale"
+              @click="router.push({ name:'ExpertSituationGN'})"
+            />
+          </div>
+        </div>
+      </div>
+    </DsfrModal>
+  </Teleport>
+</template>
+<style scoped>
+
+:deep(.fr-btn) span {
+  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%;
+}
+
+</style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 72d7430d..b63a8c87 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -23,6 +23,8 @@ 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 routes: Parameters<typeof createRouter> [0]['routes'] = [
   {
@@ -171,6 +173,18 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
       wholeLogo: true,
     },
   },
+
+  // tutorial to contact expert
+  {
+    path: '/guide-contact-pn',
+    name: 'ExpertSituationPN',
+    component: ExpertSituationPN,
+  },
+  {
+    path: '/guide-contact-gn',
+    name: 'ExpertSituationGN',
+    component: ExpertSituationGN,
+  },
 ]
 
 const router = createRouter({
diff --git a/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue b/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue
new file mode 100644
index 00000000..ab0c63bd
--- /dev/null
+++ b/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { DsfrButton } from '@gouvminint/vue-dsfr'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const showModal = ref(false)
+const showModal2 = ref(false)
+
+function onClose () {
+  showModal.value = false
+  showModal2.value = false
+}
+
+</script>
+
+<template>
+  <div class="text-center mt-5">
+    <h2>
+      <VIcon
+        name="ri-arrow-right-line"
+        scale="1.5"
+      />
+      Contact à un expert arme
+    </h2>
+    <p>
+      Vous rencontrez une situation et souhaitez contacter un expert arme ? <br>
+      <br>Sélectionnez tout d'abord votre situation actuelle ci-dessous
+    </p>
+    <div class="fr-col-11 fr-col-lg-6 mx-auto">
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="Situation urgente"
+        @click="showModal = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="Situation non urgente"
+        @click="showModal2 = true"
+      />
+      <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>
+              Vous trouverez ci-dessous le numéro de téléphone de la permanance, ainsi que l'adresse mail de l'IRGCN <br>
+            </p>
+            <div>
+              <div class="fr-col-11 fr-col-lg-6 mx-auto">
+                <p>ircgn@mail.com</p>
+              </div>
+              <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"
+                  label="Précédent"
+                  @click="onClose()"
+                />
+              </div>
+            </div>
+          </div>
+        </DsfrModal>
+      </Teleport>
+      <Teleport to="body">
+        <DsfrModal
+          title=""
+          :opened="showModal2"
+          @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>
+              Vous trouverez ci-dessous l'adresse mail de la permanence de l'IRGCN <br>
+            </p>
+            <div>
+              <div class="fr-col-11 fr-col-lg-6 mx-auto">
+                <p>ircgn@mail.com</p>
+                <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"
+                    label="Précédent"
+                    @click="onClose()"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </DsfrModal>
+      </Teleport>
+    </div>
+    <div class="manipulations -mx-8 p-8">
+      <p>
+        Situation pouvant faire office d'urgence : <br>
+      </p>
+      <ul class="list-none text-sm">
+        <li>Garde à vue</li>
+        <li>Garde à vue</li>
+        <li>Garde à vue</li>
+        <li>Garde à vue</li>
+      </ul>
+    </div>
+  </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()"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.manipulations {
+  background-color: #E3E3FD;
+  margin-top: 40px;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue b/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue
new file mode 100644
index 00000000..709c9796
--- /dev/null
+++ b/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { DsfrButton } from '@gouvminint/vue-dsfr'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const showModal = ref(false)
+const showModal2 = ref(false)
+
+function onClose () {
+  showModal.value = false
+  showModal2.value = false
+}
+
+</script>
+
+<template>
+  <div class="text-center mt-5">
+    <h2>
+      <VIcon
+        name="ri-arrow-right-line"
+        scale="1.5"
+      />
+      Contact à un expert arme
+    </h2>
+    <p>
+      Vous rencontrez une situation et souhaitez contacter un expert arme ? <br>
+      <br>Sélectionnez tout d'abord votre situation actuelle ci-dessous
+    </p>
+    <div class="fr-col-11 fr-col-lg-6 mx-auto">
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="Situation urgente"
+        @click="showModal = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="Situation non urgente"
+        @click="showModal2 = true"
+      />
+      <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>
+              Vous trouverez ci-dessous le numéro de téléphone de la permanance, ainsi que l'adresse mail de votre PTS <br>
+            </p>
+            <div>
+              <div class="fr-col-11 fr-col-lg-6 mx-auto">
+                <p>pts@mail.com</p>
+              </div>
+            </div>
+          </div>
+        </DsfrModal>
+      </Teleport>
+      <Teleport to="body">
+        <DsfrModal
+          title=""
+          :opened="showModal2"
+          @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>
+              Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+            </p>
+            <div>
+              <div class="fr-col-11 fr-col-lg-6 mx-auto">
+                <p>pts@mail.com</p>
+              </div>
+            </div>
+          </div>
+        </DsfrModal>
+      </Teleport>
+    </div>
+    <div class="manipulations -mx-8 p-8">
+      <p>
+        Situation pouvant faire office d'urgence : <br>
+      </p>
+      <ul class="list-none text-sm">
+        <li>Garde à vue</li>
+        <li>Garde à vue</li>
+        <li>Garde à vue</li>
+        <li>Garde à vue</li>
+      </ul>
+    </div>
+  </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()"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.manipulations {
+  background-color: #E3E3FD;
+  margin-top: 40px;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
index 798c29a4..63bf64dc 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -1,11 +1,21 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
 import { useResultStore } from '@/stores/result'
 import { resultTree } from '@/utils/firearms-utils/index'
+import { DsfrButton } from '@gouvminint/vue-dsfr'
+
+const router = useRouter()
 
 const resultStore = useResultStore()
 
+const showModal = ref(false)
+
+function onClose () {
+  showModal.value = false
+}
+
 const typology = computed(() => resultStore.typology)
 </script>
 
@@ -32,6 +42,7 @@ const typology = computed(() => resultStore.typology)
             class="img-deco"
           >
         </div>
+        <ContactExpert />
       </div>
       <div v-else>
         <h2 class="mt-5 text-center">

From 79ececf9cbfb0f9e849afadfeea0fdcc32a250df Mon Sep 17 00:00:00 2001
From: David Mendy <davebull.dm@gmail.com>
Date: Tue, 28 Nov 2023 14:32:23 +0100
Subject: [PATCH 2/2] feat: :sparkles: add expert contact path for police and
 gendarmerie

---
 frontend/src/router/index.ts                  |  12 +
 .../views/GuideContactExpert/ExpertPTS.vue    | 275 +++++++++++++++++
 .../views/GuideContactExpert/ExpertPTSNU.vue  | 285 ++++++++++++++++++
 .../GuideContactExpert/ExpertSituationGN.vue  |  39 ++-
 .../GuideContactExpert/ExpertSituationPN.vue  |  71 +----
 .../SecuringAchievement.vue                   |  18 +-
 6 files changed, 616 insertions(+), 84 deletions(-)
 create mode 100644 frontend/src/views/GuideContactExpert/ExpertPTS.vue
 create mode 100644 frontend/src/views/GuideContactExpert/ExpertPTSNU.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index b63a8c87..1a4249ae 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -25,6 +25,8 @@ const IdentificationFurtherInformations = () => import('@/views/GuideIdentificat
 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 routes: Parameters<typeof createRouter> [0]['routes'] = [
   {
@@ -185,6 +187,16 @@ const routes: Parameters<typeof createRouter> [0]['routes'] = [
     name: 'ExpertSituationGN',
     component: ExpertSituationGN,
   },
+  {
+    path: '/guide-contact-pn/urgence',
+    name: 'ExpertPTS',
+    component: ExpertPTS,
+  },
+  {
+    path: '/guide-contact-pn/non-urgence',
+    name: 'ExpertPTSNU',
+    component: ExpertPTSNU,
+  },
 ]
 
 const router = createRouter({
diff --git a/frontend/src/views/GuideContactExpert/ExpertPTS.vue b/frontend/src/views/GuideContactExpert/ExpertPTS.vue
new file mode 100644
index 00000000..9f737e68
--- /dev/null
+++ b/frontend/src/views/GuideContactExpert/ExpertPTS.vue
@@ -0,0 +1,275 @@
+<script lang="ts" setup>
+import { DsfrButton } from '@gouvminint/vue-dsfr'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const showModal = ref(false)
+const showModal2 = ref(false)
+const showModal3 = ref(false)
+const showModal4 = ref(false)
+const showModal5 = ref(false)
+
+function onClose () {
+  showModal.value = false
+  showModal2.value = false
+  showModal3.value = false
+  showModal4.value = false
+  showModal5.value = false
+}
+
+</script>
+
+<template>
+  <div class="text-center mt-5">
+    <h2>
+      <VIcon
+        name="ri-arrow-right-line"
+        scale="1.5"
+      />
+      Contact à un expert arme
+    </h2>
+    <p>
+      Vous rencontrez une situation et souhaitez contacter un expert arme ?
+    </p> <br>
+    <p>
+      Sélectionnez ci-dessous votre PTS afin d'avoir le numéro de téléphone de la permanance, ainsi que son adresse mail
+    </p>
+    <div class="fr-col-11 fr-col-lg-6 mx-auto">
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS PARIS"
+        @click="showModal = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS LILLE"
+        @click="showModal2 = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS LYON"
+        @click="showModal3 = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS MARSEILLE"
+        @click="showModal4 = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS TOULOUSE"
+        @click="showModal5 = true"
+      />
+      <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"
+              />
+              Laboratoire PTS PARIS
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>01 00 00 00 00</p>
+                <p>pts75@mail.com</p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal2"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS LILLE
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>01 00 00 00 00</p>
+                <p>pts59@mail.com</p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal3"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS LYON
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>01 00 00 00 00</p>
+                <p>pts69@mail.com</p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal4"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS MARSEILLE
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>01 00 00 00 00</p>
+                <p>pts13@mail.com</p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal5"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS TOULOUSE
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>01 00 00 00 00</p>
+                <p>pts31@mail.com</p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+      </Teleport>
+    </div>
+  </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()"
+      />
+      <router-link
+        v-slot="{navigate}"
+        class="navigate"
+        :to="{name: 'StartPage'}"
+      >
+        <DsfrButton
+          class="m-1 flex justify-center"
+          icon="ri-home-4-line"
+          label="Retour à l'accueil"
+          @click="navigate()"
+        />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+p {
+  display:flex;
+  justify-content: center;
+}
+</style>
diff --git a/frontend/src/views/GuideContactExpert/ExpertPTSNU.vue b/frontend/src/views/GuideContactExpert/ExpertPTSNU.vue
new file mode 100644
index 00000000..dea9df52
--- /dev/null
+++ b/frontend/src/views/GuideContactExpert/ExpertPTSNU.vue
@@ -0,0 +1,285 @@
+<script lang="ts" setup>
+import { DsfrButton } from '@gouvminint/vue-dsfr'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const showModal = ref(false)
+const showModal2 = ref(false)
+const showModal3 = ref(false)
+const showModal4 = ref(false)
+const showModal5 = ref(false)
+
+function onClose () {
+  showModal.value = false
+  showModal2.value = false
+  showModal3.value = false
+  showModal4.value = false
+  showModal5.value = false
+}
+
+</script>
+
+<template>
+  <div class="text-center mt-5">
+    <h2>
+      <VIcon
+        name="ri-arrow-right-line"
+        scale="1.5"
+      />
+      Contact à un expert arme
+    </h2>
+    <p>
+      Vous rencontrez une situation et souhaitez contacter un expert arme ?
+    </p> <br>
+    <p>
+      Sélectionnez ci-dessous votre PTS afin d'avoir son adresse mail
+    </p>
+    <div class="fr-col-11 fr-col-lg-6 mx-auto">
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS PARIS"
+        @click="showModal = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS LILLE"
+        @click="showModal2 = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS LYON"
+        @click="showModal3 = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS MARSEILLE"
+        @click="showModal4 = true"
+      />
+      <DsfrButton
+        class="m-1 flex justify-center w-80"
+        label="PTS TOULOUSE"
+        @click="showModal5 = true"
+      />
+      <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"
+              />
+              Laboratoire PTS PARIS
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>
+                  pts75@mail.com
+                </p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal2"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS LILLE
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>
+                  pts59@mail.com
+                </p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal3"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS LYON
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>
+                  pts69@mail.com
+                </p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal4"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS MARSEILLE
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>
+                  pts13@mail.com
+                </p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+        <DsfrModal
+          title=""
+          :opened="showModal5"
+          @close="onClose()"
+        >
+          <div class="modal">
+            <div class="modal-content" />
+            <h2>
+              <VIcon
+                name="ri-arrow-right-line"
+                scale="1.5"
+              />
+              Laboratoire PTS TOULOUSE
+            </h2>
+            <div>
+              <div
+                class="fr-col-11 fr-col-lg-6 mx-auto"
+              >
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
+                </p>
+                <p>
+                  pts31@mail.com
+                </p>
+              </div>
+            </div>
+            <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"
+                label="Précédent"
+                @click="onClose()"
+              />
+            </div>
+          </div>
+        </DsfrModal>
+      </Teleport>
+    </div>
+  </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()"
+      />
+      <router-link
+        v-slot="{navigate}"
+        class="navigate"
+        :to="{name: 'StartPage'}"
+      >
+        <DsfrButton
+          class="m-1 flex justify-center"
+          icon="ri-home-4-line"
+          label="Retour à l'accueil"
+          @click="navigate()"
+        />
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<style>
+.manipulations {
+  background-color: #E3E3FD;
+  margin-top: 40px;
+  margin-bottom: 24px;
+}
+
+p {
+  display:flex;
+  justify-content: center;
+}
+</style>
diff --git a/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue b/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue
index ab0c63bd..c761a6f1 100644
--- a/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue
+++ b/frontend/src/views/GuideContactExpert/ExpertSituationGN.vue
@@ -25,8 +25,10 @@ function onClose () {
       Contact à un expert arme
     </h2>
     <p>
-      Vous rencontrez une situation et souhaitez contacter un expert arme ? <br>
-      <br>Sélectionnez tout d'abord votre situation actuelle ci-dessous
+      Vous rencontrez une situation et souhaitez contacter un expert arme ?
+    </p> <br>
+    <p>
+      Sélectionnez tout d'abord votre situation actuelle ci-dessous
     </p>
     <div class="fr-col-11 fr-col-lg-6 mx-auto">
       <DsfrButton
@@ -54,12 +56,15 @@ function onClose () {
               />
               Contact à un expert arme
             </h2>
-            <p>
-              Vous trouverez ci-dessous le numéro de téléphone de la permanance, ainsi que l'adresse mail de l'IRGCN <br>
-            </p>
             <div>
               <div class="fr-col-11 fr-col-lg-6 mx-auto">
-                <p>ircgn@mail.com</p>
+                <p>
+                  Vous trouverez ci-dessous le numéro de téléphone de la permanance, ainsi que l'adresse mail de l'IRGCN <br>
+                </p>
+                <p class="flex justify-center">
+                  01 00 00 00 00 <br>
+                  ircgn@mail.com
+                </p>
               </div>
               <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
                 <DsfrButton
@@ -88,12 +93,14 @@ function onClose () {
               />
               Contact à un expert arme
             </h2>
-            <p>
-              Vous trouverez ci-dessous l'adresse mail de la permanence de l'IRGCN <br>
-            </p>
             <div>
               <div class="fr-col-11 fr-col-lg-6 mx-auto">
-                <p>ircgn@mail.com</p>
+                <p>
+                  Vous trouverez ci-dessous l'adresse mail de la permanence de l'IRGCN <br>
+                </p>
+                <p class="flex justify-center">
+                  ircgn@mail.com
+                </p>
                 <div class="fr-col-11 fr-col-lg-6 footer-actions mx-auto">
                   <DsfrButton
                     class="m-1 flex justify-center"
@@ -129,6 +136,18 @@ function onClose () {
         label="Précédent"
         @click="router.back()"
       />
+      <router-link
+        v-slot="{navigate}"
+        class="navigate"
+        :to="{name: 'StartPage'}"
+      >
+        <DsfrButton
+          class="m-1 flex justify-center"
+          icon="ri-home-4-line"
+          label="Retour à l'accueil"
+          @click="navigate()"
+        />
+      </router-link>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue b/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue
index 709c9796..3127010e 100644
--- a/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue
+++ b/frontend/src/views/GuideContactExpert/ExpertSituationPN.vue
@@ -1,18 +1,9 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { DsfrButton } from '@gouvminint/vue-dsfr'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
-const showModal = ref(false)
-const showModal2 = ref(false)
-
-function onClose () {
-  showModal.value = false
-  showModal2.value = false
-}
-
 </script>
 
 <template>
@@ -25,72 +16,22 @@ function onClose () {
       Contact à un expert arme
     </h2>
     <p>
-      Vous rencontrez une situation et souhaitez contacter un expert arme ? <br>
-      <br>Sélectionnez tout d'abord votre situation actuelle ci-dessous
+      Vous rencontrez une situation et souhaitez contacter un expert arme ?
+    </p> <br>
+    <p>
+      Sélectionnez tout d'abord votre situation actuelle ci-dessous
     </p>
     <div class="fr-col-11 fr-col-lg-6 mx-auto">
       <DsfrButton
         class="m-1 flex justify-center w-80"
         label="Situation urgente"
-        @click="showModal = true"
+        @click="router.push({ name:'ExpertPTS'})"
       />
       <DsfrButton
         class="m-1 flex justify-center w-80"
         label="Situation non urgente"
-        @click="showModal2 = true"
+        @click="router.push({ name:'ExpertPTSNU'})"
       />
-      <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>
-              Vous trouverez ci-dessous le numéro de téléphone de la permanance, ainsi que l'adresse mail de votre PTS <br>
-            </p>
-            <div>
-              <div class="fr-col-11 fr-col-lg-6 mx-auto">
-                <p>pts@mail.com</p>
-              </div>
-            </div>
-          </div>
-        </DsfrModal>
-      </Teleport>
-      <Teleport to="body">
-        <DsfrModal
-          title=""
-          :opened="showModal2"
-          @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>
-              Vous trouverez ci-dessous l'adresse mail de la permanence de votre PTS <br>
-            </p>
-            <div>
-              <div class="fr-col-11 fr-col-lg-6 mx-auto">
-                <p>pts@mail.com</p>
-              </div>
-            </div>
-          </div>
-        </DsfrModal>
-      </Teleport>
     </div>
     <div class="manipulations -mx-8 p-8">
       <p>
diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
index 63bf64dc..d90c7583 100644
--- a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
+++ b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -1,22 +1,20 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useRouter } from 'vue-router'
 
 import { useResultStore } from '@/stores/result'
 import { resultTree } from '@/utils/firearms-utils/index'
 import { DsfrButton } from '@gouvminint/vue-dsfr'
 
-const router = useRouter()
-
 const resultStore = useResultStore()
 
-const showModal = ref(false)
+const typology = computed(() => resultStore.typology)
 
-function onClose () {
-  showModal.value = false
-}
+const userAgent = window.navigator.userAgent
+const keyWords = ['Mobile', 'Mozilla', 'Crosscall']
 
-const typology = computed(() => resultStore.typology)
+const foundAllKeyWords = keyWords.every(keyWord => {
+  return userAgent.includes(keyWord)
+})
 </script>
 
 <template>
@@ -42,7 +40,9 @@ const typology = computed(() => resultStore.typology)
             class="img-deco"
           >
         </div>
-        <ContactExpert />
+        <div v-if="foundAllKeyWords">
+          <ContactExpert />
+        </div>
       </div>
       <div v-else>
         <h2 class="mt-5 text-center">