367 lines
20 KiB
JavaScript
367 lines
20 KiB
JavaScript
import AccountCircleOutlined from "@mui/icons-material/AccountCircleOutlined";
|
||
import CheckCircleOutlineOutlined from "@mui/icons-material/CheckCircleOutlineOutlined";
|
||
import FactCheckOutlined from "@mui/icons-material/FactCheckOutlined";
|
||
import PaymentsOutlined from "@mui/icons-material/PaymentsOutlined";
|
||
import ReceiptLongOutlined from "@mui/icons-material/ReceiptLongOutlined";
|
||
import Alert from "@mui/material/Alert";
|
||
import Autocomplete from "@mui/material/Autocomplete";
|
||
import Button from "@mui/material/Button";
|
||
import Dialog from "@mui/material/Dialog";
|
||
import DialogActions from "@mui/material/DialogActions";
|
||
import DialogContent from "@mui/material/DialogContent";
|
||
import DialogTitle from "@mui/material/DialogTitle";
|
||
import InputAdornment from "@mui/material/InputAdornment";
|
||
import MenuItem from "@mui/material/MenuItem";
|
||
import TextField from "@mui/material/TextField";
|
||
import { DateTimePicker } from "@/shared/ui/DateTimePicker.jsx";
|
||
import {
|
||
COIN_SELLER_RECHARGE_CHAINS,
|
||
COIN_SELLER_RECHARGE_PROVIDER_CURRENCIES,
|
||
COIN_SELLER_RECHARGE_PROVIDERS,
|
||
} from "../constants.js";
|
||
import { formatAmount, formatTime, formatUsdMinor } from "../format.js";
|
||
|
||
export function FinanceCoinSellerRechargeCreateDialog({
|
||
apps,
|
||
form,
|
||
formError,
|
||
loading,
|
||
onChange,
|
||
onClose,
|
||
onSubmit,
|
||
onVerifyReceipt,
|
||
open,
|
||
quote,
|
||
quoteError,
|
||
quoteLoading,
|
||
receiptLoading,
|
||
receiptVerification,
|
||
}) {
|
||
const disabled = loading || receiptLoading;
|
||
// 财务录单的主按钮只在“金额结果已确定 + 三方凭证已校验”时开放，避免界面优化后弱化原有风控门槛。
|
||
const canCreate = receiptVerification?.verified === true && (form.isMakeup || Boolean(quote?.coinAmount)) && !disabled;
|
||
const selectedAppName = apps.find((app) => app.appCode === form.appCode)?.appName || form.appCode || "待选择";
|
||
|
||
return (
|
||
<Dialog
|
||
fullWidth
|
||
maxWidth={false}
|
||
open={open}
|
||
slotProps={{ paper: { className: "finance-create-dialog-paper finance-create-dialog-paper--coin-seller" } }}
|
||
onClose={disabled ? undefined : onClose}
|
||
>
|
||
<DialogTitle className="finance-entry-header">
|
||
<span className="finance-entry-header__icon" aria-hidden="true">
|
||
<PaymentsOutlined />
|
||
</span>
|
||
<span>
|
||
<strong>录入币商充值</strong>
|
||
<small>完成付款凭证校验后，订单将计入充值流水</small>
|
||
</span>
|
||
</DialogTitle>
|
||
<DialogContent className="finance-create-dialog finance-create-dialog--entry">
|
||
<form className="finance-entry-form" id="coin-seller-recharge-order-form" onSubmit={onSubmit}>
|
||
{formError ? <Alert severity="error">{formError}</Alert> : null}
|
||
<div className="finance-entry-layout">
|
||
<div className="finance-entry-fields">
|
||
<FormSection icon={<AccountCircleOutlined />} index="1" title="充值对象">
|
||
<div className="finance-entry-field-grid finance-entry-field-grid--2">
|
||
{apps.length ? (
|
||
<TextField
|
||
disabled={disabled}
|
||
label="APP"
|
||
required
|
||
select
|
||
value={form.appCode}
|
||
onChange={(event) => onChange("appCode", event.target.value)}
|
||
>
|
||
{apps.map((app) => (
|
||
<MenuItem key={app.appCode} value={app.appCode}>
|
||
{app.appName || app.appCode}
|
||
</MenuItem>
|
||
))}
|
||
</TextField>
|
||
) : (
|
||
<TextField
|
||
disabled={disabled}
|
||
label="APP"
|
||
required
|
||
value={form.appCode}
|
||
onChange={(event) => onChange("appCode", event.target.value)}
|
||
/>
|
||
)}
|
||
<TextField
|
||
disabled={disabled}
|
||
label="目标用户 ID"
|
||
required
|
||
value={form.targetUserId}
|
||
onChange={(event) => onChange("targetUserId", event.target.value)}
|
||
/>
|
||
</div>
|
||
</FormSection>
|
||
|
||
<FormSection icon={<PaymentsOutlined />} index="2" title="入账金额">
|
||
<div className="finance-entry-field-grid finance-entry-field-grid--2">
|
||
<TextField
|
||
className="finance-entry-usd-field"
|
||
disabled={disabled}
|
||
label="充值金额（USD）"
|
||
required
|
||
slotProps={{
|
||
htmlInput: { "aria-label": "USD 金额", min: 0, step: "0.01" },
|
||
input: { startAdornment: <InputAdornment position="start">$</InputAdornment> },
|
||
}}
|
||
type="number"
|
||
value={form.usdAmount}
|
||
onChange={(event) => onChange("usdAmount", event.target.value)}
|
||
/>
|
||
<DateTimePicker
|
||
className="finance-order-date-picker"
|
||
disabled={disabled}
|
||
label="订单时间"
|
||
value={form.orderDateMs}
|
||
onChange={(value) => onChange("orderDateMs", value)}
|
||
/>
|
||
</div>
|
||
<div className="finance-entry-mode" role="group" aria-label="入账类型">
|
||
<button
|
||
aria-label="正常充值"
|
||
aria-pressed={!form.isMakeup}
|
||
className={!form.isMakeup ? "is-active" : ""}
|
||
disabled={disabled}
|
||
type="button"
|
||
onClick={() => onChange("isMakeup", false)}
|
||
>
|
||
<strong>正常充值</strong>
|
||
<small>按兑换比例发放金币</small>
|
||
</button>
|
||
<button
|
||
aria-label="补单"
|
||
aria-pressed={form.isMakeup}
|
||
className={form.isMakeup ? "is-active is-warning" : ""}
|
||
disabled={disabled}
|
||
type="button"
|
||
onClick={() => onChange("isMakeup", true)}
|
||
>
|
||
<strong>补单</strong>
|
||
<small>只计入充值，金币为 0</small>
|
||
</button>
|
||
</div>
|
||
<CoinQuoteResult
|
||
form={form}
|
||
quote={quote}
|
||
quoteError={quoteError}
|
||
quoteLoading={quoteLoading}
|
||
/>
|
||
</FormSection>
|
||
|
||
<FormSection icon={<ReceiptLongOutlined />} index="3" title="支付凭证">
|
||
<div className="finance-entry-field-grid finance-entry-field-grid--3">
|
||
<TextField
|
||
disabled={disabled}
|
||
label="支付渠道"
|
||
required
|
||
select
|
||
value={form.providerCode}
|
||
onChange={(event) => onChange("providerCode", event.target.value)}
|
||
>
|
||
{COIN_SELLER_RECHARGE_PROVIDERS.map(([value, label]) => (
|
||
<MenuItem key={value} value={value}>
|
||
{label}
|
||
</MenuItem>
|
||
))}
|
||
</TextField>
|
||
{form.providerCode === "usdt" ? (
|
||
<TextField
|
||
disabled={disabled}
|
||
label="USDT 链"
|
||
required
|
||
select
|
||
value={form.chain}
|
||
onChange={(event) => onChange("chain", event.target.value)}
|
||
>
|
||
{COIN_SELLER_RECHARGE_CHAINS.map(([value, label]) => (
|
||
<MenuItem key={value} value={value}>
|
||
{label}
|
||
</MenuItem>
|
||
))}
|
||
</TextField>
|
||
) : (
|
||
<Autocomplete
|
||
disabled={disabled}
|
||
getOptionLabel={(option) => option || ""}
|
||
isOptionEqualToValue={(option, value) => option === value}
|
||
noOptionsText="无匹配币种"
|
||
options={COIN_SELLER_RECHARGE_PROVIDER_CURRENCIES[form.providerCode] || []}
|
||
renderInput={(params) => <TextField {...params} label="币种" required />}
|
||
value={form.providerCurrencyCode || null}
|
||
onChange={(_, value) => onChange("providerCurrencyCode", value || "")}
|
||
/>
|
||
)}
|
||
{form.providerCode !== "usdt" ? (
|
||
<TextField
|
||
disabled={disabled}
|
||
label="实付金额"
|
||
required
|
||
slotProps={{ htmlInput: { "aria-label": "币种金额", min: 0, step: "0.01" } }}
|
||
type="number"
|
||
value={form.providerAmount}
|
||
onChange={(event) => onChange("providerAmount", event.target.value)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
<div className="finance-receipt-field">
|
||
<TextField
|
||
disabled={disabled}
|
||
label="三方订单号"
|
||
required
|
||
value={form.externalOrderNo}
|
||
onChange={(event) => onChange("externalOrderNo", event.target.value)}
|
||
/>
|
||
<Button
|
||
aria-label="校验"
|
||
disabled={disabled || !onVerifyReceipt}
|
||
startIcon={<FactCheckOutlined fontSize="small" />}
|
||
variant="outlined"
|
||
onClick={onVerifyReceipt}
|
||
>
|
||
校验订单
|
||
</Button>
|
||
</div>
|
||
{receiptVerification ? <ReceiptVerificationBanner verification={receiptVerification} /> : null}
|
||
<TextField
|
||
disabled={disabled}
|
||
label="备注（选填）"
|
||
multiline
|
||
minRows={2}
|
||
slotProps={{ htmlInput: { "aria-label": "备注", maxLength: 512 } }}
|
||
value={form.remark}
|
||
onChange={(event) => onChange("remark", event.target.value)}
|
||
/>
|
||
</FormSection>
|
||
</div>
|
||
|
||
<OrderPreview
|
||
appName={selectedAppName}
|
||
form={form}
|
||
quote={quote}
|
||
quoteLoading={quoteLoading}
|
||
receiptVerification={receiptVerification}
|
||
/>
|
||
</div>
|
||
</form>
|
||
</DialogContent>
|
||
<DialogActions className="finance-entry-actions">
|
||
<span className="finance-entry-actions__hint">
|
||
{receiptVerification?.verified ? <CheckCircleOutlineOutlined fontSize="small" /> : <FactCheckOutlined fontSize="small" />}
|
||
{receiptVerification?.verified ? "订单已校验，可以创建" : "校验三方订单后才能创建"}
|
||
</span>
|
||
<Button disabled={disabled} variant="outlined" onClick={onClose}>
|
||
取消
|
||
</Button>
|
||
<Button aria-label="创建" disabled={!canCreate} form="coin-seller-recharge-order-form" type="submit" variant="contained">
|
||
{form.isMakeup ? "确认补单" : "确认入账"}
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
}
|
||
|
||
function FormSection({ children, icon, index, title }) {
|
||
return (
|
||
<section className="finance-entry-section">
|
||
<header className="finance-entry-section__header">
|
||
<span className="finance-entry-section__index">{index}</span>
|
||
<span className="finance-entry-section__icon" aria-hidden="true">
|
||
{icon}
|
||
</span>
|
||
<h3>{title}</h3>
|
||
</header>
|
||
<div className="finance-entry-section__body">{children}</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CoinQuoteResult({ form, quote, quoteError, quoteLoading }) {
|
||
const coinAmount = form.isMakeup ? 0 : quote?.coinAmount;
|
||
return (
|
||
<div className={`finance-quote-result${form.isMakeup ? " finance-quote-result--makeup" : ""}`}>
|
||
<span>
|
||
<small>{form.isMakeup ? "本次不发放" : "预计到账"}</small>
|
||
<output aria-label="充值金币">{coinAmount === undefined ? "—" : formatAmount(coinAmount)}</output>
|
||
<em>金币</em>
|
||
</span>
|
||
<p>{quoteHelperText(quote, quoteError, quoteLoading, form.isMakeup)}</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OrderPreview({ appName, form, quote, quoteLoading, receiptVerification }) {
|
||
const usdAmount = Number(form.usdAmount || 0);
|
||
const coinAmount = form.isMakeup ? 0 : Number(quote?.coinAmount || 0);
|
||
const providerLabel = COIN_SELLER_RECHARGE_PROVIDERS.find(([value]) => value === form.providerCode)?.[1] || "待选择";
|
||
return (
|
||
<aside className="finance-entry-preview" aria-label="入账预览">
|
||
<header>
|
||
<span>入账预览</span>
|
||
<b className={form.isMakeup ? "is-warning" : ""}>{form.isMakeup ? "补单" : "正常充值"}</b>
|
||
</header>
|
||
<div className="finance-entry-preview__amount">
|
||
<small>充值金额</small>
|
||
<strong><span>$</span>{usdAmount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>
|
||
<p>USD</p>
|
||
</div>
|
||
<div className="finance-entry-preview__coins">
|
||
<span>到账金币</span>
|
||
<strong>{quoteLoading ? "计算中" : formatAmount(coinAmount)}</strong>
|
||
</div>
|
||
<dl>
|
||
<div><dt>APP</dt><dd>{appName}</dd></div>
|
||
<div><dt>目标用户</dt><dd>{form.targetUserId || "待填写"}</dd></div>
|
||
<div><dt>订单时间</dt><dd>{formatTime(form.orderDateMs) || "待选择"}</dd></div>
|
||
<div><dt>支付渠道</dt><dd>{providerLabel}</dd></div>
|
||
<div><dt>支付币种</dt><dd>{form.providerCode === "usdt" ? form.chain || "待选择" : form.providerCurrencyCode || "待选择"}</dd></div>
|
||
</dl>
|
||
<div className={`finance-entry-preview__verify${receiptVerification?.verified ? " is-verified" : ""}`}>
|
||
{receiptVerification?.verified ? <CheckCircleOutlineOutlined /> : <FactCheckOutlined />}
|
||
<span>
|
||
<strong>{receiptVerification?.verified ? "三方订单已校验" : "等待校验订单"}</strong>
|
||
<small>{receiptVerification?.verified ? "凭证金额与订单信息已核对" : "填写三方订单号并完成校验"}</small>
|
||
</span>
|
||
</div>
|
||
<p className={`finance-entry-preview__notice${form.isMakeup ? " is-warning" : ""}`}>
|
||
{form.isMakeup
|
||
? `将记录 USD ${usdAmount || 0} 充值，金币发放数量为 0。`
|
||
: `创建后将向目标用户发放 ${formatAmount(coinAmount)} 金币。`}
|
||
</p>
|
||
</aside>
|
||
);
|
||
}
|
||
|
||
function quoteHelperText(quote, error, loading, isMakeup) {
|
||
if (isMakeup) return "补单不发放金币，充值金额仍正常计入统计";
|
||
if (loading) return "正在计算兑换比例与金币数量";
|
||
if (error) return error;
|
||
if (!quote) return "填写 APP、用户 ID 和 USD 金额后自动计算";
|
||
const source = quote.rateSource === "whitelist"
|
||
? `用户白名单 ${quote.matchedUserId || ""}`.trim()
|
||
: `${quote.minUsdAmount}-${quote.maxUsdAmount} USD 区间`;
|
||
return `${source} · 1 USD = ${formatAmount(quote.coinsPerUsd)} 金币`;
|
||
}
|
||
|
||
function ReceiptVerificationBanner({ verification }) {
|
||
const detail = [
|
||
verification.status && `状态 ${verification.status}`,
|
||
verification.providerOrderId && `三方单 ${verification.providerOrderId}`,
|
||
verification.currencyCode && verification.providerAmountMinor !== undefined
|
||
? formatUsdMinor(verification.providerAmountMinor, verification.currencyCode)
|
||
: "",
|
||
verification.failureReason,
|
||
].filter(Boolean).join(" / ");
|
||
return (
|
||
<Alert className="finance-receipt-result" severity={verification.verified ? "success" : "error"}>
|
||
{verification.verified ? "校验通过" : "校验未通过"}{detail ? `：${detail}` : ""}
|
||
</Alert>
|
||
);
|
||
}
|