417 lines
12 KiB
JavaScript
417 lines
12 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);
|
|
const [showSocial, setShowSocial] = useState(false);
|
|
|
|
/** Contact actions */
|
|
const extraIcons = [
|
|
{
|
|
href: "tel:647-722-3434",
|
|
src: "/assets/images/icons/call.webp",
|
|
label: "Call",
|
|
newTab: true,
|
|
},
|
|
{
|
|
action: () => setShowChat(true),
|
|
src: "/assets/images/chat.webp",
|
|
label: "Chat",
|
|
},
|
|
{
|
|
href: "https://wa.me/14379934477",
|
|
src: "/assets/images/icons/WhatsApp.svg.webp",
|
|
label: "WhatsApp",
|
|
newTab: true,
|
|
},
|
|
{
|
|
href: "https://www.instagram.com/elrapharehab/",
|
|
src: "/assets/images/insta.webp",
|
|
label: "Instagram",
|
|
newTab: true,
|
|
},
|
|
{
|
|
href: "https://www.facebook.com/ELRaphaRehabCenter/",
|
|
src: "/assets/images/fb.webp",
|
|
label: "Facebook",
|
|
newTab: true,
|
|
},
|
|
];
|
|
|
|
/** Social media list shown on Share click */
|
|
const socialIcons = [
|
|
{
|
|
href: "https://www.instagram.com/elrapharehab/",
|
|
iconClass: "icon-4",
|
|
label: "Instagram",
|
|
},
|
|
{
|
|
href: "https://www.facebook.com/ELRaphaRehabCenter/",
|
|
iconClass: "icon-7",
|
|
label: "Facebook",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
{/* Floating Contact Buttons */}
|
|
<div className="contact-icon-container">
|
|
{open && (
|
|
<div
|
|
className="extra-icons-wrapper"
|
|
style={{
|
|
position: "absolute",
|
|
bottom: "11px",
|
|
background: "rgb(255, 255, 255)",
|
|
borderRadius: "30px 30px 35px 35px",
|
|
boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.2)",
|
|
padding: "10px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "15px",
|
|
alignItems: "center",
|
|
paddingBottom: "67px",
|
|
left: "-5px",
|
|
}}
|
|
>
|
|
{extraIcons.map((icon, i) =>
|
|
icon.href ? (
|
|
<a
|
|
key={i}
|
|
href={icon.href}
|
|
aria-label={icon.label}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
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) => {
|
|
const newState = !prev;
|
|
if (!newState) {
|
|
// 🔹 when closing the main button, also hide Chat & Social
|
|
setShowChat(false);
|
|
setShowSocial(false);
|
|
}
|
|
return newState;
|
|
});
|
|
}}
|
|
style={{
|
|
position: "fixed",
|
|
bottom: "71px",
|
|
right: "20px",
|
|
left: "20px",
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
padding: "15px",
|
|
border: "none",
|
|
zIndex: 9999,
|
|
}}
|
|
>
|
|
<img
|
|
src={
|
|
open
|
|
? "/assets/images/cancel.png"
|
|
: "/assets/images/icons/call.webp"
|
|
}
|
|
alt="Contact"
|
|
style={{ width: "28px", height: "28px" }}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{showSocial && (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
bottom: "11%",
|
|
left: "90px",
|
|
transform: "translateY(-50%)",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: "15px",
|
|
zIndex: 9999,
|
|
background: "white",
|
|
padding: "8px",
|
|
borderRadius: "50px",
|
|
}}
|
|
>
|
|
{socialIcons.map((icon, i) => (
|
|
<a
|
|
key={i}
|
|
href={icon.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={icon.label}
|
|
style={{
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
width: "45px",
|
|
height: "45px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: "#fff",
|
|
fontSize: "22px",
|
|
textDecoration: "none",
|
|
}}
|
|
>
|
|
<i className={icon.iconClass}></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{showChat && <ChatForm onClose={() => setShowChat(false)} />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ChatForm({ onClose }) {
|
|
const [formData, setFormData] = useState({
|
|
username: "",
|
|
// lname: "",
|
|
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) => {
|
|
// console.log("ReCAPTCHA token:", token);
|
|
setCaptchaToken(token);
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
// console.log("Form submitted:", formData);
|
|
|
|
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.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) {
|
|
// console.log("Form validation errors:", errors);
|
|
return;
|
|
}
|
|
|
|
const emailData = {
|
|
name: formData.username,
|
|
phone: formData.phone,
|
|
email: formData.email,
|
|
subject: formData.service,
|
|
message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
|
|
to: "bloor@rapharehab.ca",
|
|
senderName: "Rapha Rehab 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({ username: "", email: "", phone: "", service: "", 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",
|
|
padding: "20px"
|
|
}}
|
|
>
|
|
<div className="p-3 pb-0 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="Name"
|
|
value={formData.username}
|
|
onChange={handleChange}
|
|
className="form-control mt-2 chat-form"
|
|
/>
|
|
{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="text"
|
|
name="phone"
|
|
placeholder="Phone"
|
|
value={formData.phone}
|
|
onChange={handleChange}
|
|
className="form-control mt-3 chat-form"
|
|
/>
|
|
{formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
|
|
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Your Email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className="form-control mt-3 chat-form"
|
|
/>
|
|
{formErrors.email && <small className="text-danger">{formErrors.email}</small>}
|
|
|
|
<select
|
|
name="service"
|
|
value={formData.service}
|
|
onChange={handleChange}
|
|
className="form-control mt-3 chat-form"
|
|
>
|
|
<option value="">Select Service</option>
|
|
<option value="Physio">Physio</option>
|
|
<option value="Chiro">Chiro</option>
|
|
<option value="Massage">Massage</option>
|
|
<option value="Acupuncture">Acupuncture</option>
|
|
<option value="Osteo">Osteo</option>
|
|
<option value="Orthotics">Orthotics</option>
|
|
</select>
|
|
{formErrors.service && <small className="text-danger">{formErrors.service}</small>}
|
|
|
|
<textarea
|
|
name="message"
|
|
placeholder="Message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
className="form-control mt-3"
|
|
></textarea>
|
|
{formErrors.message && <small className="text-danger">{formErrors.message}</small>}
|
|
|
|
<div className="mt-3">
|
|
<ReCAPTCHA
|
|
sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
|
|
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>
|
|
);
|
|
} |