estate-landing-page/client/src/components/FeedbackForm.tsx

import { FormEvent, useState } from "react";
import api from "../utils/api";
import InputMask from "react-input-mask";
import useModalStore from "../store/modal";
import FeedbackFormSuccess from "./FeedbackFormSuccess";
import { Trans } from "react-i18next";
import i18n from "../i18n";
import Title from "./Title";

function FeedbackForm() {
  const [modalComponent, setModalComponent] = useModalStore((state) => [
    state.component,
    state.setComponent,
  ]);
  const [fullname, setFullname] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [phone, setPhone] = useState<string>("");
  const [request, setRequest] = useState<string>("");

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

    const result: any = await api
      .post("mail", {
        json: {
          fullname,
          email,
          phone,
          request,
        },
      })
      .json();

    if (result.ok) {
      setFullname("");
      setEmail("");
      setPhone("");
      setRequest("");

      setModalComponent(<FeedbackFormSuccess />);
    } else {
      alert("Error sending, please try again later.");
    }
  }

  return (
    <div className="fixed top-0 left-0 w-full h-full overflow-y-auto">
      <div className="lg:p-8 sm:p-6 p-4 w-full min-h-full relative flex flex-col justify-center items-center">
        <div className="space-y-8 bg-[#131317] 2xl:p-16 xl:p-12 lg:p-8 p-4 rounded-xl 2xl:w-[1280px] xl:w-[1024px] lg:w-[768px] w-full">
          <Title>
            <Trans i18nKey={"contactUsHeading"}>Свяжитесь с нами</Trans>
          </Title>

          <form
            onSubmit={handleSubmitSendMail}
            className="xl:space-y-12 lg:space-y-10 space-y-8"
          >
            <div className="xl:space-y-8 lg:space-y-6 space-y-4">
              <div className="space-y-2">
                <p className="lg:text-xl sm:text-lg text-[#8088A7]">
                  <Trans i18nKey={"contactUsLabelName"}>Имя*</Trans>
                </p>
                <input
                  required
                  type="text"
                  value={fullname}
                  onChange={(e) => setFullname(e.target.value)}
                  className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full"
                />
              </div>

              <div className="space-y-2">
                <p className="text-xl text-[#8088A7]">Email*</p>
                <input
                  required
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full"
                />
              </div>

              <div className="space-y-2">
                <p className="lg:text-xl sm:text-lg text-[#8088A7]">
                  <Trans i18nKey={"contactUsLabelPhone"}>Телефон</Trans>
                </p>
                <InputMask
                  mask={"+999999999999999"}
                  maskChar={null}
                  type="text"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full"
                />
              </div>

              <div className="space-y-2">
                <p className="lg:text-xl sm:text-lg text-[#8088A7]">
                  <Trans i18nKey={"contactUsLabelRequest"}>Ваш запрос</Trans>
                </p>
                <textarea
                  value={request}
                  onChange={(e) => setRequest(e.target.value)}
                  className="bg-[#212431] xl:p-4 lg:p-3 p-2 border border-transparent focus:border-[#BC75FF] outline-none transition-colors rounded w-full lg:h-52 h-36 resize-none"
                ></textarea>
              </div>
            </div>

            <div className="2xl:text-xl sm:text-base text-sm flex items-center space-x-4">
              <div>
                <input
                  required
                  type="checkbox"
                  defaultChecked={true}
                  className="absolute opacity-0 h-10 w-10 cursor-pointer"
                />
                <div className="bg-[#212431] rounded-lg h-10 w-10 p-1">
                  <svg
                    width="32"
                    height="32"
                    viewBox="0 0 32 32"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="hidden"
                  >
                    <path
                      d="M6.6665 14.6667L13.3332 21.3334L25.3332 10.6667"
                      stroke="#F2F2F2"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
              </div>
              <div>
                <span className="text-[#8088A7] text-opacity-50">
                  <Trans i18nKey="contactUsCheckboxText1">Я согласен с</Trans>
                </span>{" "}
                <a href="https://graff.tech/privacypolicy" target="_blank">
                  <Trans i18nKey="contactUsCheckboxText2">
                    политикой конфиденциальности
                  </Trans>
                </a>
              </div>
            </div>

            <button
              type="submit"
              className="2xl:text-3xl sm:text-2xl lg:text-lg w-full xl:px-8 lg:px-6 px-4 xl:py-4 lg:py-3 py-2 bg-gradient-to-tr from-[#BC75FF] to-[#798FFF] rounded-full opacity-95 hover:opacity-100 transition-opacity"
            >
              <Trans i18nKey="contactUsBtn">Отправить заявку</Trans>
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default FeedbackForm;