feat(01-06): add plan card component and switch action

- Create switchPlan server action for plan changes - Create getCurrentPlan utility function - Build PlanCard component with feature display - Handle plan switching with loading state - Revalidate dashboard and subscription pages on change
2026-01-31 13:42:45 +01:00
parent 7bdc6d3d0a
commit 8789f26b36
2 changed files with 198 additions and 0 deletions
--- a/src/components/subscription/plan-card.tsx
+++ b/src/components/subscription/plan-card.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import { Plan, PlanFeatures } from '@/types/database'
+import { formatFeatureValue, formatPrice, FEATURE_LABELS, getPlanBadgeColor } from '@/lib/plans'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { switchPlan } from '@/app/actions/subscription'
+import { useTransition } from 'react'
+import { useRouter } from 'next/navigation'
+
+interface PlanCardProps {
+  plan: Plan
+  isCurrentPlan: boolean
+  onPlanChange?: () => void
+}
+
+export function PlanCard({ plan, isCurrentPlan, onPlanChange }: PlanCardProps) {
+  const [isPending, startTransition] = useTransition()
+  const router = useRouter()
+
+  const features = plan.features as PlanFeatures
+
+  function handleSwitchPlan() {
+    startTransition(async () => {
+      const result = await switchPlan(plan.id)
+      if (result.success) {
+        router.refresh()
+        if (onPlanChange) {
+          onPlanChange()
+        }
+      }
+    })
+  }
+
+  // Highlight features to show
+  const displayFeatures: (keyof PlanFeatures)[] = [
+    'posts_per_month',
+    'social_accounts',
+    'ai_models',
+    'image_generation',
+    'automation',
+  ]
+
+  return (
+    <Card className={`relative ${isCurrentPlan ? 'ring-2 ring-blue-500' : ''}`}>
+      {isCurrentPlan && (
+        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
+          <span className="bg-blue-500 text-white text-xs font-medium px-3 py-1 rounded-full">
+            Piano attuale
+          </span>
+        </div>
+      )}
+
+      <CardHeader className="text-center pt-8">
+        <div className="mb-2">
+          <span className={`inline-block px-3 py-1 text-xs font-medium rounded-full border ${getPlanBadgeColor(plan.name)}`}>
+            {plan.display_name_it}
+          </span>
+        </div>
+        <CardTitle className="text-3xl">
+          {formatPrice(plan.price_monthly)}
+        </CardTitle>
+        <CardDescription>
+          {plan.name === 'free' && 'Perfetto per iniziare'}
+          {plan.name === 'creator' && 'Per creator seri'}
+          {plan.name === 'pro' && 'Per professionisti'}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <ul className="space-y-3">
+          {displayFeatures.map((featureKey) => {
+            const value = features[featureKey]
+            const isIncluded = value !== false
+
+            return (
+              <li key={featureKey} className="flex items-center gap-2">
+                <span className={`w-5 h-5 rounded-full flex items-center justify-center text-xs ${
+                  isIncluded ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-gray-400'
+                }`}>
+                  {isIncluded ? '\u2713' : '\u2014'}
+                </span>
+                <span className="text-sm">
+                  <span className="font-medium">
+                    {formatFeatureValue(featureKey, value)}
+                  </span>
+                  {' '}
+                  <span className="text-gray-500">
+                    {FEATURE_LABELS[featureKey].toLowerCase()}
+                  </span>
+                </span>
+              </li>
+            )
+          })}
+        </ul>
+      </CardContent>
+
+      <CardFooter>
+        {isCurrentPlan ? (
+          <Button variant="outline" className="w-full" disabled>
+            Piano attuale
+          </Button>
+        ) : (
+          <Button
+            className="w-full"
+            onClick={handleSwitchPlan}
+            disabled={isPending}
+            variant={plan.name === 'pro' ? 'default' : 'outline'}
+          >
+            {isPending ? 'Cambio in corso...' : (
+              plan.price_monthly === 0 ? 'Passa a Gratuito' : `Passa a ${plan.display_name_it}`
+            )}
+          </Button>
+        )}
+      </CardFooter>
+    </Card>
+  )
+}