feat: Mise à jour des informations demographiques

SocialGouv · Nov 13, 2023 · 6b3d018 · 6b3d018
1 parent a052f82
commit 6b3d018
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 18 deletions.
diff --git a/apollo-client.js b/apollo-client.js
@@ -135,6 +135,8 @@ export const SAVE_INFORMATION_DEMOGRAPHIQUES = gql`
     $age: ENUM_INFORMATIONSDEMOGRAPHIQUES_AGE
     $entourageDispo: ENUM_INFORMATIONSDEMOGRAPHIQUES_ENTOURAGE_DISPO
     $situation: String
+    $lastChildAge: Int
+    $moisGrossesse: Int
     $codePostal: String
     $ville: String
     $departement: String
@@ -151,6 +153,8 @@ export const SAVE_INFORMATION_DEMOGRAPHIQUES = gql`
           age: $age
           entourage_dispo: $entourageDispo
           situation: $situation
+          nb_mois_dernier_enfant: $lastChildAge
+          nb_mois_de_grossesse: $moisGrossesse
           code_postal: $codePostal
           ville: $ville
           departement: $departement

diff --git a/pages/ab-testing/demographic-data-survey.js b/pages/ab-testing/demographic-data-survey.js
@@ -27,6 +27,8 @@ import * as TrackerUtils from "../../src/utils/tracker.utils"
 import * as DemographicDataUtils from "../../src/utils/ab-testing/demographic-data.utils"
 import { JobSelector } from "../../src/components/JobSelector"
 import { DepartmentCodeSelector } from "../../src/components/DepartmentCodeSelector"
