);
};
/* ---------- Status chip ----------
The label, chip class, dot colour and description for each payment status.
This lived in `window.MOCK.STATUSES`, which put presentation inside the
mock-data object and made every screen that renders a status chip count as
a MOCK reader. It is not data: no row in any table decides that "declined"
is red. It is styling, and styling is legitimately static.
`data.jsx` loads first and still exports its own copy for the screens that
have not been wired yet; when the last of them goes, so does that copy. The
keys are the payment status vocabulary, and the legacy aliases stay so rows
written before the rename still render. */
const PB_STATUS_CHIPS = {
created: { label: "Created", chip: "chip--neutral", dot: "var(--n-400)", desc: "Initiated on our side" },
pending: { label: "Pending", chip: "chip--warn", dot: "var(--warn-500)", desc: "Awaiting provider" },
declined: { label: "Declined", chip: "chip--err", dot: "var(--err-500)", desc: "Declined on our side (limits)" },
failed: { label: "Failed", chip: "chip--err", dot: "var(--err-500)", desc: "Rejected by provider" },
rejected: { label: "Rejected", chip: "chip--err", dot: "var(--err-500)", desc: "Rejected by operator" },
to_confirm: { label: "To confirm", chip: "chip--info", dot: "var(--info-500)", desc: "Needs manual confirm" },
approved: { label: "Approved", chip: "chip--ok", dot: "var(--ok-500)", desc: "Approved by operator" },
balanced: { label: "Balanced", chip: "chip--ok", dot: "var(--ok-600)", desc: "Auto-completed within limits" },
completed: { label: "Balanced", chip: "chip--ok", dot: "var(--ok-500)", desc: "Auto-completed within limits" },
review: { label: "To confirm", chip: "chip--info", dot: "var(--info-500)", desc: "Needs manual confirm" },
cancelled: { label: "Declined", chip: "chip--neutral", dot: "var(--n-400)", desc: "Cancelled" },
};
window.PB_STATUS_CHIPS = PB_STATUS_CHIPS;
const StatusChip = ({ status }) => {
const s = PB_STATUS_CHIPS[status];
if (!s) return null;
return (
{s.label}
);
};
/* ---------- Type chip (Deposit/Withdrawal) ---------- */
const TypeChip = ({ type }) => {
const isDep = type === "Deposit";
return (
{type}
);
};
/* ---------- Currency symbols + mock FX (demo-only static rates, EUR base) ----------
A brand/skin can be configured in any of the CURRENCIES supported by
Settings' brand form (src/pages/Settings.jsx). Reporting pages need to
show that brand's own currency by default plus a quick EUR/USD
conversion, so both the symbol lookup and the conversion table live
here once, shared by Money and any page that renders money. */
const CURRENCY_SYMBOLS = { EUR: "€", USD: "$", GBP: "£", JPY: "¥", INR: "₹", CAD: "C$", AUD: "A$", BRL: "R$", MXN: "$", TRY: "₺", BOB: "Bs", PYG: "₲" };
const currencySymbol = (currency) => CURRENCY_SYMBOLS[currency] || (currency ? currency + " " : "");
window.currencySymbol = currencySymbol;
/* REAL RATES, OR NO CONVERSION. There is no static table here any more.
------------------------------------------------------------------------
`FX_EUR_PER_UNIT` used to be sixteen hardcoded rates — EUR 1, USD 0.92, ARS
0.00095 — and `fxConvert` was used by the navy strip on EVERY screen, by the
Dashboard, by Methods and by six call sites in the Betting report. Real
balances multiplied by invented rates, rendered with a currency symbol in
front of them.
`window.FX_RATES` is EUR-per-unit and is filled in by app.jsx from
`currency_latest_rate`. Note the inversion: the DATABASE stores units PER
EUR (007), so a rate of 1465 for USD means 1465 USD to the euro and the
reciprocal is what belongs here. Getting that backwards is the defect found
twice already in the report screens, and it survives review because the base
currency stays exactly right while everything else is orders of magnitude
out.
fxConvert returns NULL when it cannot convert — no rate table loaded yet, or
a currency missing from it. It does not fall back to 1:1. A converted figure
nobody can compute must render as "—" and not as the unconverted number
wearing the target currency's symbol, which is the same amount claiming to
be a different amount of money. */
window.FX_RATES = window.FX_RATES || null;
const fxConvert = (amount, from, to) => {
const a = Number(amount);
if (!Number.isFinite(a)) return null;
if (!from || !to || from === to) return a;
const t = window.FX_RATES;
if (!t) return null;
const rf = Number(t[from]), rt = Number(t[to]);
if (!rf || !rt) return null;
return (a * rf) / rt;
};
window.fxConvert = fxConvert;
/* Curated list for currency pickers (e.g. the host navy strip's display-
currency selector) — EUR/USD/GBP first since they're the most requested,
the rest alphabetical. A symbol and a label are not money, so they stay
static; the RATE is money and comes from the database. A code listed here
whose rate has not loaded converts to nothing and renders "—". */
const CURRENCY_LABELS = {
EUR: "Euro", USD: "US Dollar", GBP: "British Pound", CAD: "Canadian Dollar",
AUD: "Australian Dollar", BRL: "Brazilian Real", MXN: "Mexican Peso",
INR: "Indian Rupee", JPY: "Japanese Yen", ARS: "Argentine Peso",
THB: "Thai Baht", NGN: "Nigerian Naira", LBP: "Lebanese Pound", TRY: "Turkish Lira",
BOB: "Bolivian Boliviano", PYG: "Paraguayan Guaraní",
};
const CURRENCY_LIST = ["EUR", "USD", "GBP", ...Object.keys(CURRENCY_LABELS).filter(c => !["EUR","USD","GBP"].includes(c)).sort()]
.map(code => ({ code, symbol: currencySymbol(code), label: CURRENCY_LABELS[code] || code }));
window.CURRENCY_LIST = CURRENCY_LIST;
/* ---------- Money ---------- */
const Money = ({ amount, currency = "EUR", sign = false, className = "" }) => {
const sym = currencySymbol(currency);
const v = Math.abs(amount).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
return {sign && amount >= 0 ? "+" : amount < 0 ? "−" : ""}{sym}{v};
};
/* Small "≈ €X · $Y" note for a KPI/headline figure denominated in a
brand's own currency — omits whichever of EUR/USD IS that currency so
a EUR brand only sees a USD line and vice versa. Renders nothing for
the aggregate "Multi" pseudo-currency (All brands view), where summed
amounts aren't a single real currency to convert from. Pass
nativeCurrency when `currency` is itself an override (e.g. the
Payments "view in" picker) so the brand's own currency still shows up
as a reference point alongside EUR/USD. */
const CurrencyConversion = ({ amount, currency, nativeCurrency, divisor = 1000, suffix = "K", decimals = 1 }) => {
if (!currency || currency === "Multi") return null;
const targets = [...new Set(["EUR", "USD", nativeCurrency].filter(Boolean))].filter(c => c !== currency);
if (!targets.length) return null;
const fmt = (v) => `${v < 0 ? "-" : ""}${Math.abs(v / divisor).toFixed(decimals)}${suffix}`;
return (
);
// Sentinel stays where the consumer mounted us (so we can find the
// anchor). The card portals to .
return (
<>
{ReactDOM.createPortal(card, document.body)}
);
};
/* ---------- CopyableId ----------
Renders a monospaced ID with a small copy-to-clipboard button that
appears on hover. Flashes a check icon for ~1.2s after a successful
copy. Keeps text selection working since the button has its own click
target. */
const CopyableId = ({ value, display, className, style, color }) => {
const [copied, setCopied] = React.useState(false);
if (value == null) return null;
const copy = (e) => {
e.stopPropagation();
e.preventDefault();
const text = String(value);
const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1200); };
if (navigator.clipboard?.writeText) {
navigator.clipboard.writeText(text).then(done).catch(() => {
// Fallback for older / locked-down environments.
const ta = document.createElement("textarea");
ta.value = text; ta.setAttribute("readonly", "");
ta.style.position = "fixed"; ta.style.opacity = "0";
document.body.appendChild(ta); ta.select();
try { document.execCommand("copy"); done(); } finally { document.body.removeChild(ta); }
});
} else {
const ta = document.createElement("textarea");
ta.value = text; document.body.appendChild(ta); ta.select();
try { document.execCommand("copy"); done(); } finally { document.body.removeChild(ta); }
}
};
return (
{display ?? String(value)}
);
};
/* ---------- Provider lookup ----------
Resolves the PSP(s) handling a given brand × method. Tries the live
ROUTES config first (Settings → Routes & cascading), falls back to the
PSP_PROFILES directory (which PSPs declare support for the method).
Returns { primary, chain: [{id, name}], source } or null. */
const PSP_DISPLAY_NAMES = {
stripe:"Stripe", adyen:"Adyen", trustly:"Trustly", skrillpsp:"Skrill PSP",
skrill:"Skrill", coinify:"Coinify", paysafe:"Paysafe", worldpay:"Worldpay",
checkout:"Checkout", braintree:"Braintree",
};
const prettyPsp = (id) => PSP_DISPLAY_NAMES[id] || (id && id[0].toUpperCase() + id.slice(1));
window.getAllProviders = function () {
const out = new Map();
for (const p of (window.MOCK_PSP_PROFILES || [])) {
out.set(p.id, { id: p.id, name: p.name || prettyPsp(p.id) });
}
for (const r of (window.MOCK_ROUTES || [])) {
for (const id of (r.chain || [])) {
if (!out.has(id)) out.set(id, { id, name: prettyPsp(id) });
}
}
return Array.from(out.values()).sort((a, b) => a.name.localeCompare(b.name));
};
window.lookupMethodProvider = function ({ brand, methodId, methodName } = {}) {
const ROUTES = window.MOCK_ROUTES || [];
const PSPS = window.MOCK_PSP_PROFILES || [];
const brandFields = brand ? [brand.name, brand.short, brand.id].filter(Boolean).map(s => String(s).toLowerCase()) : [];
const matchesBrand = (rBrand) => {
if (!rBrand || rBrand === "any") return true;
const rl = String(rBrand).toLowerCase();
return brandFields.some(b => b === rl || b.includes(rl) || rl.includes(b));
};
const matchesMethod = (rMethod) => {
if (!rMethod) return false;
const rl = String(rMethod).toLowerCase();
const targets = [methodName, methodId].filter(Boolean).map(s => String(s).toLowerCase());
return targets.some(t => t === rl || t.replace(/\s+/g, "") === rl.replace(/\s+/g, ""));
};
// Prefer the most specific route (non-"any" brand wins).
const candidates = ROUTES.filter(r => matchesMethod(r.method) && matchesBrand(r.brand));
candidates.sort((a, b) => (a.brand === "any" ? 1 : 0) - (b.brand === "any" ? 1 : 0));
const route = candidates[0];
if (route && route.chain?.length) {
return {
primary: route.chain[0],
primaryName: prettyPsp(route.chain[0]),
chain: route.chain.map(id => ({ id, name: prettyPsp(id) })),
source: "route",
routeId: route.id,
status: route.status,
};
}
const supporting = PSPS.filter(p => (p.methods || []).includes(methodId));
if (supporting.length) {
return {
primary: supporting[0].id,
primaryName: supporting[0].name || prettyPsp(supporting[0].id),
chain: supporting.map(p => ({ id: p.id, name: p.name || prettyPsp(p.id) })),
source: "psp",
};
}
return null;
};
/* Tip — small inline "i" help badge. The popover is portaled to body and
positioned in viewport coordinates so an ancestor's overflow or fixed
modal stacking can never clip it. Flips below the badge automatically
when there isn't enough room above, repositions on scroll / resize. */
const Tip = ({ children, size = 13 }) => {
const [open, setOpen] = useState(false);
const [coords, setCoords] = useState(null);
const badgeRef = useRef(null);
const reposition = useCallback(() => {
const el = badgeRef.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const TIP_W = 300, TIP_H_GUESS = 110, M = 8;
const vw = window.innerWidth, vh = window.innerHeight;
const placement = rect.top < TIP_H_GUESS + M ? "bottom" : "top";
const top = placement === "top" ? rect.top - M : rect.bottom + M;
const centerX = rect.left + rect.width / 2;
const halfW = TIP_W / 2;
let left = centerX;
if (left - halfW < M) left = halfW + M;
if (left + halfW > vw - M) left = vw - M - halfW;
setCoords({ left, top, placement, badgeCenterX: centerX });
}, []);
useEffect(() => {
if (!open) return;
reposition();
const onScroll = () => reposition();
const onResize = () => reposition();
window.addEventListener("scroll", onScroll, true);
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("scroll", onScroll, true);
window.removeEventListener("resize", onResize);
};
}, [open, reposition]);
return (
setOpen(true)} onMouseLeave={()=>setOpen(false)}
onFocus={()=>setOpen(true)} onBlur={()=>setOpen(false)}
tabIndex={0}
style={{position:"relative", marginLeft:6, display:"inline-flex", alignItems:"center", justifyContent:"center",
width:size, height:size, borderRadius:999,
background: open ? "var(--primary, #1e40af)" : "var(--n-75)",
color: open ? "#fff" : "var(--text-tertiary)",
fontSize: Math.max(8, size - 4), fontWeight:800, cursor:"help", userSelect:"none",
verticalAlign:"middle", outline:"none", transition:"background .12s",
fontFamily:"Georgia, 'Times New Roman', serif", fontStyle:"italic", lineHeight:1,
}}>
i
{open && coords && ReactDOM.createPortal(
{children}
,
document.body
)}
);
};
/* Explainer — the "What this is, in plain English" panel used at the top
of major pages and tabs. Soft primary tint, info icon on the left, free
children on the right. Pass `bullets` for a short list under the lead. */
const Explainer = ({ title = "What this is, in plain English", children, bullets, compact = false }) => (
{title}
{children}
{bullets && bullets.length > 0 && (
{bullets.map((b, i) =>
{b}
)}
)}
);
/* goRoute — the canonical SPA cross-link.
Pushes a registered route's path and lets app.jsx's popstate handler
resolve it, the same mechanism browser Back/Forward uses. Returns false
(navigating nowhere) when the route id has no prototype page, so callers
can fall back honestly instead of pretending the jump happened.
Several screens grew private copies of this (hdNavTo, hrnwNavTo, …) before
it was shared; this is the one new code should use. */
const goRoute = (routeId) => {
try {
const path = window.pathForActive && window.pathForActive(routeId);
if (!path) return false;
if (window.location.pathname !== path) window.history.pushState({ active: routeId }, "", path);
window.dispatchEvent(new PopStateEvent("popstate"));
return true;
} catch (_e) { return false; }
};
/* NoBackend — the canonical "this control needs a server" affordance.
A prototype button that fires a toast saying the real thing "runs in the
admin build" is worse than a dead button: it implies work happened. The
honest form is a control that renders DISABLED and names the endpoint an
engineer still has to wire. HostPlayers.jsx and HostUsers.jsx each grew a
local copy of this during the first honesty pass; this is the shared one
for every screen after it.
The tooltip hangs off the wrapper span deliberately — browsers suppress
`title` on a disabled control, so the hint needs an enabled ancestor. */
const NoBackend = ({ need, what, className = "", children, style, block, title }) => (
);
/* ====================================================================
Wave 0 shared primitives — PayBO surface (design-alignment plan §4).
CSS for all of these lives in styles/tokens.css ("Wave 0" section).
==================================================================== */
/* ChartTip — the shared dark chart tooltip (plan §4.6).
Usage:
Render it inside a position:relative hover target; the class anchors it
centered above (override via `style` for other placements). Replaces the
hand-rolled #0f172a tooltips in Dashboard/ui charts. */
const ChartTip = ({ title, rows = [], style, className = "" }) => (