diff --git a/CHANGELOG.md b/CHANGELOG.md index 51fbff2..cdafe37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,10 @@ and this project adheres to - 👽️(mailboxes) fix mailbox creation after dimail api improvement (#360) +### Fixed + +- 🐛(frontend) user can submit form to add mail domain by pressing "Enter" key + ## [1.0.1] - 2024-08-19 ### Fixed diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/ModalAddMailDomain.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/ModalAddMailDomain.tsx index df2b58f..d7f0018 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/components/ModalAddMailDomain.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/components/ModalAddMailDomain.tsx @@ -2,10 +2,16 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { Button, Input, Loader, ModalSize } from '@openfun/cunningham-react'; import { useRouter } from 'next/navigation'; import React from 'react'; -import { Controller, FormProvider, useForm } from 'react-hook-form'; +import { + Controller, + FormProvider, + UseFormReturn, + useForm, +} from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; +import { APIError } from '@/api'; import { Box, Text, TextErrors } from '@/components'; import { Modal } from '@/components/Modal'; import { useCreateMailDomain } from '@/features/mail-domains'; @@ -14,7 +20,68 @@ import { default as MailDomainsLogo } from '../assets/mail-domains-logo.svg'; const FORM_ID = 'form-add-mail-domain'; -export const ModalCreateMailDomain = () => { +const useAddMailDomainApiError = ({ + error, + methods, +}: { + error: APIError | null; + methods: UseFormReturn<{ name: string }> | null; +}): string[] | undefined => { + const [errorCauses, setErrorCauses] = React.useState( + undefined, + ); + const { t } = useTranslation(); + + React.useEffect(() => { + if (methods && t && error) { + let causes = undefined; + + if (error.cause?.length) { + const parseCauses = (causes: string[]) => + causes.reduce((arrayCauses, cause) => { + switch (cause) { + case 'Mail domain with this name already exists.': + case 'Mail domain with this Slug already exists.': + methods.setError('name', { + type: 'manual', + message: t( + 'This mail domain is already used. Please, choose another one.', + ), + }); + break; + default: + arrayCauses.push(cause); + } + + return arrayCauses; + }, [] as string[]); + + causes = parseCauses(error.cause); + } + + if (error.status === 500 || !error.cause) { + causes = [ + t( + 'Your request cannot be processed because the server is experiencing an error. If the problem ' + + 'persists, please contact our support to resolve the issue: suiteterritoriale@anct.gouv.fr.', + ), + ]; + } + + setErrorCauses(causes); + } + }, [methods, t, error]); + + React.useEffect(() => { + if (errorCauses && methods) { + methods.setFocus('name'); + } + }, [methods, errorCauses]); + + return errorCauses; +}; + +export const ModalAddMailDomain = () => { const { t } = useTranslation(); const router = useRouter(); @@ -42,28 +109,16 @@ export const ModalCreateMailDomain = () => { }, }); - const onSubmitCallback = () => { - void methods.handleSubmit(({ name }, event) => { - event?.preventDefault(); + const errorCauses = useAddMailDomainApiError({ error, methods }); + + const onSubmitCallback = (event: React.FormEvent) => { + event.preventDefault(); + + void methods.handleSubmit(({ name }) => { void createMailDomain(name); })(); }; - const causes = error?.cause?.filter((cause) => { - const isFound = cause === 'Mail domain with this name already exists.'; - - if (isFound) { - methods.setError('name', { - type: 'manual', - message: t( - 'This mail domain is already used. Please, choose another one.', - ), - }); - } - - return !isFound; - }); - if (!methods) { return null; } @@ -82,7 +137,8 @@ export const ModalCreateMailDomain = () => { onClose={() => router.push('/mail-domains/')} rightActions={