feat: add forms logic

src/widgets/contacts-form/ui.tsx

@@ -4,11 +4,48 @@ import s from './styles.module.scss';
 import { Button, Input } from '@shared/ui';
 import Image from 'next/image';
 import toast from 'react-hot-toast';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 
 import bgForm from '@public/images/bg-form.jpg';
 
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+};
+
 export default function ContactsForm() {
-  const notify = () => toast.success('Заявка на консультацию принята');
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    clearErrors,
+  } = useForm<TForm>({
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const onSubmit = async (data: TForm) => {
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
     <div className={s.Form}>
@@ -28,10 +65,27 @@ export default function ContactsForm() {
           точной стоимости работ
         </p>
       </div>
-      <form className={s.Inputs}>
-        <Input placeholder='Ваше имя' fullWidth />
-        <Input type='text' placeholder='+7 (999) 123 45 67' fullWidth />
-        <Button variant='orange' fullWidth onClick={notify}>
+      <form className={s.Inputs} onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          control={control}
+          name={'name'}
+          render={({ field }) => (
+            <Input {...field} type='text' placeholder='Ваше имя' fullWidth />
+          )}
+        />
+        <Controller
+          control={control}
+          name={'phone'}
+          render={({ field }) => (
+            <Input
+              {...field}
+              type='text'
+              placeholder='+7 (999) 123 45 67'
+              fullWidth
+            />
+          )}
+        />
+        <Button variant='orange' fullWidth>
           Получить консультацию
         </Button>
       </form>

src/widgets/footer-form/ui.tsx

@@ -3,26 +3,94 @@
 import s from './styles.module.scss';
 import { Button, Input, Mark, TextArea } from '@shared/ui';
 import toast from 'react-hot-toast';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+  message: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+  message: '',
+};
 
 export default function FooterForm() {
-  const notify = () => toast.success('Заявка на консультацию принята');
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    clearErrors,
+  } = useForm<TForm>({
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const onSubmit = async (data: TForm) => {
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
-    <form className={s.Form}>
+    <form className={s.Form} onSubmit={handleSubmit(onSubmit)}>
       <h2 className={s.Header}>
         Давайте <Mark>обсудим</Mark> ваши задачи
       </h2>
-      <Input variant='ghost' placeholder={'Ваше имя'} fullWidth />
-      <Input variant='ghost' placeholder={'+7 999 1234567'} fullWidth />
-      <TextArea
-        variant='ghost'
-        placeholder={'Кратко опишите вашу задачу'}
-        fullWidth
-        id='story'
-        name='story'
-        rows={6}
+      <Controller
+        control={control}
+        name={'name'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            variant='ghost'
+            placeholder={'Ваше имя'}
+            fullWidth
+          />
+        )}
       />
-      <Button className={s.SendBtn} variant='orange' fullWidth onClick={notify}>
+      <Controller
+        control={control}
+        name={'phone'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            variant='ghost'
+            placeholder={'+7 999 1234567'}
+            fullWidth
+          />
+        )}
+      />
+      <Controller
+        control={control}
+        name={'message'}
+        render={({ field }) => (
+          <TextArea
+            {...field}
+            variant='ghost'
+            placeholder={'Кратко опишите вашу задачу'}
+            fullWidth
+            id='story'
+            name='story'
+            rows={6}
+          />
+        )}
+      />
+      <Button className={s.SendBtn} variant='orange' fullWidth>
         Отправить
       </Button>
     </form>

src/widgets/license-form/ui.tsx

@@ -6,9 +6,46 @@ import Image from 'next/image';
 import toast from 'react-hot-toast';
 
 import bgForm from '@public/images/bg-form.jpg';
+import { z } from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+};
 
 export default function LicenseForm() {
-  const notify = () => toast.success('Заявка на консультацию принята');
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    clearErrors,
+  } = useForm<TForm>({
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const onSubmit = async (data: TForm) => {
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
     <div className={s.Form}>
@@ -30,10 +67,22 @@ export default function LicenseForm() {
           Оставьте свои контактные данные и мы закрепим скидку до 1 июля за вами
         </p>
       </div>
-      <form className={s.Inputs}>
-        <Input placeholder={'Ваше имя'} fullWidth />
-        <Input placeholder={'+7 (999) 123 45 67'} fullWidth />
-        <Button variant='orange' fullWidth onClick={notify}>
+      <form className={s.Inputs} onSubmit={handleSubmit(onSubmit)}>
+        <Controller
+          control={control}
+          name={'name'}
+          render={({ field }) => (
+            <Input {...field} placeholder={'Ваше имя'} fullWidth />
+          )}
+        />
+        <Controller
+          control={control}
+          name={'phone'}
+          render={({ field }) => (
+            <Input {...field} placeholder={'+7 (999) 123 45 67'} fullWidth />
+          )}
+        />
+        <Button variant='orange' fullWidth>
           Получить консультацию
         </Button>
       </form>

src/widgets/offer-form/ui.tsx

@@ -2,24 +2,75 @@
 
 import s from './styles.module.scss';
 import { Button, Input } from '@shared/ui';
-import { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import toast from 'react-hot-toast';
 
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+};
+
 export default function OfferForm() {
-  const [name, setName] = useState('');
-  const notify = () => toast.success('Заявка на консультацию принята');
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    clearErrors,
+  } = useForm<TForm>({
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const onSubmit = async (data: TForm) => {
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
-    <form className={s.RowForm}>
-      <Input className={s.Unit} type='text' placeholder='+7 (999) 123 45 67' />
-      <Input
-        className={s.Unit}
-        type='text'
-        placeholder='Ваше имя'
-        value={name}
-        onChange={(e) => setName(e.target.value)}
+    <form className={s.RowForm} onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name={'name'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            className={s.Unit}
+            type='text'
+            placeholder='Ваше имя'
+          />
+        )}
       />
-      <Button className={s.Unit} variant='orange' onClick={notify}>
+      <Controller
+        control={control}
+        name={'phone'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            className={s.Unit}
+            type='text'
+            placeholder='+7 (999) 123 45 67'
+          />
+        )}
+      />
+      <Button className={s.Unit} variant='orange'>
         Получить консультацию
       </Button>
     </form>

src/widgets/offer-request/ui.tsx

@@ -3,12 +3,67 @@
 import s from './styles.module.scss';
 import { AdvancedPhoneInput, Button, Input } from '@shared/ui';
 import Image from 'next/image';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
 import toast from 'react-hot-toast';
 
 import bgForm from '@public/images/bg-form.jpg';
+import { useState } from 'react';
+
+const FormSchema = z.object({
+  name: z.string().min(3),
+  phone: z.string(),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  name: '',
+  phone: '',
+};
 
 export default function OfferRequest() {
-  const notify = () => toast.success('Заявка на консультацию принята');
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors },
+    clearErrors,
+  } = useForm<TForm>({
+    mode: 'onSubmit',
+    reValidateMode: 'onBlur',
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const [inputPhone, setInputPhone] = useState('');
+
+  const onSubmitForm = async (data: TForm) => {
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
+
+  const onSubmitPhone = async (phone: string) => {
+    const data = {
+      phone,
+    };
+    try {
+      console.log('Form', data);
+      toast.success('Заявка на консультацию принята');
+      setInputPhone('');
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
 
   return (
     <div className={s.Form}>
@@ -27,19 +82,33 @@ export default function OfferRequest() {
       </div>
       <div className={s.PanelRight}>
         <AdvancedPhoneInput
+          value={inputPhone}
+          onChange={(e) => setInputPhone(e.target.value)}
+          onClick={() => onSubmitPhone(inputPhone)}
           containerClassName={s.AdvPhoneInput}
           text='Отправить заявку'
           placeholder={'+7 (999) 123 45 67'}
-          onClick={notify}
         />
 
-        <div className={s.MobileBtns}>
-          <Input placeholder='Ваше имя' fullWidth />
-          <Input placeholder='+7 999 123 45 67' fullWidth />
-          <Button variant='orange' fullWidth onClick={notify}>
+        <form className={s.MobileBtns} onSubmit={handleSubmit(onSubmitForm)}>
+          <Controller
+            control={control}
+            name={'name'}
+            render={({ field }) => (
+              <Input {...field} placeholder='Ваше имя' fullWidth />
+            )}
+          />
+          <Controller
+            control={control}
+            name={'phone'}
+            render={({ field }) => (
+              <Input {...field} placeholder='+7 999 123 45 67' fullWidth />
+            )}
+          />
+          <Button variant='orange' fullWidth>
             Отправить заявку
           </Button>
-        </div>
+        </form>
       </div>
     </div>
   );