337 lines
11 KiB
TypeScript
337 lines
11 KiB
TypeScript
import QRCode from 'qrcode';
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
|
|
import type {
|
|
ProfileRechargeCenterResponse,
|
|
ProfileRechargeProduct,
|
|
} from '../../../packages/shared/src/contracts/runtime';
|
|
import { PlatformActionButton } from '../common/PlatformActionButton';
|
|
import { PlatformAsyncStatePanel } from '../common/PlatformAsyncStatePanel';
|
|
import { PlatformEmptyState } from '../common/PlatformEmptyState';
|
|
import { PlatformPillBadge } from '../common/PlatformPillBadge';
|
|
import { PlatformProfileSkeletonList } from '../common/PlatformProfileSkeletonList';
|
|
import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
|
|
import { PlatformSubpanel } from '../common/PlatformSubpanel';
|
|
import { formatRechargePrice } from '../rpg-entry/rpgEntryProfileFundsViewModel';
|
|
import { PlatformProfileModalShell } from './PlatformProfileModalShell';
|
|
import type { NativeWechatPaymentState } from './usePlatformProfileCenterController';
|
|
import { formatMudPointCount } from '@genarrative/shared';
|
|
|
|
const WECHAT_NATIVE_PAY_QR_IMAGE_SIZE = 180;
|
|
export type PlatformProfileRechargeModalProps = {
|
|
center: ProfileRechargeCenterResponse | null;
|
|
isLoading: boolean;
|
|
error: string | null;
|
|
submittingProductId: string | null;
|
|
nativePayment: NativeWechatPaymentState | null;
|
|
onClose: () => void;
|
|
onRetry: () => void;
|
|
onBuy: (product: ProfileRechargeProduct) => void;
|
|
onConfirmNativePayment: () => void;
|
|
onCloseNativePayment: () => void;
|
|
};
|
|
|
|
/**
|
|
* 生成微信 Native 支付二维码图片，保持首页现有二维码尺寸与容错行为。
|
|
*/
|
|
function useWechatNativeQrCode(codeUrl: string | null) {
|
|
const [qrImageUrl, setQrImageUrl] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setQrImageUrl(null);
|
|
if (!codeUrl) {
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}
|
|
|
|
void QRCode.toDataURL(codeUrl, {
|
|
errorCorrectionLevel: 'M',
|
|
margin: 1,
|
|
width: WECHAT_NATIVE_PAY_QR_IMAGE_SIZE,
|
|
}).then((dataUrl) => {
|
|
if (!cancelled) {
|
|
setQrImageUrl(dataUrl);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [codeUrl]);
|
|
|
|
return qrImageUrl;
|
|
}
|
|
|
|
function formatNativePaymentRemaining(remainingMs: number) {
|
|
const totalSeconds = Math.max(0, Math.ceil(remainingMs / 1000));
|
|
const minutes = Math.floor(totalSeconds / 60);
|
|
const seconds = totalSeconds % 60;
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function useNativePaymentRemaining(expiresAt: string) {
|
|
const resolveRemainingMs = useCallback(() => {
|
|
const expiresAtMs = Date.parse(expiresAt);
|
|
if (!Number.isFinite(expiresAtMs)) {
|
|
return 0;
|
|
}
|
|
return Math.max(0, expiresAtMs - Date.now());
|
|
}, [expiresAt]);
|
|
const [remainingMs, setRemainingMs] = useState(resolveRemainingMs);
|
|
|
|
useEffect(() => {
|
|
setRemainingMs(resolveRemainingMs());
|
|
const timer = window.setInterval(() => {
|
|
setRemainingMs(resolveRemainingMs());
|
|
}, 1000);
|
|
return () => window.clearInterval(timer);
|
|
}, [resolveRemainingMs]);
|
|
|
|
return {
|
|
isExpired: remainingMs <= 0,
|
|
label: formatNativePaymentRemaining(remainingMs),
|
|
};
|
|
}
|
|
|
|
/** 充值套餐行，复用后端下发的商品与逐档首充资格。 */
|
|
function RechargeProductCard({
|
|
product,
|
|
submittingProductId,
|
|
onBuy,
|
|
}: {
|
|
product: ProfileRechargeProduct;
|
|
submittingProductId: string | null;
|
|
onBuy: (product: ProfileRechargeProduct) => void;
|
|
}) {
|
|
const submitting = submittingProductId === product.productId;
|
|
const badgeLabel = product.badgeLabel;
|
|
const bonusLabel =
|
|
product.bonusPoints > 0
|
|
? `+${formatMudPointCount(product.bonusPoints)}泥点`
|
|
: null;
|
|
|
|
return (
|
|
<PlatformSubpanel
|
|
as="button"
|
|
type="button"
|
|
surface="platform"
|
|
onClick={() => onBuy(product)}
|
|
disabled={Boolean(submittingProductId)}
|
|
interactive
|
|
radius="sm"
|
|
padding="none"
|
|
aria-label={`${formatMudPointCount(product.pointsAmount)}泥点${bonusLabel ? ` ${bonusLabel}` : ''} ${formatRechargePrice(product.priceCents)} 购买`}
|
|
className="platform-recharge-product-row platform-interactive-card relative grid min-h-[4.5rem] grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 px-3.5 py-3 text-left"
|
|
>
|
|
<div className="min-w-0">
|
|
{badgeLabel ? (
|
|
<PlatformPillBadge
|
|
tone="warning"
|
|
size="xxs"
|
|
className="mb-1.5 max-w-[7rem] truncate px-2 py-0.5"
|
|
>
|
|
{badgeLabel}
|
|
</PlatformPillBadge>
|
|
) : null}
|
|
<div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
|
|
<span className="text-sm font-black text-[var(--platform-text-strong)]">
|
|
{formatMudPointCount(product.pointsAmount)}泥点
|
|
</span>
|
|
{bonusLabel ? (
|
|
<span className="text-xs font-bold text-[var(--platform-accent-strong)]">
|
|
{bonusLabel}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<span className="text-sm font-black tabular-nums text-[var(--platform-text-strong)]">
|
|
{formatRechargePrice(product.priceCents)}
|
|
</span>
|
|
<span className="platform-primary-button rounded-full px-3 py-1.5 text-xs font-black">
|
|
{submitting ? '处理中' : '购买'}
|
|
</span>
|
|
</PlatformSubpanel>
|
|
);
|
|
}
|
|
|
|
function PlatformProfileWechatNativePaymentModal({
|
|
nativePayment,
|
|
nativeQrImageUrl,
|
|
onClose,
|
|
onConfirm,
|
|
}: {
|
|
nativePayment: NativeWechatPaymentState;
|
|
nativeQrImageUrl: string | null;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
}) {
|
|
const remaining = useNativePaymentRemaining(nativePayment.expiresAt);
|
|
|
|
return (
|
|
<PlatformProfileModalShell
|
|
title="微信扫码支付"
|
|
description="请使用微信扫描二维码完成付款"
|
|
onClose={onClose}
|
|
closeLabel="关闭微信扫码支付"
|
|
closeDisabled={nativePayment.isConfirming}
|
|
size="sm"
|
|
zIndexClassName="z-[85]"
|
|
panelClassName="platform-recharge-modal !max-w-sm rounded-[1.4rem]"
|
|
bodyClassName="px-5 py-5"
|
|
>
|
|
<div className="text-center">
|
|
<div className="mb-4 rounded-2xl border border-white/10 bg-white/6 px-4 py-3 text-left">
|
|
<div className="text-xs font-bold text-[var(--platform-text-soft)]">
|
|
支付项目
|
|
</div>
|
|
<div className="mt-1 text-sm font-black text-[var(--platform-text-strong)]">
|
|
{nativePayment.productTitle}
|
|
</div>
|
|
<div className="mt-3 text-xs font-bold text-[var(--platform-text-soft)]">
|
|
支付金额
|
|
</div>
|
|
<div className="mt-1 text-2xl font-black text-[var(--platform-text-strong)]">
|
|
{formatRechargePrice(nativePayment.amountCents)}
|
|
</div>
|
|
<div className="mt-3 flex items-center justify-between gap-3 text-xs font-bold text-[var(--platform-text-soft)]">
|
|
<span>剩余时间</span>
|
|
<span className="tabular-nums">
|
|
{remaining.isExpired ? '已过期' : remaining.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="mx-auto flex h-[180px] w-[180px] items-center justify-center rounded-xl bg-white p-2">
|
|
{nativeQrImageUrl ? (
|
|
<img
|
|
src={nativeQrImageUrl}
|
|
alt="微信 Native 支付二维码"
|
|
className="h-full w-full"
|
|
/>
|
|
) : (
|
|
<span className="text-xs font-semibold text-slate-500">生成中</span>
|
|
)}
|
|
</div>
|
|
<PlatformActionButton
|
|
surface="profile"
|
|
size="xs"
|
|
className="mt-4 disabled:cursor-not-allowed"
|
|
onClick={onConfirm}
|
|
disabled={nativePayment.isConfirming || remaining.isExpired}
|
|
>
|
|
{nativePayment.isConfirming
|
|
? '确认中'
|
|
: remaining.isExpired
|
|
? '已过期'
|
|
: '我已支付'}
|
|
</PlatformActionButton>
|
|
{nativePayment.confirmMessage ? (
|
|
<div className="mt-3 text-xs font-semibold text-[var(--platform-text-soft)]">
|
|
{nativePayment.confirmMessage}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</PlatformProfileModalShell>
|
|
);
|
|
}
|
|
|
|
/** 主站与编辑器共用的泥点购买弹窗。 */
|
|
export function PlatformProfileRechargeModal({
|
|
center,
|
|
isLoading,
|
|
error,
|
|
submittingProductId,
|
|
nativePayment,
|
|
onClose,
|
|
onRetry,
|
|
onBuy,
|
|
onConfirmNativePayment,
|
|
onCloseNativePayment,
|
|
}: PlatformProfileRechargeModalProps) {
|
|
const nativeQrImageUrl = useWechatNativeQrCode(
|
|
nativePayment?.codeUrl ?? null,
|
|
);
|
|
const products = center?.pointProducts ?? [];
|
|
const currentBalance =
|
|
center?.mudPointBalance?.totalPoints ?? center?.walletBalance;
|
|
|
|
return (
|
|
<>
|
|
<PlatformProfileModalShell
|
|
title="购买更多泥点"
|
|
description={
|
|
currentBalance === undefined
|
|
? '当前余额读取中'
|
|
: `当前余额 ${formatMudPointCount(currentBalance)} 泥点`
|
|
}
|
|
onClose={onClose}
|
|
closeLabel="关闭购买更多泥点"
|
|
size="md"
|
|
panelClassName="platform-recharge-modal !max-w-[34rem] rounded-[1.4rem]"
|
|
bodyClassName="max-h-[min(76vh,36rem)] overflow-y-auto px-5 py-5"
|
|
>
|
|
<PlatformAsyncStatePanel
|
|
errorState={
|
|
error ? (
|
|
<PlatformStatusMessage
|
|
tone="error"
|
|
surface="profile"
|
|
size="xs"
|
|
className="mt-4 rounded-2xl font-semibold"
|
|
>
|
|
<div>{error}</div>
|
|
<PlatformActionButton
|
|
surface="profile"
|
|
size="xs"
|
|
className="mt-3"
|
|
onClick={onRetry}
|
|
>
|
|
重新加载
|
|
</PlatformActionButton>
|
|
</PlatformStatusMessage>
|
|
) : null
|
|
}
|
|
isLoading={isLoading}
|
|
loadingState={
|
|
<PlatformProfileSkeletonList
|
|
count={4}
|
|
containerClassName="grid gap-2.5"
|
|
itemClassName="h-[4.5rem] rounded-lg bg-white/10"
|
|
/>
|
|
}
|
|
isEmpty={products.length === 0}
|
|
emptyState={
|
|
<PlatformEmptyState
|
|
surface="subpanel"
|
|
size="inline"
|
|
className="mt-1"
|
|
>
|
|
暂无可购买套餐
|
|
</PlatformEmptyState>
|
|
}
|
|
>
|
|
<div className="grid gap-2.5">
|
|
{products.map((product) => (
|
|
<RechargeProductCard
|
|
key={product.productId}
|
|
product={product}
|
|
submittingProductId={submittingProductId}
|
|
onBuy={onBuy}
|
|
/>
|
|
))}
|
|
</div>
|
|
</PlatformAsyncStatePanel>
|
|
</PlatformProfileModalShell>
|
|
{nativePayment ? (
|
|
<PlatformProfileWechatNativePaymentModal
|
|
nativePayment={nativePayment}
|
|
nativeQrImageUrl={nativeQrImageUrl}
|
|
onClose={onCloseNativePayment}
|
|
onConfirm={onConfirmNativePayment}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|