;(function () {
/* CashFlowNotification — slide-down banner at the top of the frame
for cash-flow demo failures (deposit failed, withdrawal pending due
to provider issues) and trading-related demo gates (market closed
for symbols without a live tick feed). Two visual states:
pill : compact 350×74 row with alert icon + title + compact copy.
Slides down from above the frame on first show.
card : expanded panel with the same icon + title + body copy +
"Talk to Equiti+" button + close X. Grows in place from
the pill — same top anchor, height + inner content morph.
Triggered globally via window.showCashFlowNotification(kind, ctx)
where kind ∈ {'deposit', 'withdraw', 'marketClosed', 'liquidityDown'}.
ctx is an optional object — for the symbol-aware kinds it holds
{sym, name} so the copy can mention the specific instrument.
Tapping the pill expands it and minimises any open cash-flow sheet
via window.openCashFlow(null). The Talk-to button calls
window.openVoice() and dismisses. */
const ANIM_MS = 380;
const EASE = 'cubic-bezier(0.32, 0.72, 0.24, 1)';
/* Build the copy block for the active notification. Symbol-aware kinds
pull from ctx so the body copy can name the instrument. Other kinds
ignore ctx. */
function buildCopy(kind, ctx) {
if (kind === 'liquidityDown') {
const symLabel = (ctx && (ctx.name || ctx.sym)) || 'this symbol';
const symId = (ctx && ctx.sym) || 'this symbol';
return {
title: 'Liquidity price stream down',
compact: 'Click here for more insight on why this trade is unavailable.',
body: `${symLabel} is currently unavailable for trading because our liquidity providers' price stream for ${symId} is offline. We're working on restoring the feed — please try again shortly.`,
};
}
if (kind === 'marketClosed') {
const symLabel = (ctx && (ctx.name || ctx.sym)) || 'this symbol';
const symId = (ctx && ctx.sym) || 'this symbol';
return {
title: 'Market closed',
compact: 'Click here for more insight on why this trade is unavailable.',
body: `Trading on ${symLabel} is closed at the moment. We don't have a live price feed for ${symId} right now, so orders can't be placed. Please try again during regular market hours for this instrument.`,
};
}
if (kind === 'withdraw') {
return {
title: 'Withdrawal pending',
compact: 'Click here for more insight on the delay reason.',
body: 'Withdrawals are taking longer than usual due to a delay with our payment providers. Your request is queued and will process automatically once their systems are back online.',
};
}
/* default: deposit */
return {
title: 'Deposit failed',
compact: 'Click here for more insight on the failure reason.',
body: "Deposits are temporarily unavailable due to scheduled maintenance with our payment providers. To bypass the downtime, we've sent a secure payment link to your email — completing the deposit there will credit your account immediately. No funds were taken from your card.",
};
}
const Alert = ({ size = 22, color = '#F04438' }) => (
);
const ChevR = ({ color = '#98A2B3' }) => (
);
const CloseX = ({ color = '#98A2B3' }) => (
);
const CashFlowNotification = () => {
const [kind, setKind] = React.useState(null);
const [ctx, setCtx] = React.useState(null);
const [mounted, setMounted] = React.useState(false);
const [shown, setShown] = React.useState(false);
const [expanded, setExpanded] = React.useState(false);
/* Cache the latest non-null kind + ctx so close animation has copy
to render until unmount. */
const [activeKind, setActiveKind] = React.useState(null);
const [activeCtx, setActiveCtx] = React.useState(null);
React.useEffect(() => {
if (kind) {
setActiveKind(kind);
setActiveCtx(ctx);
}
}, [kind, ctx]);
React.useEffect(() => {
window.showCashFlowNotification = (k, c) => {
if (!k) return;
setKind(k);
setCtx(c || null);
setExpanded(false);
};
return () => { delete window.showCashFlowNotification; };
}, []);
/* Mount / show choreography. */
React.useEffect(() => {
if (kind) {
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);
setActiveKind(null);
setActiveCtx(null);
}, ANIM_MS);
return () => clearTimeout(t);
}
}, [kind]);
if (!mounted || !activeKind) return null;
const copy = buildCopy(activeKind, activeCtx);
const dismiss = () => { setKind(null); setCtx(null); };
const expand = () => {
/* Tapping the pill expands it AND closes any open cash-flow
sheet ("minimise the deposit page"). The cash-flow sheet hooks
into window.openCashFlow at App level — null clears it. */
setExpanded(true);
if (window.openCashFlow) window.openCashFlow(null);
};
const handleTalk = () => {
setKind(null);
setCtx(null);
if (window.openVoice) window.openVoice();
};
/* The wordmark used inside the Talk-to button. Re-use the one
exposed by hero.jsx (Equiti). */
const Wordmark = window.EquitiWordmark;
return (
{/* Top row — always visible. Same in both states.
Pill (collapsed): title + compact subtitle stacked vertically.
Card (expanded): title alone — body copy lives in the panel
below. */}