From d34f573bbd47468fd091e21ffe3ee6dcf453cceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Auricoste?= Date: Thu, 28 Nov 2024 11:39:29 +0100 Subject: [PATCH] fix(lbac-2264): fix message pour refus de candidature + refactor intention (#1669) --- .../SatisfactionForm/SatisfactionForm.tsx | 373 +++++++----------- .../SatisfactionFormSuccess.tsx | 16 +- ui/pages/formulaire-intention.tsx | 19 +- 3 files changed, 172 insertions(+), 236 deletions(-) diff --git a/ui/components/SatisfactionForm/SatisfactionForm.tsx b/ui/components/SatisfactionForm/SatisfactionForm.tsx index a51e9aac69..539b57008a 100644 --- a/ui/components/SatisfactionForm/SatisfactionForm.tsx +++ b/ui/components/SatisfactionForm/SatisfactionForm.tsx @@ -1,16 +1,15 @@ -import { Box, Button, Flex, FormLabel, Input, Spacer, Text, Textarea } from "@chakra-ui/react" -import { useFormik } from "formik" -import { useRouter } from "next/router" +import { Box, Button, Flex, Text, Textarea } from "@chakra-ui/react" +import { Formik } from "formik" import { useEffect, useState } from "react" import { ApplicantIntention } from "shared/constants/application" import * as Yup from "yup" import { apiPost } from "../../utils/api.utils" -import { isNonEmptyString } from "../../utils/strutils" -import { testingParameters } from "../../utils/testingParameters" +import { CustomInput } from "../espace_pro" +import { CustomFormControl } from "../espace_pro/CustomFormControl" import SatisfactionFormNavigation from "./SatisfactionFormNavigation" -import SatisfactionFormSuccess from "./SatisfactionFormSuccess" +import { SatisfactionFormSuccess } from "./SatisfactionFormSuccess" const textAreaProperties = { border: "none", @@ -22,103 +21,86 @@ const textAreaProperties = { borderBottom: "2px solid", } -const inputProperties = { - border: "none", - background: "grey.200", - borderRadius: "4px 4px 0px 0px", - width: { base: "100%", md: "280px", lg: "380px" }, - height: "40px", - paddingLeft: 4, - borderBottom: "2px solid", -} - -const getFieldColor = (status) => { - return status === "is-valid-true" ? "#008941" : status === "is-valid-false" ? "#e10600" : "grey.600" -} - -const SatisfactionForm = () => { - const router = useRouter() - const { company_recruitment_intention, id, fn, ln, token } = router.query as { - company_recruitment_intention: string - id: string - fn: string - ln: string - token: string | undefined - } +export const SatisfactionForm = ({ + company_recruitment_intention, + id, + firstName, + lastName, + token, +}: { + company_recruitment_intention: ApplicantIntention + id: string + firstName: string + lastName: string + token: string | undefined +}) => { + const [sendingState, setSendingState] = useState<"not_sent" | "ok_sent" | "not_sent_because_of_errors">("not_sent") + useEffect(() => { + apiPost("/application/intention/:id", { + params: { id }, + body: { company_recruitment_intention }, + headers: { authorization: `Bearer ${token}` }, + }) + }, []) const isRefusedState = company_recruitment_intention === ApplicantIntention.REFUS - const getFeedbackText = () => { - const firstName = fn - const lastName = ln - const text = ( - - {company_recruitment_intention === ApplicantIntention.ENTRETIEN && ( - - Vous souhaitez rencontrer le/la candidat(e) ? - Répondez à {`${firstName} ${lastName}`} et proposez-lui une date de rencontre. - Rédigez votre réponse personnalisée. - - - Le candidat recevra votre commentaire ainsi que vos coordonnées directement sur sa boîte mail. - + const intentionVariants: Record = { + [ApplicantIntention.ENTRETIEN]: { + header: ( + <> + Vous souhaitez rencontrer le/la candidat(e) ? + Répondez à {`${firstName} ${lastName}`} et proposez-lui une date de rencontre. + Rédigez votre réponse personnalisée. + + + Le candidat recevra votre commentaire ainsi que vos coordonnées directement sur sa boîte mail. - - )} - {company_recruitment_intention === ApplicantIntention.NESAISPAS && ( - - La candidature de {`${firstName} ${lastName}`} vous intéresse, mais vous ne souhaitez pas prendre votre décision aujourd’hui ? - Indiquez-lui que vous lui apporterez une réponse prochainement. - Rédigez votre réponse personnalisée. - - - Le candidat recevra votre commentaire ainsi que vos coordonnées directement sur sa boîte mail. - + + + ), + placeholderTextArea: + "Bonjour, Merci pour l'intérêt que vous portez à notre établissement. Votre candidature a retenu toute notre attention et nous souhaiterions échanger avec vous. Seriez-vous disponible le ... ", + }, + [ApplicantIntention.NESAISPAS]: { + header: ( + <> + La candidature de {`${firstName} ${lastName}`} vous intéresse, mais vous ne souhaitez pas prendre votre décision aujourd’hui ? + Indiquez-lui que vous lui apporterez une réponse prochainement. + Rédigez votre réponse personnalisée. + + + Le candidat recevra votre commentaire ainsi que vos coordonnées directement sur sa boîte mail. - - )} - {company_recruitment_intention === ApplicantIntention.REFUS && ( - - Vous souhaitez refuser la candidature ? - Indiquez au candidat {`${firstName} ${lastName}`} les raisons de ce refus. Une réponse personnalisée l’aidera pour ses futures recherches. - Rédigez votre réponse personnalisée. - - - Le candidat recevra votre message directement sur sa boîte mail. - + + + ), + placeholderTextArea: "Bonjour, Merci pour l'intérêt que vous portez à notre établissement. Votre candidature a retenu toute notre attention et nous vous répondrons ...", + }, + [ApplicantIntention.REFUS]: { + header: ( + <> + Vous souhaitez refuser la candidature ? + Indiquez au candidat {`${firstName} ${lastName}`} les raisons de ce refus. Une réponse personnalisée l’aidera pour ses futures recherches. + Rédigez votre réponse personnalisée. + + + Le candidat recevra votre message directement sur sa boîte mail. - - )} - - ) - - return text + + + ), + placeholderTextArea: + "Bonjour, Merci pour l'intérêt que vous portez à notre établissement. Nous ne sommes malheureusement pas en mesure de donner une suite favorable à votre candidature car ...", + }, } - useEffect(() => { - if (!router.isReady) return - const sendIntention = async () => { - await apiPost("/application/intention/:id", { - params: { id }, - body: { - company_recruitment_intention, - }, - headers: { - authorization: `Bearer ${token}`, - }, - }) - } - sendIntention() - }, [router.isReady]) - - const [sendingState, setSendingState] = useState("not_sent") - - const submitForm = async ({ email, phone, company_feedback }) => - await apiPost("/application/intentionComment/:id", { + const submitForm = async ({ email, phone, company_feedback }: { email: string; phone: string; company_feedback: string }) => { + apiPost("/application/intentionComment/:id", { params: { id }, body: { - phone: phone, - email: email, + phone, + email, company_feedback, company_recruitment_intention, }, @@ -126,147 +108,96 @@ const SatisfactionForm = () => { authorization: `Bearer ${token}`, }, }) - - const formik = useFormik({ - initialValues: { company_feedback: "", email: "", phone: "" }, - validationSchema: Yup.object().shape({ - company_feedback: Yup.string().nullable().required("Veuillez remplir le message"), - email: isRefusedState ? Yup.string() : Yup.string().email("⚠ Adresse e-mail invalide").required("⚠ L'adresse e-mail est obligatoire"), - phone: isRefusedState - ? Yup.string() - : Yup.string() - .matches(/^[0-9]{10}$/, "⚠ Le numéro de téléphone doit avoir exactement 10 chiffres") - .required("⚠ Le téléphone est obligatoire"), - }), - onSubmit: async (formikValues) => { - await submitForm(formikValues) - .then(() => setSendingState("ok_sent")) - .catch(() => setSendingState("not_sent_because_of_errors")) - }, - }) - - const getErrorForMessage = (message) => { - return ( - // @ts-expect-error: TODO - - {message || "pas d'erreur"} - - ) - } - - const getPlaceHolderText = () => { - switch (company_recruitment_intention) { - case ApplicantIntention.NESAISPAS: - return "Bonjour, Merci pour l'intérêt que vous portez à notre établissement. Votre candidature a retenu toute notre attention et nous vous répondrons ..." - - case ApplicantIntention.ENTRETIEN: - return "Bonjour, Merci pour l'intérêt que vous portez à notre établissement. Votre candidature a retenu toute notre attention et nous souhaiterions échanger avec vous. Seriez-vous disponible le ... " - - default: - return "Bonjour, Merci pour l'intérêt que vous portez à notre établissement. Nous ne sommes malheureusement pas en mesure de donner une suite favorable à votre candidature car ..." - } + .then(() => setSendingState("ok_sent")) + .catch(() => setSendingState("not_sent_because_of_errors")) } - const getFieldStatus = (formikObj, target) => { - let res = "is-not-validated" - if (formikObj.errors[target]) { - res = "is-valid-false" - } else if (formikObj.values[target]) { - res = "is-valid-true" - } - return res - } - - const commentFieldStatus = getFieldStatus(formik, "company_feedback") - const emailFieldStatus = getFieldStatus(formik, "email") - const phoneFieldStatus = getFieldStatus(formik, "phone") - return ( {sendingState !== "ok_sent" && ( - {getFeedbackText()} - {isNonEmptyString(company_recruitment_intention) && ( - -
- -