Skip to content

phsl / new-api

Go to a project
Commit 06f9dec9 by CaIon
Options

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

parent 97eadbef
Showing with 52 additions and 14 deletions
web/default/src/features/wallet/components/recharge-form-card.tsx
...@@ -313,6 +313,14 @@ export function RechargeFormCard({ ...@@ -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({ ...@@ -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({ ...@@ -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({ ...@@ -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({ ...@@ -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({ ...@@ -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({ ...@@ -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({ ...@@ -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>
) : ( ) : (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment