130 lines
5.2 KiB
TypeScript
130 lines
5.2 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import styles from './CreateSticker.module.css';
|
||
import TokenPacksModal from '../components/tokens/TokenPacksModal';
|
||
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;
|
||
|
||
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 {
|
||
const userTokens = await apiService.getBalance(getCurrentUserId());
|
||
if (userTokens < TOKENS_PER_GENERATION) {
|
||
setMissingTokens(TOKENS_PER_GENERATION - userTokens);
|
||
setShowTokensModal(true);
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
} catch (error) {
|
||
console.error('Error checking balance:', error);
|
||
alert('Произошла ошибка при проверке баланса. Попробуйте позже.');
|
||
return false;
|
||
}
|
||
};
|
||
|
||
const handleUploadClick = async () => {
|
||
const canProceed = await checkTokensAndProceed();
|
||
if (canProceed) {
|
||
// Здесь будет логика загрузки фото
|
||
console.log('Загрузка фото...');
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
<div className={styles.header}>
|
||
<h1 className={styles.title}>
|
||
Создание стикера
|
||
</h1>
|
||
<p className={styles.subtitle}>
|
||
Загрузите фотографию для создания стикера
|
||
</p>
|
||
</div>
|
||
|
||
<div
|
||
className={styles.uploadArea}
|
||
onClick={handleUploadClick}
|
||
>
|
||
<div className={styles.uploadBox}>
|
||
<span className={styles.uploadIcon}>📷</span>
|
||
<span className={styles.uploadText}>
|
||
Нажмите чтобы выбрать фото
|
||
</span>
|
||
<span className={styles.uploadHint}>
|
||
или перетащите файл сюда
|
||
</span>
|
||
<span className={styles.tokenCost}>
|
||
Стоимость: {TOKENS_PER_GENERATION} токенов
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<TokenPacksModal
|
||
isVisible={showTokensModal}
|
||
onClose={() => setShowTokensModal(false)}
|
||
onShowAllPacks={() => navigate('/profile')}
|
||
missingTokens={missingTokens}
|
||
onBuyPack={(packId: string) => {
|
||
const pack = tokenPacks.find(p => p.id === packId);
|
||
if (!pack) return;
|
||
|
||
setShowTokensModal(false);
|
||
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>
|
||
);
|
||
};
|
||
|
||
export default CreateSticker;
|