diff --git a/pages/faq.js b/pages/faq.js index df6baf7..f2876cc 100644 --- a/pages/faq.js +++ b/pages/faq.js @@ -1,11 +1,12 @@ -import Accordion from 'react-bootstrap/Accordion'; -import React, { useState } from "react"; +import Accordion from "react-bootstrap/Accordion"; +import React, { useState, useEffect } from "react"; import Layout from "@/src/layout/Layout"; import Link from "next/link"; - import Ffaq from "@/src/components/services-details-banner/ffaq.js"; -import SubCard from '@/src/components/AboveFooter'; -import ConsenHead from '@/src/ConsenHead'; +import SubCard from "@/src/components/AboveFooter"; +import ConsenHead from "@/src/ConsenHead"; +import ReCAPTCHA from "react-google-recaptcha"; +import axios from "axios"; @@ -28,7 +29,7 @@ const Faq = () => { Cross-platform apps (like Flutter or React Native) deliver near-native performance with the advantage of working on both Android and iOS.
  • - Our experts help you choose the right approach based on your budget, goals, and target audience. + Our experts help you choose the right approach based on your budget, goals, and target audience.
    • ), @@ -70,6 +71,93 @@ const Faq = () => { const [active, setActive] = useState(faqsDataPart1[0].id); const [data, setData] = useState(faqDataPart1[0].id); + // ------------------ CONTACT FORM LOGIC ------------------ + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + service: "", + message: "", + }); + const [formErrors, setFormErrors] = useState({}); + const [captchaToken, setCaptchaToken] = useState(null); + const [alert, setAlert] = useState({ show: false, type: "", message: "" }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleCaptchaChange = (token) => { + setCaptchaToken(token); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + const errors = {}; + if (!formData.name.trim()) errors.name = "Name is required."; + if (!formData.email.trim()) errors.email = "Email is required."; + if (!formData.phone.trim()) errors.phone = "Phone is required."; + if (!formData.service.trim()) errors.service = "Please select a service."; + if (!formData.message.trim()) errors.message = "Message is required."; + if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; + setFormErrors(errors); + + if (Object.keys(errors).length > 0) return; + + const emailData = { + name: formData.name, + email: formData.email, + phone: formData.phone, + subject: formData.web || "FAQ Contact Form", + message: `Service: ${formData.service}

    Message: ${formData.message}`, + to: "info@metatroncubesolutions.com", + senderName: "Metatroncube FAQ Page", + recaptchaToken: captchaToken, + }; + + try { + const res = await axios.post( + "https://mailserver.metatronnest.com/send", + emailData, + { headers: { "Content-Type": "application/json" } } + ); + + setAlert({ + show: true, + type: "success", + message: res?.data?.message || "Message sent successfully!", + }); + + setFormData({ + name: "", + email: "", + phone: "", + service: "", + message: "", + }); + setCaptchaToken(null); + setFormErrors({}); + } catch (error) { + setAlert({ + show: true, + type: "danger", + message: "Failed to send message. Please try again later.", + }); + } + }; + + useEffect(() => { + if (alert.show) { + const timer = setTimeout(() => { + setAlert((prev) => ({ ...prev, show: false })); + }, 5000); + return () => clearTimeout(timer); + } + }, [alert.show]); + + return ( @@ -277,92 +365,109 @@ const Faq = () => {

    Reach Out to MetatronCube India

    We value your thoughts & queries.
    -
    e.preventDefault()} method="POST" id="dreamit-form"> + + {alert.show && ( +
    {alert.message}
    + )} + +
    - + + {formErrors.name && {formErrors.name}}
    +
    - + + {formErrors.email && {formErrors.email}}
    +
    - + + {formErrors.phone && {formErrors.phone}}
    +
    - + + {formErrors.service && {formErrors.service}}
    +