import { useCurrency } from '@/hooks/useCurrency'; import ClientLayout from '@/Layouts/ClientLayout'; import { parseServerDate } from '@/lib/date'; import { AppDetail, AppPlan, AppSubscription, PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { CheckCircle2, CreditCard, Sparkles, Zap } from 'lucide-react'; import { useState } from 'react'; import AppNav from './components/AppNav'; type Props = PageProps<{ app: AppDetail; plans: AppPlan[]; subscription: AppSubscription | null; }>; function statusLabel(status: string): string { const map: Record = { trialing: 'Trial', active: 'Active', past_due: 'Past due', suspended: 'Suspended', canceled: 'Canceled', }; return map[status] ?? status; } function statusColor(status: string): string { switch (status) { case 'trialing': return 'text-sky-600 bg-sky-50 border-sky-200 dark:text-sky-400 dark:bg-sky-900/20 dark:border-sky-700/30'; case 'active': return 'text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-900/20 dark:border-emerald-700/30'; case 'past_due': return 'text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-900/20 dark:border-amber-700/30'; default: return 'text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-900/20 dark:border-red-700/30'; } } const LIMIT_LABELS: [string, keyof NonNullable][] = [ ['Branches', 'maxBranches'], ['Staff users', 'maxStaffUsers'], ['Active borrowers', 'maxActiveBorrowers'], ['Active loans', 'maxActiveLoans'], ]; export default function Billing({ app, plans, subscription }: Props) { const [cycle, setCycle] = useState<'monthly' | 'yearly'>( (subscription?.billingCycle as 'monthly' | 'yearly') ?? 'monthly', ); const { format } = useCurrency(); function formatPrice(plan: AppPlan, c: 'monthly' | 'yearly'): string { const num = c === 'yearly' ? plan.priceYearly : plan.priceMonthly; if (num === 0) return 'Free'; return `${format(num)}/${c === 'yearly' ? 'yr' : 'mo'}`; } const { data, setData, post, processing } = useForm({ plan_id: subscription?.planId ?? plans[0]?.id ?? 0, billing_cycle: cycle, }); const currentPlanId = subscription?.planId; const isChanging = data.plan_id !== currentPlanId || data.billing_cycle !== subscription?.billingCycle; function submit(e: React.FormEvent) { e.preventDefault(); post(route('app.billing.update', { tenant: app.id })); } const trialDaysLeft = subscription?.trialEndsAt ? Math.max( 0, Math.ceil( (new Date(subscription.trialEndsAt).getTime() - Date.now()) / 86_400_000, ), ) : null; return (
{/* Current subscription summary */} {subscription && (

Current plan

{subscription.planName ?? '—'}

{statusLabel(subscription.status)}

Billing cycle

{subscription.billingCycle}

{subscription.status === 'trialing' ? 'Trial ends' : 'Next renewal'}

{subscription.status === 'trialing' && subscription.trialEndsAt ? parseServerDate( subscription.trialEndsAt, ).toLocaleDateString() : subscription.currentPeriodEnd ? parseServerDate( subscription.currentPeriodEnd, ).toLocaleDateString() : '—'}

{subscription.status === 'trialing' && trialDaysLeft !== null && ( {trialDaysLeft}d left )}
)} {/* Plan selector */}

{subscription ? 'Change plan' : 'Select a plan'}

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

No plans available. Contact support.

) : (
{plans.map((plan) => { const selected = data.plan_id === plan.id; const isCurrent = plan.id === currentPlanId; return ( ); })}
)} {plans.length > 0 && isChanging && (
)}
); }