betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Add error message if the feedback msg is not send

pull/2789/head
Jérémy Rialland 2023-08-14 14:33:17 +02:00 committed by Jérémy Rialland
parent 9921b19e0b
commit b0845c0f86
3 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
site/source/components/Feedback/FeedbackForm.tsx
View File

@ -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 = () => {
</span>
</StyledEmojiContainer>
<H1>
<Trans>Merci pour votre message !</Trans>
<Trans i18nKey={'feedback.success.title'}>
Merci pour votre message !
</Trans>
</H1>
<Body>
<Strong>
<Trans>Notre équipe prend en charge votre retour.</Trans>
<Trans i18nKey={'feedback.success.body1'}>
Notre équipe prend en charge votre retour.
</Trans>
</Strong>
</Body>
<Body>
<Trans>
<Trans i18nKey={'feedback.success.body2'}>
Nous avons à cœur d'améliorer en continu notre site, vos remarques
nous sont donc très précieuses.
</Trans>
@ -48,6 +53,40 @@ const FeedbackThankYouContent = () => {
)
}
const FeedbackRequestErrorContent = ({
statusCode,
}: {
statusCode: number
}) => {
const { t } = useTranslation()
return (
<>
<Message type="error">
<Trans i18nKey={'feedback.error.title'}>
<H4>Une erreur est survenue pendant l’envoi du message</H4>
</Trans>
<Body>
<Trans i18nKey={'feedback.error.description'}>
Le message n’a pas pu être envoyé (status code {{ statusCode }}).
Veuillez réessayer ou nous contacter par mail à l’adresse{' '}
<Link
href="mailto:contact@mon-entreprise.beta.gouv.fr"
aria-label={t(
'error.contact',
'Envoyer un courriel à contact@mon-entreprise.beta.gouv.fr, nouvelle fenêtre'
)}
>
contact@mon-entreprise.beta.gouv.fr
</Link>
.
</Trans>
</Body>
</Message>
</>
)
}
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 | number>(
null
)
const [isLoading, setIsLoading] = useState(false)
const [submitError, setSubmitError] = useState<SubmitError | undefined>(
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 (
<ScrollToElement onlyIfNotVisible>
{isSubmittedSuccessfully && <FeedbackThankYouContent />}
{!isSubmittedSuccessfully && (
{requestStatusCode === 200 ? (
<FeedbackThankYouContent />
) : (
<>
{requestStatusCode !== null && (
<FeedbackRequestErrorContent statusCode={requestStatusCode} />
)}
<StyledFeedback>
<form
onSubmit={(e) => {

15
site/source/locales/ui-en.yaml
View File

@ -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</2>
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</4>.
title: <0>An error has occurred while sending the message</0>
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:

15
site/source/locales/ui-fr.yaml
View File

@ -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</2>
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</4>.
title: <0>Une erreur est survenue pendant l’envoi du message</0>
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: