diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx index 76b9f22047..87160ac128 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistInput.tsx @@ -1,9 +1,13 @@ -import { useState } from 'react'; +import { useEffect } from 'react'; +import { Controller, useForm } from 'react-hook-form'; import styled from '@emotion/styled'; +import { zodResolver } from '@hookform/resolvers/zod'; import { Key } from 'ts-key-enum'; +import { z } from 'zod'; import { Button } from '@/ui/input/button/components/Button'; import { TextInput } from '@/ui/input/components/TextInput'; +import { isDomain } from '~/utils/is-domain'; const StyledContainer = styled.div` display: flex; @@ -19,45 +23,75 @@ type SettingsAccountsEmailsBlocklistInputProps = { updateBlockedEmailList: (email: string) => void; }; +const validationSchema = z + .object({ + emailOrDomain: z + .string() + .trim() + .email('Invalid email or domain') + .or( + z + .string() + .refine( + (value) => value.startsWith('@') && isDomain(value.slice(1)), + 'Invalid email or domain', + ), + ), + }) + .required(); + +type FormInput = z.infer; + export const SettingsAccountsEmailsBlocklistInput = ({ updateBlockedEmailList, }: SettingsAccountsEmailsBlocklistInputProps) => { - const [formValues, setFormValues] = useState<{ - email: string; - }>({ - email: '', + const { reset, handleSubmit, control, formState } = useForm({ + mode: 'onSubmit', + resolver: zodResolver(validationSchema), + defaultValues: { + emailOrDomain: '', + }, + }); + + const submit = handleSubmit((data) => { + updateBlockedEmailList(data.emailOrDomain); }); const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === Key.Enter) { - updateBlockedEmailList(formValues.email); - setFormValues({ email: '' }); + submit(); } }; + const { isSubmitSuccessful } = formState; + + useEffect(() => { + if (isSubmitSuccessful) { + reset(); + } + }, [isSubmitSuccessful, reset]); + return ( - - - { - setFormValues((prevState) => ({ - ...prevState, - email: value, - })); - }} - fullWidth - onKeyDown={handleKeyDown} - /> - -