import { useCurrency } from '@/hooks/useCurrency'; import ClientLayout from '@/Layouts/ClientLayout'; import { PageProps, PlanOption } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { CheckCircle2, CreditCard, Sparkles } from 'lucide-react'; import { useState } from 'react'; import SetupStepper from './components/SetupStepper'; type Props = PageProps<{ tenant: { id: string; name: string }; plans: PlanOption[]; currentPlanId: number | null; }>; export default function Plan({ tenant, plans, currentPlanId }: Props) { const [cycle, setCycle] = useState<'monthly' | 'yearly'>('monthly'); const { format } = useCurrency(); function formatPrice(plan: PlanOption, c: 'monthly' | 'yearly'): string { const price = c === 'yearly' ? plan.price_yearly : plan.price_monthly; const num = parseFloat(price); if (num === 0) return 'Free'; return `${format(num)}/${c === 'yearly' ? 'yr' : 'mo'}`; } const { data, setData, post, processing, errors } = useForm({ plan_id: currentPlanId ?? plans[0]?.id ?? 0, billing_cycle: cycle, }); function submit(e: React.FormEvent) { e.preventDefault(); post(route('setup.plan.store', { tenant: tenant.id })); } return (

Select a plan for {tenant.name}

Every plan starts with a free trial. No credit card required.

{/* Billing cycle toggle */}
{(['monthly', 'yearly'] as const).map((c) => ( ))}
{/* Plan cards */} {plans.length === 0 ? (

No plans available yet. Contact support.

) : (
{plans.map((plan) => { const selected = data.plan_id === plan.id; return ( ); })}
)} {errors.plan_id && (

{errors.plan_id}

)}
← Back
); }