import React, { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
const mockItems = [
{ id: 1, name: "Фитнес-резинка", cost: 50 },
{ id: 2, name: "Футболка GOGYM", cost: 150 },
{ id: 3, name: "Абонемент на массаж", cost: 300 },
];
export default function Store() {
const [bonus, setBonus] = useState(0);
const [userId, setUserId] = useState(null);
const [isTelegram, setIsTelegram] = useState(false);
useEffect(() => {
if (typeof window !== 'undefined' && window.Telegram && window.Telegram.WebApp) {
const tg = window.Telegram.WebApp;
setIsTelegram(true);
if (tg.initDataUnsafe?.user?.id) {
setUserId(tg.initDataUnsafe.user.id);
}
tg.ready();
tg.expand();
}
}, []);
useEffect(() => {
if (!userId) return;
fetch(`/api/bonus/${userId}`)
.then(res => res.json())
.then(data => setBonus(data.bonus))
.catch(() => setBonus(0));
}, [userId]);
const handlePurchase = (item) => {
if (bonus < item.cost) {
alert("Недостаточно G-бонусов");
return;
}
fetch(`/api/purchase`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userId, itemId: item.id }),
})
.then(res => res.json())
.then(data => {
alert(`Вы приобрели: ${item.name}`);
setBonus(data.newBonus);
})
.catch(() => alert("Ошибка при покупке"));
};
if (!isTelegram) {
return
⛔️ Это приложение работает только внутри Telegram WebApp
;
}
return (
???? Магазин G-бонусов
Ваш баланс: {bonus} ⚡️
{mockItems.map(item => (
{item.name}
{item.cost} G-бонусов
))}
);
}