// SCN2A Family Map — a community connection map of Australia. // // Families add themselves via a short external survey; each becomes a pin on // the map and a card in the list, and its state's count ticks up. Where a // family opts in, others can ask our team to introduce // them. No family ever contacts another directly through this page. // // The map starts EMPTY by design: every state shows 0 until families join. // Reviewed families load from families.json; introduction requests post to // /api/introduction.js; survey CTAs open FMAP_SURVEY_URL (see the constants // below). State geometry is baked locally in lib/au-states-geo.js // (window.AU_STATES) — no runtime CDN or D3 dependency. // ---- Geometry + projection (baked offline, see lib/au-states-geo.js) ---- const AU = (typeof window !== 'undefined' && window.AU_STATES) || null; const FMAP_STATES_GEO = AU ? AU.states : []; const FMAP_ANCHORS = AU ? AU.anchors : {}; const FMAP_PROJ = (AU && AU.proj) || { scale: 1100, tx: 500, ty: 370, lng0: 133, lat0: -27 }; const FMAP_VIEWBOX = (AU && AU.viewBox) || '0 0 1000 780'; const FMAP_D2R = Math.PI / 180; const fmapMercY = (deg) => Math.log(Math.tan(Math.PI / 4 + (deg * FMAP_D2R) / 2)); const FMAP_MY0 = fmapMercY(FMAP_PROJ.lat0); // Project [lng,lat] to the same pixel space as the baked polygons/badges. function fmapProject(lng, lat) { return [ FMAP_PROJ.tx + FMAP_PROJ.scale * ((lng - FMAP_PROJ.lng0) * FMAP_D2R), FMAP_PROJ.ty - FMAP_PROJ.scale * (fmapMercY(lat) - FMAP_MY0), ]; } const STATE_NAMES = (AU && AU.names) || { NSW: 'New South Wales', VIC: 'Victoria', QLD: 'Queensland', SA: 'South Australia', WA: 'Western Australia', TAS: 'Tasmania', NT: 'Northern Territory', ACT: 'Australian Capital Territory', }; const STATE_ORDER = ['All', 'NSW', 'VIC', 'QLD', 'SA', 'WA', 'TAS', 'NT', 'ACT']; // ---- Pin marker geometry (a single teardrop path, reused for every pin) ---- // Local coordinate space: the tip (the actual located point) sits at (0,0); // the rounded head is centred above it. Callers position the pin with an SVG // `transform="translate(x,y)"` on a wrapping , then layer the drop // animation and any hover/selected scaling on nested s so those transforms // never collide with each other (see fmap-pin-drop in styles.css). const FMAP_PIN_D = 'M0,0C-6.4,-9.8 -11,-16.2 -11,-22 A11,11 0 1,1 11,-22 C11,-16.2 6.4,-9.8 0,0 Z'; const FMAP_PIN_HEAD_Y = -22; // Deterministic "randomness" (no Math.random) so a given preview submission // always renders at the same nearby spot on re-render, while a fresh // submission (different ts) lands at a visibly different nearby spot. function fmapJitter(seed, spread) { let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0; const a = ((h % 1000) / 1000) - 0.5; const b = (((h >> 10) % 1000) / 1000) - 0.5; return [a * 2 * spread, b * 2 * spread]; } // Age for the card, from the birth year the public file carries. // // With only a year, the true age is one of two numbers: someone born in 2002 // is 23 until their birthday in 2026 and 24 after it. We show the lower one, // so the card never gives a family an age their child has not reached yet. // The cost is that it lags: it catches up on 1 January rather than on the // birthday, so it can read a year young for most of a year. // // That is the deliberate trade for not publishing a date of birth. The exact // date is collected and held privately — see docs/family-map-curation.md. // // Clamped at 0 so a baby born this year reads "age 0" rather than -1. function fmapAgeFromBirthYear(birthYear) { return Math.max(0, new Date().getFullYear() - birthYear - 1); } // The "Add your family" survey is the on-site combined Map + Registry flow at // /join (src/pages-join.jsx). Set FMAP_SURVEY_URL to an absolute URL only if // the survey ever moves to an external tool (Google Forms / Jotform / Typeform); // while null, every survey CTA navigates to the internal join route. const FMAP_SURVEY_URL = null; const FMAP_JOIN_ROUTE = 'join'; // Introduction request endpoint (the Vercel serverless function in // /api/introduction.js). Nothing travels from one family to another here. The // request is emailed to the team's monitored inbox and stops there; they // speak to both families and connect them only once both have agreed. Nothing // about the request is stored. If the POST fails the modal reports the failure // — it must never show a confirmation screen for a request that reached nobody. const FMAP_INTRO_ENDPOINT = '/api/introduction'; // Note length cap, mirrored by MAX_NOTE_CHARS in /api/introduction.js. The note // is optional and lands in one person's inbox, so this is about keeping that // inbox readable rather than a technical limit. Change both ends together. const FMAP_NOTE_MAX = 1000; // The states a requester can pick, matching the map's own state list and the // values families.json is validated against. const FMAP_REQUEST_STATES = ['NSW', 'VIC', 'QLD', 'SA', 'WA', 'TAS', 'NT', 'ACT']; // Reviewed families are served from a static JSON file (curated by the team // after each survey response, per the "we add your pin" step). Ships as [] — // add approved records to vercel-deploy/families.json and redeploy. Record: // { id, name, region, state, role, birthYear, connect, since, topics, blurb, lat, lng } // state ∈ NSW VIC QLD SA WA TAS NT ACT ; connect controls the "Ask us to introduce you" button. // Kept outside /assets so it dodges the year-long immutable cache header. // // NOTHING WRITES TO THIS FILE AUTOMATICALLY. A family completing /join reaches // the intake webhook (or the email backup) and no further — a human has to add // the record here for the pin to exist. The full runbook, the join-payload → // record field mapping and the approved region coordinates are in // docs/family-map-curation.md; validate with `npm run validate:families`. const FMAP_FAMILIES_URL = '/families.json'; // A published record only becomes a visible pin if it has a real state anchor // and finite coordinates. Without this guard a record missing lat/lng still // counts toward the hero total and the state badge, but its pin renders at // translate(NaN,NaN) — the family reads "0 families" (or a count with nothing // to click) and believes they were never added. Drop unusable records instead // of half-showing them, and say so in the console for whoever is curating. // build/validate-families.mjs catches the same problems before deploy. function fmapUsable(records) { const kept = []; const dropped = []; (Array.isArray(records) ? records : []).forEach((f) => { const ok = f && typeof f === 'object' && typeof f.id === 'string' && f.id && typeof f.state === 'string' && Object.prototype.hasOwnProperty.call(STATE_NAMES, f.state) && Number.isFinite(f.lat) && Number.isFinite(f.lng); (ok ? kept : dropped).push(f); }); if (dropped.length && typeof console !== 'undefined' && console.warn) { console.warn( `[family-map] ${dropped.length} record(s) in families.json are missing a valid id, state or lat/lng and were not mapped. ` + 'See docs/family-map-curation.md, then run: npm run validate:families', dropped ); } return kept; } const FMAP_SUPPORT_EMAIL = 'info@scn2aaustralia.org'; // Legacy only. The removed message relay once parked undelivered messages, // including the sender's email address, on this key, and nothing ever read it // back. Retained purely so the dialog can clear it from the browser of anyone // who still carries one. const FMAP_MSG_KEY = 'scn2a_au_messages_v1'; // Sample families (NOT shown) — copy any into FAMILIES to preview the populated map. // eslint-disable-next-line no-unused-vars const SAMPLE_FAMILIES = [ { id: 'f1', name: 'The Nguyen', region: 'Western Sydney', state: 'NSW', role: 'Parents', birthYear: 2020, connect: true, since: '2026', topics: 'Schooling & NDIS', blurb: "Our son was diagnosed at 14 months. We've learned a lot about navigating the NDIS and would love to share notes with other NSW families.", lat: -33.81, lng: 150.92 }, { id: 'f4', name: 'The Williams', region: 'Inner Melbourne', state: 'VIC', role: 'Dad', birthYear: 2021, connect: true, since: '2026', topics: 'Therapies & AAC', blurb: "Our daughter uses an AAC device and we're always keen to swap ideas on communication and therapy with other Victorian families.", lat: -37.81, lng: 144.96 }, { id: 'f12', name: 'The Lee', region: 'Perth', state: 'WA', role: 'Parents', birthYear: 2021, connect: true, since: '2026', topics: 'WA services', blurb: "Connecting WA families feels important, we're so far from the east coast. Reach out, we'd love to build something local.", lat: -31.95, lng: 115.86 }, ]; // ---- Per-state count badge (circle + number + abbreviation) ---- function FamilyMapBadge({ abbr, count }) { const a = FMAP_ANCHORS[abbr]; if (!a) return null; const has = count > 0; return ( ); } // ---- Side panel: a selected family's detail card ---- function SelectedFamily({ fam, onIntroduce }) { return (
{STATE_NAMES[fam.state]} {fam.region} {fam.connect && ( Open to connect )}

