ext/new-api
2
0
Fork 0
mirror of https://github.com/QuantumNous/new-api.git synced 2026-09-06 17:46:23 +00:00
Code 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) => { {topupInfo?.pay_methods?.map((method) => {
const minTopup = method.min_topup || 0 const minTopup = method.min_topup || 0
const disabled = minTopup > topupAmount const disabled = minTopup > topupAmount
const disabledReason = disabled
? t('Minimum topup amount: {{amount}}', {
amount: minTopup,
})
: undefined
const disabledLabel = disabled
? `${t('Minimum:')} ${minTopup}`
: undefined
const button = ( const button = (
<Button <Button
@@ -320,7 +328,13 @@ export function RechargeFormCard({
variant='outline' variant='outline'
onClick={() => onPaymentMethodSelect(method)} onClick={() => onPaymentMethodSelect(method)}
disabled={disabled || !!paymentLoading} 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 ? ( {paymentLoading === method.type ? (
<Loader2 className='h-4 w-4 animate-spin' /> <Loader2 className='h-4 w-4 animate-spin' />
@@ -332,7 +346,16 @@ export function RechargeFormCard({
method.name 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> </Button>
) )
@@ -340,11 +363,7 @@ export function RechargeFormCard({
<TooltipProvider key={method.type}> <TooltipProvider key={method.type}>
<Tooltip> <Tooltip>
<TooltipTrigger render={button}></TooltipTrigger> <TooltipTrigger render={button}></TooltipTrigger>
<TooltipContent> <TooltipContent>{disabledReason}</TooltipContent>
{t('Minimum topup amount: {{amount}}', {
amount: minTopup,
})}
</TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
) : ( ) : (
@@ -375,6 +394,14 @@ export function RechargeFormCard({
const loadingKey = `waffo-${index}` const loadingKey = `waffo-${index}`
const waffoMin = waffoMinTopup || 0 const waffoMin = waffoMinTopup || 0
const belowMin = waffoMin > topupAmount const belowMin = waffoMin > topupAmount
const disabledReason = belowMin
? t('Minimum topup amount: {{amount}}', {
amount: waffoMin,
})
: undefined
const disabledLabel = belowMin
? `${t('Minimum:')} ${waffoMin}`
: undefined
const button = ( const button = (
<Button <Button
@@ -382,7 +409,13 @@ export function RechargeFormCard({
variant='outline' variant='outline'
onClick={() => onWaffoMethodSelect(method, index)} onClick={() => onWaffoMethodSelect(method, index)}
disabled={belowMin || !!paymentLoading} 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 ? ( {paymentLoading === loadingKey ? (
<Loader2 className='h-4 w-4 animate-spin' /> <Loader2 className='h-4 w-4 animate-spin' />
@@ -395,7 +428,16 @@ export function RechargeFormCard({
) : ( ) : (
getPaymentIcon('waffo') 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> </Button>
) )
@@ -403,11 +445,7 @@ export function RechargeFormCard({
<TooltipProvider key={`${method.name}-${index}`}> <TooltipProvider key={`${method.name}-${index}`}>
<Tooltip> <Tooltip>
<TooltipTrigger render={button}></TooltipTrigger> <TooltipTrigger render={button}></TooltipTrigger>
<TooltipContent> <TooltipContent>{disabledReason}</TooltipContent>
{t('Minimum topup amount: {{amount}}', {
amount: waffoMin,
})}
</TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
) : ( ) : (