graff.estate-nextjs-updated/src/components/Layout/Feedback.tsx

"use client";

import { api } from "@/api";
import { projectsTags } from "@/consts/projectsTags";
import { Product } from "@/types/Product";
import { Button } from "@/ui/Button";
import { CheckboxesGroup } from "@/ui/CheckboxesGroup";
import { getExampleNumber } from "libphonenumber-js";
import examples from "libphonenumber-js/mobile/examples";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChangeEvent, useMemo, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import ReactInputMask from "react-input-mask";
import { Country } from "react-phone-number-input";
import CheckIcon from "../../../public/icons/check.svg";

export function Feedback() {
  const pathname = usePathname();

  return (
    <div
      id="contacts"
      className={`lg:mb-20 md:mb-12 lg:flex lg:gap-[0.833vw] max-lg:space-y-12 justify-between lg:mt-[14.07vh]${
        !pathname.startsWith("/form") ? " mt-[100px]" : ""
      } mb-10`}
    >
      <h2 className="line2 font-medium max-lg:mb-6 lg:max-w-[45%]">
        <span className="text-[#7A7A7A]">Хотите увеличить конверсию?</span>
        <br />
        Давайте обсудим детали.
      </h2>
      <FeedbackForm />
    </div>
  );
}

interface IInput {
  fullname: string;
  phone: string;
  email: string;
  products: Product[];
}

export function FeedbackForm() {
  const [[phoneCode, country], setPhoneCodeAndCountry] = useState<
    [string, Country]
  >(["+7", "RU"]);

  const placeholder = useMemo(
    () =>
      getExampleNumber(country, examples)
        ?.formatInternational()
        .split(" ")
        .slice(1)
        .join(" "),
    [country]
  );

  const form = useForm<IInput>({
    defaultValues: { products: [] },
  });

  const { register, handleSubmit, formState } = form;

  async function onSubmit(data: IInput) {
    await api.post("mail", { json: data }).json();
  }

  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">
                <ReactInputMask
                  type="tel"
                  autoComplete="none"
                  onChange={(e) => {
                    console.log(e.nativeEvent.type);
                    if (e.nativeEvent.type.startsWith("input")) {
                      form.setValue(
                        "phone",
                        ((e.nativeEvent as InputEvent)?.inputType !==
                        "insertFromPaste"
                          ? phoneCode
                          : "") + e.target.value.replaceAll(/ /g, "")
                      );
                    }
                  }}
                  id={"tel"}
                  maskChar={null}
                  mask={"+7 " + (placeholder?.replace(/\d/g, "9") ?? "")}
                  placeholder={"+7 " + placeholder}
                  className="placeholder:btnl placeholder:font-medium placeholder:select-none peer btnl w-full h-full transition-all bg-transparent rounded-none outline-none"
                />
                <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>
                <p className="text2 xl:max-w-[60%] md:max-lg:max-w-[40%] md:max-lg:py-1">
                  <span className="text-[#7A7A7A]">
                    *Нажимая кнопку отправить, вы даете
                  </span>{" "}
                  <Link href={"/privacy-policy"} className="underline">
                    согласие на обработку персональных данных
                  </Link>{" "}
                  <span className="text-[#7A7A7A]">и принимаете </span>
                  <Link href={"/policy"} className="underline">
                    условия политики
                  </Link>
                </p>
              </div>
            </form>
          </FormProvider>
        ) : (
          <div className="bg-[#37393B99] aspect-[643/480] w-full rounded-2xl flex justify-center items-center">
            <div className="flex items-center justify-center gap-3">
              <div className="bg-gradient p-3 rounded-full">
                <CheckIcon className="text-white lg:w-[1.667vw] lg:h-[1.667vw] w-6 h-6" />
              </div>
              <p className="heading2 font-medium">
                Мы получили заявку
                <br />и скоро свяжемся с вами!
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}