mediahub-fe/app/[locale]/(public)/contact/page.tsx

"use client";
import { Reveal } from "@/components/landing-page/Reveal";
import { getCookiesDecrypt } from "@/lib/utils";
import React, { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { getInfoProfile, getSubjects } from "@/service/auth";
import { close, error, loading, successCallback } from "@/config/swal";
import { sendMessage } from "@/service/landing/landing";
import { useTranslations } from "next-intl";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "@/i18n/routing";

interface IFormInput {
  name: string;
  email: string;
  phone?: string | undefined;
  subjects: string;
  othersubject?: string | undefined;
  message: string;
}

const ContactForm = () => {
  const router = useRouter();
  const userId = getCookiesDecrypt("uie");
  const [subjects, setSubjects] = useState<any[]>([]);
  const [isOtherActive, setIsOtherActive] = useState(false);
  const t = useTranslations("LandingPage");

  const validationSchema = z.object({
    name: z.string().min(1, "Nama tidak boleh kosong"),
    email: z.string().email("Email tidak valid"),
    phone: z.string().optional(),
    subjects: z.string().min(1, "Subjek tidak boleh kosong"),
    othersubject: z.string().optional(),
    message: z.string().min(1, "Pesan tidak boleh kosong"),
  });

  type IFormInput = z.infer<typeof validationSchema>;

  const {
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    reset,
  } = useForm<IFormInput>({
    resolver: zodResolver(validationSchema),
  });

  // Init state
  useEffect(() => {
    async function initState() {
      const response = await getInfoProfile();
      const responseSubject = await getSubjects();
      const profile = response?.data?.data;

      setSubjects(responseSubject?.data?.data || []);
      if (profile) {
        setValue("name", profile?.fullname || "");
        setValue("email", profile?.email || "");
      }
    }

    initState();
  }, [setValue]);

  async function save(data: IFormInput) {
    loading();

    const finalData = {
      name: data.name,
      email: data.email,
      phone: data.phone,
      title: isOtherActive ? data.othersubject : data.subjects,
      message: data.message,
    };

    const response = await sendMessage(finalData);
    if (response?.error) {
      error(response?.message);
      return;
    }

    close();
    successCallback("Terima kasih, pesan Anda telah terkirim");
    reset();
  }

  async function onSubmit(data: IFormInput) {
    if (userId == undefined) {
      router.push("/auth");
    } else {
      save(data);
    }
  }

  const handleSubjects = (e: React.ChangeEvent<HTMLSelectElement>) => {
    if (e.target.value === "Lainnya") {
      setIsOtherActive(true);
    } else {
      setIsOtherActive(false);
    }
  };

  return (
    <form
      method="POST"
      onSubmit={handleSubmit(onSubmit)}
      className="max-w-2xl mx-auto bg-white dark:bg-black p-6"
    >
      <Reveal>
        {/* Header */}
        <div className="flex items-center justify-center mb-6">
          <img src="/assets/icons-contact.png" alt="contact" />
          <h2 className="ml-4 text-2xl font-bold">
            {t("contactUs", { defaultValue: "Contact Us" })}
          </h2>
        </div>
        <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-1">
          {t("writeMessage", { defaultValue: "Write Message" })}
        </h3>
        <p className="text-sm text-gray-600 dark:text-white mb-6">
          {t("leaveMessage", { defaultValue: "Leave Message" })}
        </p>

        {/* Form */}
        <div>
          {/* Name */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
              {t("name", { defaultValue: "Name" })}
            </label>
            <input
              type="text"
              placeholder={t("enterName", { defaultValue: "Enter Name" })}
              className={`w-full p-2 border rounded-md focus:outline-none focus:ring-2 ${
                errors.name
                  ? "border-red-500 focus:ring-red-500"
                  : "border-gray-300 focus:ring-blue-500"
              }`}
              {...register("name")}
            />
            {errors.name && (
              <p className="text-red-500 text-sm">{errors.name.message}</p>
            )}
          </div>

          {/* Email */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
              Email
            </label>
            <input
              type="email"
              placeholder="name@mail.com"
              className={`w-full p-2 border rounded-md focus:outline-none focus:ring-2 ${
                errors.email
                  ? "border-red-500 focus:ring-red-500"
                  : "border-gray-300 focus:ring-blue-500"
              }`}
              {...register("email")}
            />
            {errors.email && (
              <p className="text-red-500 text-sm">{errors.email.message}</p>
            )}
          </div>

          {/* Phone */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
              {t("number", { defaultValue: "Number" })} (Optional)
            </label>
            <input
              type="text"
              placeholder={t("enterNumber", { defaultValue: "Enter Number" })}
              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              {...register("phone")}
            />
          </div>

          {/* Subjects */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
              {t("subject", { defaultValue: "Subject" })}
            </label>
            <select
              className={`w-full p-2 border rounded-md focus:outline-none focus:ring-2 ${
                errors.subjects
                  ? "border-red-500 focus:ring-red-500"
                  : "border-gray-300 focus:ring-blue-500"
              }`}
              {...register("subjects", { onChange: (e) => handleSubjects(e) })}
              defaultValue=""
            >
              <option value="" disabled>
                {t("selectSubject", { defaultValue: "Select Subject" })}
              </option>
              {subjects?.map((list: any) => (
                <option key={list.id} value={list.title}>
                  {list.title}
                </option>
              ))}
              <option value="Lainnya">Lainnya</option>
            </select>
            {errors.subjects && (
              <p className="text-red-500 text-sm">{errors.subjects.message}</p>
            )}
          </div>

          {/* Other Subject */}
          {isOtherActive && (
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
                Subjek Lainnya
              </label>
              <input
                type="text"
                placeholder="Masukkan subjek lainnya"
                className={`w-full p-2 border rounded-md focus:outline-none focus:ring-2 ${
                  errors.othersubject
                    ? "border-red-500 focus:ring-red-500"
                    : "border-gray-300 focus:ring-blue-500"
                }`}
                {...register("othersubject")}
              />
              {errors.othersubject && (
                <p className="text-red-500 text-sm">
                  {errors.othersubject.message}
                </p>
              )}
            </div>
          )}

          {/* Message */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
              {t("messages", { defaultValue: "Messages" })}
            </label>
            <textarea
              placeholder={t("writeYourMessage", {
                defaultValue: "Write Your Message",
              })}
              rows={4}
              className={`w-full p-2 border rounded-md focus:outline-none focus:ring-2 ${
                errors.message
                  ? "border-red-500 focus:ring-red-500"
                  : "border-gray-300 focus:ring-blue-500"
              }`}
              {...register("message")}
            ></textarea>
            {errors.message && (
              <p className="text-red-500 text-sm">{errors.message.message}</p>
            )}
          </div>

          <button
            type="submit"
            className="w-fit bg-blue-500 flex justify-self-end text-white p-2 px-8 rounded-md hover:bg-blue-600 transition"
          >
            {t("send", { defaultValue: "Send" })}
          </button>
        </div>
      </Reveal>
    </form>
  );
};

export default ContactForm;