graff.estate-nextjs/src/components/FeedbackForm.tsx

import { ChangeEvent, FormEvent, useState } from "react";
import InputMask from "react-input-mask";
import AsteriskIcon from "./icons/AsteriskIcon";
import SendIcon from "./icons/SendIcon";
import CheckGradientIcon from "./icons/CheckGradientIcon";
import LoaderIcon from "./icons/LoaderIcon";
import Button from "./Button";
import api from "../utils/api";

function FeedbackForm() {
  const [name, setName] = useState<string>("");
  const [phone, setPhone] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [description, setDescription] = useState<string>("");
  const [isSend, setIsSend] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  async function sendMail(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();

    setIsLoading(true);

    try {
      await api
        .post("mail", {
          json: {
            fullname: name,
            phone,
            email,
            request: description,
          },
        })
        .json();

      setIsSend(true);
      setIsLoading(false);
    } catch (error) {
      setIsLoading(false);
      if (error instanceof Error) {
        alert(error.message);
      }
    }
  }

  return (
    <form
      className="grid lg:grid-cols-3 sm:grid-cols-2 relative"
      onSubmit={(e) => void sendMail(e)}
    >
      <div className="relative col-span-1">
        <input
          required
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="feedback-field bg-transparent border border-[#3D425C] rounded-none lg:p-6 lg:pt-14 p-4 pt-12 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
        />
        <p className="feedback-placeholder lg:text-base text-sm absolute lg:top-4 top-5 left-0 w-full lg:p-6 p-4 opacity-50 transition-all pointer-events-none flex justify-between">
          <span>Имя</span>
          <AsteriskIcon />
        </p>
      </div>

      <div className="relative">
        <InputMask
          required
          type="tel"
          mask={"+999999999999999"}
          maskChar={null}
          value={phone}
          onChange={(e: ChangeEvent<HTMLInputElement>) =>
            setPhone(e.target.value)
          }
          className={[
            "feedback-field bg-transparent border rounded-none sm:border-l-0 sm:border-t border-t-0 border-l border-[#3D425C] lg:p-6 lg:pt-14 p-4 pt-12 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full",
          ].join(" ")}
        />
        <p className="feedback-placeholder lg:text-base text-sm absolute lg:top-4 top-5 left-0 w-full lg:p-6 p-4 opacity-50 transition-all pointer-events-none flex justify-between">
          <span>Телефон</span>
          <AsteriskIcon />
        </p>
      </div>

      <div className="relative lg:col-span-1 sm:col-span-2 col-span-1">
        <input
          required
          type="text"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="feedback-field bg-transparent border rounded-none lg:border-l-0 lg:border-t border-t-0 border-[#3D425C] lg:p-6 lg:pt-14  p-4 pt-12 outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
        />
        <p className="feedback-placeholder lg:text-base text-sm absolute lg:top-4 top-5 left-0 w-full lg:p-6 p-4 opacity-50 transition-all pointer-events-none flex justify-between">
          <span>Email</span>
          <AsteriskIcon />
        </p>
      </div>

      <div className="relative lg:col-span-3 sm:col-span-2 h-[194px]">
        <textarea
          placeholder="Опишите вашу задачу"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          className="feedback-field bg-transparent resize-none border rounded-none border-t-0 border-[#3D425C] lg:p-6 p-4 h-full outline-none outline-1 -outline-offset-1 focus:outline-[#D375FF] transition-all w-full"
        ></textarea>
      </div>

      <div className="2xl:pt-6 2xl:pr-6 pt-4 sm:pr-4 lg:order-none order-last flex items-center">
        <Button
          width="full"
          disabled={isLoading}
          icon={
            isLoading ? (
              <LoaderIcon className="relative 2xl:w-8 2xl:h-8 w-6 h-6 animate-spin" />
            ) : (
              <SendIcon className="relative 2xl:w-8 2xl:h-8 w-6 h-6" />
            )
          }
          className="py-4"
        >
          Отправить
        </Button>
      </div>

      <div className="border sm:border-t-0 border-t border-[#3D425C] 2xl:p-6 p-4 sm:mt-0 mt-6 flex items-center">
        <div className="text-xs leading-tight">
          Нажимая кнопку отправить, вы принимаете{" "}
          <a
            href="https://graff.tech/privacypolicy"
            target="_blank"
            className="text-[#798FFF] cursor-pointer opacity-95 hover:opacity-100 transition-all"
          >
            условия использования
          </a>{" "}
          и{" "}
          <a
            href="https://graff.tech/privacypolicy"
            target="_blank"
            className="text-[#798FFF] cursor-pointer opacity-95 hover:opacity-100 transition-all"
          >
            политику конфиденциальности
          </a>
        </div>
      </div>

      <div className="border border-t-0 sm:border-l-0 border-[#3D425C] 2xl:p-6 p-4 text-xs flex items-center gap-2">
        <div className="flex gap-2">
          <div className="">
            <AsteriskIcon />
          </div>
          <p>—</p>
          <p className="leading-tight">
            Звездочкой отмечены обязательные
            <br />
            для заполнения поля
          </p>
        </div>
      </div>

      {isSend && (
        <div className="absolute top-0 left-0 w-full h-full bg-[#14161F] border border-[#3D425C] p-6 flex flex-col justify-between">
          <p className="text-gradient text-xl font-gilroy leading-tight font-semibold flex items-center gap-2">
            <span>Заявка отправлена</span>
            <CheckGradientIcon className="lg:w-8 lg:h-8 w-6 h-6" />
          </p>

          <div className="flex flex-col gap-2">
            <p className="font-gilroy leading-snug lg:text-2xl text-xl font-semibold">
              Спасибо за подачу заявки!
            </p>

            <p className="lg:w-1/2 sm:w-2/3 lg:text-base text-sm">
              Мы ценим ваш интерес к нашей компании и в ближайшее время свяжемся
              с вами для уточнения деталей проекта.
            </p>
          </div>
        </div>
      )}
    </form>
  );
}

export default FeedbackForm;