diff --git a/src/components/settings/credits/credits-balance-card.tsx b/src/components/settings/credits/credits-balance-card.tsx index 05042e5..82feb49 100644 --- a/src/components/settings/credits/credits-balance-card.tsx +++ b/src/components/settings/credits/credits-balance-card.tsx @@ -11,11 +11,7 @@ import { } from '@/components/ui/card'; import { Skeleton } from '@/components/ui/skeleton'; import { websiteConfig } from '@/config/website'; -import { - creditsKeys, - useCreditBalance, - useCreditStats, -} from '@/hooks/use-credits'; +import { useCreditBalance, useCreditStats } from '@/hooks/use-credits'; import { useMounted } from '@/hooks/use-mounted'; import { useCurrentPlan } from '@/hooks/use-payment'; import { useLocaleRouter } from '@/i18n/navigation'; @@ -23,7 +19,6 @@ import { authClient } from '@/lib/auth-client'; import { formatDate } from '@/lib/formatter'; import { cn } from '@/lib/utils'; import { Routes } from '@/routes'; -import { useQueryClient } from '@tanstack/react-query'; import { RefreshCwIcon } from 'lucide-react'; import { useTranslations } from 'next-intl'; import { useSearchParams } from 'next/navigation'; @@ -42,7 +37,6 @@ export default function CreditsBalanceCard() { const t = useTranslations('Dashboard.settings.credits.balance'); const searchParams = useSearchParams(); const localeRouter = useLocaleRouter(); - const queryClient = useQueryClient(); const hasHandledSession = useRef(false); const mounted = useMounted(); @@ -67,6 +61,21 @@ export default function CreditsBalanceCard() { refetch: refetchStats, } = useCreditStats(); + // Handle payment success after credits purchase + const handlePaymentSuccess = useCallback(async () => { + // Use queueMicrotask to avoid React rendering conflicts + queueMicrotask(() => { + toast.success(t('creditsAdded')); + }); + + // Wait for webhook to process (simplified approach) + await new Promise((resolve) => setTimeout(resolve, 1000)); + + // Force refresh data + refetchBalance(); + refetchStats(); + }, [t, refetchBalance, refetchStats]); + // Check for payment success and show success message useEffect(() => { const sessionId = searchParams.get('credits_session_id'); @@ -78,40 +87,17 @@ export default function CreditsBalanceCard() { url.searchParams.delete('credits_session_id'); localeRouter.replace(Routes.SettingsCredits + url.search); - // Handle payment success with proper timing - const handlePaymentSuccess = async () => { - // Show success toast (must be in setTimeout to avoid errors) - setTimeout(() => { - toast.success(t('creditsAdded')); - }, 0); - - // Wait for webhook to process - await new Promise((resolve) => setTimeout(resolve, 1000)); - - // Force refresh data - queryClient.invalidateQueries({ - queryKey: creditsKeys.balance(), - }); - queryClient.invalidateQueries({ - queryKey: creditsKeys.stats(), - }); - }; - + // Handle payment success handlePaymentSuccess(); } - }, [searchParams, localeRouter, queryClient, t]); + }, [searchParams, localeRouter, handlePaymentSuccess]); - // Retry all data fetching + // Retry all data fetching using refetch methods const handleRetry = useCallback(() => { - // console.log('handleRetry, refetch credits data'); - // Force invalidate cache to ensure fresh data - queryClient.invalidateQueries({ - queryKey: creditsKeys.balance(), - }); - queryClient.invalidateQueries({ - queryKey: creditsKeys.stats(), - }); - }, [queryClient]); + // Use refetch methods for immediate data refresh + refetchBalance(); + refetchStats(); + }, [refetchBalance, refetchStats]); // Render loading skeleton if (!mounted || isLoadingBalance || isLoadingStats) { diff --git a/src/hooks/use-credits.ts b/src/hooks/use-credits.ts index b60252c..7c4ed8c 100644 --- a/src/hooks/use-credits.ts +++ b/src/hooks/use-credits.ts @@ -32,8 +32,6 @@ export function useCreditBalance() { console.log('Credit balance fetched:', result.data.credits); return result.data.credits || 0; }, - staleTime: 30 * 1000, // 30 seconds - reasonable stale time - retry: 2, // Retry up to 2 times on failure }); } @@ -50,8 +48,6 @@ export function useCreditStats() { console.log('Credit stats fetched:', result.data.data); return result.data.data; }, - staleTime: 30 * 1000, // 30 seconds - reasonable stale time - retry: 2, // Retry up to 2 times on failure }); }