{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "referral-program-widget", "title": "Referral Program Widget", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/referral-program-widget/ReferralProgramWidget.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { Check, Clock, Copy, Gift, Lock, Mail, Share2, Target, Trophy, Users, Wallet } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\nexport interface ReferralProgramWidgetProps {\n referralUrl?: string\n referralCode?: string\n className?: 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\nexport function ReferralProgramWidget({\n referralUrl = 'https://uipkge.dev/invite/elena-rostova',\n referralCode = 'ELENA25',\n className,\n}: ReferralProgramWidgetProps) {\n const [copiedLink, setCopiedLink] = React.useState(false)\n const [copiedCode, setCopiedCode] = React.useState(false)\n\n const twitterShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(\n 'Get $25 off your first year with my invite link:',\n )}&url=${encodeURIComponent(referralUrl)}`\n\n const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(referralUrl)}`\n\n const emailShareUrl = `mailto:?subject=${encodeURIComponent(\n 'Get $25 off your subscription',\n )}&body=${encodeURIComponent(\n `Hey,\\n\\nUse my invite link to get $25 off your first year:\\n${referralUrl}\\n\\nUse invite code ${referralCode} at checkout!`,\n )}`\n\n const copyToClipboard = async (text: string, type: 'link' | 'code') => {\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\n if (type === 'link') {\n setCopiedLink(true)\n setTimeout(() => setCopiedLink(false), 2000)\n } else {\n setCopiedCode(true)\n setTimeout(() => setCopiedCode(false), 2000)\n }\n }\n\n return (\n
\n {/* Header Section */}\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 {/* Referral Balance Card */}\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 \n 1 Pending ($25.00)\n \n \n
\n
\n \n \n
\n\n {/* Share Your Referral Link Card */}\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 {/* Referral URL & Copy Action */}\n
\n
\n \n
\n copyToClipboard(referralUrl, 'link')}\n >\n {copiedLink ? (\n \n ) : (\n \n )}\n {copiedLink ? 'Copied Link' : 'Copy Link'}\n \n
\n\n \n\n {/* Social Share & Code Bar */}\n
\n
\n {/* Share on X / Twitter */}\n \n\n {/* Share to LinkedIn */}\n \n\n {/* Share via Email */}\n \n
\n\n {/* Invite Code Button */}\n copyToClipboard(referralCode, 'code')}\n >\n {copiedCode ? (\n \n ) : (\n \n )}\n Invite Code:\n {referralCode}\n {copiedCode && Copied!}\n \n
\n \n \n\n {/* Milestone Rewards Progress Stepper */}\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 {/* Progress Stepper Track Header */}\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

\n 4 more successful referrals needed to unlock Tier 3 rewards.\n

\n
\n\n {/* 4 Milestone Tiers Grid */}\n
\n {tiers.map((tier) => (\n \n
\n
\n \n Tier {tier.tier} · {tier.referralsRequired}{' '}\n {tier.referralsRequired === 1 ? 'Referral' : 'Referrals'}\n \n\n {tier.status === 'completed' && (\n \n \n Completed\n \n )}\n {tier.status === 'in-progress' && (\n \n In Progress (6/10)\n \n )}\n {tier.status === 'upcoming' && (\n \n \n Upcoming\n \n )}\n
\n\n
\n

{tier.title}

\n

{tier.description}

\n
\n
\n\n
\n
\n Reward Perk:\n {tier.reward}\n
\n
\n
\n ))}\n
\n \n \n\n {/* Recent Referrals Activity Table */}\n \n \n
\n
\n
\n \n Recent Referrals\n
\n \n Track recent invitees, activation statuses, and credited referral payouts.\n \n
\n \n 4 Recent Signups\n \n
\n \n \n
\n \n \n \n Invitee\n Signed Up\n Status\n Reward Amount\n \n \n \n {recentReferrals.map((referral) => (\n \n \n
\n \n {referral.initials}\n \n
\n

{referral.name}

\n

{referral.email}

\n
\n
\n \n \n {referral.signedUpAt}\n \n \n {referral.status === 'paid' ? (\n \n \n Reward Paid $25\n \n ) : (\n \n \n Pending Activation\n \n )}\n \n \n \n {referral.status === 'paid' ? `+${referral.rewardAmount}` : referral.rewardAmount}\n \n \n \n ))}\n \n
\n
\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ReferralProgramWidget.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }