diff --git a/apollo-client.js b/apollo-client.js index e7618ede..32a05fe2 100644 --- a/apollo-client.js +++ b/apollo-client.js @@ -39,6 +39,7 @@ export const GET_ACTIVATION_TILE_STATUS = gql` rdv sms whatsapp + whatsapp_redirect_message } } ` @@ -96,6 +97,7 @@ export const EPDS_CONTACT_INFORMATION = gql` $moyen: String $horaires: String $scoreQuestionDix: String + $langue: String ) { epdsContact( email: $email @@ -104,6 +106,7 @@ export const EPDS_CONTACT_INFORMATION = gql` moyen: $moyen horaires: $horaires score_question_dix: $scoreQuestionDix + langue: $langue ) } ` diff --git a/pages/contact/to-be-contacted.js b/pages/contact/to-be-contacted.js index 08a91b8b..1bf1ee55 100644 --- a/pages/contact/to-be-contacted.js +++ b/pages/contact/to-be-contacted.js @@ -39,7 +39,8 @@ export default function ToBeContacted() { const [itemValueType, setItemValueType] = useState() const [isSmsSelected, setSmsSelected] = useState(false) const [isWhatsappSelected, setWhatsappSelected] = useState(false) - const [isPhoneValid, setIsPhoneValide] = useState(false) + const [isPhoneValid, setIsPhoneValid] = useState(false) + const [isPhoneConfirmValid, setIsPhoneConfirmValid] = useState(false) const [websiteSource, setWebsiteSource] = useState(false) const [canSend, setCanSend] = useState(false) const horaire = StorageUtils.getInLocalStorage(STORAGE_CONTACT_HOURS) @@ -53,8 +54,8 @@ export default function ToBeContacted() { }, []) useEffect(() => { - setCanSend(isValidForm(itemValueType, isPhoneValid)) - }, [isPhoneValid]) + setCanSend(isValidForm(itemValueType, isPhoneValid && isPhoneConfirmValid)) + }, [isPhoneValid, isPhoneConfirmValid]) useEffect(() => { setSmsSelected(itemValueType == RequestContact.type.sms) @@ -260,7 +261,8 @@ export default function ToBeContacted() { {buttonGroupHours()} @@ -270,7 +272,8 @@ export default function ToBeContacted() { <> diff --git a/pages/index.js b/pages/index.js index 30b8257a..a653ba1e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -23,6 +23,7 @@ import { import { LocaleButton } from "../src/components/LocaleButton" import * as AbTestingUtils from "../src/utils/ab-testing/ab-testing.utils" import * as TrackerUtils from "../src/utils/tracker.utils" +import * as DemographicDataUtils from "../src/utils/ab-testing/demographic-data.utils" export default function Home() { const router = useRouter() @@ -58,7 +59,8 @@ export default function Home() { localStorage.setItem(STORAGE_SOURCE, source) TrackerUtils.track(TrackerUtils.CATEG.home, TrackerUtils.ACTION.start) localStorage.setItem(STORAGE_TEST_ABC, AbTestingUtils.generateRandomTest()) - goToBeforeSurvey() + // goToBeforeSurvey() + goToDemographicSurvey() } const goToBeforeSurvey = async (event) => { @@ -66,6 +68,9 @@ export default function Home() { pathname: "/survey/before-survey", }) } + const goToDemographicSurvey = async (event) => { + DemographicDataUtils.goToDemographicSurvey(router) + } const [getLabelsTranslationsQuery] = useLazyQuery( gql(EPDS_LABELS_TRANSLATION_BY_LOCALE), diff --git a/src/components/contact/ContactForm.js b/src/components/contact/ContactForm.js index a9b2dcb0..5d72576a 100644 --- a/src/components/contact/ContactForm.js +++ b/src/components/contact/ContactForm.js @@ -1,14 +1,15 @@ -import React, { useState } from "react" +import React, { useState, useEffect } from "react" import { RequestContact, STORAGE_SOURCE, + STORAGE_ACTIVATION_CONTACT, 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" -import { Col } from "react-bootstrap" +import { Alert, Col } from "react-bootstrap" import * as StorageUtils from "../../utils/storage.utils" import * as TrackerUtils from "../../utils/tracker.utils" import { @@ -17,6 +18,7 @@ import { SAVE_CONTACT, SAVE_DEMANDE_DE_CONTACT, } from "../../../apollo-client" +import { Modal } from "react-bootstrap" import * as ContactUtils from "../../utils/contact.utils" import { phoneNumberFormatting, convertDateToISO } from "../../utils/main.utils" import { useRouter } from "next/router" @@ -24,11 +26,18 @@ import { useRouter } from "next/router" export const ContactForm = ({ contactType, setPropsPhoneValid, + setPropsPhoneConfirmValid, canSend, contactHours, }) => { const router = useRouter() const [isPhoneValid, setPhoneValid] = useState() + const [inputPhoneValue, setInputPhoneValue] = useState() + const [inputPhoneConfirmValue, setInputPhoneConfirmValue] = useState() + const [isPhoneConfirmValid, setPhoneConfirmValid] = useState() + const [isPhoneConfirmMatch, setPhoneConfirmMatch] = useState() + const [showWhatsappRedirectMessage, setShowWhatsappRedirectMessage] = useState(false) + const source = StorageUtils.getInLocalStorage(STORAGE_SOURCE) const requiredField =

{Form.required}

const dptCode = StorageUtils.getInLocalStorage( @@ -37,10 +46,16 @@ export const ContactForm = ({ const dptLibelle = StorageUtils.getInLocalStorage( STORAGE_TEST_DEMOGRAPHIC_DPT_LIBELLE ) + const activationContact = JSON.parse(StorageUtils.getInLocalStorage(STORAGE_ACTIVATION_CONTACT)) + const cancel = () => { router.back() } + useEffect(() => { + setPropsPhoneConfirmValid(isPhoneConfirmValid && isPhoneConfirmMatch) + }, [isPhoneConfirmValid, isPhoneConfirmMatch]) + const goToConfirmation = () => { router.push({ pathname: "/contact/contact-confirmed", @@ -50,8 +65,11 @@ export const ContactForm = ({ client: client, onCompleted: () => { ContactUtils.saveContactRequest(contactType, sendContactQuery) - - goToConfirmation() + if(contactType === RequestContact.type.whatsapp && activationContact?.whatsapp_redirect_message?.length > 0) { + setShowWhatsappRedirectMessage(true) + } else { + goToConfirmation() + } }, onError: (err) => { console.error(err) @@ -86,6 +104,7 @@ export const ContactForm = ({ prenom: name, scoreQuestionDix: scoreQuestionDix, telephone: phoneNumber, + langue: StorageUtils.getLocaleInLocalStorage().libelle_francais, }, }) } @@ -144,8 +163,10 @@ export const ContactForm = ({ name="inputPhone" pattern="[0-9]{10}" onChange={(e) => { + setInputPhoneValue(e.target.value) setPhoneValid(e.target.validity.valid) setPropsPhoneValid(e.target.validity.valid) + setPhoneConfirmMatch(inputPhoneConfirmValue === e.target.value) }} placeholder="Écrivez ici le numéro pour vous contacter" required={isRequired} @@ -158,8 +179,67 @@ export const ContactForm = ({ ) + const phoneConfirmInput = (isRequired) => ( +
+ + { + setInputPhoneConfirmValue(e.target.value) + setPhoneConfirmValid(e.target.validity.valid) + setPhoneConfirmMatch(inputPhoneValue === e.target.value) + }} + placeholder="Confirmez ici le numéro pour vous contacter" + required={isRequired} + /> + + {isPhoneConfirmValid === false && ( + + )} + {isPhoneConfirmMatch === false && ( + + )} + {isRequired ? requiredField : null} +
+ ) + return ( <> + + + Information + + + +
{activationContact?.whatsapp_redirect_message}
+
+ + + + +
{(contactType === RequestContact.type.sms || contactType === RequestContact.type.whatsapp) && (
@@ -175,6 +255,7 @@ export const ContactForm = ({ {phoneInput(true)} + {phoneConfirmInput(true)}