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

feat: add dedicated TopUpResult page for payment return flow

Browse Source 
Replace toast-based payment return with animated result page showing
pending/success/failed/timeout states. Extract shared Spinner,
AnimatedCheckmark and AnimatedCrossmark components. Add sessionStorage
persistence with validation and TTL for cross-redirect payment data.
Unify ProtectedRoute with withLayout prop, add aria-live accessibility.
This commit is contained in:
Fringg
2026-03-09 03:58:40 +03:00
parent d7b1ff1052
commit b59122818c
14 changed files with 608 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/Balance.tsx
View File

@@ -8,7 +8,6 @@ import { useAuthStore } from '../store/auth';
import { balanceApi } from '../api/balance';
import { useCurrency } from '../hooks/useCurrency';
import { API } from '../config/constants';
import { useToast } from '../components/Toast';
import type { PaginatedResponse, Transaction } from '../types';
import { Card } from '@/components/data-display/Card';
@@ -45,7 +44,6 @@ export default function Balance() {
const { formatAmount, currencySymbol } = useCurrency();
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const { showToast } = useToast();
const paymentHandledRef = useRef(false);
// Fetch balance from API
@@ -72,25 +70,17 @@ export default function Balance() {
paymentStatus === 'completed' ||
searchParams.get('success') === 'true';
const isFailed =
paymentStatus === 'failed' || paymentStatus === 'error' || paymentStatus === 'canceled';
if (isSuccess) {
paymentHandledRef.current = true;
refetchBalance();
refreshUser();
queryClient.invalidateQueries({ queryKey: ['transactions'] });
queryClient.invalidateQueries({ queryKey: ['subscription'] });
queryClient.invalidateQueries({ queryKey: ['purchase-options'] });
showToast({
type: 'success',
title: t('balance.paymentSuccess.title'),
message: t('balance.paymentSuccess.message'),
duration: 6000,
});
navigate('/balance', { replace: true });
navigate('/balance/top-up/result?status=success', { replace: true });
} else if (isFailed) {
paymentHandledRef.current = true;
navigate('/balance/top-up/result?status=failed', { replace: true });
}
}, [searchParams, navigate, refetchBalance, refreshUser, queryClient, showToast, t]);
}, [searchParams, navigate]);
const [promocode, setPromocode] = useState('');
const [promocodeLoading, setPromocodeLoading] = useState(false);