{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "loyalty-rewards-tier-hub", "title": "Loyalty Rewards Tier Hub", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/loyalty-rewards-tier-hub/LoyaltyRewardsTierHub.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Award,\n Check,\n Crown,\n Gift,\n Headphones,\n History,\n Lock,\n ShoppingBag,\n Tag,\n Ticket,\n Truck,\n Zap,\n} 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, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\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 LoyaltyPerk {\n id: string\n title: string\n subtitle: string\n description: string\n status: 'active' | 'locked'\n tierBadge: string\n unlockPoints?: number\n}\n\nexport interface LoyaltyReward {\n id: string\n title: string\n category: string\n pointsCost: number\n description: string\n unlocked: boolean\n pointsNeeded?: number\n code?: string\n}\n\nexport interface LoyaltyLedgerEntry {\n id: string\n title: string\n subtitle: string\n type: string\n date: string\n pointsChange: number\n isPositive: boolean\n}\n\nexport interface LoyaltyRewardsTierHubProps {\n customerName?: string\n tierName?: string\n currentPoints?: number\n targetPoints?: number\n pointValueDollars?: number\n multiplier?: string\n className?: string\n}\n\nconst perks: LoyaltyPerk[] = [\n {\n id: 'perk-shipping',\n title: 'Free Express Shipping on All Orders',\n subtitle: 'All Orders',\n description: 'Complimentary 2-day express shipping on every online order with zero minimum spend.',\n status: 'active',\n tierBadge: 'Active',\n },\n {\n id: 'perk-archive',\n title: 'Early Access to Private Archive Sales',\n subtitle: '48h Early Access',\n description: 'Shop seasonal private archives and limited capsule releases 48 hours before public launch.',\n status: 'active',\n tierBadge: 'Active',\n },\n {\n id: 'perk-stylist',\n title: 'Dedicated VIP Concierge & Personal Stylist',\n subtitle: '1-on-1 Stylist Line',\n description: 'Direct priority chat with our senior stylists for bespoke fashion curation and concierge care.',\n status: 'active',\n tierBadge: 'Active',\n },\n {\n id: 'perk-annual-gift',\n title: 'Diamond Exclusive Annual Gift',\n subtitle: 'Bespoke Curated Box',\n description: 'Curated luxury anniversary gift box ($120+ retail value) delivered automatically each winter.',\n status: 'locked',\n tierBadge: 'Unlocks at 3,000 pts',\n unlockPoints: 3000,\n },\n]\n\nconst rewards: LoyaltyReward[] = [\n {\n id: 'reward-15-off',\n title: '$15 Off Any Order',\n category: 'Store Credit Voucher',\n pointsCost: 1500,\n description: 'Instant digital coupon applied at checkout on any order above $50.',\n unlocked: true,\n code: 'VIP-SAVE15',\n },\n {\n id: 'reward-leather-pouch',\n title: 'Free Travel Leather Pouch',\n category: 'Exclusive Merchandise',\n pointsCost: 2000,\n description: 'Handcrafted Italian pebbled leather travel accessory pouch in signature Midnight Noir.',\n unlocked: true,\n code: 'CLAIM-POUCH24',\n },\n {\n id: 'reward-audio-30',\n title: '$30 Off Premium Audio',\n category: 'Partner Exclusive',\n pointsCost: 3000,\n description: 'Exclusive member markdown on noise-cancelling headphones and studio sound gear.',\n unlocked: false,\n pointsNeeded: 550,\n },\n]\n\nconst ledgerTransactions: LoyaltyLedgerEntry[] = [\n {\n id: 'tx-1',\n title: 'Order #ORD-9428 - Studio Silk Blouse',\n subtitle: 'Online Purchase · $190.00 subtotal',\n type: 'Earned · 2x Platinum Multiplier',\n date: 'Oct 18, 2024',\n pointsChange: 380,\n isPositive: true,\n },\n {\n id: 'tx-2',\n title: 'Redeemed: $10 Voucher Code #VIP-10OFF',\n subtitle: 'Rewards Catalog · Checkout Redemption',\n type: 'Reward Redemption',\n date: 'Oct 10, 2024',\n pointsChange: -1000,\n isPositive: false,\n },\n {\n id: 'tx-3',\n title: 'Order #ORD-9104 - Cashmere Wrap',\n subtitle: 'Online Purchase · $320.00 subtotal',\n type: 'Earned · 2x Platinum Multiplier',\n date: 'Sep 29, 2024',\n pointsChange: 640,\n isPositive: true,\n },\n {\n id: 'tx-4',\n title: 'Tier Upgrade Bonus - Platinum Milestone',\n subtitle: 'Milestone Threshold · 2,000 pts Achieved',\n type: 'Milestone Tier Reward',\n date: 'Sep 15, 2024',\n pointsChange: 500,\n isPositive: true,\n },\n]\n\nexport function LoyaltyRewardsTierHub({\n customerName = 'Elena Rostova',\n tierName = 'VIP Platinum Member',\n currentPoints = 2450,\n targetPoints = 3000,\n pointValueDollars = 24.5,\n multiplier = '2x Points Multiplier',\n className,\n}: LoyaltyRewardsTierHubProps) {\n const [redeemedMap, setRedeemedMap] = React.useState>({})\n\n const handleRedeem = (rewardId: string) => {\n setRedeemedMap((prev) => ({ ...prev, [rewardId]: true }))\n }\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n \n \n VIP Rewards Club\n \n
\n

\n Loyalty & Rewards Hub\n

\n

\n Track VIP tier progress, redeem points for luxury perks, and review your member transaction ledger.\n

\n
\n
\n\n {/* Customer Loyalty Hero Card */}\n \n \n {/* Profile Header & Tier Status */}\n
\n
\n \n ER\n \n
\n

{customerName}

\n

{tierName} · Member since 2022

\n
\n
\n\n \n \n Platinum Tier · 2x Points Multiplier\n \n
\n\n \n\n {/* Points Balance & Multiplier Display */}\n
\n {/* Balance Stat */}\n
\n
\n

\n Available Points Balance\n

\n
\n \n 2,450\n \n Points\n
\n
\n

\n Estimated reward cash value:{' '}\n $24.50 reward value\n

\n
\n\n {/* Tier Multiplier Stat */}\n
\n
\n

\n Current Multiplier\n

\n
\n 2x\n \n \n Active\n \n
\n
\n

\n Earn 2 points per $1 spent on all boutique catalog orders.\n

\n
\n\n {/* Next Reward Threshold */}\n
\n
\n

Next Tier Goal

\n
\n \n 550 pts\n \n to Diamond VIP\n
\n
\n

\n Unlocks 3x points multiplier and annual exclusive gift.\n

\n
\n
\n\n {/* Next Tier Progress Bar Section */}\n
\n
\n
\n \n Next Tier Progress: Diamond VIP\n
\n 2,450 / 3,000 Points\n
\n\n \n\n
\n \n 81.6% to Diamond VIP · 550 points to upgrade\n \n Target qualification date: Dec 31, 2024\n
\n
\n \n \n\n {/* 4 VIP Tier Privilege Perks Summary */}\n
\n
\n
\n

VIP Tier Privilege Perks

\n

\n Active benefits unlocked with your Platinum status and next-tier Diamond previews.\n

\n
\n \n 3 of 4 Perks Active\n \n
\n\n
\n {perks.map((perk) => (\n \n
\n
\n \n {perk.id === 'perk-shipping' && }\n {perk.id === 'perk-archive' && }\n {perk.id === 'perk-stylist' && }\n {perk.id === 'perk-annual-gift' && }\n
\n\n {perk.status === 'active' ? (\n \n \n Active\n \n ) : (\n \n \n Unlocks at 3,000 pts\n \n )}\n
\n\n
\n

{perk.title}

\n

{perk.subtitle}

\n

{perk.description}

\n
\n
\n\n
\n \n {perk.status === 'active' ? 'Included in Platinum VIP' : 'Requires Diamond Tier'}\n \n
\n
\n ))}\n
\n \n\n {/* Rewards Catalog Grid (3 unlockable rewards) */}\n
\n
\n
\n

Rewards Catalog

\n

\n Redeem your points balance for instant discount vouchers and complimentary luxury items.\n

\n
\n \n 2 Available to Redeem\n \n
\n\n
\n {rewards.map((reward) => (\n \n \n
\n \n {reward.category}\n \n
\n \n {reward.pointsCost.toLocaleString()} pts\n \n
\n
\n {reward.title}\n {reward.description}\n \n\n \n {/* When locked, show points shortfall */}\n {!reward.unlocked ? (\n
\n
\n Progress to unlock\n 2,450 / 3,000 pts\n
\n \n
\n ) : redeemedMap[reward.id] ? (\n
\n
\n \n Redeemed! Code:\n {reward.code}\n
\n
\n ) : null}\n \n\n \n {reward.unlocked && !redeemedMap[reward.id] && (\n handleRedeem(reward.id)}\n >\n \n Redeem Reward\n \n )}\n\n {reward.unlocked && redeemedMap[reward.id] && (\n \n \n Voucher Claimed\n \n )}\n\n {!reward.unlocked && (\n \n )}\n \n \n ))}\n
\n
\n\n {/* Points History Ledger */}\n \n \n
\n
\n
\n \n Points History Ledger\n
\n Recent earnings and redemption transactions on your VIP account.\n
\n \n Recent 4 Transactions\n \n
\n \n\n \n
\n \n \n \n Transaction Details\n Type & Multiplier\n Date\n Points Change\n \n \n \n {ledgerTransactions.map((tx) => (\n \n \n
\n \n {tx.isPositive && tx.pointsChange < 500 && (\n \n )}\n {tx.isPositive && tx.pointsChange >= 500 && }\n {!tx.isPositive && }\n
\n
\n

{tx.title}

\n

{tx.subtitle}

\n
\n \n \n \n {tx.type.includes('Multiplier') ? (\n \n \n {tx.type}\n \n ) : tx.type.includes('Milestone') ? (\n \n \n {tx.type}\n \n ) : (\n \n \n {tx.type}\n \n )}\n \n \n {tx.date}\n \n \n \n {tx.isPositive\n ? `+${tx.pointsChange.toLocaleString()} pts`\n : `${tx.pointsChange.toLocaleString()} pts`}\n \n \n \n ))}\n \n
\n
\n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/LoyaltyRewardsTierHub.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/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Sephora and Starbucks style VIP customer loyalty tier dashboard, points wallet, and rewards catalog. Features a customer hero card with points balance, reward valuation, and tier progress tracker, 4 VIP privilege perks with unlock statuses, a 3-item redeemable rewards catalog grid, and a recent points earnings & redemption history ledger.", "categories": [ "commerce", "ecommerce", "dashboard", "marketing" ] }