diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 6d97736..4451d30 100644 --- a/src/components/layout/Header.tsx +++ b/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(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)!, () => { - window.location.reload(); + setLastPurchasedPack(pack); + + 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); + } + } }); }} /> + + {/* Модальное окно уведомления */} + setShowNotificationModal(false)} + onContinueClick={() => setShowNotificationModal(false)} + showGalleryButton={false} + continueButtonText="Закрыть" + /> ); }; diff --git a/src/screens/CreateSticker.tsx b/src/screens/CreateSticker.tsx index c0f3d71..82182b5 100644 --- a/src/screens/CreateSticker.tsx +++ b/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(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)!, () => { - window.location.reload(); + setLastPurchasedPack(pack); + + 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); + } + } }); }} /> + + {/* Модальное окно уведомления */} + setShowNotificationModal(false)} + onContinueClick={() => setShowNotificationModal(false)} + showGalleryButton={false} + continueButtonText="Закрыть" + /> ); }; diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx index dc05111..0dd32a4 100644 --- a/src/screens/Home.tsx +++ b/src/screens/Home.tsx @@ -53,6 +53,7 @@ const Home: React.FC = () => { const [lastGenerationData, setLastGenerationData] = useState({}); const [showTokensModal, setShowTokensModal] = useState(false); const [missingTokens, setMissingTokens] = useState(0); + const [lastPurchasedPack, setLastPurchasedPack] = useState(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)!, () => { - window.location.reload(); + setLastPurchasedPack(pack); + + 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); + } + } }); }} /> diff --git a/src/screens/Profile.tsx b/src/screens/Profile.tsx index f6e3c32..088e68b 100644 --- a/src/screens/Profile.tsx +++ b/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(0); const [packsCount, setPacksCount] = useState(0); const [loading, setLoading] = useState(true); + const [showPaymentSuccessModal, setShowPaymentSuccessModal] = useState(false); + const [lastPurchasedPack, setLastPurchasedPack] = useState(null); + const [userBalance, setUserBalance] = useState(0); useEffect(() => { - const fetchData = async () => { - 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(); + fetchUserData(); }, []); + 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 (
@@ -72,8 +97,8 @@ const Profile: React.FC = () => { Стикерпаков
- 0 - Избранных + {loading ? '...' : userBalance} + Токенов
@@ -81,6 +106,17 @@ const Profile: React.FC = () => { onBuyPack={handleBuyPack} className={styles.tokenPacks} /> + + {/* Модальное окно успешной оплаты */} + ); };