MetatroncubeSoftwareSolutions/rapharehap
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conact form updation completed

Browse Source
This commit is contained in:
akash 2025-10-02 20:39:20 +05:30
parent c8f24b2b12
commit 023402f623
3 changed files with 44 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
app/contact/ContactClient.js
View File

@ -4,11 +4,11 @@ import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha"; import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios"; import axios from "axios";
import Link from "next/link"; import Link from "next/link";
import { servicesList } from "@/utils/Services.utils";
export default function ContactClient() { export default function ContactClient() {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
username: "", username: "",
lname: "",
email: "", email: "",
phone: "", phone: "",
service: "", service: "",
@ -19,24 +19,23 @@ export default function ContactClient() {
const [captchaToken, setCaptchaToken] = useState(null); const [captchaToken, setCaptchaToken] = useState(null);
const [alert, setAlert] = useState({ show: false, type: "", message: "" }); const [alert, setAlert] = useState({ show: false, type: "", message: "" });
// Handle input changes
const handleChange = (e) => { const handleChange = (e) => {
const { name, value } = e.target; const { name, value } = e.target;
// console.log("Input Changed:", name, value);
setFormData((prev) => ({ ...prev, [name]: value })); setFormData((prev) => ({ ...prev, [name]: value }));
}; };
// Handle captcha
const handleCaptchaChange = (token) => { const handleCaptchaChange = (token) => {
// console.log("Captcha Token:", token);
setCaptchaToken(token); setCaptchaToken(token);
}; };
// Form submit handler
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
// console.log("Form Submitted:", formData);
const errors = {}; const errors = {};
if (!formData.username.trim()) errors.username = "First Name is required."; if (!formData.username.trim()) errors.username = "Name is required.";
if (!formData.lname.trim()) errors.lname = "Last Name is required.";
if (!formData.email.trim()) errors.email = "Email is required."; if (!formData.email.trim()) errors.email = "Email is required.";
if (!formData.phone.trim()) errors.phone = "Phone is required."; if (!formData.phone.trim()) errors.phone = "Phone is required.";
if (!formData.service.trim()) errors.service = "Please select a service."; if (!formData.service.trim()) errors.service = "Please select a service.";
@ -44,6 +43,7 @@ export default function ContactClient() {
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
setFormErrors(errors); setFormErrors(errors);
// console.log("Form Errors:", errors);
if (Object.keys(errors).length > 0) return; if (Object.keys(errors).length > 0) return;
const emailData = { const emailData = {
@ -55,9 +55,11 @@ export default function ContactClient() {
}; };
try { try {
const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, { // console.log("Sending email:", emailData);
const res = await axios.post("/api/sendMail", emailData, {
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
}); });
// console.log("Email Response:", res.data);
setAlert({ setAlert({
show: true, show: true,
@ -67,7 +69,6 @@ export default function ContactClient() {
setFormData({ setFormData({
username: "", username: "",
lname: "",
email: "", email: "",
phone: "", phone: "",
service: "", service: "",
@ -76,7 +77,7 @@ export default function ContactClient() {
setCaptchaToken(null); setCaptchaToken(null);
setFormErrors({}); setFormErrors({});
} catch (error) { } catch (error) {
console.error("❌ Error sending email:", error); // console.error("❌ Error sending email:", error);
setAlert({ setAlert({
show: true, show: true,
type: "danger", type: "danger",
@ -85,7 +86,7 @@ export default function ContactClient() {
} }
}; };
// Auto-hide alert
useEffect(() => { useEffect(() => {
if (alert.show) { if (alert.show) {
const timer = setTimeout(() => { const timer = setTimeout(() => {
@ -97,7 +98,6 @@ export default function ContactClient() {
return ( return (
<div> <div>
{/* Contact Info Section */}
<section className="contact-info-section pt_90"> <section className="contact-info-section pt_90">
<div className="auto-container"> <div className="auto-container">
<div className="row clearfix"> <div className="row clearfix">
@ -139,7 +139,6 @@ export default function ContactClient() {
</div> </div>
</section> </section>
{/* Contact Form Section */}
<section className="contact-style-three pt_90 pb_90"> <section className="contact-style-three pt_90 pb_90">
<div className="auto-container"> <div className="auto-container">
<div className="row clearfix"> <div className="row clearfix">
@ -163,24 +162,13 @@ export default function ContactClient() {
<input <input
type="text" type="text"
name="username" name="username"
placeholder="First Name" placeholder="Name"
value={formData.username} value={formData.username}
onChange={handleChange} onChange={handleChange}
/> />
{formErrors.username && <small className="text-danger">{formErrors.username}</small>} {formErrors.username && <small className="text-danger">{formErrors.username}</small>}
</div> </div>
<div className="col-lg-6 col-md-6 col-sm-12 form-group">
<input
type="text"
name="lname"
placeholder="Last Name"
value={formData.lname}
onChange={handleChange}
/>
{formErrors.lname && <small className="text-danger">{formErrors.lname}</small>}
</div>
<div className="col-lg-6 col-md-6 col-sm-12 form-group"> <div className="col-lg-6 col-md-6 col-sm-12 form-group">
<input <input
type="text" type="text"
@ -203,7 +191,6 @@ export default function ContactClient() {
{formErrors.email && <small className="text-danger">{formErrors.email}</small>} {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
</div> </div>
{/* Services Dropdown */}
<div className="col-lg-6 col-md-6 col-sm-12 form-group"> <div className="col-lg-6 col-md-6 col-sm-12 form-group">
<select <select
name="service" name="service"
@ -212,17 +199,16 @@ export default function ContactClient() {
className="form-control" className="form-control"
> >
<option value="">Select Service</option> <option value="">Select Service</option>
<option value="Physio">Physio</option> {servicesList.map((service) => (
<option value="Chiro">Chiro</option> <option key={service.slug} value={service.shortTitle}>
<option value="Massage">Massage</option> {service.shortTitle}
<option value="Acupuncture">Acupuncture</option> </option>
<option value="Osteo">Osteo</option> ))}
<option value="Orthotics">Orthotics</option>
</select> </select>
{formErrors.service && <small className="text-danger">{formErrors.service}</small>} {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
</div> </div>
<div className="col-lg-6 col-md-6 col-sm-12 form-group"> <div className="col-lg-12 col-md-6 col-sm-12 form-group">
<textarea <textarea
name="message" name="message"
placeholder="Message" placeholder="Message"
@ -259,7 +245,6 @@ export default function ContactClient() {
</div> </div>
</section> </section>
{/* Google Map */}
<section className="google-map-section"> <section className="google-map-section">
<div className="map-inner"> <div className="map-inner">
<iframe <iframe

29
components/ContactFloat.js
View File

@ -6,7 +6,7 @@ import axios from "axios";
export default function ContactFloat() { export default function ContactFloat() {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [showChat, setShowChat] = useState(false); const [showChat, setShowChat] = useState(false);
const [showSocial, setShowSocial] = useState(false); // 👈 NEW: toggle social icons const [showSocial, setShowSocial] = useState(false);
/** Contact actions */ /** Contact actions */
const extraIcons = [ const extraIcons = [
@ -14,7 +14,7 @@ export default function ContactFloat() {
href: "tel:647-722-3434", href: "tel:647-722-3434",
src: "/assets/images/icons/call.png", src: "/assets/images/icons/call.png",
label: "Call", label: "Call",
newTab: true, // 👈 added newTab: true,
}, },
{ {
action: () => setShowChat(true), action: () => setShowChat(true),
@ -219,7 +219,7 @@ export default function ContactFloat() {
function ChatForm({ onClose }) { function ChatForm({ onClose }) {
const [formData, setFormData] = useState({ const [formData, setFormData] = useState({
username: "", username: "",
lname: "", // lname: "",
email: "", email: "",
phone: "", phone: "",
service: "", service: "",
@ -235,15 +235,18 @@ function ChatForm({ onClose }) {
}; };
const handleCaptchaChange = (token) => { const handleCaptchaChange = (token) => {
// console.log("ReCAPTCHA token:", token);
setCaptchaToken(token); setCaptchaToken(token);
}; };
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
// console.log("Form submitted:", formData);
const errors = {}; const errors = {};
if (!formData.username.trim()) errors.username = "First Name is required."; if (!formData.username.trim()) errors.username = "First Name is required.";
if (!formData.lname.trim()) errors.lname = "Last Name is required."; // if (!formData.lname.trim()) errors.lname = "Last Name is required.";
if (!formData.email.trim()) errors.email = "Email is required."; if (!formData.email.trim()) errors.email = "Email is required.";
if (!formData.phone.trim()) errors.phone = "Phone is required."; if (!formData.phone.trim()) errors.phone = "Phone is required.";
if (!formData.service.trim()) errors.service = "Please select a service."; if (!formData.service.trim()) errors.service = "Please select a service.";
@ -251,7 +254,10 @@ function ChatForm({ onClose }) {
if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
setFormErrors(errors); setFormErrors(errors);
if (Object.keys(errors).length > 0) return; if (Object.keys(errors).length > 0) {
// console.log("Form validation errors:", errors);
return;
}
const emailData = { const emailData = {
...formData, ...formData,
@ -266,6 +272,8 @@ function ChatForm({ onClose }) {
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
}); });
// console.log("Server response:", res.data);
setAlert({ setAlert({
show: true, show: true,
type: "success", type: "success",
@ -274,7 +282,7 @@ function ChatForm({ onClose }) {
setFormData({ setFormData({
username: "", username: "",
lname: "", // lname: "",
email: "", email: "",
phone: "", phone: "",
service: "", service: "",
@ -283,6 +291,7 @@ function ChatForm({ onClose }) {
setCaptchaToken(null); setCaptchaToken(null);
setFormErrors({}); setFormErrors({});
} catch (error) { } catch (error) {
// console.error("Error sending message:", error);
setAlert({ setAlert({
show: true, show: true,
type: "danger", type: "danger",
@ -321,14 +330,14 @@ function ChatForm({ onClose }) {
<input <input
type="text" type="text"
name="username" name="username"
placeholder="First Name" placeholder="Name"
value={formData.username} value={formData.username}
onChange={handleChange} onChange={handleChange}
className="form-control mb-2" className="form-control mb-2"
/> />
{formErrors.username && <small className="text-danger">{formErrors.username}</small>} {formErrors.username && <small className="text-danger">{formErrors.username}</small>}
<input {/* <input
type="text" type="text"
name="lname" name="lname"
placeholder="Last Name" placeholder="Last Name"
@ -336,7 +345,7 @@ function ChatForm({ onClose }) {
onChange={handleChange} onChange={handleChange}
className="form-control mb-2" className="form-control mb-2"
/> />
{formErrors.lname && <small className="text-danger">{formErrors.lname}</small>} {formErrors.lname && <small className="text-danger">{formErrors.lname}</small>} */}
<input <input
type="text" type="text"
@ -358,8 +367,6 @@ function ChatForm({ onClose }) {
/> />
{formErrors.email && <small className="text-danger">{formErrors.email}</small>} {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
<select <select
name="service" name="service"
value={formData.service} value={formData.service}

10
public/assets/css/bootstrap.css vendored
View File

@ -1993,14 +1993,16 @@ progress {
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
padding: 0.375rem 0.75rem; padding: 20px 30px;
font-size: 1rem; font-size: 18px;
color: #676767;
font-weight: 400; font-weight: 400;
border: 1px solid rgba(0, 0, 0, 0.1);
line-height: 1.5; line-height: 1.5;
color: #212529; /* color: #212529; */
background-color: #fff; background-color: #fff;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #ced4da; /* border: 1px solid #ced4da; */
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;