{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "loyalty-rewards-tier-hub", "title": "Loyalty Rewards Tier Hub", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/loyalty-rewards-tier-hub/loyalty-rewards-tier-hub.component.ts", "content": "import { Component, Input, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Award,\n Check,\n Crown,\n Gift,\n Headphones,\n History,\n Lock,\n LucideAngularModule,\n ShoppingBag,\n Tag,\n Ticket,\n Truck,\n Zap,\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.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 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\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\n/**\n * VIP loyalty tier dashboard: customer hero card with points balance, multiplier and\n * next-tier progress, the four tier privilege perks, a three-item rewards catalog with\n * redeemable vouchers, and the points history ledger. Angular port of the React\n * `LoyaltyRewardsTierHub` block (same markup, classes, copy and sample data).\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-loyalty-rewards-tier-hub, [ui-loyalty-rewards-tier-hub]',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n host: {\n '[attr.data-slot]': '\"loyalty-rewards-tier-hub\"',\n '[class]': 'hostClass',\n },\n template: `\n \n
\n
\n
\n \n \n VIP Rewards Club\n \n
\n

Loyalty & Rewards Hub

\n

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

\n
\n
\n\n \n
\n
\n \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 \n
\n \n
\n
\n

\n Available Points Balance\n

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

\n Estimated reward cash value:\n $24.50 reward value\n

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

Current Multiplier

\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 \n \n
\n

Next Tier Goal

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

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

\n
\n
\n\n \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 \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 @for (perk of perks; track perk.id) {\n \n
\n
\n
\n @if (perk.id === 'perk-shipping') {\n \n }\n @if (perk.id === 'perk-archive') {\n \n }\n @if (perk.id === 'perk-stylist') {\n \n }\n @if (perk.id === 'perk-annual-gift') {\n \n }\n
\n\n @if (perk.status === 'active') {\n \n \n Active\n \n } @else {\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 \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 @for (reward of rewards; track reward.id) {\n \n
\n
\n \n {{ reward.category }}\n \n
\n \n {{ formatPoints(reward.pointsCost) }} pts\n \n
\n
\n

{{ reward.title }}

\n

{{ reward.description }}

\n
\n\n
\n \n @if (!reward.unlocked) {\n
\n
\n Progress to unlock\n 2,450 / 3,000 pts\n
\n
\n
\n } @else if (isRedeemed(reward.id)) {\n \n
\n \n Redeemed! Code:\n {{ reward.code }}\n
\n
\n }\n
\n\n
\n @if (reward.unlocked && !isRedeemed(reward.id)) {\n \n }\n\n @if (reward.unlocked && isRedeemed(reward.id)) {\n \n \n Voucher Claimed\n \n }\n\n @if (!reward.unlocked) {\n \n }\n
\n
\n }\n \n \n\n \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 @for (tx of ledgerTransactions; track tx.id) {\n \n \n
\n \n @if (tx.isPositive && tx.pointsChange < 500) {\n \n }\n @if (tx.isPositive && tx.pointsChange >= 500) {\n \n }\n @if (!tx.isPositive) {\n \n }\n
\n
\n

{{ tx.title }}

\n

{{ tx.subtitle }}

\n
\n
\n \n \n @if (tx.type.includes('Multiplier')) {\n \n \n {{ tx.type }}\n \n } @else if (tx.type.includes('Milestone')) {\n \n \n {{ tx.type }}\n \n } @else {\n \n \n {{ tx.type }}\n \n }\n \n \n {{ tx.date }}\n \n \n \n {{\n tx.isPositive\n ? '+' + formatPoints(tx.pointsChange) + ' pts'\n : formatPoints(tx.pointsChange) + ' pts'\n }}\n \n \n \n }\n \n
\n
\n
\n \n `,\n})\nexport class UiLoyaltyRewardsTierHubComponent {\n @Input() customerName = 'Elena Rostova'\n @Input() tierName = 'VIP Platinum Member'\n @Input() currentPoints = 2450\n @Input() targetPoints = 3000\n @Input() pointValueDollars = 24.5\n @Input() multiplier = '2x Points Multiplier'\n @Input('class') className?: string\n\n protected readonly cn = cn\n protected readonly perks = perks\n protected readonly rewards = rewards\n protected readonly ledgerTransactions = ledgerTransactions\n\n protected readonly Award = Award\n protected readonly Check = Check\n protected readonly Crown = Crown\n protected readonly Gift = Gift\n protected readonly Headphones = Headphones\n protected readonly History = History\n protected readonly Lock = Lock\n protected readonly ShoppingBag = ShoppingBag\n protected readonly Tag = Tag\n protected readonly Ticket = Ticket\n protected readonly Truck = Truck\n protected readonly Zap = Zap\n\n /** Reward ids the member has redeemed in this session. */\n readonly redeemedMap = signal>({})\n\n get hostClass(): string {\n return cn('mx-auto block w-full max-w-5xl space-y-6', this.className)\n }\n\n isRedeemed(rewardId: string): boolean {\n return this.redeemedMap()[rewardId] === true\n }\n\n redeem(rewardId: string): void {\n this.redeemedMap.update((prev) => ({ ...prev, [rewardId]: true }))\n }\n\n protected formatPoints(value: number): string {\n return value.toLocaleString()\n }\n\n protected perkIconClass(perk: LoyaltyPerk): string {\n return cn(\n 'flex size-9 shrink-0 items-center justify-center rounded-lg border',\n perk.id === 'perk-shipping' && 'border-success/20 bg-success/10 text-success',\n perk.id === 'perk-archive' && 'border-chart-1/30 bg-chart-1/10 text-chart-1',\n perk.id === 'perk-stylist' && 'border-info/20 bg-info/10 text-info',\n perk.id === 'perk-annual-gift' && 'border-border/60 bg-muted text-muted-foreground',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/loyalty-rewards-tier-hub/loyalty-rewards-tier-hub.component.ts" }, { "path": "packages/registry-angular/blocks/loyalty-rewards-tier-hub/index.ts", "content": "export {\n UiLoyaltyRewardsTierHubComponent,\n type LoyaltyLedgerEntry,\n type LoyaltyPerk,\n type LoyaltyReward,\n} from './loyalty-rewards-tier-hub.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/loyalty-rewards-tier-hub/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/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }