From 81cbd484b7bf923bb49060534ebbbab126a60813 Mon Sep 17 00:00:00 2001 From: selvi Date: Tue, 8 Jul 2025 18:37:29 +0530 Subject: [PATCH] contact submittion updated --- app/contact/page.tsx | 305 +++++++++++++++++++++++++++++-------------- package-lock.json | 163 +++++++++++++++++++++-- package.json | 3 + 3 files changed, 360 insertions(+), 111 deletions(-) diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 483405b..b1d9b3e 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -1,107 +1,216 @@ +"use client"; +import Countdown from '@/components/elements/Countdown'; +import Layout from "@/components/layout/Layout"; +import Link from "next/link"; +import { useState, useEffect, ChangeEvent, FormEvent } from "react"; +import ReCAPTCHA from "react-google-recaptcha"; +import axios from "axios"; + +interface FormData { + name: string; + phone: string; + email: string; + subject: string; + message: string; +} + +interface FormErrors { + name?: string; + phone?: string; + email?: string; + subject?: string; + message?: string; + captcha?: string; +} -import Countdown from '@/components/elements/Countdown' -import Layout from "@/components/layout/Layout" -import Link from "next/link" export default function Contact() { + const [formData, setFormData] = useState({ + name: "", + phone: "", + email: "", + subject: "", + message: "", + }); + + const [captchaToken, setCaptchaToken] = useState(null); + const [formErrors, setFormErrors] = useState({}); + const [alert, setAlert] = useState<{ show: boolean; type: string; message: string }>({ + show: false, + type: "", + message: "", + }); + + const handleChange = (e: ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + }; + + const handleCaptchaChange = (token: string | null) => { + setCaptchaToken(token); + }; + + const handleSubmit = async (e: FormEvent) => { + e.preventDefault(); + + const errors: FormErrors = {}; + if (!formData.name.trim()) errors.name = "Name is required."; + if (!formData.phone.trim()) errors.phone = "Phone number is required."; + if (!formData.email.trim()) errors.email = "Email is required."; + if (!formData.subject.trim()) errors.subject = "Subject is required."; + 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 = { + ...formData, + message: `Subject: ${formData.subject}

Message: ${formData.message}`, + to: "lead@metatroncube.in", + senderName: "Tamil Culture Waterloo Contact 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: "", phone: "", email: "", subject: "", message: "" }); + setCaptchaToken(null); + setFormErrors({}); + } catch { + setAlert({ + show: true, + type: "danger", + message: "Failed to send message. Please try again later.", + }); + } + }; + + useEffect(() => { + if (alert.show) { + const timer = setTimeout(() => setAlert({ ...alert, show: false }), 5000); + return () => clearTimeout(timer); + } + }, [alert.show]); return ( - <> + +
+
+
+
+
+
+

Contact Us

+
+ Home Contact Us +
+
+
+
+
- -
-
-
-
-
-
-

Contact Us

-
- Home Contact Us +
+
+
+
+
+
+
+ +
+
+
Email
+
+ mail@tamilculturewaterloo.org +
+
+
+
+
+
+ +
+
+
Location
+
+ P.O. Box No:25068, Kitchener, Ontario, N2A 4A5, Canada. +
+
+
+
+
+
+ +
+
+
Call Us
+
+ +1 123 456 7890
- {/*===== HERO AREA ENDS =======*/} - {/*===== CONTACT AREA STARTS =======*/} -
-
-
-
-
-
-
- -
-
-
Email
-
- mail@tamilculturewaterloo.org -
-
-
-
-
-
- -
-
-
Location
-
- P.O. Box No:25068, Kitchener, Ontario, N2A 4A5, Canada. -
-
-
-
-
-
- -
-
-
Call Us
-
- +1 123 456 7890 -
-
-
-
-
-
- {/*===== CONTACT AREA ENDS =======*/} - {/*===== CONTACT AREA STARTS =======*/} -
-
-
-
-
-

Get In Touch Now

-
+
+ +
+
+
+
+
+

Get In Touch Now

+
+
+ {alert.show && ( +
{alert.message}
+ )}
- + + {formErrors.name && {formErrors.name}}
- + + {formErrors.phone && {formErrors.phone}}
- + + {formErrors.email && {formErrors.email}}
- + + {formErrors.subject && {formErrors.subject}}
-