feat: add forms logic

2025-06-09 14:11:36 +03:00
parent 9b6e163da5
commit a17afb39ba
18 changed files with 481 additions and 84 deletions
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -11,6 +11,11 @@ const compat = new FlatCompat({

 const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
 ];

 export default eslintConfig;
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,11 +8,14 @@
      "name": "fire-exam",
      "version": "0.1.0",
      "dependencies": {
+        "@hookform/resolvers": "^5.1.1",
        "next": "15.3.2",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
+        "react-hook-form": "^7.57.0",
        "react-hot-toast": "^2.5.2",
-        "swiper": "^11.2.8"
+        "swiper": "^11.2.8",
+        "zod": "^3.25.56"
      },
      "devDependencies": {
        "@eslint/eslintrc": "^3",
@@ -203,6 +206,18 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.1.1.tgz",
+      "integrity": "sha512-J/NVING3LMAEvexJkyTLjruSm7aOFx7QX21pzkiJfMoNG0wl5aFEjLTl7ay7IQb9EWY6AkrBy7tHL2Alijpdcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
    "node_modules/@humanfs/core": {
      "version": "0.19.1",
      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -884,6 +899,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
    "node_modules/@swc/counter": {
      "version": "0.1.3",
      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -4768,6 +4789,22 @@
        "react": "^19.1.0"
      }
    },
+    "node_modules/react-hook-form": {
+      "version": "7.57.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.57.0.tgz",
+      "integrity": "sha512-RbEks3+cbvTP84l/VXGUZ+JMrKOS8ykQCRYdm5aYsxnDquL0vspsyNhGRO7pcH6hsZqWlPOjLye7rJqdtdAmlg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
    "node_modules/react-hot-toast": {
      "version": "2.5.2",
      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
@@ -5998,6 +6035,15 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.56",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.56.tgz",
+      "integrity": "sha512-rd6eEF3BTNvQnR2e2wwolfTmUTnp70aUTqr0oaGbHifzC3BKJsoV+Gat8vxUMR1hwOKBs6El+qWehrHbCpW6SQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -11,11 +11,14 @@
    "prepare": "husky"
  },
  "dependencies": {
+    "@hookform/resolvers": "^5.1.1",
    "next": "15.3.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.57.0",
    "react-hot-toast": "^2.5.2",
-    "swiper": "^11.2.8"
+    "swiper": "^11.2.8",
+    "zod": "^3.25.56"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
--- a/public/svg/email-icon.svg
+++ b/public/svg/email-icon.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="30" cy="30" r="30" fill="#D9D9D9"/>
+    <path d="M14.1666 23.3751L26.825 32.8687C29.0028 34.5021 31.9971 34.5021 34.175 32.8687L46.8333 23.375" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12.125 23.736C12.125 22.253 12.929 20.8867 14.2253 20.1665L28.5169 12.2267C29.7503 11.5415 31.2497 11.5415 32.4831 12.2267L46.7747 20.1665C48.071 20.8867 48.875 22.253 48.875 23.736V39.7083C48.875 41.9636 47.0469 43.7917 44.7917 43.7917H16.2083C13.9532 43.7917 12.125 41.9636 12.125 39.7083V23.736Z" stroke="black" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/src/shared/ui/advanced-phone-input/advanced-phone-input.tsx
+++ b/src/shared/ui/advanced-phone-input/advanced-phone-input.tsx
@@ -1,5 +1,5 @@
 import s from './advancedPhoneInput.module.scss';
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { clsx } from 'clsx';
 import { Button, Input } from '@shared/ui';

@@ -11,17 +11,20 @@ type AdvancedPhoneInputProps = {
  text: string;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

-export default function AdvancedPhoneInput({
+const AdvancedPhoneInput = forwardRef(function AdvancedPhoneInput(
+  {
    containerClassName,
    inputClassName,
    buttonClassName,
    onClick,
    text,
    ...props
-}: AdvancedPhoneInputProps) {
+  }: AdvancedPhoneInputProps,
+  ref: Ref<HTMLInputElement>,
+) {
  return (
    <div className={clsx(containerClassName, s.Container)}>
-      <Input {...props} className={clsx(inputClassName, s.Phone)} />
+      <Input {...props} ref={ref} className={clsx(inputClassName, s.Phone)} />
      <Button
        className={clsx(buttonClassName, s.Button)}
        onClick={onClick}
@@ -31,4 +34,6 @@ export default function AdvancedPhoneInput({
      </Button>
    </div>
  );
-}
+});
+
+export default AdvancedPhoneInput;
--- a/src/shared/ui/input/input.tsx
+++ b/src/shared/ui/input/input.tsx
@@ -2,7 +2,7 @@

 import s from './input.module.scss';

-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { DetailedHTMLProps, forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { clsx } from 'clsx';

 type InputProps = {
@@ -12,15 +12,14 @@ type InputProps = {
  variant?: 'default' | 'ghost';
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

-const Input = ({
-  className,
-  fullWidth = false,
-  variant = 'default',
-  ...props
-}: InputProps) => {
+const Input = forwardRef(function Input(
+  { className, fullWidth = false, variant = 'default', ...props }: InputProps,
+  ref: Ref<HTMLInputElement>,
+) {
  return (
    <input
      {...props}
+      ref={ref}
      className={clsx(
        s.Input,
        s['Input_' + variant],
@@ -29,6 +28,6 @@ const Input = ({
      )}
    />
  );
-};
+});

 export default Input;
--- a/src/shared/ui/text-area/text-area.tsx
+++ b/src/shared/ui/text-area/text-area.tsx
@@ -1,5 +1,11 @@
 import s from './text-area.module.scss';
-import { DetailedHTMLProps, ReactNode, TextareaHTMLAttributes } from 'react';
+import {
+  DetailedHTMLProps,
+  forwardRef,
+  ReactNode,
+  Ref,
+  TextareaHTMLAttributes,
+} from 'react';
 import { clsx } from 'clsx';

 type TextAreaProps = {
@@ -12,21 +18,27 @@ type TextAreaProps = {
  HTMLTextAreaElement
 >;

-export default function TextArea({
+const TextArea = forwardRef(function TextArea(
+  {
    className,
    children,
    variant = 'default',
    fullWidth = false,
    ...props
-}: TextAreaProps) {
+  }: TextAreaProps,
+  ref: Ref<HTMLTextAreaElement>,
+) {
  return (
    <div className={clsx(s.Container, fullWidth && s.Container_fullWidth)}>
      <textarea
        {...props}
+        ref={ref}
        className={clsx(className, s.Area, s['Area_' + variant])}
      >
        {children}
      </textarea>
    </div>
  );
-}
+});
+
+export default TextArea;
--- a/src/views/home/ui/contacts/contacts.module.scss
+++ b/src/views/home/ui/contacts/contacts.module.scss
@@ -236,6 +236,11 @@
        margin-left: rem(42px);
      }

+      a:hover {
+        color: #163055;
+        text-decoration: underline;
+      }
+
      .Icon {
        position: absolute;
        top: 0;
--- a/src/views/home/ui/contacts/contacts.tsx
+++ b/src/views/home/ui/contacts/contacts.tsx
@@ -53,11 +53,11 @@ export default function Contacts() {
            </p>
            <p className={s.Address}>
              <Image className={s.Icon} src={phoneCall} alt='' />
-              +7 (988) 400 93 93
+              <a href='tel:+79884009393'>+7 (988) 400-93-93</a>
            </p>
            <p className={s.Address}>
              <Image className={s.Icon} src={email} alt='' />
-              office@firecheck.ru
+              <a href='mailto:spo-71@yandex.ru'>spo-71@yandex.ru</a>
            </p>
          </div>
        </div>
--- a/src/views/home/ui/footer/footer.tsx
+++ b/src/views/home/ui/footer/footer.tsx
@@ -10,9 +10,23 @@ export default function Footer() {
        <FooterForm />

        <div className={s.Bottom}>
-          <Button variant='ghost'>Telegram</Button>
+          <a
+            href='https://wa.me/?phone=79884009393&text=Консультация+по+пожарной+безопасности'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
            <Button variant='ghost'>WhatsApp</Button>
-          <Button variant='ghost'>+7 (999) 123 45 67</Button>
+          </a>
+          <a
+            href='mailto: spo-71@yandex.ru'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Button variant='ghost'>spo-71@yandex.ru</Button>
+          </a>
+          <a href='tel:+79884009393' target='_blank' rel='noopener noreferrer'>
+            <Button variant='ghost'>+7 (988) 400-93-93</Button>
+          </a>
          <p className={s.Policy}>
            <Link href='#'>Политика конфиденциальности</Link>
          </p>
--- a/src/views/home/ui/home.tsx
+++ b/src/views/home/ui/home.tsx
@@ -10,7 +10,7 @@ export default function HomePage() {
    <>
      <Main />
      <Offer />
-      <Result />
+      {/*<Result />*/}
      <License />
      <Contacts />
      <Footer />
--- a/src/views/home/ui/license/license.module.scss
+++ b/src/views/home/ui/license/license.module.scss
@@ -5,17 +5,17 @@
  @include iftablet {
    margin: 0 auto;
    width: rem(712px);
-    padding: 0 0 rem(40px);
+    padding: rem(40px) 0 rem(40px);
  }

  @include iflaptop {
    width: rem(930px);
-    padding: 0 0 rem(60px);
+    padding: rem(60px) 0 rem(60px);
  }

  @include ifdesktop {
    width: rem(1340px);
-    padding: 0 0 rem(160px);
+    padding: rem(160px) 0 rem(160px);
  }

  .Header {
--- a/src/views/home/ui/main/main.tsx
+++ b/src/views/home/ui/main/main.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image';

 import bgStart from '@public/images/bg-start-desktop.jpg';
 import waIcon from '@public/svg/whatsapp.svg';
-import tgIcon from '@public/svg/telegram.svg';
+import emailIcon from '@public/svg/email-icon.svg';
 import callBtn from '@public/svg/phone-calling.svg';

 export default function Main() {
@@ -26,8 +26,20 @@ export default function Main() {
      <div className={s.Header}>
        <div className={s.Logo}>Пожарная экспертиза</div>
        <div className={s.Buttons}>
+          <a
+            href='mailto: spo-71@yandex.ru'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <Image className={s.Icon} src={emailIcon} alt='email' />
+          </a>
+          <a
+            href='https://wa.me/?phone=79884009393&text=Консультация+по+пожарной+безопасности'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
            <Image className={s.Icon} src={waIcon} alt='whatsapp' />
-          <Image className={s.Icon} src={tgIcon} alt='telegram' />
+          </a>
          <Button className={s.Button}>
            <Image src={callBtn} alt='Call' />
            Обратный звонок
@@ -51,7 +63,7 @@ export default function Main() {
          </ul>
        </div>
        <div className={s.Phone}>
-          <p className={s.Title}>+7 988 400 93 93</p>
+          <p className={s.Title}>+7 (988) 400-93-93</p>
          <ConsultationOrder />
        </div>
      </div>
--- a/src/widgets/contacts-form/ui.tsx
+++ b/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>
--- a/src/widgets/footer-form/ui.tsx
+++ b/src/widgets/footer-form/ui.tsx
@@ -3,18 +3,84 @@
 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 />
+      <Controller
+        control={control}
+        name={'name'}
+        render={({ field }) => (
+          <Input
+            {...field}
+            variant='ghost'
+            placeholder={'Ваше имя'}
+            fullWidth
+          />
+        )}
+      />
+      <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
@@ -22,7 +88,9 @@ export default function FooterForm() {
            name='story'
            rows={6}
          />
-      <Button className={s.SendBtn} variant='orange' fullWidth onClick={notify}>
+        )}
+      />
+      <Button className={s.SendBtn} variant='orange' fullWidth>
        Отправить
      </Button>
    </form>
--- a/src/widgets/license-form/ui.tsx
+++ b/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>
--- a/src/widgets/offer-form/ui.tsx
+++ b/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' />
+    <form className={s.RowForm} onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name={'name'}
+        render={({ field }) => (
          <Input
+            {...field}
            className={s.Unit}
            type='text'
            placeholder='Ваше имя'
-        value={name}
-        onChange={(e) => setName(e.target.value)}
          />
-      <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>
--- a/src/widgets/offer-request/ui.tsx
+++ b/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>
  );