Add (i) info button to every tab, explained for the average user
New InfoPanel.svelte: shared (i) button next to each module's h2, toggling a plain-language explainer with three sections — what this tab is, how to use it, what to enter in each field. One component so tone stays consistent across all 10 tabs instead of each screen inventing its own help pattern. Deliberately avoids fiqh/legal jargon in favor of concrete, everyday framing (e.g. Hibah explained as "a gift you give right now, while you're alive" rather than leading with the Arabic term) — written for someone with no prior estate-planning or Islamic finance background, consistent with the "convince a 100-year-old grandmother" usability bar already established for this product. Wired into: Coverage, Faraid, Assets, Wassiyah, Hibah, Family Waqf, Nominate, Trigger, Claims (H2), Settings. e2e-info.cjs: new suite verifying the info button appears, opens a non-trivial explanation, and closes again on every one of the 10 tabs. 31/31 passing. Re-verified all five prior suites (32/32, 16/16, 12/12, 10/10, 10/10) — 111/111 total, no regressions.
This commit is contained in:
@@ -17,6 +17,7 @@
|
||||
// 1-2 week window instead of stacking behind a 2-year probate queue.
|
||||
import { load, save } from './storage.js';
|
||||
import { computeCoverage } from './nonprobate.js';
|
||||
import InfoPanel from './InfoPanel.svelte';
|
||||
|
||||
const coverage = computeCoverage();
|
||||
|
||||
@@ -96,7 +97,19 @@
|
||||
</script>
|
||||
|
||||
<div class="module">
|
||||
<h2>Death Trigger & Execution</h2>
|
||||
<div class="module-header">
|
||||
<h2>Death Trigger & Execution</h2>
|
||||
<InfoPanel
|
||||
title="Death Trigger & Execution"
|
||||
what="This is what actually fires when someone passes away. It can't be triggered by one person alone (to prevent fraud or a mistake) — you need at least two trusted people to confirm the death, plus a death certificate reference. Once confirmed, the app generates ready-to-file paperwork for every asset you've already covered, so your family can start claiming things within days instead of waiting on a court."
|
||||
how="Set this up now, while everyone is healthy — name your executor and at least two attestors (people who will confirm the death when it happens). When the time comes, those attestors log in and confirm, someone enters the death certificate number, and the trigger fires — generating a downloadable packet for each covered asset."
|
||||
fields={[
|
||||
{ label: 'Executor', hint: 'The person responsible for carrying out your wishes.' },
|
||||
{ label: 'Attestors', hint: 'At least two people who will confirm the death actually happened — this is a safety check, not a formality.' },
|
||||
{ label: 'Date of death & death certificate reference', hint: 'Required before the trigger can fire — this ties everything to an official record.' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<p class="sub">Set up now, fires at death. This is the mechanism that turns "arranged" into "distributed" — target: days, not the ~2-year Faraid/probate route.</p>
|
||||
|
||||
{#if !triggered}
|
||||
@@ -153,7 +166,8 @@
|
||||
|
||||
<style>
|
||||
.module { padding: 4px 0 40px; }
|
||||
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 4px; }
|
||||
.module-header { display: flex; align-items: center; margin-bottom: 4px; }
|
||||
h2 { font-family: 'DM Serif Display', serif; font-size: 24px; color: #E8E4DC; margin-bottom: 0; }
|
||||
.sub { font-size: 13px; color: #8A8478; margin-bottom: 18px; line-height: 1.5; }
|
||||
.setup-card { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 16px; }
|
||||
.setup-card h3 { font-size: 14px; color: #C9A84C; margin: 16px 0 8px; }
|
||||
|
||||
Reference in New Issue
Block a user