procurement-frontend2/src/app/[locale]/contacts/page.tsx

"use client";
import { apiInstance } from "@/shared/config/apiConfig";
import { Container, Title } from "@/shared/ui";
import Loader from "@/shared/ui/Loader/Loader";
import { zodResolver } from "@hookform/resolvers/zod";
import { AxiosError } from "axios";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import { z } from "zod";

export default function Contacts() {
  const t = useTranslations("contacts");
  const [error, setError] = useState<string>("");
  const [loader, setLoader] = useState<boolean>(false);

  const appealFormScheme = z.object({
    first_name: z.string(),
    last_name: z.string(),
    email: z.string(),
    phone_number: z.string(),
    message: z.string(),
  });

  type FormFields = z.infer<typeof appealFormScheme>;

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormFields>({
    resolver: zodResolver(appealFormScheme),
  });

  const onSubmit = async (data: FormFields) => {
    try {
      setError("");
      setLoader(true);

      const response = await apiInstance.post("/appeal_response/", data);
      console.log(response);
      toast.success(t("successMessage"));
    } catch (error) {
      if (error instanceof AxiosError) {
        if (
          [500, 501, 502, 503, 504].includes(error.response?.status as number)
        ) {
          toast.error(t("serverError"));
        }
      }
    } finally {
      setLoader(false);
    }
  };
  return (
    <section className="bg-[#FAFCFF]">
      <Container className="py-[100px] ">
        <iframe
          className="w-full h-[403px] object-cover"
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d365.45703047807825!2d74.58569311654689!3d42.88009923942027!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389ec9b187c8ff21%3A0xa3266b2f825613d5!2sTransparency%20International%20Kyrgyzstan!5e0!3m2!1sru!2skg!4v1716976752985!5m2!1sru!2skg"
        ></iframe>
        <section className="flex items-center justify-between mb-[152px] mt-[64px]">
          <div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
            <Title text={t("addressTitle")} className="font-extrabold mb-2" />
            <p className="text-grey-text">{t("address")}</p>
          </div>
          <div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
            <Title text={t("phoneTitle")} className="font-extrabold mb-2" />
            <p className="text-grey-text">(0312) 39 40 38</p>
          </div>
          <div className="max-w-[384px] max-h-[106px] flex flex-col items-center px-7">
            <Title text="Email" className="font-extrabold mb-2" />
            <p className="text-grey-text">kyrgyzstan@transparency.org</p>
          </div>
        </section>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="w-[480px] my-0 mx-auto"
        >
          <div className="flex items-center flex-col mt-[96px] mb-[96px]">
            <h1 className="text-gray-900 text-[36px]">{t("title")}</h1>
            <div className="flex flex-col items-center gap-6 mt-[64px]">
              <div className="flex gap-8 w-full">
                <div className="w-[224px] flex flex-col">
                  <label htmlFor="firstName" className="mb-[6px]">
                    {t("name")}
                  </label>
                  <input
                    type="text"
                    className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
                    placeholder={t("name")}
                    id="firstName"
                    required
                    {...register("first_name", { required: true })}
                  />
                </div>
                <div className="w-[224px] flex flex-col">
                  <label htmlFor="lastName" className="mb-[6px]">
                    {t("surname")}
                  </label>
                  <input
                    type="text"
                    className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
                    placeholder={t("surname")}
                    id="lastName"
                    required
                    {...register("last_name", { required: true })}
                  />
                </div>
              </div>
              <div className="w-full">
                <label htmlFor="email" className="mb-[6px]">
                  Email
                </label>
                <input
                  type="text"
                  placeholder="user@gmail.com"
                  className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
                  id="email"
                  {...register("email", { required: true })}
                />
              </div>

              <div className="w-full">
                <label htmlFor="phoneNumber" className="mb-[6px]">
                  {t("phone")}
                </label>
                <input
                  type="text"
                  className="w-full h-[48px] bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
                  placeholder="+996"
                  id="phoneNumber"
                  required
                  {...register("phone_number", { required: true })}
                />
              </div>

              <div className="w-full">
                <label htmlFor="message" className="mb-[6px]">
                  {t("message")}
                </label>
                <textarea
                  className="h-[120px] resize-none w-full bg-white py-3 px-4 rounded-md shadow-sm border border-gray"
                  id="message"
                  required
                  {...register("message", { required: true })}
                ></textarea>
              </div>

              <div className="w-full">
                <input
                  className="border-none"
                  type="checkbox"
                  id="consentCheckbox"
                  name="consent"
                  required
                />
                <label
                  htmlFor="consentCheckbox"
                  className="text-[#667085] ml-[10px]"
                >
                  {t("checkbox")}
                </label>
              </div>
              {errors.root && (
                <p className="text-sm leading-5 text-red-500">
                  {errors.root.message}
                </p>
              )}
              {error ? (
                <p className="text-red-500 leading-5 text-sm">{error}</p>
              ) : null}

              <div className="w-full">
                <button
                  type="submit"
                  className="bg-blue text-white w-full h-[48px] rounded-md "
                >
                  {loader ? <Loader /> : t("send")}
                </button>
              </div>
            </div>
          </div>
        </form>
      </Container>
    </section>
  );
}