{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "referral-program-widget", "title": "Referral Program Widget", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/referral-program-widget/referral-program-widget.component.ts", "content": "// Rewardful / Viral Loops style customer referral program and milestone reward tracker:\n// balance summary header, shareable link + code copy actions with social sharing, a 4-tier\n// milestone stepper with progress, and a recent referrals activity table. Port of the\n// React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport {\n Check,\n Clock,\n Copy,\n Gift,\n Lock,\n LucideAngularModule,\n Mail,\n Share2,\n Target,\n Trophy,\n Users,\n Wallet,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\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 { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport interface MilestoneTier {\n id: string\n tier: number\n referralsRequired: number\n title: string\n reward: string\n description: string\n status: 'completed' | 'in-progress' | 'upcoming'\n}\n\nexport interface ReferralActivity {\n id: string\n name: string\n email: string\n initials: string\n signedUpAt: string\n status: 'paid' | 'pending'\n rewardAmount: string\n}\n\nconst tiers: MilestoneTier[] = [\n {\n id: 'tier-1',\n tier: 1,\n referralsRequired: 1,\n title: '$25 Account Credit',\n reward: '$25 Credit',\n description: 'Instant credit applied directly to your renewal balance.',\n status: 'completed',\n },\n {\n id: 'tier-2',\n tier: 2,\n referralsRequired: 5,\n title: '$125 Credit + Exclusive Swag Kit',\n reward: '$125 + Swag Kit',\n description: 'Premium organic cotton hoodie and engineering desk kit.',\n status: 'completed',\n },\n {\n id: 'tier-3',\n tier: 3,\n referralsRequired: 10,\n title: '$250 Credit + 1-Year Free Pro Plan',\n reward: '$250 + Pro Plan',\n description: '6 of 10 referred · 4 more needed to unlock full Pro tier.',\n status: 'in-progress',\n },\n {\n id: 'tier-4',\n tier: 4,\n referralsRequired: 25,\n title: '$1,000 Credit + VIP Lifetime Access',\n reward: '$1,000 + VIP Pass',\n description: 'Direct Slack channel access to core founders and private beta track.',\n status: 'upcoming',\n },\n]\n\nconst recentReferrals: ReferralActivity[] = [\n {\n id: 'ref-1',\n name: 'Marcus Vance',\n email: 'marcus.v@acme.com',\n initials: 'MV',\n signedUpAt: 'Oct 14, 2024',\n status: 'paid',\n rewardAmount: '$25.00',\n },\n {\n id: 'ref-2',\n name: 'Sarah Jenkins',\n email: 's.jenkins@designcorp.io',\n initials: 'SJ',\n signedUpAt: 'Oct 02, 2024',\n status: 'paid',\n rewardAmount: '$25.00',\n },\n {\n id: 'ref-3',\n name: 'Devon Lane',\n email: 'devon@lane.co',\n initials: 'DL',\n signedUpAt: 'Sep 28, 2024',\n status: 'pending',\n rewardAmount: '$25.00',\n },\n {\n id: 'ref-4',\n name: 'Priya Patel',\n email: 'priya.patel@fintech.io',\n initials: 'PP',\n signedUpAt: 'Sep 15, 2024',\n status: 'paid',\n rewardAmount: '$25.00',\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-referral-program-widget, [ui-referral-program-widget]',\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 UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n \n Give $25, Get $25\n \n
\n

\n Refer Friends & Earn Credits\n

\n

\n Give your network $25 off their first year, and earn $25 credit for every active referral.\n

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

Referral Balance

\n
\n \n $150.00\n \n Available Credit\n 6 Successful Referrals\n
\n
\n
\n
\n 1 Pending ($25.00)\n \n
\n
\n
\n
\n
\n\n \n
\n
\n
\n \n

Share Your Referral Link

\n
\n

\n Send your personal invite link or share directly across social channels to earn rewards instantly.\n

\n
\n
\n \n
\n
\n \n
\n \n @if (copiedLink()) {\n \n } @else {\n \n }\n {{ copiedLink() ? 'Copied Link' : 'Copy Link' }}\n \n
\n\n \n\n \n
\n
\n \n \n \n \n Share to X\n \n \n \n \n \n Share to LinkedIn\n \n \n \n Share via Email\n \n
\n\n \n @if (copiedCode()) {\n \n } @else {\n \n }\n Invite Code:\n {{ referralCode }}\n @if (copiedCode()) {\n Copied!\n }\n \n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n

Milestone Rewards

\n
\n

\n Reach referral milestones to unlock credit bonuses, swag, and exclusive plan access.\n

\n
\n \n \n Tier 3 In Progress · 6 / 10 Referrals\n \n
\n
\n
\n \n
\n
\n \n Current Target: Tier 3 ($250 Credit + 1-Year Free Pro Plan)\n \n 60% (6 of 10 referrals)\n
\n \n

4 more successful referrals needed to unlock Tier 3 rewards.

\n
\n\n \n
\n @for (tier of tiers; track tier.id) {\n
\n
\n
\n \n Tier {{ tier.tier }} · {{ tier.referralsRequired }}\n {{ tier.referralsRequired === 1 ? 'Referral' : 'Referrals' }}\n \n @if (tier.status === 'completed') {\n \n \n Completed\n \n } @else if (tier.status === 'in-progress') {\n In Progress (6/10)\n } @else {\n \n \n Upcoming\n \n }\n
\n
\n

{{ tier.title }}

\n

{{ tier.description }}

\n
\n
\n
\n
\n Reward Perk:\n {{ tier.reward }}\n
\n
\n
\n }\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n

Recent Referrals

\n
\n

Track recent invitees, activation statuses, and credited referral payouts.

\n
\n 4 Recent Signups\n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n @for (referral of recentReferrals; track referral.id) {\n \n \n \n \n \n \n }\n \n
InviteeSigned UpStatusReward Amount
\n
\n \n {{ referral.initials }}\n \n
\n

{{ referral.name }}

\n

{{ referral.email }}

\n
\n
\n 		\n {{ referral.signedUpAt }}\n \n @if (referral.status === 'paid') {\n \n \n Reward Paid $25\n \n } @else {\n \n \n Pending Activation\n \n }\n \n \n {{ referral.status === 'paid' ? '+' + referral.rewardAmount : referral.rewardAmount }}\n \n
\n
\n
\n
\n
\n `,\n})\nexport class UiReferralProgramWidgetComponent {\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly Gift = Gift\n protected readonly Lock = Lock\n protected readonly Mail = Mail\n protected readonly Share2 = Share2\n protected readonly Target = Target\n protected readonly Trophy = Trophy\n protected readonly Users = Users\n protected readonly Wallet = Wallet\n\n protected readonly tiers = tiers\n protected readonly recentReferrals = recentReferrals\n\n @Input() referralUrl = 'https://uipkge.dev/invite/elena-rostova'\n @Input() referralCode = 'ELENA25'\n @Input('class') className?: string\n\n readonly copiedLink = signal(false)\n readonly copiedCode = signal(false)\n private timers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.timers.forEach((t) => clearTimeout(t)))\n }\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-5xl space-y-6', this.className)\n }\n\n get twitterShareUrl(): string {\n const text = 'Get $25 off your first year with my invite link:'\n return `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(this.referralUrl)}`\n }\n\n get linkedinShareUrl(): string {\n return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(this.referralUrl)}`\n }\n\n get emailShareUrl(): string {\n const subject = 'Get $25 off your subscription'\n const body = `Hey,\\n\\nUse my invite link to get $25 off your first year:\\n${this.referralUrl}\\n\\nUse invite code ${this.referralCode} at checkout!`\n return `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`\n }\n\n tierClass(tier: MilestoneTier): string {\n return cn(\n 'relative flex flex-col justify-between rounded-lg border p-4 transition-colors',\n tier.status === 'completed' && 'border-success/30 bg-success/5',\n tier.status === 'in-progress' && 'border-primary/50 bg-primary/5 ring-primary/20 shadow-xs ring-1',\n tier.status === 'upcoming' && 'border-border/60 bg-muted/20 opacity-80',\n )\n }\n\n async copyToClipboard(text: string, type: 'link' | 'code'): Promise {\n try {\n if (navigator?.clipboard?.writeText) {\n await navigator.clipboard.writeText(text)\n }\n } catch {\n // Fallback if clipboard API is unavailable\n }\n if (type === 'link') {\n this.copiedLink.set(true)\n this.timers.push(setTimeout(() => this.copiedLink.set(false), 2000))\n } else {\n this.copiedCode.set(true)\n this.timers.push(setTimeout(() => this.copiedCode.set(false), 2000))\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/referral-program-widget/referral-program-widget.component.ts" }, { "path": "packages/registry-angular/blocks/referral-program-widget/index.ts", "content": "export {\n UiReferralProgramWidgetComponent,\n type MilestoneTier,\n type ReferralActivity,\n} from './referral-program-widget.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/referral-program-widget/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "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/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Rewardful and Viral Loops-style customer referral program and milestone reward tracker. Features a balance summary header with available credits and referral counts, shareable link and code copy actions with quick social sharing, a 4-tier milestone stepper with dynamic progress, and a recent referrals activity table with payout statuses.", "categories": [ "marketing", "dashboard" ] }