;(function () {
/* CashFlowSheet — bottom sheet that handles all three money-movement
flows: deposit, withdraw, transfer. One modal with a `mode` prop
that switches the form skeleton:
deposit : card → business line
withdraw : business line → card
transfer : business line → business line
Triggered globally via window.openCashFlow(mode) which is wired up
by App. PortfolioCard (home) and the WalletScreen hero pills both
call it directly so we skip a layer of prop-drilling.
On confirm: dispatches deposit/withdraw/transfer through the
trade-store mutators, fires a toast, closes the sheet. Balances
propagate live everywhere via useBalances. */
/* iOS-style spring curve — feels more natural than the standard
Material easing for a sheet sliding up + down. 420ms balances
"deliberate but not laggy". */
const ANIM_MS = 420;
const EASE = 'cubic-bezier(0.32, 0.72, 0.24, 1)';
/* The four real business lines available. Savings is excluded — it's
not yet activated in the wallet (still shows the "Activate" CTA). */
const ACCOUNT_OPTIONS = [
{ id: 'trading', label: 'Trading', color: '#00AFAB' },
{ id: 'gold', label: 'Gold', color: '#FAC515' },
{ id: 'wealth', label: 'Wealth', color: '#006B67' },
{ id: 'shares', label: 'Cash Equities', color: '#2E90FA' },
];
const ACCOUNT_LABEL = ACCOUNT_OPTIONS.reduce((m, a) => { m[a.id] = a.label; return m; }, {});
/* Stub card — populated on first render of the deposit/withdraw flow.
Demo only; no real card storage. */
const CARD = { brand: 'Visa', last4: '8821', name: 'Ariz Raza' };
const TITLES = {
deposit: { title: 'Deposit', cta: 'Confirm deposit', toast: 'Deposit confirmed' },
withdraw: { title: 'Withdraw', cta: 'Confirm withdrawal', toast: 'Withdrawal sent' },
transfer: { title: 'Transfer', cta: 'Confirm transfer', toast: 'Transfer complete' },
};
/* Quick-amount chips ($100 / $500 / $1k / $5k). Tap to set the input
to that exact value; useful so the user doesn't have to type. */
const QUICK_AMOUNTS = [100, 500, 1000, 5000];
const CloseGlyph = () => (
);
/* Inline 18px spinner — circular indeterminate via a CSS keyframe.
Used inside the Confirm button while a deposit is "processing". */
const Spinner = ({ color = '#fff' }) => (
);
/* Register the spin keyframe once per session — the spinner uses it
via `animation`. Idempotent: only inject once. */
if (typeof document !== 'undefined' && !document.getElementById('cash-flow-spin-keyframes')) {
const s = document.createElement('style');
s.id = 'cash-flow-spin-keyframes';
s.textContent = '@keyframes cashFlowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
document.head.appendChild(s);
}
const ArrowDown = ({ color = '#00AFAB' }) => (
);
/* Format a balance with 2-decimal precision. */
const fmtUSD = (n) => '$' + Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
/* Card pill — used in deposit (source) and withdraw (destination).
Visual: dark navy panel with brand + last4 + cardholder. Read-only
for now since the user said any fake number is fine — saved card
only. */
const CardPanel = () => (
);
/* Account selector — row of 4 chips, one per business line. Shows the
live balance underneath each label so the user has context. */
const AccountChips = ({ value, onChange, exclude }) => (
);
/* Amount input — numeric input with quick-pick chips below. */
const AmountField = ({ value, setValue, max }) => {
const onInput = (e) => {
/* Strip everything that isn't a digit or '.'; keep at most one dot. */
let s = e.target.value.replace(/[^0-9.]/g, '');
const i = s.indexOf('.');
if (i >= 0) s = s.slice(0, i + 1) + s.slice(i + 1).replace(/\./g, '');
setValue(s);
};
return (
$
{max != null ? (
) : null}
{QUICK_AMOUNTS.map((q) => (
))}
);
};
const Section = ({ label, children }) => (
{label}
{children}
);
const Arrow = () => (
);
const CashFlowSheet = ({ mode, visible, onClose }) => {
const [mounted, setMounted] = React.useState(false);
const [shown, setShown] = React.useState(false);
/* Cache the latest non-null mode locally. Without this, when the
parent flips mode → null on close, the early-return below would
unmount the sheet immediately and skip the close animation. By
keeping `activeMode` populated through the close transition the
form continues to render until `mounted` flips false. */
const [activeMode, setActiveMode] = React.useState(mode);
React.useEffect(() => { if (mode) setActiveMode(mode); }, [mode]);
/* Form state. account is used for deposit (target) + withdraw (source).
transfer uses fromId / toId. */
const [amount, setAmount] = React.useState(() => {
/* Voice tool open_cash_flow may pre-fill via window.__cashFlowAmount.
Consume + clear so it doesn't leak into the next mount. */
if (typeof window !== 'undefined' && window.__cashFlowAmount) {
const v = window.__cashFlowAmount;
window.__cashFlowAmount = '';
return v;
}
return '';
});
const [account, setAccount] = React.useState('trading');
const [fromId, setFromId] = React.useState('trading');
const [toId, setToId] = React.useState('gold');
const balances = window.useBalances();
const { deposit, withdraw, transfer, addPendingWithdrawal } = window.useTradeMutators();
/* Deposit demo: pressing Confirm shows a 5s spinner, then "fails"
without moving any money. Triggers the global notification. */
const [processing, setProcessing] = React.useState(false);
React.useEffect(() => { if (visible) setProcessing(false); }, [visible, mode]);
/* Reset form whenever the mode changes (or the sheet opens). The
voice tool open_cash_flow may pre-fill via window.__cashFlowAmount;
consume + clear here so the next open isn't sticky. */
React.useEffect(() => {
if (visible) {
const preset = (typeof window !== 'undefined' && window.__cashFlowAmount) ? window.__cashFlowAmount : '';
if (preset) window.__cashFlowAmount = '';
setAmount(preset);
setAccount('trading');
setFromId('trading');
setToId('gold');
}
}, [visible, mode]);
/* Mount / shown / unmount choreography — same double-rAF trick as
EquitiPlusModal so the open transition has a starting frame. */
React.useEffect(() => {
if (visible) {
setMounted(true);
let raf2;
const raf1 = requestAnimationFrame(() => {
raf2 = requestAnimationFrame(() => setShown(true));
});
return () => {
cancelAnimationFrame(raf1);
if (raf2) cancelAnimationFrame(raf2);
};
} else if (mounted) {
setShown(false);
const t = setTimeout(() => setMounted(false), ANIM_MS);
return () => clearTimeout(t);
}
}, [visible]);
/* Derive validation + handleConfirm BEFORE the visibility early-
return so the bridge useEffect below stays at the top level
(Rules of Hooks). When the sheet isn't mounted, activeMode is
stale but harmless — the bridge methods just won't be useful. */
const m = TITLES[activeMode || 'deposit'] || TITLES.deposit;
const amt = parseFloat(amount);
const validAmount = isFinite(amt) && amt > 0;
/* Caps: deposit has no cap (card has infinite money in demo).
Withdraw is capped to the source account's balance.
Transfer is capped to fromId's balance, and from !== to. */
let cap = null;
if (activeMode === 'withdraw') cap = balances[account] || 0;
else if (activeMode === 'transfer') cap = balances[fromId] || 0;
const overCap = cap != null && validAmount && amt > cap;
const sameAccount = activeMode === 'transfer' && fromId === toId;
const canConfirm = validAmount && !overCap && !sameAccount;
const handleConfirm = () => {
if (!canConfirm || processing) return;
if (activeMode === 'deposit') {
/* Demo: spin for 5 seconds, then "fail" with no balance change.
The global notification surfaces the explanation. */
setProcessing(true);
setTimeout(() => {
setProcessing(false);
if (window.showCashFlowNotification) window.showCashFlowNotification('deposit');
}, 5000);
return;
}
if (activeMode === 'withdraw') {
/* Demo: withdrawal goes pending. Balance is NOT subtracted; the
wallet's pending row reflects the request via the new
pendingWithdrawals slice. The same notification surfaces the
"payment provider delay" explanation. */
addPendingWithdrawal(account, amt);
onClose();
if (window.showCashFlowNotification) window.showCashFlowNotification('withdraw');
return;
}
if (activeMode === 'transfer') {
transfer(fromId, toId, amt);
onClose();
if (window.showToast) {
const label = `${ACCOUNT_LABEL[fromId]} → ${ACCOUNT_LABEL[toId]}`;
window.showToast(`${m.toast} · ${fmtUSD(amt)} ${label}`, 'success');
}
}
};
/* Programmatic bridge — voice tool open_cash_flow(execute=true)
calls these after the sheet has rendered: setAmount visibly,
then confirm. Re-bound every render so closures stay fresh. */
React.useEffect(() => {
window.equiti = window.equiti || {};
window.equiti.cashFlow = {
setAmount: (v) => setAmount(String(v == null ? '' : v)),
setAccount: (id) => setAccount(id),
setTransferFrom: (id) => setFromId(id),
setTransferTo: (id) => setToId(id),
confirm: handleConfirm,
canConfirm: () => mounted && !!activeMode && canConfirm && !processing,
mode: () => activeMode,
};
});
if (!mounted || !activeMode) return null;
return (