feat: Amélioration du widget EPDS (Whatsapp) (#177)

* feat: #1748 - Enlever l'écran Quelques informations à propos du questionnaire * feat: #1751 - Ajout d'un champ confirmation de téléphone * feat: #1751 - Ajout de la langue dans l'email pastek * feat: #1749 - Whatsapp: insérer un message invitant le parent à envoyer le premier message
SocialGouv · Jul 1, 2024 · b2d12d5 · b2d12d5
1 parent c229334
commit b2d12d5
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 13 deletions.
diff --git a/apollo-client.js b/apollo-client.js
@@ -39,6 +39,7 @@ export const GET_ACTIVATION_TILE_STATUS = gql`
       rdv
       sms
       whatsapp
+      whatsapp_redirect_message
     }
   }
 `
@@ -96,6 +97,7 @@ export const EPDS_CONTACT_INFORMATION = gql`
     $moyen: String
     $horaires: String
     $scoreQuestionDix: String
+    $langue: String
   ) {
     epdsContact(
       email: $email
@@ -104,6 +106,7 @@ export const EPDS_CONTACT_INFORMATION = gql`
       moyen: $moyen
       horaires: $horaires
       score_question_dix: $scoreQuestionDix
+      langue: $langue
     )
   }
 `

diff --git a/pages/contact/to-be-contacted.js b/pages/contact/to-be-contacted.js
@@ -39,7 +39,8 @@ export default function ToBeContacted() {
   const [itemValueType, setItemValueType] = useState()
   const [isSmsSelected, setSmsSelected] = useState(false)
   const [isWhatsappSelected, setWhatsappSelected] = useState(false)
-  const [isPhoneValid, setIsPhoneValide] = useState(false)
+  const [isPhoneValid, setIsPhoneValid] = useState(false)
+  const [isPhoneConfirmValid, setIsPhoneConfirmValid] = useState(false)
   const [websiteSource, setWebsiteSource] = useState(false)
   const [canSend, setCanSend] = useState(false)
   const horaire = StorageUtils.getInLocalStorage(STORAGE_CONTACT_HOURS)
@@ -53,8 +54,8 @@ export default function ToBeContacted() {
   }, [])
 
   useEffect(() => {
-    setCanSend(isValidForm(itemValueType, isPhoneValid))
-  }, [isPhoneValid])
+    setCanSend(isValidForm(itemValueType, isPhoneValid && isPhoneConfirmValid))
+  }, [isPhoneValid, isPhoneConfirmValid])
 
   useEffect(() => {
     setSmsSelected(itemValueType == RequestContact.type.sms)
@@ -260,7 +261,8 @@ export default function ToBeContacted() {
           {buttonGroupHours()}
           <ContactForm
             contactType={itemValueType}
-            setPropsPhoneValid={setIsPhoneValide}
+            setPropsPhoneValid={setIsPhoneValid}
+            setPropsPhoneConfirmValid={setIsPhoneConfirmValid}
             canSend={canSend}
             contactHours={horaire}
           />
@@ -270,7 +272,8 @@ export default function ToBeContacted() {
         <>
           <ContactForm
             contactType={itemValueType}
-            setPropsPhoneValid={setIsPhoneValide}
+            setPropsPhoneValid={setIsPhoneValid}
+            setPropsPhoneConfirmValid={setIsPhoneConfirmValid}
             canSend={canSend}
             contactHours={horaire}
           />

diff --git a/pages/index.js b/pages/index.js
@@ -23,6 +23,7 @@ import {
 import { LocaleButton } from "../src/components/LocaleButton"
 import * as AbTestingUtils from "../src/utils/ab-testing/ab-testing.utils"
 import * as TrackerUtils from "../src/utils/tracker.utils"
+import * as DemographicDataUtils from "../src/utils/ab-testing/demographic-data.utils"
 
 export default function Home() {
   const router = useRouter()
@@ -58,14 +59,18 @@ export default function Home() {
     localStorage.setItem(STORAGE_SOURCE, source)
     TrackerUtils.track(TrackerUtils.CATEG.home, TrackerUtils.ACTION.start)
     localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.generateRandomTest())
-    goToBeforeSurvey()
+    // goToBeforeSurvey()
+    goToDemographicSurvey()
   }
 
   const goToBeforeSurvey = async (event) => {
     router.push({
       pathname: "/survey/before-survey",
     })
   }
+  const goToDemographicSurvey = async (event) => {
+    DemographicDataUtils.goToDemographicSurvey(router)
+  }
 
   const [getLabelsTranslationsQuery] = useLazyQuery(
     gql(EPDS_LABELS_TRANSLATION_BY_LOCALE),

diff --git a/src/components/contact/ContactForm.js b/src/components/contact/ContactForm.js
@@ -1,14 +1,15 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import {
   RequestContact,
   STORAGE_SOURCE,
+  STORAGE_ACTIVATION_CONTACT,
   STORAGE_TEST_DEMOGRAPHIC_DPT_CODE,
   STORAGE_TEST_DEMOGRAPHIC_DPT_LIBELLE,
   URL_CHAT_WHATSAPP,
 } from "../../constants/constants"
 import { Form } from "../../constants/specificLabels"
 import { useMutation } from "@apollo/client"
-import { Col } from "react-bootstrap"
+import { Alert, Col } from "react-bootstrap"
 import * as StorageUtils from "../../utils/storage.utils"
 import * as TrackerUtils from "../../utils/tracker.utils"
 import {
@@ -17,18 +18,26 @@ import {
   SAVE_CONTACT,
   SAVE_DEMANDE_DE_CONTACT,
 } from "../../../apollo-client"
+import { Modal } from "react-bootstrap"
 import * as ContactUtils from "../../utils/contact.utils"
 import { phoneNumberFormatting, convertDateToISO } from "../../utils/main.utils"
 import { useRouter } from "next/router"
 
 export const ContactForm = ({
   contactType,
   setPropsPhoneValid,
+  setPropsPhoneConfirmValid,
   canSend,
   contactHours,
 }) => {
   const router = useRouter()
   const [isPhoneValid, setPhoneValid] = useState()
+  const [inputPhoneValue, setInputPhoneValue] = useState()
+  const [inputPhoneConfirmValue, setInputPhoneConfirmValue] = useState()
+  const [isPhoneConfirmValid, setPhoneConfirmValid] = useState()
+  const [isPhoneConfirmMatch, setPhoneConfirmMatch] = useState()
+  const [showWhatsappRedirectMessage, setShowWhatsappRedirectMessage] = useState(false)
+
   const source = StorageUtils.getInLocalStorage(STORAGE_SOURCE)
   const requiredField = <p className="required-field">{Form.required}</p>
   const dptCode = StorageUtils.getInLocalStorage(
@@ -37,10 +46,16 @@ export const ContactForm = ({
   const dptLibelle = StorageUtils.getInLocalStorage(
     STORAGE_TEST_DEMOGRAPHIC_DPT_LIBELLE
   )
+  const activationContact = JSON.parse(StorageUtils.getInLocalStorage(STORAGE_ACTIVATION_CONTACT))
+
   const cancel = () => {
     router.back()
   }
 
+  useEffect(() => {
+    setPropsPhoneConfirmValid(isPhoneConfirmValid && isPhoneConfirmMatch)
+  }, [isPhoneConfirmValid, isPhoneConfirmMatch])
+
   const goToConfirmation = () => {
     router.push({
       pathname: "/contact/contact-confirmed",
@@ -50,8 +65,11 @@ export const ContactForm = ({
     client: client,
     onCompleted: () => {
       ContactUtils.saveContactRequest(contactType, sendContactQuery)
-
-      goToConfirmation()
+      if(contactType === RequestContact.type.whatsapp && activationContact?.whatsapp_redirect_message?.length > 0) {
+        setShowWhatsappRedirectMessage(true)
+      } else {
+        goToConfirmation()
+      }
     },
     onError: (err) => {
       console.error(err)
@@ -86,6 +104,7 @@ export const ContactForm = ({
         prenom: name,
         scoreQuestionDix: scoreQuestionDix,
         telephone: phoneNumber,
+        langue: StorageUtils.getLocaleInLocalStorage().libelle_francais,
       },
     })
   }
@@ -144,8 +163,10 @@ export const ContactForm = ({
         name="inputPhone"
         pattern="[0-9]{10}"
         onChange={(e) => {
+          setInputPhoneValue(e.target.value)
           setPhoneValid(e.target.validity.valid)
           setPropsPhoneValid(e.target.validity.valid)
+          setPhoneConfirmMatch(inputPhoneConfirmValue === e.target.value)
         }}
         placeholder="Écrivez ici le numéro pour vous contacter"
         required={isRequired}
@@ -158,8 +179,67 @@ export const ContactForm = ({
     </div>
   )
 
+  const phoneConfirmInput = (isRequired) => (
+    <div
+      className={`form-group fr-input-group ${
+        isPhoneConfirmValid ? "fr-input-group--valid" : ""
+      }`}
+    >
+      <label htmlFor="inputPhoneConfirm">
+        Confirmez votre numéro de téléphone {isRequired ? "*" : null} :
+      </label>
+      <input
+        type="tel"
+        className={`form-control fr-input ${
+          isPhoneConfirmValid ? "custom-input-valid" : ""
+        }`}
+        id="inputPhoneConfirm"
+        name="inputPhoneConfirm"
+        pattern="[0-9]{10}"
+        onChange={(e) => {
+          setInputPhoneConfirmValue(e.target.value)
+          setPhoneConfirmValid(e.target.validity.valid)
+          setPhoneConfirmMatch(inputPhoneValue === e.target.value)
+        }}
+        placeholder="Confirmez ici le numéro pour vous contacter"
+        required={isRequired}
+      />
+
+      {isPhoneConfirmValid === false && (
+        <InputError error="Le numéro de téléphone n'est pas au bon format" />
+      )}
+      {isPhoneConfirmMatch === false && (
+        <InputError error="Le numéro ne correspond pas à celui renseigné précédemment" />
+      )}
+      {isRequired ? requiredField : null}
+    </div>
+  )
+
   return (
     <>
+      <Modal show={showWhatsappRedirectMessage} centered size="md" className="modal-info">
+        <Modal.Header className="fr-modal__header header-choose-modal">
+          <b>Information</b>
+        </Modal.Header>
+
+        <Modal.Body style={{ textAlign: "center" }}>
+          <div>{activationContact?.whatsapp_redirect_message} </div>
+        </Modal.Body>
+
+        <Modal.Footer
+          style={{ alignSelf: "center", borderTop: "none", margin: 20 }}
+        >
+          <button className="fr-btn" onClick={() => {
+            setShowWhatsappRedirectMessage(false)
+            goToConfirmation()
+            setTimeout(() => {
+              window.open(URL_CHAT_WHATSAPP, "_blank")
+            }, 500)
+          }}>
+            Ok
+          </button>
+        </Modal.Footer>
+      </Modal>
       {(contactType === RequestContact.type.sms ||
         contactType === RequestContact.type.whatsapp) && (
         <form className="contact-form" onSubmit={sendForm}>
@@ -175,6 +255,7 @@ export const ContactForm = ({
           </div>
 
           {phoneInput(true)}
+          {phoneConfirmInput(true)}
           <Col className="be-contacted-bottom-buttons">
             <button className="fr-btn fr-btn--secondary" onClick={cancel}>
               Annuler
@@ -185,9 +266,6 @@ export const ContactForm = ({
               disabled={!canSend}
               onClick={() => {
                 sendTrackerContactType(contactType)
-                if (contactType === RequestContact.type.whatsapp) {
-                  window.open(URL_CHAT_WHATSAPP, "_blank")
-                }
               }}
             >
               Valider

diff --git a/src/components/results/ContactTile.js b/src/components/results/ContactTile.js
@@ -7,6 +7,9 @@ import {
 import { client, GET_ACTIVATION_TILE_STATUS } from "../../../apollo-client"
 import { Icon } from "@dataesr/react-dsfr"
 import { useQuery } from "@apollo/client"
+import {
+  STORAGE_ACTIVATION_CONTACT,
+} from "../../constants/constants"
 
 export const Tile = ({
   title,
@@ -57,6 +60,7 @@ export function ContactTile({ isArticle }) {
   if (loading) return <></>
   if (error) return <p>Error</p>
   const isTileContactActive = data.activationTile.activation_tile
+  localStorage.setItem(STORAGE_ACTIVATION_CONTACT, JSON.stringify(data.activationTile))
 
   return (
     <>

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -19,6 +19,8 @@ export const STORAGE_IS_BACK_RESULTS = "isBackFromConfirmed"
 export const STORAGE_CONTACT_TYPE = "contactType"
 export const STORAGE_CONTACT_HOURS = "contactHours"
 
+export const STORAGE_ACTIVATION_CONTACT = "activationContact"
+
 export const API_URL = process.env.NEXT_PUBLIC_API_URL
 export const CALENDLY_LINK = process.env.NEXT_PUBLIC_CALENDLY_LINK
 export const EPDS_SOURCE = "SitePartenaire"