/* v2 shared ContactForm — light theme. Posts to the same Apps Script
endpoint as production; same validation, loading, error, success states. */
function Field({ label, required, error, children }) {
return (
);
}
function Spinner() {
return (
);
}
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const PHONE_RE = /^[+0-9()\-\s]{7,20}$/;
function validateClient(form, fields) {
const errs = {};
if (fields.includes('name')) {
const v = (form.name || '').trim();
if (!v) errs.name = 'Please enter your name.';
else if (v.length < 2) errs.name = 'Name is too short.';
}
if (fields.includes('shop')) {
if (!(form.shop || '').trim()) errs.shop = 'Please enter your shop or business name.';
}
if (fields.includes('phone')) {
const v = (form.phone || '').trim();
if (!v) errs.phone = 'Please enter a phone number.';
else if (!PHONE_RE.test(v)) errs.phone = 'That phone number looks off.';
}
if (fields.includes('email')) {
const v = (form.email || '').trim();
if (v && !EMAIL_RE.test(v)) errs.email = 'That email address looks off.';
}
return errs;
}
function ContactForm(props) {
const source = (props.source || 'home') + '-v2';
const submitLabel = props.submitLabel || 'Book a consultation';
const showMessage = props.showMessage !== false;
const extra = props.extraField || null;
const [form, setForm] = React.useState({
name: '', shop: '', phone: '', email: '', message: '',
...(extra ? { [extra.key]: extra.defaultValue || '' } : {}),
});
const [errors, setErrors] = React.useState({});
const [serverError, setServerError] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [submitted, setSubmitted] = React.useState(false);
const set = (k, v) => {
setForm(f => ({ ...f, [k]: v }));
if (errors[k]) setErrors(e => ({ ...e, [k]: undefined }));
};
const onSubmit = async (e) => {
e.preventDefault();
setServerError('');
const clientErrs = validateClient(form, ['name', 'shop', 'phone', 'email']);
if (Object.keys(clientErrs).length) { setErrors(clientErrs); return; }
setLoading(true);
const endpoint = (window.AxiomConfig && window.AxiomConfig.FORM_ENDPOINT) || '';
const payload = { ...form, source };
if (!endpoint) {
const subject = encodeURIComponent(`Website enquiry — ${form.name}${form.shop ? ' (' + form.shop + ')' : ''}`);
const lines = [
`Name: ${form.name}`,
form.shop ? `Shop: ${form.shop}` : null,
`Phone: ${form.phone}`,
form.email ? `Email: ${form.email}` : null,
extra && form[extra.key] ? `${extra.label}: ${form[extra.key]}` : null,
form.message ? `\nMessage:\n${form.message}` : null,
].filter(Boolean).join('\n');
const fallback = (window.AxiomConfig && window.AxiomConfig.CONTACT && window.AxiomConfig.CONTACT.emailHref) || 'mailto:hello@axiomds.co.za';
window.location.href = `${fallback}?subject=${subject}&body=${encodeURIComponent(lines)}`;
setLoading(false); setSubmitted(true); return;
}
try {
const res = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'text/plain;charset=utf-8' },
body: JSON.stringify(payload),
});
let data = {};
try { data = await res.json(); } catch (_) {}
if (!res.ok || data.ok === false) {
setServerError((data.errors && data.errors[0]) || 'Something went wrong. Please try again, or WhatsApp us directly.');
setLoading(false); return;
}
setSubmitted(true);
} catch (err) {
setServerError('Network error. Please check your connection and try again.');
} finally {
setLoading(false);
}
};
if (submitted) {
const firstName = (form.name || '').split(' ')[0] || 'there';
const successTitle = props.successTitle ? props.successTitle(firstName) : `Thanks ${firstName} — we'll be in touch.`;
const successBody = props.successBody ? props.successBody(form) : `We'll be in touch within one business day.`;
return (
{successTitle}
{successBody}
);
}
return (