{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "billing-account", "title": "Billing Account", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/billing-account/billing-account.component.ts", "content": "// Stripe-style account billing page: current-plan card with Pro badge, price and renewal\n// date plus Upgrade / Cancel actions, usage meters for seats and projects, a payment-method\n// row with update and delete actions, and a compact billing-history list with paid badges\n// and per-invoice downloads. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { CreditCard, Download, LucideAngularModule, Trash2 } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface UsageMetric {\n label: string\n used: number\n total: number\n}\n\ninterface Invoice {\n id: string\n date: string\n amount: string\n status: 'Paid' | 'Open' | 'Past due'\n}\n\nconst plan = {\n name: 'Pro',\n price: '$49',\n cadence: 'month',\n renewalDate: 'September 12, 2026',\n}\n\nconst usage: UsageMetric[] = [\n { label: 'Seats', used: 18, total: 20 },\n { label: 'Projects', used: 7, total: 10 },\n]\n\nconst paymentMethod = {\n brand: 'Visa',\n last4: '4242',\n expiry: '04/28',\n}\n\nconst invoices: Invoice[] = [\n { id: 'inv-2026-08', date: 'Aug 12, 2026', amount: '$49.00', status: 'Paid' },\n { id: 'inv-2026-07', date: 'Jul 12, 2026', amount: '$49.00', status: 'Paid' },\n { id: 'inv-2026-06', date: 'Jun 12, 2026', amount: '$49.00', status: 'Paid' },\n { id: 'inv-2026-05', date: 'May 12, 2026', amount: '$49.00', status: 'Paid' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-billing-account, [ui-billing-account]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n
\n

Current plan

\n {{ plan.name }}\n
\n

Your subscription renews automatically each month.

\n
\n
\n
\n
\n

\n {{ plan.price }}\n / {{ plan.cadence }}\n

\n

Renews on {{ plan.renewalDate }}

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

Usage

\n

Consumption against your plan limits this cycle.

\n
\n
\n @for (metric of usageMetrics; track metric.label) {\n
\n
\n {{ metric.label }}\n \n {{ metric.used }} of {{ metric.total }} used\n \n
\n \n
\n }\n
\n
\n\n
\n
\n

Payment method

\n

Charged when your subscription renews.

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

•••• •••• •••• {{ paymentMethod.last4 }}

\n

\n {{ paymentMethod.brand }} · Expires {{ paymentMethod.expiry }}\n

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

Billing history

\n

Invoices from the last 12 months.

\n
\n
\n
    \n @for (invoice of invoiceList; track invoice.id) {\n
  • \n
    \n

    {{ invoice.date }}

    \n

    {{ invoice.amount }}

    \n
    \n
    \n {{ invoice.status }}\n \n \n
    \n
    • \n }\n
\n
\n
\n
\n `,\n})\nexport class UiBillingAccountComponent {\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly Trash2 = Trash2\n\n protected readonly plan = plan\n protected readonly usageMetrics = usage\n protected readonly paymentMethod = paymentMethod\n protected readonly invoiceList = invoices\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-2xl space-y-6', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/billing-account/billing-account.component.ts" }, { "path": "packages/registry-angular/blocks/billing-account/index.ts", "content": "export { UiBillingAccountComponent } from './billing-account.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/billing-account/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Stripe-style account billing page: current-plan card with Pro badge, price and renewal date plus Upgrade / Cancel actions, usage meters for seats and projects, a payment-method row with update and delete actions, and a compact billing-history list with paid badges and per-invoice downloads.", "categories": [ "finance", "app", "billing" ] }