Webhooks · endpoints.
{t(
'Каждое событие подписывается HMAC-ключом в заголовке X-Webhook-Signature. Ретраи — до 3 раз с задержкой.'
)}
{t('Новый endpoint')}
{WH_EVENTS.map((e) => (
{e}
{e === 'payment.success'
? t('платёж успешно завершён')
: e === 'payment.failed'
? t('платёж отклонён или отменён')
: t('QR просрочен без оплаты')}
setEvents({ ...events, [e]: !events[e] })}
/>
))}
{t('Добавить webhook')}
{msg && (
{msg.text}
)}
{t('Активные endpoints')}
· {hooks.length}
{hooks.length === 0 ? (
∅
{t('Webhook-ов пока нет')}
) : (
{hooks.map((w) => (
↳
{w.url}
{(w.events || []).join(' · ')}
{w.secret ? t(' · подписан') : t(' · без подписи')}
{w.enabled ? t('вкл') : t('выкл')}
remove(w.id)}
>
{t('удалить')}
))}
)}
);
}
/* ─────────────────────────────────────────────────────────────
Settings page
───────────────────────────────────────────────────────────── */
function SettingsPage({ user, onLogout }) {
return (
{t('Настройки')}{' '}
{KPOS_LANG === 'kk' ? 'аккаунты.' : 'аккаунта.'}
{t('Профиль SaaS-аккаунта. Вход — через Google, отдельного пароля нет.')}
{t('Профиль')}
{t('Организация')}
{t('название аккаунта мерчанта')}
{user?.tenantName || '—'}
{t('Имя')}
{t('из аккаунта Google')}
{user?.name || '—'}
{t('Email')}
{t('Google · вход в кабинет')}
{user?.email || '—'}
{t('Сессия')}
{t('Выйти из кабинета')}
{t('завершить текущую SSO-сессию')}
);
}
/* ─────────────────────────────────────────────────────────────
Billing page
───────────────────────────────────────────────────────────── */
function tierLabel(tr, tiers, i) {
const from = i === 0 ? 0 : tiers[i - 1].upTo;
if (tr.upTo == null) return t('от') + ' ' + fmt(from) + ' ₸';
return fmt(from) + ' – ' + fmt(tr.upTo) + ' ₸';
}
function TopupModal({ onClose, onDone }) {
const [amount, setAmount] = useState(10000);
const [phase, setPhase] = useState('form'); // form | qr | paid | error
const [busy, setBusy] = useState(false);
const [err, setErr] = useState('');
const [tu, setTu] = useState(null);
const pollRef = useRef(null);
useEffect(() => () => clearInterval(pollRef.current), []);
async function create() {
setBusy(true);
setErr('');
try {
const r = await post('/api/billing/topup', { amount: Number(amount) });
setTu(r);
setPhase('qr');
pollRef.current = setInterval(async () => {
try {
const s = await api('/api/billing/topup/' + r.topupId);
if (s.status === 'paid') {
clearInterval(pollRef.current);
setPhase('paid');
onDone();
} else if (s.status === 'expired' || s.status === 'failed') {
clearInterval(pollRef.current);
setErr(t('Пополнение не завершено'));
setPhase('error');
}
} catch {
/* keep polling */
}
}, 3000);
} catch (e) {
setErr(e.message);
setPhase('error');
} finally {
setBusy(false);
}
}
return (
e.stopPropagation()}
style={{
width: '100%',
maxWidth: 440,
background: 'var(--paper)',
border: '1px solid var(--ink)',
borderRadius: 4,
}}
>
{t('Пополнение баланса')}
{phase === 'form' && (
<>
setAmount(e.target.value)}
style={{
width: '100%',
fontFamily: 'JetBrains Mono',
fontSize: 14,
padding: '12px 14px',
border: '1px solid var(--ink)',
background: 'var(--paper)',
borderRadius: 3,
outline: 'none',
margin: '8px 0 16px',
}}
/>
)}
{phase === 'qr' && tu && (
{fmt(tu.amount)} ₸
{t('Откройте оплату через Kaspi — баланс зачислится автоматически после оплаты.')}
{t('Открыть оплату Kaspi')} →
{t('Ожидаем оплату…')}
)}
{phase === 'paid' && (
✓
{t('Баланс успешно пополнен')}
)}
{phase === 'error' && (
{err}
)}
);
}
function BillingPage() {
const [billing, setBilling] = useState(null);
const [ledger, setLedger] = useState([]);
const [topup, setTopup] = useState(false);
const [loading, setLoading] = useState(true);
const load = useCallback(async () => {
try {
setBilling(await api('/api/billing'));
const { ledger } = await api('/api/billing/ledger');
setLedger(ledger);
} catch {
/* ignore transient errors */
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
load();
}, [load]);
if (loading || !billing) {
return (
);
}
const tiers = billing.tiers || [];
const curIdx = tiers.findIndex(
(tr) => tr.upTo == null || billing.cumulativeTurnover <= tr.upTo,
);
const statusColor = billing.suspended
? 'var(--warn)'
: billing.low
? '#b07a0c'
: 'var(--ok)';
const statusText = billing.suspended
? t('приём приостановлен')
: billing.low
? t('низкий баланс')
: t('активен');
return (
{t('Биллинг')} {t('и тариф.')}
{t('Баланс пополняется через Kaspi. Комиссия списывается с каждого успешного платежа.')}
{t('Баланс')}
● {statusText}
{t('Текущий баланс')}
{fmt(billing.balance)}
₸
{billing.suspended
? t('Баланс в минусе — пополните, чтобы принимать платежи')
: billing.low
? t('Низкий баланс — рекомендуем пополнить')
: t('Достаточно для приёма платежей')}
{t('Накопленный оборот')}
{fmt(billing.cumulativeTurnover)}
₸
{t('текущая ставка')} · {billing.rate}%
{t('последнее списание')} ·{' '}
{billing.lastCommissionAt ? dateOf(billing.lastCommissionAt) : '—'}
{t('Тарифные уровни')}
· {t('ставка по обороту')}
| {t('Оборот')} |
{t('Ставка')} |
|
{tiers.map((tr, i) => (
| {tierLabel(tr, tiers, i)} |
{tr.rate}% |
{i === curIdx && {t('текущий')}}
|
))}
{t('История')}
· {ledger.length}
{ledger.length === 0 ? (
∅
{t('Движений пока нет')}
) : (
| {t('Дата')} |
{t('Тип')} |
{t('Сумма')} |
{t('Баланс после')} |
{ledger.map((l, i) => {
const amt = Number(l.amount);
return (
|
{dateOf(l.created_at)} {timeOf(l.created_at)}
|
{l.type === 'topup'
? t('Пополнение')
: l.type === 'commission'
? t('Комиссия') + ' ' + (l.rate || '') + '%'
: t('Корректировка')}
|
= 0 ? 'var(--ok)' : 'var(--ink)' }}
>
{amt >= 0 ? '+' : ''}
{fmt(amt)} ₸
|
{fmt(Number(l.balance_after))} ₸ |
);
})}
)}
{topup &&
setTopup(false)} onDone={load} />}
);
}
/* ─────────────────────────────────────────────────────────────
App
───────────────────────────────────────────────────────────── */
function App() {
const [page, setPage] = useState('overview');
const [user, setUser] = useState(null);
const [payments, setPayments] = useState([]);
const [kaspi, setKaspi] = useState({ connected: false });
const [modal, setModal] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
const root = document.documentElement;
root.style.setProperty('--acid', '#ff7a5b');
root.style.setProperty('--acid-deep', '#e6573a');
}, []);
const loadPayments = useCallback(async () => {
try {
const { payments } = await api('/api/payments?limit=200');
setPayments(payments);
} catch {
/* ignore transient errors */
}
}, []);
const loadKaspi = useCallback(async () => {
try {
setKaspi(await api('/api/auth/status'));
} catch {
setKaspi({ connected: false });
}
}, []);
useEffect(() => {
(async () => {
try {
const me = await api('/api/account/me');
setUser({ ...me.user, tenantName: me.tenant?.name });
} catch {
return; // api() redirected on 401
}
await Promise.all([loadPayments(), loadKaspi()]);
setLoading(false);
})();
}, [loadPayments, loadKaspi]);
// Poll payments while the cabinet is open.
useEffect(() => {
const id = setInterval(loadPayments, 5000);
return () => clearInterval(id);
}, [loadPayments]);
async function logout() {
try {
await post('/api/account/logout');
} catch {
/* ignore */
}
location.href = '/login.html';
}
function reloadAll() {
loadPayments();
loadKaspi();
}
if (loading) {
return (
{t('Загрузка…')}
);
}
return (
{page === 'overview' && (
setModal(true)}
/>
)}
{page === 'ops' && setModal(true)} />}
{page === 'kaspi' && }
{page === 'keys' && }
{page === 'billing' && }
{page === 'webhooks' && }
{page === 'settings' && }
{modal && (
setModal(false)} onDone={loadPayments} />
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);