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:
@@ -12,6 +12,7 @@
|
||||
import { load, save } from './storage.js';
|
||||
import { suggestedChannel } from './nonprobate.js';
|
||||
import Disclaimer from './Disclaimer.svelte';
|
||||
import InfoPanel from './InfoPanel.svelte';
|
||||
|
||||
const assets = load('assets', []);
|
||||
|
||||
@@ -165,7 +166,19 @@
|
||||
</script>
|
||||
|
||||
<div class="module">
|
||||
<h2>Nomination Registry</h2>
|
||||
<div class="module-header">
|
||||
<h2>Nomination Registry</h2>
|
||||
<InfoPanel
|
||||
title="Nomination Registry"
|
||||
what="Some things can't be simply gifted away (like your EPF/retirement savings, insurance, or a business) — but many of them have their own built-in shortcut that pays your chosen person directly, without needing a court at all. This tab is where you record which shortcut covers which asset."
|
||||
how="Pick an asset from your registry, and the app suggests the right shortcut for that type — EPF/Takaful nomination for retirement and insurance money, a bank mandate for cash, a trust for land, a business continuity instrument for a company, or a digital custody plan for crypto. Fill in the fields for that shortcut and save it — then remember to actually file the real nomination with that institution too, this app only keeps a record."
|
||||
fields={[
|
||||
{ label: 'Asset', hint: 'Pick from your Asset Registry — the app will suggest the right channel automatically.' },
|
||||
{ label: 'Channel type', hint: 'EPF, Takaful/insurance, bank mandate, trust, business continuity, or digital custody — pick what fits.' },
|
||||
{ label: 'Extra fields', hint: 'Change depending on the channel — e.g. a trustee for a trust, or a nominee for EPF/Takaful.' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div class="fast-path-note">Third fast-path channel. EPF and Takaful/insurance nominations pay the nominee directly by law — no Faraid/probate involvement at all. Bank mandates and trust/nominee holdings need setup now, while alive, but also bypass the court queue once in place.</div>
|
||||
<p class="sub">Log which non-probate channel covers each asset that can't be fully gifted (Hibah) or dedicated (Waqf).</p>
|
||||
|
||||
@@ -276,7 +289,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; }
|
||||
.fast-path-note { font-size: 11.5px; color: #2ECC71; background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.25); border-radius: 10px; padding: 10px 12px; margin: 10px 0 12px; line-height: 1.5; }
|
||||
.sub { font-size: 13px; color: #8A8478; margin-bottom: 16px; }
|
||||
.form-card { background: rgba(255,255,255,0.03); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
|
||||
|
||||
Reference in New Issue
Block a user