{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-calculator", "title": "Pricing Calculator", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-calculator/pricing-calculator.component.ts", "content": "// Interactive SaaS and API pricing calculator: seat, request throughput, and cloud storage\n// sliders, annual billing toggle with 20% discount, enterprise add-on switches, automated tier\n// recommendation, and a sticky live estimated cost breakdown. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Check,\n HardDrive,\n Headphones,\n KeyRound,\n LucideAngularModule,\n ShieldCheck,\n Users,\n Zap,\n} 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'\n\nexport interface PricingCalculatorRequestTier {\n label: string\n requests: number\n cost: number\n}\n\nexport interface PricingCalculatorStorageTier {\n label: string\n gb: number\n cost: number\n}\n\nconst REQUEST_TIERS: PricingCalculatorRequestTier[] = [\n { label: '10K requests', requests: 10_000, cost: 0 },\n { label: '50K requests', requests: 50_000, cost: 25 },\n { label: '100K requests', requests: 100_000, cost: 60 },\n { label: '250K requests', requests: 250_000, cost: 120 },\n { label: '500K requests', requests: 500_000, cost: 220 },\n { label: '1M requests', requests: 1_000_000, cost: 400 },\n { label: '2.5M requests', requests: 2_500_000, cost: 750 },\n { label: '5M requests', requests: 5_000_000, cost: 1200 },\n]\n\nconst STORAGE_TIERS: PricingCalculatorStorageTier[] = [\n { label: '100 GB', gb: 100, cost: 10 },\n { label: '250 GB', gb: 250, cost: 25 },\n { label: '500 GB', gb: 500, cost: 45 },\n { label: '1 TB', gb: 1_000, cost: 80 },\n { label: '2 TB', gb: 2_000, cost: 150 },\n { label: '5 TB', gb: 5_000, cost: 320 },\n { label: '10 TB', gb: 10_000, cost: 580 },\n]\n\nconst SEAT_PRICE = 15\nconst SUPPORT_MANAGER_PRICE = 200\nconst CUSTOM_SLA_PRICE = 500\nconst SSO_PRICE = 100\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-calculator, [ui-pricing-calculator]',\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 ],\n template: `\n
\n
\n \n \n Pricing Calculator\n \n
\n

\n Interactive Pricing Calculator\n

\n

\n Calculate your exact monthly or annual investment based on usage.\n

\n
\n\n
\n Monthly\n \n Pay Annually\n \n Save 20%\n \n
\n
\n\n
\n
\n
\n
\n

Capacity & Scale

\n

Configure team seats, API request throughput, and dedicated storage.

\n
\n
\n
\n
\n
\n \n \n
\n
\n Team Seats\n \n {{ seatTier().label }}\n \n
\n
\n
\n {{ seats() }}\n seats (${{ seats() * seatPrice }}/mo)\n
\n
\n
\n \n
\n

\n Full workspace access, fine-grained permission controls, and audit log tracking for each member.\n

\n
\n\n
\n\n
\n
\n
\n \n \n
\n
\n Monthly API Requests\n
\n
\n
\n \n {{ currentRequestTier().label }}\n \n \n ({{\n currentRequestTier().cost === 0 ? 'Included' : '+' + '$' + currentRequestTier().cost + '/mo'\n }})\n \n
\n
\n
\n \n
\n

\n Globally distributed edge endpoints, automatic rate limiting, and sub-50ms p99 latency SLA.\n

\n
\n\n
\n\n
\n
\n
\n \n \n
\n
\n Dedicated Cloud Storage\n
\n
\n
\n \n {{ currentStorageTier().label }}\n \n (+${{ currentStorageTier().cost }}/mo)\n
\n
\n
\n \n
\n

\n Encrypted at rest (AES-256) with multi-region automated replication and daily disaster backups.\n

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

Enterprise Add-ons

\n

\n Enhance your infrastructure with enterprise compliance, reliability, and support.\n

\n
\n
\n \n
\n \n \n
\n
\n
\n Dedicated Support Manager\n +$200/mo\n
\n

\n Direct Slack channel, named technical account manager & 1-hour response SLA.\n

\n
\n
\n
\n \n
\n
\n\n \n
\n \n \n
\n
\n
\n Custom SLA Guarantee\n +$500/mo\n
\n

\n 99.99% uptime guarantee with financial commitments and priority disaster recovery.\n

\n
\n
\n
\n \n
\n \n\n \n
\n \n \n
\n
\n
\n Single Sign-On (SSO / SAML)\n +$100/mo\n
\n

\n Okta, Azure AD, Google Workspace, and SAML 2.0 enterprise identity integration.\n

\n
\n \n
\n \n
\n \n \n \n \n\n
\n
\n
\n
\n \n Estimated Investment\n \n \n @if (recommendedPlan().name === 'Enterprise') {\n \n }\n {{ recommendedPlan().badge }}\n \n
\n
\n
\n \n ${{ totalMonthly() }}\n \n / month\n
\n @if (isAnnual()) {\n

\n Billed annually (${{ totalAnnual().toLocaleString('en-US') }}/yr) ·\n Save ${{ annualSavings().toLocaleString('en-US') }}/yr\n

\n } @else {\n

\n Billed monthly · Switch to annual to save 20% (${{\n annualSavings().toLocaleString('en-US')\n }}/yr)\n

\n }\n
\n
\n
\n
\n
\n
\n Base platform ({{ recommendedPlan().name }})\n ${{ annualAdjusted(baseCost()) }}/mo\n
\n
\n Team seats ({{ seats() }} × ${{ seatPrice }})\n ${{ annualAdjusted(seatsCost()) }}/mo\n
\n
\n API throughput ({{ currentRequestTier().label }})\n \n {{ requestsCost() === 0 ? 'Included' : '$' + annualAdjusted(requestsCost()) + '/mo' }}\n \n
\n
\n Cloud storage ({{ currentStorageTier().label }})\n ${{ annualAdjusted(storageCost()) }}/mo \n
\n
\n Add-ons ({{ activeAddonsCount() }} active)\n \n {{ addonsCost() === 0 ? '$0/mo' : '$' + annualAdjusted(addonsCost()) + '/mo' }}\n \n
\n @if (isAnnual()) {\n \n Annual discount applied\n 20% off\n
\n }\n
\n
\n
    \n
  • \n \n 14-day fully featured free trial\n
    • \n
  • \n \n No credit card required upfront\n
    • \n
  • \n \n Zero-downtime migration assistance\n
    • \n
\n
\n
\n \n \n
\n
\n \n \n \n `,\n})\nexport class UiPricingCalculatorComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly HardDrive = HardDrive\n protected readonly Headphones = Headphones\n protected readonly KeyRound = KeyRound\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Users = Users\n protected readonly Zap = Zap\n\n protected readonly seatPrice = SEAT_PRICE\n protected readonly seatMarks: Record = { 1: '1', 25: '25', 50: '50', 75: '75', 100: '100' }\n protected readonly requestMarks: Record = { 0: '10K', 2: '100K', 4: '500K', 7: '5M' }\n protected readonly storageMarks: Record = { 0: '100 GB', 2: '500 GB', 4: '2 TB', 6: '10 TB' }\n\n @Input() set initialAnnual(v: boolean) {\n this.isAnnual.set(!!v)\n }\n @Input('class') className?: string\n\n readonly isAnnual = signal(true)\n readonly seats = signal(12)\n readonly requestIndex = signal(2)\n readonly storageIndex = signal(2)\n readonly addonSupport = signal(false)\n readonly addonSla = signal(false)\n readonly addonSso = signal(true)\n\n readonly currentRequestTier = computed(() => REQUEST_TIERS[this.requestIndex()] ?? REQUEST_TIERS[0]!)\n readonly currentStorageTier = computed(() => STORAGE_TIERS[this.storageIndex()] ?? STORAGE_TIERS[0]!)\n\n readonly seatTier = computed(() => {\n if (this.seats() <= 5) return { label: 'Starter Team', variant: 'secondary' as const }\n if (this.seats() <= 25) return { label: 'Growth Team', variant: 'outline' as const }\n return { label: 'Scale Team', variant: 'default' as const }\n })\n\n readonly recommendedPlan = computed(() => {\n if (this.addonSla() || this.requestIndex() >= 6 || this.storageIndex() >= 5 || this.seats() >= 30) {\n return { name: 'Enterprise', badge: 'Enterprise Plan', baseFee: 199, variant: 'default' as const }\n }\n if (this.seats() >= 8 || this.requestIndex() >= 3 || this.storageIndex() >= 3 || this.addonSupport()) {\n return { name: 'Growth', badge: 'Growth Plan', baseFee: 79, variant: 'default' as const }\n }\n return { name: 'Starter', badge: 'Starter Plan', baseFee: 29, variant: 'secondary' as const }\n })\n\n readonly baseCost = computed(() => this.recommendedPlan().baseFee)\n readonly seatsCost = computed(() => this.seats() * SEAT_PRICE)\n readonly requestsCost = computed(() => this.currentRequestTier().cost)\n readonly storageCost = computed(() => this.currentStorageTier().cost)\n readonly addonsCost = computed(() => {\n let cost = 0\n if (this.addonSupport()) cost += SUPPORT_MANAGER_PRICE\n if (this.addonSla()) cost += CUSTOM_SLA_PRICE\n if (this.addonSso()) cost += SSO_PRICE\n return cost\n })\n\n readonly activeAddonsCount = computed(() => {\n let count = 0\n if (this.addonSupport()) count++\n if (this.addonSla()) count++\n if (this.addonSso()) count++\n return count\n })\n\n readonly subtotalMonthly = computed(\n () => this.baseCost() + this.seatsCost() + this.requestsCost() + this.storageCost() + this.addonsCost(),\n )\n\n readonly discountMultiplier = computed(() => (this.isAnnual() ? 0.8 : 1.0))\n readonly totalMonthly = computed(() => Math.round(this.subtotalMonthly() * this.discountMultiplier()))\n readonly totalAnnual = computed(() => this.totalMonthly() * 12)\n readonly annualSavings = computed(() => Math.round(this.subtotalMonthly() * 0.2 * 12))\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-10 p-4 sm:p-6 lg:p-8', this.className)\n }\n\n billingLabelClass(active: boolean): string {\n return cn(\n 'text-xs font-medium transition-colors',\n active ? 'text-foreground font-semibold' : 'text-muted-foreground',\n )\n }\n\n annualAdjusted(cost: number): number {\n return this.isAnnual() ? Math.round(cost * 0.8) : cost\n }\n\n onSeatsChange(value: number[]): void {\n const next = value[0]\n if (next !== undefined) this.seats.set(next)\n }\n\n onRequestChange(value: number[]): void {\n const next = value[0]\n if (next !== undefined) this.requestIndex.set(next)\n }\n\n onStorageChange(value: number[]): void {\n const next = value[0]\n if (next !== undefined) this.storageIndex.set(next)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-calculator/pricing-calculator.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-calculator/index.ts", "content": "export {\n UiPricingCalculatorComponent,\n type PricingCalculatorRequestTier,\n type PricingCalculatorStorageTier,\n} from './pricing-calculator.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-calculator/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" ], "description": "Interactive SaaS and API pricing calculator with dynamic seat, request throughput, and cloud storage sliders, annual billing toggle with 20% discount, enterprise add-on switches, automated tier recommendation, and sticky live estimated cost breakdown.", "categories": [ "marketing", "billing" ] }