From 0fbd0526db0452b15acb32ff21aa530a41682b7a Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Mon, 24 Jul 2023 10:27:05 +0200 Subject: [PATCH 01/16] feat: ajout du feedback indemnite licenciement --- .../pages/outils/[slug].tsx | 12 ++- .../src/Feedback/Questionnaire.tsx | 49 ++++++++++ .../src/Feedback/QuestionnaireAdvanced.tsx | 91 ++++++++++++++++++ .../src/Feedback/QuestionnaireEnd.tsx | 19 ++++ .../src/Feedback/QuestionnaireItem.tsx | 92 +++++++++++++++++++ .../src/Feedback/QuestionnaireText.tsx | 37 ++++++++ .../src/Feedback/index.tsx | 64 +++++++++++++ .../src/Feedback/introduction.tsx | 21 +++++ .../outils/IndemniteLicenciement/index.tsx | 76 +++++++-------- packages/react-ui/src/Button/index.js | 24 ++++- .../src/icons/components/monochrome/Bad.js | 46 ++++++++++ .../src/icons/components/monochrome/Good.js | 47 ++++++++++ .../src/icons/components/monochrome/Medium.js | 47 ++++++++++ .../src/icons/components/monochrome/index.js | 3 + packages/react-ui/src/icons/index.js | 3 + .../react-ui/src/icons/src/monochrome/bad.svg | 13 +++ .../src/icons/src/monochrome/good.svg | 12 +++ .../src/icons/src/monochrome/medium.svg | 12 +++ 18 files changed, 626 insertions(+), 42 deletions(-) create mode 100644 packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/QuestionnaireEnd.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/index.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/introduction.tsx create mode 100644 packages/react-ui/src/icons/components/monochrome/Bad.js create mode 100644 packages/react-ui/src/icons/components/monochrome/Good.js create mode 100644 packages/react-ui/src/icons/components/monochrome/Medium.js create mode 100644 packages/react-ui/src/icons/src/monochrome/bad.svg create mode 100644 packages/react-ui/src/icons/src/monochrome/good.svg create mode 100644 packages/react-ui/src/icons/src/monochrome/medium.svg diff --git a/packages/code-du-travail-frontend/pages/outils/[slug].tsx b/packages/code-du-travail-frontend/pages/outils/[slug].tsx index 3a2ee4a47e..7f54ab37b1 100644 --- a/packages/code-du-travail-frontend/pages/outils/[slug].tsx +++ b/packages/code-du-travail-frontend/pages/outils/[slug].tsx @@ -70,18 +70,20 @@ function Outils({
+ + + - - - - + {router.asPath !== "/outils/indemnite-licenciement" && ( + + )}
@@ -149,5 +151,5 @@ export const ShareContainer = styled.div` export const Flex = styled.div` display: flex; - flex-direction: column-reverse; + flex-direction: column; `; diff --git a/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx b/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx new file mode 100644 index 0000000000..722c700fe0 --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx @@ -0,0 +1,49 @@ +import styled from "styled-components"; +import { Button, Heading } from "@socialgouv/cdtn-ui"; + +import { QuestionnaireItem } from "./QuestionnaireItem"; +import { useState } from "react"; + +type QuestionnaireProps = { + onClick: () => void; +}; + +export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { + const [dirty, setDirty] = useState(false); + const [displayError, setDisplayError] = useState(false); + return ( + <> + + Comment s'est passée cette simulation pour vous ? + + { + setDirty(isDirty); + setDisplayError(!isDirty); + }} + displayError={displayError} + /> + { + if (!dirty) { + setDisplayError(true); + } else { + onClick(); + } + }} + variant="primary" + > + Envoyer + + + ); +}; + +const StyledButton = styled(Button)` + margin: 12px auto 24px 24px; +`; + +const StyledQuestionnaireItem = styled(QuestionnaireItem)` + padding: 24px; +`; diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx new file mode 100644 index 0000000000..fba2683c11 --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx @@ -0,0 +1,91 @@ +import { Button, Heading } from "@socialgouv/cdtn-ui"; +import { QuestionnaireItem } from "./QuestionnaireItem"; +import { QuestionnaireText } from "./QuestionnaireText"; +import styled from "styled-components"; +import { useState } from "react"; + +type QuestionnaireAdvancedProps = { + onClick: () => void; +}; + +export const QuestionnaireAdvanced = ({ + onClick, +}: QuestionnaireAdvancedProps): JSX.Element => { + const [dirtySimulator, setDirtySimulator] = useState(false); + const [displayErrorSimulator, setDisplayErrorSimulator] = useState(false); + const [dirtyQuestion, setDirtyQuestion] = useState(false); + const [displayErrorQuestion, setDisplayErrorQuestion] = useState(false); + const [dirtyExplanation, setDirtyExplanation] = useState(false); + const [displayErrorExplanation, setDisplayErrorExplanation] = useState(false); + return ( + <> + + Merci pour votre aide ! Pouvez-vous nous en dire plus ? + + + { + setDirtySimulator(isDirty); + setDisplayErrorSimulator(!isDirty); + }} + displayError={displayErrorSimulator} + > + { + setDirtyQuestion(isDirty); + setDisplayErrorQuestion(!isDirty); + }} + displayError={displayErrorQuestion} + > + { + setDirtyExplanation(isDirty); + setDisplayErrorExplanation(!isDirty); + }} + displayError={displayErrorExplanation} + > + + + { + if (!dirtySimulator) { + setDisplayErrorSimulator(true); + } else if (!dirtyQuestion) { + setDisplayErrorQuestion(true); + } else if (!dirtyExplanation) { + setDisplayErrorExplanation(true); + } else { + onClick(); + } + }} + > + Envoyer + + + ); +}; + +const StyledButton = styled(Button)` + margin: 12px auto 24px 24px; +`; + +const FormContainer = styled.div` + padding: 0 24px; +`; + +const StyledQuestionnaireItem = styled(QuestionnaireItem)` + margin: 24px 0; +`; diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireEnd.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireEnd.tsx new file mode 100644 index 0000000000..c3a955c29f --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireEnd.tsx @@ -0,0 +1,19 @@ +import { Heading } from "@socialgouv/cdtn-ui"; +import styled from "styled-components"; + +export const QuestionnaireEnd = (): JSX.Element => { + return ( + <> + + Merci pour votre aide ! + + + Votre évaluation sera étudiée au plus vite par nos équipes + + + ); +}; + +const StyledText = styled.span` + margin: 12px auto 24px 24px; +`; diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx new file mode 100644 index 0000000000..0276f3f7cf --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx @@ -0,0 +1,92 @@ +import { Button } from "@socialgouv/cdtn-ui"; +import { icons, theme } from "@socialgouv/cdtn-ui"; +import { useState } from "react"; +import styled from "styled-components"; + +type QuestionnaireItemProps = { + badText?: string; + mediumText?: string; + goodText?: string; + className?: string; + title?: string; + isDirty?: (isDirty: boolean) => void; + displayError?: boolean; +}; + +export const QuestionnaireItem = ({ + badText, + mediumText, + goodText, + className, + title, + isDirty = () => {}, + displayError = false, +}: QuestionnaireItemProps): JSX.Element => { + const [status, setStatus] = useState<"bad" | "medium" | "good">(); + return ( +
+ {title && {title}} + + { + setStatus("bad"); + isDirty(true); + }} + > + + {badText ?? "Pas bien"} + + { + setStatus("medium"); + isDirty(true); + }} + > + + {mediumText ?? "Moyen"} + + { + setStatus("good"); + isDirty(true); + }} + > + + {goodText ?? "Très bien"} + + + {displayError && ( + Vous devez choisir une des réponses + )} +
+ ); +}; + +const { colors } = theme; + +const ButtonContainer = styled.div` + display: flex; + flex-direction: row; + padding: 6px 0; + max-width: 300px; + justify-content: space-between; +`; + +const StyledButton = styled(Button)` + display: flex; + flex-direction: column; + width: 80px; + height: 60px; + padding: 0; + border: 1px solid ${colors.secondary}; + border-radius: 3px; + font-size: 12px; + font-weight: bold; +`; + +const StyledError = styled.span` + color: ${colors.error}; +`; diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx new file mode 100644 index 0000000000..561a1c139f --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx @@ -0,0 +1,37 @@ +import { Textarea } from "@socialgouv/cdtn-ui"; +import styled from "styled-components"; + +type QuestionnaireItemProps = { + className?: string; + title?: string; + placeholder?: string; +}; + +export const QuestionnaireText = ({ + className, + title, + placeholder, +}: QuestionnaireItemProps): JSX.Element => { + const maxCharacters = 200; + return ( + + {title && {title}} + + {maxCharacters} caractères maximum + + ); +}; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const StyledTextarea = styled(Textarea)` + width: 420px; +`; + +const MaxCharacterText = styled.span` + margin: 12px 0; + font-size: 14px; +`; diff --git a/packages/code-du-travail-frontend/src/Feedback/index.tsx b/packages/code-du-travail-frontend/src/Feedback/index.tsx new file mode 100644 index 0000000000..1c876b493a --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/index.tsx @@ -0,0 +1,64 @@ +import styled from "styled-components"; +import { theme, icons } from "@socialgouv/cdtn-ui"; +import { Introduction } from "./introduction"; +import { useState } from "react"; +import { Questionnaire } from "./Questionnaire"; +import { QuestionnaireAdvanced } from "./QuestionnaireAdvanced"; +import { QuestionnaireEnd } from "./QuestionnaireEnd"; + +export const Feedback = (): JSX.Element => { + const [status, setStatus] = useState< + "questionnaire" | "questionnaireAdvanced" | "questionnaireEnd" + >(); + const [closed, setClosed] = useState(false); + return !closed ? ( + + setClosed(true)} /> + {!status && ( + { + setStatus("questionnaire"); + }} + /> + )} + {status === "questionnaire" && ( + { + setStatus("questionnaireAdvanced"); + }} + /> + )} + {status === "questionnaireAdvanced" && ( + { + setStatus("questionnaireEnd"); + }} + /> + )} + {status === "questionnaireEnd" && } + + ) : ( + <> + ); +}; + +const { colors } = theme; + +const StyledContainer = styled.div` + border: 1px solid ${colors.secondary}; + border-radius: 6px; + width: 600px; + display: flex; + flex-direction: column; + margin-top: 42px; + margin-left: auto; + position: relative; +`; + +const StyledCloseIcon = styled(icons.Close)` + position: absolute; + top: 12px; + right: 12px; + width: 24px; + cursor: pointer; +`; diff --git a/packages/code-du-travail-frontend/src/Feedback/introduction.tsx b/packages/code-du-travail-frontend/src/Feedback/introduction.tsx new file mode 100644 index 0000000000..e4edfbcaac --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/introduction.tsx @@ -0,0 +1,21 @@ +import styled from "styled-components"; +import { Button, Heading } from "@socialgouv/cdtn-ui"; + +type IntroductionProps = { + onClick: () => void; +}; + +export const Introduction = ({ onClick }: IntroductionProps): JSX.Element => { + return ( + <> + + Votre avis sur ce simulator nous intéresse + + Donner mon avis + + ); +}; + +const StyledButton = styled(Button)` + margin: 18px auto 24px; +`; diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx index d38bb96d7d..cdefb0077c 100644 --- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx @@ -18,6 +18,7 @@ import { } from "./store"; import { ToolName } from "../types"; import { PublicodesSimulator } from "@socialgouv/modeles-social"; +import { Feedback } from "../../Feedback"; type Props = { icon: string; @@ -119,42 +120,45 @@ const IndemniteLicenciementSimulator = ({ }; return ( - - simulator={PublicodesSimulator.INDEMNITE_LICENCIEMENT} - title={title} - displayTitle={displayTitle} - icon={icon} - duration="5 à 10 min" - steps={steps} - onStepChange={[ - { - stepName: IndemniteLicenciementStepName.ContratTravail, - isStepValid: isStepContratTravailValid, - onNextStep: onNextStepContratTravail, - }, - { - stepName: IndemniteLicenciementStepName.Agreement, - isStepValid: isStepAgreementValid, - onNextStep: onNextStepAgreement, - }, - { - stepName: IndemniteLicenciementStepName.Anciennete, - isStepValid: isStepAncienneteValid, - onNextStep: onNextStepAnciennete, - }, - { - stepName: IndemniteLicenciementStepName.Salaires, - isStepValid: isStepSalairesValid, - onNextStep: onNextStepSalaires, - }, - { - stepName: IndemniteLicenciementStepName.Informations, - isStepValid: isStepInformationsValid, - onNextStep: onNextStepInformations, - }, - ]} - hiddenStep={getHiddenSteps()} - /> + <> + + simulator={PublicodesSimulator.INDEMNITE_LICENCIEMENT} + title={title} + displayTitle={displayTitle} + icon={icon} + duration="5 à 10 min" + steps={steps} + onStepChange={[ + { + stepName: IndemniteLicenciementStepName.ContratTravail, + isStepValid: isStepContratTravailValid, + onNextStep: onNextStepContratTravail, + }, + { + stepName: IndemniteLicenciementStepName.Agreement, + isStepValid: isStepAgreementValid, + onNextStep: onNextStepAgreement, + }, + { + stepName: IndemniteLicenciementStepName.Anciennete, + isStepValid: isStepAncienneteValid, + onNextStep: onNextStepAnciennete, + }, + { + stepName: IndemniteLicenciementStepName.Salaires, + isStepValid: isStepSalairesValid, + onNextStep: onNextStepSalaires, + }, + { + stepName: IndemniteLicenciementStepName.Informations, + isStepValid: isStepInformationsValid, + onNextStep: onNextStepInformations, + }, + ]} + hiddenStep={getHiddenSteps()} + /> + + ); }; diff --git a/packages/react-ui/src/Button/index.js b/packages/react-ui/src/Button/index.js index ff049218b0..6680b7ebe8 100644 --- a/packages/react-ui/src/Button/index.js +++ b/packages/react-ui/src/Button/index.js @@ -84,6 +84,27 @@ export const StyledButton = styled.button` } `; } + if (variant === "light") { + return css` + padding: 0; + color: ${theme.paragraph}; + font-weight: normal; + font-size: ${fonts.sizes.default}; + line-height: ${fonts.lineHeight}; + vertical-align: baseline; + text-decoration: none; + text-align: left; + background-color: rgba( + ${theme.secondary}, + 0.26 + )}; + border: none; + border-radius: 0; + overflow: visible; + transition: color ${animations.transitionTiming} linear, + text-decoration ${animations.transitionTiming} linear; + `; + } let height = "5.2rem"; let backgroundColor = theme[variant]; @@ -128,7 +149,7 @@ export const StyledButton = styled.button` opacity = "0.6"; } - if (variant === "primary") { + if (variant === "primary" || variant === "light") { boxShadow = `${largeShadow} ${rgba( theme.primary, 0.26 @@ -212,6 +233,7 @@ Button.propTypes = { "naked", "primary", "secondary", + "light", ]), }; diff --git a/packages/react-ui/src/icons/components/monochrome/Bad.js b/packages/react-ui/src/icons/components/monochrome/Bad.js new file mode 100644 index 0000000000..e7434fec30 --- /dev/null +++ b/packages/react-ui/src/icons/components/monochrome/Bad.js @@ -0,0 +1,46 @@ +import * as React from "react"; +import { memo } from "react"; + +const SvgArrowTurn = (props) => ( + + Avis/Éléments/Mauvais/Emoji/Défaut + + + + + + + + + +); + +const Memo = memo(SvgArrowTurn); +export default Memo; diff --git a/packages/react-ui/src/icons/components/monochrome/Good.js b/packages/react-ui/src/icons/components/monochrome/Good.js new file mode 100644 index 0000000000..faf8c88329 --- /dev/null +++ b/packages/react-ui/src/icons/components/monochrome/Good.js @@ -0,0 +1,47 @@ +import * as React from "react"; +import { memo } from "react"; + +const SvgArrowTurn = (props) => ( + + Avis/Éléments/Bon/Emoji/Défaut + + + + + + + + + +); + +const Memo = memo(SvgArrowTurn); +export default Memo; diff --git a/packages/react-ui/src/icons/components/monochrome/Medium.js b/packages/react-ui/src/icons/components/monochrome/Medium.js new file mode 100644 index 0000000000..ff9eddecf0 --- /dev/null +++ b/packages/react-ui/src/icons/components/monochrome/Medium.js @@ -0,0 +1,47 @@ +import * as React from "react"; +import { memo } from "react"; + +const SvgArrowTurn = (props) => ( + + Avis/Éléments/Moyen/Emoji/Défaut + + + + + + + + + +); + +const Memo = memo(SvgArrowTurn); +export default Memo; diff --git a/packages/react-ui/src/icons/components/monochrome/index.js b/packages/react-ui/src/icons/components/monochrome/index.js index cd9b75b35f..93a9d24933 100644 --- a/packages/react-ui/src/icons/components/monochrome/index.js +++ b/packages/react-ui/src/icons/components/monochrome/index.js @@ -1,6 +1,7 @@ export { default as ArrowDown } from "./ArrowDown"; export { default as ArrowRight } from "./ArrowRight"; export { default as ArrowTurn } from "./ArrowTurn"; +export { default as Bad } from "./Bad"; export { default as Burger } from "./Burger"; export { default as Calendar } from "./Calendar"; export { default as Check } from "./Check"; @@ -11,10 +12,12 @@ export { default as DirectionRight } from "./DirectionRight"; export { default as Download } from "./Download"; export { default as Euro } from "./Euro"; export { default as External } from "./External"; +export { default as Good } from "./Good"; export { default as Help } from "./Help"; export { default as Home } from "./Home"; export { default as Link } from "./Link"; export { default as Mail } from "./Mail"; +export { default as Medium } from "./Medium"; export { default as More } from "./More"; export { default as Search } from "./Search"; export { default as Shade } from "./Shade"; diff --git a/packages/react-ui/src/icons/index.js b/packages/react-ui/src/icons/index.js index e83a1cbb67..d703e170d7 100644 --- a/packages/react-ui/src/icons/index.js +++ b/packages/react-ui/src/icons/index.js @@ -49,6 +49,7 @@ export { default as Youth } from "./components/bicolor/Youth.js"; export { default as ArrowDown } from "./components/monochrome/ArrowDown"; export { default as ArrowRight } from "./components/monochrome/ArrowRight"; export { default as ArrowTurn } from "./components/monochrome/ArrowTurn"; +export { default as Bad } from "./components/monochrome/Bad"; export { default as Burger } from "./components/monochrome/Burger"; export { default as Calendar } from "./components/monochrome/Calendar"; export { default as External } from "./components/monochrome/Calendar"; @@ -59,10 +60,12 @@ export { default as DirectionLeft } from "./components/monochrome/DirectionLeft" export { default as DirectionRight } from "./components/monochrome/DirectionRight"; export { default as Download } from "./components/monochrome/Download"; export { default as Euro } from "./components/monochrome/Euro"; +export { default as Good } from "./components/monochrome/Good"; export { default as Help } from "./components/monochrome/Help"; export { default as Home } from "./components/monochrome/Home"; export { default as Link } from "./components/monochrome/Link"; export { default as Mail } from "./components/monochrome/Mail"; +export { default as Medium } from "./components/monochrome/Medium"; export { default as More } from "./components/monochrome/More"; export { default as Search } from "./components/monochrome/Search"; export { default as Shade } from "./components/monochrome/Shade"; diff --git a/packages/react-ui/src/icons/src/monochrome/bad.svg b/packages/react-ui/src/icons/src/monochrome/bad.svg new file mode 100644 index 0000000000..976f92cf24 --- /dev/null +++ b/packages/react-ui/src/icons/src/monochrome/bad.svg @@ -0,0 +1,13 @@ + + + + Avis/Éléments/Mauvais/Emoji/Défaut + + + + + + + + + diff --git a/packages/react-ui/src/icons/src/monochrome/good.svg b/packages/react-ui/src/icons/src/monochrome/good.svg new file mode 100644 index 0000000000..fd6425218c --- /dev/null +++ b/packages/react-ui/src/icons/src/monochrome/good.svg @@ -0,0 +1,12 @@ + + + Avis/Éléments/Bon/Emoji/Défaut + + + + + + + + + diff --git a/packages/react-ui/src/icons/src/monochrome/medium.svg b/packages/react-ui/src/icons/src/monochrome/medium.svg new file mode 100644 index 0000000000..12761dee33 --- /dev/null +++ b/packages/react-ui/src/icons/src/monochrome/medium.svg @@ -0,0 +1,12 @@ + + + Avis/Éléments/Moyen/Emoji/Défaut + + + + + + + + + From 07a15b7f50492e3faf4e90876407d83e3f62a720 Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 09:46:01 +0200 Subject: [PATCH 02/16] feat: questionnaire --- .../src/Feedback/Questionnaire.tsx | 25 +++++--- .../src/Feedback/QuestionnaireAdvanced.tsx | 61 +++++++++++++------ .../src/Feedback/QuestionnaireItem.tsx | 43 ++++++++----- .../src/Feedback/QuestionnaireText.tsx | 9 ++- .../src/Feedback/__tests__/feedback.test.tsx | 33 ++++++++++ .../src/Feedback/__tests__/ui.ts | 15 +++++ .../src/Feedback/index.tsx | 8 ++- .../src/Feedback/introduction.tsx | 12 ++-- .../src/Feedback/tracking.ts | 36 +++++++++++ .../react-ui/src/Titles/Heading/index.tsx | 2 + 10 files changed, 197 insertions(+), 47 deletions(-) create mode 100644 packages/code-du-travail-frontend/src/Feedback/__tests__/feedback.test.tsx create mode 100644 packages/code-du-travail-frontend/src/Feedback/__tests__/ui.ts create mode 100644 packages/code-du-travail-frontend/src/Feedback/tracking.ts diff --git a/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx b/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx index 722c700fe0..f6629191e8 100644 --- a/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx +++ b/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx @@ -1,7 +1,8 @@ import styled from "styled-components"; import { Button, Heading } from "@socialgouv/cdtn-ui"; -import { QuestionnaireItem } from "./QuestionnaireItem"; +import { QuestionnaireItem, Status } from "./QuestionnaireItem"; +import { trackFeedback, EVENT_ACTION, FEEDBACK_RESULT } from "./tracking"; import { useState } from "react"; type QuestionnaireProps = { @@ -9,26 +10,30 @@ type QuestionnaireProps = { }; export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { - const [dirty, setDirty] = useState(false); + const [status, setStatus] = useState(); const [displayError, setDisplayError] = useState(false); return ( <> - + Comment s'est passée cette simulation pour vous ? - + { - setDirty(isDirty); - setDisplayError(!isDirty); + onChange={(status: FEEDBACK_RESULT) => { + setDisplayError(false); + setStatus(status); }} displayError={displayError} /> { - if (!dirty) { + if (!status) { setDisplayError(true); } else { + trackFeedback(EVENT_ACTION.GLOBAL, status); onClick(); } }} @@ -40,6 +45,10 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { ); }; +const StyledHeading = styled(Heading)` + margin-left: 0 !important; +`; + const StyledButton = styled(Button)` margin: 12px auto 24px 24px; `; diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx index fba2683c11..e15b79a4bf 100644 --- a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx @@ -3,6 +3,12 @@ import { QuestionnaireItem } from "./QuestionnaireItem"; import { QuestionnaireText } from "./QuestionnaireText"; import styled from "styled-components"; import { useState } from "react"; +import { + trackFeedback, + trackFeedbackText, + FEEDBACK_RESULT, + EVENT_ACTION, +} from "./tracking"; type QuestionnaireAdvancedProps = { onClick: () => void; @@ -11,63 +17,80 @@ type QuestionnaireAdvancedProps = { export const QuestionnaireAdvanced = ({ onClick, }: QuestionnaireAdvancedProps): JSX.Element => { - const [dirtySimulator, setDirtySimulator] = useState(false); + const [statusSimulator, setStatusSimulator] = useState(); const [displayErrorSimulator, setDisplayErrorSimulator] = useState(false); - const [dirtyQuestion, setDirtyQuestion] = useState(false); + const [statusQuestion, setStatusQuestion] = useState(); const [displayErrorQuestion, setDisplayErrorQuestion] = useState(false); - const [dirtyExplanation, setDirtyExplanation] = useState(false); + const [statusExplanation, setStatusExplanation] = useState(); const [displayErrorExplanation, setDisplayErrorExplanation] = useState(false); + const [feedbackText, setFeedbackText] = useState(); return ( <> - + Merci pour votre aide ! Pouvez-vous nous en dire plus ? - + { - setDirtySimulator(isDirty); - setDisplayErrorSimulator(!isDirty); + onChange={(status) => { + setStatusSimulator(status); + setDisplayErrorSimulator(false); }} displayError={displayErrorSimulator} > { - setDirtyQuestion(isDirty); - setDisplayErrorQuestion(!isDirty); + onChange={(status) => { + setStatusQuestion(status); + setDisplayErrorQuestion(false); }} displayError={displayErrorQuestion} > { - setDirtyExplanation(isDirty); - setDisplayErrorExplanation(!isDirty); + onChange={(status) => { + setStatusExplanation(status); + setDisplayErrorExplanation(false); }} displayError={displayErrorExplanation} > { - if (!dirtySimulator) { + if (!statusSimulator) { setDisplayErrorSimulator(true); - } else if (!dirtyQuestion) { + } else if (!statusQuestion) { setDisplayErrorQuestion(true); - } else if (!dirtyExplanation) { + } else if (!statusExplanation) { setDisplayErrorExplanation(true); } else { + trackFeedback(EVENT_ACTION.EASINESS, statusSimulator); + trackFeedback(EVENT_ACTION.QUESTION_CLARITY, statusQuestion); + trackFeedback(EVENT_ACTION.RESULT_CLARITY, statusExplanation); + if (feedbackText) { + trackFeedbackText(feedbackText); + } onClick(); } }} @@ -78,6 +101,10 @@ export const QuestionnaireAdvanced = ({ ); }; +const StyledHeading = styled(Heading)` + margin-left: 0 !important; +`; + const StyledButton = styled(Button)` margin: 12px auto 24px 24px; `; diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx index 0276f3f7cf..3d98ab641e 100644 --- a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx @@ -2,56 +2,69 @@ import { Button } from "@socialgouv/cdtn-ui"; import { icons, theme } from "@socialgouv/cdtn-ui"; import { useState } from "react"; import styled from "styled-components"; +import { FEEDBACK_RESULT } from "./tracking"; type QuestionnaireItemProps = { + badEventValue: FEEDBACK_RESULT; + averageEventValue: FEEDBACK_RESULT; + goodEventValue: FEEDBACK_RESULT; badText?: string; - mediumText?: string; + averageText?: string; goodText?: string; className?: string; title?: string; - isDirty?: (isDirty: boolean) => void; displayError?: boolean; + onChange: (status: FEEDBACK_RESULT) => void; }; +export enum Status { + BAD = "bad", + AVERAGE = "average", + GOOD = "good", +} + export const QuestionnaireItem = ({ + badEventValue, + averageEventValue, + goodEventValue, badText, - mediumText, + averageText, goodText, className, title, - isDirty = () => {}, displayError = false, + onChange, }: QuestionnaireItemProps): JSX.Element => { - const [status, setStatus] = useState<"bad" | "medium" | "good">(); + const [status, setStatus] = useState(); return (
{title && {title}} { - setStatus("bad"); - isDirty(true); + setStatus(Status.BAD); + onChange(badEventValue); }} > {badText ?? "Pas bien"} { - setStatus("medium"); - isDirty(true); + setStatus(Status.AVERAGE); + onChange(averageEventValue); }} > - {mediumText ?? "Moyen"} + {averageText ?? "Moyen"} { - setStatus("good"); - isDirty(true); + setStatus(Status.GOOD); + onChange(goodEventValue); }} > diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx index 561a1c139f..35ac87be84 100644 --- a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx +++ b/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx @@ -5,18 +5,24 @@ type QuestionnaireItemProps = { className?: string; title?: string; placeholder?: string; + onChange: (text: string) => void; }; export const QuestionnaireText = ({ className, title, placeholder, + onChange, }: QuestionnaireItemProps): JSX.Element => { const maxCharacters = 200; return ( {title && {title}} - + onChange(event.target.value)} + /> {maxCharacters} caractères maximum ); @@ -29,6 +35,7 @@ const StyledContainer = styled.div` const StyledTextarea = styled(Textarea)` width: 420px; + max-width: 100%; `; const MaxCharacterText = styled.span` diff --git a/packages/code-du-travail-frontend/src/Feedback/__tests__/feedback.test.tsx b/packages/code-du-travail-frontend/src/Feedback/__tests__/feedback.test.tsx new file mode 100644 index 0000000000..bb2a60d9e8 --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/__tests__/feedback.test.tsx @@ -0,0 +1,33 @@ +import { fireEvent, render, screen } from "@testing-library/react"; +import { Feedback } from ".."; +import { ui } from "./ui"; + +describe("Etant donné un composant Feedback", () => { + beforeEach(() => { + render(); + }); + test("Vérification que l'introduction s'affiche", () => { + expect(ui.introduction.title.query()).toBeInTheDocument(); + expect(ui.introduction.button.query()).toBeInTheDocument(); + }); + describe("Etant donné un click sur le bouton 'Fermer'", () => { + beforeEach(() => { + fireEvent.click(ui.closeButton.get()); + }); + test("Vérification que le composant ne s'affiche plus", () => { + expect(ui.introduction.title.query()).not.toBeInTheDocument(); + expect(ui.introduction.button.query()).not.toBeInTheDocument(); + }); + }); + describe("Etant donné un click sur le bouton 'Donner mon avis'", () => { + beforeEach(() => { + fireEvent.click(ui.introduction.button.get()); + }); + test("Vérification que le composant ne s'affiche plus", () => { + expect(ui.questionnaire.title.query()).toBeInTheDocument(); + expect(ui.questionnaire.notGood.query()).toBeInTheDocument(); + expect(ui.questionnaire.average.query()).toBeInTheDocument(); + expect(ui.questionnaire.good.query()).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/code-du-travail-frontend/src/Feedback/__tests__/ui.ts b/packages/code-du-travail-frontend/src/Feedback/__tests__/ui.ts new file mode 100644 index 0000000000..9847d60310 --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/__tests__/ui.ts @@ -0,0 +1,15 @@ +import { byTestId, byText } from "testing-library-selector"; + +export const ui = { + closeButton: byTestId("feedbackCloseButton"), + introduction: { + title: byText("Votre avis sur ce simulateur nous intéresse"), + button: byText("Donner mon avis"), + }, + questionnaire: { + title: byText(/Comment s'est passée cette simulation pour vous/), + notGood: byText("Pas bien"), + average: byText("Moyen"), + good: byText("Très bien"), + }, +}; diff --git a/packages/code-du-travail-frontend/src/Feedback/index.tsx b/packages/code-du-travail-frontend/src/Feedback/index.tsx index 1c876b493a..8472fa72d5 100644 --- a/packages/code-du-travail-frontend/src/Feedback/index.tsx +++ b/packages/code-du-travail-frontend/src/Feedback/index.tsx @@ -13,7 +13,10 @@ export const Feedback = (): JSX.Element => { const [closed, setClosed] = useState(false); return !closed ? ( - setClosed(true)} /> + setClosed(true)} + data-testid="feedbackCloseButton" + /> {!status && ( { @@ -47,7 +50,8 @@ const { colors } = theme; const StyledContainer = styled.div` border: 1px solid ${colors.secondary}; border-radius: 6px; - width: 600px; + width: 520px; + max-width: 100%; display: flex; flex-direction: column; margin-top: 42px; diff --git a/packages/code-du-travail-frontend/src/Feedback/introduction.tsx b/packages/code-du-travail-frontend/src/Feedback/introduction.tsx index e4edfbcaac..ea95fe9e88 100644 --- a/packages/code-du-travail-frontend/src/Feedback/introduction.tsx +++ b/packages/code-du-travail-frontend/src/Feedback/introduction.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button, Heading } from "@socialgouv/cdtn-ui"; +import { Button, theme, Heading } from "@socialgouv/cdtn-ui"; type IntroductionProps = { onClick: () => void; @@ -8,14 +8,18 @@ type IntroductionProps = { export const Introduction = ({ onClick }: IntroductionProps): JSX.Element => { return ( <> - - Votre avis sur ce simulator nous intéresse - + + Votre avis sur ce simulateur nous intéresse + Donner mon avis ); }; +const StyledHeading = styled(Heading)` + margin-left: 0 !important; +`; + const StyledButton = styled(Button)` margin: 18px auto 24px; `; diff --git a/packages/code-du-travail-frontend/src/Feedback/tracking.ts b/packages/code-du-travail-frontend/src/Feedback/tracking.ts new file mode 100644 index 0000000000..edf926bd75 --- /dev/null +++ b/packages/code-du-travail-frontend/src/Feedback/tracking.ts @@ -0,0 +1,36 @@ +import { MatomoBaseEvent, MatomoBaseAction } from "../lib/matomo"; +import { push as matopush } from "@socialgouv/matomo-next"; + +const EVENT_CATEGORY = "feedback_simulateurs"; +export enum EVENT_ACTION { + GLOBAL = "Comment_s_est_passée_la_simulation", + EASINESS = "Facilité_utilisation_simulateur", + QUESTION_CLARITY = "Clarté_questions", + RESULT_CLARITY = "Clarté_résultat", + SUGGESTION = "Suggestion", +} + +export enum FEEDBACK_RESULT { + NOT_GOOD = "pas_bien", + NOT_AT_ALL = "pas_du_tout", + AVERAGE = "moyen", + GOOD = "très_bien", + EASY = "facile", + YES = "oui", +} + +export const trackFeedback = ( + event: EVENT_ACTION, + feedback: FEEDBACK_RESULT +) => { + matopush([MatomoBaseEvent.TRACK_EVENT, EVENT_CATEGORY, event, feedback]); +}; + +export const trackFeedbackText = (text: string) => { + matopush([ + MatomoBaseEvent.TRACK_EVENT, + EVENT_CATEGORY, + EVENT_ACTION.SUGGESTION, + text, + ]); +}; diff --git a/packages/react-ui/src/Titles/Heading/index.tsx b/packages/react-ui/src/Titles/Heading/index.tsx index dc8eebfc94..bac1a7d924 100644 --- a/packages/react-ui/src/Titles/Heading/index.tsx +++ b/packages/react-ui/src/Titles/Heading/index.tsx @@ -16,6 +16,7 @@ type Props = { ariaLevel?: number | string; id?: string; dataTestid?: string; + className?: string; }; export const Heading = (props: Props) => ( @@ -29,6 +30,7 @@ export const Heading = (props: Props) => ( aria-level={props.ariaLevel} id={props.id} data-testid={props.dataTestid ?? "heading"} + className={props.className} > {props.stripe !== "none" && ( Date: Tue, 25 Jul 2023 10:55:18 +0200 Subject: [PATCH 03/16] chore: move folder --- .../src/outils/IndemniteLicenciement/index.tsx | 2 +- .../src/{ => outils/common}/Feedback/Questionnaire.tsx | 0 .../src/{ => outils/common}/Feedback/QuestionnaireAdvanced.tsx | 0 .../src/{ => outils/common}/Feedback/QuestionnaireEnd.tsx | 0 .../src/{ => outils/common}/Feedback/QuestionnaireItem.tsx | 0 .../src/{ => outils/common}/Feedback/QuestionnaireText.tsx | 0 .../{ => outils/common}/Feedback/__tests__/feedback.test.tsx | 0 .../src/{ => outils/common}/Feedback/__tests__/ui.ts | 0 .../src/{ => outils/common}/Feedback/index.tsx | 0 .../src/{ => outils/common}/Feedback/introduction.tsx | 0 .../src/{ => outils/common}/Feedback/tracking.ts | 2 +- 11 files changed, 2 insertions(+), 2 deletions(-) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/Questionnaire.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/QuestionnaireAdvanced.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/QuestionnaireEnd.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/QuestionnaireItem.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/QuestionnaireText.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/__tests__/feedback.test.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/__tests__/ui.ts (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/index.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/introduction.tsx (100%) rename packages/code-du-travail-frontend/src/{ => outils/common}/Feedback/tracking.ts (92%) diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx index cdefb0077c..7fae60c508 100644 --- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx @@ -18,7 +18,7 @@ import { } from "./store"; import { ToolName } from "../types"; import { PublicodesSimulator } from "@socialgouv/modeles-social"; -import { Feedback } from "../../Feedback"; +import { Feedback } from "../common/Feedback"; type Props = { icon: string; diff --git a/packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/Questionnaire.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/QuestionnaireAdvanced.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireEnd.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/QuestionnaireEnd.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/QuestionnaireItem.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/QuestionnaireText.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/__tests__/feedback.test.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/feedback.test.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/__tests__/feedback.test.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/feedback.test.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/__tests__/ui.ts b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/__tests__/ui.ts rename to packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts diff --git a/packages/code-du-travail-frontend/src/Feedback/index.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/index.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/introduction.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx similarity index 100% rename from packages/code-du-travail-frontend/src/Feedback/introduction.tsx rename to packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx diff --git a/packages/code-du-travail-frontend/src/Feedback/tracking.ts b/packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts similarity index 92% rename from packages/code-du-travail-frontend/src/Feedback/tracking.ts rename to packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts index edf926bd75..b3d6138646 100644 --- a/packages/code-du-travail-frontend/src/Feedback/tracking.ts +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts @@ -1,4 +1,4 @@ -import { MatomoBaseEvent, MatomoBaseAction } from "../lib/matomo"; +import { MatomoBaseEvent } from "../../../lib/matomo"; import { push as matopush } from "@socialgouv/matomo-next"; const EVENT_CATEGORY = "feedback_simulateurs"; From b8e61e339a9b1a534820a0195484cbb2d72f2aee Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 14:51:24 +0200 Subject: [PATCH 04/16] chore: review --- .../outils/common/Feedback/Questionnaire.tsx | 11 +++---- .../common/Feedback/QuestionnaireAdvanced.tsx | 33 ++++++++----------- .../common/Feedback/QuestionnaireEnd.tsx | 9 +++-- .../common/Feedback/QuestionnaireItem.tsx | 5 --- .../src/outils/common/Feedback/index.tsx | 16 ++++----- .../outils/common/Feedback/introduction.tsx | 6 ++-- .../src/outils/common/Feedback/tracking.ts | 8 ++--- 7 files changed, 39 insertions(+), 49 deletions(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx index f6629191e8..3b7b0bc5bc 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx @@ -11,7 +11,6 @@ type QuestionnaireProps = { export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { const [status, setStatus] = useState(); - const [displayError, setDisplayError] = useState(false); return ( <> @@ -23,19 +22,15 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { goodEventValue={FEEDBACK_RESULT.GOOD} badText="Pas bien" onChange={(status: FEEDBACK_RESULT) => { - setDisplayError(false); setStatus(status); }} - displayError={displayError} /> { - if (!status) { - setDisplayError(true); - } else { + if (status) { trackFeedback(EVENT_ACTION.GLOBAL, status); - onClick(); } + onClick(); }} variant="primary" > @@ -47,6 +42,8 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { const StyledHeading = styled(Heading)` margin-left: 0 !important; + margin-bottom: 0 !important; + padding-top: 6px !important; `; const StyledButton = styled(Button)` diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index e15b79a4bf..7813eb4d47 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -9,6 +9,7 @@ import { FEEDBACK_RESULT, EVENT_ACTION, } from "./tracking"; +import { useRouter } from "next/router"; type QuestionnaireAdvancedProps = { onClick: () => void; @@ -17,12 +18,10 @@ type QuestionnaireAdvancedProps = { export const QuestionnaireAdvanced = ({ onClick, }: QuestionnaireAdvancedProps): JSX.Element => { + const router = useRouter(); const [statusSimulator, setStatusSimulator] = useState(); - const [displayErrorSimulator, setDisplayErrorSimulator] = useState(false); const [statusQuestion, setStatusQuestion] = useState(); - const [displayErrorQuestion, setDisplayErrorQuestion] = useState(false); const [statusExplanation, setStatusExplanation] = useState(); - const [displayErrorExplanation, setDisplayErrorExplanation] = useState(false); const [feedbackText, setFeedbackText] = useState(); return ( <> @@ -39,9 +38,7 @@ export const QuestionnaireAdvanced = ({ goodText="Facile" onChange={(status) => { setStatusSimulator(status); - setDisplayErrorSimulator(false); }} - displayError={displayErrorSimulator} > { setStatusQuestion(status); - setDisplayErrorQuestion(false); }} - displayError={displayErrorQuestion} > { setStatusExplanation(status); - setDisplayErrorExplanation(false); }} - displayError={displayErrorExplanation} > { - if (!statusSimulator) { - setDisplayErrorSimulator(true); - } else if (!statusQuestion) { - setDisplayErrorQuestion(true); - } else if (!statusExplanation) { - setDisplayErrorExplanation(true); - } else { + if (statusSimulator) { trackFeedback(EVENT_ACTION.EASINESS, statusSimulator); + } + if (statusQuestion) { trackFeedback(EVENT_ACTION.QUESTION_CLARITY, statusQuestion); + } + if (statusExplanation) { trackFeedback(EVENT_ACTION.RESULT_CLARITY, statusExplanation); - if (feedbackText) { - trackFeedbackText(feedbackText); - } - onClick(); } + if (feedbackText) { + trackFeedbackText(feedbackText, router.asPath); + } + onClick(); }} > Envoyer @@ -103,6 +94,8 @@ export const QuestionnaireAdvanced = ({ const StyledHeading = styled(Heading)` margin-left: 0 !important; + margin-bottom: 0 !important; + padding-top: 6px !important; `; const StyledButton = styled(Button)` diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx index c3a955c29f..6add560b1c 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx @@ -4,9 +4,9 @@ import styled from "styled-components"; export const QuestionnaireEnd = (): JSX.Element => { return ( <> - + Merci pour votre aide ! - + Votre évaluation sera étudiée au plus vite par nos équipes @@ -14,6 +14,11 @@ export const QuestionnaireEnd = (): JSX.Element => { ); }; +const StyledHeading = styled(Heading)` + margin-left: 0 !important; + padding-top: 6px !important; +`; + const StyledText = styled.span` margin: 12px auto 24px 24px; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx index 3d98ab641e..9f95ecec81 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx @@ -13,7 +13,6 @@ type QuestionnaireItemProps = { goodText?: string; className?: string; title?: string; - displayError?: boolean; onChange: (status: FEEDBACK_RESULT) => void; }; @@ -32,7 +31,6 @@ export const QuestionnaireItem = ({ goodText, className, title, - displayError = false, onChange, }: QuestionnaireItemProps): JSX.Element => { const [status, setStatus] = useState(); @@ -71,9 +69,6 @@ export const QuestionnaireItem = ({ {goodText ?? "Très bien"} - {displayError && ( - Vous devez choisir une des réponses - )}
); }; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx index 8472fa72d5..4a44368467 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { theme, icons } from "@socialgouv/cdtn-ui"; +import { theme, icons, Wrapper } from "@socialgouv/cdtn-ui"; import { Introduction } from "./introduction"; import { useState } from "react"; import { Questionnaire } from "./Questionnaire"; @@ -12,7 +12,7 @@ export const Feedback = (): JSX.Element => { >(); const [closed, setClosed] = useState(false); return !closed ? ( - + setClosed(true)} data-testid="feedbackCloseButton" @@ -47,22 +47,22 @@ export const Feedback = (): JSX.Element => { const { colors } = theme; -const StyledContainer = styled.div` - border: 1px solid ${colors.secondary}; +const StyledContainer = styled(Wrapper)` + border: 2px solid ${colors.secondary}; border-radius: 6px; width: 520px; max-width: 100%; display: flex; flex-direction: column; - margin-top: 42px; - margin-left: auto; + margin: 42px 0 0 auto; + padding: 0 0 28px 0 !important; position: relative; `; const StyledCloseIcon = styled(icons.Close)` position: absolute; - top: 12px; - right: 12px; + top: 8px; + right: 8px; width: 24px; cursor: pointer; `; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx index ea95fe9e88..6d49ecf25d 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import { Button, theme, Heading } from "@socialgouv/cdtn-ui"; +import { Button, Heading } from "@socialgouv/cdtn-ui"; type IntroductionProps = { onClick: () => void; @@ -8,7 +8,7 @@ type IntroductionProps = { export const Introduction = ({ onClick }: IntroductionProps): JSX.Element => { return ( <> - + Votre avis sur ce simulateur nous intéresse Donner mon avis @@ -17,7 +17,7 @@ export const Introduction = ({ onClick }: IntroductionProps): JSX.Element => { }; const StyledHeading = styled(Heading)` - margin-left: 0 !important; + text-align: center; `; const StyledButton = styled(Button)` diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts b/packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts index b3d6138646..896077e56b 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/tracking.ts @@ -26,11 +26,11 @@ export const trackFeedback = ( matopush([MatomoBaseEvent.TRACK_EVENT, EVENT_CATEGORY, event, feedback]); }; -export const trackFeedbackText = (text: string) => { +export const trackFeedbackText = (text: string, url: string) => { matopush([ - MatomoBaseEvent.TRACK_EVENT, - EVENT_CATEGORY, - EVENT_ACTION.SUGGESTION, + "trackEvent", + "feedback_suggestion", text, + url.replace(/\?.*$/, ""), ]); }; From 8893c2606c03297a16dae160bb7c7f740be36b15 Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 15:58:16 +0200 Subject: [PATCH 05/16] chore: review --- .../outils/common/Feedback/Questionnaire.tsx | 15 ++-- .../common/Feedback/QuestionnaireAdvanced.tsx | 6 +- .../common/Feedback/QuestionnaireEnd.tsx | 4 +- .../common/Feedback/QuestionnaireItem.tsx | 5 ++ .../src/outils/common/Feedback/index.tsx | 69 ++++++++++++------- .../outils/common/Feedback/introduction.tsx | 3 +- 6 files changed, 66 insertions(+), 36 deletions(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx index 3b7b0bc5bc..edbbc97545 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/Questionnaire.tsx @@ -11,6 +11,7 @@ type QuestionnaireProps = { export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { const [status, setStatus] = useState(); + const [displayError, setDisplayError] = useState(false); return ( <> @@ -23,14 +24,18 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { badText="Pas bien" onChange={(status: FEEDBACK_RESULT) => { setStatus(status); + setDisplayError(false); }} + displayError={displayError} /> { - if (status) { + if (!status) { + setDisplayError(true); + } else { trackFeedback(EVENT_ACTION.GLOBAL, status); + onClick(); } - onClick(); }} variant="primary" > @@ -41,9 +46,9 @@ export const Questionnaire = ({ onClick }: QuestionnaireProps): JSX.Element => { }; const StyledHeading = styled(Heading)` - margin-left: 0 !important; - margin-bottom: 0 !important; - padding-top: 6px !important; + margin-left: 0; + margin-bottom: 0; + padding-top: 6px; `; const StyledButton = styled(Button)` diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index 7813eb4d47..5099957e04 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -93,9 +93,9 @@ export const QuestionnaireAdvanced = ({ }; const StyledHeading = styled(Heading)` - margin-left: 0 !important; - margin-bottom: 0 !important; - padding-top: 6px !important; + margin-left: 0; + margin-bottom: 0; + padding-top: 6px; `; const StyledButton = styled(Button)` diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx index 6add560b1c..9155f6bc8a 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireEnd.tsx @@ -15,8 +15,8 @@ export const QuestionnaireEnd = (): JSX.Element => { }; const StyledHeading = styled(Heading)` - margin-left: 0 !important; - padding-top: 6px !important; + margin-left: 0; + padding-top: 6px; `; const StyledText = styled.span` diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx index 9f95ecec81..0f2ff407cc 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireItem.tsx @@ -13,6 +13,7 @@ type QuestionnaireItemProps = { goodText?: string; className?: string; title?: string; + displayError?: boolean; onChange: (status: FEEDBACK_RESULT) => void; }; @@ -31,6 +32,7 @@ export const QuestionnaireItem = ({ goodText, className, title, + displayError, onChange, }: QuestionnaireItemProps): JSX.Element => { const [status, setStatus] = useState(); @@ -69,6 +71,9 @@ export const QuestionnaireItem = ({ {goodText ?? "Très bien"} + {displayError && ( + Vous devez choisir une des réponses + )} ); }; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx index 4a44368467..cab853ddee 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx @@ -12,34 +12,49 @@ export const Feedback = (): JSX.Element => { >(); const [closed, setClosed] = useState(false); return !closed ? ( - - setClosed(true)} - data-testid="feedbackCloseButton" - /> + <> {!status && ( - { setStatus("questionnaire"); }} - /> + variant="main" + > + setClosed(true)} + data-testid="feedbackCloseButton" + /> + { + setStatus("questionnaire"); + }} + /> + )} - {status === "questionnaire" && ( - { - setStatus("questionnaireAdvanced"); - }} - /> - )} - {status === "questionnaireAdvanced" && ( - { - setStatus("questionnaireEnd"); - }} - /> + {status && ( + + setClosed(true)} + data-testid="feedbackCloseButton" + /> + {status === "questionnaire" && ( + { + setStatus("questionnaireAdvanced"); + }} + /> + )} + {status === "questionnaireAdvanced" && ( + { + setStatus("questionnaireEnd"); + }} + /> + )} + {status === "questionnaireEnd" && } + )} - {status === "questionnaireEnd" && } - + ) : ( <> ); @@ -47,10 +62,10 @@ export const Feedback = (): JSX.Element => { const { colors } = theme; -const StyledContainer = styled(Wrapper)` - border: 2px solid ${colors.secondary}; +const IntroContainer = styled(Wrapper)` + border: 1px solid ${colors.secondary}; border-radius: 6px; - width: 520px; + width: 460px; max-width: 100%; display: flex; flex-direction: column; @@ -59,6 +74,10 @@ const StyledContainer = styled(Wrapper)` position: relative; `; +const StyledContainer = styled(IntroContainer)` + width: 520px; +`; + const StyledCloseIcon = styled(icons.Close)` position: absolute; top: 8px; diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx index 6d49ecf25d..ab2e441e68 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/introduction.tsx @@ -18,8 +18,9 @@ export const Introduction = ({ onClick }: IntroductionProps): JSX.Element => { const StyledHeading = styled(Heading)` text-align: center; + margin-top: 16px; `; const StyledButton = styled(Button)` - margin: 18px auto 24px; + margin: 0 auto; `; From c8187ffe0b1a19f55d30d025e088336aca562849 Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 16:39:29 +0200 Subject: [PATCH 06/16] chore: ajout TU --- .../common/Feedback/QuestionnaireAdvanced.tsx | 4 + .../common/Feedback/QuestionnaireItem.tsx | 7 +- .../common/Feedback/QuestionnaireText.tsx | 3 + .../Feedback/__tests__/feedback.test.tsx | 115 ++++++++++++++++-- .../outils/common/Feedback/__tests__/ui.ts | 44 ++++++- 5 files changed, 162 insertions(+), 11 deletions(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index 5099957e04..f8364d5075 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -39,6 +39,7 @@ export const QuestionnaireAdvanced = ({ onChange={(status) => { setStatusSimulator(status); }} + dataTestId="simulator" > { setStatusQuestion(status); }} + dataTestId="questionClarity" > { setStatusExplanation(status); }} + dataTestId="resultClarity" > void; + dataTestId?: string; }; export enum Status { @@ -34,10 +35,11 @@ export const QuestionnaireItem = ({ title, displayError, onChange, + dataTestId, }: QuestionnaireItemProps): JSX.Element => { const [status, setStatus] = useState(); return ( -
+
{title && {title}} {badText ?? "Pas bien"} @@ -56,6 +59,7 @@ export const QuestionnaireItem = ({ setStatus(Status.AVERAGE); onChange(averageEventValue); }} + data-testId={`${dataTestId}-average`} > {averageText ?? "Moyen"} @@ -66,6 +70,7 @@ export const QuestionnaireItem = ({ setStatus(Status.GOOD); onChange(goodEventValue); }} + data-testId={`${dataTestId}-good`} > {goodText ?? "Très bien"} diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx index 35ac87be84..b84e037bf7 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireText.tsx @@ -6,6 +6,7 @@ type QuestionnaireItemProps = { title?: string; placeholder?: string; onChange: (text: string) => void; + dataTestId?: string; }; export const QuestionnaireText = ({ @@ -13,6 +14,7 @@ export const QuestionnaireText = ({ title, placeholder, onChange, + dataTestId, }: QuestionnaireItemProps): JSX.Element => { const maxCharacters = 200; return ( @@ -22,6 +24,7 @@ export const QuestionnaireText = ({ placeholder={placeholder} maxLength={maxCharacters} onChange={(event) => onChange(event.target.value)} + data-testid={dataTestId} /> {maxCharacters} caractères maximum diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/feedback.test.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/feedback.test.tsx index bb2a60d9e8..115839e943 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/feedback.test.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/feedback.test.tsx @@ -1,6 +1,13 @@ import { fireEvent, render, screen } from "@testing-library/react"; import { Feedback } from ".."; import { ui } from "./ui"; +import { push as matopush } from "@socialgouv/matomo-next"; + +jest.mock("@socialgouv/matomo-next", () => { + return { + push: jest.fn(), + }; +}); describe("Etant donné un composant Feedback", () => { beforeEach(() => { @@ -10,7 +17,7 @@ describe("Etant donné un composant Feedback", () => { expect(ui.introduction.title.query()).toBeInTheDocument(); expect(ui.introduction.button.query()).toBeInTheDocument(); }); - describe("Etant donné un click sur le bouton 'Fermer'", () => { + describe("Lors d'un clique sur le bouton 'Fermer'", () => { beforeEach(() => { fireEvent.click(ui.closeButton.get()); }); @@ -19,15 +26,109 @@ describe("Etant donné un composant Feedback", () => { expect(ui.introduction.button.query()).not.toBeInTheDocument(); }); }); - describe("Etant donné un click sur le bouton 'Donner mon avis'", () => { + describe("Lors d'un clique sur le bouton 'Donner mon avis'", () => { beforeEach(() => { fireEvent.click(ui.introduction.button.get()); }); - test("Vérification que le composant ne s'affiche plus", () => { - expect(ui.questionnaire.title.query()).toBeInTheDocument(); - expect(ui.questionnaire.notGood.query()).toBeInTheDocument(); - expect(ui.questionnaire.average.query()).toBeInTheDocument(); - expect(ui.questionnaire.good.query()).toBeInTheDocument(); + test("Vérification que le 1er questionnaire s'affiche bien", () => { + expect(ui.questionnaire1.title.query()).toBeInTheDocument(); + expect(ui.questionnaire1.bad.query()).toBeInTheDocument(); + expect(ui.questionnaire1.average.query()).toBeInTheDocument(); + expect(ui.questionnaire1.good.query()).toBeInTheDocument(); + expect(ui.sendButton.query()).toBeInTheDocument(); + }); + describe("Lors d'un clic directement sur le bouton 'Envoyer'", () => { + beforeEach(() => { + fireEvent.click(ui.sendButton.get()); + }); + test("Vérification que le message d'erreur s'affiche bien", () => { + expect(ui.questionnaire1.requiredError.query()).toBeInTheDocument(); + }); + }); + describe("Lors d'une sélection et clique sur le bouton 'Envoyer'", () => { + beforeEach(() => { + fireEvent.click(ui.questionnaire1.average.get()); + fireEvent.click(ui.sendButton.get()); + }); + test("Vérification du tracking et que le 2e questionnaire s'affiche", () => { + expect(matopush).toHaveBeenCalledWith([ + "trackEvent", + "feedback_simulateurs", + "Comment_s_est_passée_la_simulation", + "moyen", + ]); + + expect(ui.questionnaire2.simulator.title.query()).toBeInTheDocument(); + expect(ui.questionnaire2.simulator.bad.query()).toBeInTheDocument(); + expect(ui.questionnaire2.simulator.average.query()).toBeInTheDocument(); + expect(ui.questionnaire2.simulator.good.query()).toBeInTheDocument(); + + expect( + ui.questionnaire2.questionClarity.title.query() + ).toBeInTheDocument(); + expect( + ui.questionnaire2.questionClarity.bad.query() + ).toBeInTheDocument(); + expect( + ui.questionnaire2.questionClarity.average.query() + ).toBeInTheDocument(); + expect( + ui.questionnaire2.questionClarity.good.query() + ).toBeInTheDocument(); + + expect( + ui.questionnaire2.resultClarity.title.query() + ).toBeInTheDocument(); + expect(ui.questionnaire2.resultClarity.bad.query()).toBeInTheDocument(); + expect( + ui.questionnaire2.resultClarity.average.query() + ).toBeInTheDocument(); + expect( + ui.questionnaire2.resultClarity.good.query() + ).toBeInTheDocument(); + + expect(ui.questionnaire2.more.title.query()).toBeInTheDocument(); + expect(ui.questionnaire2.more.input.query()).toBeInTheDocument(); + }); + describe("Lors d'une sélection et clique sur le bouton 'Envoyer'", () => { + beforeEach(() => { + fireEvent.click(ui.questionnaire2.simulator.bad.get()); + fireEvent.click(ui.questionnaire2.questionClarity.average.get()); + fireEvent.click(ui.questionnaire2.resultClarity.good.get()); + fireEvent.change(ui.questionnaire2.more.input.get(), { + target: { value: "test" }, + }); + fireEvent.click(ui.sendButton.get()); + }); + test("Vérification du tracking et que la fin du questionnaire s'affiche", () => { + expect(matopush).toHaveBeenCalledWith([ + "trackEvent", + "feedback_simulateurs", + "Facilité_utilisation_simulateur", + "pas_du_tout", + ]); + expect(matopush).toHaveBeenCalledWith([ + "trackEvent", + "feedback_simulateurs", + "Clarté_questions", + "moyen", + ]); + expect(matopush).toHaveBeenCalledWith([ + "trackEvent", + "feedback_simulateurs", + "Clarté_résultat", + "oui", + ]); + expect(matopush).toHaveBeenCalledWith([ + "trackEvent", + "feedback_suggestion", + "test", + "mock", + ]); + expect(ui.questionnaireEnd.title.query()).toBeInTheDocument(); + expect(ui.questionnaireEnd.description.query()).toBeInTheDocument(); + }); + }); }); }); }); diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts index 9847d60310..529edb957b 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts @@ -2,14 +2,52 @@ import { byTestId, byText } from "testing-library-selector"; export const ui = { closeButton: byTestId("feedbackCloseButton"), + sendButton: byText("Envoyer"), introduction: { title: byText("Votre avis sur ce simulateur nous intéresse"), button: byText("Donner mon avis"), }, - questionnaire: { - title: byText(/Comment s'est passée cette simulation pour vous/), - notGood: byText("Pas bien"), + questionnaire1: { + title: byText(/Comment s'est passée cette simulation pour vous \?/), + bad: byText("Pas bien"), average: byText("Moyen"), good: byText("Très bien"), + requiredError: byText("Vous devez choisir une des réponses"), + }, + questionnaire2: { + title: byText(/Merci pour votre aide ! Pouvez-vous nous en dire plus \?/), + simulator: { + title: byText(/Le simulateur était-il facile à utiliser \?/), + bad: byTestId("simulator-bad"), + average: byTestId("simulator-average"), + good: byTestId("simulator-good"), + }, + questionClarity: { + title: byText(/Les questions étaient-elles claires et compréhensible \?/), + bad: byTestId("questionClarity-bad"), + average: byTestId("questionClarity-average"), + good: byTestId("questionClarity-good"), + }, + resultClarity: { + title: byText( + /Les explications du résultat obtenu étaient-elles claires et compréhensible \?/ + ), + bad: byTestId("resultClarity-bad"), + average: byTestId("resultClarity-average"), + good: byTestId("resultClarity-good"), + }, + more: { + title: byText( + /Les explications du résultat obtenu étaient-elles claires et compréhensible \?/ + ), + input: byTestId("more-input"), + }, + requiredError: byText("Vous devez choisir une des réponses"), + }, + questionnaireEnd: { + title: byText(/Merci pour votre aide !/), + description: byText( + /Votre évaluation sera étudiée au plus vite par nos équipes/ + ), }, }; From 627df841f30102457c135a7647a3e33759b1572a Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 17:11:31 +0200 Subject: [PATCH 07/16] chore: ortho --- .../src/outils/common/Feedback/QuestionnaireAdvanced.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index f8364d5075..9e91352c18 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -45,7 +45,7 @@ export const QuestionnaireAdvanced = ({ badEventValue={FEEDBACK_RESULT.NOT_AT_ALL} averageEventValue={FEEDBACK_RESULT.AVERAGE} goodEventValue={FEEDBACK_RESULT.YES} - title="Les questions étaient-elles claires et compréhensible ?" + title="Les questions étaient-elles claires et compréhensibles ?" badText="Pas du tout" goodText="Oui" onChange={(status) => { @@ -57,7 +57,7 @@ export const QuestionnaireAdvanced = ({ badEventValue={FEEDBACK_RESULT.NOT_AT_ALL} averageEventValue={FEEDBACK_RESULT.AVERAGE} goodEventValue={FEEDBACK_RESULT.YES} - title="Les explications du résultat obtenu étaient-elles claires et compréhensible ?" + title="Les explications du résultat obtenu étaient-elles claires et compréhensibles ?" badText="Pas du tout" goodText="Oui" onChange={(status) => { From 7a244e174578a55a6f851c26db73cbdf178d680c Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 17:12:44 +0200 Subject: [PATCH 08/16] chore: ortho --- .../src/outils/common/Feedback/__tests__/ui.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts index 529edb957b..3ca0dd5542 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/__tests__/ui.ts @@ -23,23 +23,23 @@ export const ui = { good: byTestId("simulator-good"), }, questionClarity: { - title: byText(/Les questions étaient-elles claires et compréhensible \?/), + title: byText( + /Les questions étaient-elles claires et compréhensibles \?/ + ), bad: byTestId("questionClarity-bad"), average: byTestId("questionClarity-average"), good: byTestId("questionClarity-good"), }, resultClarity: { title: byText( - /Les explications du résultat obtenu étaient-elles claires et compréhensible \?/ + /Les explications du résultat obtenu étaient-elles claires et compréhensibles \?/ ), bad: byTestId("resultClarity-bad"), average: byTestId("resultClarity-average"), good: byTestId("resultClarity-good"), }, more: { - title: byText( - /Les explications du résultat obtenu étaient-elles claires et compréhensible \?/ - ), + title: byText(/Vous souhaitez nous en dire davantage \?/), input: byTestId("more-input"), }, requiredError: byText("Vous devez choisir une des réponses"), From d5aa0e5c6684c61d4454fe39a5a2c59c48d669f6 Mon Sep 17 00:00:00 2001 From: Victor Zeinstra Date: Tue, 25 Jul 2023 17:32:12 +0200 Subject: [PATCH 09/16] feat: add scroll to top --- .../src/outils/common/Feedback/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx index cab853ddee..025541ad18 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx @@ -11,6 +11,8 @@ export const Feedback = (): JSX.Element => { "questionnaire" | "questionnaireAdvanced" | "questionnaireEnd" >(); const [closed, setClosed] = useState(false); + const [position, setPosition] = useState(0); + const [bodyPosition, setBodyPosition] = useState(0); return !closed ? ( <> {!status && ( @@ -32,7 +34,15 @@ export const Feedback = (): JSX.Element => { )} {status && ( - + { + if (!el) return; + + setPosition(el.getBoundingClientRect().top); + setBodyPosition(document.body.getBoundingClientRect().top); + }} + > setClosed(true)} data-testid="feedbackCloseButton" @@ -48,6 +58,7 @@ export const Feedback = (): JSX.Element => { { setStatus("questionnaireEnd"); + window.scrollTo(0, position - bodyPosition - 220); }} /> )} From 7fb640be33f5a20c647adda7cf68bc5a9f7c2556 Mon Sep 17 00:00:00 2001 From: Maxime Golfier <25312957+maxgfr@users.noreply.github.com> Date: Thu, 3 Aug 2023 17:10:43 +0200 Subject: [PATCH 10/16] Update packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx Co-authored-by: Martial Maillot --- .../src/outils/IndemniteLicenciement/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx index 7fae60c508..c8848c761c 100644 --- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.tsx @@ -157,7 +157,7 @@ const IndemniteLicenciementSimulator = ({ ]} hiddenStep={getHiddenSteps()} /> - + ); }; From 8bffc63f3fe06abd455049ccf3cddd5b66f8966a Mon Sep 17 00:00:00 2001 From: Maxime Golfier <25312957+maxgfr@users.noreply.github.com> Date: Thu, 3 Aug 2023 17:11:05 +0200 Subject: [PATCH 11/16] Update packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx Co-authored-by: Martial Maillot --- .../src/outils/common/Feedback/QuestionnaireAdvanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index 9e91352c18..9e282922a3 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -40,7 +40,7 @@ export const QuestionnaireAdvanced = ({ setStatusSimulator(status); }} dataTestId="simulator" - > + /> Date: Thu, 3 Aug 2023 17:11:15 +0200 Subject: [PATCH 12/16] Update packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx Co-authored-by: Martial Maillot --- .../src/outils/common/Feedback/QuestionnaireAdvanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index 9e282922a3..a4695d49b4 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -52,7 +52,7 @@ export const QuestionnaireAdvanced = ({ setStatusQuestion(status); }} dataTestId="questionClarity" - > + /> Date: Thu, 3 Aug 2023 17:11:31 +0200 Subject: [PATCH 13/16] Update packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx Co-authored-by: Martial Maillot --- .../src/outils/common/Feedback/QuestionnaireAdvanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index a4695d49b4..9c3d7a16e0 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -17,7 +17,7 @@ type QuestionnaireAdvancedProps = { export const QuestionnaireAdvanced = ({ onClick, -}: QuestionnaireAdvancedProps): JSX.Element => { +}: QuestionnaireAdvancedProps): React.ReactElement => { const router = useRouter(); const [statusSimulator, setStatusSimulator] = useState(); const [statusQuestion, setStatusQuestion] = useState(); From 5610c890c32b3d10edf3558cabf60c929b7b7208 Mon Sep 17 00:00:00 2001 From: Maxime Golfier <25312957+maxgfr@users.noreply.github.com> Date: Thu, 3 Aug 2023 17:11:38 +0200 Subject: [PATCH 14/16] Update packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx Co-authored-by: Martial Maillot --- .../src/outils/common/Feedback/QuestionnaireAdvanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index 9c3d7a16e0..67f225fde1 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -64,7 +64,7 @@ export const QuestionnaireAdvanced = ({ setStatusExplanation(status); }} dataTestId="resultClarity" - > + /> Date: Thu, 3 Aug 2023 17:11:48 +0200 Subject: [PATCH 15/16] Update packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx Co-authored-by: Martial Maillot --- .../src/outils/common/Feedback/QuestionnaireAdvanced.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx index 67f225fde1..a1ec4a87b7 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/QuestionnaireAdvanced.tsx @@ -70,7 +70,7 @@ export const QuestionnaireAdvanced = ({ placeholder="ex: la question sur la date de début du contrat n'est pas claire" onChange={setFeedbackText} dataTestId="more-input" - > + /> Date: Thu, 3 Aug 2023 17:21:45 +0200 Subject: [PATCH 16/16] fix: retours --- .../src/outils/common/Feedback/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx index 025541ad18..41757ce632 100644 --- a/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx +++ b/packages/code-du-travail-frontend/src/outils/common/Feedback/index.tsx @@ -95,4 +95,5 @@ const StyledCloseIcon = styled(icons.Close)` right: 8px; width: 24px; cursor: pointer; + margin: 3px; `;