/* Demo — Book a Demo page.
The brief listed every field for this form. It is built as a three-step
booking rather than one long column, because a ten-field form asking for a
phone number before it has earned anything is the most abandoned pattern on
a SaaS site.
What makes it functional rather than decorative:
- Real date and time selection. A working-day calendar generated from today,
weekends disabled, with morning and afternoon slots; the chosen slot is
shown back in plain English before confirming.
- The product interest list is read from the app's own module registry, so
the form cannot offer a demo of something that is not built.
- Employee count drives a live price estimate from the same pricing data the
pricing page uses, so the visitor knows roughly what it costs before the
call rather than after it.
- Step validation: you cannot advance past a step with an invalid field, and
the step indicator shows which are complete.
- The booking is stored and a reference issued, with the page stating that
nothing is emailed in this prototype.
*/
const { SectionHeading, Card, Button, Badge, IconWrapper } = window.NHRSolutionDesignSystem_0db691;
const DEMO_DAY = 864e5;
const INDUSTRIES = ['Healthcare', 'Construction', 'Hospitality', 'Retail', 'Logistics', 'Professional services', 'Care services', 'Education', 'Charity', 'Other'];
const DEMO_BANDS = ['1–5', '6–10', '11–15', '16–20', '21+'];
const BAND_TOP = { '1–5': 5, '6–10': 10, '11–15': 15, '16–20': 20, '21+': 21 };
const SLOTS = ['09:30', '10:30', '11:30', '13:30', '14:30', '15:30', '16:30'];
const DemoStore = (function () {
const KEY = 'nhr-demos-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: 'DEMO-' + String(Math.max.apply(null, refs.concat([1400])) + 1), at: new Date().toISOString() }, row);
all.unshift(saved);
localStorage.setItem(KEY, JSON.stringify(all));
return saved;
},
/* A slot already taken cannot be offered again. With one seeded booking
this is mostly demonstrative, but the check is real. */
taken(date, time) { return read().some(r => r.date === date && r.time === time); }
};
})();
/* Next 21 days, weekends excluded — a demo is a working-day activity. */
function workingDays(count) {
const out = [];
let d = new Date(); d.setHours(0, 0, 0, 0);
d = new Date(d.getTime() + DEMO_DAY); /* never today */
while (out.length < count) {
const day = d.getDay();
if (day !== 0 && day !== 6) out.push(new Date(d));
d = new Date(d.getTime() + DEMO_DAY);
}
return out;
}
function dfield(label, required, hint, error, children, span) {
return (
);
}
const dstyle = 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
});
/* ---------- step indicator ---------- */
function DemoSteps({ step, done }) {
const labels = ['About you', 'Your business', 'Pick a time'];
return (
{labels.map((l, i) => {
const active = step === i, complete = done.indexOf(i) > -1 && !active;
return (
{complete ? : i + 1}{l}
);
})}
);
}
/* ---------- the booking form ---------- */
function DemoForm({ onBooked }) {
/* Products offered are read from the app registry so nothing unbuilt is
advertised as demoable. */
const nav = window.APP_NAV || [];
const screens = window.APP_SCREENS || {};
const products = nav.filter(n => screens[n.label] && n.label !== 'Overview' && n.label !== 'Settings').map(n => n.label);
const [step, setStep] = React.useState(0);
const [done, setDone] = React.useState([]);
const [errors, setErrors] = React.useState({});
const [booked, setBooked] = React.useState(null);
const [f, setF] = React.useState({
firstName: '', lastName: '', email: '', phone: '',
business: '', employees: '6–10', industry: 'Healthcare', role: '',
interests: ['Employees', 'Leave'], date: '', time: '', message: '', consent: false
});
const days = React.useMemo(() => workingDays(15), []);
const band = window.nhrPriceFor(BAND_TOP[f.employees] || 10);
function set(patch) { setF(p => Object.assign({}, p, patch)); }
function validateStep(i, state) {
const e = {};
if (i === 0) {
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 = 'We need an email to send the invitation.';
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 (i === 1) {
if (!state.business.trim()) e.business = 'Enter your business name.';
if (!state.interests.length) e.interests = 'Pick at least one area so we can tailor the call.';
}
if (i === 2) {
if (!state.date) e.date = 'Choose a day.';
if (!state.time) e.time = 'Choose a time.';
if (!state.consent) e.consent = 'We need your agreement before we can hold your details.';
}
return e;
}
function next() {
const e = validateStep(step, f);
if (Object.keys(e).length) { setErrors(e); return; }
setErrors({});
setDone(d => d.indexOf(step) > -1 ? d : d.concat([step]));
setStep(step + 1);
}
function submit() {
const e = validateStep(2, f);
if (Object.keys(e).length) { setErrors(e); return; }
const saved = DemoStore.add({
name: f.firstName + ' ' + f.lastName, email: f.email, phone: f.phone,
business: f.business, employees: f.employees, industry: f.industry, role: f.role,
interests: f.interests.slice(), date: f.date, time: f.time, message: f.message
});
setDone([0, 1, 2]);
setBooked(saved);
if (onBooked) onBooked(saved);
}
function toggleInterest(label) {
set({ interests: f.interests.indexOf(label) > -1 ? f.interests.filter(x => x !== label) : f.interests.concat([label]) });
}
if (booked) {
const when = new Date(booked.date + 'T' + booked.time);
return (
You are booked in, {booked.name.split(' ')[0]}.
{when.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'long' })} at {booked.time}
{' '}
— reference{' '}
{booked.reference}.
Allow 30 minutes; we will cover {booked.interests.slice(0, 3).join(', ').toLowerCase()}
{booked.interests.length > 3 ? ' and ' + (booked.interests.length - 3) + ' more' : ''}.
You do not have to wait for the call to look around — the platform opens with demo data and no card details.
This is a prototype: the booking is stored in your browser and no invitation is sent. A live deployment would
create the calendar event and email both parties.
);
}
return (
/* nhr-booking keeps the global CTA binding from hijacking "Book My Demo". */
{dfield('Business name', true, null, errors.business,
set({ business: e.target.value })} autoComplete="organization" style={dstyle(errors.business)} />)}
{dfield('Your role', false, 'So we pitch it at the right level.', null,
set({ role: e.target.value })} placeholder="HR Manager" style={dstyle(false)} />)}
{dfield('Employees', false, 'Shows your price below.', null,
)}
{dfield('Industry', false, null, null,
)}
{(
{band
? £{band.monthly} a month plus VAT for {f.employees} employees, with every feature included.
: Teams of 21 or more get a quote, which we can cover on the call. }
See all prices on the pricing page.
{errors.interests
? {errors.interests}
:
{f.interests.length} selected. Thirty minutes covers three or four areas properly — more than that and it
becomes a tour rather than a demonstration.
}
)}
{step === 2 && (
Pick a time
Day *
{days.map(d => {
const iso = d.toISOString().slice(0, 10);
const on = f.date === iso;
return (
);
})}
{errors.date && (
{errors.date}
)}
Weekends are not shown — demos run on working days.