{fam.name}'s family

{/* SCN2A does not stop at childhood, and the first family on this map is here for a 24-year-old. Never say "child" — the person with SCN2A may be an adult, and telling their family otherwise erases them. */}
{fam.role} · {fam.name} lives with SCN2A, age {fmapAgeFromBirthYear(fam.birthYear)}

{fam.blurb}

On the map since
{fam.since}
Happy to talk about
{fam.topics}
{fam.connect ? ( <>

Introductions are made by our team, with consent from both families. Your details are never shared until you both say yes.

) : (
This family is on the map but is not open to introductions right now.
)}
); } // ---- Introduction request dialog (request + confirmation) ---- // // This asks the coordinator for an introduction; it does not write to the other // family. Nothing here reaches them, and nothing the requester types is shown // to them — the coordinator speaks to both families first and connects them // only once both have agreed. The form therefore collects the minimum needed to // have that conversation: who they are, where they are, how to reach them, and // optionally why. function IntroductionModal({ family, onClose }) { const [form, setForm] = React.useState({ name: '', state: '', email: '', note: '', consent: false }); const [errors, setErrors] = React.useState({}); const [failed, setFailed] = React.useState(false); const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const dialogRef = React.useRef(null); const restoreRef = React.useRef(null); const honeypotRef = React.useRef(null); const doneRef = React.useRef(null); const fieldRefs = { name: React.useRef(null), state: React.useRef(null), email: React.useRef(null), consent: React.useRef(null) }; // Purge the legacy undelivered-message store (see FMAP_MSG_KEY). React.useEffect(() => { try { localStorage.removeItem(FMAP_MSG_KEY); } catch (e) { /* ignore storage errors */ } }, []); // Focus trap + Escape + restore focus, matching the site's other dialogs. // `select` belongs in this list: without it the state dropdown is reachable // by mouse but skipped by the Tab cycle, which strands keyboard users on a // required field they cannot fill. React.useEffect(() => { restoreRef.current = document.activeElement; const dlg = dialogRef.current; const focusable = () => dlg ? Array.from(dlg.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter(el => !el.disabled && el.offsetParent !== null) : []; const els = focusable(); if (els.length) els[0].focus(); const onKey = (e) => { if (e.key === 'Escape') { onClose(); return; } if (e.key === 'Tab') { const f = focusable(); if (!f.length) return; const first = f[0], last = f[f.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } }; document.addEventListener('keydown', onKey); return () => { document.removeEventListener('keydown', onKey); if (restoreRef.current && restoreRef.current.focus) restoreRef.current.focus(); }; }, [onClose]); // Submitting replaces the form with the confirmation, which unmounts the // button that had focus. Without this, focus falls back to the body and a // screen-reader user is told nothing about what just happened. React.useEffect(() => { if (sent && doneRef.current) doneRef.current.focus(); }, [sent]); const set = (patch) => { setForm(f => ({ ...f, ...patch })); setErrors(e => { const next = { ...e }; Object.keys(patch).forEach(k => delete next[k]); return next; }); setFailed(false); }; const submit = async (e) => { if (e && e.preventDefault) e.preventDefault(); if (sending) return; // the button stays clickable while in flight const found = {}; if (!form.name.trim()) found.name = 'Please tell us your first name.'; if (!form.state) found.state = 'Please choose your state.'; if (!form.email.trim()) found.email = 'Please add your email so we can reach you.'; else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email.trim())) found.email = 'That email address does not look right, please check it.'; if (!form.consent) found.consent = 'Please tick the box so we know you understand how introductions work.'; if (Object.keys(found).length) { setErrors(found); // Send focus to the first field that needs attention, so the error is // announced rather than left for someone to hunt for. const first = ['name', 'state', 'email', 'consent'].find(k => found[k]); const el = first && fieldRefs[first].current; if (el && el.focus) el.focus(); return; } setSending(true); setFailed(false); try { const res = await fetch(FMAP_INTRO_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ to: family.id, toName: family.name, name: form.name.trim(), state: form.state, email: form.email.trim(), note: form.note.trim(), consent: true, // Honeypot: empty for people; the server quietly discards bot fills. website: (honeypotRef.current && honeypotRef.current.value) || '', }), }); if (!res.ok) { // The handler says why in JSON. Keep it: a 500 meaning "not configured" // shown as "try again in a moment" reads as a flaky connection, so // retrying does the same thing every time and the real cause — a // missing environment variable — only turns up in the Vercel logs. let reason = ''; try { const b = await res.json(); reason = (b && b.error) || ''; } catch (err) { /* no JSON body */ } throw new Error(reason ? `${reason} (HTTP ${res.status})` : `request-failed (HTTP ${res.status})`); } // A 2xx is not proof the request reached us. Anything sitting in front of // the site can answer instead — a Vercel SSO login wall on a preview // deployment does exactly this, returning a 200 HTML page, and the // confirmation screen then appears for a request no coordinator will // ever see. That is the one failure this whole flow exists to prevent, so // require the endpoint's own JSON answer before believing it. const type = res.headers.get('content-type') || ''; if (!type.includes('json')) { throw new Error(`intercepted-before-reaching-us: responded ${res.status} as "${type || 'unknown type'}", not JSON`); } const body = await res.json().catch(() => null); if (!body || body.ok !== true) { throw new Error('endpoint did not confirm the request was sent'); } setSent(true); } catch (err) { // Never show the confirmation screen for a request that reached nobody. A // family asking to meet another family deserves the truth and a way // through, not a comforting lie. The cause is ours, not theirs, so the // detail goes to the console and they get a plain apology. console.error('[family-map] introduction request did not send:', err); setFailed(true); } finally { setSending(false); } }; const inputStyle = { width: '100%', boxSizing: 'border-box', padding: '10px 12px', border: '1px solid #D5CFBF', borderRadius: 5, fontFamily: 'inherit', fontSize: 14, color: '#0D1B2A', background: '#fff' }; const fieldStyle = (bad) => ({ ...inputStyle, borderColor: bad ? '#8E3B5E' : '#D5CFBF' }); const labelStyle = { display: 'block', fontSize: 11, fontWeight: 600, color: '#0D1B2A', marginBottom: 6 }; const errorStyle = { fontSize: 12, lineHeight: 1.45, color: '#8E3B5E', margin: '6px 0 0' }; return (
e.stopPropagation()} style={{ background: '#F7F4F0', borderRadius: 8, maxWidth: 520, width: '100%', maxHeight: 'calc(100vh - 48px)', overflowY: 'auto', boxShadow: '0 8px 24px rgba(13,27,42,0.12)' }}>
Family introductions

Ask for an introduction

{STATE_NAMES[family.state]} · {family.region}
{!sent ? (

Tell us who you'd like to meet and a little about your family. Our team will reach out to both families and, if you're both happy, make a warm introduction. We never share your details without your permission.

{/* Pre-filled and read-only: the family is chosen by the card the request was opened from, and a typed-over value would ask the coordinator to introduce someone nobody selected. */}
set({ name: e.target.value })} placeholder="e.g. Sam" style={fieldStyle(errors.name)} /> {errors.name && }
{errors.state && }
set({ email: e.target.value })} placeholder="you@example.com" style={fieldStyle(errors.email)} /> {errors.email && }
{/* Honeypot: invisible to people, irresistible to bots. */}
FMAP_NOTE_MAX - 100 ? '#8E3B5E' : '#6B6659' }}> {FMAP_NOTE_MAX - form.note.length} characters left