// SCN2A Australia — "Add your family" (Join) page.
//
// FIVE steps, each one saved the moment it is completed:
// 1 About you 4 The Family Map (optional)
// 2 The person with SCN2A — or, if bereaved, a single In Memory question
// 3 Address and their doctor 5 Staying connected
// ...then a Done screen. See docs/intake-forms-redesign.md for why the form
// asks what it asks, and docs/intake-payload-contract.md for the exact wire
// format below — that contract is binding; this file must not invent fields.
//
// SAVE-AS-YOU-GO, AND WHY CONSENT MOVED TO STEP 1
// Earlier builds of this form had one submit button at the end: a family who
// stopped partway gave the org nothing at all, and consent was asked for on
// the very last screen after three screens of a child's details had already
// been typed in. Both of those are gone. Every completed step is POSTed to
// /api/join on its own, so an abandoned form still leaves a contactable
// record. That only works honestly if consent is asked for before anything is
// stored — so Q8, the storage consent checkbox, sits on step 1 and step 1
// cannot be left without it. api/join.js re-checks this server-side; it never
// trusts the client alone.
//
// ONE submissionId FOR THE WHOLE FORM
// A UUID v4 is minted the moment step 1's POST succeeds (or reused if one
// already exists — see ensureSubmissionId) and sent with every subsequent
// POST. n8n upserts on submissionId, so five POSTs from one family produce
// one Notion record, not five. It lives in sessionStorage ONLY as that one
// opaque id — never the payload itself. See JOIN_PENDING_KEY below for why
// that boundary is absolute.
//
// A FAILED POST NEVER SILENTLY ADVANCES
// If a step's POST fails, the family stays on that step and sees an inline
// "try again" banner. Nothing is assumed saved that was not confirmed saved.
//
// WHY NOTHING IS EVER WRITTEN TO localStorage
// Earlier builds parked the whole payload in localStorage under
// JOIN_PENDING_KEY after a failed submit — a child's full name, exact date of
// birth, home address, phone, variant and, in the old design, seizure
// history — on a key nothing ever read back. It rescued no submissions and
// simply left that record sitting in whatever browser the family happened to
// use, including a shared or library machine, until they manually cleared
// site data. That key is still purged on mount for anyone who still has one.
// This rewrite does not repeat the mistake in a new shape: sessionStorage
// holds the submissionId and nothing else, ever.
//
// BEREAVEMENT
// A quiet, optional tick under step 2, never a question put to every family.
// Ticking it swaps step 4's map for a single "would you like them remembered"
// question, moves Bereavement support to the top of step 5's needs list, and
// flags the record for a person to read. Nothing about it is ever published
// automatically, on this screen or afterwards — see the Done screen below.
const JOIN_ENDPOINT = '/api/join';
// Legacy only. Previously held a full submission after a failed POST, on a
// key no code ever read. Retained solely so JoinPage can delete it on mount.
const JOIN_PENDING_KEY = 'scn2a-join-pending';
// Holds ONLY the submissionId (a UUID v4) for the life of this browser tab —
// never the form's answers. See the file header for why that line is firm.
const JOIN_SESSION_ID_KEY = 'scn2a-join-submission-id';
const JOIN_SUPPORT_EMAIL = 'info@scn2aaustralia.org';
const JOIN_STATES = ['NSW', 'VIC', 'QLD', 'SA', 'WA', 'TAS', 'ACT', 'NT', 'Outside Australia'];
const JOIN_RELATIONSHIPS = ['Parent or guardian', 'Self (adult with SCN2A)', 'Other family member', 'Other'];
const JOIN_VARIANT_TYPES = ['Gain of function', 'Loss of function', 'Mixed', 'Other or unsure'];
const JOIN_DOCTOR_SPECIALTIES = ['Neurologist', 'Paediatrician', 'Geneticist', 'GP', 'Other'];
const JOIN_MAP_TOPICS = ['Diagnosis and the early days', 'Seizures and medication', 'Therapies and interventions', 'School and NDIS', 'Daily life and routines', 'Being an adult with SCN2A'];
const JOIN_NEEDS_BASE = ['Someone to talk to', 'Information about SCN2A', 'Help with NDIS or funding', 'Connecting with other families', 'Research and studies', 'Just keeping in touch for now'];
const JOIN_NATURAL_HISTORY = ['Yes', 'No', 'Tell me more'];
const JOIN_RESEARCH_CONTACT = ['Yes', 'No', 'Maybe, tell me more'];
const JOIN_PEER_SUPPORT = [
'I would like to meet families near me or with a similar presentation',
'I would like to be a peer support for another family',
'I would like to receive a peer support partner',
];
const JOIN_VOLUNTEER = ['Yes', 'Not at this stage', 'Tell me more'];
const JOIN_MEMORIAL = ['Yes', 'No', 'Not right now'];
const JOIN_EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
// A UUID v4, minted client-side. Prefer the browser's own generator; fall
// back to a manual one for older browsers so the form never depends on it.
function joinUuidV4() {
if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') return crypto.randomUUID();
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
const r = (Math.random() * 16) | 0;
const v = c === 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
// ---- Shared field styling (mirrors PinPreviewForm on the Family Map page) ----
const joinFieldStyle = (error) => ({
width: '100%', boxSizing: 'border-box', padding: '10px 12px',
border: `1px solid ${error ? '#8E3B5E' : '#D5CFBF'}`, borderRadius: 5,
fontFamily: 'inherit', fontSize: 14, color: '#0D1B2A', background: '#fff',
});
const JOIN_LABEL_STYLE = { display: 'block', fontSize: 11, fontWeight: 600, color: '#0D1B2A', marginBottom: 6 };
const JOIN_HINT_STYLE = { fontSize: 11.5, color: '#6B6659', lineHeight: 1.55, margin: '6px 0 0' };
const JOIN_ERROR_STYLE = { fontSize: 12.5, color: '#8E3B5E', marginTop: 6, lineHeight: 1.4 };
// One labelled field: label (+ optional tag), the control, then hint and error.
function JoinField({ id, label, optional, hint, error, children, style }) {
return (
{children}
{hint &&
{hint}
}
{error &&
{error}
}
);
}
// A small eyebrow divider used to group fields inside a step.
function JoinGroupLabel({ children }) {
return (
{children}
);
}
// A framed consent/opt-in checkbox. `tone` shifts the frame: 'map' (soft
// blue) or 'registry' (sand). When `error` is set the frame turns mulberry.
function JoinConsent({ id, checked, onChange, tone, error, children }) {
const bg = tone === 'map' ? '#E5EDF8' : '#EFEAE1';
return (
{error &&
{error}
}
);
}
// Inline retry banner shown on a step whose POST just failed. Reuses the same
// mulberry-accented banner language as the rest of the form's error states —
// this is new behaviour (per-step saving needs a way to fail without silently
// advancing) but it should not look like a new design.
function JoinRetryBanner({ message, onRetry, busy }) {
return (
{message}
);
}
// ---- Progress indicator: five steps, plus Done ----
function JoinProgress({ step }) {
const labels = ['About you', 'The person with SCN2A', 'Address & doctor', 'Family Map', 'Staying connected', 'Done'];
return (
{labels.map((label, i) => {
const done = i < step;
const current = i === step;
return (
{done ? '✓' : i + 1}
{label}{i === 3 && optional}
{i < labels.length - 1 && (
)}
);
})}
);
}
// ---- The page ----
function JoinPage({ navigate }) {
// 0-4 are the five steps (matching the contract's step 1-5); 5 is Done.
const [step, setStep] = React.useState(0);
// Step 1 (index 0) — about you. `consent` is the storage consent required
// to leave this step, and is re-sent with every later POST per the contract.
const [about, setAboutState] = React.useState({
firstName: '', lastName: '', email: '', phone: '', relationship: '', state: '', suburb: '',
consent: false, newsletter: false,
});
// Step 2 (index 1) — the person with SCN2A, plus the quiet bereavement opt-in.
const [person, setPersonState] = React.useState({
personFirstName: '', personLastName: '', personDob: '', variantType: '', variant: '',
deceased: false, deceasedDate: '',
});
// Step 3 (index 2) — address and their doctor.
const [address, setAddressState] = React.useState({
streetAddress: '', addressSuburb: '', addressState: '', postcode: '', country: 'Australia',
doctorName: '', doctorClinic: '', doctorSpecialty: '', doctorState: '',
secondContactName: '', secondContactDetail: '',
});
// Step 4 (index 3) — the Family Map, or (if deceased) the In Memory question.
const [mapStep, setMapStepState] = React.useState({
mapConsent: false, mapTopics: [], mapBlurb: '', openToMessages: false, memorialConsent: '',
});
// Step 5 (index 4) — staying connected.
const [connect, setConnectState] = React.useState({
needs: [], naturalHistoryStudy: '', researchContact: '', peerSupport: [], volunteer: '', anythingElse: '',
});
const [errors, setErrors] = React.useState({});
const [submitting, setSubmitting] = React.useState(false);
const [submitError, setSubmitError] = React.useState(null);
const [website, setWebsite] = React.useState(''); // honeypot — humans never see it
// Whether step 1's POST has ever succeeded. Every later step blocks on its
// own POST succeeding before it will advance, so in normal use this is
// already guaranteed true by the time anyone reaches the Done screen — it
// is kept as a defensive check so that screen never has to lie.
const [step1Saved, setStep1Saved] = React.useState(false);
// In-memory fallback if sessionStorage throws (private browsing, storage
// disabled). The id still never touches localStorage or the payload.
const fallbackIdRef = React.useRef(null);
// Purge the legacy pending-submission key. Anyone whose POST failed under an
// earlier build still has their child's full clinical and address record in
// this browser, unread and unexpiring. Nothing recovers it, so remove it.
React.useEffect(() => {
try { localStorage.removeItem(JOIN_PENDING_KEY); } catch (e) { /* ignore storage errors */ }
}, []);
const setAbout = (patch) => { setAboutState(a => ({ ...a, ...patch })); setErrors({}); setSubmitError(null); };
const setPerson = (patch) => { setPersonState(p => ({ ...p, ...patch })); setErrors({}); setSubmitError(null); };
const setAddress = (patch) => { setAddressState(a => ({ ...a, ...patch })); setErrors({}); setSubmitError(null); };
const setMap = (patch) => { setMapStepState(m => ({ ...m, ...patch })); setErrors({}); setSubmitError(null); };
const setConnect = (patch) => { setConnectState(c => ({ ...c, ...patch })); setErrors({}); setSubmitError(null); };
const toggleIn = (list, value) => (list.includes(value) ? list.filter(v => v !== value) : [...list, value]);
const scrollToFlow = () => {
const el = document.getElementById('join-flow');
if (!el) return;
const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
el.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
};
const goTo = (n) => { setStep(n); setErrors({}); setSubmitError(null); scrollToFlow(); };
// ---- submissionId: minted once, kept in sessionStorage as an id only ----
const ensureSubmissionId = () => {
try {
let id = sessionStorage.getItem(JOIN_SESSION_ID_KEY);
if (!id) { id = joinUuidV4(); sessionStorage.setItem(JOIN_SESSION_ID_KEY, id); }
return id;
} catch (e) {
if (!fallbackIdRef.current) fallbackIdRef.current = joinUuidV4();
return fallbackIdRef.current;
}
};
// ---- POST one step's fields. Never advances the step itself — callers do
// that only once this resolves true. ----
const postStep = async (stepNumber, complete, fields) => {
const payload = {
submissionId: ensureSubmissionId(),
step: stepNumber,
complete: !!complete,
consent: !!about.consent,
source: 'website-join-form',
website, // honeypot — always '' for humans
...fields,
};
setSubmitting(true);
setSubmitError(null);
try {
const res = await fetch(JOIN_ENDPOINT, {
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload),
});
if (!res.ok) {
// The handler explains every rejection in JSON. Throwing that away and
// blaming the network is how a 400 that fired on every single
// submission came to look like a flaky connection: the message said
// "try again", trying again did the same thing, and the real reason
// was sitting unread in the response body.
let reason = '';
try { const b = await res.json(); reason = (b && b.error) || ''; } catch (e) { /* no JSON body */ }
const rejected = new Error(reason || `Save failed (HTTP ${res.status}).`);
rejected.serverRejected = true;
throw rejected;
}
setSubmitting(false);
return true;
} catch (err) {
// Always leave a trace. Nothing here reaches the family, and without it
// the only symptom is a banner that names the wrong cause.
console.error(`[join] step ${stepNumber} did not save:`, err);
setSubmitting(false);
setSubmitError(err && err.serverRejected
? `That did not save: ${err.message} Your answers on this screen are still here, nothing is lost. If it keeps happening, please email ${JOIN_SUPPORT_EMAIL} and we will add your family by hand.`
: 'That did not save, sorry, likely just a dropped connection. Your answers on this screen are still here, nothing is lost. Please try again.');
return false;
}
};
// ---- Step 1 — About you ----
const validateAbout = () => {
const e = {};
if (!about.firstName.trim()) e.firstName = 'Please tell us your first name.';
if (!about.lastName.trim()) e.lastName = 'Please tell us your last name.';
if (!about.email.trim()) e.email = 'Please enter your email address.';
else if (!JOIN_EMAIL_RE.test(about.email.trim())) e.email = 'That email address does not look right, please check it.';
if (!about.phone.trim()) e.phone = 'Please enter a phone number.';
if (!about.relationship) e.relationship = 'Please choose the option closest to you.';
if (!about.state) e.state = 'Please choose your state or territory.';
if (!about.suburb.trim()) e.suburb = 'Please tell us your suburb or town.';
if (!about.consent) e.consent = 'We need this to save your answers as you go. Please tick the box to continue.';
return e;
};
const continueFromAbout = async () => {
const e = validateAbout();
if (Object.keys(e).length) { setErrors(e); return; }
setErrors({});
const ok = await postStep(1, false, {
firstName: about.firstName.trim().slice(0, 80),
lastName: about.lastName.trim().slice(0, 80),
email: about.email.trim().slice(0, 160),
phone: about.phone.trim().slice(0, 40),
relationship: about.relationship,
state: about.state,
suburb: about.suburb.trim().slice(0, 80),
newsletter: !!about.newsletter,
});
if (ok) { setStep1Saved(true); goTo(1); }
};
// ---- Step 2 — The person with SCN2A ----
const validatePerson = () => {
const e = {};
if (!person.personFirstName.trim()) e.personFirstName = 'Please tell us their first name.';
if (!person.personLastName.trim()) e.personLastName = 'Please tell us their last name.';
if (!person.personDob) e.personDob = 'Please enter their date of birth.';
else if (new Date(person.personDob) > new Date()) e.personDob = 'Please check the date of birth.';
if (!person.variantType) e.variantType = 'Please choose an option, "Other or unsure" is fine.';
if (person.deceased && person.deceasedDate && new Date(person.deceasedDate) > new Date()) e.deceasedDate = 'Please check this date.';
return e;
};
const continueFromPerson = async () => {
const e = validatePerson();
if (Object.keys(e).length) { setErrors(e); return; }
setErrors({});
// deceasedDate is left out entirely unless the family ticked the
// bereavement box and gave a date. Sending '' for everyone else is what
// made the server's date check reject every ordinary step 2 — absent and
// empty are not the same thing (docs/intake-payload-contract.md).
const personFields = {
personFirstName: person.personFirstName.trim().slice(0, 80),
personLastName: person.personLastName.trim().slice(0, 80),
personDob: person.personDob,
variantType: person.variantType,
variant: person.variant.trim().slice(0, 120),
deceased: !!person.deceased,
};
if (person.deceased && person.deceasedDate) personFields.deceasedDate = person.deceasedDate;
const ok = await postStep(2, false, personFields);
if (ok) {
// Address & state are pre-filled from step 1, once, without overwriting
// anything the family has already typed here themselves.
setAddressState(a => ({
...a,
addressSuburb: a.addressSuburb || about.suburb,
addressState: a.addressState || about.state,
}));
goTo(2);
}
};
// ---- Step 3 — Address and their doctor ----
const validateAddress = () => {
const e = {};
if (!address.streetAddress.trim()) e.streetAddress = 'Please enter a street address.';
if (!address.addressSuburb.trim()) e.addressSuburb = 'Please enter a suburb or town.';
if (!address.addressState) e.addressState = 'Please choose a state or territory.';
if (!address.postcode.trim()) e.postcode = 'Please enter a postcode.';
if (!address.country.trim()) e.country = 'Please enter a country.';
if (!address.doctorName.trim()) e.doctorName = "Please enter their doctor's name.";
return e;
};
const continueFromAddress = async () => {
const e = validateAddress();
if (Object.keys(e).length) { setErrors(e); return; }
setErrors({});
const ok = await postStep(3, false, {
streetAddress: address.streetAddress.trim().slice(0, 200),
addressSuburb: address.addressSuburb.trim().slice(0, 80),
addressState: address.addressState,
postcode: address.postcode.trim().slice(0, 12),
country: address.country.trim().slice(0, 80),
doctorName: address.doctorName.trim().slice(0, 120),
doctorClinic: address.doctorClinic.trim().slice(0, 160),
doctorSpecialty: address.doctorSpecialty,
doctorState: address.doctorState,
secondContactName: address.secondContactName.trim().slice(0, 120),
secondContactDetail: address.secondContactDetail.trim().slice(0, 160),
});
if (ok) goTo(3);
};
// ---- Step 4 — The Family Map (optional), or the In Memory question ----
// Nothing here is required: mapTopics and mapBlurb stay optional even once
// mapConsent is ticked (a pin with just a first name and a general area is
// worth having; today's mandatory wall in front of a pin is the thing this
// change removes). Unavailable outside Australia, said where the box would
// be. If the person has died, this step is replaced entirely.
const mapUnavailable = !person.deceased && about.state === 'Outside Australia';
const buildStep4Fields = () => {
if (person.deceased) return { memorialConsent: mapStep.memorialConsent || '' };
if (mapUnavailable) return { mapConsent: false, mapTopics: [], mapBlurb: '', openToMessages: false };
return {
mapConsent: !!mapStep.mapConsent,
mapTopics: mapStep.mapConsent ? mapStep.mapTopics : [],
mapBlurb: mapStep.mapConsent ? mapStep.mapBlurb.trim().slice(0, 200) : '',
openToMessages: mapStep.mapConsent ? !!mapStep.openToMessages : false,
};
};
const continueFromMap = async () => {
setErrors({});
const ok = await postStep(4, false, buildStep4Fields());
if (ok) goTo(4);
};
// ---- Step 5 — Staying connected ----
const validateConnected = () => {
const e = {};
if (!connect.naturalHistoryStudy) e.naturalHistoryStudy = 'Please choose an option, "Tell me more" is fine.';
return e;
};
const continueFromConnected = async () => {
const e = validateConnected();
if (Object.keys(e).length) { setErrors(e); return; }
setErrors({});
const ok = await postStep(5, true, {
needs: connect.needs,
naturalHistoryStudy: connect.naturalHistoryStudy,
researchContact: connect.researchContact,
peerSupport: connect.peerSupport,
volunteer: connect.volunteer,
anythingElse: connect.anythingElse.trim().slice(0, 2000),
});
if (ok) goTo(5);
};
// ---- Shared step chrome ----
const stepHeader = (stepNo, title, intro) => (
{stepHeader('Step 1 of 5 · About you', "Let's start with you.", 'A few quick things so we know who we are talking to, and can save your answers as you go.')}
{stepHeader('Step 2 of 5 · The person with SCN2A', 'Tell us about them.', "Just their name, date of birth and variant type. Anything clinical beyond this belongs to the natural history study, not this form.")}
If the person you are registering has died, you can tell us here. We will take care with what happens next, and we will not ask you anything else about them today.
{stepHeader('Step 3 of 5 · Address and their doctor', 'Where you are, and who looks after them.',
'This is private and never shown anywhere, including the map. It lets us post things to you, and helps us see where clinicians who know SCN2A are around the country.')}
setAddress({ streetAddress: e.target.value })} style={joinFieldStyle(errors.streetAddress)} />
Optional. A phone changes, a relationship changes, one parent carries the load — a second contact is the cheapest insurance against losing a family entirely.
{stepHeader('Step 4 of 5 · In Memory', 'Would you like them remembered?',
'This step usually asks about the Family Map. Because you told us they have passed away, we ask something gentler instead.')}
Nothing is ever published automatically. A member of our team will always be in touch personally first, and any In Memory page only ever goes up with your yes.
{submitError && }
{navRow(
<>
)}
);
}
return (
{stepHeader('Step 4 of 5 · The Family Map · Optional', 'Add your pin to the Family Map.',
'Completely optional. If the map is not for you, leave the box below unticked and carry on, the rest of the form works exactly the same.')}
{mapUnavailable ? (
The Family Map covers Australia only, so we cannot place a pin from outside it. No problem at all, everything else in this form still applies, and we would love to stay in touch.
) : (
<>
✓
The map only ever shows a first name, a general area and an age. Pins are placed approximately by our team, never at an address, and every submission is reviewed before a pin appears.
setMap({ mapConsent: e.target.checked })}>
Yes, show our family on the SCN2A Family Map — first name, general area and an age only.
{mapStep.mapConsent && (