improve(Contactez-Nous): Migration de la page sur vue3 (#4773)

betagouv · Dec 17, 2024 · f34f533 · f34f533
1 parent b374d29
commit f34f533
Show file tree

Hide file tree

Showing 11 changed files with 276 additions and 91 deletions.
diff --git a/2024-frontend/src/components/AppFormSendInquiry.vue b/2024-frontend/src/components/AppFormSendInquiry.vue
@@ -0,0 +1,147 @@
+<script setup>
+import { reactive } from "vue"
+import { useRootStore } from "@/stores/root"
+import { useVuelidate } from "@vuelidate/core"
+import { useValidators } from "@/validators.js"
+import { formatError } from "@/utils.js"
+import { inquiries } from "@/constants/form-send-inquiry.js"
+import AppLinkMailto from "@/components/AppLinkMailto.vue"
+
+/* Store */
+const store = useRootStore()
+
+/* Save user meta info */
+const meta = {
+  userId: store.loggedUser?.id,
+  userAgent: navigator.userAgent,
+}
+
+/* Pre-fill fields with user infos */
+let defaultEmail = ""
+let defaultName = ""
+if (store.loggedUser) {
+  const { email, firstName, lastName } = store.loggedUser
+  defaultEmail = email
+  defaultName = `${firstName} ${lastName}`
+}
+
+/* Form fields */
+const form = reactive({})
+const initFields = () => {
+  form.fromEmail = defaultEmail
+  form.name = defaultName
+  form.inquiryType = ""
+  form.message = ""
+}
+initFields()
+
+/* Fields verification */
+const { required, email } = useValidators()
+const rules = {
+  fromEmail: { required, email },
+  inquiryType: { required },
+  message: { required },
+}
+const v$ = useVuelidate(rules, form)
+const validateForm = () => {
+  v$.value.$validate()
+  if (v$.value.$invalid) return
+  sendInquiry()
+}
+
+/* Handle inquiry name */
+const getInquiryTypeDisplay = (type) => {
+  const index = inquiries.findIndex((element) => element.value === type)
+  return inquiries[index].display
+}
+
+/* Send Form */
+const sendInquiry = () => {
+  const { fromEmail, name, message, inquiryType } = form
+  const inquiryTypeDisplay = getInquiryTypeDisplay(inquiryType)
+  const payload = {
+    from: fromEmail,
+    name: name,
+    message: message,
+    inquiryType: inquiryTypeDisplay,
+    meta,
+  }
+
+  store
+    .sendInquiryEmail(payload)
+    .then(() => {
+      store.notify({
+        status: "success",
+        message: "Votre message a bien été envoyé. Nous reviendrons vers vous dans les plus brefs délais.",
+      })
+
+      initFields()
+      window.scrollTo(0,0)
+      v$.value.$reset()
+    })
+    .catch((e) => store.notifyServerError(e))
+}
+</script>
+
+<template>
+  <div>
+    <div class="fr-grid-row">
+      <div class="fr-col-12 fr-col-lg-8">
+        <form class="fr-mb-4w" @submit.prevent="validateForm">
+          <DsfrInputGroup
+            v-model="form.fromEmail"
+            label="Votre adresse électronique *"
+            :label-visible="true"
+            hint="Format attendu : nom@domaine.fr"
+            :error-message="formatError(v$.fromEmail)"
+          />
+          <DsfrInputGroup v-model="form.name" label="Prénom et nom" :label-visible="true" />
+          <DsfrSelect
+            v-model="form.inquiryType"
+            label="Type de demande *"
+            :label-visible="true"
+            :options="inquiries"
+            :error-message="formatError(v$.inquiryType)"
+          />
+          <DsfrInputGroup
+            v-model="form.message"
+            class="app-form-send-inquiry__textarea"
+            label="Message *"
+            hint="Ne partagez pas d'informations sensibles (par ex. mot de passe, numéro de carte bleue, etc)."
+            :label-visible="true"
+            is-textarea
+            rows="8"
+            :error-message="formatError(v$.message)"
+          />
+          <DsfrButton type="submit" icon="fr-icon-send-plane-fill" label="Envoyer" />
+        </form>
+        <DsfrCallout>
+          <p>
+            Si vous n'arrivez pas à utiliser le formulaire ci-dessus, vous pouvez nous contacter directement par email à
+            l'adresse suivante:
+            <AppLinkMailto />
+          </p>
+        </DsfrCallout>
+      </div>
+      <div class="fr-col-4 fr-hidden fr-unhidden-lg">
+        <img src="/static/images/doodles-dsfr/primary/SittingDoodle.png" class="app-form-send-inquiry__illustration" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.app-form-send-inquiry {
+  &__illustration {
+    object-fit: contain;
+    object-position: left center;
+    transform: scaleX(-1);
+    width: 100%;
+  }
+
+  &__textarea {
+    resize: vertical;
+    width: 100%;
+  }
+}
+</style>
diff --git a/2024-frontend/src/components/AppLinkMailto.vue b/2024-frontend/src/components/AppLinkMailto.vue
@@ -0,0 +1,3 @@
+<template>
+  <a href="mailto:support-egalim@beta.gouv.fr">support-egalim@beta.gouv.fr</a>
+</template>
diff --git a/2024-frontend/src/constants/form-send-inquiry.js b/2024-frontend/src/constants/form-send-inquiry.js
@@ -0,0 +1,29 @@
+const inquiries= [
+  {
+    value: "functionalityQuestion",
+    text: "Poser une question sur une fonctionnalité de ma cantine ?",
+    display: "fonctionnalité",
+  },
+  {
+    value: "demo",
+    text: "Demander une démo",
+    display: "demande de démo"
+  },
+  {
+    value: "bug",
+    text: "Signaler un bug",
+    display: "bug",
+  },
+  {
+    value: "egalim",
+    text: "Question sur la loi EGAlim",
+    display: "loi",
+  },
+  {
+    value: "other",
+    text: "Autre",
+    display: "autre",
+  },
+]
+
+export { inquiries }
diff --git a/2024-frontend/src/css/global.css b/2024-frontend/src/css/global.css
@@ -1,3 +1,7 @@
+html {
+    scroll-behavior: smooth;
+}
+
 address {
     font-style: normal;
-}
+}
diff --git a/2024-frontend/src/locales/fr.json b/2024-frontend/src/locales/fr.json
@@ -1,6 +1,7 @@
 {
   "validations": {
     "decimal": "Ce champ doit être un nombre",
+    "email": "Ce champ doit être un email valide",
     "integer": "Ce champ doit être un nombre entier",
     "maxValue": "La valeur maximum est {max}",
     "minValue": "La valeur minimum est {min}",

diff --git a/2024-frontend/src/router/index.js b/2024-frontend/src/router/index.js
@@ -3,6 +3,7 @@ import WasteMeasurementTunnel from "@/views/WasteMeasurementTunnel"
 import ImportSelection from "@/views/ImportSelection"
 import WasteMeasurements from "@/views/WasteMeasurements"
 import LegalNotices from "@/views/LegalNotices"
+import ContactPage from "@/views/ContactPage"
 import { useRootStore } from "@/stores/root"
 
 const routes = [
@@ -48,6 +49,14 @@ const routes = [
       title: "Mentions légales",
     },
   },
+  {
+    path: "/contact",
+    name: "ContactPage",
+    component: ContactPage,
+    meta: {
+      title: "Contactez-nous",
+    },
+  },
 ]
 
 const VUE3_PREFIX = "/v2"
@@ -120,10 +129,6 @@ const vue2Routes = [
     path: "/faq/",
     name: "FaqPage",
   },
-  {
-    path: "/contact",
-    name: "ContactPage",
-  },
   {
     path: "/mon-compte",
     name: "AccountSummaryPage",
@@ -173,12 +178,11 @@ router.beforeEach(async (to) => {
     location.href = location.origin + to.fullPath
     return false
   }
-  if (!to.meta.authenticationRequired) return
   const store = useRootStore()
   if (!store.initialDataLoaded) {
     await store.fetchInitialData()
   }
-  if (!store.loggedUser) {
+  if (!store.loggedUser && to.meta.authenticationRequired) {
     return { name: "Vue2Home", replace: true }
   }
 })

diff --git a/2024-frontend/src/stores/root.js b/2024-frontend/src/stores/root.js
@@ -90,6 +90,14 @@ export const useRootStore = defineStore("root", () => {
     }).then(verifyResponse)
   }
 
+  const sendInquiryEmail = async (payload) => {
+    return fetch("/api/v1/inquiry/", { 
+      method: "POST", 
+      headers, 
+      body: JSON.stringify(payload),
+    }).then(verifyResponse)
+  }
+
   return {
     // state
     initialDataLoaded,
@@ -106,5 +114,6 @@ export const useRootStore = defineStore("root", () => {
     notifyRequiredFieldsError,
     notifyServerError,
     removeNotification,
+    sendInquiryEmail,
   }
 })
diff --git a/2024-frontend/src/validators.js b/2024-frontend/src/validators.js
@@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n"
 
 // To use more vuelidate validators, add the name of the validator to the appropriate array
 // and add the translation for the error message in @/locales/...
-const VUELIDATE_VALIDATORS = ["required", "integer", "decimal"]
+const VUELIDATE_VALIDATORS = ["required", "integer", "decimal", "email"]
 const VUELIDATE_VALIDATORS_WITH_ARGS = ["minValue", "maxValue"]
 
 // https://github.com/vuelidate/vuelidate/issues/1164#issuecomment-2104538357

diff --git a/2024-frontend/src/views/ContactPage/index.vue b/2024-frontend/src/views/ContactPage/index.vue
@@ -0,0 +1,63 @@
+<script setup>
+import AppFormSendInquiry from '@/components/AppFormSendInquiry.vue'
+
+const links = [
+  {
+    to: { name: "FaqPage" },
+    title: "Foire aux questions",
+  },
+  {
+    to: { name: "CommunityPage" },
+    title: "Webinaires à venir",
+  },
+  {
+    href: "https://ma-cantine-1.gitbook.io/ma-cantine-egalim/nos-webinaires",
+    title: "Webinaires précedents",
+  },
+  {
+    href: "https://ma-cantine-1.gitbook.io/ma-cantine-egalim/",
+    title: "Documentation sur les lois et ressources",
+  },
+  {
+    to: { name: "BlogsHome" },
+    title: "Blog",
+  },
+]
+</script>
+
+<template>
+  <h1>Contactez-nous</h1>
+  <section>
+    <h2>Ressources</h2>
+    <ul class="fr-pl-0">
+      <li v-for="link in links" :key="link.title">
+        <router-link
+          v-if="link.to"
+          :to="link.to"
+          class="fr-link fr-icon-arrow-right-line fr-link--icon-right">
+          {{ link.title }}
+        </router-link>
+        <a
+          v-else
+          :href="link.href"
+          :title="`${link.title} - ouvre une nouvelle fenêtre`"
+          target="_blank"
+          class="fr-text-title--blue-france"
+        >
+          {{ link.title }}
+        </a>
+      </li>
+    </ul>
+  </section>
+  <section>
+    <h2 class="mb-4">Avez-vous une autre question ?</h2>
+    <AppFormSendInquiry />
+  </section>
+</template>
+
+
+<style>
+ul {
+  list-style: none;
+}
+</style>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -43,7 +43,6 @@ import DiagnosticTunnel from "@/views/DiagnosticTunnel"
 import DiagnosticImportPage from "@/views/DiagnosticsImporter/DiagnosticImportPage"
 import PublicCanteenStatisticsPage from "@/views/PublicCanteenStatisticsPage"
 import AccessibilityDeclaration from "@/views/AccessibilityDeclaration"
-import ContactPage from "@/views/ContactPage"
 import PurchasesHome from "@/views/PurchasesHome"
 import PurchasePage from "@/views/PurchasePage"
 import PurchasesImporter from "@/views/PurchasesImporter"
@@ -439,15 +438,6 @@ const routes = [
     },
     sitemapGroup: Constants.SitemapGroups.SITE,
   },
-  {
-    path: "/contact",
-    name: "ContactPage",
-    component: ContactPage,
-    meta: {
-      title: "Contactez-nous",
-    },
-    sitemapGroup: Constants.SitemapGroups.SITE,
-  },
   {
     path: "/mes-achats",
     name: "PurchasesHome",
@@ -613,6 +603,14 @@ const vue3Routes = [
     },
     sitemapGroup: Constants.SitemapGroups.SITE,
   },
+  {
+    path: "/contact",
+    name: "ContactPage",
+    meta: {
+      title: "Contactez-nous",
+    },
+    sitemapGroup: Constants.SitemapGroups.SITE,
+  },
 ]
 const VUE3_PREFIX = "/v2"
 vue3Routes.forEach((r) => {