Expose gateway billing flows from the synced server baseline
The preserved local work adds PopiNewAPI billing checkout, gateway account binding, and matching web console/pricing surfaces on top of the current test-server baseline. During the merge, the start-end video helpers from the deployed baseline were kept alongside the actionGenerate prompt handling from the WIP.
Constraint: Current usable baseline is 7054436, already deployed on the test server.
Rejected: Commit the WIP before syncing the baseline | would have hidden conflicts with the deployed start-end-frame changes.
Confidence: medium
Scope-risk: broad
Directive: Do not deploy this commit to the test server without rechecking gateway credentials and billing checkout behavior in that environment.
Tested: go test ./...
Tested: make build
Tested: cd web && npm run build
This commit is contained in:
wtgoku
@@ -0,0 +1,385 @@
|
||||
import Link from "next/link";
|
||||
import { BillingAutoRefresh, BillingRefreshListener } from "@/components/billing-refresh-listener";
|
||||
import { BillingPageState } from "@/components/billing-page-state";
|
||||
import {
|
||||
type BillingCredits,
|
||||
type BillingInvoices,
|
||||
type BillingSubscription,
|
||||
PopiartApiError,
|
||||
getBillingCredits,
|
||||
getBillingInvoices,
|
||||
getBillingSubscription,
|
||||
getViewerSession,
|
||||
} from "@/lib/popiart-api";
|
||||
import { type Locale } from "@/lib/site-content";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
function formatNumber(locale: Locale, value: number) {
|
||||
return new Intl.NumberFormat(locale === "zh" ? "zh-CN" : "en-US").format(value);
|
||||
}
|
||||
|
||||
function formatError(error: unknown) {
|
||||
if (error instanceof PopiartApiError) {
|
||||
return error.message;
|
||||
}
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
return String(error);
|
||||
}
|
||||
|
||||
export default async function BillingPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
searchParams: Promise<{ kind?: string; status?: string; page?: string }>;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
const { kind, status, page } = await searchParams;
|
||||
const typedLocale = locale as Locale;
|
||||
const isZh = typedLocale === "zh";
|
||||
const session = await getViewerSession();
|
||||
|
||||
const title = isZh ? "账单中心" : "Billing";
|
||||
const subtitle = isZh
|
||||
? "查看当前订阅、积分钱包和订单历史。"
|
||||
: "Review your active subscription, point wallets, and order history.";
|
||||
const loginCta = isZh ? "去登录" : "Sign in";
|
||||
const consoleCta = isZh ? "前往控制台" : "Open console";
|
||||
const unboundTitle = isZh ? "先绑定网关用户" : "Bind a gateway user first";
|
||||
const unboundBody = isZh
|
||||
? "当前 session 还没有绑定网关用户态，先去控制台绑定后才能读取真实账单与订单。"
|
||||
: "This session is not bound to a gateway user yet. Bind it in the console first to read live billing and order data.";
|
||||
const subscriptionTitle = isZh ? "当前订阅" : "Current subscription";
|
||||
const creditsTitle = isZh ? "积分钱包" : "Point wallets";
|
||||
const invoicesTitle = isZh ? "订单历史" : "Order history";
|
||||
const noSubscription = isZh ? "当前没有有效订阅。" : "No active subscription.";
|
||||
const noCredits = isZh ? "当前没有积分钱包记录。" : "No point wallets.";
|
||||
const noOrders = isZh ? "当前没有订单记录。" : "No orders yet.";
|
||||
const kindFilter = kind === "subscription" || kind === "points" ? kind : "all";
|
||||
const statusFilter = typeof status === "string" && status.trim() ? status.trim() : "all";
|
||||
const currentPage = Number.isFinite(Number(page)) && Number(page) > 0 ? Number(page) : 1;
|
||||
const pageSize = 8;
|
||||
const kindLabel = isZh ? "类型" : "Kind";
|
||||
const statusLabel = isZh ? "状态" : "Status";
|
||||
const allLabel = isZh ? "全部" : "All";
|
||||
const subscriptionsLabel = isZh ? "订阅订单" : "Subscription orders";
|
||||
const pointsLabel = isZh ? "积分包订单" : "Point orders";
|
||||
const prevLabel = isZh ? "上一页" : "Previous";
|
||||
const nextLabel = isZh ? "下一页" : "Next";
|
||||
const pageLabel = isZh ? "页码" : "Page";
|
||||
|
||||
if (!session) {
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<section className="section-panel hero-tight">
|
||||
<div className="section-heading">
|
||||
<h1>{title}</h1>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-panel console-surface-card">
|
||||
<div className="section-heading compact">
|
||||
<h2>{isZh ? "登录后查看真实账单" : "Sign in to view live billing"}</h2>
|
||||
</div>
|
||||
<div className="hero-actions">
|
||||
<Link className="button button-dark" href={`/${locale}/login`}>
|
||||
{loginCta}
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!session.gateway_bound) {
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<section className="section-panel hero-tight">
|
||||
<div className="section-heading">
|
||||
<h1>{title}</h1>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-panel console-surface-card">
|
||||
<div className="section-heading compact">
|
||||
<h2>{unboundTitle}</h2>
|
||||
<p>{unboundBody}</p>
|
||||
</div>
|
||||
<div className="hero-actions">
|
||||
<Link className="button button-dark" href={`/${locale}/console`}>
|
||||
{consoleCta}
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
let subscription: BillingSubscription | null = null;
|
||||
let credits: BillingCredits | null = null;
|
||||
let invoices: BillingInvoices | null = null;
|
||||
const errors: string[] = [];
|
||||
|
||||
const [subscriptionResult, creditsResult, invoicesResult] = await Promise.allSettled([
|
||||
getBillingSubscription(),
|
||||
getBillingCredits(),
|
||||
getBillingInvoices(),
|
||||
]);
|
||||
|
||||
if (subscriptionResult.status === "fulfilled") {
|
||||
subscription = subscriptionResult.value;
|
||||
} else {
|
||||
errors.push(formatError(subscriptionResult.reason));
|
||||
}
|
||||
if (creditsResult.status === "fulfilled") {
|
||||
credits = creditsResult.value;
|
||||
} else {
|
||||
errors.push(formatError(creditsResult.reason));
|
||||
}
|
||||
if (invoicesResult.status === "fulfilled") {
|
||||
invoices = invoicesResult.value;
|
||||
} else {
|
||||
errors.push(formatError(invoicesResult.reason));
|
||||
}
|
||||
|
||||
type BillingOrderItem = Record<string, unknown> & { __kind: "subscription" | "points" };
|
||||
|
||||
const allOrders: BillingOrderItem[] = [
|
||||
...((invoices?.subscription_orders?.items || []).map((item) => ({ ...item, __kind: "subscription" as const }))),
|
||||
...((invoices?.point_orders?.items || []).map((item) => ({ ...item, __kind: "points" as const }))),
|
||||
];
|
||||
const filteredOrders = allOrders.filter((item) => {
|
||||
if (kindFilter !== "all" && item.__kind !== kindFilter) {
|
||||
return false;
|
||||
}
|
||||
if (statusFilter !== "all" && String(item.status || "") !== statusFilter) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
const totalPages = Math.max(1, Math.ceil(filteredOrders.length / pageSize));
|
||||
const safePage = Math.min(currentPage, totalPages);
|
||||
const pagedOrders = filteredOrders.slice((safePage - 1) * pageSize, safePage * pageSize);
|
||||
const availableStatuses = Array.from(
|
||||
new Set(
|
||||
allOrders
|
||||
.map((item) => String(item.status || "").trim())
|
||||
.filter(Boolean),
|
||||
),
|
||||
);
|
||||
const hasPendingOrders = allOrders.some((item) => {
|
||||
const currentStatus = String(item.status || "").trim();
|
||||
return currentStatus !== "" && !["success", "SUCCESS", "TRADE_SUCCESS", "failed", "FAILED", "closed", "CLOSED", "TRADE_CLOSED"].includes(currentStatus);
|
||||
});
|
||||
|
||||
function buildBillingHref(nextKind: string, nextStatus: string, nextPage: number) {
|
||||
const query = new URLSearchParams();
|
||||
if (nextKind !== "all") {
|
||||
query.set("kind", nextKind);
|
||||
}
|
||||
if (nextStatus !== "all") {
|
||||
query.set("status", nextStatus);
|
||||
}
|
||||
if (nextPage > 1) {
|
||||
query.set("page", String(nextPage));
|
||||
}
|
||||
const serialized = query.toString();
|
||||
return serialized ? `/${locale}/billing?${serialized}` : `/${locale}/billing`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<BillingRefreshListener />
|
||||
<BillingAutoRefresh active={hasPendingOrders} />
|
||||
<BillingPageState />
|
||||
|
||||
<section className="section-panel hero-tight">
|
||||
<div className="section-heading">
|
||||
<h1>{title}</h1>
|
||||
<p>{subtitle}</p>
|
||||
</div>
|
||||
{errors.length > 0 ? (
|
||||
<div className="status-banner status-banner-error">
|
||||
<span>{errors.join(" | ")}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="catalog-grid">
|
||||
<article className="console-surface-card">
|
||||
<div className="section-heading compact">
|
||||
<h2>{subscriptionTitle}</h2>
|
||||
</div>
|
||||
{subscription && subscription.subscriptions.length > 0 ? (
|
||||
<div className="table-list">
|
||||
{subscription.subscriptions.map((item, index) => (
|
||||
<div className="table-row" key={item.subscription?.id ?? index}>
|
||||
<div>
|
||||
<strong>{item.subscription?.member_level || "subscription"}</strong>
|
||||
<span>{item.subscription?.status || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "可用积分" : "Available points"}</strong>
|
||||
<span>
|
||||
{formatNumber(
|
||||
typedLocale,
|
||||
subscription.subscription_points[String(item.subscription?.id)]?.available_points || 0,
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="billing-copy">{noSubscription}</p>
|
||||
)}
|
||||
</article>
|
||||
|
||||
<article className="console-surface-card">
|
||||
<div className="section-heading compact">
|
||||
<h2>{creditsTitle}</h2>
|
||||
</div>
|
||||
{credits && credits.wallets.length > 0 ? (
|
||||
<div className="table-list">
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "当前余额" : "Balance"}</strong>
|
||||
<span>{formatNumber(typedLocale, credits.balance)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "钱包数量" : "Wallet count"}</strong>
|
||||
<span>{formatNumber(typedLocale, credits.wallets.length)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{credits.wallets.map((wallet) => (
|
||||
<div className="table-row" key={wallet.id}>
|
||||
<div>
|
||||
<strong>{wallet.source_type}</strong>
|
||||
<span>{isZh ? "可用积分" : "Available points"}: {formatNumber(typedLocale, wallet.points)}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "总积分" : "Total points"}</strong>
|
||||
<span>{formatNumber(typedLocale, wallet.points_total)}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="billing-copy">{noCredits}</p>
|
||||
)}
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="console-surface-card">
|
||||
<div className="section-heading compact">
|
||||
<h2>{invoicesTitle}</h2>
|
||||
</div>
|
||||
{allOrders.length > 0 ? (
|
||||
<div className="table-list">
|
||||
<div className="billing-filter-row">
|
||||
<div className="billing-filter-group">
|
||||
<strong>{kindLabel}</strong>
|
||||
<div className="billing-filter-links">
|
||||
<Link className={`pill ${kindFilter === "all" ? "pill-active" : ""}`} href={buildBillingHref("all", statusFilter, 1)}>
|
||||
{allLabel}
|
||||
</Link>
|
||||
<Link
|
||||
className={`pill ${kindFilter === "subscription" ? "pill-active" : ""}`}
|
||||
href={buildBillingHref("subscription", statusFilter, 1)}
|
||||
>
|
||||
{subscriptionsLabel}
|
||||
</Link>
|
||||
<Link className={`pill ${kindFilter === "points" ? "pill-active" : ""}`} href={buildBillingHref("points", statusFilter, 1)}>
|
||||
{pointsLabel}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="billing-filter-group">
|
||||
<strong>{statusLabel}</strong>
|
||||
<div className="billing-filter-links">
|
||||
<Link className={`pill ${statusFilter === "all" ? "pill-active" : ""}`} href={buildBillingHref(kindFilter, "all", 1)}>
|
||||
{allLabel}
|
||||
</Link>
|
||||
{availableStatuses.map((itemStatus) => (
|
||||
<Link
|
||||
className={`pill ${statusFilter === itemStatus ? "pill-active" : ""}`}
|
||||
href={buildBillingHref(kindFilter, itemStatus, 1)}
|
||||
key={itemStatus}
|
||||
>
|
||||
{itemStatus}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{pagedOrders.map((item, index) => (
|
||||
<details className="billing-order-detail" key={`${item.__kind}-${String(item.id ?? index)}`}>
|
||||
<summary className="table-row billing-order-summary">
|
||||
<div>
|
||||
<strong>{String(item.plan_title || item.package_name || item.trade_no || "order")}</strong>
|
||||
<span>{String(item.status || "-")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{String(item.money || "-")} {String(item.currency || "")}</strong>
|
||||
<span>{String(item.payment_method || "-")}</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="billing-order-body">
|
||||
<div className="table-list">
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "交易号" : "Trade no"}</strong>
|
||||
<span>{String(item.trade_no || "-")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "退款状态" : "Refund status"}</strong>
|
||||
<span>{String(item.refund_status || "-")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "完成时间" : "Completed at"}</strong>
|
||||
<span>{String(item.complete_time || "-")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{item.__kind === "subscription" ? (isZh ? "订阅 ID" : "Subscription ID") : (isZh ? "到账积分" : "Delivered points")}</strong>
|
||||
<span>{String(item.__kind === "subscription" ? item.subscription_id : item.points_amount || "-")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
<div className="billing-pagination">
|
||||
<Link
|
||||
aria-disabled={safePage <= 1}
|
||||
className={`button button-light button-small ${safePage <= 1 ? "button-disabled" : ""}`}
|
||||
href={buildBillingHref(kindFilter, statusFilter, Math.max(1, safePage - 1))}
|
||||
>
|
||||
{prevLabel}
|
||||
</Link>
|
||||
<span>
|
||||
{pageLabel}: {safePage} / {totalPages}
|
||||
</span>
|
||||
<Link
|
||||
aria-disabled={safePage >= totalPages}
|
||||
className={`button button-light button-small ${safePage >= totalPages ? "button-disabled" : ""}`}
|
||||
href={buildBillingHref(kindFilter, statusFilter, Math.min(totalPages, safePage + 1))}
|
||||
>
|
||||
{nextLabel}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="billing-copy">{noOrders}</p>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import Link from "next/link";
|
||||
import { type BillingInvoices, getBillingInvoices, getViewerSession } from "@/lib/popiart-api";
|
||||
import { type Locale } from "@/lib/site-content";
|
||||
|
||||
export default async function BillingSuccessPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
searchParams: Promise<{ kind?: string; provider?: string; trade_no?: string }>;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
const { kind, provider, trade_no: tradeNo } = await searchParams;
|
||||
const typedLocale = locale as Locale;
|
||||
const isZh = typedLocale === "zh";
|
||||
const session = await getViewerSession();
|
||||
let invoices: BillingInvoices | null = null;
|
||||
|
||||
if (session && tradeNo) {
|
||||
try {
|
||||
invoices = await getBillingInvoices({ keyword: tradeNo, page: 1, pageSize: 10 });
|
||||
} catch {
|
||||
invoices = null;
|
||||
}
|
||||
}
|
||||
|
||||
const matchedOrder =
|
||||
(invoices?.subscription_orders.items || []).find((item) => String(item.trade_no || "") === String(tradeNo || "")) ||
|
||||
(invoices?.point_orders.items || []).find((item) => String(item.trade_no || "") === String(tradeNo || ""));
|
||||
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<section className="section-panel hero-tight">
|
||||
<div className="section-heading">
|
||||
<div className="eyebrow">{isZh ? "PAYMENT" : "PAYMENT"}</div>
|
||||
<h1>{isZh ? "支付已完成" : "Payment completed"}</h1>
|
||||
<p>
|
||||
{isZh
|
||||
? "订单状态已切换为成功。你可以继续回到控制台或账单中心查看最新订阅、积分和订单历史。"
|
||||
: "The order has completed successfully. Continue to the console or billing center to review the latest subscription, credits, and order history."}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="console-surface-card">
|
||||
<div className="section-heading compact">
|
||||
<h2>{isZh ? "支付结果" : "Payment result"}</h2>
|
||||
</div>
|
||||
<div className="table-list">
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "订单类型" : "Order kind"}</strong>
|
||||
<span>{kind || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "支付渠道" : "Provider"}</strong>
|
||||
<span>{provider || "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "交易号" : "Trade no"}</strong>
|
||||
<span>{tradeNo || "-"}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "状态" : "Status"}</strong>
|
||||
<span>{isZh ? "成功" : "Success"}</span>
|
||||
</div>
|
||||
</div>
|
||||
{matchedOrder ? (
|
||||
<>
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "订单标题" : "Order title"}</strong>
|
||||
<span>{String(matchedOrder.plan_title || matchedOrder.package_name || "-")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "金额" : "Amount"}</strong>
|
||||
<span>{String(matchedOrder.money || "-")} {String(matchedOrder.currency || "")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table-row">
|
||||
<div>
|
||||
<strong>{isZh ? "支付方式" : "Payment method"}</strong>
|
||||
<span>{String(matchedOrder.payment_method || "-")}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{isZh ? "完成时间" : "Completed at"}</strong>
|
||||
<span>{String(matchedOrder.complete_time || "-")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="hero-actions">
|
||||
<Link className="button button-dark" href={`/${locale}/billing`}>
|
||||
{isZh ? "查看账单中心" : "Open billing"}
|
||||
</Link>
|
||||
<Link className="button button-light" href={`/${locale}/console`}>
|
||||
{isZh ? "前往控制台" : "Open console"}
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user