feat(game): 重构充值功能添加支付渠道选择
- 在 API 类型定义中添加支付渠道、货币代码和银行信息字段 - 实现充值 ViewModel 管理支付渠道、货币、支付方式和银行的选择逻辑 - 添加下拉选择组件让用户选择支付渠道、货币、支付方式和银行 - 更新桌面端和移动端充值界面的 UI 布局和样式设计 - 集成 Lucide 图标库提供支付方式相关的图标显示 - 重构存款配置标准化逻辑支持备用支付渠道数据处理 - 添加多语言本地化资源支持新的支付流程界面文本 - 优化充值创建请求的数据结构和参数传递机制
This commit is contained in:
JiaJun
@@ -1,90 +1,72 @@
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { CircleDollarSign, CreditCard, Landmark } from 'lucide-react'
|
||||
import { useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { createDeposit } from '@/api'
|
||||
import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
|
||||
import { DEFAULT_WITHDRAW_CONFIG } from '@/constants'
|
||||
import { useDepositTierList } from '@/hooks/use-deposit-tier-list'
|
||||
import { useDepositWithdrawConfig } from '@/hooks/use-deposit-withdraw-config'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { useTopupVm } from '@/hooks/use-topup-vm'
|
||||
import { notify } from '@/lib/notify'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { DepositTierItem } from '@/type'
|
||||
import type { DepositCreateRequestDto, DepositTierItem } from '@/type'
|
||||
|
||||
const PANEL_CLASS =
|
||||
'rounded-md border border-[rgba(110,229,243,0.24)] bg-[linear-gradient(180deg,rgba(7,30,43,0.9),rgba(3,15,26,0.94))] shadow-[inset_0_0_calc(var(--design-unit)*14)_rgba(88,225,238,0.08),0_0_calc(var(--design-unit)*10)_rgba(32,163,186,0.12)]'
|
||||
'rounded-md border border-[rgba(126,234,244,0.22)] bg-[linear-gradient(180deg,rgba(4,18,29,0.98),rgba(1,8,16,0.99))] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_0_calc(var(--design-unit)*16)_rgba(44,210,230,0.1)]'
|
||||
|
||||
const FILTER_BAR_CLASS =
|
||||
'rounded-[calc(var(--design-unit)*8)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(9,35,48,0.82),rgba(5,20,32,0.9))] p-design-10 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]'
|
||||
|
||||
const FIELD_LABEL_CLASS =
|
||||
'mb-design-5 flex items-center gap-design-5 text-design-11 font-semibold uppercase tracking-[0.08em] text-[#8FE7EF]'
|
||||
|
||||
const SELECT_TRIGGER_CLASS =
|
||||
'h-design-42 w-full rounded-[calc(var(--design-unit)*6)] border-[rgba(126,234,244,0.18)] bg-[rgba(2,15,26,0.78)] px-design-10 text-design-12 font-semibold text-[#E9FEFF] shadow-none hover:border-[rgba(170,247,255,0.48)] focus-visible:border-[#7CE3E8] focus-visible:ring-[#7CE3E8]/25 data-placeholder:text-[#6FAAB2]'
|
||||
|
||||
function formatNumber(value: number) {
|
||||
return new Intl.NumberFormat('en-US').format(value)
|
||||
}
|
||||
|
||||
function getMethodIcon(gatewayCode: string) {
|
||||
if (gatewayCode === 'ONLINE_DEBIT') {
|
||||
return Landmark
|
||||
}
|
||||
|
||||
if (gatewayCode === 'E_WALLET') {
|
||||
return CreditCard
|
||||
}
|
||||
|
||||
return CircleDollarSign
|
||||
}
|
||||
|
||||
function DesktopTopup() {
|
||||
const { t } = useTranslation()
|
||||
const depositWithdrawConfigQuery = useDepositWithdrawConfig()
|
||||
const tierListQuery = useDepositTierList()
|
||||
const depositWithdrawConfig =
|
||||
depositWithdrawConfigQuery.data ?? DEFAULT_WITHDRAW_CONFIG
|
||||
const isLoading =
|
||||
tierListQuery.isLoading || depositWithdrawConfigQuery.isLoading
|
||||
const isError = tierListQuery.isError || depositWithdrawConfigQuery.isError
|
||||
const tiers = tierListQuery.data ?? []
|
||||
const vm = useTopupVm()
|
||||
const createDepositInFlightRef = useRef(false)
|
||||
const pendingPayWindowRef = useRef<Window | null>(null)
|
||||
const createDepositMutation = useMutation({
|
||||
mutationFn: ({
|
||||
channelCode,
|
||||
depositBank,
|
||||
depositBankAccount,
|
||||
depositFromAddress,
|
||||
paymentType,
|
||||
tierId,
|
||||
}: {
|
||||
channelCode: string
|
||||
depositBank?: string
|
||||
depositBankAccount?: string
|
||||
depositFromAddress?: string
|
||||
paymentType: string
|
||||
tierId: string
|
||||
}) =>
|
||||
createDeposit({
|
||||
channel_code: channelCode,
|
||||
deposit_bank: depositBank,
|
||||
deposit_bank_account: depositBankAccount,
|
||||
deposit_from_address: depositFromAddress,
|
||||
idempotency_key: String(Date.now()),
|
||||
payment_type: paymentType,
|
||||
tier_id: tierId,
|
||||
}),
|
||||
mutationFn: (payload: DepositCreateRequestDto) => createDeposit(payload),
|
||||
})
|
||||
|
||||
const getPaymentMethodLabel = (method: (typeof vm.methods)[number]) =>
|
||||
method.name.trim() ||
|
||||
t(`gameDesktop.topup.flow.paymentMethods.${method.gatewayCode}`, {
|
||||
defaultValue: t('gameDesktop.topup.flow.methodTitle'),
|
||||
})
|
||||
|
||||
const handleCreateDeposit = async (tier: DepositTierItem) => {
|
||||
if (createDepositInFlightRef.current || createDepositMutation.isPending) {
|
||||
return
|
||||
}
|
||||
|
||||
const channelCode =
|
||||
tier.payChannelCode ??
|
||||
tier.channels[0]?.code ??
|
||||
(tier.currency
|
||||
? depositWithdrawConfig.deposit.defaultChannelByCurrency[tier.currency]
|
||||
: undefined) ??
|
||||
depositWithdrawConfig.defaultDepositChannelCode
|
||||
const selectedPaymentMethod =
|
||||
depositWithdrawConfig.deposit.methods.find(
|
||||
(method) => method.currencyCode === tier.currency,
|
||||
) ?? depositWithdrawConfig.deposit.methods[0]
|
||||
const paymentType = selectedPaymentMethod?.code ?? ''
|
||||
const depositBank = selectedPaymentMethod?.requiresBank
|
||||
? depositWithdrawConfig.deposit.banks.find(
|
||||
(bank) => bank.currencyCode === tier.currency,
|
||||
)?.code
|
||||
: undefined
|
||||
const payload = vm.getCreateDepositPayload(tier)
|
||||
|
||||
if (!channelCode) {
|
||||
notify.error(t('commonUi.toast.configError'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!paymentType) {
|
||||
if (!payload) {
|
||||
notify.error(t('commonUi.toast.configError'))
|
||||
return
|
||||
}
|
||||
@@ -102,12 +84,7 @@ function DesktopTopup() {
|
||||
pendingPayWindowRef.current = payWindow
|
||||
|
||||
try {
|
||||
const result = await createDepositMutation.mutateAsync({
|
||||
channelCode,
|
||||
depositBank,
|
||||
paymentType,
|
||||
tierId: tier.id,
|
||||
})
|
||||
const result = await createDepositMutation.mutateAsync(payload)
|
||||
const payUrl = result.pay_url.trim()
|
||||
|
||||
if (!payUrl) {
|
||||
@@ -139,87 +116,247 @@ function DesktopTopup() {
|
||||
<div
|
||||
className={cn(
|
||||
PANEL_CLASS,
|
||||
'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden px-design-16 py-design-14',
|
||||
'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden p-design-12',
|
||||
)}
|
||||
>
|
||||
<div className="mb-design-10 flex items-center border-b border-[rgba(89,209,223,0.2)] pb-design-10">
|
||||
<div className="text-design-20 font-semibold text-[#9AF5FB]">
|
||||
{t('gameDesktop.topup.tier.title')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
{vm.isLoading ? (
|
||||
<DataLoadingIndicator
|
||||
label={t('gameDesktop.topup.tier.loading')}
|
||||
className="h-full min-h-0 rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)]"
|
||||
className="h-full min-h-0 rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)]"
|
||||
/>
|
||||
) : isError ? (
|
||||
<div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(185,63,68,0.28)] bg-[rgba(34,13,16,0.42)] text-design-16 text-[#F4A9AE]">
|
||||
) : vm.isError ? (
|
||||
<div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*7)] border border-[rgba(185,63,68,0.28)] bg-[rgba(34,13,16,0.42)] text-design-16 text-[#F4A9AE]">
|
||||
{t('gameDesktop.topup.tier.failed')}
|
||||
</div>
|
||||
) : tiers.length === 0 ? (
|
||||
<div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)] text-design-16 text-[#8FDDE6]">
|
||||
{t('gameDesktop.topup.tier.empty')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid min-w-0 grid-cols-4 gap-design-8">
|
||||
{tiers.map((tier) => (
|
||||
<button
|
||||
key={tier.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void handleCreateDeposit(tier)
|
||||
}}
|
||||
className={cn(
|
||||
'relative overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] px-design-10 py-design-10 text-left shadow-[0_0_calc(var(--design-unit)*10)_rgba(88,225,238,0.08)] transition-[transform,border-color,box-shadow] duration-150',
|
||||
createDepositMutation.isPending
|
||||
? 'cursor-wait opacity-80'
|
||||
: 'cursor-pointer hover:-translate-y-[1px] hover:border-[rgba(170,247,255,0.62)] hover:shadow-[0_0_calc(var(--design-unit)*14)_rgba(88,225,238,0.14)]',
|
||||
)}
|
||||
>
|
||||
<div className="absolute right-design-8 top-design-8 rounded-full border border-[rgba(121,219,229,0.28)] bg-[rgba(10,39,52,0.7)] px-design-6 py-[2px] text-design-10 leading-none text-[#7CDDE7]">
|
||||
{tier.currency ?? 'FIAT'}
|
||||
<div className="flex h-full min-h-0 flex-col gap-design-10">
|
||||
<div className={FILTER_BAR_CLASS}>
|
||||
<div className="grid grid-cols-[1.15fr_0.78fr_1fr_1.15fr] gap-design-8">
|
||||
<div className="min-w-0">
|
||||
<label
|
||||
htmlFor="desktop-topup-channel"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<CreditCard className="h-design-12 w-design-12" />
|
||||
<span>{t('gameDesktop.topup.flow.channelTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedPayChannelCode || undefined}
|
||||
onValueChange={vm.setSelectedPayChannelCode}
|
||||
disabled={vm.payChannels.length === 0}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="desktop-topup-channel"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t('gameDesktop.topup.flow.channelTitle')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-design-240">
|
||||
{vm.payChannels.map((channel) => (
|
||||
<SelectItem
|
||||
key={channel.code}
|
||||
value={channel.code}
|
||||
className="py-design-7 text-design-12"
|
||||
>
|
||||
{channel.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="pr-design-46 text-design-11 uppercase tracking-[0.06em] text-[#63AEB6]">
|
||||
{tier.title}
|
||||
<div className="min-w-0">
|
||||
<label
|
||||
htmlFor="desktop-topup-currency"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<CircleDollarSign className="h-design-12 w-design-12" />
|
||||
<span>{t('gameDesktop.topup.flow.currencyTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedCurrencyCode || undefined}
|
||||
onValueChange={vm.setSelectedCurrencyCode}
|
||||
disabled={
|
||||
!vm.selectedPayChannel ||
|
||||
vm.selectedPayChannel.currencyCodes.length === 0
|
||||
}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="desktop-topup-currency"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t('gameDesktop.topup.flow.currencyTitle')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{vm.selectedPayChannel?.currencyCodes.map(
|
||||
(currencyCode) => (
|
||||
<SelectItem
|
||||
key={currencyCode}
|
||||
value={currencyCode}
|
||||
className="py-design-7 text-design-12"
|
||||
>
|
||||
{currencyCode}
|
||||
</SelectItem>
|
||||
),
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="pt-design-5 text-design-20 font-semibold leading-none text-[#FFE229]">
|
||||
{formatNumber(tier.payAmount)}
|
||||
</div>
|
||||
<div className="pt-design-3 text-design-11 text-[#9FDCE3]">
|
||||
{t('gameDesktop.topup.tier.coins')}:{' '}
|
||||
{formatNumber(tier.totalAmount)}
|
||||
<div className="min-w-0">
|
||||
<label
|
||||
htmlFor="desktop-topup-method"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<CreditCard className="h-design-12 w-design-12" />
|
||||
<span>{t('gameDesktop.topup.flow.methodTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedPaymentMethodCode || undefined}
|
||||
onValueChange={vm.setSelectedPaymentMethodCode}
|
||||
disabled={vm.methods.length === 0}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="desktop-topup-method"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t('gameDesktop.topup.flow.methodTitle')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{vm.methods.map((method) => {
|
||||
const MethodIcon = getMethodIcon(method.gatewayCode)
|
||||
|
||||
return (
|
||||
<SelectItem
|
||||
key={method.code}
|
||||
value={method.code}
|
||||
className="py-design-7 text-design-12"
|
||||
>
|
||||
<span className="flex items-center gap-design-6">
|
||||
<MethodIcon className="h-design-12 w-design-12" />
|
||||
<span>{getPaymentMethodLabel(method)}</span>
|
||||
</span>
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="mt-design-8 rounded-[calc(var(--design-unit)*5)] border border-[rgba(89,209,223,0.18)] bg-[rgba(4,19,28,0.58)] px-design-8 py-design-6">
|
||||
<div className="flex items-center justify-between gap-design-8 text-design-11">
|
||||
<span className="text-[#7CE3E8]">
|
||||
{t('gameDesktop.topup.tier.bonus')}
|
||||
</span>
|
||||
<span className="text-[#FFF1C9]">
|
||||
{formatNumber(tier.bonusAmount)}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<label
|
||||
htmlFor="desktop-topup-bank"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<Landmark className="h-design-12 w-design-12" />
|
||||
<span>{t('gameDesktop.topup.flow.bankTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedBankCode || undefined}
|
||||
onValueChange={vm.setSelectedBankCode}
|
||||
disabled={vm.banks.length === 0}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="desktop-topup-bank"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t(
|
||||
vm.banks.length === 0
|
||||
? 'gameDesktop.topup.flow.noBank'
|
||||
: 'gameDesktop.topup.flow.bankPlaceholder',
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-design-240">
|
||||
{vm.banks.map((bank) => (
|
||||
<SelectItem
|
||||
key={bank.code}
|
||||
value={bank.code}
|
||||
className="py-design-7 text-design-12"
|
||||
>
|
||||
{bank.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 flex-1 flex-col rounded-[calc(var(--design-unit)*8)] border border-[rgba(126,234,244,0.13)] bg-[rgba(2,13,23,0.42)] p-design-10">
|
||||
<div className="mb-design-8 flex shrink-0 items-center justify-between gap-design-10">
|
||||
<div className="min-w-0">
|
||||
<div className="text-design-15 font-semibold text-[#E8FDFF]">
|
||||
{t('gameDesktop.topup.tier.title')}
|
||||
</div>
|
||||
<div className="mt-design-4 flex items-center justify-between gap-design-8 text-design-11">
|
||||
<span className="text-[#7CE3E8]">Channels</span>
|
||||
<span className="line-clamp-1 text-right text-[#6DFF83]">
|
||||
{tier.channels.length > 0
|
||||
? tier.channels
|
||||
.map((channel) => channel.name)
|
||||
.join(', ')
|
||||
: '--'}
|
||||
</span>
|
||||
<div className="mt-design-2 truncate text-design-10 text-[#70AEB8]">
|
||||
{vm.selectedPayChannel?.name}
|
||||
{vm.selectedCurrencyCode
|
||||
? ` / ${vm.selectedCurrencyCode}`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
{tier.desc ? (
|
||||
<div className="mt-design-6 line-clamp-2 text-design-10 leading-[1.3] text-[#6DAAB0]">
|
||||
{tier.desc}
|
||||
</div>
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
<div className="rounded-full border border-[rgba(126,234,244,0.18)] bg-[rgba(4,25,38,0.72)] px-design-8 py-design-3 text-design-11 font-semibold text-[#9CE8F0]">
|
||||
{vm.filteredTiers.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{vm.filteredTiers.length === 0 ? (
|
||||
<div className="flex min-h-0 flex-1 items-center justify-center rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.16)] bg-[rgba(6,24,35,0.44)] text-design-16 text-[#8FDDE6]">
|
||||
{t('gameDesktop.topup.tier.empty')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid min-h-0 min-w-0 grid-cols-4 content-start gap-design-8 overflow-y-auto pr-design-1">
|
||||
{vm.filteredTiers.map((tier) => (
|
||||
<button
|
||||
key={tier.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void handleCreateDeposit(tier)
|
||||
}}
|
||||
className={cn(
|
||||
'group relative min-h-design-126 cursor-pointer overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(8,36,50,0.88),rgba(3,18,29,0.96))] px-design-10 py-design-10 text-left transition-[border-color,background-color,box-shadow,filter] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7CE3E8]/50',
|
||||
createDepositMutation.isPending
|
||||
? 'cursor-wait opacity-80'
|
||||
: 'hover:border-[rgba(255,226,41,0.5)] hover:bg-[linear-gradient(180deg,rgba(12,46,61,0.94),rgba(4,22,34,0.98))] hover:shadow-[0_0_calc(var(--design-unit)*14)_rgba(255,226,41,0.08)] active:brightness-90',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-design-8">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-design-11 uppercase tracking-[0.05em] text-[#65B2BA]">
|
||||
{tier.title}
|
||||
</div>
|
||||
<div className="pt-design-7 text-design-24 font-semibold leading-none text-[#FFE229]">
|
||||
{formatNumber(tier.payAmount)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 rounded-full border border-[rgba(121,219,229,0.24)] bg-[rgba(10,39,52,0.72)] px-design-6 py-[2px] text-design-10 leading-none text-[#7CDDE7]">
|
||||
{tier.currency ?? 'FIAT'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-design-9 rounded-[calc(var(--design-unit)*5)] bg-[rgba(255,226,41,0.06)] px-design-7 py-design-6">
|
||||
<div className="flex items-center justify-between gap-design-6">
|
||||
<span className="text-design-10 text-[#74B8C0]">
|
||||
{t('gameDesktop.topup.tier.bonus')}
|
||||
</span>
|
||||
<span className="text-design-12 font-semibold text-[#FFF1C9]">
|
||||
{formatNumber(tier.bonusAmount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1,90 +1,72 @@
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { CircleDollarSign, CreditCard, Landmark } from 'lucide-react'
|
||||
import { useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { createDeposit } from '@/api'
|
||||
import { DataLoadingIndicator } from '@/components/ui/data-loading-indicator'
|
||||
import { DEFAULT_WITHDRAW_CONFIG } from '@/constants'
|
||||
import { useDepositTierList } from '@/hooks/use-deposit-tier-list'
|
||||
import { useDepositWithdrawConfig } from '@/hooks/use-deposit-withdraw-config'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { useTopupVm } from '@/hooks/use-topup-vm'
|
||||
import { notify } from '@/lib/notify'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { DepositTierItem } from '@/type'
|
||||
import type { DepositCreateRequestDto, DepositTierItem } from '@/type'
|
||||
|
||||
const PANEL_CLASS =
|
||||
'rounded-md border border-[rgba(110,229,243,0.24)] bg-[linear-gradient(180deg,rgba(7,30,43,0.9),rgba(3,15,26,0.94))] shadow-[inset_0_0_calc(var(--design-unit)*12)_rgba(88,225,238,0.08)]'
|
||||
'rounded-md border border-[rgba(126,234,244,0.22)] bg-[linear-gradient(180deg,rgba(4,18,29,0.98),rgba(1,8,16,0.99))] shadow-[inset_0_1px_0_rgba(255,255,255,0.06),0_0_calc(var(--design-unit)*12)_rgba(44,210,230,0.08)]'
|
||||
|
||||
const FILTER_BAR_CLASS =
|
||||
'rounded-[calc(var(--design-unit)*7)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(9,35,48,0.82),rgba(5,20,32,0.9))] p-design-7 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]'
|
||||
|
||||
const FIELD_LABEL_CLASS =
|
||||
'mb-design-3 flex items-center gap-design-4 text-design-9 font-semibold uppercase tracking-[0.07em] text-[#8FE7EF]'
|
||||
|
||||
const SELECT_TRIGGER_CLASS =
|
||||
'h-design-34 w-full rounded-[calc(var(--design-unit)*5)] border-[rgba(126,234,244,0.18)] bg-[rgba(2,15,26,0.78)] px-design-8 text-design-10 font-semibold text-[#E9FEFF] shadow-none focus-visible:border-[#7CE3E8] focus-visible:ring-[#7CE3E8]/25 data-placeholder:text-[#6FAAB2]'
|
||||
|
||||
function formatNumber(value: number) {
|
||||
return new Intl.NumberFormat('en-US').format(value)
|
||||
}
|
||||
|
||||
function getMethodIcon(gatewayCode: string) {
|
||||
if (gatewayCode === 'ONLINE_DEBIT') {
|
||||
return Landmark
|
||||
}
|
||||
|
||||
if (gatewayCode === 'E_WALLET') {
|
||||
return CreditCard
|
||||
}
|
||||
|
||||
return CircleDollarSign
|
||||
}
|
||||
|
||||
function MobileTopup() {
|
||||
const { t } = useTranslation()
|
||||
const depositWithdrawConfigQuery = useDepositWithdrawConfig()
|
||||
const tierListQuery = useDepositTierList()
|
||||
const depositWithdrawConfig =
|
||||
depositWithdrawConfigQuery.data ?? DEFAULT_WITHDRAW_CONFIG
|
||||
const isLoading =
|
||||
tierListQuery.isLoading || depositWithdrawConfigQuery.isLoading
|
||||
const isError = tierListQuery.isError || depositWithdrawConfigQuery.isError
|
||||
const tiers = tierListQuery.data ?? []
|
||||
const vm = useTopupVm()
|
||||
const createDepositInFlightRef = useRef(false)
|
||||
const pendingPayWindowRef = useRef<Window | null>(null)
|
||||
const createDepositMutation = useMutation({
|
||||
mutationFn: ({
|
||||
channelCode,
|
||||
depositBank,
|
||||
depositBankAccount,
|
||||
depositFromAddress,
|
||||
paymentType,
|
||||
tierId,
|
||||
}: {
|
||||
channelCode: string
|
||||
depositBank?: string
|
||||
depositBankAccount?: string
|
||||
depositFromAddress?: string
|
||||
paymentType: string
|
||||
tierId: string
|
||||
}) =>
|
||||
createDeposit({
|
||||
channel_code: channelCode,
|
||||
deposit_bank: depositBank,
|
||||
deposit_bank_account: depositBankAccount,
|
||||
deposit_from_address: depositFromAddress,
|
||||
idempotency_key: String(Date.now()),
|
||||
payment_type: paymentType,
|
||||
tier_id: tierId,
|
||||
}),
|
||||
mutationFn: (payload: DepositCreateRequestDto) => createDeposit(payload),
|
||||
})
|
||||
|
||||
const getPaymentMethodLabel = (method: (typeof vm.methods)[number]) =>
|
||||
method.name.trim() ||
|
||||
t(`gameDesktop.topup.flow.paymentMethods.${method.gatewayCode}`, {
|
||||
defaultValue: t('gameDesktop.topup.flow.methodTitle'),
|
||||
})
|
||||
|
||||
const handleCreateDeposit = async (tier: DepositTierItem) => {
|
||||
if (createDepositInFlightRef.current || createDepositMutation.isPending) {
|
||||
return
|
||||
}
|
||||
|
||||
const channelCode =
|
||||
tier.payChannelCode ??
|
||||
tier.channels[0]?.code ??
|
||||
(tier.currency
|
||||
? depositWithdrawConfig.deposit.defaultChannelByCurrency[tier.currency]
|
||||
: undefined) ??
|
||||
depositWithdrawConfig.defaultDepositChannelCode
|
||||
const selectedPaymentMethod =
|
||||
depositWithdrawConfig.deposit.methods.find(
|
||||
(method) => method.currencyCode === tier.currency,
|
||||
) ?? depositWithdrawConfig.deposit.methods[0]
|
||||
const paymentType = selectedPaymentMethod?.code ?? ''
|
||||
const depositBank = selectedPaymentMethod?.requiresBank
|
||||
? depositWithdrawConfig.deposit.banks.find(
|
||||
(bank) => bank.currencyCode === tier.currency,
|
||||
)?.code
|
||||
: undefined
|
||||
const payload = vm.getCreateDepositPayload(tier)
|
||||
|
||||
if (!channelCode) {
|
||||
notify.error(t('commonUi.toast.configError'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!paymentType) {
|
||||
if (!payload) {
|
||||
notify.error(t('commonUi.toast.configError'))
|
||||
return
|
||||
}
|
||||
@@ -102,12 +84,7 @@ function MobileTopup() {
|
||||
pendingPayWindowRef.current = payWindow
|
||||
|
||||
try {
|
||||
const result = await createDepositMutation.mutateAsync({
|
||||
channelCode,
|
||||
depositBank,
|
||||
paymentType,
|
||||
tierId: tier.id,
|
||||
})
|
||||
const result = await createDepositMutation.mutateAsync(payload)
|
||||
const payUrl = result.pay_url.trim()
|
||||
|
||||
if (!payUrl) {
|
||||
@@ -139,87 +116,247 @@ function MobileTopup() {
|
||||
<div
|
||||
className={cn(
|
||||
PANEL_CLASS,
|
||||
'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden px-design-10 py-design-10',
|
||||
'flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden p-design-8',
|
||||
)}
|
||||
>
|
||||
<div className="mb-design-8 flex items-center border-b border-[rgba(89,209,223,0.2)] pb-design-8">
|
||||
<div className="text-design-16 font-semibold text-[#9AF5FB]">
|
||||
{t('gameDesktop.topup.tier.title')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
{vm.isLoading ? (
|
||||
<DataLoadingIndicator
|
||||
label={t('gameDesktop.topup.tier.loading')}
|
||||
className="h-full min-h-0 rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)]"
|
||||
/>
|
||||
) : isError ? (
|
||||
) : vm.isError ? (
|
||||
<div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(185,63,68,0.28)] bg-[rgba(34,13,16,0.42)] px-design-12 text-center text-design-14 text-[#F4A9AE]">
|
||||
{t('gameDesktop.topup.tier.failed')}
|
||||
</div>
|
||||
) : tiers.length === 0 ? (
|
||||
<div className="flex h-full min-h-0 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.18)] bg-[rgba(6,24,35,0.52)] px-design-12 text-center text-design-14 text-[#8FDDE6]">
|
||||
{t('gameDesktop.topup.tier.empty')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid min-h-0 min-w-0 grid-cols-2 gap-design-8 overflow-y-auto pr-design-1">
|
||||
{tiers.map((tier) => (
|
||||
<button
|
||||
key={tier.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void handleCreateDeposit(tier)
|
||||
}}
|
||||
className={cn(
|
||||
'relative min-h-design-126 overflow-hidden rounded-[calc(var(--design-unit)*7)] border border-[rgba(103,227,239,0.24)] bg-[linear-gradient(180deg,rgba(11,48,63,0.9),rgba(5,24,35,0.94))] px-design-8 py-design-8 text-left shadow-[0_0_calc(var(--design-unit)*8)_rgba(88,225,238,0.08)] transition-[border-color,box-shadow,filter] duration-150',
|
||||
createDepositMutation.isPending
|
||||
? 'cursor-wait opacity-80'
|
||||
: 'cursor-pointer hover:border-[rgba(170,247,255,0.62)] hover:brightness-110 active:brightness-90',
|
||||
)}
|
||||
>
|
||||
<div className="absolute right-design-6 top-design-6 max-w-design-48 truncate rounded-full border border-[rgba(121,219,229,0.28)] bg-[rgba(10,39,52,0.7)] px-design-5 py-[2px] text-design-8 leading-none text-[#7CDDE7]">
|
||||
{tier.currency ?? 'FIAT'}
|
||||
<div className="flex h-full min-h-0 flex-col gap-design-7">
|
||||
<div className={FILTER_BAR_CLASS}>
|
||||
<div className="grid grid-cols-2 gap-design-6">
|
||||
<div className="col-span-2 min-w-0">
|
||||
<label
|
||||
htmlFor="mobile-topup-channel"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<CreditCard className="h-design-10 w-design-10" />
|
||||
<span>{t('gameDesktop.topup.flow.channelTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedPayChannelCode || undefined}
|
||||
onValueChange={vm.setSelectedPayChannelCode}
|
||||
disabled={vm.payChannels.length === 0}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="mobile-topup-channel"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t('gameDesktop.topup.flow.channelTitle')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-design-200">
|
||||
{vm.payChannels.map((channel) => (
|
||||
<SelectItem
|
||||
key={channel.code}
|
||||
value={channel.code}
|
||||
className="py-design-6 text-design-10"
|
||||
>
|
||||
{channel.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="pr-design-46 text-design-10 uppercase leading-tight tracking-[0.04em] text-[#63AEB6]">
|
||||
{tier.title}
|
||||
<div className="min-w-0">
|
||||
<label
|
||||
htmlFor="mobile-topup-currency"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<CircleDollarSign className="h-design-10 w-design-10" />
|
||||
<span>{t('gameDesktop.topup.flow.currencyTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedCurrencyCode || undefined}
|
||||
onValueChange={vm.setSelectedCurrencyCode}
|
||||
disabled={
|
||||
!vm.selectedPayChannel ||
|
||||
vm.selectedPayChannel.currencyCodes.length === 0
|
||||
}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="mobile-topup-currency"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t('gameDesktop.topup.flow.currencyTitle')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{vm.selectedPayChannel?.currencyCodes.map(
|
||||
(currencyCode) => (
|
||||
<SelectItem
|
||||
key={currencyCode}
|
||||
value={currencyCode}
|
||||
className="py-design-6 text-design-10"
|
||||
>
|
||||
{currencyCode}
|
||||
</SelectItem>
|
||||
),
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="pt-design-5 text-design-18 font-semibold leading-none text-[#FFE229]">
|
||||
{formatNumber(tier.payAmount)}
|
||||
</div>
|
||||
<div className="pt-design-3 text-design-10 text-[#9FDCE3]">
|
||||
{t('gameDesktop.topup.tier.coins')}:{' '}
|
||||
{formatNumber(tier.totalAmount)}
|
||||
<div className="min-w-0">
|
||||
<label
|
||||
htmlFor="mobile-topup-method"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<CreditCard className="h-design-10 w-design-10" />
|
||||
<span>{t('gameDesktop.topup.flow.methodTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedPaymentMethodCode || undefined}
|
||||
onValueChange={vm.setSelectedPaymentMethodCode}
|
||||
disabled={vm.methods.length === 0}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="mobile-topup-method"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t('gameDesktop.topup.flow.methodTitle')}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{vm.methods.map((method) => {
|
||||
const MethodIcon = getMethodIcon(method.gatewayCode)
|
||||
|
||||
return (
|
||||
<SelectItem
|
||||
key={method.code}
|
||||
value={method.code}
|
||||
className="py-design-6 text-design-10"
|
||||
>
|
||||
<span className="flex items-center gap-design-5">
|
||||
<MethodIcon className="h-design-10 w-design-10" />
|
||||
<span>{getPaymentMethodLabel(method)}</span>
|
||||
</span>
|
||||
</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="mt-design-7 rounded-[calc(var(--design-unit)*5)] border border-[rgba(89,209,223,0.18)] bg-[rgba(4,19,28,0.58)] px-design-6 py-design-5">
|
||||
<div className="flex items-center justify-between gap-design-6 text-design-10">
|
||||
<span className="text-[#7CE3E8]">
|
||||
{t('gameDesktop.topup.tier.bonus')}
|
||||
</span>
|
||||
<span className="text-[#FFF1C9]">
|
||||
{formatNumber(tier.bonusAmount)}
|
||||
</span>
|
||||
<div className="col-span-2 min-w-0">
|
||||
<label
|
||||
htmlFor="mobile-topup-bank"
|
||||
className={FIELD_LABEL_CLASS}
|
||||
>
|
||||
<Landmark className="h-design-10 w-design-10" />
|
||||
<span>{t('gameDesktop.topup.flow.bankTitle')}</span>
|
||||
</label>
|
||||
<Select
|
||||
value={vm.selectedBankCode || undefined}
|
||||
onValueChange={vm.setSelectedBankCode}
|
||||
disabled={vm.banks.length === 0}
|
||||
>
|
||||
<SelectTrigger
|
||||
id="mobile-topup-bank"
|
||||
className={SELECT_TRIGGER_CLASS}
|
||||
>
|
||||
<SelectValue
|
||||
placeholder={t(
|
||||
vm.banks.length === 0
|
||||
? 'gameDesktop.topup.flow.noBank'
|
||||
: 'gameDesktop.topup.flow.bankPlaceholder',
|
||||
)}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="max-h-design-200">
|
||||
{vm.banks.map((bank) => (
|
||||
<SelectItem
|
||||
key={bank.code}
|
||||
value={bank.code}
|
||||
className="py-design-6 text-design-10"
|
||||
>
|
||||
{bank.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-0 flex-1 flex-col rounded-[calc(var(--design-unit)*7)] border border-[rgba(126,234,244,0.13)] bg-[rgba(2,13,23,0.42)] p-design-7">
|
||||
<div className="mb-design-6 flex shrink-0 items-center justify-between gap-design-6">
|
||||
<div className="min-w-0">
|
||||
<div className="text-design-12 font-semibold text-[#E8FDFF]">
|
||||
{t('gameDesktop.topup.tier.title')}
|
||||
</div>
|
||||
<div className="mt-design-3 flex items-center justify-between gap-design-6 text-design-10">
|
||||
<span className="text-[#7CE3E8]">Channels</span>
|
||||
<span className="line-clamp-1 text-right text-[#6DFF83]">
|
||||
{tier.channels.length > 0
|
||||
? tier.channels
|
||||
.map((channel) => channel.name)
|
||||
.join(', ')
|
||||
: '--'}
|
||||
</span>
|
||||
<div className="mt-design-1 truncate text-design-9 text-[#70AEB8]">
|
||||
{vm.selectedPayChannel?.name}
|
||||
{vm.selectedCurrencyCode
|
||||
? ` / ${vm.selectedCurrencyCode}`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
{tier.desc ? (
|
||||
<div className="mt-design-5 line-clamp-2 text-design-9 leading-[1.25] text-[#6DAAB0]">
|
||||
{tier.desc}
|
||||
</div>
|
||||
) : null}
|
||||
</button>
|
||||
))}
|
||||
<div className="rounded-full border border-[rgba(126,234,244,0.18)] bg-[rgba(4,25,38,0.72)] px-design-6 py-design-2 text-design-9 font-semibold text-[#9CE8F0]">
|
||||
{vm.filteredTiers.length}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{vm.filteredTiers.length === 0 ? (
|
||||
<div className="flex min-h-0 flex-1 items-center justify-center rounded-[calc(var(--design-unit)*6)] border border-[rgba(103,227,239,0.16)] bg-[rgba(6,24,35,0.44)] px-design-12 text-center text-design-14 text-[#8FDDE6]">
|
||||
{t('gameDesktop.topup.tier.empty')}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid min-h-0 min-w-0 grid-cols-2 content-start gap-design-7 overflow-y-auto pr-design-1">
|
||||
{vm.filteredTiers.map((tier) => (
|
||||
<button
|
||||
key={tier.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
void handleCreateDeposit(tier)
|
||||
}}
|
||||
className={cn(
|
||||
'relative min-h-design-118 cursor-pointer overflow-hidden rounded-[calc(var(--design-unit)*6)] border border-[rgba(126,234,244,0.16)] bg-[linear-gradient(180deg,rgba(8,36,50,0.88),rgba(3,18,29,0.96))] px-design-8 py-design-8 text-left transition-[border-color,background-color,filter] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7CE3E8]/50',
|
||||
createDepositMutation.isPending
|
||||
? 'cursor-wait opacity-80'
|
||||
: 'hover:border-[rgba(255,226,41,0.5)] active:brightness-90',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-design-6">
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-design-10 uppercase tracking-[0.04em] text-[#65B2BA]">
|
||||
{tier.title}
|
||||
</div>
|
||||
<div className="pt-design-6 text-design-20 font-semibold leading-none text-[#FFE229]">
|
||||
{formatNumber(tier.payAmount)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 rounded-full border border-[rgba(121,219,229,0.24)] bg-[rgba(10,39,52,0.72)] px-design-5 py-[2px] text-design-8 leading-none text-[#7CDDE7]">
|
||||
{tier.currency ?? 'FIAT'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-design-7 rounded-[calc(var(--design-unit)*5)] bg-[rgba(255,226,41,0.06)] px-design-6 py-design-5">
|
||||
<div className="flex items-center justify-between gap-design-5 text-design-9">
|
||||
<span className="text-[#74B8C0]">
|
||||
{t('gameDesktop.topup.tier.bonus')}
|
||||
</span>
|
||||
<span className="font-semibold text-[#FFF1C9]">
|
||||
{formatNumber(tier.bonusAmount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user