{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-01", "title": "Seat Pricing Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-01/pricing-01.component.ts", "content": "// Seat pricing matrix: monthly/annual billing toggle, currency selector (USD/EUR/GBP),\n// team seat simulator slider, dynamic add-on calculators, and an expandable side-by-side\n// feature comparison matrix. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, Check, ChevronDown, ChevronUp, LucideAngularModule, ShieldCheck, Users, Zap } 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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSliderComponent } from '@/ui/slider/slider.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\nexport type Pricing01BillingCycle = 'monthly' | 'yearly'\nexport type Pricing01Currency = 'USD' | 'EUR' | 'GBP'\n\nconst currencySymbols: Record = {\n USD: '$',\n EUR: '€',\n GBP: '£',\n}\n\nconst currencyRates: Record = {\n USD: 1.0,\n EUR: 0.92,\n GBP: 0.79,\n}\n\nexport interface Pricing01FeatureRow {\n name: string\n starter: string\n team: string\n enterprise: string\n}\n\nexport interface Pricing01ComparisonGroup {\n category: string\n features: Pricing01FeatureRow[]\n}\n\nconst comparisonMatrix: Pricing01ComparisonGroup[] = [\n {\n category: 'Platform & Compute Core',\n features: [\n { name: 'Active Team Members', starter: 'Up to 10', team: 'Unlimited', enterprise: 'Unlimited + Org Units' },\n { name: 'Monthly API Requests', starter: '100,000 / mo', team: '2,500,000 / mo', enterprise: 'Custom Unlimited' },\n { name: 'Workflow Automations', starter: '10 active', team: '100 active', enterprise: 'Unlimited real-time' },\n { name: 'Data Retention History', starter: '30 days', team: '365 days', enterprise: '7 years immutable' },\n ],\n },\n {\n category: 'Security & Enterprise Governance',\n features: [\n {\n name: 'SOC 2 Type II & ISO 27001',\n starter: 'Standard',\n team: 'Included',\n enterprise: 'Included + Auditor Portal',\n },\n { name: 'SAML SSO & SCIM Provisioning', starter: '—', team: 'Google / Okta', enterprise: 'Custom IdP + SCIM v2' },\n {\n name: 'Role-Based Access (RBAC)',\n starter: '3 predefined roles',\n team: 'Granular permissions',\n enterprise: 'Custom policy engine',\n },\n {\n name: 'Immutable Audit Trail Logs',\n starter: '—',\n team: '90 days exportable',\n enterprise: 'Real-time SIEM streaming',\n },\n ],\n },\n {\n category: 'Support & Success SLAs',\n features: [\n {\n name: 'Support Channel',\n starter: 'Community & Email',\n team: 'Priority Email + Chat',\n enterprise: 'Dedicated Private Slack',\n },\n {\n name: 'First-Response SLA',\n starter: '24 business hours',\n team: '4 business hours',\n enterprise: '< 15 mins (24/7/365)',\n },\n { name: 'Uptime SLA Guarantee', starter: '99.9%', team: '99.95%', enterprise: '99.99% financially backed' },\n { name: 'Dedicated Solutions Architect', starter: '—', team: '—', enterprise: 'Assigned Principal Engineer' },\n ],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-01, [ui-pricing-01]',\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiSliderComponent,\n UiSwitchComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiToggleGroupComponent,\n UiToggleGroupItemComponent,\n ],\n template: `\n
\n
\n \n
\n \n \n Predictable Enterprise Pricing\n
\n

\n Scale effortlessly without seat tax surprises\n

\n

\n Zero setup fees, transparent volume discounts, and instant self-serve provisioning. Switch or cancel plans\n anytime.\n

\n\n \n
\n \n
\n \n \n \n Annual\n \n Save 20%\n \n \n \n
\n\n \n
\n \n \n \n \n \n
\n
\n\n \n
\n
\n
\n \n Simulate Team Size:\n
\n
\n \n {{ currentSeats() }} {{ currentSeats() === 1 ? 'seat' : 'seats' }}\n \n @if (billingCycle() === 'yearly' && annualSavingsTeam() > 0) {\n \n (Saves ~{{ sym() }}{{ annualSavingsTeam().toLocaleString() }}/yr on Team plan)\n \n }\n
\n
\n
\n \n
\n
\n 1 seat\n 25 seats\n 50+ seats\n
\n
\n
\n\n \n
\n \n \n
\n
\n
\n Bootstrap & Indie\n
\n

Starter Studio

\n

\n For agile squads and early-stage product teams validating core workflows.\n

\n\n
\n
\n \n {{ sym() }}{{ starterUnit() }}\n \n / seat / month\n
\n
\n Est. {{ sym() }}{{ starterMonthlyTotal().toLocaleString() }}/mo for {{ currentSeats() }}\n {{ currentSeats() === 1 ? 'seat' : 'seats' }}\n
\n
\n
\n\n
\n
\n
\n

Included features

\n
    \n
  • \n \n Up to 10 team seats & unlimited guests\n
    • \n
  • \n \n 100,000 monthly API event calls\n
    • \n
  • \n \n 30-day continuous audit & revision history\n
    • \n
  • \n \n Standard Community & Email support (24h)\n
    • \n
  • \n \n Community Discord access & quickstarts\n
    • \n
\n
\n
\n
\n\n
\n \n
\n
\n\n \n \n
\n \n \n Most Popular Choice\n \n
\n\n
\n
\n
\n \n Scale & High-Growth\n \n
\n

Team Scale

\n

\n For fast-scaling engineering and product organizations requiring deep automation.\n

\n\n
\n
\n {{ sym() }}{{ teamUnit() }} \n / seat / month\n
\n
\n Est. {{ sym() }}{{ teamMonthlyTotal().toLocaleString() }}/mo for {{ currentSeats() }}\n {{ currentSeats() === 1 ? 'seat' : 'seats' }}\n
\n
\n
\n\n
\n
\n
\n

\n Everything in Starter, plus\n

\n
    \n
  • \n \n Unlimited team seats & custom workspace roles\n
    • \n
  • \n \n 2.5M monthly API calls & priority queue\n
    • \n
  • \n \n Google & Okta SAML SSO integration\n
    • \n
  • \n \n 365-day immutable compliance logs\n
    • \n
  • \n \n Priority ticketing with 4h guaranteed SLA\n
    • \n
\n
\n\n \n
\n

Optional Power Add-ons

\n
\n \n 24/7 Dedicated SLA (+{{ sym() }}{{ slaAddonUnit() }}/mo)\n \n \n
\n
\n \n SOC 2 Vault Streaming (+{{ sym() }}{{ vaultAddonUnit() }}/mo)\n \n \n
\n
\n
\n
\n\n
\n \n
\n \n\n \n \n
\n
\n
\n Enterprise & Security\n
\n

Enterprise Suite

\n

\n Dedicated infrastructure, custom security controls, and bespoke compliance SLAs.\n

\n\n
\n
\n \n {{ sym() }}{{ enterpriseUnit() }}\n \n / seat / month\n
\n
\n Custom volume licensing available for 100+ seats\n
\n
\n
\n\n
\n
\n
\n

\n Everything in Team, plus\n

\n
    \n
  • \n \n Custom SCIM v2 user provisioning & directory sync\n
    • \n
  • \n \n Dedicated VPC peering & custom data residency\n
    • \n
  • \n \n 99.99% uptime SLA with financial penalty backing\n
    • \n
  • \n \n Assigned Principal Solutions Engineer & private Slack\n
    • \n
  • \n \n Custom Master Service Agreement (MSA) & DPA\n
    • \n
\n
\n
\n
\n\n
\n \n
\n \n \n\n \n
\n \n {{\n showComparisonTable() ? 'Hide Detailed Feature Comparison' : 'Compare All Features & Enterprise Limits'\n }}\n @if (showComparisonTable()) {\n \n } @else {\n \n }\n \n
\n\n \n @if (showComparisonTable()) {\n
\n \n
\n

Detailed Specification & Limits

\n

Comprehensive side-by-side breakdown across every tier.

\n
\n All plans include SSL & automated backups\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n @for (group of comparisonGroups; track group.category) {\n \n \n \n @for (feat of group.features; track feat.name) {\n \n \n \n \n \n \n }\n }\n \n
CapabilitiesStarter StudioTeam ScaleEnterprise Suite
\n {{ group.category }}\n
{{ feat.name }}{{ feat.starter }}{{ feat.team }}{{ feat.enterprise }}
\n
\n \n }\n \n
\n `,\n})\nexport class UiPricing01Component {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronUp = ChevronUp\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Users = Users\n protected readonly Zap = Zap\n\n protected readonly comparisonGroups = comparisonMatrix\n\n @Input() set initialBillingCycle(v: Pricing01BillingCycle) {\n if (v) this.billingCycle.set(v)\n }\n @Input() set initialCurrency(v: Pricing01Currency) {\n if (v) this.currency.set(v)\n }\n @Input() set initialShowComparison(v: boolean) {\n this.showComparisonTable.set(!!v)\n }\n @Input('class') className?: string\n\n readonly billingCycle = signal('yearly')\n readonly currency = signal('USD')\n readonly teamSeats = signal([12])\n readonly addDedicatedSla = signal(false)\n readonly addAuditVault = signal(false)\n readonly showComparisonTable = signal(false)\n\n readonly rates = computed(() => currencyRates[this.currency()])\n readonly sym = computed(() => currencySymbols[this.currency()])\n\n readonly starterBase = computed(() => (this.billingCycle() === 'yearly' ? 12 : 15))\n readonly teamBase = computed(() => (this.billingCycle() === 'yearly' ? 28 : 35))\n readonly enterpriseBase = computed(() => (this.billingCycle() === 'yearly' ? 68 : 85))\n\n readonly slaCost = computed(() => (this.addDedicatedSla() ? 99 : 0))\n readonly vaultCost = computed(() => (this.addAuditVault() ? 49 : 0))\n\n readonly currentSeats = computed(() => this.teamSeats()[0] ?? 1)\n\n readonly starterUnit = computed(() => Math.round(this.starterBase() * this.rates()))\n readonly teamUnit = computed(() => Math.round(this.teamBase() * this.rates()))\n readonly enterpriseUnit = computed(() => Math.round(this.enterpriseBase() * this.rates()))\n readonly slaAddonUnit = computed(() => Math.round(99 * this.rates()))\n readonly vaultAddonUnit = computed(() => Math.round(49 * this.rates()))\n\n readonly starterMonthlyTotal = computed(() => {\n const base = this.starterBase() * this.currentSeats()\n return Math.round((base + (this.addAuditVault() ? 29 : 0)) * this.rates())\n })\n\n readonly teamMonthlyTotal = computed(() => {\n const base = this.teamBase() * this.currentSeats()\n return Math.round((base + this.slaCost() + this.vaultCost()) * this.rates())\n })\n\n readonly enterpriseMonthlyTotal = computed(() => {\n const base = this.enterpriseBase() * this.currentSeats()\n return Math.round((base + this.slaCost() + this.vaultCost()) * this.rates())\n })\n\n readonly annualSavingsTeam = computed(() => {\n const monthlyCost = 35 * this.currentSeats() * 12\n const yearlyCost = 28 * this.currentSeats() * 12\n return Math.round((monthlyCost - yearlyCost) * this.rates())\n })\n\n get rootClass(): string {\n return cn('bg-background w-full py-16 sm:py-24', this.className)\n }\n\n setBillingCycle(value: string): void {\n if (value === 'monthly' || value === 'yearly') this.billingCycle.set(value)\n }\n\n setCurrency(value: string): void {\n if (value === 'USD' || value === 'EUR' || value === 'GBP') this.currency.set(value)\n }\n\n onSeatsChange(value: number[]): void {\n if (value.length > 0) this.teamSeats.set(value)\n }\n\n toggleComparison(): void {\n this.showComparisonTable.update((v) => !v)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-01/pricing-01.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-01/index.ts", "content": "export {\n UiPricing01Component,\n type Pricing01BillingCycle,\n type Pricing01Currency,\n type Pricing01ComparisonGroup,\n type Pricing01FeatureRow,\n} from './pricing-01.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-01/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/separator.json", "https://uipkge.dev/r/angular/slider.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/toggle-group.json" ], "description": "Comprehensive enterprise pricing workbench with monthly/annual billing cycle toggle, currency selector (USD/EUR/GBP), team seat simulator slider, dynamic add-on calculators, and an expandable side-by-side feature comparison matrix.", "categories": [ "marketing" ] }