аменена перезагрузка страницы на модальное окно после успешной оплаты токенов
This commit is contained in:
kazachilo
parent
c1d4a2862b
commit
d40aae12cf
@ -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)!, () => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Модальное окно уведомления */}
|
||||
<NotificationModal
|
||||
isVisible={showNotificationModal}
|
||||
title={notificationTitle}
|
||||
message={notificationMessage}
|
||||
onGalleryClick={() => setShowNotificationModal(false)}
|
||||
onContinueClick={() => setShowNotificationModal(false)}
|
||||
showGalleryButton={false}
|
||||
continueButtonText="Закрыть"
|
||||
/>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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)!, () => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Модальное окно уведомления */}
|
||||
<NotificationModal
|
||||
isVisible={showNotificationModal}
|
||||
title={notificationTitle}
|
||||
message={notificationMessage}
|
||||
onGalleryClick={() => setShowNotificationModal(false)}
|
||||
onContinueClick={() => setShowNotificationModal(false)}
|
||||
showGalleryButton={false}
|
||||
continueButtonText="Закрыть"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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)!, () => {
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -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 () => {
|
||||
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 (
|
||||
<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.statLabel}>Избранных</span>
|
||||
<span className={styles.statValue}>{loading ? '...' : userBalance}</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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user