fix: update form

src/widgets/footer-form/ui.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import s from './styles.module.scss';
-import { Button, Input, Mark, TextArea } from '@shared/ui';
+import { Button, Input, Mark, PhoneInput, TextArea } from '@shared/ui';
 import toast from 'react-hot-toast';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -9,11 +9,19 @@ import { z } from 'zod';
 
 import man from '@public/images/footer-man.png';
 import { sendFormFn } from '@shared/api/api.service';
+import { isValidPhoneNumber } from 'libphonenumber-js/min';
 
 const FormSchema = z.object({
-  name: z.string().min(3),
-  phone: z.string(),
-  message: z.string(),
+  name: z
+    .string()
+    .min(3, { message: 'Поле должно содержать не менее 3-х букв' })
+    .regex(/^[A-Za-zА-Яа-яЁё]+(?:[ '-][A-Za-zА-Яа-яЁё]+)*$/, {
+      message: 'Поле содержит некорректные символы',
+    }),
+  phone: z.string().refine(isValidPhoneNumber, 'Некорректный номер телефона'),
+  message: z
+    .string()
+    .min(21, { message: 'Оставьте сообщение мин. 20 символов' }),
 });
 type TForm = z.infer<typeof FormSchema>;
 
@@ -28,6 +36,7 @@ export default function FooterForm() {
     handleSubmit,
     control,
     reset,
+    clearErrors,
     formState: { errors },
   } = useForm<TForm>({
     mode: 'onSubmit',
@@ -67,6 +76,12 @@ export default function FooterForm() {
             variant='ghost'
             placeholder={'Ваше имя'}
             fullWidth
+            onChange={(e) => {
+              clearErrors('name');
+              field.onChange(e);
+            }}
+            error={errors && errors.name?.message}
+            errorTextColor={'#ff9191'}
           />
         )}
       />
@@ -74,11 +89,17 @@ export default function FooterForm() {
         control={control}
         name={'phone'}
         render={({ field }) => (
-          <Input
+          <PhoneInput
             {...field}
             variant='ghost'
-            placeholder={'+7 999 1234567'}
+            placeholder={'+7 (999) 123-45-67'}
             fullWidth
+            onChange={(e) => {
+              clearErrors('phone');
+              field.onChange(e);
+            }}
+            error={errors && errors.phone?.message}
+            errorTextColor={'#ff9191'}
           />
         )}
       />
@@ -94,6 +115,8 @@ export default function FooterForm() {
             id='story'
             name='story'
             rows={6}
+            error={errors && errors.message?.message}
+            errorTextColor={'#ff9191'}
           />
         )}
       />