Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(recharge): enhance payment method buttons with minimum top-up information

Browse Source
This commit is contained in:
CaIon
2026-06-18 14:40:06 +08:00
parent 97eadbefa6
commit 06f9dec95b
1 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/wallet/components/recharge-form-card.tsx
Vendored
+52 -14
View File
@@ -313,6 +313,14 @@ export function RechargeFormCard({
{topupInfo?.pay_methods?.map((method) => {
const minTopup = method.min_topup || 0
const disabled = minTopup > topupAmount
const disabledReason = disabled
? t('Minimum topup amount: {{amount}}', {
amount: minTopup,
})
: undefined
const disabledLabel = disabled
? `${t('Minimum:')} ${minTopup}`
: undefined
const button = (
<Button
@@ -320,7 +328,13 @@ export function RechargeFormCard({
variant='outline'
onClick={() => onPaymentMethodSelect(method)}
disabled={disabled || !!paymentLoading}
className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
title={disabledReason}
aria-label={
disabledReason
? `${method.name}. ${disabledReason}`
: method.name
}
className='min-h-14 min-w-0 justify-start gap-2 rounded-lg px-3 py-2 text-left'
>
{paymentLoading === method.type ? (
<Loader2 className='h-4 w-4 animate-spin' />
@@ -332,7 +346,16 @@ export function RechargeFormCard({
method.name
)
)}
<span className='truncate'>{method.name}</span>
<span className='flex min-w-0 flex-col items-start gap-0.5'>
<span className='max-w-full truncate'>
{method.name}
</span>
{disabledLabel && (
<span className='text-muted-foreground max-w-full truncate text-[11px] leading-4 font-normal'>
{disabledLabel}
</span>
)}
</span>
</Button>
)
@@ -340,11 +363,7 @@ export function RechargeFormCard({
<TooltipProvider key={method.type}>
<Tooltip>
<TooltipTrigger render={button}></TooltipTrigger>
<TooltipContent>
{t('Minimum topup amount: {{amount}}', {
amount: minTopup,
})}
</TooltipContent>
<TooltipContent>{disabledReason}</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
@@ -375,6 +394,14 @@ export function RechargeFormCard({
const loadingKey = `waffo-${index}`
const waffoMin = waffoMinTopup || 0
const belowMin = waffoMin > topupAmount
const disabledReason = belowMin
? t('Minimum topup amount: {{amount}}', {
amount: waffoMin,
})
: undefined
const disabledLabel = belowMin
? `${t('Minimum:')} ${waffoMin}`
: undefined
const button = (
<Button
@@ -382,7 +409,13 @@ export function RechargeFormCard({
variant='outline'
onClick={() => onWaffoMethodSelect(method, index)}
disabled={belowMin || !!paymentLoading}
className='h-9 min-w-0 justify-start gap-2 rounded-lg px-3'
title={disabledReason}
aria-label={
disabledReason
? `${method.name}. ${disabledReason}`
: method.name
}
className='min-h-14 min-w-0 justify-start gap-2 rounded-lg px-3 py-2 text-left'
>
{paymentLoading === loadingKey ? (
<Loader2 className='h-4 w-4 animate-spin' />
@@ -395,7 +428,16 @@ export function RechargeFormCard({
) : (
getPaymentIcon('waffo')
)}
<span className='truncate'>{method.name}</span>
<span className='flex min-w-0 flex-col items-start gap-0.5'>
<span className='max-w-full truncate'>
{method.name}
</span>
{disabledLabel && (
<span className='text-muted-foreground max-w-full truncate text-[11px] leading-4 font-normal'>
{disabledLabel}
</span>
)}
</span>
</Button>
)
@@ -403,11 +445,7 @@ export function RechargeFormCard({
<TooltipProvider key={`${method.name}-${index}`}>
<Tooltip>
<TooltipTrigger render={button}></TooltipTrigger>
<TooltipContent>
{t('Minimum topup amount: {{amount}}', {
amount: waffoMin,
})}
</TooltipContent>
<TooltipContent>{disabledReason}</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (