fix: update form

src/widgets/advanced-phone-input/advanced-phone-input.module.scss

@@ -0,0 +1,41 @@
+.Container {
+  position: relative;
+}
+
+.Phone {
+  width: 100%;
+  position: relative;
+  z-index: 2;
+
+  @include iftablet{
+  }
+  @include iflaptop{
+    padding-left: rem(16px);
+  }
+  @include ifdesktop{
+    padding-left: rem(32px);
+  }
+}
+
+.Button {
+  position: absolute;
+  z-index: 3;
+  right: rem(2px);
+  top: calc(50% - 1.2rem);
+  min-height: calc(100% - .25rem);
+
+  @include iftablet{
+    top: calc(50% - 1.2rem);
+    right: rem(3px);
+  }
+
+  @include iflaptop{
+    top: calc(50% - 1.4rem);
+    right: rem(4px);
+  }
+
+  @include ifdesktop{
+    top: calc(50% - 1.6rem);
+    right: rem(2px);
+  }
+}

src/widgets/advanced-phone-input/advanced-phone-input.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import s from './advanced-phone-input.module.scss';
+import { clsx } from 'clsx';
+import { Button, PhoneInput } from '@shared/ui';
+import { z } from 'zod';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import toast from 'react-hot-toast';
+import { sendFormFn } from '@shared/api/api.service';
+import { isValidPhoneNumber } from 'libphonenumber-js/min';
+
+type AdvancedPhoneInputProps = {
+  containerClassName?: string;
+};
+
+const FormSchema = z.object({
+  phone: z.string().refine(isValidPhoneNumber, 'Некорректный номер телефона'),
+});
+type TForm = z.infer<typeof FormSchema>;
+
+const defaultValues = {
+  phone: '',
+};
+
+export default function AdvancedPhoneInput({
+  containerClassName,
+}: AdvancedPhoneInputProps) {
+  const {
+    handleSubmit,
+    control,
+    reset,
+    clearErrors,
+    formState: { errors },
+  } = useForm<TForm>({
+    resolver: zodResolver(FormSchema),
+    defaultValues,
+  });
+
+  const onSubmit = async (data: TForm) => {
+    const payload = {
+      ...data,
+      form: 'offer-request-form-desktop',
+    };
+
+    try {
+      await sendFormFn(payload);
+      toast.success('Заявка на консультацию принята');
+      reset(defaultValues);
+    } catch (e) {
+      toast.error('Ошибка при отправке заявки...', {
+        duration: 3000,
+      });
+    }
+  };
+
+  return (
+    <form
+      className={clsx(containerClassName, s.Container)}
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <Controller
+        control={control}
+        name={'phone'}
+        render={({ field }) => (
+          <PhoneInput
+            {...field}
+            className={s.Phone}
+            placeholder={'+7 (999) 123-45-67'}
+            onChange={(e) => {
+              clearErrors('phone');
+              field.onChange(e);
+            }}
+            error={errors && errors.phone?.message}
+            errorTextColor={'#ff9191'}
+          />
+        )}
+      />
+      <Button className={s.Button} variant='orange'>
+        Отправить заявку
+      </Button>
+    </form>
+  );
+}

src/widgets/advanced-phone-input/index.ts

@@ -0,0 +1 @@
+export { default as AdvancedPhoneInput } from './advanced-phone-input';