/* wizard.jsx — Generator wizard (8-step flow) for POA Forms
* Loads any state/type from URL ?state=CA&type=durable or localStorage 'poa.draft'.
* Mobile-first; persists to localStorage every change.
*/
const POWERS = [
{ id: 'realestate', label: 'Real estate', desc: 'Buy, sell, manage property' },
{ id: 'banking', label: 'Banking', desc: 'Accounts, transfers, deposits' },
{ id: 'investments', label: 'Investments', desc: 'Brokerage, retirement accounts' },
{ id: 'taxes', label: 'Tax matters', desc: 'File and discuss with the IRS' },
{ id: 'business', label: 'Business operations', desc: 'Run or wind down a business' },
{ id: 'insurance', label: 'Insurance', desc: 'Claims, policies, beneficiaries' },
{ id: 'gifts', label: 'Gifts', desc: '⚠️ Hot power — extra scrutiny' },
{ id: 'beneficiary', label: 'Change beneficiaries', desc: '⚠️ Hot power' },
{ id: 'trusts', label: 'Trusts', desc: 'Create, fund, modify' },
{ id: 'claims', label: 'Legal claims', desc: 'Sue, settle, defend' },
{ id: 'personal', label: 'Personal & family', desc: 'Day-to-day matters' },
{ id: 'benefits', label: 'Government benefits', desc: 'SSA, Medicare, VA' },
];
const STEPS = [
{ n: 1, label: 'State' },
{ n: 2, label: 'Type' },
{ n: 3, label: 'You' },
{ n: 4, label: 'Agent' },
{ n: 5, label: 'Powers' },
{ n: 6, label: 'Options' },
{ n: 7, label: 'Review' },
{ n: 8, label: 'Done' },
];
// Read initial values from URL or localStorage
function loadInitial() {
const params = new URLSearchParams(window.location.search);
let initial = { state: '', type: '', principal: {}, agent: {}, powers: [], options: {} };
try {
const saved = JSON.parse(localStorage.getItem('poa.draft') || '{}');
Object.assign(initial, saved);
} catch (e) {}
if (params.get('state')) initial.state = params.get('state');
if (params.get('type')) initial.type = params.get('type');
return initial;
}
function StepIndicator({ current, onJump, valid }) {
return (
{STEPS.map((s) => {
const isActive = current === s.n;
const isDone = current > s.n;
return (
{s.n < STEPS.length && }
);
})}
);
}
function StepShell({ kicker, title, subtitle, children, footer, illo }) {
return (
{kicker}
{title}
{subtitle &&
{subtitle}
}
{children}
{footer}
{illo &&
{illo}
}
);
}
// ── Steps ──────────────────────────────────────────────────────────────
function Step1State({ data, set }) {
const [picker, setPicker] = React.useState('map');
return (
<>
{[['map','Map'],['list','List']].map(([k, label]) => (
))}
{picker === 'map'
? set({ state: s })}/>
:
}
{data.state && (
Selected state
{(US_STATES.find(s => s[0] === data.state) || [])[1]}
We'll auto-load {data.state}'s witness, notarization, and statutory rules.
)}
);
}
function Step2Type({ data, set }) {
return (
<>
{POA_TYPES.map((t) => {
const active = data.type === t.id;
return (
);
})}
);
}
function Field({ label, hint, children, full }) {
return (
);
}
function Step3Principal({ data, set }) {
const p = data.principal || {};
const upd = (k, v) => set({ principal: { ...p, [k]: v } });
return (
<>
AES-256 encrypted. Drafts auto-delete from our servers in 1 hour.
upd('name', e.target.value)}/>
upd('dob', e.target.value)}/>
upd('ssn', e.target.value.replace(/\D/g, ''))}/>
upd('address', e.target.value)}/>
upd('city', e.target.value)}/>
upd('zip', e.target.value)}/>
);
}
function Step4Agent({ data, set }) {
const a = data.agent || {};
const upd = (k, v) => set({ agent: { ...a, [k]: v } });
return (
<>
{data.type === 'durable' && (
Heads-up: Durable POAs stay valid even if you become incapacitated. Choose someone you trust deeply with both money and discretion.
)}
upd('name', e.target.value)}/>
upd('address', e.target.value)}/>
upd('phone', e.target.value)}/>
upd('email', e.target.value)}/>
);
}
function Step5Powers({ data, set }) {
const powers = data.powers || [];
const toggle = (id) => set({ powers: powers.includes(id) ? powers.filter(p => p !== id) : [...powers, id] });
const allOn = powers.length === POWERS.length;
return (
<>
{POWERS.map(p => {
const on = powers.includes(p.id);
const isHot = p.desc.includes('Hot');
return (
);
})}
);
}
function Step6Options({ data, set }) {
const o = data.options || {};
const upd = (k, v) => set({ options: { ...o, [k]: v } });
return (
<>
{[['immediate','Immediately'],['date','On a specific date'],['springing','Only on incapacity']].map(([v, l]) => (
))}