janahan-law/components/ContactFrom/ContactForm.js

"use client";
import React, { useState, useRef } from "react";
import SimpleReactValidator from "simple-react-validator";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import { useTranslation } from 'next-i18next';

const ContactForm = () => {
  const { t } = useTranslation("contact");
  const subjectOptions = t("form.subjectOptions", { returnObjects: true });
  const [forms, setForms] = useState({
    name: "",
    email: "",
    subject: "",
    phone: "",
    message: "",
  });

  const [validator] = useState(
    new SimpleReactValidator({
      className: "errorMessage",
    })
  );

  const recaptchaRef = useRef(null);
  const [recaptchaToken, setRecaptchaToken] = useState(null);

  const RECAPTCHA_SITEKEY = "6Lc5wKUrAAAAAKqIviSUY2PsqLQ8Bq8CJJaHFA_f";

  const changeHandler = (e) => {
    const { name, value } = e.target;
    setForms({ ...forms, [name]: value });

    if (validator.allValid() && recaptchaToken) {
      validator.hideMessages();
    } else {
      validator.showMessages();
    }
  };

  const handleRecaptcha = (token) => {
    setRecaptchaToken(token);
    if (validator.allValid() && token) {
      validator.hideMessages();
    }
  };

  const submitHandler = async (e) => {
    e.preventDefault();

    if (validator.allValid() && recaptchaToken) {
      validator.hideMessages();

      const emailPayload = {
        name: forms.name,
        email: forms.email,
        phone: forms.phone,
        subject: forms.subject,
        message: `Subject: ${forms.subject}\n\nMessage:\n${forms.message}`,
        to: "your-receiving-email@example.com",
        senderName: "Website Contact Form",
        recaptchaToken: recaptchaToken,
      };

      try {

        const response = await axios.post(
          "https://mailserver.metatronnest.com/send",
          emailPayload,
          { headers: { "Content-Type": "application/json" } }
        );

        alert(t("form.successMessage"));

        setForms({
          name: "",
          email: "",
          subject: "",
          phone: "",
          message: "",
        });

        validator.hideMessages();

        if (recaptchaRef.current) {
          try {
            recaptchaRef.current.reset();
          } catch (err) {
          }
        }
        setRecaptchaToken(null);
      } catch (err) {
        alert(t("form.failedMessage"));
      }
    } else {
      validator.showMessages();
      setForms((prev) => ({ ...prev }));
    }
  };

  return (
    <form onSubmit={(e) => submitHandler(e)} className="contact-validation-active">
      <div className="row">
        <div className="col col-lg-6 col-12">
          <div className="form-field">
            <input
              value={forms.name}
              type="text"
              name="name"
              onBlur={changeHandler}
              onChange={changeHandler}
              placeholder={t("form.namePlaceholder")}
            />
            {validator.message(
              "name",
              forms.name,
              "required|alpha_space",
              { messages: { required: t("form.requiredMessages.name") } }
            )}
          </div>
        </div>

        <div className="col col-lg-6 col-12">
          <div className="form-field">
            <input
              value={forms.email}
              type="email"
              name="email"
              onBlur={changeHandler}
              onChange={changeHandler}
              placeholder={t("form.emailPlaceholder")}
            />
            {validator.message(
              "email",
              forms.email,
              "required|email",
              { messages: { required: t("form.requiredMessages.email") } }
            )}
          </div>
        </div>

        <div className="col col-lg-6 col-12">
          <div className="form-field">
            <input
              value={forms.phone}
              type="phone"
              name="phone"
              onBlur={changeHandler}
              onChange={changeHandler}
              placeholder={t("form.phonePlaceholder")}
            />
            {validator.message(
              "phone",
              forms.phone,
              "required|phone",
              { messages: { required: t("form.requiredMessages.phone") } }
            )}
          </div>
        </div>

        <div className="col col-lg-6 col-12">
          <div className="form-field">
            <select
              onBlur={changeHandler}
              onChange={changeHandler}
              value={forms.subject}
              name="subject"
            >
              <option value="">{t("form.subjectPlaceholder")}</option>
              {Array.isArray(subjectOptions) &&
                subjectOptions.map((opt, idx) => (
                  <option key={idx}>{opt}</option>
                ))}
            </select>

            {validator.message(
              "subject",
              forms.subject,
              "required",
              { messages: { required: t("form.requiredMessages.subject") } }
            )}
          </div>
        </div>


        <div className="col col-lg-12 col-12">
          <textarea
            onBlur={changeHandler}
            onChange={changeHandler}
            value={forms.message}
            name="message"
            placeholder={t("form.messagePlaceholder")}
          ></textarea>
          {validator.message(
            "message",
            forms.message,
            "required",
            { messages: { required: t("form.requiredMessages.message") } }
          )}
        </div>

        <div className="col col-lg-12 col-12" style={{ marginTop: 12 }}>
          <ReCAPTCHA
            ref={recaptchaRef}
            sitekey={RECAPTCHA_SITEKEY}
            onChange={handleRecaptcha}
          />
          {!recaptchaToken &&
            <div className="errorMessage">{t("form.requiredMessages.recaptcha")}</div>
          }
        </div>
      </div>

      <div className="submit-area" style={{ marginTop: 12 }}>
        <button type="submit" className="theme-btn">
          {t("form.submitButton")}
        </button>
      </div>
    </form>
  );
};

export default ContactForm;