janahan-law/components/AutoPopup.js

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

export default function AutoPopup() {
    const [show, setShow] = useState(false);

    useEffect(() => {
        const timer = setTimeout(() => setShow(true), 10000); // Show after 10s
        return () => clearTimeout(timer);
    }, []);

    const { t } = useTranslation("contact");
    const subjectOptions = t("form.subjectOptions", { returnObjects: true });

    const [forms, setForms] = useState({
        name: "",
        email: "",
        service: "",
        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.service,
                message: `Service: ${forms.service}\n\nMessage:\n${forms.message}`,
                to: "info@janahanlaw.com",
                senderName: "Janahan Law",
                recaptchaToken: recaptchaToken,
            };

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

                alert(t("form.successMessage"));
                setShow(false)
                setForms({
                    name: "",
                    email: "",
                    service: "",
                    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 }));
        }
    };

    if (!show) return null;

    return (
        <>

            {/* Backdrop */}
            <div
                className="position-fixed top-0 start-0 w-100 h-100"
                style={{
                    backgroundColor: "rgba(0,0,0,0.5)", // gray transparent background
                    zIndex: 99, // below popup but above page
                }}
                onClick={() => setShow(false)} // click on backdrop closes modal
            ></div>

            {/* Popup */}
            <div
                className="position-fixed top-50 start-50 translate-middle w-100 px-3"
                style={{
                    maxWidth: "600px", // limit on desktop
                    zIndex: 10000,
                }}
            >
                <div className="card shadow-lg">

                    <div className="card-body p-0">
                        <div className=" d-flex justify-content-between g-5 align-items-center p-3">
                            <div>
                                <h3 className="mb-0 " style={{ color: "#c4242a" }}>{t('contactInfo.pageTitle')}</h3>
                                <p className="mb-0">{t('contactInfo.pageSubTitle')}</p>
                            </div>

                            <button
                                type="button"
                                className="btn-close"
                                onClick={() => setShow(false)}
                            ></button>
                        </div>
                        <div style={{ padding: "15px 10px 15px 20px" }}>
                            <form onSubmit={submitHandler} className="contact-validation-active">
                                <div className="row w-100">
                                    <div className="col-6">
                                        <input
                                            value={forms.name}
                                            type="text"
                                            name="name"
                                            onBlur={changeHandler}
                                            onChange={changeHandler}
                                            placeholder={t("form.namePlaceholder")}
                                            className="form-control mb-2"
                                        />
                                        {validator.message("name", forms.name, "required|alpha_space")}
                                    </div>

                                    <div className="col-6">
                                        <input
                                            value={forms.email}
                                            type="email"
                                            name="email"
                                            onBlur={changeHandler}
                                            onChange={changeHandler}
                                            placeholder={t("form.emailPlaceholder")}
                                            className="form-control mb-2"
                                        />
                                        {validator.message("email", forms.email, "required|email")}
                                    </div>

                                    <div className="col-6">
                                        <input
                                            value={forms.phone}
                                            type="phone"
                                            name="phone"
                                            onBlur={changeHandler}
                                            onChange={changeHandler}
                                            placeholder={t("form.phonePlaceholder")}
                                            className="form-control mb-2"
                                        />
                                        {validator.message("phone", forms.phone, "required|phone")}
                                    </div>

                                    <div className="col-6">
                                        <select
                                            onBlur={changeHandler}
                                            onChange={changeHandler}
                                            value={forms.service}
                                            name="service"
                                            className="form-select mb-2"
                                        >
                                            <option value="">{t("form.subjectPlaceholder")}</option>
                                            {Array.isArray(subjectOptions) &&
                                                subjectOptions.map((opt, idx) => (
                                                    <option key={idx}>{opt}</option>
                                                ))}
                                        </select>
                                        {validator.message("service", forms.service, "required")}
                                    </div>

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

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

                                <button type="submit" className="theme-btn  w-100" >
                                    {t("form.submitButton")}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}