/* StrataSnap prototype — resident side. Babel/JSX. ReportFlow (multi-step), Confirmation, StatusPage, StopScreen, ExpiredPage. */ const DRAFT_KEY = 'strata_draft_v1'; const BLANK = { category: null, photos: [], voiceNotes: [], note: '', name: '', email: '', phone: '', unit: '' }; // Single-screen resident report. One scrollable form — location (from QR), // type of issue, what happened, optional photo, contact — then Send. Scope / // privacy are inline helper text, not separate steps. function ReportFlow({ locationId, setup, onExit, createTicket, onViewStatus }) { const SS = window.SS; const emergencyContact = (setup && setup.emergencyContact) || (SS.setupSeed && SS.setupSeed().emergencyContact) || 'the building emergency contact'; const [locId, setLocId] = React.useState(locationId); const [picker, setPicker] = React.useState(false); const reportLocations = SS.setupLocations(setup, { activeOnly: true }); const loc = SS.setupLocationById(setup, locId) || reportLocations[0] || SS.LOCATIONS[2]; const [stopped, setStopped] = React.useState(null); const [created, setCreated] = React.useState(null); const [d, setD] = React.useState(() => { try { const s = JSON.parse(localStorage.getItem(DRAFT_KEY)); if (s) return { ...BLANK, ...s, photos: BLANK.photos, voiceNotes: BLANK.voiceNotes }; } catch (e) {} return BLANK; }); const set = (patch) => setD((x) => ({ ...x, ...patch })); React.useEffect(() => { try { localStorage.setItem(DRAFT_KEY, JSON.stringify({ category: d.category, note: d.note, name: d.name, email: d.email, phone: d.phone, unit: d.unit })); } catch (e) {} }, [d.category, d.note, d.name, d.email, d.phone, d.unit]); const [up, setUp] = React.useState('idle'); const fileRef = React.useRef(null); const recRef = React.useRef(null); const chunksRef = React.useRef([]); const recStartedRef = React.useRef(0); const [rec, setRec] = React.useState('idle'); const [mediaErr, setMediaErr] = React.useState(''); function dataUrlFromFile(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); } const addPhoto = () => { setMediaErr(''); if (fileRef.current) fileRef.current.click(); }; const onPhotoPicked = async (e) => { const file = e.target.files && e.target.files[0]; e.target.value = ''; if (!file) return; setUp('uploading'); try { const url = await dataUrlFromFile(file); set({ photos: [...d.photos, { id: SS.uid('ph'), kind: d.category || 'default', name: file.name || 'Resident photo', url }] }); setUp('idle'); } catch (err) { setUp('failed'); setMediaErr('Photo could not be added. Try again.'); } }; const removePhoto = (id) => set({ photos: d.photos.filter((p) => p.id !== id) }); async function startVoice() { setMediaErr(''); if (!navigator.mediaDevices || !window.MediaRecorder) { setMediaErr('Voice notes are not available in this browser.'); return; } try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const recorder = new MediaRecorder(stream); chunksRef.current = []; recStartedRef.current = Date.now(); recorder.ondataavailable = (e) => { if (e.data && e.data.size) chunksRef.current.push(e.data); }; recorder.onstop = async () => { stream.getTracks().forEach((track) => track.stop()); const blob = new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' }); const url = await dataUrlFromFile(blob); const durationMs = Math.max(1000, Date.now() - recStartedRef.current); set({ voiceNotes: [...d.voiceNotes, { id: SS.uid('vn'), url, mime: blob.type, durationMs }] }); setRec('idle'); }; recRef.current = recorder; recorder.start(); setRec('recording'); } catch (err) { setMediaErr('Microphone access was blocked or unavailable.'); setRec('idle'); } } function stopVoice() { if (recRef.current && recRef.current.state === 'recording') recRef.current.stop(); } const removeVoice = (id) => set({ voiceNotes: d.voiceNotes.filter((v) => v.id !== id) }); function submit() { const t = createTicket({ locationId: loc.id, locationName: loc.name, category: d.category, note: d.note, name: d.name, email: d.email, phone: d.phone, unit: d.unit, photos: d.photos, voiceNotes: d.voiceNotes }); try { localStorage.removeItem(DRAFT_KEY); } catch (e) {} setCreated(t); } const STEPS = ['category', 'describe', 'photo', 'review']; const RAIL = ['Category', 'Describe', 'Media', 'Review']; const [step, setStep] = React.useState(0); const name = STEPS[step]; const total = STEPS.length; const back = () => { if (step === 0) onExit(); else setStep((s) => s - 1); }; const next = () => setStep((s) => Math.min(total - 1, s + 1)); const canSend = d.category && d.note.trim(); const stepOk = { category: !!d.category, describe: !!d.note.trim(), photo: true, review: true }[name]; if (stopped) return setStopped(null)} />; if (created) return onViewStatus(created.token)} onDone={onExit} />; return (
Report an issue
{RAIL.map((lbl, i) => (
{ if (i < step) setStep(i); }}> {i < step ? : (i + 1)} {lbl}
))}
{loc.name}
Scanned from QR code
{name === 'category' && (

What's the issue?

Pick the category that fits best.

Do not use this form for an active flood, fire, security issue, elevator entrapment, or immediate safety risk. Call {emergencyContact} or emergency services first.
{SS.CATEGORIES.map((c) => ( ))}

For an issue inside your own unit, contact your strata manager or owner directly.

 )} {name === 'describe' && (

Describe the issue

A sentence or two is plenty.

{['plumbing', 'electrical', 'door', 'structural', 'elevator'].includes(d.category) && ( If this is active flooding, fire, a security/access failure, elevator entrapment, or an immediate trip/safety risk, call {emergencyContact} before submitting. )}