Merge pull request #172 from SocialGouv/feat-contact-whatsapp

feat: Add chat with whatsapp
SocialGouv · May 13, 2024 · be914b1 · be914b1
2 parents 99a6408 + a569cbd
commit be914b1
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 17 deletions.
diff --git a/apollo-client.js b/apollo-client.js
@@ -36,6 +36,9 @@ export const GET_ACTIVATION_TILE_STATUS = gql`
   query activationTile {
     activationTile {
       activation_tile
+      rdv
+      sms
+      whatsapp
     }
   }
 `

diff --git a/pages/contact/contact-confirmed.js b/pages/contact/contact-confirmed.js
@@ -61,6 +61,8 @@ export default function ContactConfirmed() {
             "Vous devriez recevoir un email de notre équipe dans les 48h. Pensez bien à vérifier dans vos spams."}
           {contactType === RequestContact.type.sms &&
             "Vous devriez recevoir un SMS de notre équipe dans les 48h en fonction des disponibilités sélectionnées."}
+          {contactType === RequestContact.type.whatsapp &&
+            "Vous devriez recevoir un message de notre équipe dans les 48h."}
           {contactType === RequestContact.type.rendezvous &&
             "Vous serez contacté sur le numéro de téléphone que vous avez communiqué."}
         </p>

diff --git a/pages/contact/to-be-contacted.js b/pages/contact/to-be-contacted.js
@@ -27,6 +27,8 @@ import { ContactForm } from "../../src/components/contact/ContactForm"
 import * as StorageUtils from "../../src/utils/storage.utils"
 import * as TrackerUtils from "../../src/utils/tracker.utils"
 import * as ContactUtils from "../../src/utils/contact.utils"
