);
};
// Custom dropdown (consistent with Helm's printed-paper aesthetic).
// Placeholder-only to match BSField. The selected value (or the
// `placeholder` prop) sits inline with the chevron. The menu renders
// through a portal so it can escape parent `overflow: hidden` (the
// card wrapper clips children to keep its rounded corners clean).
const BSSelect = ({ value, onChange, options, placeholder = "Choose…", icon, required, missing }) => {
const [open, setOpen] = bsS(false);
const [menuPos, setMenuPos] = bsS(null);
const ref = bsR(null);
const btnRef = bsR(null);
bsE(() => {
const onDoc = (e) => {
// Treat clicks inside the trigger OR the portaled menu as inside.
if (ref.current && ref.current.contains(e.target)) return;
const menu = document.getElementById("bs-select-portal");
if (menu && menu.contains(e.target)) return;
setOpen(false);
};
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
// Position the menu under the trigger every time it opens, AND track
// scroll/resize so it stays attached if the chat scrolls behind it.
bsE(() => {
if (!open) { setMenuPos(null); return; }
const place = () => {
const r = btnRef.current?.getBoundingClientRect();
if (!r) return;
setMenuPos({ left: r.left, top: r.bottom + 4, width: r.width });
};
place();
window.addEventListener("scroll", place, true);
window.addEventListener("resize", place);
return () => {
window.removeEventListener("scroll", place, true);
window.removeEventListener("resize", place);
};
}, [open]);
return (
{open && menuPos && ReactDOM.createPortal(
{options.map((opt) => (
))}
,
document.body
)}
);
};
// ────────────────────────────────────────────────────────────────────
// LIVING SANKEY — policies (left, ecru) → people (right, palette)
// Ribbon thickness = dollar share. Click a person to focus.
// ────────────────────────────────────────────────────────────────────
const BSSankey = ({ policies, people, unassignedPolicies = [], currentName, currentPolicyNumber, onPersonClick }) => {
if (people.length === 0 && unassignedPolicies.length === 0) return null;
const W = 720;
const H = Math.max(420, people.length * 80);
const GAP = 8;
const polCol = { x: 0, w: 180 };
const peopleCol = { x: W - 220, w: 220 };
// Order people by their first-seen-on-policy index, then by name (stable)
const peopleOrder = people.map(p => p.name);
const colorFor = (name) => BS_PALETTE[peopleOrder.indexOf(name) % BS_PALETTE.length];
// Total $ across everything (for scaling)
const total = people.reduce((acc, p) => acc + p.policies.reduce((a, pol) => a + pol.dollarShare, 0), 0) || 1;
// For each policy, collect rows {beneficiary, amount}
const rows = [];
policies.forEach((pol) => {
people.forEach((person) => {
person.policies.forEach((pp) => {
if (pp.carrier === pol.carrier && pp.faceAmount === pol.faceAmount) {
rows.push({
policyKey: `${pol.carrier}|${pol.faceAmount}|${pol.policyNumber}`,
policyLabel: pol.carrier,
policyAmount: pol.faceAmountNum || 0,
beneficiary: person.name,
amount: pp.dollarShare,
});
}
});
});
});
// Stack policies vertically by their total $
const polTotals = new Map();
policies.forEach((p) => {
const key = `${p.carrier}|${p.faceAmount}|${p.policyNumber}`;
polTotals.set(key, p.faceAmountNum || 0);
});
const peopleTotals = new Map();
people.forEach((p) => {
peopleTotals.set(p.name, p.policies.reduce((a, pp) => a + pp.dollarShare, 0));
});
// Unassigned policies → one placeholder node per policy on the right.
// We key them as "?" so they don't collide with people names.
const unassignedKeys = unassignedPolicies.map(pol => `?${pol.policyNumber}`);
unassignedPolicies.forEach((pol) => {
peopleTotals.set(`?${pol.policyNumber}`, pol.faceAmountNum || 0);
});
// Total recomputed to include unassigned $
const totalAll = [...peopleTotals.values()].reduce((a, b) => a + b, 0) || 1;
const usableH = H - 60;
const scale = (v) => (v / totalAll) * (usableH - GAP * Math.max(policies.length, people.length + unassignedPolicies.length));
// Position policies stacked
const stackPositions = (entries) => {
const m = new Map();
let y = 30;
entries.forEach(([k, v]) => {
const h = scale(v);
m.set(k, { y, h, v });
y += h + GAP;
});
return m;
};
const polPos = stackPositions([...polTotals.entries()]);
const benePos = stackPositions([...peopleTotals.entries()]);
// Build segments with running offsets per side
const ordered = [...rows].sort((a, b) => {
// by policy stack order, then by beneficiary stack order
const pa = [...polTotals.keys()].indexOf(a.policyKey);
const pb = [...polTotals.keys()].indexOf(b.policyKey);
if (pa !== pb) return pa - pb;
return [...peopleTotals.keys()].indexOf(a.beneficiary) - [...peopleTotals.keys()].indexOf(b.beneficiary);
});
const polOff = new Map();
const beneOff = new Map();
const segments = [];
ordered.forEach((r, idx) => {
const h = scale(r.amount);
const sp = polPos.get(r.policyKey);
const bp = benePos.get(r.beneficiary);
const pO = polOff.get(r.policyKey) || 0;
const bO = beneOff.get(r.beneficiary) || 0;
const yA = sp.y + pO, yB = yA + h;
const ybA = bp.y + bO, ybB = ybA + h;
const c = colorFor(r.beneficiary);
const xS = polCol.x + polCol.w;
const xE = peopleCol.x;
const cx1 = (xS + xE) / 2;
const path = `M${xS},${yA} C${cx1},${yA} ${cx1},${ybA} ${xE},${ybA} L${xE},${ybB} C${cx1},${ybB} ${cx1},${yB} ${xS},${yB} Z`;
segments.push({
key: `s-${idx}`,
path,
colorBase: c.base,
colorLight: c.light,
gradId: `bsg-${idx}`,
beneficiary: r.beneficiary,
});
polOff.set(r.policyKey, pO + h);
beneOff.set(r.beneficiary, bO + h);
});
// Build unassigned ribbons (policy → "?" node, gradient fades to grey)
unassignedPolicies.forEach((pol, idx) => {
const polKey = `${pol.carrier}|${pol.faceAmount}|${pol.policyNumber}`;
const beneKey = `?${pol.policyNumber}`;
const sp = polPos.get(polKey);
const bp = benePos.get(beneKey);
if (!sp || !bp) return;
const h = sp.h;
const yA = sp.y + (polOff.get(polKey) || 0);
const yB = yA + h;
const ybA = bp.y;
const ybB = ybA + h;
const xS = polCol.x + polCol.w;
const xE = peopleCol.x;
const cx1 = (xS + xE) / 2;
const path = `M${xS},${yA} C${cx1},${yA} ${cx1},${ybA} ${xE},${ybA} L${xE},${ybB} C${cx1},${ybB} ${cx1},${yB} ${xS},${yB} Z`;
segments.push({
key: `u-${idx}`,
path,
gradId: `bsu-${idx}`,
beneficiary: beneKey,
isUnassigned: true,
});
polOff.set(polKey, (polOff.get(polKey) || 0) + h);
});
const fmt = (v) => `$${Math.round(v / 1000).toLocaleString()}K`;
return (
);
};
// Inline (chip-style) version of BSSelect for places like the card
// title bar where we want a tiny, pill-shaped trigger that opens the
// same portaled menu. The pill ALWAYS reads as an input field — when
// empty, a dashed orange border + "needed" pill makes the required
// state unmistakable; when set, it settles into a quiet filled chip.
const BSInlineSelect = ({ value, onChange, options, placeholder = "Choose…", missing }) => {
const [open, setOpen] = bsS(false);
const [menuPos, setMenuPos] = bsS(null);
const ref = bsR(null);
const btnRef = bsR(null);
bsE(() => {
const onDoc = (e) => {
if (ref.current && ref.current.contains(e.target)) return;
const menu = document.getElementById("bs-select-portal");
if (menu && menu.contains(e.target)) return;
setOpen(false);
};
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
bsE(() => {
if (!open) { setMenuPos(null); return; }
const place = () => {
const r = btnRef.current?.getBoundingClientRect();
if (!r) return;
setMenuPos({ left: r.left, top: r.bottom + 4, width: Math.max(r.width, 180) });
};
place();
window.addEventListener("scroll", place, true);
window.addEventListener("resize", place);
return () => {
window.removeEventListener("scroll", place, true);
window.removeEventListener("resize", place);
};
}, [open]);
const isEmpty = !value;
const showNeeded = missing && isEmpty;
// Two visual states: prompt (empty/required) vs filled (settled).
const pillStyle = isEmpty ? {
background: "var(--helm-white)",
border: `1.5px dashed ${showNeeded ? "var(--helm-dark-orange)" : "var(--helm-dark-green)"}`,
color: showNeeded ? "var(--helm-dark-orange)" : "var(--helm-dark-green)",
} : {
background: "var(--helm-white)",
border: "1px solid var(--helm-dark-ecru)",
color: "var(--helm-dark-green)",
};
return (
{open && menuPos && ReactDOM.createPortal(
{options.map((opt) => (
))}
,
document.body
)}
);
};
// ────────────────────────────────────────────────────────────────────
// THE SCREEN — main canvas
// ────────────────────────────────────────────────────────────────────
const BeneficiariesScreen = ({
policies, setPolicies, onAdvance, onBack, density, onStepClick,
people, setPeople, unassignedPolicies, setUnassignedPolicies,
currentIdx, setCurrentIdx, onReopenCard,
}) => {
// Augmented "slots" = real people + one slot per unassigned policy
const slots = [
...people.map(p => ({ kind: "person", person: p })),
...(unassignedPolicies || []).map(pol => ({ kind: "addNew", policy: pol })),
];
const totalSlots = slots.length;
const slot = slots[currentIdx];
const cur = slot && slot.kind === "person" ? slot.person : null;
const total = totalSlots;
const updateCurrent = (patch) => {
if (!cur) return;
setPeople(prev => prev.map((p, i) => i === currentIdx ? { ...p, ...patch } : p));
};
const isPersonValid = (p) => isValidEmail(p?.email) && !!(p?.relationship && p.relationship.trim());
const allConfirmed = people.length > 0 && people.every(p => p.confirmed) && (unassignedPolicies || []).length === 0;
const allValid = allConfirmed;
const confirmAndNext = () => {
if (!cur) return;
if (!isPersonValid(cur)) {
updateCurrent({ _attempted: true });
return;
}
setPeople(prev => prev.map((p, i) => i === currentIdx ? { ...p, confirmed: true } : p));
if (currentIdx < totalSlots - 1) setCurrentIdx(currentIdx + 1);
};
// Add a brand-new beneficiary from an unassigned-policy slot.
const addNewFromSlot = (data) => {
if (!slot || slot.kind !== "addNew") return;
const pol = slot.policy;
const newPerson = {
name: data.name,
email: data.email || "",
phone: data.phone || "",
relationship: data.relationship,
confirmed: !!(data.email && data.relationship),
source: "manual",
policies: [{
carrier: pol.carrier,
faceAmount: pol.faceAmount,
faceAmountNum: pol.faceAmountNum || 0,
policyNumber: pol.policyNumber,
pct: 100,
dollarShare: pol.faceAmountNum || 0,
coverageType: pol.coverageType,
}],
};
setPeople(prev => [...prev, newPerson]);
setUnassignedPolicies(prev => prev.filter(p => p.policyNumber !== pol.policyNumber));
// After insertion, advance to next slot if any (the slots array shifts but length is same)
// We stay on currentIdx because the new person now occupies the previous "addNew" slot's earlier index, and that slot is now removed.
// Simpler: jump to next unconfirmed slot, else stay on last.
setTimeout(() => {
// Recompute against new state-shape on next tick.
// We'll just go to last slot if past end.
}, 0);
};
const goPrev = () => setCurrentIdx(Math.max(0, currentIdx - 1));
const goNext = () => setCurrentIdx(Math.min(totalSlots - 1, currentIdx + 1));
const jumpTo = (key) => {
// key can be a person name OR a policy number for unassigned slots
const idx = slots.findIndex(s =>
(s.kind === "person" && s.person.name === key) ||
(s.kind === "addNew" && s.policy.policyNumber === key)
);
if (idx !== -1) {
setCurrentIdx(idx);
// Re-summon the chat-rail card so the user can edit this person —
// it would otherwise stay hidden if everything was already confirmed.
onReopenCard && onReopenCard();
}
};
const pad = density === "compact" ? "32px 56px" : "40px 64px";
const confirmedCount = people.filter(p => p.confirmed).length;
const remaining = totalSlots - confirmedCount;
if (people.length === 0 && (unassignedPolicies || []).length === 0) {
return (
No beneficiaries to confirm. Add a policy first.
);
}
return (
The {people.length} people you're protecting.
A few people appear on more than one policy — confirm each once and Helm reuses their info everywhere.
Confirmed
{confirmedCount}/{people.length}
{onBack && (
)}
);
};
// ────────────────────────────────────────────────────────────────────
// CHAT-RAIL CARD — replaces the chat content while on this screen.
// Returns { messages, replies, customNode } so chat-guide can render it.
// ────────────────────────────────────────────────────────────────────
const BeneficiaryChatCard = ({ slots, knownPeople, currentIdx, onPrev, onNext, onChange, onConfirm, onAssign, attempted }) => {
const slot = slots[currentIdx];
if (!slot) return null;
const total = slots.length;
const isFirst = currentIdx === 0;
const isLast = currentIdx === total - 1;
const palette = BS_PALETTE[currentIdx % BS_PALETTE.length];
// Revisit mode: every slot is a confirmed person and nothing is left
// to assign — meaning the user came back to review one specific
// beneficiary, not to walk through the queue. The CTA should then
// always read "Confirm" rather than "Next →".
const isRevisit = slots.length > 0 && slots.every(s =>
s.kind === "person" && s.person.confirmed);
// Render header (counter + arrows) — shared between modes
const header = (
{slot.kind === "addNew" ? `Missing on ${slot.policy.carrier}` : `${currentIdx + 1} of ${total}`}
);
if (slot.kind === "addNew") {
return ;
}
const cur = slot.person;
const relMissing = attempted && !cur.relationship.trim();
// Email validator returns true (ok) or { text } (error label).
const emailValidate = (v) => {
if (!v || !v.trim()) return { text: "needed" };
if (!isValidEmail(v)) return { text: "invalid" };
return true;
};
return (
{header}
{/* The card — compact, placeholder-only form */}
{/* Person strip — avatar + name + inline relationship selector.
Relationship lives in the header (it's an attribute of the
person, not separate form data) which saves a field row. */}
{bsInitials(cur.name)}
{cur.name}
· onChange({ relationship: v })}
/>
{cur.confirmed && (
Confirmed
)}
{/* Form — email + phone only; relationship lives in the strip */}
onChange({ email: v })}
icon={
} />
onChange({ phone: v })}
icon={
} />
{cur.policies.length > 1 && (
Applies to all {cur.policies.length} of {cur.name.split(" ")[0]}'s policies.