diff --git a/apollo-client.js b/apollo-client.js index 89975f4d..96c83a2a 100644 --- 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 index 644d48e9..a123255f 100644 --- 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() {
-
Département de résidence :
+
Votre département de résidence :
+ + + Tous les champs sont obligatoires @@ -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 new file mode 100644 index 00000000..26e34460 --- /dev/null +++ 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 ? ( +
+ + Précisez l'âge de votre dernier enfant : + + setLastChildAge(e.target.value)} + > + + {values.map((age) => ( + + ))} + +
+ ) : null +} diff --git a/src/components/MoisGrossesseSelector.js b/src/components/MoisGrossesseSelector.js new file mode 100644 index 00000000..2e208c47 --- /dev/null +++ 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 ? ( +
+ + À quel mois de grossesse êtes vous (vous ou le co-parent) ? + + setMoisGrossesse(e.target.value)} + > + + {values.map((age) => ( + + ))} + +
+ ) : null +} diff --git a/src/utils/ab-testing/demographic-data.utils.js b/src/utils/ab-testing/demographic-data.utils.js index 3e862101..a87de9f5 100644 --- 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, }, ]