feat: add plan summary component for checkout page

2026-03-26 21:25:51 +01:00
parent 6ea520e0ed
commit 837f440107
1 changed files with 125 additions and 0 deletions
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Check } from '@phosphor-icons/react'
+import {
+  TRAFFIC_TIERS,
+  getSitesLimitForPlan,
+  getMaxRetentionMonthsForPlan,
+  PLAN_PRICES,
+} from '@/lib/plans'
+
+interface PlanSummaryProps {
+  plan: string
+  interval: string
+  limit: number
+}
+
+export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [currentInterval, setCurrentInterval] = useState(interval)
+
+  const monthlyCents = PLAN_PRICES[plan]?.[limit] || 0
+  const isYearly = currentInterval === 'year'
+  const displayPrice = isYearly ? (monthlyCents * 11) / 100 : monthlyCents / 100
+  const monthlyEquivalent = isYearly ? displayPrice / 12 : displayPrice
+
+  const tierLabel =
+    TRAFFIC_TIERS.find((t) => t.value === limit)?.label ||
+    `${(limit / 1000).toFixed(0)}k`
+  const sitesLimit = getSitesLimitForPlan(plan)
+  const retentionMonths = getMaxRetentionMonthsForPlan(plan)
+  const retentionLabel =
+    retentionMonths >= 12
+      ? `${retentionMonths / 12} year${retentionMonths > 12 ? 's' : ''}`
+      : `${retentionMonths} months`
+
+  const handleIntervalToggle = (newInterval: string) => {
+    setCurrentInterval(newInterval)
+    const params = new URLSearchParams(searchParams.toString())
+    params.set('interval', newInterval)
+    router.replace(`/checkout?${params.toString()}`, { scroll: false })
+  }
+
+  const features = [
+    `${tierLabel} pageviews/mo`,
+    `${sitesLimit} site${sitesLimit && sitesLimit > 1 ? 's' : ''}`,
+    `${retentionLabel} data retention`,
+    'Unlimited team members',
+    'Custom events & goals',
+    'Funnels & user journeys',
+  ]
+
+  return (
+    <div className="rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-xl p-6">
+      {/* Plan header */}
+      <div className="flex items-center gap-3 mb-6">
+        <h2 className="text-xl font-semibold text-white capitalize">{plan}</h2>
+        <span className="rounded-full bg-orange-500/15 px-3 py-0.5 text-xs font-medium text-orange-400">
+          30-day trial
+        </span>
+      </div>
+
+      {/* Price display */}
+      <div className="mb-6">
+        <div className="flex items-baseline gap-1">
+          <span className="text-4xl font-bold tracking-tight text-white">
+            &euro;{isYearly ? monthlyEquivalent.toFixed(2) : displayPrice.toFixed(0)}
+          </span>
+          <span className="text-neutral-400 text-sm">/mo</span>
+        </div>
+        {isYearly && (
+          <div className="mt-1.5 flex items-center gap-2">
+            <span className="text-sm text-neutral-400">
+              &euro;{displayPrice.toFixed(2)} billed yearly
+            </span>
+            <span className="rounded-full bg-orange-500/15 px-2.5 py-0.5 text-xs font-medium text-orange-400">
+              Save 1 month
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Interval toggle */}
+      <div className="mb-6 flex rounded-lg bg-neutral-800/60 p-1">
+        <button
+          type="button"
+          onClick={() => handleIntervalToggle('month')}
+          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            currentInterval === 'month'
+              ? 'bg-neutral-700 text-white shadow-sm'
+              : 'text-neutral-400 hover:text-neutral-200'
+          }`}
+        >
+          Monthly
+        </button>
+        <button
+          type="button"
+          onClick={() => handleIntervalToggle('year')}
+          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
+            currentInterval === 'year'
+              ? 'bg-neutral-700 text-white shadow-sm'
+              : 'text-neutral-400 hover:text-neutral-200'
+          }`}
+        >
+          Yearly
+        </button>
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-neutral-800 mb-6" />
+
+      {/* Features list */}
+      <ul className="space-y-3">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center gap-3 text-sm text-neutral-300">
+            <Check weight="bold" className="h-4 w-4 shrink-0 text-orange-400" />
+            {feature}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}