{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "billing-1", "title": "Billing 1: plan, usage and invoices", "author": "Ballmac ", "description": "A billing page: current plan and monthly cost, usage meters that turn amber near the limit, the card on file with an update dialog (formatted, validated), the billing contact and an invoice list with status and downloads.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/badge.json", "https://ui.ballmac.com/r/button.json", "https://ui.ballmac.com/r/dialog.json", "https://ui.ballmac.com/r/field.json", "https://ui.ballmac.com/r/input.json", "https://ui.ballmac.com/r/i18n.json" ], "files": [ { "path": "registry/ballmac/components/blocks/billing-1/billing-1.tsx", "content": "// Ballmac UI: Billing 1. https://ui.ballmac.com/blocks/billing-1\n\"use client\"\n\nimport * as React from \"react\"\nimport { AlertTriangle, CreditCard, Download } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ballmac/badge\"\nimport { Button, buttonVariants } from \"@/components/ballmac/button\"\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ballmac/dialog\"\nimport { Field, FieldError, FieldGroup, FieldLabel, useFieldControl } from \"@/components/ballmac/field\"\nimport { Input } from \"@/components/ballmac/input\"\nimport { cn } from \"@/lib/utils\"\nimport { useLocale } from \"@/lib/ballmac/i18n\"\n\ntype Billing1Usage = {\n label: string\n used: number\n /** The plan limit. Leave out for unlimited. */\n limit?: number\n /** Unit shown after the numbers, e.g. \"GB\". */\n unit?: string\n}\n\ntype Billing1Invoice = {\n id: string\n /** ISO date (YYYY-MM-DD), shown in UTC. */\n date: string\n amount: number\n status: \"paid\" | \"open\" | \"failed\"\n href?: string\n}\n\ntype Billing1Props = Omit, \"title\"> & {\n /** Page heading. */\n title?: string\n /** One line under the heading. */\n description?: string\n /** The current plan. */\n plan?: { name: string; price: number; per: string; seats: number; seatLimit: number; renews: string }\n /** Usage against plan limits. A meter turns amber from 80%. */\n usage?: Billing1Usage[]\n /** The card on file. */\n card?: { brand: string; last4: string; expires: string; holder: string }\n /** Billing contact. */\n contact?: { email: string; address: string }\n /** Past invoices, newest first. */\n invoices?: Billing1Invoice[]\n /** ISO currency code. */\n currency?: string\n /** Locale for numbers and dates. Fixed by default so server and browser match. */\n locale?: string\n /** Called by \"Change plan\". */\n onChangePlan?: () => void\n /** Called with the new card details. Throw to show an error. Never send these anywhere except your payment provider. */\n onUpdateCard?: (card: { number: string; expiry: string; cvc: string }) => void | Promise\n}\n\nconst defaultUsage: Billing1Usage[] = [\n { label: \"Seats\", used: 7, limit: 10 },\n { label: \"Storage\", used: 640, limit: 1000, unit: \"GB\" },\n { label: \"API requests this month\", used: 82400, limit: 100000 },\n { label: \"Projects\", used: 18 },\n]\n\nconst defaultInvoices: Billing1Invoice[] = [\n { id: \"INV-1042\", date: \"2026-09-28\", amount: 224, status: \"paid\" },\n { id: \"INV-1031\", date: \"2026-08-28\", amount: 224, status: \"paid\" },\n { id: \"INV-1019\", date: \"2026-07-28\", amount: 192, status: \"paid\" },\n { id: \"INV-1007\", date: \"2026-06-28\", amount: 192, status: \"paid\" },\n { id: \"INV-0995\", date: \"2026-05-28\", amount: 160, status: \"failed\" },\n]\n\nconst tone = { paid: \"success\", open: \"warning\", failed: \"error\" } as const\nconst label = { paid: \"Paid\", open: \"Open\", failed: \"Failed\" }\n\nfunction FieldInput(props: React.ComponentProps) {\n return \n}\n\nfunction Billing1({\n title = \"Billing\",\n description = \"Your plan, usage, payment method and invoices.\",\n plan = { name: \"Pro\", price: 32, per: \"seat / month\", seats: 7, seatLimit: 10, renews: \"2026-10-28\" },\n usage = defaultUsage,\n card = { brand: \"Visa\", last4: \"4242\", expires: \"08/28\", holder: \"Jordan Lee\" },\n contact = { email: \"billing@acme.com\", address: \"Rua das Flores 12, 1200-195 Lisbon, Portugal\" },\n invoices = defaultInvoices,\n currency = \"USD\",\n locale,\n onChangePlan,\n onUpdateCard,\n className,\n ...props\n}: Billing1Props) {\n const defaultLocale = useLocale()\n locale ??= defaultLocale\n const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: \"currency\", currency, maximumFractionDigits: 0 }), [locale, currency])\n const int = React.useMemo(() => new Intl.NumberFormat(locale), [locale])\n const date = React.useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: \"UTC\" }), [locale])\n const fmt = (iso: string) => date.format(new Date(`${iso}T00:00:00Z`))\n\n const [open, setOpen] = React.useState(false)\n const [num, setNum] = React.useState(\"\")\n const [exp, setExp] = React.useState(\"\")\n const [cvc, setCvc] = React.useState(\"\")\n const [tried, setTried] = React.useState(false)\n const [state, setState] = React.useState<\"idle\" | \"saving\" | \"error\">(\"idle\")\n const [cardNow, setCardNow] = React.useState(card)\n const [saved, setSaved] = React.useState(false)\n\n const digits = num.replace(/\\s/g, \"\")\n const errors = {\n num: digits.length >= 13 ? undefined : \"Enter the full card number.\",\n exp: /^(0[1-9]|1[0-2])\\/\\d{2}$/.test(exp) ? undefined : \"Use MM/YY.\",\n cvc: cvc.length >= 3 ? undefined : \"Enter the 3 or 4 digit code.\",\n }\n const show = (k: keyof typeof errors) => (tried ? errors[k] : undefined)\n\n async function saveCard(e: React.FormEvent) {\n e.preventDefault()\n setTried(true)\n if (Object.values(errors).some(Boolean)) return\n setState(\"saving\")\n try {\n if (onUpdateCard) await onUpdateCard({ number: digits, expiry: exp, cvc })\n else await new Promise((r) => setTimeout(r, 800))\n setCardNow({ ...cardNow, last4: digits.slice(-4), expires: exp })\n setOpen(false)\n setSaved(true)\n setNum(\"\")\n setExp(\"\")\n setCvc(\"\")\n setTried(false)\n setState(\"idle\")\n } catch {\n setState(\"error\")\n }\n }\n\n const monthly = plan.price * plan.seats\n\n return (\n
\n

{title}

\n

{description}

\n

{saved ? \"Payment method updated.\" : \"\"}

\n\n
\n
\n
\n
\n

Current plan

\n

{plan.name} Active

\n

{money.format(plan.price)} per {plan.per} · {plan.seats} seats · renews {fmt(plan.renews)}

\n
\n
\n

{money.format(monthly)}

\n

per month

\n
\n
\n\n
    \n {usage.map((u) => {\n const pct = u.limit ? Math.min(100, (u.used / u.limit) * 100) : 0\n const warn = u.limit ? pct >= 80 : false\n return (\n
  • \n
    \n {u.label}\n \n {int.format(u.used)}{u.unit ? ` ${u.unit}` : \"\"}{u.limit ? ` of ${int.format(u.limit)}${u.unit ? ` ${u.unit}` : \"\"}` : \" · unlimited\"}\n \n
    \n {u.limit ? (\n
    \n
    \n
    \n ) : null}\n {warn &&

    Approaching your limit. Upgrade to avoid interruptions.

    }\n
    • \n )\n })}\n
\n\n
\n \n \n
\n
\n\n
\n
\n

Payment method

\n
\n \n
\n

{cardNow.brand} •••• {cardNow.last4}

\n

Expires {cardNow.expires} · {cardNow.holder}

\n
\n
\n { setOpen(o); if (!o) { setTried(false); setState(\"idle\") } }}>\n Update card\n \n
\n \n Update payment method\n Your next invoice will be charged to this card.\n \n \n {state === \"error\" &&

We couldn’t verify that card. Check the details and try again.

}\n \n Card number\n setNum(e.target.value.replace(/\\D/g, \"\").slice(0, 19).replace(/(.{4})/g, \"$1 \").trim())} />\n \n \n
\n \n Expiry\n { const d = e.target.value.replace(/\\D/g, \"\").slice(0, 4); setExp(d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d) }} />\n \n \n \n Security code\n setCvc(e.target.value.replace(/\\D/g, \"\").slice(0, 4))} />\n \n \n
\n \n \n \n \n \n
\n \n \n
\n\n
\n

Billing contact

\n

{contact.email}

\n

{contact.address}

\n \n
\n
\n
\n\n
\n
\n

Invoices

\n View all\n
\n
    \n {invoices.map((inv) => (\n
  • \n
    \n

    {inv.id}

    \n

    {fmt(inv.date)}

    \n
    \n {label[inv.status]}\n {money.format(inv.amount)}\n \n
    • \n ))}\n
\n
\n
\n )\n}\n\nexport { Billing1, type Billing1Props, type Billing1Usage, type Billing1Invoice }\n", "type": "registry:component", "target": "@components/ballmac/blocks/billing-1/billing-1.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "billing", "subscription", "usage", "invoices", "payment method", "plan" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "The billing screen. Pass plan, usage=[{ label, used, limit?, unit? }], card, contact, invoices, currency and handlers onChangePlan / onUpdateCard (throw to show an error). Real card numbers must go to your payment provider's hosted fields, not through this form.", "whenToUse": [ "Subscription management pages", "Usage-based or seat-based products" ], "whenNotToUse": [ "Choosing between plans (use billing-2 or pricing-2)" ], "composesWith": [ "app-shell-1", "billing-2", "settings-1", "settings-3" ], "a11y": [ { "keys": "Usage meters", "action": "Each is an image with a text alternative ('Storage: 64 percent used') and the warning is written out, not only coloured" }, { "keys": "Update card", "action": "A dialog with labelled fields, inline errors and focus returned to the button on close" }, { "keys": "Download", "action": "Each icon link is named 'Download invoice INV-…'" } ], "customization": [ "plan, usage, card, contact, invoices", "currency, locale", "onChangePlan, onUpdateCard" ] }, "examples": [ "billing-1-demo", "billing-1-starter" ], "url": "https://ui.ballmac.com/components/billing-1" }, "categories": [ "blocks", "billing" ], "type": "registry:block" }