);
};
/* CustomerioPanel — the per-skin Customer.io configuration surface.
Master toggle (2.2) · secure credentials (2.3) · every outbound trigger
visible with its own on/off and dynamic tunable fields (2.1).
DEFINED here, RENDERED in CMS → Skins → Customer.io (HskCustomerIoTab),
against skin_customerio_configs via upsert_customerio_config (070). The owner
moved the surface there on 2026-08-16 — and the move exposed that this panel
was rendered by NOTHING on this page: it was defined, documented, pointed at
by the skins tab, and never mounted. The definition stays in this file (every
top-level name is a window global, so the tab renders it directly), which is
how the surface moves without a second copy that would drift. */
/* Section heading used inside the integration panel. Compact, uppercase. */
const CioHeading = ({ icon, children, note }) => (
{icon && }
{children}
{note && · {note}}
);
/* Read-only inbound webhook URL with copy-to-clipboard. Per skin — this is
the endpoint the operator pastes into Customer.io; it pairs with the
signing secret. */
const CioWebhookField = ({ url }) => {
const [copied, setCopied] = useState(false);
const copy = () => {
try { navigator.clipboard && navigator.clipboard.writeText(url); } catch (_e) {}
setCopied(true); setTimeout(() => setCopied(false), 1500);
};
return (
{on ? "Active for this skin · messaging automation & lifecycle campaigns" : "Off — no events emitted, no inbound webhooks processed. Turn on to configure."}
{isNew ? "Configure a new PSP profile" : "All values are editable. Saved values apply to the engine immediately."}
{/* Sub-tabs */}
{etab === "general" && (
Identity — name, kind (Card / Wallet / Bank / Crypto), and whether the PSP is active or paused.,
<>Costs & settlement — fees the PSP charges and how fast funds clear (T+0 / T+1 / T+2).,
<>Limits — what the PSP itself will accept per transaction / day / month.,
<>Health — live success rate, average latency, timeout rate. Used by the hybrid ranking to skip a flaky PSP automatically.,
<>Tech — endpoint URL, request timeout, webhook URL the PSP calls when a transaction changes state.,
]}>
Everything the routing engine needs to know about {draft.name || "this PSP"} on the operational side. Coverage and liquidity live in their own tabs.
If no response within the timeout, the cascade engine treats it as timeout / network and routes to the next provider.
)}
{etab === "liquidity" && (
Floor — the minimum balance to keep in the wallet. Drop below it and withdrawals start failing for empty wallet. Set the floor at ~10–20% of typical daily payout volume.,
<>Ceiling — the maximum we want sitting idle in this PSP. Hit it and the idle-capital alarm asks treasury to sweep funds out into the bank account.,
<>Min withdrawable — the smallest amount the PSP itself accepts on a single payout. Below this the PSP rejects the request before we even try.,
<>Liquidity alarms — multiple per-PSP rules (wallet near ceiling, below floor, settlement delay, decline-rate spike…) with destinations and severity. Same shape as the main Alarms.,
]}>
Per-PSP wallet thresholds and alarm rules. Sweep / near-ceiling alerts now live in the alarm list below — add a Wallet near ceiling rule to fire when balance crosses a configurable % of the ceiling.
Sweep / near-ceiling alerts now live in Liquidity alarms below — add a Wallet near ceiling rule there to fire when balance hits a configurable % of the ceiling.
{/* Liquidity alarms — same shape as the main Alarms page,
scoped to this provider's liquidity metrics. Multiple
rules per PSP are supported. The legacy single-toggle
"floorAlert" + "notifChannels" still work as the seed for
a default rule on first edit. */}
{(() => {
/* Trimmed catalog — the seven liquidity metrics that
matter most for treasury and routing. Long descriptions
so the operator never needs to guess what each one
measures or when it should fire. */
const LIQ_METRICS = [
{
key:"wallet_below_floor",
label:"Wallet below floor",
unit:"amount",
suggestedOp:"<=",
suggestedThreshold: liq.floorEur,
desc:"The PSP's live wallet balance dropped at or below the operator-set floor. Withdrawals will start failing for empty wallet very soon. Most important top-up signal — wire treasury, ops and on-call. Suggested threshold: the configured Floor value (auto-filled above).",
},
{
key:"wallet_near_ceiling",
label:"Wallet near ceiling",
unit:"%",
suggestedOp:">=",
suggestedThreshold: liq.sweepPct || 80,
desc:"Balance has reached this percentage of the operator-set ceiling (default 80% — e.g. 80% of a 2,000,000 ceiling fires at 1,600,000 in the PSP wallet currency). Most important sweep signal — capital is starting to sit idle, treasury should pull funds out into the bank. Suggested threshold: 80%.",
},
{
key:"wallet_below_min_wd",
label:"Below minimum withdrawable",
unit:"amount",
suggestedOp:"<=",
suggestedThreshold: liq.minWithdrawalEur,
desc:"Balance dropped below the smallest single-withdrawal amount the PSP itself will accept. Any withdrawal request to this PSP will now be rejected by the PSP before we even try. Suggested threshold: the configured Min withdrawable value (auto-filled).",
},
{
key:"settlement_delay",
label:"Settlement delay",
unit:"hours",
suggestedOp:">=",
suggestedThreshold: 24,
desc:"Funds the PSP should have settled to our bank (T+0 / T+1 / T+2) are still pending after this many hours. Usually means a PSP-side hold, a banking-rail delay, or a compliance review. Open a ticket with the PSP. Suggested threshold: 24 hours past the SLA.",
},
{
key:"psp_down",
label:"PSP marked OFFLINE",
unit:"(event)",
suggestedOp:"=",
suggestedThreshold:"offline",
desc:"Fires the instant health monitoring flips this PSP to OFFLINE / DOWN. The routing engine has already started excluding it from chains. Always critical — wake the on-call to confirm the outage and notify the PSP. Suggested severity: critical.",
},
{
key:"psp_success_rate_below",
label:"PSP success rate dropped",
unit:"%",
suggestedOp:"<",
suggestedThreshold: 90,
desc:"The PSP's success rate in the rolling window dropped below this percentage. Earliest signal that the PSP is degrading — well before it actually goes OFFLINE. Consider pausing it manually if the rate keeps dropping. Suggested threshold: 90%.",
},
{
key:"single_tx_above",
label:"Single transaction ≥ amount",
unit:"amount",
suggestedOp:">=",
suggestedThreshold: 25_000,
desc:"Fires the instant a single transaction through this PSP is created with an amount at or above the threshold. Wakes the VIP desk for the very large stakes and the fraud team for anything that looks coordinated. Suggested threshold: 25,000 in the PSP wallet currency.",
},
];
const LIQ_METRIC_BY = Object.fromEntries(LIQ_METRICS.map(m => [m.key, m]));
const SEVS = ["low","medium","high","critical"];
// Seed: migrate the legacy `floorAlert + notifChannels` pair
// into a default rule the first time we open the editor.
const seedRules = () => {
const out = [];
if (liq.floorAlert) {
const defaultChannels = draft.notifChannels && draft.notifChannels.length ? [...draft.notifChannels] : ["slack","email"];
// Best-effort: pick one global destination per default
// channel so the rule renders with a sensible selection.
const defaultDests = (destinations || [])
.filter(d => d.enabled && defaultChannels.includes(d.channel))
.reduce((acc, d) => { if (!acc.find(x => x.channel === d.channel)) acc.push(d); return acc; }, [])
.map(d => d.id);
out.push({ id:"seed-floor", name:`${draft.name || "Provider"} · wallet below floor`,
metric:"wallet_below_floor", op:"<=", threshold: liq.floorEur,
destinations: defaultDests, channels: defaultChannels,
severity:"high", status:"on" });
out.push({ id:"seed-sweep", name:`${draft.name || "Provider"} · wallet near ceiling`,
metric:"wallet_near_ceiling", op:">=", threshold: liq.sweepPct || 80,
destinations: defaultDests, channels: defaultChannels,
severity:"medium", status:"on" });
}
return out;
};
const rules = Array.isArray(draft.liquidityAlarms) ? draft.liquidityAlarms : seedRules();
const setRules = (next) => set("liquidityAlarms", next);
const addRule = () => {
const m = LIQ_METRICS[0];
setRules([...rules, {
id: "la" + Math.random().toString(36).slice(2, 7),
name: `${draft.name || "Provider"} · new alarm`,
metric: m.key, op: m.suggestedOp, threshold: m.suggestedThreshold,
destinations:[], channels:[], severity:"medium", status:"on",
}]);
};
const updateRule = (i, patch) => setRules(rules.map((r, j) => j === i ? { ...r, ...patch } : r));
const removeRule = (i) => setRules(rules.filter((_, j) => j !== i));
const toggleRuleDestination = (i, destId) => {
const cur = rules[i].destinations || [];
const next = cur.includes(destId) ? cur.filter(x => x !== destId) : [...cur, destId];
// Mirror picked destinations to channels for the read-only
// rendering in the general alarm list.
const derivedChannels = Array.from(new Set(next.map(id => (destinations || []).find(d => d.id === id)?.channel).filter(Boolean)));
updateRule(i, { destinations: next, channels: derivedChannels });
};
return (
Liquidity alarms— same shape as Settings → Alarms, scoped to this PSP's liquidity metrics
{rules.length === 0 ? (
No liquidity alarms configured yet. Click Add alarm to create one — typical first rules are wallet_below_floor and wallet_near_ceiling.
) : (
{rules.map((r, i) => {
const m = LIQ_METRIC_BY[r.metric] || LIQ_METRICS[0];
const sev = SEVERITY_CHIP[r.severity] || SEVERITY_CHIP.low;
return (
Liquidity alarms post to the destinations chosen on each rule. Add new destinations on the fly with the Add destination button — they immediately appear here and on the main Alarms editor. Rules continue to fire while the condition is true and de-duplicate every 5 minutes to avoid alarm storms.
);
})()}
Per-method overrides
— specific method on this PSP can carry a tighter floor / ceiling than the provider defaults
{(draft.methodOverrides || []).length === 0 ? (
No overrides — every supported method on this PSP uses the provider-level thresholds above.
Every supported method already has an override. Add more methods on the Coverage tab to extend.
)}
)}
{etab === "coverage" && (
Supported methods — the payment instruments this PSP can process. The routing engine refuses to chain this PSP for a method it doesn't list here.,
<>Geographies — countries the PSP operates in. The route's GEO scope is intersected with this list; mismatches are excluded at runtime.,
<>Licenses · operations — under which operator licenses the PSP is authorised to process payments, and which operations (deposit / withdraw / refund) each license allows.,
]}>
What this PSP can do and where it can do it. Used by the routing engine to filter incompatible PSPs out of a chain before they're tried.
Supported payment methodsTick every method this PSP can plausibly process. The routing engine uses this list to filter PSPs out of a route's chain when the route is scoped to a method this PSP doesn't support.
{/* ============================================================
STEP 1 · SCOPE & ROUTING — brand · method · currency · amount
· GEO · license, PLUS the provider chain. Merged so picking a
method instantly filters the provider picker below.
============================================================ */}
{tab === "scope_routing" && (
<>
Identity
set("name", e.target.value)}
placeholder="e.g. IT · Visa · VIP band"
style={{maxWidth:520}}/>
Scope — when does this route apply?
{brandLocked ? (
{activeBrand.name}
) : (
)}
{/* Amount band — clearer than the free-form text. Pick "any"
or set min / max in the route's currency. The compact band
string is composed back to draft.amount so existing routes
keep working. */}
{(() => {
const raw = (draft.amount || "").toString().trim();
const isAny = raw === "" || raw.toLowerCase() === "any";
// Parse "0 – 5,000" / "0-5000" / "0 to 5,000" / "<= 5000" / ">= 1000" into min/max.
const parse = () => {
if (isAny) return { min:"", max:"" };
const cleaned = raw.replace(/,/g, "").replace(/[–—]/g, "-");
const range = cleaned.match(/^(\d+(?:\.\d+)?)\s*(?:-|to)\s*(\d+(?:\.\d+)?)$/i);
if (range) return { min: range[1], max: range[2] };
const max = cleaned.match(/^<=?\s*(\d+(?:\.\d+)?)$/);
if (max) return { min:"0", max: max[1] };
const min = cleaned.match(/^>=?\s*(\d+(?:\.\d+)?)$/);
if (min) return { min: min[1], max:"" };
return { min:"", max:"" };
};
const cur = parse();
const setBand = (min, max) => {
if ((!min || min === "0") && !max) { set("amount", "any"); return; }
if (!max) { set("amount", `≥ ${min || "0"}`); return; }
if (!min || min === "0") { set("amount", `0 – ${max}`); return; }
set("amount", `${min} – ${max}`);
};
const symbol = draft.currency && draft.currency !== "any" ? draft.currency : "any cur.";
return (
Amount band — which transaction sizes this route applies to
Decides which transactions in the route's currency this route matches. "Any amount" matches everything. Otherwise enter a Min and / or Max in {symbol}. Leave Max blank for "Min and above"; leave Min blank for "up to Max". The most-specific band wins when routes overlap.
GEO — countries this route applies to
Player country (resolved from IP / KYC address). Pick one or more ISO codes to scope the route; leave empty to match any country. The routing engine will exclude any PSP whose Coverage tab does not list a selected country.
{(draft.geos || []).length === 0 && Empty = any country}
{/* License scope — multi-select. Empty = any license. */}
License — operator licenses this route applies to
The regulatory license under which the transaction is processed (MGA, UKGC, ADM, ANJ, DGOJ, AAMS, etc.). Use this when the same brand operates under multiple licenses and you need a different chain per license.
{(draft.licenses || []).length === 0 && Empty = any license}
Provider chain · ranking
The ordered list of PSPs the routing engine will try. Position 1 is tried first; on a cascade trigger the engine moves to position 2, and so on. Reorder with the up/down arrows.
{draft.chain.length === 0 ? (
No providers in chain yet. Add at least one below.
{/* Ranking factors — only meaningful when ranking is hybrid.
Manual mode keeps the chain order strictly. */}
{draft.ranking === "hybrid" && (
Ranking factors — hybrid score inputs
Inputs to the hybrid score. Each enabled factor contributes equally to a 0–100 score per PSP. The factors only adjust the operator's chain order when two PSPs are tied or one is unhealthy — they never override the operator's hard ranking.
The chain order you set above is always honored as the operator's preference. Factors only adjust positions when two PSPs are tied or one is unhealthy — they never override the operator's hard ranking.
)}
Strict ranking = always try PSP 1 first; cascade to 2, then 3 on failure. Weighted = split traffic by percentages (e.g. 60/30/10). On failure, cascade still uses chain order. If a PSP is unhealthy or below liquidity floor, its weight is redistributed proportionally to the remaining healthy PSPs.
Cascade triggers
Provider-side outcomes that cause the engine to retry on the next PSP in the chain. Player-side outcomes (insufficient funds, fraud) should not be triggers — they are handled by the policy table below.
{/* Per-trigger explainer panel — always visible so the tech
team can read all triggers in one shot, not just hover one
at a time. */}
What each trigger means · how it's detected
{TRIGGER_OPTIONS.map(t => (
{t} —
{TRIGGER_EXPLANATIONS[t]}
))}
{(() => {
// Cascade-timeout field — preset dropdown OR a custom
// number + unit input, just like the Alarm window picker.
const presetSet = new Set(CASCADE_TIMEOUTS);
const curVal = draft.cascadeTimeout || "30s";
const isPreset = presetSet.has(curVal);
const parse = (v) => {
const m = /^(\d+)\s*(s|sec|m|min|h|hour)?$/i.exec(String(v || ""));
if (!m) return { n: 30, unit: "s" };
const n = parseInt(m[1], 10) || 30;
const u = (m[2] || "s").toLowerCase();
const unit = u.startsWith("h") ? "h" : u.startsWith("m") ? "m" : "s";
return { n, unit };
};
const compose = (n, unit) => {
const v = Math.max(1, parseInt(n, 10) || 1);
return `${v}${unit}`;
};
const cur = parse(curVal);
return (
Cascade if PSP doesn't respond within:
Wall-clock timeout the engine waits for a PSP response before declaring a timeout and moving to the next provider. Pick a preset, or choose "Custom…" to set a precise value in seconds / minutes / hours.
{isPreset ? (
) : (
Picked triggers fire the cascade to the next PSP. Player-side errors (insufficient funds, fraud) stop the cascade per the policy below.
{/* Cascade policy — every route owns its own matrix. No
global cascade policy lives on the page anymore: the
modal is the single source of truth. */}
Cascade policy · Error → action
For every error type, decide what the engine should do: "Retry next provider" continues the cascade, "Stop" ends the attempt and surfaces the failure to the player. Player-side issues (insufficient funds, fraud) should usually Stop; provider-side issues (timeout, 5xx, low liquidity) should usually Retry.
Player-side errors (insufficient funds, fraud) should usually stay on Stop — retrying just hides the signal. Provider-side errors (timeout, 5xx, low liquidity) usually want Retry next provider.
)}
{/* ============================================================
STEP 4 · REVIEW & SAVE — summary of every choice the operator
made in the previous steps, plus (for existing routes) the
read-only audit trail. Restore-to-version ships in v2.
============================================================ */}
{tab === "review" && (
<>
{isNew
? <>Double-check the choices above and click Create route. You can edit anything later — every save is recorded in the audit log.
: <>Review the changes and click Save changes. A new entry will be appended to the audit log with the diff and your operator id.}
{!isNew && (
Route version history
{(() => {
const list = (draft.history || []).slice().sort((a, b) => b.ts - a.ts);
if (list.length === 0) {
return (
No saved versions yet. The first entry is recorded when this route is saved.
Each save appends a new entry with the actor, the timestamp (minute precision), the diff against the previous version, and a full JSON snapshot of the route for later restore. Read-only in v1.
)}
)}
{/* Inline compatibility error — always shown when present,
regardless of the active tab, because it blocks save. */}
{compatIssue && (
{compatIssue.pspName} does not support method {compatIssue.methodName}. Remove or change the PSP to save this route.
)}
{/* GEO lint — non-blocking warning. Shown on every tab. */}
{geoWarnings.length > 0 && (
{geoWarnings.map((w, i) => (
{w.pspName} does not list {w.missingNames.join(", ")} in its supported geographies. Routing engine may exclude this PSP at runtime. Verify provider coverage or remove {w.missingNames.length === 1 ? w.missingNames[0] : "the unsupported countries"} from this route's scope.
))}
)}
{(() => {
const currentIdx = STEP_KEYS.indexOf(tab);
const isLast = currentIdx === STEP_KEYS.length - 1;
const isFirst = currentIdx === 0;
const validate = (k) => {
if (k === "scope_routing") return !!((draft.name || "").trim() && draft.brand && draft.method && draft.currency && (draft.amount || "").toString().trim())
&& draft.chain.length > 0 && !compatIssue && (!draft.weighted || !weightWarn);
if (k === "cascading") return (draft.triggers || []).length > 0;
return true;
};
const currentValid = validate(tab);
const allValid = STEP_KEYS.slice(0, -1).every(validate);
const stepHint = !currentValid
? (tab === "scope_routing"
? (compatIssue
? "Fix the provider compatibility issue to continue."
: !(draft.name || "").trim()
? "Give the route a name first."
: (!draft.brand || !draft.method || !draft.currency || !(draft.amount || "").toString().trim())
? "Fill brand · method · currency · amount band, then add at least one provider."
: (draft.chain.length === 0
? "Add at least one provider to the chain."
: "Weighted split must total 100%."))
: tab === "cascading" ? "Pick at least one cascade trigger to continue."
: "")
: "";
return (
);
};
/* =========================================================================
AlarmEditor — pick a metric (grouped, with description + source page),
set op / threshold / window with metric-aware hints, choose severity,
then fan-out to one or more destinations (multi-select per channel).
========================================================================= */
const AlarmEditor = ({ alarm, destinations, brands, brandLocked, activeBrand, onSave, onCancel, onDelete, onTestFire, onAddDestination, onEditDestination, onToggleDestination }) => {
const [draft, setDraft] = useState(() => {
const d = JSON.parse(JSON.stringify(alarm));
if (!Array.isArray(d.destinations)) d.destinations = [];
if (!Array.isArray(d.scopeBrands)) d.scopeBrands = brandLocked ? [activeBrand.name] : ["any"];
return d;
});
const toggleBrand = (name) => {
const cur = draft.scopeBrands || ["any"];
if (name === "any") {
setDraft(d => ({ ...d, scopeBrands: ["any"] }));
return;
}
// Remove "any" sentinel as soon as a specific brand is picked.
const base = cur.filter(x => x !== "any");
const next = base.includes(name) ? base.filter(x => x !== name) : [...base, name];
setDraft(d => ({ ...d, scopeBrands: next.length === 0 ? ["any"] : next }));
};
const isNew = !alarm.id;
const set = (k, v) => setDraft(d => ({ ...d, [k]: v }));
const toggleDest = (id) => {
const cur = draft.destinations || [];
set("destinations", cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id]);
};
const metric = ALARM_METRIC_BY_KEY[draft.metric] || ALARM_METRICS[0];
// Channels derived from selected destinations — kept on the alarm row
// so the rules table can render channel chips without re-resolving.
const derivedChannels = Array.from(new Set(
(draft.destinations || []).map(id => destinations.find(d => d.id === id)?.channel).filter(Boolean)
));
// Switching metric pulls in the suggested op/threshold/window so the
// editor starts in a meaningful state instead of forcing the operator
// to guess what an "approval_rate" threshold should look like.
const pickMetric = (key) => {
const m = ALARM_METRIC_BY_KEY[key];
if (!m) return;
setDraft(d => ({
...d,
metric: key,
op: d.op || m.suggestedOp,
threshold: d.threshold || m.suggestedThreshold,
window: d.window || m.suggestedWindow,
}));
};
const previewPretty = `${metric.label} ${draft.op} ${draft.threshold || "?"}${metric.unit && metric.unit !== "(event)" ? " " + metric.unit : ""}${draft.window && draft.window !== "—" ? ` over ${draft.window}` : ""}`;
return (
e.stopPropagation()}>
{isNew ? "Add alarm" : "Edit alarm"}
Metric threshold + delivery destinations
Metric — what the engine measures (decline rate, queue depth, tx count, PSP wallet…). Switching the metric pre-fills sensible defaults for op / threshold / window.,
<>Condition — operator (>, <, ≥, ≤, =) + threshold + rolling window. The alarm fires when the metric crosses the threshold in that window.,
<>Severity — drives the alarm color and the badge in the inbox; critical-severity alarms surface as a top-bar banner until acknowledged.,
<>Brand scope — pick "All brands" or one or more specific brands. Useful when one brand has a different SLA than the rest.,
<>Destinations — where the alarm gets posted. Email / Slack / Telegram / WhatsApp / SMS / webhook / in-app. Fan-out happens in parallel.,
]}>
An alarm is an early warning. It fires when a metric crosses a threshold (or when a single event matches a pattern) and fans out to the destinations below so the operator can act before the problem becomes a customer complaint.
{ALARM_SEVERITIES.map(s => {
const on = draft.severity === s;
const sev = SEVERITY_CHIP[s] || SEVERITY_CHIP.low;
return (
);
})}
{/* Brand scope — alarm fires only for transactions belonging to
one of the selected brands. "any" matches every brand and is
the default; picking a specific brand removes the "any" chip
automatically. When the top-right selector locks a brand the
picker is disabled and shows only that brand. */}
Pick All brands to fire for every tenant; pick one or more specific brands to scope it. Useful when a single brand has a different SLA or risk profile.
Destinations are reusable across all alarms. Toggle on/off globally with the chip; click the pencil to edit channel / target / label. Disabled destinations cannot be picked.
{!isNew && onDelete && (
)}
{onTestFire && (
)}
);
};
/* =========================================================================
DestinationEditor — small modal for creating / editing a notification
endpoint. Channel choice drives the label + placeholder of the target
field (Slack channel vs. email vs. webhook URL …).
========================================================================= */
const DestinationEditor = ({ dest, onSave, onCancel, onDelete }) => {
const [draft, setDraft] = useState(JSON.parse(JSON.stringify(dest)));
const isNew = !dest.id;
const set = (k, v) => setDraft(d => ({ ...d, [k]: v }));
const c = NOTIF_CHANNEL_BY_ID[draft.channel] || NOTIF_CHANNELS[0];
return (
e.stopPropagation()}>
{isNew ? "Add destination" : "Edit destination"}
A reusable endpoint that any alarm can fan out to
A destination is a reusable endpoint that any alarm can post to. Create one per channel (email inbox, Slack channel, Telegram chat, SMS number, webhook URL…) and pick it on as many alarms as you need. Disabling a destination here disables it across every alarm at once.
);
};
const SETTINGS_TAB_ROUTES = [["providers", "Providers", ""], ["routes", "Routes & cascading", "routes"], ["alarms", "Alarms", "alarms"]];
const Settings = ({ brand, brands, setBrands, activeTab: initialTab }) => {
// Each tab gets its own URL (e.g. /payments/settings/alarms) via useUrlTab
// (src/routes.jsx). initialTab (legacy prop, currently unused by any
// caller) still seeds the very first render if the URL doesn't already
// say otherwise.
const [tab, setTab] = window.useUrlTab("/payments/settings", SETTINGS_TAB_ROUTES, initialTab === "brands" ? "providers" : (initialTab || "providers"));
const [psps, setPsps] = useState(PSP_PROFILES);
const [editingPsp, setEditingPsp] = useState(null); // { psp, initialTab }
const [routes, setRoutes] = useState(ROUTES);
const [editingRoute, setEditingRoute] = useState(null);
const [healthPopover, setHealthPopover] = useState(null); // psp.id when open
// Routes table filter driven by the Strategy summary cards. Null = no
// filter; otherwise one of: "active" | "stale" | "brand_scoped" |
// "cascade_override".
const [routesFilter, setRoutesFilter] = useState(null);
// Per-area filter state — added to every tab so the operator can drill in
// even when the top-right brand selector is on "All brands". When the
// top-right selector locks a brand, the per-area brand filter is hidden
// and locked to that brand (auto-login behavior).
const brandLocked = !!(brand && !brand.isAll);
const [provBrandF, setProvBrandF] = useState("all");
const [provStatusF, setProvStatusF] = useState("all");
const [provMethodF, setProvMethodF] = useState("all");
const [routeBrandF, setRouteBrandF] = useState("all");
const [routeMethodF, setRouteMethodF] = useState("all");
const [routeStatusF, setRouteStatusF] = useState("all");
const [routeProviderF, setRouteProviderF] = useState("all");
const [alarmSeverityF, setAlarmSeverityF] = useState("all");
const [alarmStatusF, setAlarmStatusF] = useState("all");
const [alarmGroupF, setAlarmGroupF] = useState("all");
const [alarmProviderF, setAlarmProviderF] = useState("all");
const [alarmBrandF, setAlarmBrandF] = useState("all");
// Stale = no match in 14+ days OR never matched.
const isStaleRoute = (r) => {
if (r.lastMatchedAt == null) return true;
return (Date.now() - r.lastMatchedAt) >= 14 * 86400_000;
};
const isBrandScopedRoute = (r) => r.brand && r.brand !== "any";
// "Custom policy" = route's cascadePolicy diverges from the default
// ERROR_MATRIX (or, for legacy data, an override flag was set).
const isCustomCascadeRoute = (r) => {
if (r.cascadeOverride?.enabled) return true;
if (!r.cascadePolicy) return false;
const def = JSON.stringify(ERROR_MATRIX.map(x => `${x.error}:${x.kind}`));
const mine = JSON.stringify(r.cascadePolicy.map(x => `${x.error}:${x.kind}`));
return def !== mine;
};
// Filter routes by the top-right brand selector before the strategy
// filter chip kicks in. "any"-scoped routes match every brand; brand-
// scoped routes only match when their brand name matches the selected
// brand. When the operator picks "All brands" the routes list is
// unfiltered. Declared first so routeStats and filteredRoutes can both
// read it without a TDZ error.
const brandFilteredRoutes = (() => {
let list = routes;
if (brandLocked) {
list = list.filter(r => r.brand === "any" || r.brand === brand.name);
} else if (routeBrandF !== "all") {
list = list.filter(r => r.brand === "any" || r.brand === routeBrandF);
}
if (routeMethodF !== "all") list = list.filter(r => r.method === routeMethodF);
if (routeStatusF !== "all") list = list.filter(r => r.status === routeStatusF);
if (routeProviderF !== "all") list = list.filter(r => (r.chain || []).includes(routeProviderF));
return list;
})();
const routeStats = {
active: brandFilteredRoutes.filter(r => r.status === "active").length,
stale: brandFilteredRoutes.filter(isStaleRoute).length,
brandScoped: brandFilteredRoutes.filter(isBrandScopedRoute).length,
cascadeOverride: brandFilteredRoutes.filter(isCustomCascadeRoute).length,
};
const filteredRoutes = (() => {
const base = brandFilteredRoutes;
switch (routesFilter) {
case "active": return base.filter(r => r.status === "active");
case "stale": return base.filter(isStaleRoute);
case "brand_scoped": return base.filter(isBrandScopedRoute);
case "cascade_override": return base.filter(isCustomCascadeRoute);
default: return base;
}
})();
// Providers filter — Brand maps via routes that reference each provider:
// when a brand is selected we only show providers in the chain of a route
// for that brand (or "any" brand). This is the closest meaningful brand
// scoping for a directory that is otherwise shared across the tenant.
const filteredPsps = (() => {
let list = psps;
const effectiveBrand = brandLocked ? brand.name : (provBrandF === "all" ? null : provBrandF);
if (effectiveBrand) {
const allowed = new Set();
routes.forEach(r => {
if (r.brand === "any" || r.brand === effectiveBrand) (r.chain || []).forEach(pid => allowed.add(pid));
});
list = list.filter(p => allowed.has(p.id));
}
if (provStatusF !== "all") list = list.filter(p => p.status === provStatusF);
if (provMethodF !== "all") list = list.filter(p => (p.methods || []).includes(provMethodF));
return list;
})();
const [alarms, setAlarms] = useState(ALARMS);
const [editingAlarm, setEditingAlarm] = useState(null);
const [destinations, setDestinations] = useState(NOTIF_DESTINATIONS_DEFAULTS);
const [editingDest, setEditingDest] = useState(null);
// Synthesised liquidity alarms drawn from each PSP's `liquidityAlarms`
// list — they are owned by the provider but surfaced in the general
// alarms list as read-only entries so the operator can audit every
// alarm in one place. Each row carries `_origin: "provider"` and a
// `_pspId` so the row can deep-link back to the PSP editor.
const providerAlarms = (() => {
const out = [];
psps.forEach(p => {
(p.liquidityAlarms || []).forEach(r => {
out.push({
...r,
id: `psp:${p.id}:${r.id || ""}`,
_origin: "provider",
_pspId: p.id,
_pspName: p.name,
metric: `liq:${r.metric}`, // namespace so it shows under "Liquidity"
scopeProviders: [p.id],
scopeBrands: r.scopeBrands || ["any"],
});
});
});
return out;
})();
const combinedAlarms = alarms.concat(providerAlarms);
// Alarms filter
const filteredAlarms = (() => {
let list = combinedAlarms;
if (alarmSeverityF !== "all") list = list.filter(a => a.severity === alarmSeverityF);
if (alarmStatusF !== "all") list = list.filter(a => a.status === alarmStatusF);
if (alarmGroupF !== "all") {
list = list.filter(a => {
if (alarmGroupF === "Liquidity & cash flow" && a._origin === "provider") return true;
return (ALARM_METRIC_BY_KEY[a.metric]?.group) === alarmGroupF;
});
}
if (alarmProviderF !== "all") list = list.filter(a => (a.scopeProviders || []).includes(alarmProviderF) || a._pspId === alarmProviderF);
if (alarmBrandF !== "all") list = list.filter(a => {
const sb = a.scopeBrands || ["any"];
return sb.includes("any") || sb.includes(alarmBrandF);
});
return list;
})();
const saveDestination = (draft) => {
if (!draft.id) {
const newD = { ...draft, id: "d" + Math.floor(Math.random()*100000), enabled: draft.enabled !== false };
setDestinations([...destinations, newD]);
} else {
setDestinations(destinations.map(d => d.id === draft.id ? draft : d));
}
setEditingDest(null);
};
const deleteDestination = (id) => {
setDestinations(destinations.filter(d => d.id !== id));
setAlarms(alarms.map(a => ({ ...a, destinations: (a.destinations || []).filter(x => x !== id) })));
setEditingDest(null);
};
const toggleDestinationEnabled = (id) => {
setDestinations(destinations.map(d => d.id === id ? { ...d, enabled: !d.enabled } : d));
};
const testFireAlarm = (a) => {
if (!window.PAYBO?.emitToast) return;
const chosen = (a.destinations || []).map(id => destinations.find(d => d.id === id)).filter(Boolean);
window.PAYBO.emitToast({
id:`test-${Date.now()}`, tx_id:`Test fire · ${a.name || "alarm"}`, amount:0, currency:"DEMO",
player: chosen.map(d => d.label).slice(0,3).join(", ") + (chosen.length > 3 ? ` +${chosen.length-3}` : ""),
// "Would post" is the honest verb: nothing leaves the browser. Naming the
// count and the destinations is the part that is real and useful.
reason:`Nothing was sent — a real test fire needs the notification dispatcher. It would post to ${chosen.length} destination${chosen.length===1?"":"s"}.`,
});
};
const savePsp = (draft) => {
if (!draft.id) {
const newP = { ...draft, id: draft.name.toLowerCase().replace(/[^a-z0-9]/g, "").slice(0, 8) + Math.floor(Math.random() * 99) };
setPsps([...psps, newP]);
} else {
setPsps(psps.map(p => p.id === draft.id ? draft : p));
}
setEditingPsp(null);
};
const deletePsp = (id) => {
setPsps(psps.filter(p => p.id !== id));
setEditingPsp(null);
};
const saveRoute = (draft) => {
const me = currentOperator();
const ts = Date.now();
if (!draft.id) {
const id = "r" + Math.random().toString(36).slice(2, 7);
const snapshot = JSON.parse(JSON.stringify({ ...draft, id }));
const entry = {
ts, user_id: me.id, user_email: me.email,
route_id: id,
change_summary: ["Route created"],
full_snapshot: snapshot,
};
const newR = { ...draft, id, history: [entry] };
setRoutes([...routes, newR]);
} else {
const prev = routes.find(r => r.id === draft.id);
const changes = diffRoute(prev, draft, brands, psps);
// Only record an entry if there's actually a change OR an explicit
// save with no diff (we keep "no field changes" entries off so the
// log doesn't fill with empty rows).
const isMeaningful = !(changes.length === 1 && changes[0] === "Route saved (no field changes)");
const snapshot = JSON.parse(JSON.stringify({ ...draft }));
delete snapshot.history;
const entry = isMeaningful ? {
ts, user_id: me.id, user_email: me.email,
route_id: draft.id,
change_summary: changes,
full_snapshot: snapshot,
} : null;
const history = [...(prev?.history || draft.history || [])];
if (entry) history.unshift(entry);
const merged = { ...draft, history };
setRoutes(routes.map(r => r.id === draft.id ? merged : r));
}
setEditingRoute(null);
};
const deleteRoute = (id) => {
setRoutes(routes.filter(r => r.id !== id));
setEditingRoute(null);
};
const saveAlarm = (draft) => {
if (!draft.id) {
const newA = { ...draft, id: "a" + Math.random().toString(36).slice(2, 7) };
setAlarms([...alarms, newA]);
} else {
setAlarms(alarms.map(a => a.id === draft.id ? draft : a));
}
setEditingAlarm(null);
};
const deleteAlarm = (id) => {
setAlarms(alarms.filter(a => a.id !== id));
setEditingAlarm(null);
};
const blankRoute = () => ({
name:"",
brand:"any", method:"Visa", currency:"any", amount:"any",
geos:[], licenses:[],
chain:[], weighted:false, weights:[],
triggers:["declined"], cascadeTimeout:"30s",
factors:{ performance:true, cost:true, liquidity:true, health:true },
cascadePolicy: ERROR_MATRIX.map(e => ({ ...e })),
mode:"AUTO", ranking:"manual", status:"active",
lastMatchedAt: null, volume30d: 0,
});
const blankAlarm = () => {
const m = ALARM_METRICS[0];
return {
name:"", metric:m.key, op:m.suggestedOp, threshold:m.suggestedThreshold, window:m.suggestedWindow,
severity:"medium", channels:[], destinations:[], status:"on",
scopeBrands: brandLocked ? [brand.name] : ["any"],
};
};
const blankDestination = () => ({ channel:"email", label:"", target:"", enabled:true });
return (
Settings
System configuration · providers, routes, alarms
{tab === "providers" && (
{/* Plain-English explainer for the CTO */}
What this is, in plain English
A Provider (PSP) is a third party that actually moves the money — Stripe, Adyen, Trustly, etc. This page is the master directory: every PSP we work with, what it costs, what it can do, where it can do it, and how much money is sitting in each one's wallet right now.
Costs & settlement — fees and how fast funds clear (T+0 / T+1 / T+2)
Limits — what the PSP itself will accept per transaction / day / month
Liquidity — live wallet balance with a ceiling (don't let too much sit idle) and a floor (top up before withdrawals start failing)
Coverage — which countries and licenses it operates under, and which operations each license authorises
Provider directory
{psps.filter(p=>p.status==="active").length} active · {psps.filter(p=>p.status!=="active").length} paused / unavailable
Wallet balances refresh every 60 seconds via PSP balance APIs. Ceiling and floor breaches automatically fire alarms on the channels configured in Settings → Alarms (Slack / email / in-app), so the operator can sweep idle funds before capital sits unused, and top up before a withdrawal request gets rejected for empty wallet.
Each transaction is sent to one of our providers (PSPs). Routing decides which PSP gets the transaction before we send it. Cascading decides what to do when a PSP fails — usually retry with the next one.
Provider chains per brand · method · currency · amount band. The chain is also the operator's ranking — first PSP gets tried first. Mode AUTO rotates automatically; MANUAL stops at To-Confirm before the next hop.
Resolution: most-specific scope wins. any matches anything not covered by a stricter rule. Manual ranking = use the chain order as-is. Hybrid ranking = blend chain order with live success rate so a temporarily-flaky PSP drops a slot, then comes back. Operator order is always respected when both options are healthy. Weighted split sends traffic by percentages instead of strict priority — when a weighted PSP is excluded for liquidity / health reasons, its share redistributes proportionally to the remaining healthy PSPs.
)}
{tab === "alarms" && (
What this is, in plain English
Alarms are early-warnings. They fire when a metric crosses a threshold or when a single event matches a pattern, and they fan out to Slack, email, or the in-app inbox so the operator can act before the problem becomes a customer complaint.
Two of these alarms (wallet near ceiling, wallet below floor) are wired to the thresholds set in Settings → Providers — they fire automatically per-PSP when balance crosses the floor or hits 80% of the ceiling.
{/* ===== Alarm rules — destinations are configured inside each
alarm modal, no longer a separate top-of-page section ===== */}
Alarm rules
{alarms.filter(a=>a.status==="on").length} active · {alarms.filter(a=>a.status!=="on").length} paused · destinations are configured per alarm
Each fired alarm is appended to the immutable Activity log. Critical-severity alarms also surface as a top-bar banner until acknowledged. The Test fire button posts a sample event to the alarm's destinations — useful when wiring a new Slack channel or webhook.