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-бонусов

))}
); }