From b0845c0f86dca4093944f223f606c1f319d87060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Mon, 14 Aug 2023 14:33:17 +0200 Subject: [PATCH] Add error message if the feedback msg is not send --- .../components/Feedback/FeedbackForm.tsx | 71 +++++++++++++++---- site/source/locales/ui-en.yaml | 15 ++-- site/source/locales/ui-fr.yaml | 15 ++-- 3 files changed, 77 insertions(+), 24 deletions(-) diff --git a/site/source/components/Feedback/FeedbackForm.tsx b/site/source/components/Feedback/FeedbackForm.tsx index a140959f8..314fb980e 100644 --- a/site/source/components/Feedback/FeedbackForm.tsx +++ b/site/source/components/Feedback/FeedbackForm.tsx @@ -4,12 +4,13 @@ import { useLocation } from 'react-router-dom' import styled from 'styled-components' import { ScrollToElement } from '@/components/utils/Scroll' -import { Checkbox, TextAreaField, TextField } from '@/design-system' +import { Checkbox, Message, TextAreaField, TextField } from '@/design-system' import { Button } from '@/design-system/buttons' import { Emoji } from '@/design-system/emoji' import { Spacing } from '@/design-system/layout' import { Strong } from '@/design-system/typography' -import { H1 } from '@/design-system/typography/heading' +import { H1, H4 } from '@/design-system/typography/heading' +import { Link } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' import { useUrl } from '../ShareSimulationBanner' @@ -30,15 +31,19 @@ const FeedbackThankYouContent = () => {

- Merci pour votre message ! + + Merci pour votre message ! +

- Notre équipe prend en charge votre retour. + + Notre équipe prend en charge votre retour. + - + Nous avons à cœur d'améliorer en continu notre site, vos remarques nous sont donc très précieuses. @@ -48,6 +53,40 @@ const FeedbackThankYouContent = () => { ) } +const FeedbackRequestErrorContent = ({ + statusCode, +}: { + statusCode: number +}) => { + const { t } = useTranslation() + + return ( + <> + + +

Une erreur est survenue pendant l’envoi du message

