etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 10:03:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Egor
2026-01-19 01:04:44 +03:00
committed by GitHub
parent 6baeacc587
commit 3e8f547b92
2 changed files with 161 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/InsufficientBalancePrompt.tsx
View File

@@ -146,35 +146,27 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
return (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center">
{/* Backdrop click to close */}
<div className="absolute inset-0" onClick={onClose} />
{/* Modal content - bottom sheet on mobile, centered on desktop */}
<div className="relative w-full sm:max-w-lg sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up max-h-[85vh] flex flex-col">
{/* Header */}
<div className="flex-shrink-0 flex justify-between items-center p-4 sm:p-5 border-b border-dark-800">
<div>
<h2 className="text-lg font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</h2>
<p className="text-sm text-dark-400 mt-0.5">{t('balance.topUpBalance')}</p>
</div>
<button
onClick={onClose}
className="w-10 h-10 rounded-xl bg-dark-800 hover:bg-dark-700 flex items-center justify-center transition-colors"
>
<svg className="w-5 h-5 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<div className="relative w-full sm:max-w-lg sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up max-h-[80vh] flex flex-col">
{/* Compact Header */}
<div className="flex-shrink-0 flex justify-between items-center px-4 py-3 border-b border-dark-800">
<h2 className="text-base font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</h2>
<button onClick={onClose} className="w-8 h-8 rounded-lg bg-dark-800 hover:bg-dark-700 flex items-center justify-center">
<svg className="w-4 h-4 text-dark-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
{/* Scrollable content */}
<div className="flex-1 overflow-y-auto overscroll-contain p-4 sm:p-5">
<div className="flex-1 overflow-y-auto overscroll-contain p-3">
{!paymentMethods ? (
<div className="flex items-center justify-center py-12">
<div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
<div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
</div>
) : paymentMethods.length === 0 ? (
<div className="text-center py-8 text-dark-400">
<div className="text-center py-6 text-dark-400 text-sm">
{t('balance.noPaymentMethods')}
</div>
) : (
@@ -182,37 +174,30 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
{paymentMethods.map((method) => {
const methodKey = method.id.toLowerCase().replace(/-/g, '_')
const translatedName = t(`balance.paymentMethods.${methodKey}.name`, { defaultValue: '' })
const translatedDesc = t(`balance.paymentMethods.${methodKey}.description`, { defaultValue: '' })
return (
<button
key={method.id}
disabled={!method.is_available}
onClick={() => method.is_available && onSelect(method)}
className={`w-full p-4 rounded-xl border text-left transition-all flex items-center gap-4 ${
className={`w-full p-3 rounded-xl border text-left transition-all flex items-center gap-3 ${
method.is_available
? 'border-dark-700/50 hover:border-accent-500/50 bg-dark-800/30 cursor-pointer hover:bg-dark-800/50 active:bg-dark-700/50'
: 'border-dark-800/30 bg-dark-900/30 opacity-50 cursor-not-allowed'
? 'border-dark-700/50 bg-dark-800/30 active:bg-dark-700/50'
: 'border-dark-800/30 bg-dark-900/30 opacity-50'
}`}
>
{/* Icon */}
<div className="w-12 h-12 rounded-xl bg-dark-800 flex items-center justify-center flex-shrink-0">
<svg className="w-6 h-6 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="w-10 h-10 rounded-lg bg-dark-800 flex items-center justify-center flex-shrink-0">
<svg className="w-5 h-5 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
</svg>
</div>
{/* Content */}
<div className="flex-1 min-w-0">
<div className="font-semibold text-dark-100">{translatedName || method.name}</div>
{(translatedDesc || method.description) && (
<div className="text-sm text-dark-500 mt-0.5 truncate">{translatedDesc || method.description}</div>
)}
<div className="text-xs text-dark-600 mt-1">
<div className="font-medium text-dark-100 text-sm">{translatedName || method.name}</div>
<div className="text-xs text-dark-500">
{formatAmount(method.min_amount_kopeks / 100, 0)} – {formatAmount(method.max_amount_kopeks / 100, 0)} {currencySymbol}
</div>
</div>
{/* Arrow */}
<svg className="w-5 h-5 text-dark-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<svg className="w-4 h-4 text-dark-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
@@ -222,13 +207,9 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
)}
</div>
{/* Footer */}
<div className="flex-shrink-0 px-4 sm:px-5 pt-4 sm:pt-5 safe-area-inset-bottom border-t border-dark-800 bg-dark-900">
<button
type="button"
onClick={onClose}
className="btn-secondary w-full h-12 text-base"
>
{/* Compact Footer */}
<div className="flex-shrink-0 p-3 pt-2 border-t border-dark-800 bg-dark-900 safe-area-inset-bottom">
<button type="button" onClick={onClose} className="w-full py-2 text-sm text-dark-400 hover:text-dark-200">
{t('common.cancel')}
</button>
</div>