"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"; import { trackEvent, trackPageView, trackPayment } from "@/utils/analytics"; export default function PricingPage() { // 页面访问跟踪 useEffect(() => { trackPageView('/pricing', 'Pricing Plans'); }, []); return (

{/* Main Content */}

); } /**价格方案 */ function HomeModule5() { const [billingType, setBillingType] = useState<"month" | "year">("year"); const [plans, setPlans] = useState([]); const [loadingPlan, setLoadingPlan] = useState(null); // 跟踪哪个计划正在加载 // 监听支付完成消息 useEffect(() => { const handlePaymentResult = (ev: MessageEvent) => { if (ev.data.type === 'payment-result') { // 支付完成后清除loading状态 setLoadingPlan(null); } }; window.addEventListener('message', handlePaymentResult); return () => window.removeEventListener('message', handlePaymentResult); }, []); // 从后端获取订阅计划数据 useEffect(() => { const loadPlans = async () => { try { const plansData = await fetchSubscriptionPlans(); setPlans(plansData); } catch (err) { console.error("加载订阅计划失败:", err); } }; loadPlans(); }, []); const pricingPlans = useMemo< { title: string; price: number; originalPrice: number; monthlyPrice: number; discountMsg: string; 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, originalPrice: plan.price_month / 100, monthlyPrice: billingType === "month" ? 0 : Math.round(plan.price_year / 12) / 100, discountMsg: `Saves $${(plan.price_month * 12 - plan.price_year) / 100} by billing yearly!`, 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); // 跟踪订阅按钮点击事件 trackEvent('subscription_button_click', { event_category: 'subscription', event_label: planName, custom_parameters: { plan_name: planName, billing_type: billingType, }, }); // 改为直接携带参数打开 pay-redirect，由其内部完成创建与跳转 const url = `/pay-redirect?type=subscription&plan=${encodeURIComponent(planName)}&billing=${encodeURIComponent(billingType)}`; const win = window.open(url, '_blank'); // 通知当前窗口等待支付（显示loading模态框） window.postMessage({ type: 'waiting-payment', paymentType: 'subscription', }, '*'); if (!win) { setLoadingPlan(null); throw new Error('Unable to open redirect window, please check popup settings'); } }; return (

Pick a plan and make it yours

{/* 计费切换 */}

{/* 主要价格卡片 */}

{pricingPlans.map((plan, index) => (

{plan.title}

${plan.monthlyPrice || plan.price} / month

{plan.originalPrice !== plan.price ? (

${plan.originalPrice}

) : null}

{plan.credits}

{plan.issubscribed ? ( ) : ( )}

* {plan.discountMsg}

✓ {feature}

))}

); }