Merge pull request #117 from BEDOLAGA-DEV/dev

Dev

src/locales/en.json

@@ -477,6 +477,10 @@
       "selectMethod": "Select a method",
       "enterAmount": "Enter an amount",
       "amountRange": "Amount: {{min}} – {{max}} ₽"
+    },
+    "paymentSuccess": {
+      "title": "Payment Successful",
+      "message": "Your balance has been topped up successfully. The funds are now available."
     }
   },
   "referral": {

src/locales/fa.json

@@ -403,7 +403,11 @@
     "missing": "کمبود",
     "noPaymentMethods": "روش پرداخت در دسترس نیست",
     "selectPaymentMethod": "روش پرداخت را انتخاب کنید",
-    "topUpToComplete": "برای تکمیل خرید شارژ کنید"
+    "topUpToComplete": "برای تکمیل خرید شارژ کنید",
+    "paymentSuccess": {
+      "title": "پرداخت موفق",
+      "message": "موجودی شما با موفقیت شارژ شد. وجوه اکنون در دسترس است."
+    }
   },
   "referral": {
     "title": "برنامه معرفی",

src/locales/ru.json

@@ -499,6 +499,10 @@
       "selectMethod": "Выберите способ",
       "enterAmount": "Введите сумму",
       "amountRange": "Сумма: {{min}} – {{max}} ₽"
+    },
+    "paymentSuccess": {
+      "title": "Оплата прошла успешно",
+      "message": "Ваш баланс успешно пополнен. Средства уже доступны."
     }
   },
   "referral": {

src/locales/zh.json

@@ -403,7 +403,11 @@
     "missing": "缺少",
     "noPaymentMethods": "支付方式不可用",
     "selectPaymentMethod": "选择支付方式",
-    "topUpToComplete": "充值以完成购买"
+    "topUpToComplete": "充值以完成购买",
+    "paymentSuccess": {
+      "title": "支付成功",
+      "message": "您的余额已成功充值，资金现已可用。"
+    }
   },
   "referral": {
     "title": "推荐计划",

src/pages/Balance.tsx

@@ -1,10 +1,12 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/auth';
 import { balanceApi } from '../api/balance';
 import TopUpModal from '../components/TopUpModal';
 import { useCurrency } from '../hooks/useCurrency';
+import { useToast } from '../components/Toast';
 import type { PaymentMethod, PaginatedResponse, Transaction } from '../types';
 
 export default function Balance() {
@@ -12,6 +14,10 @@ export default function Balance() {
   const { refreshUser } = useAuthStore();
   const queryClient = useQueryClient();
   const { formatAmount, currencySymbol } = useCurrency();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { showToast } = useToast();
+  const paymentHandledRef = useRef(false);
 
   // Fetch balance directly from API with no caching
   const { data: balanceData, refetch: refetchBalance } = useQuery({
@@ -26,6 +32,41 @@ export default function Balance() {
     refreshUser();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // Handle payment return from payment gateway
+  useEffect(() => {
+    // Prevent duplicate handling in StrictMode
+    if (paymentHandledRef.current) return;
+
+    const paymentStatus = searchParams.get('payment') || searchParams.get('status');
+    const isSuccess =
+      paymentStatus === 'success' ||
+      paymentStatus === 'paid' ||
+      paymentStatus === 'completed' ||
+      searchParams.get('success') === 'true';
+
+    if (isSuccess) {
+      paymentHandledRef.current = true;
+
+      // Refetch balance and user data
+      refetchBalance();
+      refreshUser();
+      queryClient.invalidateQueries({ queryKey: ['transactions'] });
+      // Also invalidate subscription in case auto-activation happened
+      queryClient.invalidateQueries({ queryKey: ['subscription'] });
+
+      // Show success toast
+      showToast({
+        type: 'success',
+        title: t('balance.paymentSuccess.title'),
+        message: t('balance.paymentSuccess.message'),
+        duration: 6000,
+      });
+
+      // Clean URL from query params
+      navigate('/balance', { replace: true });
+    }
+  }, [searchParams, navigate, refetchBalance, refreshUser, queryClient, showToast, t]);
   const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(null);
   const [promocode, setPromocode] = useState('');
   const [promocodeLoading, setPromocodeLoading] = useState(false);