feat: ab testing contact elise

__tests__/components/ab-testing/give-access-to-resources.test.js

@@ -6,7 +6,6 @@ import * as AbTestingUtils from "../../../src/utils/ab-testing/ab-testing.utils"
 describe("UI de GiveAccessToResources", () => {
   describe("TEST A/B/C/D", () => {
     const mailBtnText = "Je souhaite recevoir les ressources par mail"
-    const linkBtnText = "Afficher les ressources disponibles"
 
     test("Should return modal with email when test is A", async () => {
       localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.A)
@@ -29,21 +28,5 @@ describe("UI de GiveAccessToResources", () => {
       fireEvent.click(button)
       expect(await screen.queryByText("Fermer")).toBeInTheDocument()
     })
-
-    test("Should return link when test is C", async () => {
-      localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.C)
-      render(<GiveAccessToResources />)
-
-      const button = screen.getByRole("button", { name: linkBtnText })
-      expect(button).toBeInTheDocument()
-    })
-
-    test("Should return link when test is D", async () => {
-      localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.TEST.D)
-      render(<GiveAccessToResources />)
-
-      const button = screen.getByRole("button", { name: linkBtnText })
-      expect(button).toBeInTheDocument()
-    })
   })
 })

__tests__/utils/ab-testing/contact-button-label.utils.test.js

@@ -27,10 +27,5 @@ describe("Contact button label Utils", () => {
       localStorage.setItem(STORAGE_TEST_ABC, "C")
       expect(getContactButtonLabelByTest()).toEqual("Parler à Élise")
     })
-
-    test("Should return `Obtenir de l'aide` when it's test D", () => {
-      localStorage.setItem(STORAGE_TEST_ABC, "D")
-      expect(getContactButtonLabelByTest()).toEqual("Obtenir de l'aide")
-    })
   })
 })

apollo-client.js

