243 lines
13 KiB
TypeScript
243 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import ReCAPTCHA from "react-google-recaptcha";
|
|
import axios from "axios";
|
|
|
|
const ContactSection = () => {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
phone: "",
|
|
email: "",
|
|
service: "",
|
|
message: "",
|
|
});
|
|
|
|
const [formErrors, setFormErrors] = useState<any>({});
|
|
const [captchaToken, setCaptchaToken] = useState<string | null>(null);
|
|
const [alert, setAlert] = useState({ show: false, type: "", message: "" });
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const handleCaptchaChange = (token: string | null) => {
|
|
setCaptchaToken(token);
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
const errors: any = {};
|
|
if (!formData.name.trim()) errors.name = "Name is required.";
|
|
if (!formData.phone.trim()) errors.phone = "Phone is required.";
|
|
if (!formData.email.trim()) errors.email = "Email 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 = {
|
|
...formData,
|
|
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
|
to: "info@metatroncubesolutions.com",
|
|
senderName: "Metatroncube 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: "Thank you! Your message has been sent successfully.",
|
|
});
|
|
|
|
setFormData({
|
|
name: "",
|
|
phone: "",
|
|
email: "",
|
|
service: "",
|
|
message: "",
|
|
});
|
|
setCaptchaToken(null);
|
|
setFormErrors({});
|
|
} catch (error) {
|
|
console.error("❌ Error sending email:", 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 (
|
|
<>
|
|
<section className="contact-area section-space">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-5 col-md-12">
|
|
<div className="contact-info-wrapper">
|
|
<div className="sec-title-wrapper">
|
|
<div className="sec-title">
|
|
<div className="sec-title__shape"></div>
|
|
<h6 className="sec-title__tagline">Let's Connect</h6>
|
|
<h2 className="sec-title__title mb-15">Drop us a Line.</h2>
|
|
<p>Whether you have a question, a project idea, or just want to chat about your digital needs, our team is here to listen and provide tailored solutions. Reach out to Metatroncube Software Solution and start your journey towards innovative digital success.</p>
|
|
</div>
|
|
</div>
|
|
<div className="contact-info-list">
|
|
<div className="contact-info-item d-flex align-items-center mb-30">
|
|
<div className="icon">
|
|
<i className="fa-solid fa-phone-volume"></i>
|
|
</div>
|
|
<div className="content">
|
|
<span>Call Anytime</span>
|
|
<h6><a href="tel:+16476797651">+1-647-679-7651</a></h6>
|
|
</div>
|
|
</div>
|
|
<div className="contact-info-item d-flex align-items-center mb-30">
|
|
<div className="icon">
|
|
<i className="fa-solid fa-envelope"></i>
|
|
</div>
|
|
<div className="content">
|
|
<span>Send Email</span>
|
|
<h6><a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a></h6>
|
|
</div>
|
|
</div>
|
|
<div className="contact-info-item d-flex align-items-center">
|
|
<div className="icon">
|
|
<i className="fa-solid fa-location-dot"></i>
|
|
</div>
|
|
<div className="content">
|
|
<span>Location</span>
|
|
<h6>Waterloo, Ontario Canada</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-7 col-md-12">
|
|
<div className="contact-form-wrapper bg-color-light p-relative">
|
|
<form className="contact-form" onSubmit={handleSubmit}>
|
|
{alert.show && (
|
|
<div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
|
|
{alert.message}
|
|
</div>
|
|
)}
|
|
<div className="form-one__group">
|
|
<div className="mb-20">
|
|
<label className="form-label">Full Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="Full Name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
/>
|
|
{formErrors.name && <small className="text-danger">{formErrors.name}</small>}
|
|
</div>
|
|
<div className="mb-20">
|
|
<label className="form-label">Email Address</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Email Address"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
/>
|
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
|
</div>
|
|
<div className="mb-20">
|
|
<label className="form-label">Phone Number</label>
|
|
<input
|
|
type="tel"
|
|
name="phone"
|
|
placeholder="Phone Number"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
/>
|
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
|
</div>
|
|
<div className="mb-20">
|
|
<label className="form-label">Select Service</label>
|
|
<select
|
|
name="service"
|
|
value={formData.service}
|
|
onChange={handleChange}
|
|
style={{
|
|
width: '100%',
|
|
padding: '18px 25px',
|
|
border: '1px solid #e2e8f0',
|
|
backgroundColor: '#fff',
|
|
borderRadius: '12px',
|
|
outline: 'none',
|
|
fontSize: '15px',
|
|
color: '#787878'
|
|
}}
|
|
>
|
|
<option value="">Select Service</option>
|
|
<option value="Website Development">Website Development</option>
|
|
<option value="Mobile Application Development">Mobile Application Development</option>
|
|
<option value="Graphic Designing">Graphic Designing</option>
|
|
<option value="UI / UX Designing">UI / UX Designing</option>
|
|
<option value="SEO & Content Writing">SEO & Content Writing</option>
|
|
<option value="Digital Marketing">Digital Marketing</option>
|
|
<option value="ERP Development & Implementation">ERP Development & Implementation</option>
|
|
</select>
|
|
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
|
</div>
|
|
<div className="form-one__control--full mb-20">
|
|
<label className="form-label">Write Message</label>
|
|
<textarea
|
|
name="message"
|
|
placeholder="Write a Message"
|
|
rows={5}
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
></textarea>
|
|
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
|
|
</div>
|
|
|
|
<div className="form-one__control--full mb-4">
|
|
<ReCAPTCHA
|
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
|
onChange={handleCaptchaChange}
|
|
/>
|
|
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
|
|
</div>
|
|
|
|
<div className="form-one__control--full">
|
|
<button type="submit" className="submit-btn-custom-global">
|
|
SEND A MESSAGE
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ContactSection;
|