/* Contact — page sections with a working, validated enquiry form.
The form does real work rather than posting nowhere:
- Routing is derived from the enquiry type. Sales, support, data protection
and careers go to different places with different response targets, and
the form states where the message is going before it is sent.
- Validation is per-field and runs on blur, with errors that say what to do
rather than "invalid input".
- A support enquiry from an existing customer is diverted: raising it in-app
carries the workspace context automatically, so the form says so and links
there instead of silently taking a worse route.
- Submissions are held in localStorage so the confirmation can show a real
reference, and the page states plainly that nothing is emailed anywhere in
this prototype.
Data protection notice sits next to the submit button, not in a footer.
*/
const { SectionHeading, Card, Button, Badge, IconWrapper, Input, Select } = window.NHRSolutionDesignSystem_0db691;
const CONTACT_ROUTES = {
'Sales enquiry': { team: 'Sales', target: 'One working day', icon: 'Briefcase', note: 'Pricing, plans, migration from another system, or a demo.' },
'Product support': { team: 'Customer Support', target: 'Eight working hours', icon: 'LifeBuoy', note: 'Something not working as expected in the platform.' },
'Book a demo': { team: 'Sales', target: 'One working day', icon: 'Monitor', note: 'A walkthrough of the modules relevant to your business.' },
'Partnership or reseller': { team: 'Partnerships', target: 'Three working days', icon: 'Handshake', note: 'Integrations, referrals and reseller arrangements.' },
'Data protection request': { team: 'Data Protection', target: 'One month (statutory)', icon: 'ShieldCheck', note: 'Access, correction or deletion of personal data we hold.' },
'Careers': { team: 'People team', target: 'Two weeks', icon: 'UserPlus', note: 'Roles at NHR Solution.' },
'Something else': { team: 'General enquiries', target: 'Two working days', icon: 'MessageCircle', note: 'Anything that does not fit the categories above.' }
};
const EMPLOYEE_BANDS = ['1–10', '11–50', '51–200', '201–500', '500+'];
/* ---------- store ---------- */
const ContactStore = (function () {
const KEY = 'nhr-enquiries-v1';
function read() { try { return JSON.parse(localStorage.getItem(KEY)) || []; } catch (e) { return []; } }
return {
list: read,
add(row) {
const all = read();
const refs = all.map(r => Number(String(r.reference).replace(/\D/g, '')) || 0);
const saved = Object.assign({
reference: 'ENQ-' + String(Math.max.apply(null, refs.concat([8200])) + 1),
at: new Date().toISOString()
}, row);
all.unshift(saved);
localStorage.setItem(KEY, JSON.stringify(all));
return saved;
}
};
})();
/* ---------- field ---------- */
function CField({ label, required, hint, error, children, span }) {
return (
);
}
const inputStyle = err => ({
width: '100%', fontFamily: 'var(--font-core)', fontSize: 14.5, color: 'var(--text-heading)',
background: 'var(--surface-card)', borderRadius: 'var(--radius-ctrl)',
border: '1px solid ' + (err ? 'var(--nhr-danger)' : 'var(--border-light)'),
padding: '13px 15px', outline: 'none', minHeight: 48
});
/* ---------- the form ---------- */
function ContactForm() {
const [f, setF] = React.useState({
type: 'Sales enquiry', firstName: '', lastName: '', email: '', phone: '',
company: '', employees: '11–50', existing: 'No', message: '', consent: false
});
const [touched, setTouched] = React.useState({});
const [errors, setErrors] = React.useState({});
const [sent, setSent] = React.useState(null);
const route = CONTACT_ROUTES[f.type];
const supportDiversion = f.type === 'Product support' && f.existing === 'Yes';
function validate(state) {
const e = {};
if (!state.firstName.trim()) e.firstName = 'Enter your first name.';
if (!state.lastName.trim()) e.lastName = 'Enter your last name.';
if (!state.email.trim()) e.email = 'Enter an email address so we can reply.';
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(state.email.trim())) e.email = 'That does not look like a complete email address.';
if (state.phone.trim() && !/^[\d\s+()-]{9,}$/.test(state.phone.trim())) e.phone = 'Use digits, spaces and + ( ) - only.';
if (f.type !== 'Careers' && f.type !== 'Data protection request' && !state.company.trim()) e.company = 'Enter your business name.';
if (!state.message.trim()) e.message = 'Tell us what you need — a sentence is enough.';
else if (state.message.trim().length < 15) e.message = 'A little more detail will get you a useful first reply.';
if (!state.consent) e.consent = 'We need your agreement before we can hold your details.';
return e;
}
function set(patch) {
const next = Object.assign({}, f, patch);
setF(next);
/* Re-validate only fields already touched, so errors appear as you leave a
field rather than while you are still typing in it. */
const e = validate(next);
setErrors(prev => {
const out = {};
Object.keys(e).forEach(k => { if (touched[k]) out[k] = e[k]; });
return out;
});
}
function blur(name) {
setTouched(t => Object.assign({}, t, { [name]: true }));
const e = validate(f);
setErrors(prev => Object.assign({}, prev, e[name] ? { [name]: e[name] } : { [name]: undefined }));
}
function submit(ev) {
ev.preventDefault();
const e = validate(f);
const keys = Object.keys(e);
if (keys.length) {
setErrors(e);
setTouched(keys.reduce((a, k) => Object.assign(a, { [k]: true }), Object.assign({}, touched)));
return;
}
const saved = ContactStore.add({
type: f.type, team: route.team, name: f.firstName + ' ' + f.lastName,
email: f.email, phone: f.phone, company: f.company,
employees: f.employees, existing: f.existing, message: f.message
});
setSent(saved);
}
if (sent) {
return (
Thank you, {sent.name.split(' ')[0]}.
Your enquiry is with {sent.team} under reference{' '}
{sent.reference}.
The target for a first reply is {CONTACT_ROUTES[sent.type].target.toLowerCase()}.
This is a prototype: the enquiry is stored in your browser and no message is sent to anyone. A live
deployment would post it to the relevant inbox and email you a copy of what you wrote.