+import { useQuery } from "@apollo/client"
+import { client, GET_ACTIVATION_TILE_STATUS } from "../../apollo-client"
 
 export default function ToBeContacted() {
   const router = useRouter()
@@ -36,6 +38,7 @@ export default function ToBeContacted() {
   const [contactHours, setContactHours] = useState(defaultContactHours)
   const [itemValueType, setItemValueType] = useState()
   const [isSmsSelected, setSmsSelected] = useState(false)
+  const [isWhatsappSelected, setWhatsappSelected] = useState(false)
   const [isPhoneValid, setIsPhoneValide] = useState(false)
   const [websiteSource, setWebsiteSource] = useState(false)
   const [canSend, setCanSend] = useState(false)
@@ -55,6 +58,8 @@ export default function ToBeContacted() {
 
   useEffect(() => {
     setSmsSelected(itemValueType == RequestContact.type.sms)
+    setWhatsappSelected(itemValueType == RequestContact.type.whatsapp)
+    console.log(itemValueType)
   }, [itemValueType])
 
   const cancel = () => {
@@ -74,9 +79,9 @@ export default function ToBeContacted() {
     })
   }
 
-  const onClickSelector = () => {
+  const onClickSelector = (type) => {
     TrackerUtils.trackerForContact("Choix effectué")
-    TrackerUtils.trackerForContact("Choix sms")
+    TrackerUtils.trackerForContact("Choix " + type.id)
   }
 
   const sendTrackerContactType = (typeContact) => {
@@ -92,6 +97,10 @@ export default function ToBeContacted() {
     if (itemValueType === RequestContact.type.sms) {
       sendTrackerContactType(itemValueType)
       goToContactValidation("/contact/contact-confirmed")
+    }
+    if (itemValueType === RequestContact.type.whatsapp) {
+      sendTrackerContactType(itemValueType)
+      goToContactValidation("/contact/contact-confirmed")
     } else if (itemValueType === RequestContact.type.rendezvous) {
       TrackerUtils.trackerForContact("Choix effectué")
       TrackerUtils.trackerForContact("Choix rendezvous")
@@ -110,7 +119,7 @@ export default function ToBeContacted() {
       checked={itemValueType === type.id}
       onChange={(e) => {
         setItemValueType(e.currentTarget.value)
-        onClickSelector()
+        onClickSelector(type)
       }}
     >
       <Row className="card-center-img">
@@ -134,6 +143,16 @@ export default function ToBeContacted() {
     </fieldset>
   )
 
+  const WhatsappComponent = () => (
+    <fieldset>
+      <Row>
+        {defaultContactTypes.byWhatsapp.map((type) => (
+          <Col key={type.id}>{CustomToggleButton(type)}</Col>
+        ))}
+      </Row>
+    </fieldset>
+  )
+
   const CalendlyComponent = () => {
     return (
       <>
@@ -146,14 +165,28 @@ export default function ToBeContacted() {
     )
   }
 
-  const ButtonGroupType = () => (
-    <ButtonGroup className="be-contacted-button-group">
-      <Col>
-        <CalendlyComponent />
-        <SmsComponent />
-      </Col>
-    </ButtonGroup>
-  )
+  const ButtonGroupType = (params) => {
+    const _activationTile = params.activationTile
+    if (_activationTile) {
+      return (
+        <ButtonGroup className="be-contacted-button-group">
+          <Col>
+            {activationTile.rdv ? <CalendlyComponent /> : null}
+            {activationTile.sms ? <SmsComponent /> : null}
+            {activationTile.whatsapp ? <WhatsappComponent /> : null}
+          </Col>
+        </ButtonGroup>
+      )
+    }
+    return (
+      <ButtonGroup className="be-contacted-button-group">
+        <Col>
+          <CalendlyComponent />
+          <SmsComponent />
+        </Col>
+      </ButtonGroup>
+    )
+  }
 
   const buttonGroupHours = () => (
     <ToggleButtonGroup
@@ -200,6 +233,14 @@ export default function ToBeContacted() {
     )
   }
 
+  const { loading, error, data } = useQuery(GET_ACTIVATION_TILE_STATUS, {
+    client: client,
+  })
+
+  if (loading) return <></>
+  if (error) return <p>Error</p>
+  const activationTile = data.activationTile
+
   return (
     <ContentLayout>
       <WidgetHeader title="Je veux être accompagné.e" locale={localeSelected} />
@@ -208,7 +249,7 @@ export default function ToBeContacted() {
         imageUrl="/img/image-wanda.png"
       />
       <p>Je préfére être contacté.e par :</p>
-      <ButtonGroupType />
+      <ButtonGroupType activationTile={activationTile} />
 
       {isSmsSelected ? (
         <>
@@ -225,7 +266,17 @@ export default function ToBeContacted() {
           />
         </>
       ) : null}
-      {!isSmsSelected && (
+      {isWhatsappSelected ? (
+        <>
+          <ContactForm
+            contactType={itemValueType}
+            setPropsPhoneValid={setIsPhoneValide}
+            canSend={canSend}
+            contactHours={horaire}
+          />
+        </>
+      ) : null}
+      {!isSmsSelected && !isWhatsappSelected && (
         <Col className="be-contacted-bottom-buttons">
           {websiteSource !== OPEN_CONTACT_FROM_EMAIL && (
             <button className="fr-btn fr-btn--secondary" onClick={cancel}>
@@ -249,6 +300,15 @@ export default function ToBeContacted() {
 }
 
 const defaultContactTypes = {
+  byWhatsapp: [
+    {
+      icon: "../img/contact/chat.svg",
+      iconSelected: "../img/contact/chat-selected.svg",
+      id: RequestContact.type.whatsapp,
+      isChecked: false,
+      text: "Whatsapp",
+    },
+  ],
   byAvailabilities: [
     {
       icon: "../img/contact/sms.svg",
@@ -317,12 +377,16 @@ export const isValidButtonEnabled = (itemValueType, contactHours, canSend) => {
 
   return (
     itemValueType == RequestContact.type.rendezvous ||
-    (itemValueType == RequestContact.type.sms && isHoursSelected && canSend)
+    (itemValueType == RequestContact.type.sms && isHoursSelected && canSend) ||
+    (itemValueType == RequestContact.type.whatsapp && canSend)
   )
 }
 
 const isValidForm = (contactType, isPhoneValid) => {
-  if (contactType == RequestContact.type.sms) {
+  if (
+    contactType == RequestContact.type.sms ||
+    contactType == RequestContact.type.whatsapp
+  ) {
     return isPhoneValid
   }
   return false

diff --git a/src/components/contact/ContactForm.js b/src/components/contact/ContactForm.js
@@ -4,6 +4,7 @@ import {
   STORAGE_SOURCE,
   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"
@@ -159,7 +160,8 @@ export const ContactForm = ({
 
   return (
     <>
-      {contactType === RequestContact.type.sms && (
+      {(contactType === RequestContact.type.sms ||
+        contactType === RequestContact.type.whatsapp) && (
         <form className="contact-form" onSubmit={sendForm}>
           <div className={`form-group fr-input-group`}>
             <label htmlFor="inputName">Votre prénom :</label>
@@ -181,7 +183,12 @@ export const ContactForm = ({
               className="fr-btn"
               type="submit"
               disabled={!canSend}
-              onClick={() => sendTrackerContactType(contactType)}
+              onClick={() => {
+                sendTrackerContactType(contactType)
+                if (contactType === RequestContact.type.whatsapp) {
+                  window.open(URL_CHAT_WHATSAPP, "_blank")
+                }
+              }}
             >
               Valider
             </button>

diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -27,10 +27,13 @@ export const OPEN_CONTACT_FROM_EMAIL = "fromEmail"
 
 export const PATTERN_EMAIL = "[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z.]{2,15}"
 
+export const URL_CHAT_WHATSAPP = "https://wa.me/message/ZMCTRIQWA7OKD1"
+
 export const RequestContact = {
   type: {
     sms: "sms",
     rendezvous: "rendezvous",
+    whatsapp: "whatsapp",
   },
   hours: {
     morning: "matin",

diff --git a/src/utils/contact.utils.js b/src/utils/contact.utils.js
@@ -14,6 +14,8 @@ export const trackerContactName = (typeContact) => {
   switch (typeContact) {
     case RequestContact.type.sms:
       return TrackerUtils.CONTACT_SENT.sms
+    case RequestContact.type.whatsapp:
+      return TrackerUtils.CONTACT_SENT.whatsapp
     case RequestContact.type.rendezvous:
       return TrackerUtils.CONTACT_SENT.rendezvous
   }

diff --git a/src/utils/tracker.utils.js b/src/utils/tracker.utils.js
@@ -43,6 +43,7 @@ export const ACTION = {
 
 export const CONTACT_SENT = {
   sms: "Confirmation sms",
+  whatsapp: "Confirmation whatsapp",
   rendezvous: "Confirmation rendezvous",
 }