Plan Selector

1'use client';
2
3import { useState } from 'react';
4import { PlanSelector } from '@/components/ui/billing-summary-card';
5import { useRouter } from 'next/navigation';
6
7const plans = [
8  {
9    id: 'starter',
10    name: 'Starter',
11    price: 9,
12    interval: 'month' as const,
13    description: 'For individuals',
14    features: ['1,000 credits/month', '5 projects', 'Email support'],
15  },
16  {
17    id: 'pro',
18    name: 'Pro',
19    price: 29,
20    interval: 'month' as const,
21    description: 'For growing teams',
22    features: ['10,000 credits/month', 'Unlimited projects', 'Priority support'],
23    popular: true,
24  },
25];
26
27export default function UpgradePage() {
28  const router = useRouter();
29  const [selectedPlan, setSelectedPlan] = useState('pro');
30  const [loading, setLoading] = useState(false);
31
32  const handleSelectPlan = async (planId: string) => {
33    setSelectedPlan(planId);
34    setLoading(true);
35
36    // Create Stripe checkout session
37    const res = await fetch('/api/stripe/checkout', {
38      method: 'POST',
39      headers: { 'Content-Type': 'application/json' },
40      body: JSON.stringify({ priceId: planId }),
41    });
42
43    const { url } = await res.json();
44    router.push(url); // Redirect to Stripe
45  };
46
47  return (
48    <PlanSelector
49      plans={plans}
50      selectedPlanId={selectedPlan}
51      onSelectPlan={handleSelectPlan}
52    />
53  );
54}

1const plans = [
2  { id: 'free', name: 'Free', price: 0, interval: 'month',
3    features: ['100 credits/month'], current: true },
4  { id: 'starter', name: 'Starter', price: 9, interval: 'month',
5    features: ['1,000 credits/month'] },
6  { id: 'pro', name: 'Pro', price: 29, interval: 'month',
7    features: ['10,000 credits/month'], popular: true },
8];
9
10<PlanSelector plans={plans} onSelectPlan={handleUpgrade} />

1interface PlanOption {
2  id: string;              // Unique plan ID
3  name: string;            // Display name
4  price: number;           // Monthly price in dollars
5  interval: "month" | "year";
6  description?: string;    // Short description
7  features: string[];      // Feature list
8  popular?: boolean;       // Shows "POPULAR" badge
9  current?: boolean;       // Shows "CURRENT" badge, disables button
10}

1'use client';
2
3import { useEffect, useState } from 'react';
4import { PlanSelector } from '@/components/ui/billing-summary-card';
5
6export function PricingPage() {
7  const [plans, setPlans] = useState([]);
8  const [currentPlan, setCurrentPlan] = useState(null);
9
10  useEffect(() => {
11    // Fetch available plans
12    fetch('/api/billing/plans')
13      .then(r => r.json())
14      .then(data => {
15        setPlans(data.plans);
16        setCurrentPlan(data.currentPlanId);
17      });
18  }, []);
19
20  return (
21    <PlanSelector
22      plans={plans}
23      selectedPlanId={currentPlan}
24      onSelectPlan={(id) => handleUpgrade(id)}
25    />
26  );
27}