mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
fix(cabinet): Lava top-up return route + Telegram-unavailable card overflow
- Lava returns to a path-based result URL (/balance/top-up/result/:method) because Lava Business rejects query strings in success/fail URLs. Add the route and read the method from the path param as a fallback (alongside ?method=) so external-browser redirects still poll the right payment. Pairs with the backend fix. - ConnectedAccounts: the "Привязка Telegram временно недоступна" message overflowed the card (it sat in the non-shrinking action column and never wrapped). Constrain its width and wrap it (max-w + break-words) so it stays inside the card. Verified by rendering. Both reported in the Bedolaga bug topic.
This commit is contained in:
12
src/App.tsx
12
src/App.tsx
@@ -408,6 +408,18 @@ function App() {
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
{/* Path-based method variant: some providers (Lava) reject return URLs that carry a
|
||||||
|
query string, so the method is encoded in the path instead of ?method=. */}
|
||||||
|
<Route
|
||||||
|
path="/balance/top-up/result/:method"
|
||||||
|
element={
|
||||||
|
<ProtectedRoute withLayout={false}>
|
||||||
|
<LazyPage>
|
||||||
|
<TopUpResult />
|
||||||
|
</LazyPage>
|
||||||
|
</ProtectedRoute>
|
||||||
|
}
|
||||||
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="/balance/top-up/:methodId"
|
path="/balance/top-up/:methodId"
|
||||||
element={
|
element={
|
||||||
|
|||||||
@@ -240,13 +240,15 @@ function TelegramLinkWidget() {
|
|||||||
// Script failed to load - show unavailable message with bot link
|
// Script failed to load - show unavailable message with bot link
|
||||||
if (scriptFailed) {
|
if (scriptFailed) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center gap-1.5">
|
<div className="flex max-w-[200px] flex-col items-center gap-1.5">
|
||||||
<p className="text-xs text-dark-400">{t('profile.accounts.telegramLinkUnavailable')}</p>
|
<p className="break-words text-center text-xs text-dark-400">
|
||||||
|
{t('profile.accounts.telegramLinkUnavailable')}
|
||||||
|
</p>
|
||||||
<a
|
<a
|
||||||
href={`https://t.me/${botUsername}`}
|
href={`https://t.me/${botUsername}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
|
className="break-all text-sm text-accent-400 transition-colors hover:text-accent-300"
|
||||||
>
|
>
|
||||||
@{botUsername}
|
@{botUsername}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState, useCallback, useRef, useEffect } from 'react';
|
import { useState, useCallback, useRef, useEffect } from 'react';
|
||||||
import { useNavigate, useSearchParams } from 'react-router';
|
import { useNavigate, useParams, useSearchParams } from 'react-router';
|
||||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
@@ -194,8 +194,11 @@ export default function TopUpResult() {
|
|||||||
// Load saved payment info from sessionStorage (once on mount)
|
// Load saved payment info from sessionStorage (once on mount)
|
||||||
const [pendingInfo] = useState(() => loadTopUpPendingInfo());
|
const [pendingInfo] = useState(() => loadTopUpPendingInfo());
|
||||||
|
|
||||||
// Fallback: read method from query params (for external browser redirects where sessionStorage is unavailable)
|
// Fallback: read method for external-browser redirects where sessionStorage is unavailable.
|
||||||
const methodFromUrl = searchParams.get('method');
|
// Providers that reject query strings (Lava) return to /balance/top-up/result/<method>, so
|
||||||
|
// accept the method from the path param too, not just ?method=.
|
||||||
|
const { method: methodFromPath } = useParams<{ method?: string }>();
|
||||||
|
const methodFromUrl = searchParams.get('method') || methodFromPath || null;
|
||||||
|
|
||||||
// Detect if user arrived via redirect with success param (no polling needed)
|
// Detect if user arrived via redirect with success param (no polling needed)
|
||||||
const redirectStatus = searchParams.get('status') || searchParams.get('payment');
|
const redirectStatus = searchParams.get('status') || searchParams.get('payment');
|
||||||
|
|||||||
Reference in New Issue
Block a user