@@ -119,7 +119,7 @@ export const UPDATE_REPONSES_EPDS_ID_IN_INFORMATION_DEMOGRAPHIQUES = gql`
 
 /**
  * Enregistre la demande de contact dans la collection "Demande de contacts"
- * ENUM_DEMANDEDECONTACT_TYPE_DE_CONTACT { sms, email, chat }
+ * ENUM_DEMANDEDECONTACT_TYPE_DE_CONTACT { sms, email, chat, rendezvous }
  */
 export const SAVE_DEMANDE_DE_CONTACT = gql`
   mutation (

package.json

@@ -26,6 +26,7 @@
     "react": "17.0.2",
     "react-bootstrap": "^2.1.0",
     "react-bootstrap-icons": "^1.7.2",
+    "react-calendly": "^4.1.1",
     "react-dom": "17.0.2",
     "sass": "^1.48.0",
     "swr": "^1.3.0"

pages/contact/contact-confirmed.js

@@ -7,7 +7,7 @@ import {
   STORAGE_CONTACT_TYPE,
   STORAGE_SOURCE,
 } from "../../src/constants/constants"
-import { } from "@dataesr/react-dsfr"
+import {} from "@dataesr/react-dsfr"
 import { WidgetHeader } from "../../src/components/WidgetHeader"
 import * as StorageUtils from "../../src/utils/storage.utils"
 
@@ -46,9 +46,12 @@ export default function ContactConfirmed() {
           <b>Votre demande de contact a bien été prise en compte.</b>
         </p>
         <p>
-          {contactType == RequestContact.type.email
-            ? "Vous devriez recevoir un email d’Elise dans les 48h. Pensez bien à vérifier dans vos spams."
-            : "Vous devriez recevoir un SMS d’Elise dans les 48h en fonction des disponibilités sélectionnées."}
+          {contactType === RequestContact.type.email &&
+            "Vous devriez recevoir un email d’Elise dans les 48h. Pensez bien à vérifier dans vos spams."}
+          {contactType === RequestContact.type.sms &&
+            "Vous devriez recevoir un SMS d’Elise dans les 48h en fonction des disponibilités sélectionnées."}
+          {contactType === RequestContact.type.rendezvous &&
+            "Vous serez contacté sur le numéro de téléphone que vous avez communiqué."}
         </p>
 
         {websiteSource !== OPEN_CONTACT_FROM_EMAIL && (

pages/contact/contact-form.js

@@ -2,7 +2,9 @@
 import React, { useEffect, useState } from "react"
 import { Col } from "react-bootstrap"
 import { ContentLayout } from "../../src/components/Layout"
+import { useCalendlyEventListener, InlineWidget } from "react-calendly"
 import { } from "@dataesr/react-dsfr"
+
 import {
   PATTERN_EMAIL,
   RequestContact,
@@ -26,6 +28,8 @@ import { useRouter } from "next/router"
 import { WidgetHeader } from "../../src/components/WidgetHeader"
 import { Form } from "../../src/constants/specificLabels"
 import * as ContactUtils from "../../src/utils/contact.utils"
+import * as TrackerUtils from "../../src/utils/tracker.utils"
+import * as AbTestingUtils from "../../src/utils/ab-testing/ab-testing.utils"
 
 export default function ContactForm() {
   const router = useRouter()
@@ -36,6 +40,7 @@ export default function ContactForm() {
   const [childBirthDate, setChildBirthDate] = useState("")
   const [numberOfChildren, setNumberOfChildren] = useState(0)
   const [isLoading, setLoading] = useState(false)
+  const [isCalendlyValide, setCalendlyValide] = useState(false)
 
   const contactType = StorageUtils.getInLocalStorage(STORAGE_CONTACT_TYPE)
   const contactHours = StorageUtils.getInLocalStorage(STORAGE_CONTACT_HOURS)
@@ -49,7 +54,6 @@ export default function ContactForm() {
   const [sendEmailContactQuery] = useMutation(EPDS_CONTACT_INFORMATION, {
     client: client,
     onCompleted: () => {
-      ContactUtils.sendTrackerContactConfirmed(contactType)
       ContactUtils.saveContactRequest(contactType, sendContactQuery)
 
       setLoading(false)
@@ -156,6 +160,42 @@ export default function ContactForm() {
     })
   }
 
+  const trackerContactName = (typeContact) => {
+    switch (typeContact) {
+      case RequestContact.type.email:
+        return TrackerUtils.CONTACT_SENT.mail
+      case RequestContact.type.sms:
+        return TrackerUtils.CONTACT_SENT.sms
+      case RequestContact.type.chat:
+        return TrackerUtils.CONTACT_SENT.chat
+      case RequestContact.type.rendezvous:
+        return TrackerUtils.CONTACT_SENT.rendezvous
+    }
+  }
+
+  const sendTrackerContactType = (typeContact) => {
+    TrackerUtils.genericTracker(
+      TrackerUtils.CATEG.contact,
+      TrackerUtils.NAME.contact_confirm_sent
+    )
+    if (typeContact) {
+      TrackerUtils.track(
+        TrackerUtils.CATEG.contact,
+        TrackerUtils.ACTION.contact_confirm_sent,
+        trackerContactName(typeContact)
+      )
+      AbTestingUtils.trackerForAbTesting(trackerContactName(typeContact))
+    }
+  }
+
+  useCalendlyEventListener({
+    onEventScheduled: (_e) => {
+      sendTrackerContactType(contactType)
+      setCalendlyValide(true)
+    },
+  })
+
+
   const emailInput = (isRequired) => (
     <div
       className={`form-group fr-input-group ${isEmailValid ? "fr-input-group--valid" : ""
@@ -204,6 +244,10 @@ export default function ContactForm() {
     </div>
   )
 
+  if (isCalendlyValide) {
+    goToConfirmation()
+  }
+
   const setOrderPhoneAndEmailInputs = () => {
     if (contactType == RequestContact.type.email) {
       return (
@@ -221,7 +265,6 @@ export default function ContactForm() {
         </>
       )
     }
-
     return null
   }
 
@@ -256,8 +299,8 @@ export default function ContactForm() {
   return (
     <ContentLayout>
       <WidgetHeader title="être contacté(e)" locale={localeSelected} />
-
-      <form className="contact-form" onSubmit={sendForm}>
+      {contactType !== RequestContact.type.rendezvous && (
+        <form className="contact-form" onSubmit={sendForm}>
         <div className={`form-group fr-input-group`}>
           <label htmlFor="inputName">Votre prénom :</label>
           <input
@@ -266,14 +309,14 @@ export default function ContactForm() {
             id="inputName"
             name="inputName"
             placeholder={Form.placeholder.name}
-          />
+            />
         </div>
 
         {setOrderPhoneAndEmailInputs()}
         <ChildCounter />
         {numberOfChildren > 0 ? (
           <DatePickerLastChild onChange={(date) => setChildBirthDate(date)} />
-        ) : null}
+          ) : null}
 
         <Col className="be-contacted-bottom-buttons">
           <button className="fr-btn fr-btn--secondary" onClick={cancel}>
@@ -283,12 +326,27 @@ export default function ContactForm() {
             className="fr-btn"
             type="submit"
             disabled={!canSend || isLoading}
-          >
+            onClick={()=>sendTrackerContactType(contactType)}
+            >
             Valider
             {isLoading ? <LoaderFoButton /> : null}
           </button>
         </Col>
       </form>
+        )
+      }
+      {contactType === RequestContact.type.rendezvous && (
+        <>
+          <InlineWidget
+            url="https://calendly.com/rdv-nos1000jours/30min"
+          />
+          <Col className="be-contacted-bottom-buttons">
+            <button className="fr-btn fr-btn--secondary" onClick={cancel}>
+              Annuler
+            </button>
+          </Col>
+        </>
+      )}
     </ContentLayout>
   )
 }