Remove unused files and update configuration for environment variables. Refactor feedback forms to use a new lead form component. Adjust API handling and project image resolution logic. Clean up imports and improve code structure across various components.

src/components/Layout/Feedback.tsx

@@ -1,19 +1,8 @@
-import { api } from "@/lib/api";
-import { projectsTags } from "@/consts/projectsTags";
-import type { Product } from "@/types/Product";
-import { Button } from "@/ui/Button";
-import { CheckboxesGroup } from "@/ui/CheckboxesGroup";
-import { PhoneInputRu } from "@/ui/PhoneInputRu";
+import type { Product } from "@/types";
 import useAddReferer from "@/hooks/useAddReferer";
-import { useRefererStore } from "@/stores/useRefererStore";
 import { useModalStore } from "@/stores/useModalStore";
-import {
-  Controller,
-  FormProvider,
-  useForm,
-} from "react-hook-form";
-import CheckIcon from "@/components/icons/CheckIcon";
 import FeedbackModal from "@/components/modals/FeedbackFormModal";
+import { LeadForm } from "@/features/lead-form/LeadForm";
 
 const DEFAULT_STREAM_DEMO_PRODUCTS = [
   "Удаленная демонстрация",
@@ -37,130 +26,16 @@ export function Feedback() {
   );
 }
 
-interface IInput {
-  fullname: string;
-  phone: string;
-  email: string;
-  products: Product[];
-  referer?: string | null;
-}
-
 export function FeedbackForm() {
-  const { referer } = useRefererStore();
   const { setModal } = useModalStore();
 
-  const form = useForm<IInput>({
-    defaultValues: {
-      fullname: "",
-      email: "",
-      phone: "",
-      products: DEFAULT_STREAM_DEMO_PRODUCTS,
-    },
-  });
-
-  const { register, handleSubmit, formState, control } = form;
-
-  async function onSubmit(data: IInput) {
-    const { id } = await api
-      .post("mail", { json: { ...data, referer } })
-      .json<{ id: string }>();
-    setModal(<FeedbackModal id={id} />);
-  }
-
   return (
     <div className="flex-1 space-y-4 lg:max-w-[47.431vw]">
       <div className="space-y-10">
-        {!formState.isSubmitted ? (
-          <FormProvider {...form}>
-            <form
-              className="lg:space-y-[1.944vw] md:max-lg:space-y-7 space-y-3"
-              onSubmit={handleSubmit(onSubmit)}
-            >
-              <div className="lg:space-y-[1.111vw] space-y-4">
-                <p className="heading2 font-medium">Нам нужно</p>
-                <CheckboxesGroup name="products" options={projectsTags} />
-              </div>
-              <input
-                id="name"
-                autoComplete="none"
-                type="text"
-                required
-                placeholder="Имя*"
-                {...register("fullname")}
-                className="bg-transparent border-b border-[#37393B] focus:border-white py-4 rounded-none outline-none transition-all w-full placeholder:btnl btnl placeholder:font-medium placeholder:select-none"
-              />
-              <input
-                autoComplete="none"
-                required
-                id="email"
-                type="email"
-                placeholder="Email*"
-                {...register("email")}
-                className="bg-transparent border-b border-[#37393B] focus:border-white py-4 rounded-none btnl outline-none transition-all w-full placeholder:btnl placeholder:font-medium placeholder:select-none"
-              />
-              <div className="flex gap-x-3 py-2 border-[#3D425C] relative">
-                <Controller
-                  name="phone"
-                  control={control}
-                  rules={{ required: true }}
-                  render={({ field }) => (
-                    <PhoneInputRu
-                      value={field.value}
-                      onChange={field.onChange}
-                      onBlur={field.onBlur}
-                      inputRef={field.ref}
-                    />
-                  )}
-                />
-                <div className="bottom-0 absolute w-full border-b border-[#37393B] peer-focus:border-white -mb-2" />
-              </div>
-              <div className="md:flex items-stretch lg:gap-[0.833vw] gap-3">
-                <Button
-                  type="submit"
-                  className="btnl max-md:mb-3 max-md:w-full lg:px-[2.222vw] lg:py-[1.389vw] px-8 py-5 cursor-pointer lg:rounded-[1.111vw] rounded-2xl"
-                >
-                  Оставить заявку
-                </Button>
-                <div className="text2 xl:max-w-[60%] md:max-lg:max-w-[40%] md:max-lg:py-1">
-                  <span className="text-[#7A7A7A]">
-                    *Нажимая кнопку отправить, вы даете
-                  </span>{" "}
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={"/privacy-policy"}
-                    className="underline"
-                  >
-                    согласие на обработку персональных данных
-                  </a>{" "}
-                  <span className="text-[#7A7A7A]">и принимаете </span>
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={"/policy"}
-                    className="underline"
-                  >
-                    условия политики
-                  </a>
-                </div>
-              </div>
-            </form>
-          </FormProvider>
-        ) : (
-          <div className="bg-[#37393B99] aspect-[643/480] w-full rounded-2xl flex justify-center items-center">
-            <div className="flex gap-3 justify-center items-center">
-              <div className="bg-gradient p-3 rounded-full">
-                <div className="text-white lg:size-[1.667vw] size-6">
-                  <CheckIcon />
-                </div>
-              </div>
-              <p className="heading2 font-medium">
-                Мы получили заявку
-                <br />и скоро свяжемся с вами!
-              </p>
-            </div>
-          </div>
-        )}
+        <LeadForm
+          defaultProducts={DEFAULT_STREAM_DEMO_PRODUCTS}
+          onSuccess={(id) => setModal(<FeedbackModal id={id} />)}
+        />
       </div>
     </div>
   );

src/components/Layout/LineBreak.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 interface BRProps {
   lg?: boolean;
   md?: boolean;