+import { LastChildAgeSelector } from "../../src/components/LastChildAgeSelector"
+import { MoisGrossesseSelector } from "../../src/components/MoisGrossesseSelector"
 
 export default function DemographicDataSurvey() {
   const router = useRouter()
@@ -42,6 +44,8 @@ export default function DemographicDataSurvey() {
   const [entourageItems, setEntourageItems] = useState(availableRelativesValues)
   const [residenceValue, setResidenceValue] = useState()
   const [jobValue, setJobValue] = useState()
+  const [lastChildAge, setLastChildAge] = useState()
+  const [moisGrossesse, setMoisGrossesse] = useState()
 
   const epdsTestID = StorageUtils.getInLocalStorage(STORAGE_RESULTS_ID)
   const demographicData = DemographicDataUtils.getDemographicBeforeEpds()
@@ -53,7 +57,9 @@ export default function DemographicDataSurvey() {
       jobValue,
       residenceValue,
       situationItems,
-      entourageItems
+      entourageItems,
+      lastChildAge,
+      moisGrossesse
     )
     setValidateButtonEnabled(isCompleted)
   }, [
@@ -63,6 +69,8 @@ export default function DemographicDataSurvey() {
     residenceValue,
     situationItems,
     entourageItems,
+    lastChildAge,
+    moisGrossesse,
   ])
 
   const RadioButtonGroup = ({ groupName, data, defaultData, setItems }) => (
@@ -184,6 +192,19 @@ export default function DemographicDataSurvey() {
     const situations = situationItems?.filter((item) => item.isChecked)
     const entourage = entourageItems?.find((item) => item.isChecked)
 
+    let lastChildAgeInt = null
+    let moisGrossesseInt = null
+    situationItems?.filter((item) => {
+      if (item.id === "vousAttendez1Enfant" && item.isChecked) {
+        moisGrossesseInt = parseInt(moisGrossesse)
+        moisGrossesseInt = isNaN(moisGrossesseInt) ? null : moisGrossesseInt
+      }
+      if (item.id === "vousAvezEnfantDeMoinsDe1an" && item.isChecked) {
+        lastChildAgeInt = parseInt(lastChildAge)
+        lastChildAgeInt = isNaN(lastChildAgeInt) ? null : lastChildAgeInt
+      }
+    })
+
     localStorage.setItem(STORAGE_TEST_DEMOGRAPHIC_DPT_CODE, residenceValue.code)
     localStorage.setItem(
       STORAGE_TEST_DEMOGRAPHIC_DPT_LIBELLE,
@@ -197,6 +218,8 @@ export default function DemographicDataSurvey() {
         genre: gender.id,
         age: age.id,
         situation: convertArraySituationsToString(situations),
+        lastChildAge: lastChildAgeInt,
+        moisGrossesse: moisGrossesseInt,
         entourageDispo: entourage.id,
         departement: residenceValue.code,
         departementLibelle: residenceValue.nom,
@@ -253,11 +276,20 @@ export default function DemographicDataSurvey() {
         </div>
 
         <div>
-          <div className="bloc-name">Département de résidence :</div>
+          <div className="bloc-name">Votre département de résidence :</div>
           <DepartmentCodeSelector setSelectedDepartment={setResidenceValue} />
         </div>
 
         <SituationBloc />
+        <MoisGrossesseSelector
+          situations={situationItems}
+          setMoisGrossesse={setMoisGrossesse}
+        />
+        <LastChildAgeSelector
+          situations={situationItems}
+          setLastChildAge={setLastChildAge}
+        />
+
         <EntourageBloc />
 
         <i className="required-field">Tous les champs sont obligatoires</i>
@@ -282,23 +314,39 @@ export const checkIsFormCompleted = (
   jobData,
   residenceData,
   situationData,
-  entourageData
+  entourageData,
+  lastChildAge,
+  moisGrossesse
 ) => {
-  const isGenderCompeleted = genderData?.find((item) => item.isChecked)
-  const isAgeCompeleted = ageData?.find((item) => item.isChecked)
+  const isGenderCompeleted = !!genderData?.find((item) => item.isChecked)
+  const isAgeCompeleted = !!ageData?.find((item) => item.isChecked)
   const isJobSelected = jobData != undefined
   const isResidenceSelected = residenceData != undefined
-  const isSituationCompeleted = situationData?.find((item) => item.isChecked)
-  const isEntourageCompeleted = entourageData?.find((item) => item.isChecked)
+  const isSituationCompeleted = !!situationData?.find((item) => item.isChecked)
+  const isEntourageCompeleted = !!entourageData?.find((item) => item.isChecked)
+  const isLastChildAgeSelected = lastChildAge != undefined
+  const isMoisGrossesseSelected = moisGrossesse != undefined
+
+  const checkpoints = [
+    isGenderCompeleted,
+    isAgeCompeleted,
+    isJobSelected,
+    isResidenceSelected,
+    isSituationCompeleted,
+    isEntourageCompeleted,
+  ]
+
+  // Add optionnal checkpoints
+  situationData?.forEach((item) => {
+    if (item.id === "vousAvezEnfantDeMoinsDe1an" && item.isChecked)
+      checkpoints.push(isLastChildAgeSelected)
+    if (item.id === "vousAttendez1Enfant" && item.isChecked)
+      checkpoints.push(isMoisGrossesseSelected)
+  })
 
-  return (
-    isGenderCompeleted &&
-    isAgeCompeleted &&
-    isJobSelected &&
-    isResidenceSelected &&
-    isSituationCompeleted &&
-    isEntourageCompeleted
-  )
+  const isCompleted = checkpoints.every((v) => v === true)
+
+  return isCompleted
 }
 
 /**

diff --git a/src/components/LastChildAgeSelector.js b/src/components/LastChildAgeSelector.js
@@ -0,0 +1,34 @@
+import { Form } from "react-bootstrap"
+import _ from "lodash"
+
+export function LastChildAgeSelector({ situations, setLastChildAge }) {
+  const selectLabel = "Sélectionner l'âge de votre dernier enfant"
+  const situation = situations?.filter(
+    (item) => item.id === "vousAvezEnfantDeMoinsDe1an" && item.isChecked
+  )
+  const values = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+
+  return situation.length > 0 ? (
+    <fieldset>
+      <legend className="bloc-name">
+        Précisez l'âge de votre dernier enfant :
+      </legend>
+      <Form.Select
+        className="fr-select"
+        id="select_last_child_age"
+        name="select_last_child_age"
+        aria-label={selectLabel}
+        onChange={(e) => setLastChildAge(e.target.value)}
+      >
+        <option defaultValue hidden>
+          {selectLabel}
+        </option>
+        {values.map((age) => (
+          <option value={age} key={age}>
+            {age === 0 ? `moins de 1 mois` : `${age} mois`}
+          </option>
+        ))}
+      </Form.Select>
+    </fieldset>
+  ) : null
+}
diff --git a/src/components/MoisGrossesseSelector.js b/src/components/MoisGrossesseSelector.js
@@ -0,0 +1,34 @@
+import { Form } from "react-bootstrap"
+import _ from "lodash"
+
+export function MoisGrossesseSelector({ situations, setMoisGrossesse }) {
+  const selectLabel = "Sélectionner votre mois de grossesse"
+  const situation = situations?.filter(
+    (item) => item.id === "vousAttendez1Enfant" && item.isChecked
+  )
+  const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+  return situation.length > 0 ? (
+    <fieldset>
+      <legend className="bloc-name">
+        À quel mois de grossesse êtes vous (vous ou le co-parent) ?
+      </legend>
+      <Form.Select
+        className="fr-select"
+        id="select_mois_grossesse"
+        name="select_mois_grossesse"
+        aria-label={selectLabel}
+        onChange={(e) => setMoisGrossesse(e.target.value)}
+      >
+        <option defaultValue hidden>
+          {selectLabel}
+        </option>
+        {values.map((age) => (
+          <option value={age} key={age}>
+            {age === 0 ? `moins de 1 mois` : `${age} mois`}
+          </option>
+        ))}
+      </Form.Select>
+    </fieldset>
+  ) : null
+}
diff --git a/src/utils/ab-testing/demographic-data.utils.js b/src/utils/ab-testing/demographic-data.utils.js
@@ -61,17 +61,27 @@ export const ageValues = [
 export const situationValues = [
   {
     id: "vousAttendez1Enfant",
-    text: "Vous attendez un enfant",
+    text: "J'attends un enfant",
+    isChecked: false,
+  },
+  {
+    id: "vousAvezEnfantDeMoinsDe1an",
+    text: "J'ai un enfant de moins d' 1 an",
     isChecked: false,
   },
   {
     id: "vousAvezEnfantDeMoinsDe2ans",
-    text: "Vous avez un enfant de moins de 2 ans",
+    text: "J'ai un enfant de moins de 2 ans",
     isChecked: false,
   },
   {
     id: "vousAvezDesEnfantsDePlusDe2ans",
-    text: "Vous avez un ou plusieurs enfants de plus de 2 ans",
+    text: "J'ai un ou plusieurs enfants de plus de 2 ans",
+    isChecked: false,
+  },
+  {
+    id: "vousAvezPerduUnEnfant",
+    text: "J'ai perdu un enfant",
     isChecked: false,
   },
 ]