аменена перезагрузка страницы на модальное окно после успешной оплаты токенов

src/components/layout/Header.tsx

@@ -6,6 +6,7 @@ import apiService from '../../services/api';
 import TokenPacksModal from '../tokens/TokenPacksModal';
 import { paymentService } from '../../services/paymentService';
 import { tokenPacks } from '../../constants/tokenPacks';
+import NotificationModal from '../shared/NotificationModal';
 import styles from './Header.module.css';
 
 const Header: React.FC = () => {
@@ -17,6 +18,10 @@ const Header: React.FC = () => {
     balance: 0
   });
   const [showTokensModal, setShowTokensModal] = useState(false);
+  const [lastPurchasedPack, setLastPurchasedPack] = useState<any>(null);
+  const [showNotificationModal, setShowNotificationModal] = useState(false);
+  const [notificationTitle, setNotificationTitle] = useState('');
+  const [notificationMessage, setNotificationMessage] = useState('');
   
   useEffect(() => {
     // Получаем информацию о пользователе
@@ -97,12 +102,60 @@ const Header: React.FC = () => {
         onShowAllPacks={() => navigate('/profile')}
         missingTokens={0}
         onBuyPack={(packId) => {
+          const pack = tokenPacks.find(p => p.id === packId);
+          if (!pack) return;
+          
           setShowTokensModal(false);
-          paymentService.showBuyTokensPopup(tokenPacks.find(p => p.id === packId)!, () => {
+          setLastPurchasedPack(pack);
-            window.location.reload();
+          
+          paymentService.showBuyTokensPopup(pack, async (userData) => {
+            if (userData) {
+              // Обновляем данные на основе полученной информации
+              if (userData.balance !== undefined) {
+                setUser(prev => ({
+                  ...prev,
+                  balance: userData.balance
+                }));
+              }
+              
+              // Показываем модальное окно с информацией об успешной оплате
+              setNotificationTitle('Оплата успешна!');
+              setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов.`);
+              setShowNotificationModal(true);
+            } else {
+              // Если данные не получены, делаем запрос на получение данных пользователя
+              try {
+                // Получаем баланс пользователя
+                const balance = await apiService.getBalance(getCurrentUserId());
+                
+                // Обновляем баланс пользователя
+                setUser(prev => ({
+                  ...prev,
+                  balance: balance
+                }));
+                
+                // Показываем модальное окно с информацией об успешной оплате
+                setNotificationTitle('Оплата успешна!');
+                setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов. Ваш текущий баланс: ${balance} токенов.`);
+                setShowNotificationModal(true);
+              } catch (error) {
+                console.error('Ошибка при обновлении данных пользователя:', error);
+              }
+            }
           });
         }}
       />
+      
+      {/* Модальное окно уведомления */}
+      <NotificationModal
+        isVisible={showNotificationModal}
+        title={notificationTitle}
+        message={notificationMessage}
+        onGalleryClick={() => setShowNotificationModal(false)}
+        onContinueClick={() => setShowNotificationModal(false)}
+        showGalleryButton={false}
+        continueButtonText="Закрыть"
+      />
     </header>
   );
 };

src/screens/CreateSticker.tsx

@@ -6,6 +6,7 @@ import { tokenPacks } from '../constants/tokenPacks';
 import { paymentService } from '../services/paymentService';
 import apiService from '../services/api';
 import { getCurrentUserId } from '../constants/user';
+import NotificationModal from '../components/shared/NotificationModal';
 
 const TOKENS_PER_GENERATION = 10;
 
@@ -13,6 +14,12 @@ const CreateSticker: React.FC = () => {
   const navigate = useNavigate();
   const [showTokensModal, setShowTokensModal] = useState(false);
   const [missingTokens, setMissingTokens] = useState(0);
+  const [lastPurchasedPack, setLastPurchasedPack] = useState<any>(null);
+  
+  // Состояния для модального окна уведомления
+  const [showNotificationModal, setShowNotificationModal] = useState(false);
+  const [notificationTitle, setNotificationTitle] = useState('');
+  const [notificationMessage, setNotificationMessage] = useState('');
 
   const checkTokensAndProceed = async () => {
     try {
@@ -74,12 +81,47 @@ const CreateSticker: React.FC = () => {
         onShowAllPacks={() => navigate('/profile')}
         missingTokens={missingTokens}
         onBuyPack={(packId: string) => {
+          const pack = tokenPacks.find(p => p.id === packId);
+          if (!pack) return;
+          
           setShowTokensModal(false);
-          paymentService.showBuyTokensPopup(tokenPacks.find(p => p.id === packId)!, () => {
+          setLastPurchasedPack(pack);
-            window.location.reload();
+          
+          paymentService.showBuyTokensPopup(pack, async (userData) => {
+            if (userData) {
+              // Обновляем данные на основе полученной информации
+              // Показываем модальное окно с информацией об успешной оплате
+              setNotificationTitle('Оплата успешна!');
+              setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов.`);
+              setShowNotificationModal(true);
+            } else {
+              // Если данные не получены, делаем запрос на получение данных пользователя
+              try {
+                // Получаем баланс пользователя
+                const balance = await apiService.getBalance(getCurrentUserId());
+                
+                // Показываем модальное окно с информацией об успешной оплате
+                setNotificationTitle('Оплата успешна!');
+                setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов. Ваш текущий баланс: ${balance} токенов.`);
+                setShowNotificationModal(true);
+              } catch (error) {
+                console.error('Ошибка при обновлении данных пользователя:', error);
+              }
+            }
           });
         }}
       />
+      
+      {/* Модальное окно уведомления */}
+      <NotificationModal
+        isVisible={showNotificationModal}
+        title={notificationTitle}
+        message={notificationMessage}
+        onGalleryClick={() => setShowNotificationModal(false)}
+        onContinueClick={() => setShowNotificationModal(false)}
+        showGalleryButton={false}
+        continueButtonText="Закрыть"
+      />
     </div>
   );
 };

src/screens/Home.tsx

@@ -53,6 +53,7 @@ const Home: React.FC = () => {
   const [lastGenerationData, setLastGenerationData] = useState<LastGenerationData>({});
   const [showTokensModal, setShowTokensModal] = useState(false);
   const [missingTokens, setMissingTokens] = useState(0);
+  const [lastPurchasedPack, setLastPurchasedPack] = useState<any>(null);
   
   // Обработчики для модального окна
   const handleGalleryClick = useCallback(() => {
@@ -376,9 +377,41 @@ const Home: React.FC = () => {
           onShowAllPacks={() => navigate('/profile')}
           missingTokens={missingTokens}
           onBuyPack={(packId: string) => {
+            const pack = tokenPacks.find(p => p.id === packId);
+            if (!pack) return;
+            
             setShowTokensModal(false);
-            paymentService.showBuyTokensPopup(tokenPacks.find(p => p.id === packId)!, () => {
+            setLastPurchasedPack(pack);
-              window.location.reload();
+            
+            paymentService.showBuyTokensPopup(pack, async (userData) => {
+              if (userData) {
+                // Обновляем данные на основе полученной информации
+                // Показываем модальное окно с информацией об успешной оплате
+                setNotificationTitle('Оплата успешна!');
+                setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов.`);
+                setIsLoading(false);
+                setShowGalleryButton(false);
+                setShowButtons(true);
+                setContinueButtonText('Закрыть');
+                setIsNotificationVisible(true);
+              } else {
+                // Если данные не получены, делаем запрос на получение данных пользователя
+                try {
+                  // Получаем баланс пользователя
+                  const balance = await apiService.getBalance(getCurrentUserId());
+                  
+                  // Показываем модальное окно с информацией об успешной оплате
+                  setNotificationTitle('Оплата успешна!');
+                  setNotificationMessage(`Вы успешно приобрели ${pack.tokens + pack.bonusTokens} токенов. Ваш текущий баланс: ${balance} токенов.`);
+                  setIsLoading(false);
+                  setShowGalleryButton(false);
+                  setShowButtons(true);
+                  setContinueButtonText('Закрыть');
+                  setIsNotificationVisible(true);
+                } catch (error) {
+                  console.error('Ошибка при обновлении данных пользователя:', error);
+                }
+              }
             });
           }}
         />

src/screens/Profile.tsx

@@ -4,41 +4,51 @@ import { stickerService } from '../services/stickerService';
 import apiService from '../services/api';
 import { getCurrentUserId } from '../constants/user';
 import TokenPacksList from '../components/tokens/TokenPacksList';
-import { tokenPacks } from '../constants/tokenPacks';
+import { tokenPacks, TokenPack } from '../constants/tokenPacks';
 import { paymentService } from '../services/paymentService';
+import NotificationModal from '../components/shared/NotificationModal';
 
 const Profile: React.FC = () => {
   const [stickersCount, setStickersCount] = useState<number>(0);
   const [packsCount, setPacksCount] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(true);
+  const [showPaymentSuccessModal, setShowPaymentSuccessModal] = useState<boolean>(false);
+  const [lastPurchasedPack, setLastPurchasedPack] = useState<TokenPack | null>(null);
+  const [userBalance, setUserBalance] = useState<number>(0);
 
   useEffect(() => {
-    const fetchData = async () => {
+    fetchUserData();
-      try {
-        setLoading(true);
-        
-        // Получаем список стикерпаков
-        const stickerPacks = await stickerService.getUserStickerPacks(getCurrentUserId().toString());
-        setPacksCount(stickerPacks.length);
-        
-        // Получаем список созданных стикеров
-        const generatedImages = await apiService.getGeneratedImages();
-        setStickersCount(generatedImages.length);
-      } catch (error) {
-        console.error('Ошибка при загрузке данных профиля:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
   }, []);
 
+  const fetchUserData = async () => {
+    try {
+      setLoading(true);
+      
+      // Получаем список стикерпаков
+      const stickerPacks = await stickerService.getUserStickerPacks(getCurrentUserId().toString());
+      setPacksCount(stickerPacks.length);
+      
+      // Получаем список созданных стикеров
+      const generatedImages = await apiService.getGeneratedImages();
+      setStickersCount(generatedImages.length);
+
+      // Получаем баланс пользователя
+      const balance = await apiService.getBalance();
+      setUserBalance(balance);
+    } catch (error) {
+      console.error('Ошибка при загрузке данных профиля:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const handleBuyPack = (packId: string) => {
     const pack = tokenPacks.find(p => p.id === packId);
     if (!pack) return;
 
-    paymentService.showBuyTokensPopup(pack, (userData) => {
+    setLastPurchasedPack(pack);
+
+    paymentService.showBuyTokensPopup(pack, async (userData) => {
       if (userData) {
         // Обновляем данные на основе полученной информации
         if (userData.stickers_count !== undefined) {
@@ -47,14 +57,29 @@ const Profile: React.FC = () => {
         if (userData.packs_count !== undefined) {
           setPacksCount(userData.packs_count);
         }
-        // Можно также обновить другие данные, если они есть в ответе
+        if (userData.balance !== undefined) {
+          setUserBalance(userData.balance);
+        }
+        
+        // Показываем модальное окно с информацией об успешной оплате
+        setShowPaymentSuccessModal(true);
       } else {
-        // Если данные не получены, просто перезагружаем страницу
+        // Если данные не получены, делаем запрос на получение данных пользователя
-        window.location.reload();
+        try {
+          await fetchUserData();
+          // Показываем модальное окно с информацией об успешной оплате
+          setShowPaymentSuccessModal(true);
+        } catch (error) {
+          console.error('Ошибка при обновлении данных пользователя:', error);
+        }
       }
     });
   };
 
+  const handleClosePaymentSuccessModal = () => {
+    setShowPaymentSuccessModal(false);
+  };
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -72,8 +97,8 @@ const Profile: React.FC = () => {
           <span className={styles.statLabel}>Стикерпаков</span>
         </div>
         <div className={styles.statItem}>
-          <span className={styles.statValue}>0</span>
+          <span className={styles.statValue}>{loading ? '...' : userBalance}</span>
-          <span className={styles.statLabel}>Избранных</span>
+          <span className={styles.statLabel}>Токенов</span>
         </div>
       </div>
 
@@ -81,6 +106,17 @@ const Profile: React.FC = () => {
         onBuyPack={handleBuyPack}
         className={styles.tokenPacks}
       />
+
+      {/* Модальное окно успешной оплаты */}
+      <NotificationModal
+        isVisible={showPaymentSuccessModal}
+        title="Оплата успешна!"
+        message={lastPurchasedPack ? `Вы успешно приобрели ${lastPurchasedPack.tokens + lastPurchasedPack.bonusTokens} токенов. Ваш текущий баланс: ${userBalance} токенов.` : "Оплата прошла успешно!"}
+        onGalleryClick={handleClosePaymentSuccessModal}
+        onContinueClick={handleClosePaymentSuccessModal}
+        showGalleryButton={false}
+        continueButtonText="Закрыть"
+      />
     </div>
   );
 };