Current Plan Summary Card

1"use client"
2 
3import * as React from "react"
4import { toast } from "sonner"
5 
6import {
7  AlertDialog,
8  AlertDialogCancel,
9  AlertDialogContent,
10  AlertDialogDescription,
11  AlertDialogFooter,
12  AlertDialogHeader,
13  AlertDialogTitle,
14  AlertDialogTrigger,
15} from "@/components/ui/alert-dialog"
16import { Badge } from "@/components/ui/badge"
17import { Button } from "@/components/ui/button"
18import {
19  Card,
20  CardContent,
21  CardDescription,
22  CardFooter,
23  CardHeader,
24  CardTitle,
25} from "@/components/ui/card"
26import {
27  Field,
28  FieldContent,
29  FieldDescription,
30  FieldLabel,
31} from "@/components/ui/field"
32import { Progress } from "@/components/ui/progress"
33import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
34import { Separator } from "@/components/ui/separator"
35import { Toaster } from "@/components/ui/sonner"
36import { IconPlaceholder } from "@/components/icons/icon-placeholder"
37 
38const PLANS = [
39  {
40    id: "starter",
41    name: "Starter",
42    price: "$19",
43    seats: 5,
44    description: "For small teams getting started.",
45  },
46  {
47    id: "pro",
48    name: "Pro",
49    price: "$49",
50    seats: 25,
51    description: "For growing teams that need more seats.",
52  },
53  {
54    id: "scale",
55    name: "Scale",
56    price: "$99",
57    seats: 100,
58    description: "For organizations operating at scale.",
59  },
60] as const
61 
62const SEATS_USED = 11
63const RENEWAL_DATE = "July 14, 2026"
64 
65export default function BillingBlock() {
66  const [planId, setPlanId] = React.useState<string>("pro")
67  const [pendingPlanId, setPendingPlanId] = React.useState<string>("pro")
68  const [open, setOpen] = React.useState(false)
69 
70  const currentPlan = PLANS.find((p) => p.id === planId) ?? PLANS[1]
71  const pendingPlan = PLANS.find((p) => p.id === pendingPlanId) ?? currentPlan
72 
73  const seatPct = Math.round((SEATS_USED / currentPlan.seats) * 100)
74 
75  function openManage() {
76    setPendingPlanId(planId)
77    setOpen(true)
78  }
79 
80  function confirmPlan() {
81    setPlanId(pendingPlanId)
82    setOpen(false)
83    if (pendingPlanId === planId) {
84      toast.info("No changes made", {
85        description: `You're still on the ${pendingPlan.name} plan.`,
86      })
87    } else {
88      toast.success("Plan updated", {
89        description: `You're now on the ${pendingPlan.name} plan.`,
90      })
91    }
92  }
93 
94  return (
95    <section className="flex w-full items-center justify-center bg-background px-6 py-12 text-foreground">
96      <Card className="w-full max-w-sm">
97        <CardHeader>
98// … truncated