终端内直接弹出 UnlockProOverlay：订阅支付无需跳转账户页
新增 useTerminalPay hook 和 billing-utils 纯函数，SubscriptionGate 集成支付弹窗。 用户点击订阅后原地弹窗 → 连接钱包 → 链上支付 → 自动刷新进入终端。
This commit is contained in:
2569718930@qq.com
@@ -20,7 +20,7 @@ import {
|
||||
Table2,
|
||||
UserRound,
|
||||
} from "lucide-react";
|
||||
import { Fragment, useEffect, useMemo, useState } from "react";
|
||||
import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
@@ -36,6 +36,8 @@ import type { ProAccessState, ScanOpportunityRow } from "@/lib/dashboard-types";
|
||||
import { getInitialLocaleFromNavigator } from "@/lib/i18n";
|
||||
import { isBrowserLocalFullAccess } from "@/lib/local-dev-access";
|
||||
import { sortRowsByUserTime } from "@/components/dashboard/scan-terminal/decision-utils";
|
||||
import { UnlockProOverlay } from "@/components/subscription/UnlockProOverlay";
|
||||
import { useTerminalPay } from "@/components/subscription/useTerminalPay";
|
||||
import {
|
||||
type ContinentGroup,
|
||||
buildContinentGroups,
|
||||
@@ -888,7 +890,42 @@ function KoyfinWeatherTerminal({
|
||||
// ─── Layer 2: Authenticated but no active subscription ───────────────────────
|
||||
// Shown inside the terminal shell after middleware has confirmed the user is
|
||||
// logged in (Layer 1). Presents a targeted upgrade prompt.
|
||||
function SubscriptionGate({ isEn }: { isEn: boolean }) {
|
||||
function SubscriptionGate({
|
||||
isEn,
|
||||
points,
|
||||
onPaid,
|
||||
}: {
|
||||
isEn: boolean;
|
||||
points: number;
|
||||
onPaid: () => void;
|
||||
}) {
|
||||
const [showOverlay, setShowOverlay] = useState(false);
|
||||
const {
|
||||
billing,
|
||||
usePoints,
|
||||
setUsePoints,
|
||||
payBusy,
|
||||
errorText,
|
||||
infoText,
|
||||
txHash,
|
||||
chainId,
|
||||
tokenSymbol,
|
||||
walletAddress,
|
||||
handlePay,
|
||||
} = useTerminalPay({
|
||||
points,
|
||||
planPriceUsd: 10,
|
||||
onPaid: () => {
|
||||
setShowOverlay(false);
|
||||
onPaid();
|
||||
},
|
||||
isEn,
|
||||
});
|
||||
|
||||
const handleSubscribeClick = () => {
|
||||
setShowOverlay(true);
|
||||
};
|
||||
|
||||
const features = isEn
|
||||
? [
|
||||
"Real-time METAR observations across 500+ stations",
|
||||
@@ -954,13 +991,14 @@ function SubscriptionGate({ isEn }: { isEn: boolean }) {
|
||||
</ul>
|
||||
|
||||
{/* CTA */}
|
||||
<Link
|
||||
href="/account"
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubscribeClick}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-xl bg-blue-600 py-3.5 text-sm font-black text-white shadow-sm transition hover:bg-blue-700"
|
||||
>
|
||||
<CreditCard size={16} />
|
||||
{t("subscribeNow", isEn)}
|
||||
</Link>
|
||||
</button>
|
||||
|
||||
<p className="mt-4 text-center text-[11px] text-slate-400">
|
||||
{isEn
|
||||
@@ -980,6 +1018,38 @@ function SubscriptionGate({ isEn }: { isEn: boolean }) {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment overlay */}
|
||||
{showOverlay && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
|
||||
<UnlockProOverlay
|
||||
points={points}
|
||||
planPriceUsd={10}
|
||||
usePoints={usePoints}
|
||||
billing={billing}
|
||||
onToggleUsePoints={() => setUsePoints((prev) => !prev)}
|
||||
onPay={() => void handlePay()}
|
||||
onClose={() => setShowOverlay(false)}
|
||||
payBusy={payBusy}
|
||||
payLabel={
|
||||
walletAddress
|
||||
? isEn
|
||||
? "Subscribe & Activate"
|
||||
: "立即订阅并激活服务"
|
||||
: isEn
|
||||
? "Connect Wallet & Subscribe"
|
||||
: "连接钱包并订阅"
|
||||
}
|
||||
errorText={errorText || undefined}
|
||||
infoText={infoText || undefined}
|
||||
txHash={txHash || undefined}
|
||||
chainId={chainId}
|
||||
paymentTokenLabel={tokenSymbol}
|
||||
locale={isEn ? "en-US" : "zh-CN"}
|
||||
faqHref="/subscription-help"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1047,17 +1117,21 @@ function UnauthenticatedGate({
|
||||
function ProductAccessRequired({
|
||||
isAuthenticated,
|
||||
isEn,
|
||||
points,
|
||||
onPaid,
|
||||
userLocalTime,
|
||||
}: {
|
||||
isAuthenticated: boolean;
|
||||
isEn: boolean;
|
||||
points: number;
|
||||
onPaid: () => void;
|
||||
userLocalTime: string;
|
||||
}) {
|
||||
// Layer 1 fallback (middleware should catch this first in production)
|
||||
if (!isAuthenticated) {
|
||||
return <UnauthenticatedGate isEn={isEn} userLocalTime={userLocalTime} />;
|
||||
}
|
||||
// Layer 2: logged in, no subscription
|
||||
// Layer 2: logged in, no subscription — inline pay overlay
|
||||
return (
|
||||
<div className="flex h-screen w-full bg-[#e9edf3] text-slate-950">
|
||||
<aside className="w-[52px] bg-[#171d24]" />
|
||||
@@ -1069,7 +1143,7 @@ function ProductAccessRequired({
|
||||
</Link>
|
||||
<div className="font-mono text-sm text-slate-300">{userLocalTime}</div>
|
||||
</header>
|
||||
<SubscriptionGate isEn={isEn} />
|
||||
<SubscriptionGate isEn={isEn} points={points} onPaid={onPaid} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
@@ -1187,11 +1261,54 @@ function ScanTerminalScreen() {
|
||||
);
|
||||
}
|
||||
|
||||
const refreshAuth = useCallback(() => {
|
||||
fetch("/api/auth/me", {
|
||||
cache: "no-store",
|
||||
headers: { Accept: "application/json" },
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
return response.json() as Promise<{
|
||||
authenticated?: boolean;
|
||||
user_id?: string | null;
|
||||
subscription_active?: boolean | null;
|
||||
subscription_plan_code?: string | null;
|
||||
subscription_expires_at?: string | null;
|
||||
subscription_total_expires_at?: string | null;
|
||||
subscription_queued_days?: number | null;
|
||||
points?: number | null;
|
||||
}>;
|
||||
})
|
||||
.then((payload) => {
|
||||
setProAccess({
|
||||
loading: false,
|
||||
authenticated: Boolean(payload.authenticated),
|
||||
userId: payload.user_id ?? null,
|
||||
subscriptionActive: payload.subscription_active === true,
|
||||
subscriptionPlanCode: payload.subscription_plan_code ?? null,
|
||||
subscriptionExpiresAt: payload.subscription_expires_at ?? null,
|
||||
subscriptionTotalExpiresAt:
|
||||
payload.subscription_total_expires_at ??
|
||||
payload.subscription_expires_at ??
|
||||
null,
|
||||
subscriptionQueuedDays: Math.max(
|
||||
0,
|
||||
Number(payload.subscription_queued_days ?? 0),
|
||||
),
|
||||
points: Number(payload.points ?? 0),
|
||||
error: null,
|
||||
});
|
||||
})
|
||||
.catch(() => {}); // keep current state on error
|
||||
}, []);
|
||||
|
||||
if (!isAuthenticated || !isPro) {
|
||||
return (
|
||||
<ProductAccessRequired
|
||||
isAuthenticated={isAuthenticated}
|
||||
isEn={isEn}
|
||||
points={proAccess.points}
|
||||
onPaid={refreshAuth}
|
||||
userLocalTime={userLocalTime}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,418 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import type { UnlockProBilling } from "@/components/subscription/UnlockProOverlay";
|
||||
import { computeBilling } from "@/lib/billing-utils";
|
||||
import {
|
||||
WALLETCONNECT_POLYGON_RPC_URL,
|
||||
WALLET_TRANSACTION_REQUEST_TIMEOUT_MS,
|
||||
} from "@/components/account/constants";
|
||||
import {
|
||||
buildAllowanceCalldata,
|
||||
buildApproveCalldata,
|
||||
buildBalanceOfCalldata,
|
||||
requestWalletWithTimeout,
|
||||
} from "@/components/account/payment-utils";
|
||||
import { isPaymentHostAllowed, getCurrentPaymentHost } from "@/lib/payment-host";
|
||||
import {
|
||||
getEvmProvider,
|
||||
getEvmWalletLabel,
|
||||
getWalletConnectProvider,
|
||||
} from "@/components/account/wallet";
|
||||
import { getSupabaseBrowserClient } from "@/lib/supabase/client";
|
||||
import type { EvmProvider, CreatedIntent } from "@/components/account/types";
|
||||
|
||||
const DEFAULT_CHAIN_ID = 137;
|
||||
const INTENT_POLL_INTERVAL_MS = 5000;
|
||||
const INTENT_POLL_TIMEOUT_MS = 180_000;
|
||||
|
||||
function normalizePaymentError(err: unknown, fallback: string): string {
|
||||
if (!err) return fallback;
|
||||
const e = err as Record<string, unknown>;
|
||||
return String(
|
||||
e.shortMessage || e.message || e.reason || e.error || fallback,
|
||||
);
|
||||
}
|
||||
|
||||
export function useTerminalPay(params: {
|
||||
points: number;
|
||||
planPriceUsd: number;
|
||||
onPaid: () => void;
|
||||
isEn: boolean;
|
||||
}) {
|
||||
const { points, planPriceUsd, onPaid, isEn } = params;
|
||||
|
||||
const [paymentConfig, setPaymentConfig] = useState<Record<string, unknown> | null>(null);
|
||||
const [walletAddress, setWalletAddress] = useState<string | null>(null);
|
||||
const [usePoints, setUsePoints] = useState(true);
|
||||
const [payBusy, setPayBusy] = useState(false);
|
||||
const [errorText, setErrorText] = useState("");
|
||||
const [infoText, setInfoText] = useState("");
|
||||
const [txHash, setTxHash] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetch("/api/payments/config", {
|
||||
cache: "no-store",
|
||||
headers: { Accept: "application/json" },
|
||||
})
|
||||
.then(async (r) => {
|
||||
if (!r.ok) return null;
|
||||
return r.json();
|
||||
})
|
||||
.then((cfg) => {
|
||||
if (cancelled) return;
|
||||
setPaymentConfig(cfg || null);
|
||||
})
|
||||
.catch(() => {});
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
const billing: UnlockProBilling = useMemo(() => {
|
||||
const raw = computeBilling({
|
||||
planPriceUsd,
|
||||
totalPoints: points,
|
||||
usePoints,
|
||||
redemptionCfg: (paymentConfig?.points_redemption as Record<string, unknown>) ?? null,
|
||||
});
|
||||
return {
|
||||
pointsEnabled: raw.pointsEnabled,
|
||||
isEligible: raw.canRedeem,
|
||||
pointsUsed: raw.pointsUsed,
|
||||
discountAmount: raw.discountAmount,
|
||||
finalPrice: raw.payAmount,
|
||||
maxDiscountUsd: raw.maxDiscountUsdc,
|
||||
pointsPerUsd: raw.pointsPerUsdc,
|
||||
};
|
||||
}, [planPriceUsd, points, usePoints, paymentConfig]);
|
||||
|
||||
const chainId = useMemo(
|
||||
() => Number(paymentConfig?.chain_id || DEFAULT_CHAIN_ID),
|
||||
[paymentConfig],
|
||||
);
|
||||
|
||||
const tokenAddress = useMemo(() => {
|
||||
const tokens = (paymentConfig?.tokens as Array<Record<string, unknown>>) || [];
|
||||
return String(tokens[0]?.address || "");
|
||||
}, [paymentConfig]);
|
||||
|
||||
const tokenSymbol = useMemo(() => {
|
||||
const tokens = (paymentConfig?.tokens as Array<Record<string, unknown>>) || [];
|
||||
return String(tokens[0]?.symbol || "USDC");
|
||||
}, [paymentConfig]);
|
||||
|
||||
const tokenDecimals = useMemo(() => {
|
||||
const tokens = (paymentConfig?.tokens as Array<Record<string, unknown>>) || [];
|
||||
return Number(tokens[0]?.decimals || 6);
|
||||
}, [paymentConfig]);
|
||||
|
||||
const receiverAddress = useMemo(
|
||||
() => String(paymentConfig?.receiver_address || ""),
|
||||
[paymentConfig],
|
||||
);
|
||||
|
||||
const connectWallet = useCallback(async (): Promise<string | null> => {
|
||||
try {
|
||||
let provider: EvmProvider | null = getEvmProvider();
|
||||
let label = getEvmWalletLabel(provider);
|
||||
|
||||
if (!provider) {
|
||||
const wcId = String(
|
||||
process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || "",
|
||||
).trim();
|
||||
if (!wcId) {
|
||||
setErrorText(
|
||||
isEn
|
||||
? "No wallet detected. Install MetaMask or configure WalletConnect."
|
||||
: "未检测到钱包插件，请安装 MetaMask 扩展。",
|
||||
);
|
||||
return null;
|
||||
}
|
||||
provider = await getWalletConnectProvider(
|
||||
chainId,
|
||||
WALLETCONNECT_POLYGON_RPC_URL,
|
||||
);
|
||||
label = "WalletConnect";
|
||||
const existing = (await provider
|
||||
.request({ method: "eth_accounts" })
|
||||
.catch(() => [])) as string[];
|
||||
if (!Array.isArray(existing) || existing.length === 0) {
|
||||
if (typeof provider.connect === "function") {
|
||||
await provider.connect({ chains: [chainId] });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const accounts = (await provider.request({
|
||||
method: "eth_requestAccounts",
|
||||
})) as string[];
|
||||
const address = String(accounts[0] || "").toLowerCase();
|
||||
if (!address) throw new Error("No account returned");
|
||||
|
||||
setWalletAddress(address);
|
||||
return address;
|
||||
} catch (err) {
|
||||
setErrorText(normalizePaymentError(err, isEn ? "Wallet connection failed" : "钱包连接失败"));
|
||||
return null;
|
||||
}
|
||||
}, [chainId, isEn]);
|
||||
|
||||
const handlePay = useCallback(async () => {
|
||||
if (payBusy) return;
|
||||
setPayBusy(true);
|
||||
setErrorText("");
|
||||
setInfoText("");
|
||||
|
||||
try {
|
||||
const host = getCurrentPaymentHost();
|
||||
const allowed = await isPaymentHostAllowed(host);
|
||||
if (!allowed) throw new Error(isEn ? "Payment host not allowed" : "当前域名不在支付白名单中");
|
||||
|
||||
// Get session token
|
||||
const supabase = getSupabaseBrowserClient();
|
||||
const { data: sessionData } = await supabase.auth.getSession();
|
||||
const token = sessionData?.session?.access_token;
|
||||
if (!token) throw new Error(isEn ? "Session expired, please refresh" : "会话过期，请刷新页面");
|
||||
const authHeaders = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
|
||||
|
||||
// Connect wallet
|
||||
let payingWallet = walletAddress;
|
||||
if (!payingWallet) {
|
||||
payingWallet = await connectWallet();
|
||||
if (!payingWallet) {
|
||||
setPayBusy(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh payment config
|
||||
const cfgRes = await fetch("/api/payments/config", {
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
const latestCfg = cfgRes.ok ? await cfgRes.json() : paymentConfig;
|
||||
setPaymentConfig(latestCfg || paymentConfig);
|
||||
|
||||
const targetChainId = Number(latestCfg?.chain_id || DEFAULT_CHAIN_ID);
|
||||
|
||||
// Resolve provider for payment
|
||||
let eth = getEvmProvider();
|
||||
if (!eth) {
|
||||
const wcId = String(process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID || "").trim();
|
||||
if (!wcId) throw new Error("No wallet available");
|
||||
eth = await getWalletConnectProvider(targetChainId, WALLETCONNECT_POLYGON_RPC_URL);
|
||||
const existing = (await eth.request({ method: "eth_accounts" }).catch(() => [])) as string[];
|
||||
if (!Array.isArray(existing) || existing.length === 0) {
|
||||
if (typeof eth.connect === "function") {
|
||||
await eth.connect({ chains: [targetChainId] });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure target chain
|
||||
const currentChainHex = String(
|
||||
(await requestWalletWithTimeout<string>(eth, { method: "eth_chainId" }, "chainId", WALLET_TRANSACTION_REQUEST_TIMEOUT_MS)) || "",
|
||||
);
|
||||
const targetHex = `0x${targetChainId.toString(16)}`;
|
||||
if (currentChainHex.toLowerCase() !== targetHex.toLowerCase()) {
|
||||
try {
|
||||
await requestWalletWithTimeout(eth, {
|
||||
method: "wallet_switchEthereumChain",
|
||||
params: [{ chainId: targetHex }],
|
||||
}, "switchChain");
|
||||
} catch (switchErr: unknown) {
|
||||
const code = Number((switchErr as Record<string, unknown>)?.code);
|
||||
if (code === 4902 || targetChainId === 137) {
|
||||
await requestWalletWithTimeout(eth, {
|
||||
method: "wallet_addEthereumChain",
|
||||
params: [{
|
||||
chainId: "0x89",
|
||||
chainName: "Polygon Mainnet",
|
||||
nativeCurrency: { name: "POL", symbol: "POL", decimals: 18 },
|
||||
rpcUrls: ["https://polygon-rpc.com"],
|
||||
blockExplorerUrls: ["https://polygonscan.com"],
|
||||
}],
|
||||
}, "addChain");
|
||||
} else {
|
||||
throw switchErr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Create payment intent
|
||||
const resolvedToken = String(latestCfg?.tokens?.[0]?.address || tokenAddress);
|
||||
const intentRes = await fetch("/api/payments/intents", {
|
||||
method: "POST",
|
||||
headers: authHeaders,
|
||||
body: JSON.stringify({
|
||||
plan_code: "pro_monthly",
|
||||
payment_mode: "strict",
|
||||
allowed_wallet: payingWallet,
|
||||
token_address: resolvedToken || undefined,
|
||||
use_points: billing.isEligible && usePoints,
|
||||
points_to_consume: billing.isEligible && usePoints ? billing.pointsUsed : 0,
|
||||
metadata: {
|
||||
source: "terminal",
|
||||
frontend_host: host || null,
|
||||
},
|
||||
}),
|
||||
});
|
||||
if (!intentRes.ok) {
|
||||
const errBody = await intentRes.json().catch(() => ({}));
|
||||
throw new Error(String(errBody?.detail || errBody?.message || `HTTP ${intentRes.status}`));
|
||||
}
|
||||
const created = (await intentRes.json()) as CreatedIntent;
|
||||
const intentId = String(created.intent?.intent_id || "");
|
||||
const txPayload = created.tx_payload;
|
||||
if (!intentId || !txPayload?.to || !txPayload?.data) {
|
||||
throw new Error(isEn ? "Invalid payment intent response" : "支付意图创建失败");
|
||||
}
|
||||
|
||||
// Verify receiver
|
||||
const expectedReceiver = String(latestCfg?.receiver_address || receiverAddress);
|
||||
if (expectedReceiver && txPayload.to.toLowerCase() !== expectedReceiver.toLowerCase()) {
|
||||
throw new Error(isEn ? "Payment receiver mismatch" : "收款地址不匹配");
|
||||
}
|
||||
|
||||
const resolvedTokenDecimals = Number(
|
||||
latestCfg?.tokens?.[0]?.decimals || tokenDecimals,
|
||||
);
|
||||
const amountUnits =
|
||||
typeof txPayload.amount_units === "string"
|
||||
? BigInt(txPayload.amount_units)
|
||||
: BigInt(String(txPayload.value || 0));
|
||||
|
||||
// Check balance
|
||||
const balanceHex = await requestWalletWithTimeout<string>(
|
||||
eth,
|
||||
{
|
||||
method: "eth_call",
|
||||
params: [
|
||||
{ to: txPayload.token_address || resolvedToken, data: buildBalanceOfCalldata(payingWallet) },
|
||||
"latest",
|
||||
],
|
||||
},
|
||||
"balanceOf",
|
||||
);
|
||||
const balance = BigInt(balanceHex || "0x0");
|
||||
if (balance < amountUnits) {
|
||||
throw new Error(isEn ? "Insufficient USDC balance" : "USDC 余额不足");
|
||||
}
|
||||
|
||||
// Check allowance and approve if needed
|
||||
const allowanceHex = await requestWalletWithTimeout<string>(
|
||||
eth,
|
||||
{
|
||||
method: "eth_call",
|
||||
params: [
|
||||
{ to: txPayload.token_address || resolvedToken, data: buildAllowanceCalldata(payingWallet, txPayload.to) },
|
||||
"latest",
|
||||
],
|
||||
},
|
||||
"allowance",
|
||||
);
|
||||
const allowance = BigInt(allowanceHex || "0x0");
|
||||
if (allowance < amountUnits) {
|
||||
setInfoText(isEn ? "Approving USDC..." : "正在授权 USDC...");
|
||||
const approveHash = await requestWalletWithTimeout<string>(
|
||||
eth,
|
||||
{
|
||||
method: "eth_sendTransaction",
|
||||
params: [{
|
||||
from: payingWallet,
|
||||
to: txPayload.token_address || resolvedToken,
|
||||
data: buildApproveCalldata(txPayload.to, amountUnits),
|
||||
}],
|
||||
},
|
||||
"approve",
|
||||
);
|
||||
// Wait for approval receipt via simple polling
|
||||
const approveStart = Date.now();
|
||||
while (Date.now() - approveStart < 120_000) {
|
||||
const receipt = await requestWalletWithTimeout<Record<string, unknown> | null>(
|
||||
eth,
|
||||
{ method: "eth_getTransactionReceipt", params: [approveHash] },
|
||||
"approveReceipt",
|
||||
).catch(() => null);
|
||||
if (receipt?.status === "0x1" || receipt?.status === 1) break;
|
||||
if (receipt?.status === "0x0" || receipt?.status === 0) {
|
||||
throw new Error(isEn ? "USDC approval failed" : "USDC 授权失败");
|
||||
}
|
||||
await new Promise((r) => setTimeout(r, 3000));
|
||||
}
|
||||
}
|
||||
|
||||
// Send payment transaction
|
||||
setInfoText(isEn ? "Confirm in wallet..." : "请在钱包中确认交易...");
|
||||
const payHash = await requestWalletWithTimeout<string>(
|
||||
eth,
|
||||
{
|
||||
method: "eth_sendTransaction",
|
||||
params: [{ from: payingWallet, to: txPayload.to, data: txPayload.data }],
|
||||
},
|
||||
"pay",
|
||||
);
|
||||
setTxHash(payHash);
|
||||
|
||||
// Submit
|
||||
const submitRes = await fetch(`/api/payments/intents/${intentId}/submit`, {
|
||||
method: "POST",
|
||||
headers: authHeaders,
|
||||
body: JSON.stringify({ tx_hash: payHash, from_address: payingWallet }),
|
||||
});
|
||||
if (!submitRes.ok && submitRes.status !== 409) {
|
||||
const errBody = await submitRes.json().catch(() => ({}));
|
||||
throw new Error(String(errBody?.detail || `HTTP ${submitRes.status}`));
|
||||
}
|
||||
|
||||
// Confirm
|
||||
const confirmStart = Date.now();
|
||||
let confirmed = false;
|
||||
while (Date.now() - confirmStart < INTENT_POLL_TIMEOUT_MS) {
|
||||
const confirmRes = await fetch(`/api/payments/intents/${intentId}/confirm`, {
|
||||
method: "POST",
|
||||
headers: authHeaders,
|
||||
body: JSON.stringify({ tx_hash: payHash }),
|
||||
});
|
||||
if (confirmRes.ok) {
|
||||
setInfoText(isEn ? "Payment confirmed! Activating..." : "支付确认！正在激活...");
|
||||
confirmed = true;
|
||||
break;
|
||||
}
|
||||
if (confirmRes.status === 409 || confirmRes.status === 404 || confirmRes.status === 408) {
|
||||
await new Promise((r) => setTimeout(r, INTENT_POLL_INTERVAL_MS));
|
||||
continue;
|
||||
}
|
||||
const errBody = await confirmRes.json().catch(() => ({}));
|
||||
throw new Error(String(errBody?.detail || `HTTP ${confirmRes.status}`));
|
||||
}
|
||||
if (!confirmed) {
|
||||
throw new Error(isEn ? "Payment confirmation timeout" : "支付确认超时，请稍后检查订单状态");
|
||||
}
|
||||
|
||||
setInfoText(isEn ? "Subscription activated!" : "订阅已激活！");
|
||||
onPaid();
|
||||
} catch (err) {
|
||||
setErrorText(normalizePaymentError(err, isEn ? "Payment failed" : "支付失败"));
|
||||
} finally {
|
||||
setPayBusy(false);
|
||||
}
|
||||
}, [
|
||||
payBusy, walletAddress, paymentConfig, billing, usePoints, chainId,
|
||||
tokenAddress, tokenDecimals, receiverAddress, isEn, connectWallet, onPaid,
|
||||
]);
|
||||
|
||||
return {
|
||||
billing,
|
||||
usePoints,
|
||||
setUsePoints,
|
||||
payBusy,
|
||||
errorText,
|
||||
infoText,
|
||||
txHash,
|
||||
chainId,
|
||||
tokenSymbol,
|
||||
walletAddress,
|
||||
connectWallet,
|
||||
handlePay,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
export interface TerminalBilling {
|
||||
planAmount: number;
|
||||
pointsEnabled: boolean;
|
||||
pointsPerUsdc: number;
|
||||
maxDiscountUsdc: number;
|
||||
pointsUsed: number;
|
||||
discountAmount: number;
|
||||
payAmount: number;
|
||||
canRedeem: boolean;
|
||||
}
|
||||
|
||||
export interface PointsRedemptionConfig {
|
||||
enabled?: boolean;
|
||||
points_per_usdc?: number;
|
||||
max_discount_usdc?: number;
|
||||
}
|
||||
|
||||
export function computeBilling(params: {
|
||||
planPriceUsd: number;
|
||||
totalPoints: number;
|
||||
usePoints: boolean;
|
||||
redemptionCfg?: PointsRedemptionConfig | null;
|
||||
}): TerminalBilling {
|
||||
const planAmount =
|
||||
Number.isFinite(params.planPriceUsd) && params.planPriceUsd > 0
|
||||
? params.planPriceUsd
|
||||
: 10;
|
||||
|
||||
const cfg = params.redemptionCfg || {};
|
||||
const pointsEnabled = cfg.enabled !== false;
|
||||
const pointsPerUsdcRaw = Number(cfg.points_per_usdc ?? 500);
|
||||
const pointsPerUsdc =
|
||||
Number.isFinite(pointsPerUsdcRaw) && pointsPerUsdcRaw > 0
|
||||
? Math.floor(pointsPerUsdcRaw)
|
||||
: 500;
|
||||
|
||||
const maxDiscountRaw = Number(cfg.max_discount_usdc ?? 3);
|
||||
const maxDiscountUsdc = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
Math.floor(Number.isFinite(maxDiscountRaw) ? maxDiscountRaw : 3),
|
||||
Math.floor(planAmount),
|
||||
),
|
||||
);
|
||||
|
||||
const maxRedeemablePoints = pointsPerUsdc * maxDiscountUsdc;
|
||||
const actualRedeem = pointsEnabled
|
||||
? Math.min(params.totalPoints, maxRedeemablePoints)
|
||||
: 0;
|
||||
const discountUnits = Math.floor(actualRedeem / pointsPerUsdc);
|
||||
const pointsUsed = discountUnits * pointsPerUsdc;
|
||||
const canRedeem =
|
||||
pointsEnabled &&
|
||||
maxDiscountUsdc > 0 &&
|
||||
params.totalPoints >= pointsPerUsdc;
|
||||
const applyDiscount =
|
||||
params.usePoints && canRedeem && pointsUsed > 0;
|
||||
|
||||
return {
|
||||
planAmount,
|
||||
pointsEnabled,
|
||||
pointsPerUsdc,
|
||||
maxDiscountUsdc,
|
||||
pointsUsed,
|
||||
discountAmount: discountUnits,
|
||||
payAmount: planAmount - (applyDiscount ? discountUnits : 0),
|
||||
canRedeem,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user