etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33: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:18:02 +03:00
committed by GitHub
parent 0dff04a77e
commit 4833f51dc7
2 changed files with 97 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/InsufficientBalancePrompt.tsx
View File

@@ -145,22 +145,22 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
const { formatAmount, currencySymbol } = useCurrency()
return (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center">
<div className="fixed inset-0 bg-black/70 z-50 flex items-start justify-center pt-12 sm:pt-0 sm:items-center px-3">
<div className="absolute inset-0" onClick={onClose} />
<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}>
<div className="relative w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden max-h-[70vh] flex flex-col">
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
<span className="font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</span>
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400">
<svg className="w-5 h-5" 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-3">
{/* Content */}
<div className="flex-1 overflow-y-auto p-3 space-y-2">
{!paymentMethods ? (
<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" />
@@ -170,8 +170,7 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
{t('balance.noPaymentMethods')}
</div>
) : (
<div className="space-y-2">
{paymentMethods.map((method) => {
paymentMethods.map((method) => {
const methodKey = method.id.toLowerCase().replace(/-/g, '_')
const translatedName = t(`balance.paymentMethods.${methodKey}.name`, { defaultValue: '' })
@@ -180,14 +179,14 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
key={method.id}
disabled={!method.is_available}
onClick={() => method.is_available && onSelect(method)}
className={`w-full p-3 rounded-xl border text-left transition-all flex items-center gap-3 ${
className={`w-full p-3 rounded-xl text-left flex items-center gap-3 ${
method.is_available
? 'border-dark-700/50 bg-dark-800/30 active:bg-dark-700/50'
: 'border-dark-800/30 bg-dark-900/30 opacity-50'
? 'bg-dark-800 hover:bg-dark-700 active:bg-dark-600'
: 'bg-dark-800/50 opacity-50'
}`}
>
<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}>
<div className="w-9 h-9 rounded-lg bg-accent-500/20 flex items-center justify-center flex-shrink-0">
<svg className="w-4 h-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<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>
@@ -197,22 +196,14 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
{formatAmount(method.min_amount_kopeks / 100, 0)} – {formatAmount(method.max_amount_kopeks / 100, 0)} {currencySymbol}
</div>
</div>
<svg className="w-4 h-4 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" 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>
)
})}
</div>
})
)}
</div>
{/* 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>
</div>
</div>
)

167
src/components/TopUpModal.tsx
View File

@@ -7,7 +7,6 @@ import { checkRateLimit, getRateLimitResetTime, RATE_LIMIT_KEYS } from '../utils
import type { PaymentMethod } from '../types'
const TELEGRAM_LINK_REGEX = /^https?:\/\/t\.me\//i
const isTelegramPaymentLink = (url: string): boolean => TELEGRAM_LINK_REGEX.test(url)
const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
@@ -17,16 +16,13 @@ const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
if (isTelegramPaymentLink(url) && webApp?.openTelegramLink) {
try { webApp.openTelegramLink(url); return } catch (e) { console.warn('[TopUpModal] openTelegramLink failed:', e) }
}
if (webApp?.openLink) {
try { webApp.openLink(url, { try_instant_view: false }); return } catch (e) { console.warn('[TopUpModal] webApp.openLink failed:', e) }
}
if (reservedWindow && !reservedWindow.closed) {
try { reservedWindow.location.href = url; reservedWindow.focus?.() } catch (e) { console.warn('[TopUpModal] Failed to use reserved window:', e) }
return
}
const w2 = window.open(url, '_blank', 'noopener,noreferrer')
if (w2) { w2.opener = null; return }
window.location.href = url
@@ -46,10 +42,9 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
const getInitialAmount = (): string => {
if (!initialAmountRubles || initialAmountRubles <= 0) return ''
const converted = convertAmount(initialAmountRubles)
if (targetCurrency === 'IRR' || targetCurrency === 'RUB') {
return Math.ceil(converted).toString()
}
return converted.toFixed(2)
return (targetCurrency === 'IRR' || targetCurrency === 'RUB')
? Math.ceil(converted).toString()
: converted.toFixed(2)
}
const [amount, setAmount] = useState(getInitialAmount)
@@ -57,7 +52,6 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
const [selectedOption, setSelectedOption] = useState<string | null>(
method.options && method.options.length > 0 ? method.options[0].id : null
)
const [isInputFocused, setIsInputFocused] = useState(false)
const popupRef = useRef<Window | null>(null)
const hasOptions = method.options && method.options.length > 0
@@ -78,24 +72,18 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
webApp.openInvoice(data.invoice_url, (status) => {
if (status === 'paid') { setError(null); onClose() }
else if (status === 'failed') { setError(t('wheel.starsPaymentFailed')) }
else if (status === 'cancelled') { setError(null) }
})
} catch (e) { setError('Ошибка открытия окна оплаты: ' + String(e)) }
} catch (e) { setError('Ошибка: ' + String(e)) }
},
onError: (error: unknown) => {
const axiosError = error as { response?: { data?: { detail?: string }, status?: number } }
setError(`Ошибка API (${axiosError?.response?.status || 'network'}): ${axiosError?.response?.data?.detail || 'Не удалось создать счёт'}`)
onError: (err: unknown) => {
const axiosError = err as { response?: { data?: { detail?: string }, status?: number } }
setError(`Ошибка: ${axiosError?.response?.data?.detail || 'Не удалось создать счёт'}`)
},
})
const topUpMutation = useMutation<{
payment_id: string
payment_url?: string
invoice_url?: string
amount_kopeks: number
amount_rubles: number
status: string
expires_at: string | null
payment_id: string; payment_url?: string; invoice_url?: string
amount_kopeks: number; amount_rubles: number; status: string; expires_at: string | null
}, unknown, number>({
mutationFn: (amountKopeks: number) => balanceApi.createTopUp(amountKopeks, method.id, selectedOption || undefined),
onSuccess: (data) => {
@@ -104,12 +92,11 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
popupRef.current = null
onClose()
},
onError: (error: unknown) => {
onError: (err: unknown) => {
try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch {}
popupRef.current = null
const detail = (error as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
if (detail.includes('not yet implemented')) setError(t('balance.useBot'))
else setError(detail || t('common.error'))
const detail = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
setError(detail.includes('not yet implemented') ? t('balance.useBot') : (detail || t('common.error')))
},
})
@@ -118,76 +105,63 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
inputRef.current?.blur()
if (!checkRateLimit(RATE_LIMIT_KEYS.PAYMENT, 3, 30000)) {
setError(t('balance.tooManyRequests', { seconds: getRateLimitResetTime(RATE_LIMIT_KEYS.PAYMENT) }) || 'Подождите...')
setError('Подождите ' + getRateLimitResetTime(RATE_LIMIT_KEYS.PAYMENT) + ' сек.')
return
}
if (hasOptions && !selectedOption) { setError(t('balance.selectPaymentOption', 'Выберите способ')); return }
if (hasOptions && !selectedOption) { setError('Выберите способ'); return }
const amountCurrency = parseFloat(amount)
if (isNaN(amountCurrency) || amountCurrency <= 0) { setError(t('balance.invalidAmount', 'Введите сумму')); return }
if (isNaN(amountCurrency) || amountCurrency <= 0) { setError('Введите сумму'); return }
const amountRubles = convertToRub(amountCurrency)
if (amountRubles < minRubles) { setError(t('balance.minAmountError', { amount: minRubles })); return }
if (amountRubles > maxRubles) { setError(t('balance.maxAmountError', { amount: maxRubles })); return }
if (amountRubles < minRubles || amountRubles > maxRubles) {
setError(`Сумма: ${minRubles} – ${maxRubles} ₽`); return
}
const amountKopeks = Math.round(amountRubles * 100)
if (!isTelegramMiniApp) {
try { popupRef.current = window.open('', '_blank') } catch { popupRef.current = null }
}
if (isStarsMethod) { starsPaymentMutation.mutate(amountKopeks); return }
topUpMutation.mutate(amountKopeks)
if (isStarsMethod) { starsPaymentMutation.mutate(amountKopeks) }
else { topUpMutation.mutate(amountKopeks) }
}
const quickAmounts = [100, 300, 500, 1000].filter((a) => a >= minRubles && a <= maxRubles)
const currencyDecimals = targetCurrency === 'IRR' || targetCurrency === 'RUB' ? 0 : 2
const getQuickAmountValue = (rubAmount: number): string => {
if (targetCurrency === 'IRR') return Math.round(convertAmount(rubAmount)).toString()
return convertAmount(rubAmount).toFixed(currencyDecimals)
}
const inputStep = currencyDecimals === 0 ? 1 : 0.01
const currencyDecimals = (targetCurrency === 'IRR' || targetCurrency === 'RUB') ? 0 : 2
const getQuickValue = (rub: number) => (targetCurrency === 'IRR')
? Math.round(convertAmount(rub)).toString()
: convertAmount(rub).toFixed(currencyDecimals)
const isPending = topUpMutation.isPending || starsPaymentMutation.isPending
// When input is focused in Telegram Mini App, position modal at top
const modalPosition = isInputFocused && isTelegramMiniApp ? 'items-start pt-2' : 'items-end sm:items-center'
return (
<div className={`fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex justify-center ${modalPosition}`}>
<div className="absolute inset-0" onClick={() => { inputRef.current?.blur(); onClose() }} />
<div className="fixed inset-0 bg-black/70 z-50 flex items-start justify-center pt-12 sm:pt-0 sm:items-center px-3">
<div className="absolute inset-0" onClick={onClose} />
<div className="relative w-full sm:max-w-md sm:mx-4 bg-dark-900 sm:rounded-2xl rounded-t-2xl border border-dark-700/50 shadow-2xl animate-slide-up">
{/* Header - hide when keyboard open on mobile */}
<div className={`flex justify-between items-center px-4 py-3 border-b border-dark-800 ${isInputFocused && isTelegramMiniApp ? 'hidden' : ''}`}>
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-accent-500/20 flex items-center justify-center">
<svg className="w-4 h-4 text-accent-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</div>
<h2 className="text-base font-semibold text-dark-100">{methodName}</h2>
</div>
<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}>
<div className="relative w-full max-w-sm bg-dark-900 rounded-2xl border border-dark-700/50 shadow-2xl overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
<span className="font-semibold text-dark-100">{methodName}</span>
<button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400">
<svg className="w-5 h-5" 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>
{/* Content */}
<div className="p-4 space-y-3">
{/* Payment options - hide when keyboard open */}
{hasOptions && method.options && !isInputFocused && (
<div className="grid grid-cols-2 gap-2">
{method.options.map((option) => (
{/* Payment options */}
{hasOptions && method.options && (
<div className="flex gap-2">
{method.options.map((opt) => (
<button
key={option.id}
key={opt.id}
type="button"
onClick={() => setSelectedOption(option.id)}
className={`p-2.5 rounded-xl text-sm font-medium transition-all text-left ${
selectedOption === option.id
onClick={() => setSelectedOption(opt.id)}
className={`flex-1 py-2 px-3 rounded-lg text-sm font-medium transition-all ${
selectedOption === opt.id
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 active:bg-dark-700'
: 'bg-dark-800 text-dark-300'
}`}
>
{option.name}
{opt.name}
</button>
))}
</div>
@@ -201,36 +175,27 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
inputMode="decimal"
value={amount}
onChange={(e) => setAmount(e.target.value)}
onFocus={() => setIsInputFocused(true)}
onBlur={() => setTimeout(() => setIsInputFocused(false), 150)}
placeholder={`${formatAmount(minRubles, 0)} – ${formatAmount(maxRubles, 0)}`}
step={inputStep}
className="w-full h-14 px-4 pr-16 text-xl font-semibold bg-dark-800 border border-dark-700 rounded-xl text-dark-100 placeholder:text-dark-500 focus:outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500"
className="w-full h-12 px-4 pr-12 text-lg font-semibold bg-dark-800 border border-dark-700 rounded-xl text-dark-100 placeholder:text-dark-500 focus:outline-none focus:border-accent-500"
autoComplete="off"
/>
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-dark-400 font-medium text-lg">
<span className="absolute right-4 top-1/2 -translate-y-1/2 text-dark-500 font-medium">
{currencySymbol}
</span>
</div>
{/* Quick amounts - always show, they help dismiss keyboard */}
{/* Quick amounts */}
{quickAmounts.length > 0 && (
<div className="grid grid-cols-4 gap-2">
<div className="flex gap-2">
{quickAmounts.map((a) => {
const quickValue = getQuickAmountValue(a)
const isSelected = amount === quickValue
const val = getQuickValue(a)
return (
<button
key={a}
type="button"
onClick={() => {
setAmount(quickValue)
inputRef.current?.blur()
}}
className={`py-2.5 rounded-xl text-sm font-medium transition-all ${
isSelected
? 'bg-accent-500 text-white'
: 'bg-dark-800 text-dark-300 active:bg-dark-700'
onClick={() => { setAmount(val); inputRef.current?.blur() }}
className={`flex-1 py-2 rounded-lg text-sm font-medium ${
amount === val ? 'bg-accent-500 text-white' : 'bg-dark-800 text-dark-300'
}`}
>
{formatAmount(a, 0)}
@@ -240,46 +205,30 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
</div>
)}
{/* Error - hide when keyboard open */}
{error && !isInputFocused && (
<div className="bg-error-500/10 border border-error-500/30 text-error-400 px-3 py-2 rounded-xl text-sm">
{error}
</div>
{/* Error */}
{error && (
<div className="text-error-400 text-sm text-center py-1">{error}</div>
)}
{/* Submit button - always visible */}
{/* Submit */}
<button
type="button"
onClick={handleSubmit}
disabled={isPending || !amount}
className="btn-primary w-full h-12 text-base font-semibold mt-2"
className="btn-primary w-full h-11 text-base font-semibold"
>
{isPending ? (
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
) : (
<span className="flex items-center justify-center gap-2">
<>
{t('balance.topUp')}
{amount && parseFloat(amount) > 0 && (
<span className="opacity-80">{formatAmount(parseFloat(amount), currencyDecimals)} {currencySymbol}</span>
<span className="ml-2 opacity-80">{formatAmount(parseFloat(amount), currencyDecimals)} {currencySymbol}</span>
)}
</span>
</>
)}
</button>
{/* Cancel - hide when keyboard open */}
{!isInputFocused && (
<button
type="button"
onClick={onClose}
className="w-full py-2 text-sm text-dark-400 hover:text-dark-200"
>
{t('common.cancel')}
</button>
)}
</div>
{/* Safe area for iPhone */}
<div className="safe-area-inset-bottom" />
</div>
</div>
)