{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-feature-addon-builder", "title": "Pricing Feature Addon Builder", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/pricing-feature-addon-builder/pricing-feature-addon-builder.component.ts", "content": "// Interactive add-on pricing calculator: tier bundling, seat scaling, and real-time\n// invoice generation with an annual billing toggle. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { ArrowRight, Calculator, Check, CreditCard, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface PricingPlan {\n id: string\n name: string\n monthlyPrice: number\n description: string\n includedSeats: number\n}\n\nexport interface PricingAddon {\n id: string\n name: string\n monthlyPrice: number\n description: string\n category: string\n}\n\nconst DEFAULT_PLANS: PricingPlan[] = [\n {\n id: 'starter',\n name: 'Starter Tier',\n monthlyPrice: 29,\n description: 'For indie developers and early-stage prototypes needing unbundled speed.',\n includedSeats: 2,\n },\n {\n id: 'growth',\n name: 'Growth Core',\n monthlyPrice: 99,\n description: 'For scaling product engineering teams building high-conversion platforms.',\n includedSeats: 5,\n },\n {\n id: 'scale',\n name: 'Scale Enterprise',\n monthlyPrice: 299,\n description: 'For mission-critical production clusters requiring sub-10ms global edge delivery.',\n includedSeats: 15,\n },\n]\n\nconst DEFAULT_ADDONS: PricingAddon[] = [\n {\n id: 'dedicated-ip',\n name: 'Dedicated Static Edge IP',\n monthlyPrice: 49,\n description: 'Static IPv4/IPv6 address allocations with zero-reputation penalty.',\n category: 'Network',\n },\n {\n id: 'audit-logs',\n name: 'Immutable SOC2 Audit Logs',\n monthlyPrice: 79,\n description: 'Cryptographically signed telemetry logs with 365-day cold storage retention.',\n category: 'Security',\n },\n {\n id: 'multi-region',\n name: 'Multi-Region Active-Active Mesh',\n monthlyPrice: 129,\n description: 'Synchronized cross-continental database replicas and automatic DNS failover.',\n category: 'Reliability',\n },\n {\n id: 'priority-sla',\n name: '1-Hour Enterprise Response SLA',\n monthlyPrice: 199,\n description: 'Direct Slack / Discord hotline with senior design engineering staff.',\n category: 'Support',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-pricing-feature-addon-builder, [ui-pricing-feature-addon-builder]',\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: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n \n
\n \n \n Real-time Add-on Cost Synthesizer\n \n \n\n

\n {{ title() }}\n

\n\n

\n {{ description() }}\n

\n\n \n
\n Monthly Billing\n \n \n \n \n Annual Billing\n \n Save 20%\n \n \n
\n
\n\n \n
\n \n
\n \n
\n
\n Step 1: Choose Base Core Tier\n
\n
\n @for (plan of activePlans(); track plan.id) {\n \n }\n
\n
\n\n \n
\n
\n
\n Engineer Team Seats\n {{ seatCount() }} seats (${{ extraSeatCost() }}/mo extra)\n
\n \n
\n 2 seats\n 50 seats\n
\n
\n
\n\n \n
\n
\n Step 3: Select Modular Capabilities\n
\n
\n @for (addon of activeAddons(); track addon.id) {\n \n }\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n Estimated Monthly Invoice\n
\n \n {{ isAnnual() ? 'Annualized' : 'Monthly' }}\n \n
\n\n \n
\n
\n {{ selectedPlan().name }}\n ${{ selectedPlan().monthlyPrice }}.00\n
\n\n @if (extraSeats() > 0) {\n
\n Extra Seats ({{ extraSeats() }} × $15)\n ${{ extraSeatCost() }}.00\n
\n }\n\n @for (addon of selectedAddons(); track addon.id) {\n
\n {{ addon.name }}\n ${{ addon.monthlyPrice }}.00\n
\n }\n\n @if (isAnnual()) {\n
\n Annual Billing Discount (20%)\n −${{ monthlySubtotal() - finalMonthlyRate() }}.00\n
\n }\n
\n\n \n
\n
Net Monthly Investment
\n
\n \n ${{ finalMonthlyRate() }}\n \n / month\n
\n @if (isAnnual()) {\n
\n Billed annually (${{ finalMonthlyRate() * 12 }}/yr • Save ${{ annualSavings() }}/yr)\n
\n }\n
\n\n \n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiPricingFeatureAddonBuilderComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Calculator = Calculator\n protected readonly Check = Check\n protected readonly CreditCard = CreditCard\n\n @Input('title') set titleInput(v: string) {\n if (v !== undefined) this.titleSignal.set(v)\n }\n @Input('description') set descriptionInput(v: string) {\n if (v !== undefined) this.descriptionSignal.set(v)\n }\n @Input('plans') set plansInput(v: PricingPlan[] | undefined) {\n this.plansSignal.set(v)\n }\n @Input('addons') set addonsInput(v: PricingAddon[] | undefined) {\n this.addonsSignal.set(v)\n }\n @Input('class') className?: string\n\n private readonly titleSignal = signal('Build your custom plan with transparent, zero-surprise pricing.')\n private readonly descriptionSignal = signal(\n 'Select your base tier, adjust seat allocations, and toggle modular enterprise add-ons with real-time invoice calculations.',\n )\n private readonly plansSignal = signal(undefined)\n private readonly addonsSignal = signal(undefined)\n\n readonly title = computed(() => this.titleSignal())\n readonly description = computed(() => this.descriptionSignal())\n readonly activePlans = computed(() => this.plansSignal() ?? DEFAULT_PLANS)\n readonly activeAddons = computed(() => this.addonsSignal() ?? DEFAULT_ADDONS)\n\n readonly selectedPlanId = signal('growth')\n readonly selectedAddonIds = signal(['dedicated-ip', 'audit-logs'])\n readonly seatCount = signal(8)\n readonly isAnnual = signal(true)\n\n readonly selectedPlan = computed(() => {\n return this.activePlans().find((p) => p.id === this.selectedPlanId()) ?? this.activePlans()[0]!\n })\n\n readonly extraSeats = computed(() => Math.max(0, this.seatCount() - this.selectedPlan().includedSeats))\n readonly extraSeatCost = computed(() => this.extraSeats() * 15)\n\n readonly selectedAddons = computed(() => this.activeAddons().filter((a) => this.selectedAddonIds().includes(a.id)))\n\n readonly totalAddonsCost = computed(() => this.selectedAddons().reduce((sum, a) => sum + a.monthlyPrice, 0))\n\n readonly monthlySubtotal = computed(\n () => this.selectedPlan().monthlyPrice + this.extraSeatCost() + this.totalAddonsCost(),\n )\n\n readonly finalMonthlyRate = computed(() =>\n this.isAnnual() ? Math.round(this.monthlySubtotal() * 0.8) : this.monthlySubtotal(),\n )\n\n readonly annualSavings = computed(() => (this.monthlySubtotal() - Math.round(this.monthlySubtotal() * 0.8)) * 12)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n cadenceLabelClass(active: boolean): string {\n return cn('text-xs font-medium', active ? 'text-foreground font-semibold' : 'text-muted-foreground')\n }\n\n cadenceAnnualLabelClass(): string {\n return cn(\n 'flex items-center gap-1.5 text-xs font-medium',\n this.isAnnual() ? 'text-foreground font-semibold' : 'text-muted-foreground',\n )\n }\n\n cadenceTrackClass(): string {\n return cn(\n 'bg-muted focus-visible:ring-ring relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:outline-none',\n this.isAnnual() ? 'bg-primary' : 'bg-muted',\n )\n }\n\n cadenceThumbClass(): string {\n return cn(\n 'bg-background pointer-events-none inline-block size-5 transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out',\n this.isAnnual() ? 'translate-x-5' : 'translate-x-0',\n )\n }\n\n planCardClass(planId: string): string {\n return cn(\n 'flex flex-col justify-between rounded-xl border p-4 text-left transition-colors',\n this.selectedPlanId() === planId\n ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n : 'border-border bg-card hover:bg-muted/40 text-muted-foreground hover:text-foreground',\n )\n }\n\n addonCardClass(addonId: string): string {\n return cn(\n 'flex items-center justify-between rounded-xl border p-3.5 text-left transition-colors',\n this.isAddonSelected(addonId)\n ? 'border-primary/60 bg-primary/5 shadow-2xs'\n : 'border-border bg-card hover:bg-muted/30 text-muted-foreground hover:text-foreground',\n )\n }\n\n addonCheckClass(addonId: string): string {\n return cn(\n 'flex size-5 shrink-0 items-center justify-center rounded border transition-colors',\n this.isAddonSelected(addonId)\n ? 'border-primary bg-primary text-primary-foreground'\n : 'border-border bg-background',\n )\n }\n\n isAddonSelected(addonId: string): boolean {\n return this.selectedAddonIds().includes(addonId)\n }\n\n toggleAddon(addonId: string): void {\n if (this.isAddonSelected(addonId)) {\n this.selectedAddonIds.set(this.selectedAddonIds().filter((id) => id !== addonId))\n } else {\n this.selectedAddonIds.set([...this.selectedAddonIds(), addonId])\n }\n }\n\n onSeatInput(event: Event): void {\n const value = Number((event.target as HTMLInputElement).value)\n if (Number.isFinite(value)) this.seatCount.set(value)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-feature-addon-builder/pricing-feature-addon-builder.component.ts" }, { "path": "packages/registry-angular/blocks/pricing-feature-addon-builder/index.ts", "content": "export {\n UiPricingFeatureAddonBuilderComponent,\n type PricingPlan,\n type PricingAddon,\n} from './pricing-feature-addon-builder.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/pricing-feature-addon-builder/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" ], "description": "Interactive add-on pricing calculator with tier bundling, seat scaling, and real-time invoice generation.", "categories": [ "pricing", "marketing" ] }