328 lines
9.3 KiB
JavaScript
328 lines
9.3 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import ReCAPTCHA from "react-google-recaptcha";
|
|
import axios from "axios";
|
|
|
|
export default function ContactFloat() {
|
|
const [open, setOpen] = useState(false);
|
|
const [showChat, setShowChat] = useState(false);
|
|
|
|
/** Contact actions */
|
|
const extraIcons = [
|
|
{
|
|
href: "mailto:bloor@rapharehab.ca",
|
|
src: "/assets/images/icons/mail.png",
|
|
label: "Mail",
|
|
},
|
|
{
|
|
href: "tel:647-722-3434",
|
|
src: "/assets/images/icons/call.png",
|
|
label: "Call",
|
|
},
|
|
{
|
|
action: () => setShowChat(true),
|
|
src: "/assets/images/icons/chat.png",
|
|
label: "Chat",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Floating Contact Buttons */}
|
|
<div className="contact-icon-container">
|
|
{open && (
|
|
<div
|
|
className="extra-icons-wrapper"
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "10px",
|
|
right: "-80",
|
|
background: "#fff",
|
|
borderRadius: "30px 30px 0 0",
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
|
|
padding: "10px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "15px",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
{extraIcons.map((icon, i) =>
|
|
icon.href ? (
|
|
<a
|
|
key={i}
|
|
href={icon.href}
|
|
aria-label={icon.label}
|
|
style={{
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
padding: "8px",
|
|
width: "45px",
|
|
height: "45px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<img
|
|
src={icon.src}
|
|
alt={icon.label}
|
|
style={{ width: "22px", height: "22px" }}
|
|
/>
|
|
</a>
|
|
) : (
|
|
<button
|
|
key={i}
|
|
onClick={icon.action}
|
|
aria-label={icon.label}
|
|
style={{
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
padding: "8px",
|
|
width: "45px",
|
|
height: "45px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
border: "none",
|
|
}}
|
|
>
|
|
<img
|
|
src={icon.src}
|
|
alt={icon.label}
|
|
style={{ width: "22px", height: "22px" }}
|
|
/>
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
aria-label={open ? "Close" : "Contact Us"}
|
|
className="contact-icon-outer toggle-btn"
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
style={{
|
|
position: "fixed",
|
|
bottom: "5px",
|
|
right: "20px",
|
|
left: "20px",
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
padding: "15px",
|
|
// boxShadow: "0 4px 12px #102548",
|
|
border: "none",
|
|
zIndex: 9999,
|
|
}}
|
|
>
|
|
<img
|
|
src={
|
|
open
|
|
? "/assets/images/icons/cross-out.png"
|
|
: "/assets/images/icons/call.png"
|
|
}
|
|
alt="Contact"
|
|
style={{ width: "28px", height: "28px" }}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Chat Form Sidebar */}
|
|
{showChat && (
|
|
<ChatForm onClose={() => setShowChat(false)} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/** Contact Form Sidebar */
|
|
function ChatForm({ onClose }) {
|
|
const [formData, setFormData] = useState({
|
|
username: "",
|
|
lname: "",
|
|
email: "",
|
|
phone: "",
|
|
subject: "",
|
|
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.username.trim()) errors.username = "First Name is required.";
|
|
if (!formData.lname.trim()) errors.lname = "Last Name is required.";
|
|
if (!formData.email.trim()) errors.email = "Email is required.";
|
|
if (!formData.phone.trim()) errors.phone = "Phone 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}<br /><br />Message: ${formData.message}`,
|
|
to: "bloor@rapharehab.ca",
|
|
senderName: "Rapha Rehab Chat Form",
|
|
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({
|
|
username: "",
|
|
lname: "",
|
|
email: "",
|
|
phone: "",
|
|
subject: "",
|
|
message: "",
|
|
});
|
|
setCaptchaToken(null);
|
|
setFormErrors({});
|
|
} catch (error) {
|
|
setAlert({
|
|
show: true,
|
|
type: "danger",
|
|
message: "Failed to send message. Please try again later.",
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="chat-form-wrapper"
|
|
style={{
|
|
position: "fixed",
|
|
right: "10px",
|
|
bottom: "90px",
|
|
width: "350px",
|
|
background: "#fff",
|
|
borderRadius: "10px",
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
|
|
zIndex: 2000,
|
|
maxHeight: "80vh",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
<div className="p-3 border-bottom d-flex justify-content-between align-items-center">
|
|
<h5 style={{ margin: 0, color: "#bc0000" }}>Chat with Us</h5>
|
|
<button onClick={onClose} className="btn-close"></button>
|
|
</div>
|
|
|
|
<div className="p-3">
|
|
{alert.show && (
|
|
<div className={`alert alert-${alert.type}`}>{alert.message}</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} className="default-form">
|
|
<input
|
|
type="text"
|
|
name="username"
|
|
placeholder="First Name"
|
|
value={formData.username}
|
|
onChange={handleChange}
|
|
className="form-control mb-2"
|
|
/>
|
|
{formErrors.username && <small className="text-danger">{formErrors.username}</small>}
|
|
|
|
<input
|
|
type="text"
|
|
name="lname"
|
|
placeholder="Last Name"
|
|
value={formData.lname}
|
|
onChange={handleChange}
|
|
className="form-control mb-2"
|
|
/>
|
|
{formErrors.lname && <small className="text-danger">{formErrors.lname}</small>}
|
|
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Your Email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className="form-control mb-2"
|
|
/>
|
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
|
|
|
<input
|
|
type="text"
|
|
name="phone"
|
|
placeholder="Phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
className="form-control mb-2"
|
|
/>
|
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
|
|
|
<input
|
|
type="text"
|
|
name="subject"
|
|
placeholder="Subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
className="form-control mb-2"
|
|
/>
|
|
{formErrors.subject && <small className="text-danger">{formErrors.subject}</small>}
|
|
|
|
<textarea
|
|
name="message"
|
|
placeholder="Message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
className="form-control mb-2"
|
|
></textarea>
|
|
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
|
|
|
|
<div className="mb-2">
|
|
<ReCAPTCHA
|
|
sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
|
|
onChange={handleCaptchaChange}
|
|
/>
|
|
{formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
|
|
</div>
|
|
|
|
<button
|
|
className="btn w-100"
|
|
type="submit"
|
|
style={{
|
|
background: "#bc0000",
|
|
color: "#fff",
|
|
padding: "10px",
|
|
fontSize: "16px",
|
|
fontWeight: "bold",
|
|
border: "none",
|
|
}}
|
|
>
|
|
SUBMIT NOW
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|