339 lines
17 KiB
JavaScript
339 lines
17 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
|
|
export default function Contact1({ ssrData }) {
|
|
const [data, setData] = useState(ssrData || null);
|
|
const [loading, setLoading] = useState(!ssrData);
|
|
const [error, setError] = useState(null);
|
|
const [modal, setModal] = useState({ open: false, message: '', type: 'success' });
|
|
|
|
useEffect(() => {
|
|
if (!ssrData) {
|
|
setLoading(true);
|
|
axios.get("/api/get-component-data", { params: { component_name: "Contact" } })
|
|
.then(res => setData(res.data.data))
|
|
.catch(() => setError("Failed to get Contact data"))
|
|
.finally(() => setLoading(false));
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
}, [ssrData]);
|
|
|
|
if (loading) return <div className="text-center py-20">Loading...</div>;
|
|
if (error) return null;
|
|
if (!data) return null;
|
|
|
|
|
|
const contacts = Array.isArray(data.items) ? data.items : [];
|
|
|
|
const [form, setForm] = useState({
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
department: '',
|
|
message: ''
|
|
});
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [submitResult, setSubmitResult] = useState(null);
|
|
|
|
function handleInputChange(e) {
|
|
const { name, value } = e.target;
|
|
setForm(prev => ({ ...prev, [name]: value }));
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
setSubmitting(true);
|
|
setSubmitResult(null);
|
|
try {
|
|
const content = [
|
|
`Name: ${form.name}`,
|
|
`Phone: ${form.phone}`,
|
|
`Email: ${form.email}`,
|
|
`Department: ${form.department}`,
|
|
`Message:<br>${form.message.replace(/\n/g, '<br>')}`
|
|
].join("<br>");
|
|
const res = await axios.post('/api/send-email', {
|
|
subject: `Website Contact Form: ${form.name}`,
|
|
content
|
|
});
|
|
if (res.data.success) {
|
|
setModal({ open: true, message: res.data.message || 'Email sent successfully!', type: 'success' });
|
|
setSubmitResult(null);
|
|
setForm({ name: '', phone: '', email: '', department: '', message: '' });
|
|
} else {
|
|
setModal({ open: true, message: res.data.error || 'Failed to send', type: 'error' });
|
|
setSubmitResult(null);
|
|
}
|
|
} catch (err) {
|
|
setModal({ open: true, message: err?.response?.data?.error || err.message || 'Failed to send', type: 'error' });
|
|
setSubmitResult(null);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
setModal({ open: false, message: '', type: 'success' });
|
|
}
|
|
|
|
return (
|
|
<section className="wrapper !bg-[#ffffff] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0">
|
|
<div className="container pb-12">
|
|
<div className="flex flex-wrap mx-[-15px] !mb-[4.5rem] md:!mb-24">
|
|
<div className="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-9rem]">
|
|
<div className="card">
|
|
<div className="flex flex-wrap mx-0">
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !self-stretch">
|
|
<div className="map map-full rounded-t-[0.4rem] rounded-lg-start h-full min-h-[15rem]">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3308.116930443662!2d-117.6923042!3d33.9895302!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dcccd7e575dffd%3A0x30aebc3ca15ed41d!2s14508%20Central%20Ave%2C%20Chino%2C%20CA%2091710%2C%20USA!5e0!3m2!1sen!2sjp!4v1712719609523!5m2!1sen!2sjp"
|
|
style={{ width: "100%", height: "100%", border: 0 }}
|
|
allowFullScreen=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !my-[50px] max-w-full">
|
|
<div className="flex flex-col gap-5">
|
|
{contacts.map((item, idx) => (
|
|
<div className="flex flex-row items-start gap-3" key={idx}>
|
|
{(item.item_html_code || item.item_icon) && (
|
|
<div className="w-8 h-8 flex items-center justify-center text-xl">
|
|
{item.item_html_code ? (
|
|
<span style={{ display: 'inline-block', width: '2rem', height: '2rem' }}
|
|
dangerouslySetInnerHTML={{ __html: item.item_html_code }} />
|
|
) : (
|
|
<img src={item.item_icon} alt="icon" style={{ width: '2rem', height: '2rem', objectFit: 'contain' }} />
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="min-w-[90px]">
|
|
{item.item_title}
|
|
</div>
|
|
<div className="break-all">
|
|
{/(mail)/i.test(item.item_title) ? (
|
|
<a href={`mailto:${item.item_subtitle || item.item_value || ''}`} className="!text-inherit hover:!text-[#1fc76f]">
|
|
{item.item_subtitle || item.item_value || ''}
|
|
</a>
|
|
) : /(phone)/i.test(item.item_title) ? (
|
|
<a href={`tel:${item.item_subtitle || item.item_value || ''}`} className="hover:underline">
|
|
{item.item_subtitle || item.item_value || ''}
|
|
</a>
|
|
) : (
|
|
<span>{item.item_subtitle || item.item_value || ''}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/* /.card */}
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="xl:w-8/12 xl:!ml-[16.66666667%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center">
|
|
{data.title}
|
|
</h2>
|
|
<p className="lead !leading-[1.65] text-[0.9rem] font-medium !text-center !mb-10">
|
|
{data.description}
|
|
</p>
|
|
<form
|
|
className="contact-form needs-validation"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<div className="messages" />
|
|
{/* Modal for feedback */}
|
|
{modal.open && (
|
|
<div style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100vw',
|
|
height: '100vh',
|
|
background: 'rgba(0,0,0,0.3)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
zIndex: 9999
|
|
}}>
|
|
<div style={{
|
|
background: '#fff',
|
|
borderRadius: '16px',
|
|
padding: '2.5rem 3.5rem',
|
|
minWidth: '390px',
|
|
maxWidth: '96vw',
|
|
boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
|
|
textAlign: 'center',
|
|
color: modal.type === 'success' ? '#1fc76f' : '#e53e3e',
|
|
fontWeight: 500
|
|
}}>
|
|
<div style={{ fontSize: '1.1rem', marginBottom: '1.5rem' }}>{modal.message}</div>
|
|
<button
|
|
type="button"
|
|
onClick={closeModal}
|
|
style={{
|
|
background: modal.type === 'success' ? '#1fc76f' : '#e53e3e',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '24px',
|
|
padding: '0.5rem 2rem',
|
|
fontSize: '1rem',
|
|
cursor: 'pointer',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.08)'
|
|
}}
|
|
>OK</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-wrap mx-[-10px]">
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div className="form-floating relative !mb-4">
|
|
<input
|
|
id="form_name"
|
|
type="text"
|
|
name="name"
|
|
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
required
|
|
value={form.name}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<label
|
|
htmlFor="form_name"
|
|
className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
|
>
|
|
Name *
|
|
</label>
|
|
<div className="valid-feedback">Looks good!</div>
|
|
<div className="invalid-feedback">
|
|
Please enter your first name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div className="form-floating relative !mb-4">
|
|
<input
|
|
id="form_phone"
|
|
type="text"
|
|
name="phone"
|
|
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
value={form.phone}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<label
|
|
htmlFor="form_phone"
|
|
className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
|
>
|
|
Phone
|
|
</label>
|
|
<div className="valid-feedback">Looks good!</div>
|
|
<div className="invalid-feedback">
|
|
Please enter your phone number.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div className="form-floating relative !mb-4">
|
|
<input
|
|
id="form_email"
|
|
type="email"
|
|
name="email"
|
|
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
required
|
|
value={form.email}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<label
|
|
htmlFor="form_email"
|
|
className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
|
>
|
|
Email *
|
|
</label>
|
|
<div className="valid-feedback">Looks good!</div>
|
|
<div className="invalid-feedback">
|
|
Please provide a valid email address.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div className="form-select-wrapper !mb-4">
|
|
<select
|
|
className="form-select"
|
|
id="form-select"
|
|
name="department"
|
|
value={form.department}
|
|
onChange={handleInputChange}
|
|
>
|
|
<option value="">Select a department</option>
|
|
<option value="Sales">Sales</option>
|
|
<option value="Marketing">Marketing</option>
|
|
<option value="Customer Support">Customer Support</option>
|
|
</select>
|
|
<div className="valid-feedback">Looks good!</div>
|
|
<div className="invalid-feedback">
|
|
Please select a department.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /column */}
|
|
<div className="w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div className="form-floating relative !mb-4">
|
|
<textarea
|
|
id="form_message"
|
|
name="message"
|
|
className="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
|
placeholder=""
|
|
style={{ height: 150 }}
|
|
required
|
|
value={form.message}
|
|
onChange={handleInputChange}
|
|
/>
|
|
<label
|
|
htmlFor="form_message"
|
|
className="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope"
|
|
>
|
|
Message *
|
|
</label>
|
|
<div className="valid-feedback">Looks good!</div>
|
|
<div className="invalid-feedback">
|
|
Please enter your messsage.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /column */}
|
|
<div className="w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
|
|
<input
|
|
type="submit"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] btn-send !mb-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
value={submitting ? 'Sending...' : (data.button_text || 'Submit')}
|
|
disabled={submitting}
|
|
/>
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</form>
|
|
{/* /form */}
|
|
</div>
|
|
{/* /column */}
|
|
</div>
|
|
{/* /.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|