224 lines
16 KiB
TypeScript
224 lines
16 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
||
import QRCode from 'qrcode';
|
||
import { Coins, RefreshCw, X } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
import { AppError } from '@/lib/error-model';
|
||
import { formatWorksTokenPointValue, isWorksTokenPointBalanceExhausted } from '@/lib/works-square-token-points';
|
||
import {
|
||
createWorksRechargeOrder, fetchWorksBillingSummary, fetchWorksPointHistory, openWorksBillingAccount,
|
||
fetchWorksRechargeOrder, fetchWorksRechargeOrders,
|
||
type WorksBillingSummary, type WorksPointHistory, type WorksRechargeOrder,
|
||
} from '@/lib/works-billing';
|
||
|
||
const labels: Record<string, string> = {
|
||
pending: '待支付', succeeded: '已到账', failed: '支付失败', canceled: '已关闭', manual_review: '待核查',
|
||
credited: '已入账', reserved: '已预占', dispatched: '处理中', pending_review: '待核对',
|
||
settled: '已结算', released: '已释放', refunded: '已退款', expired: '已释放',
|
||
};
|
||
const points = (value: string | null) => formatWorksTokenPointValue(value) ?? '—';
|
||
const money = (cents: number) => `¥${(cents / 100).toFixed(2)}`;
|
||
const time = (value: string) => new Date(value).toLocaleString('zh-CN');
|
||
const unresolved = (order: WorksRechargeOrder) => order.status === 'pending' || order.status === 'manual_review';
|
||
|
||
export function PointWallet({ active = true }: { active?: boolean }) {
|
||
const [summary, setSummary] = useState<WorksBillingSummary | null>(null);
|
||
const [summaryError, setSummaryError] = useState(false);
|
||
const [open, setOpen] = useState(false);
|
||
const [tab, setTab] = useState<'recharge' | 'orders' | 'history'>('recharge');
|
||
const [offset, setOffset] = useState(0);
|
||
const [orders, setOrders] = useState<WorksRechargeOrder[]>([]);
|
||
const [pending, setPending] = useState<WorksRechargeOrder | null>(null);
|
||
const [history, setHistory] = useState<WorksPointHistory>({ items: [], has_more: false });
|
||
const [loading, setLoading] = useState(false);
|
||
const [loaded, setLoaded] = useState(false);
|
||
const [busy, setBusy] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const [checkout, setCheckout] = useState<WorksRechargeOrder | null>(null);
|
||
const [qr, setQr] = useState('');
|
||
const [unknownProduct, setUnknownProduct] = useState<string | null>(null);
|
||
const intent = useRef<{ productId: string; requestId: string } | null>(null);
|
||
const alive = useRef(true);
|
||
const summaryRequest = useRef(0);
|
||
const pageRequest = useRef(0);
|
||
const purchaseBusy = useRef(false);
|
||
|
||
useEffect(() => {
|
||
alive.current = true;
|
||
return () => { alive.current = false; summaryRequest.current += 1; pageRequest.current += 1; };
|
||
}, []);
|
||
|
||
const refreshSummary = useCallback(async () => {
|
||
const request = ++summaryRequest.current;
|
||
try {
|
||
const next = await fetchWorksBillingSummary();
|
||
if (!alive.current || summaryRequest.current !== request) return;
|
||
setSummary(next); setSummaryError(false);
|
||
} catch {
|
||
if (!alive.current || summaryRequest.current !== request) return;
|
||
setSummary(null); setSummaryError(true);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (active) void refreshSummary();
|
||
const focus = () => { void refreshSummary(); };
|
||
const visibility = () => { if (document.visibilityState === 'visible') focus(); };
|
||
window.addEventListener('focus', focus);
|
||
document.addEventListener('visibilitychange', visibility);
|
||
return () => {
|
||
window.removeEventListener('focus', focus);
|
||
document.removeEventListener('visibilitychange', visibility);
|
||
};
|
||
}, [active, refreshSummary]);
|
||
|
||
const refreshPage = useCallback(async () => {
|
||
const request = ++pageRequest.current;
|
||
setLoading(true); setLoaded(false);
|
||
try {
|
||
const latest = await fetchWorksRechargeOrders();
|
||
const page = tab === 'orders' && offset > 0 ? await fetchWorksRechargeOrders(offset) : latest;
|
||
const ledger = tab === 'history' ? await fetchWorksPointHistory(offset) : null;
|
||
if (!alive.current || pageRequest.current !== request) return;
|
||
setOrders(page.items); setPending(latest.items.find(unresolved) ?? null);
|
||
if (ledger) setHistory(ledger);
|
||
setLoaded(true);
|
||
} catch {
|
||
if (alive.current && pageRequest.current === request) setError('记录加载失败，请刷新后再充值。');
|
||
} finally {
|
||
if (alive.current && pageRequest.current === request) setLoading(false);
|
||
}
|
||
}, [offset, tab]);
|
||
|
||
useEffect(() => {
|
||
if (open) { setError(''); void refreshSummary(); void refreshPage(); }
|
||
return () => { pageRequest.current += 1; };
|
||
}, [open, refreshPage, refreshSummary]);
|
||
|
||
useEffect(() => {
|
||
let active = true;
|
||
setQr('');
|
||
if (checkout?.qr_payload) {
|
||
void QRCode.toDataURL(checkout.qr_payload, { width: 224, margin: 1 }).then((value) => {
|
||
if (active) setQr(value);
|
||
}).catch(() => { if (active) setError('二维码生成失败，请刷新此订单。'); });
|
||
}
|
||
return () => { active = false; };
|
||
}, [checkout?.qr_payload]);
|
||
|
||
const checkOrder = useCallback(async (id: string) => {
|
||
const order = await fetchWorksRechargeOrder(id);
|
||
if (!alive.current) return;
|
||
setCheckout((current) => current?.id === id ? order : current);
|
||
if (!unresolved(order)) {
|
||
intent.current = null; setUnknownProduct(null);
|
||
void refreshSummary(); void refreshPage();
|
||
}
|
||
}, [refreshPage, refreshSummary]);
|
||
|
||
const checkoutId = checkout?.id;
|
||
const checkoutStatus = checkout?.status;
|
||
useEffect(() => {
|
||
if (!open || !checkoutId || (checkoutStatus !== 'pending' && checkoutStatus !== 'manual_review')) return;
|
||
let active = true;
|
||
let timer: ReturnType<typeof setTimeout>;
|
||
const poll = async () => {
|
||
if (document.visibilityState === 'visible') {
|
||
try { await checkOrder(checkoutId); } catch { /* Keep the frozen order visible; never resubmit payment. */ }
|
||
}
|
||
if (active) timer = setTimeout(() => void poll(), 4000);
|
||
};
|
||
timer = setTimeout(() => void poll(), 4000);
|
||
return () => { active = false; clearTimeout(timer); };
|
||
}, [open, checkoutId, checkoutStatus, checkOrder]);
|
||
|
||
async function purchase(productId: string) {
|
||
if (purchaseBusy.current || !loaded || !summary?.can_recharge || !summary.payment_configured || pending) return;
|
||
if (intent.current && intent.current.productId !== productId) return;
|
||
purchaseBusy.current = true; setBusy(true); setError('');
|
||
intent.current ??= { productId, requestId: crypto.randomUUID() };
|
||
try {
|
||
const order = await createWorksRechargeOrder(productId, intent.current.requestId);
|
||
if (!alive.current) return;
|
||
setCheckout(order); setPending(unresolved(order) ? order : null);
|
||
intent.current = null; setUnknownProduct(null);
|
||
void refreshSummary(); void refreshPage();
|
||
} catch (cause) {
|
||
if (!alive.current) return;
|
||
const definitive = cause instanceof AppError && cause.details?.commandOutcome === 'definitive_failure';
|
||
if (definitive) { intent.current = null; setUnknownProduct(null); }
|
||
else setUnknownProduct(productId);
|
||
setError(definitive ? '本次充值未提交成功，请刷新后重试。' : '付款结果尚未确认。请先检查订单；重试将沿用同一次请求，请勿重复付款。');
|
||
void refreshPage();
|
||
} finally {
|
||
purchaseBusy.current = false;
|
||
if (alive.current) setBusy(false);
|
||
}
|
||
}
|
||
|
||
const openWebAccount = () => { void openWorksBillingAccount().catch(() => setError('网页账户页暂时无法打开。')); };
|
||
const own = summary?.own_points;
|
||
const selected = summary?.points;
|
||
const usingShared = typeof selected?.shared_available === 'boolean';
|
||
return <>
|
||
<div className="rounded-lg bg-surface-subtle/70 px-2 py-2 text-xs" data-testid="sidebar-point-balance">
|
||
<div className="flex items-center justify-between gap-2"><span>我的词元点数</span><strong data-testid="sidebar-total-token-points">{own ? `${points(own.total_remaining)} 点` : summaryError ? '暂时不可用' : '加载中…'}</strong></div>
|
||
{own && <p className="mt-1 text-[11px] text-muted-foreground">永久有效 · 预占 {points(own.reserved)} 点</p>}
|
||
{usingShared && <p className="mt-1 text-[11px] text-muted-foreground">AI 编程使用共享点数：{selected?.shared_available ? '可用' : '已用尽，请联系付款人'}</p>}
|
||
{summary?.funding_error && <p className="mt-1 text-[11px] text-muted-foreground">{summary.funding_error}</p>}
|
||
{isWorksTokenPointBalanceExhausted(own) && !usingShared && <p className="mt-1 text-[11px] text-muted-foreground">{summary?.can_recharge ? '点数已用尽，充值后可继续使用。' : '点数已用尽，请联系家长。'}</p>}
|
||
{summaryError && <button className="mt-1 underline" onClick={() => void refreshSummary()}>重试余额</button>}
|
||
</div>
|
||
<button type="button" role="menuitem" data-testid="sidebar-point-wallet-open" className="flex min-h-10 w-full items-center gap-2 rounded-md px-1 text-left text-sm hover:bg-surface-subtle" onClick={() => { setOpen(true); setTab('recharge'); setOffset(0); }}><Coins className="h-4 w-4" />词元点数与充值</button>
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto" data-testid="point-wallet-dialog">
|
||
<DialogHeader>
|
||
<div className="flex items-center justify-between">
|
||
<DialogTitle>词元点数</DialogTitle>
|
||
<Button variant="ghost" size="icon" aria-label="关闭词元点数" onClick={() => setOpen(false)}><X className="h-4 w-4" /></Button>
|
||
</div>
|
||
<DialogDescription>注册赠送与充值点数永久有效。新账号注册赠送 100 点，1 元充值 50 点。</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="flex items-center justify-between gap-3 rounded-xl bg-surface-subtle p-4">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">我的可用点数</p>
|
||
<p className="mt-1 text-2xl font-semibold tabular-nums">
|
||
{own ? points(own.total_remaining) : '—'} <span className="text-sm">点</span>
|
||
</p>
|
||
<p className="mt-1 text-xs text-muted-foreground">
|
||
预占 {points(own?.reserved ?? null)} 点 · 充值到账本人钱包
|
||
<button className="ml-2 underline" onClick={openWebAccount}>管理付款来源</button>
|
||
</p>
|
||
</div>
|
||
<Button variant="outline" size="sm" disabled={loading || busy} onClick={() => { setError(''); void refreshSummary(); void refreshPage(); }}><RefreshCw className="mr-1 h-3.5 w-3.5" />刷新</Button>
|
||
</div>
|
||
{summary?.funding_error && <p className="text-sm text-muted-foreground">{summary.funding_error}</p>}
|
||
{usingShared && <p className="text-sm text-muted-foreground">AI 编程使用共享点数（{selected?.shared_available ? '可用' : '已用尽'}）。下方余额、充值与记录均属于你自己的钱包；充值不会自动切换付款来源。</p>}
|
||
<div className="flex gap-2" role="tablist" aria-label="词元点数记录">{(['recharge', 'orders', 'history'] as const).map((value) => <Button key={value} role="tab" aria-selected={tab === value} variant={tab === value ? 'default' : 'outline'} onClick={() => { setTab(value); setOffset(0); }}>{value === 'recharge' ? '充值' : value === 'orders' ? '充值订单' : '收支记录'}</Button>)}</div>
|
||
{summaryError && <p role="alert" className="text-sm text-destructive">余额读取失败，请刷新后重试。</p>}
|
||
{error && <p role="alert" className="text-sm text-destructive">{error}</p>}
|
||
{loading && <p role="status" className="text-sm text-muted-foreground">正在读取记录…</p>}
|
||
{tab === 'recharge' && <div className="grid gap-3">
|
||
{summary && !summary.can_recharge && <p className="text-sm text-muted-foreground">仅家长身份可以充值，请联系家长。你仍可查看自己的余额和收支。</p>}
|
||
{summary?.can_recharge && !summary.payment_configured && <p className="text-sm text-muted-foreground">充值暂未开放，请稍后再试。</p>}
|
||
{pending && checkout?.id !== pending.id && <div className="rounded-lg border p-3 text-sm"><p>已有{labels[pending.status]}订单：{money(pending.amount_cents)} / {points(pending.point_amount)} 点。请先完成或联系运营核查。</p><Button variant="outline" className="mt-2" onClick={() => setCheckout(pending)}>查看原订单</Button></div>}
|
||
{(!checkout || !unresolved(checkout)) && <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">{summary?.recharge_products.map((product) => <Button key={product.id} className="h-auto flex-col gap-1 py-4" variant="outline" disabled={!loaded || busy || Boolean(pending) || !summary.can_recharge || !summary.payment_configured || Boolean(unknownProduct)} onClick={() => void purchase(product.id)}><span className="text-lg font-semibold">{points(product.point_amount)} 点</span><span>{money(product.amount_cents)}</span></Button>)}</div>}
|
||
{unknownProduct && !pending && <Button disabled={!loaded || busy} variant="outline" onClick={() => void purchase(unknownProduct)}>按原请求重试</Button>}
|
||
{checkout && <section className="rounded-xl border p-4 text-center" data-testid="point-recharge-checkout">
|
||
<p className="font-semibold">{labels[checkout.status]} · {money(checkout.amount_cents)} · {points(checkout.point_amount)} 点</p>
|
||
<p className="mt-1 break-all text-xs text-muted-foreground">订单 {checkout.id}</p>
|
||
{qr && checkout.status === 'pending' && <img src={qr} alt="充值支付二维码" className="mx-auto my-3 h-56 w-56" />}
|
||
{checkout.status === 'pending' && !checkout.qr_payload && <p className="my-3 text-sm text-muted-foreground">当前支付方式未提供扫码信息，请在网页账户页继续此订单。<button className="ml-1 underline" onClick={openWebAccount}>打开账户页</button></p>}
|
||
{checkout.status === 'pending' && <p className="mt-2 text-xs text-muted-foreground">付款后会自动核对到账状态，关闭窗口不会取消订单。</p>}
|
||
{checkout.status === 'manual_review' && <p className="mt-2 text-sm text-muted-foreground">付款结果需要运营核查，请勿再次付款。</p>}
|
||
<Button variant="outline" size="sm" className="mt-3" onClick={() => void checkOrder(checkout.id).catch(() => setError('订单状态暂时无法获取，请稍后刷新。'))}>刷新此订单</Button>
|
||
</section>}
|
||
</div>}
|
||
{tab === 'orders' && !loading && <div className="grid gap-2">{orders.length === 0 && <p className="text-sm text-muted-foreground">暂无充值订单。</p>}{orders.map((order) => <article key={order.id} className="rounded-lg border p-3"><div className="flex justify-between gap-2 text-sm"><strong>{points(order.point_amount)} 点 · {money(order.amount_cents)}</strong><span>{labels[order.status]}</span></div><p className="mt-1 text-xs text-muted-foreground">{time(order.created_at)}</p>{unresolved(order) && <Button variant="outline" size="sm" className="mt-2" onClick={() => { setCheckout(order); setTab('recharge'); setOffset(0); }}>查看订单</Button>}</article>)}</div>}
|
||
{tab === 'history' && !loading && <div className="grid gap-2">{history.items.length === 0 && <p className="text-sm text-muted-foreground">暂无收支记录。</p>}{history.items.map((item) => <article key={`${item.kind}:${item.id}`} className="rounded-lg border p-3"><div className="flex justify-between gap-3 text-sm"><span>{item.description}</span><strong>{item.kind === 'credit' ? '+' : item.points.startsWith('-') ? '−' : ''}{points(item.points.replace(/^-/, ''))} 点</strong></div><p className="mt-1 text-xs text-muted-foreground">{time(item.created_at)} · {labels[item.status] ?? '待核对'}{item.reserved_points !== '0.00' ? ` · 预占 ${points(item.reserved_points)} 点` : ''}</p></article>)}</div>}
|
||
{tab !== 'recharge' && <div className="flex items-center justify-between"><Button variant="outline" size="sm" disabled={loading || offset === 0} onClick={() => setOffset((value) => Math.max(0, value - 20))}>上一页</Button><span className="text-xs text-muted-foreground">第 {offset / 20 + 1} 页</span><Button variant="outline" size="sm" disabled={!loaded || loading || (tab === 'history' ? !history.has_more : orders.length < 20)} onClick={() => setOffset((value) => value + 20)}>下一页</Button></div>}
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>;
|
||
}
|