146 lines
4.1 KiB
JavaScript
146 lines
4.1 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import "react-phone-number-input/style.css";
|
|
import PhoneInput from "react-phone-number-input";
|
|
import { useToast } from "@/lib/toast-hook";
|
|
|
|
export default function ReportContent() {
|
|
const { showLoading, dismissToast, showSuccess, showError } = useToast();
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
emailAddress: "",
|
|
phoneNumber: "",
|
|
subject: "",
|
|
message: "",
|
|
checkbox: false,
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value, type, checked } = e.target;
|
|
setFormData((prevState) => ({
|
|
...prevState,
|
|
[name]: type === "checkbox" ? checked : value,
|
|
}));
|
|
};
|
|
|
|
const handlePhoneChange = (value) => {
|
|
setFormData((prevState) => ({
|
|
...prevState,
|
|
phoneNumber: value,
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
const loadingToastId = showLoading("Submitting form...");
|
|
e.preventDefault();
|
|
try {
|
|
const response = await fetch("/api/contact-send", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(formData),
|
|
});
|
|
|
|
if (response.ok) {
|
|
dismissToast(loadingToastId);
|
|
showSuccess("Your form has been successfully submitted.");
|
|
document.cookie = `prospectClient=true; path=/; max-age=31536000`;
|
|
} else {
|
|
dismissToast(loadingToastId);
|
|
showError(
|
|
error instanceof Error ? error.message : "Something went wrong"
|
|
);
|
|
throw new Error("Form submission failed");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
dismissToast(loadingToastId);
|
|
showError(
|
|
error instanceof Error ? error.message : "Something went wrong"
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="contact__form-wrap">
|
|
<h2 className="title">Get In Touch</h2>
|
|
<form id="contact-form" onSubmit={handleSubmit}>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<div className="form-grp">
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
placeholder="Your Name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="form-grp">
|
|
<input
|
|
type="text"
|
|
name="emailAddress"
|
|
placeholder="Email Address"
|
|
value={formData.emailAddress}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="form-grp">
|
|
<PhoneInput
|
|
international
|
|
defaultCountry="US"
|
|
value={formData.phoneNumber}
|
|
onChange={handlePhoneChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<div className="form-grp">
|
|
<input
|
|
type="text"
|
|
name="subject"
|
|
placeholder="Subject"
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="form-grp">
|
|
<textarea
|
|
name="message"
|
|
placeholder="Write Message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="form-grp checkbox-grp">
|
|
<input
|
|
type="checkbox"
|
|
name="checkbox"
|
|
id="checkbox"
|
|
checked={formData.checkbox}
|
|
onChange={handleChange}
|
|
/>
|
|
<label htmlFor="checkbox">
|
|
Save my name, email and phone number for future messages
|
|
</label>
|
|
</div>
|
|
<button type="submit" className="btn">
|
|
Submit Request
|
|
</button>
|
|
</form>
|
|
<p className="ajax-response mb-0" />
|
|
</div>
|
|
);
|
|
}
|