+ + + + Le message n’a pas pu être envoyé (status code {{ statusCode }}). + Veuillez réessayer ou nous contacter par mail à l’adresse{' '} + + contact@mon-entreprise.beta.gouv.fr + + . + + + + + ) +} + export default function FeedbackForm({ infoSlot, description, @@ -68,7 +107,9 @@ export default function FeedbackForm({ ([key]) => key !== 'utm_source' ) const [share, setShare] = useState(false) - const [isSubmittedSuccessfully, setIsSubmittedSuccessfully] = useState(false) + const [requestStatusCode, setRequestStatusCode] = useState( + null + ) const [isLoading, setIsLoading] = useState(false) const [submitError, setSubmitError] = useState( undefined @@ -88,7 +129,7 @@ export default function FeedbackForm({ const subjectTags = tags?.length ? ` [${tags?.join(',')}]` : '' try { - await fetch(`/server/send-crisp-message`, { + const result = await fetch(`/server/send-crisp-message`, { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -102,7 +143,8 @@ export default function FeedbackForm({ email, }), }) - setIsSubmittedSuccessfully(true) + setIsLoading(false) + setRequestStatusCode(result.status) } catch (e) { // Show error message // eslint-disable-next-line no-console @@ -119,17 +161,18 @@ export default function FeedbackForm({ const resetSubmitErrorField = (field: keyof SubmitError) => submitError?.[field] ? () => - setSubmitError((previousValue) => ({ - ...previousValue, - [field]: '', - })) + setSubmitError((previousValue) => ({ ...previousValue, [field]: '' })) : undefined return ( - {isSubmittedSuccessfully && } - {!isSubmittedSuccessfully && ( + {requestStatusCode === 200 ? ( + + ) : ( <> + {requestStatusCode !== null && ( + + )}
{ diff --git a/site/source/locales/ui-en.yaml b/site/source/locales/ui-en.yaml index e02a11a88..815fecf15 100644 --- a/site/source/locales/ui-en.yaml +++ b/site/source/locales/ui-en.yaml @@ -160,7 +160,6 @@ Ma déclaration: My declaration Ma situation: My situation Maternité: Maternity ward Menu de navigation: Navigation menu -Merci pour votre message !: Thank you for your message! Mes cotisations: My contributions Message à caractère informatif: Informative message Mode accompagnement: Support mode @@ -182,10 +181,6 @@ Mots-clés définissants l'activité: Keywords defining the activity Nombre de visites: Number of visits Nombres: Numbers Non: No -Notre équipe prend en charge votre retour.: Our team will take care of your return. -"Nous avons à cœur d'améliorer en continu notre site, vos remarques nous sont donc très précieuses.": - We're constantly striving to improve our site, so your feedback is very - important to us. Nous n’avons pas trouvé de résultat pour cette entreprise.: No results were found for this company. "Nouveau contenu disponible, cliquez sur recharger pour mettre à jour la page.": New content available, click reload to update page. Nouveautés: News @@ -628,7 +623,17 @@ explications: feedback: beta-testeur: To continue giving your opinion and previewing new products, <2>sign up for the beta tester list + error: + description: The message could not be sent (status code {{statusCode}}). Please + try again or contact us by e-mail at + <4>contact@mon-entreprise.beta.gouv.fr. + title: <0>An error has occurred while sending the message reportError: Make a suggestion + success: + body1: Our team will take care of your return. + body2: We're constantly striving to improve our site, so your feedback is very + important to us. + title: Thank you for your message! thanks: Thank you for your feedback! fieldRequired: Required field footer: diff --git a/site/source/locales/ui-fr.yaml b/site/source/locales/ui-fr.yaml index 779f1b40f..938cb8971 100644 --- a/site/source/locales/ui-fr.yaml +++ b/site/source/locales/ui-fr.yaml @@ -164,7 +164,6 @@ Ma déclaration: Ma déclaration Ma situation: Ma situation Maternité: Maternité Menu de navigation: Menu de navigation -Merci pour votre message !: Merci pour votre message ! Mes cotisations: Mes cotisations Message à caractère informatif: Message à caractère informatif Mode accompagnement: Mode accompagnement @@ -187,10 +186,6 @@ Mots-clés définissants l'activité: Mots-clés définissants l'activité Nombre de visites: Nombre de visites Nombres: Nombres Non: Non -Notre équipe prend en charge votre retour.: Notre équipe prend en charge votre retour. -"Nous avons à cœur d'améliorer en continu notre site, vos remarques nous sont donc très précieuses.": - Nous avons à cœur d'améliorer en continu notre site, vos remarques nous sont - donc très précieuses. Nous n’avons pas trouvé de résultat pour cette entreprise.: Nous n’avons pas trouvé de résultat pour cette entreprise. "Nouveau contenu disponible, cliquez sur recharger pour mettre à jour la page.": Nouveau contenu disponible, cliquez sur recharger pour mettre à jour la page. Nouveautés: Nouveautés @@ -658,7 +653,17 @@ explications: feedback: beta-testeur: Pour continuer à donner votre avis et accéder aux nouveautés en avant-première, <2>inscrivez-vous sur la liste des beta-testeur + error: + description: Le message n’a pas pu être envoyé (status code {{statusCode}}). + Veuillez réessayer ou nous contacter par mail à l’adresse + <4>contact@mon-entreprise.beta.gouv.fr. + title: <0>Une erreur est survenue pendant l’envoi du message reportError: Faire une suggestion + success: + body1: Notre équipe prend en charge votre retour. + body2: Nous avons à cœur d'améliorer en continu notre site, vos remarques nous + sont donc très précieuses. + title: Merci pour votre message ! thanks: Merci de votre retour ! fieldRequired: Champ requis footer: