import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog'; import { useState, useEffect } from 'react'; import { useAuth } from '~/hooks/useAuth'; import { toast } from 'react-toastify'; interface SubscriptionDialogProps { isOpen: boolean; onClose: () => void; } interface SubscriptionPlan { _id: number; name: string; tokens: number; price: number; description: string; save_percentage?: number; } interface UserSubscription { plan: SubscriptionPlan; tokensLeft: number; nextReloadDate: string; } export function SubscriptionDialog({ isOpen, onClose }: SubscriptionDialogProps) { const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly'); const [subscriptionPlans, setSubscriptionPlans] = useState([]); const [userSubscription, setUserSubscription] = useState(null); const [isLoading, setIsLoading] = useState(true); const { user } = useAuth(); useEffect(() => { if (isOpen && user) { fetchSubscriptionData(); } }, [isOpen, user]); const fetchSubscriptionData = async () => { setIsLoading(true); try { const [plansResponse, userSubResponse] = await Promise.all([ fetch('/api/subscription-plans'), fetch('/api/user-subscription') ]); const plans = await plansResponse.json(); const userSub = await userSubResponse.json(); setSubscriptionPlans(plans); setUserSubscription(userSub); } catch (error) { console.error('Error fetching subscription data:', error); toast.error('获取订阅信息失败,请稍后重试。'); } finally { setIsLoading(false); } }; const handlePurchase = async (planId: number) => { try { const response = await fetch('/api/purchase-subscription', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ planId, billingCycle, }), }); const result = await response.json(); if (response.ok) { toast.success('订阅购买成功!'); fetchSubscriptionData(); // 刷新订阅信息 } else { toast.error(result.message || '购买失败,请稍后重试。'); } } catch (error) { console.error('Error purchasing subscription:', error); toast.error('购买过程中出现错误,请稍后重试。'); } }; if (!user || isLoading) return null; return ( ); }