Merge pull request #106 from SocialGouv/feat-recruter-parents

feat(recrutement): modal pour demander aux parents

src/components/results/Intentions.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react"
 import { ButtonGroup, ToggleButton } from "react-bootstrap"
 import { trackerForIntentions } from "../../utils/ab-testing/measuring-intentions.utils"
 import * as PdfUtils from "../../utils/pdf.utils"
+import { RecruitParents } from "./RecruitParents"
 
 /**
  * @param {number} moodLevel
@@ -96,6 +97,7 @@ export const Intentions = ({ moodLevel }) => {
       <div className="intentions-card">
         {questionBlock(questionAboutScore)}
         <DownloadEpdsResponsesBtn />
+        <RecruitParents />
       </div>
     </div>
   )

src/components/results/RecruitParents.js

@@ -0,0 +1,79 @@
+import { Button } from "@dataesr/react-dsfr"
+import { useState } from "react"
+import { Modal } from "react-bootstrap"
+import * as TrackerUtils from "../../utils/tracker.utils"
+
+export function RecruitParents() {
+  const [show, setShow] = useState()
+
+  const INDIVIDUAL_URL = "https://calendly.com/1000-jours-blues/30min"
+  const GROUP_URL = undefined
+
+  const openModal = () => setShow(true)
+  const closeModal = () => setShow(false)
+
+  const onClickParticipate = (url, label) => {
+    window.open(url, "_blank")
+    TrackerUtils.trackerClick(
+      TrackerUtils.CATEG.recruit,
+      TrackerUtils.EVENT_CLICK,
+      label
+    )
+  }
+
+  return (
+    <div className="recruit-parents">
+      <div>
+        Participez à l'amélioration de cet outil afin que le plus grand nombre
+        de parents soient aidés
+      </div>
+      <Button className="participate-btn" onClick={openModal}>
+        Je participe
+      </Button>
+
+      <Modal show={show} centered size="lg">
+        <Modal.Header className="fr-modal__header">
+          <button
+            className="fr-btn--close fr-btn"
+            aria-controls="fr-modal-2"
+            onClick={closeModal}
+          >
+            Fermer
+          </button>
+        </Modal.Header>
+
+        <Modal.Body>
+          Merci pour votre soutien. <br />
+          Comment souhaitez-vous participer ?
+        </Modal.Body>
+
+        <Modal.Footer>
+          {GROUP_URL && (
+            <div className="recruit-modale-response">
+              En groupe, avec d'autres parents
+              <Button
+                className="participate-modal-btn"
+                onClick={() =>
+                  onClickParticipate(GROUP_URL, "Voir l'évènement")
+                }
+              >
+                Voir l'évènement
+              </Button>
+            </div>
+          )}
+          <div className="recruit-modale-response">
+            En individuel, avec un membre de l'équipe
+            <Button
+              className="participate-modal-btn"
+              onClick={() =>
+                onClickParticipate(INDIVIDUAL_URL, "Choisir un créneau")
+              }
+            >
+              Choisir un créneau
+            </Button>
+          </div>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}

src/utils/tracker.utils.js

@@ -7,6 +7,7 @@ export const CATEG = {
   test: "Test",
   intentions: "Intentions",
   demography: "Démographie",
+  recruit: "Recrutement",
   results: "Résultats",
 }
 

styles/results.scss

@@ -223,6 +223,29 @@
   }
 }
 
+.recruit-parents {
+  margin-top: $xxxs;
+  display: flex;
+  flex-direction: column;
+
+  .participate-btn {
+    align-self: center;
+    margin-block: $xxxxs;
+  }
+}
+
+.recruit-modale-response {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  text-align: center;
+
+  .participate-modal-btn {
+    align-self: center;
+    margin-block: $xxxxs;
+  }
+}
+
 @media screen and (max-width: 770px) {
 
   .measure .buttons-block,