"use client"; import { useState, useEffect, useMemo } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { Check, ArrowLeft } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { fetchSubscriptionPlans, SubscriptionPlan } from "@/lib/stripe"; import { DashboardLayout } from "@/components/layout/dashboard-layout"; export default function PricingPage() { return (
{/* Main Content */}
); } /**价格方案 */ function HomeModule5() { const [billingType, setBillingType] = useState<"month" | "year">("month"); const [plans, setPlans] = useState([]); const [loadingPlan, setLoadingPlan] = useState(null); // 跟踪哪个计划正在加载 // 从后端获取订阅计划数据 useEffect(() => { const loadPlans = async () => { try { const plansData = await fetchSubscriptionPlans(); setPlans(plansData); } catch (err) { console.error("加载订阅计划失败:", err); } }; loadPlans(); }, []); const pricingPlans = useMemo< { title: string; price: number; credits: string; buttonText: string; features: string[]; issubscribed: boolean; }[] >(() => { return plans.map((plan) => { return { title: plan.display_name || plan.name, price: billingType === "month" ? plan.price_month / 100 : plan.price_year / 100, credits: plan.description, buttonText: plan.is_free ? "Try For Free" : "Subscribe Now", issubscribed: plan.is_subscribed, features: plan.features || [], }; }); }, [plans, billingType]); const handleSubscribe = async (planName: string) => { setLoadingPlan(planName); // 设置加载状态 try { const { createCheckoutSession, redirectToCheckout } = await import( "@/lib/stripe" ); // 从localStorage获取当前用户信息 const User = JSON.parse(localStorage.getItem("currentUser") || "{}"); if (!User.id) { throw new Error("Unable to obtain user ID, please log in again"); } // 1. 创建Checkout Session const result = await createCheckoutSession({ user_id: String(User.id), plan_name: planName, billing_cycle: billingType, }); if (!result.successful || !result.data) { throw new Error("create checkout session failed"); } window.opener?.postMessage({ type: "waiting-payment", paymentType: "subscription" }, "*"); // 2. 直接跳转到Stripe托管页面（就这么简单！） window.location.href = result.data.checkout_url; } catch (error) { setLoadingPlan(null); // 出错时清除加载状态 throw new Error("create checkout session failed, please try again later"); } }; return (

Pick a plan and make it yours

{/* 计费切换 */}
{/* 主要价格卡片 */}
{pricingPlans.map((plan, index) => (

{plan.title}

${plan.price} / {billingType === "month" ? "month" : "year"}

{plan.credits}

{plan.issubscribed ? ( ) : ( )}

* Billed monthly until cancelled

    {plan.features.map((feature, featureIndex) => (
  • ✓ {feature}
    • ))}
))}
); }