{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "gift-card-balance-checker", "title": "Gift Card Balance Checker", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/gift-card-balance-checker/gift-card-balance-checker.component.ts", "content": "import { Component, DestroyRef, Input, computed, inject, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n ArrowDownLeft,\n ArrowUpRight,\n Check,\n CheckCircle2,\n Copy,\n CreditCard,\n Gift,\n HelpCircle,\n Lock,\n LucideAngularModule,\n Plus,\n RefreshCw,\n ShieldCheck,\n ShoppingBag,\n Wallet,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\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 { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport {\n UiTooltipComponent,\n UiTooltipContentComponent,\n UiTooltipProviderComponent,\n UiTooltipTriggerComponent,\n} from '@/ui/tooltip/tooltip.component'\n\nexport interface GiftCardTransactionRecord {\n id: string\n date: string\n reference: string\n title: string\n subtitle?: string\n type: 'activation' | 'redemption' | 'reload'\n amount: number\n balanceAfter: number\n status: 'Completed' | 'Pending'\n}\n\nexport type GiftCardFilterType = 'all' | 'redemptions' | 'loads'\n\nconst initialTransactions: GiftCardTransactionRecord[] = [\n {\n id: 'tx-1',\n date: 'Dec 19, 2024',\n reference: '#ORD-84112',\n title: 'Store Checkout Redemption',\n subtitle: 'Order #ORD-84112 · Leather Travel Wallet',\n type: 'redemption',\n amount: -15.0,\n balanceAfter: 150.0,\n status: 'Completed',\n },\n {\n id: 'tx-2',\n date: 'Nov 04, 2024',\n reference: '#ORD-84920',\n title: 'Store Checkout Redemption',\n subtitle: 'Order #ORD-84920 · Merino Knit Sweater',\n type: 'redemption',\n amount: -35.0,\n balanceAfter: 165.0,\n status: 'Completed',\n },\n {\n id: 'tx-3',\n date: 'Oct 12, 2024',\n reference: '#ACT-99014',\n title: 'Initial Activation & Fund Issue',\n subtitle: 'Digital Storefront Pass Issued',\n type: 'activation',\n amount: 200.0,\n balanceAfter: 200.0,\n status: 'Completed',\n },\n]\n\n/** Groups digits in fours: \"7482 - 9104 - 6382 - 8492\" (max 16 digits). */\nexport function formatGiftCardInput(raw: string): string {\n const digits = raw.replace(/\\D/g, '').slice(0, 16)\n return digits.replace(/(.{4})(?=.)/g, '$1 - ')\n}\n\n/**\n * Angular port of the React GiftCardBalanceChecker block: card lookup form with a digital\n * gift-card hero, quick fund reloads, balance metrics, a filterable redemption ledger and an\n * in-store barcode pass.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gift-card-balance-checker, [ui-gift-card-balance-checker]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"gift-card-balance-checker\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTooltipComponent,\n UiTooltipContentComponent,\n UiTooltipProviderComponent,\n UiTooltipTriggerComponent,\n ],\n template: `\n \n
\n
\n
\n

Check Gift Card Balance

\n \n \n Storefront Pass\n \n
\n

\n Check your remaining card balance, review past order redemptions, or reload funds.\n

\n
\n\n
\n \n \n \n \n PIN & Card Guide\n
\n \n Locate the 16-digit card code on the back of your physical card or inside your digital gift email. The\n 4-digit security PIN is under the scratch-off foil.\n \n \n \n
\n \n\n \n @if (feedbackMessage()) {\n \n
\n \n {{ feedbackMessage() }}\n
\n \n }\n\n \n
\n \n
\n \n
\n
\n
\n

Card Lookup

\n @if (isVerified()) {\n \n \n Active Card\n \n }\n
\n

\n Enter your gift card credentials to view live balance and activity.\n

\n
\n\n
\n \n
\n
\n \n \n \n \n \n \n \n Enter the 16 digits on the back of your card or in your receipt email.\n \n \n \n
\n\n \n \n
\n\n \n
\n
\n \n \n \n \n \n \n \n The 4-digit PIN is revealed by scratching the silver foil or listed in your digital claim email.\n \n \n \n
\n\n \n \n
\n\n \n @if (isChecking()) {\n \n Verifying Balance...\n } @else {\n \n Check Balance\n }\n \n
\n
\n\n \n \n
\n \n
\n
\n \n \n
\n
\n

Lumen Store

\n

Digital Gift Pass

\n
\n
\n\n \n \n Verified Active\n \n
\n\n \n
\n
\n Available Balance\n \n
\n
\n NFC\n
\n
\n\n
\n \\${{ currentBalance().toFixed(2) }}\n USD\n
\n
\n\n \n
\n
\n
\n •••• •••• •••• {{ lastFourDigits() }}\n \n @if (copied()) {\n \n } @else {\n \n }\n \n
\n @if (copied()) {\n Copied!\n }\n
\n\n
\n Never Expires · No Inactivity Fees\n PIN: ••••\n
\n
\n
\n \n\n \n
\n \n\n \n
\n
\n
\n

\n Quick Reload Funds\n

\n \n
\n
\n
\n

\n Top up your gift card instantly with a saved payment method.\n

\n
\n \n + $25.00\n \n \n + $50.00\n \n \n + $100.00\n \n
\n
\n
\n
\n \n\n \n
\n \n
\n
\n
\n Available Balance\n \n
\n

\n \\${{ currentBalance().toFixed(2) }}\n

\n

\n \n Ready to spend\n

\n
\n\n
\n
\n Total Value Loaded\n \n
\n

\n \\${{ totalLoaded().toFixed(2) }}\n

\n

All top-ups & issue

\n
\n\n
\n
\n Total Redeemed\n \n
\n

\n -\\${{ totalSpent().toFixed(2) }}\n

\n

Past store orders

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

Redemption & Activity History

\n

\n Detailed ledger of card issuance, promotional top-ups, and store checkouts.\n

\n
\n\n \n
\n \n \n \n
\n
\n
\n\n
\n
\n
\n \n \n Date\n Activity & Reference\n Type\n Amount\n Resulting Balance\n \n \n \n @for (record of filteredTransactions(); track record.id) {\n \n {{ record.date }}\n \n
\n

{{ record.title }}

\n @if (record.subtitle) {\n

{{ record.subtitle }}

\n }\n
\n \n \n @if (record.type === 'activation') {\n \n Activation\n \n }\n @if (record.type === 'reload') {\n \n Reload\n \n }\n @if (record.type === 'redemption') {\n Redemption\n }\n \n {{ amountLabel(record) }}\n \n \\${{ record.balanceAfter.toFixed(2) }}\n \n \n }\n \n
\n
\n
\n\n \n
\n \n Protected by 256-bit encryption · Zero liability policy\n
\n
\n \n \n Refresh Ledger\n \n
\n
\n
\n\n \n
\n
\n
\n

\n \n In-Store Digital Pass\n

\n

\n Present this barcode at checkout in any physical store location to scan and redeem card funds.\n

\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n {{ cardNumber() }}\n
\n
\n
\n \n \n `,\n})\nexport class UiGiftCardBalanceCheckerComponent {\n @Input('class') className?: string\n\n private readonly destroyRef = inject(DestroyRef)\n private readonly timers = new Set>()\n\n protected readonly ArrowDownLeft = ArrowDownLeft\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly CreditCard = CreditCard\n protected readonly Gift = Gift\n protected readonly HelpCircle = HelpCircle\n protected readonly Lock = Lock\n protected readonly Plus = Plus\n protected readonly RefreshCw = RefreshCw\n protected readonly ShieldCheck = ShieldCheck\n protected readonly ShoppingBag = ShoppingBag\n protected readonly Wallet = Wallet\n\n readonly cardNumber = signal('7482 - 9104 - 6382 - 8492')\n readonly securityPin = signal('4829')\n readonly isChecking = signal(false)\n readonly isVerified = signal(true)\n readonly copied = signal(false)\n readonly applied = signal(false)\n readonly feedbackMessage = signal(null)\n readonly filterType = signal('all')\n readonly transactions = signal(initialTransactions)\n\n readonly currentBalance = computed(() => {\n const list = this.transactions()\n return list.length === 0 ? 0 : list[0]!.balanceAfter\n })\n\n readonly totalLoaded = computed(() =>\n this.transactions()\n .filter((t) => t.amount > 0)\n .reduce((sum, t) => sum + t.amount, 0),\n )\n\n readonly totalSpent = computed(() =>\n Math.abs(\n this.transactions()\n .filter((t) => t.amount < 0)\n .reduce((sum, t) => sum + t.amount, 0),\n ),\n )\n\n readonly lastFourDigits = computed(() => {\n const digits = this.cardNumber().replace(/\\D/g, '')\n return digits.length >= 4 ? digits.slice(-4) : '8492'\n })\n\n readonly filteredTransactions = computed(() => {\n const filter = this.filterType()\n const list = this.transactions()\n if (filter === 'redemptions') return list.filter((t) => t.type === 'redemption')\n if (filter === 'loads') return list.filter((t) => t.type === 'activation' || t.type === 'reload')\n return list\n })\n\n constructor() {\n this.destroyRef.onDestroy(() => {\n for (const t of this.timers) clearTimeout(t)\n this.timers.clear()\n })\n }\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n protected filterClass(type: GiftCardFilterType): string {\n return cn(\n 'rounded px-2.5 py-1 font-medium transition-colors',\n this.filterType() === type\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n protected amountClass(record: GiftCardTransactionRecord): string {\n return cn('text-right text-sm font-medium tabular-nums', record.amount > 0 ? 'text-success' : 'text-foreground')\n }\n\n protected amountLabel(record: GiftCardTransactionRecord): string {\n return record.amount > 0 ? `+$${record.amount.toFixed(2)}` : `-$${Math.abs(record.amount).toFixed(2)}`\n }\n\n private later(fn: () => void, ms: number): void {\n const t = setTimeout(() => {\n this.timers.delete(t)\n fn()\n }, ms)\n this.timers.add(t)\n }\n\n onCardNumberChange(value: string): void {\n this.cardNumber.set(formatGiftCardInput(value))\n }\n\n onPinChange(value: string): void {\n this.securityPin.set(value.replace(/\\D/g, '').slice(0, 4))\n }\n\n checkBalance(): void {\n this.isChecking.set(true)\n this.feedbackMessage.set(null)\n this.later(() => {\n this.isChecking.set(false)\n this.isVerified.set(true)\n this.feedbackMessage.set(`Gift card verified. Current active balance is $${this.currentBalance().toFixed(2)}.`)\n this.later(() => this.feedbackMessage.set(null), 4000)\n }, 500)\n }\n\n copyCardNumber(): void {\n const raw = this.cardNumber().replace(/\\s+/g, '')\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(raw).catch(() => {})\n }\n this.copied.set(true)\n this.later(() => this.copied.set(false), 2000)\n }\n\n applyToOrder(): void {\n this.copyCardNumber()\n this.applied.set(true)\n this.feedbackMessage.set(`Card ending in ${this.lastFourDigits()} copied and applied to your checkout session!`)\n this.later(() => {\n this.applied.set(false)\n this.feedbackMessage.set(null)\n }, 4000)\n }\n\n reloadFunds(amount: number): void {\n const newBalance = this.currentBalance() + amount\n const newRecord: GiftCardTransactionRecord = {\n id: `tx-${Date.now()}`,\n date: 'Today',\n reference: `#RLD-${Math.floor(10000 + Math.random() * 90000)}`,\n title: 'Manual Online Fund Reload',\n subtitle: `Instant Online Top-Up (+ $${amount.toFixed(2)})`,\n type: 'reload',\n amount,\n balanceAfter: newBalance,\n status: 'Completed',\n }\n this.transactions.update((prev) => [newRecord, ...prev])\n this.feedbackMessage.set(\n `Successfully reloaded +$${amount.toFixed(2)}! New card balance: $${newBalance.toFixed(2)}.`,\n )\n this.later(() => this.feedbackMessage.set(null), 4000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/gift-card-balance-checker/gift-card-balance-checker.component.ts" }, { "path": "packages/registry-angular/blocks/gift-card-balance-checker/index.ts", "content": "export {\n UiGiftCardBalanceCheckerComponent,\n formatGiftCardInput,\n type GiftCardFilterType,\n type GiftCardTransactionRecord,\n} from './gift-card-balance-checker.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/gift-card-balance-checker/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", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/tooltip.json" ], "description": "Customer storefront gift card balance lookup, live digital card passbook, quick fund reloading, and complete redemption audit history ledger.", "categories": [ "commerce", "ecommerce", "finance", "app" ] }