{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "returns-portal", "title": "Returns Portal", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/returns-portal/returns-portal.component.ts", "content": "import {\n Component,\n Input,\n OnChanges,\n OnInit,\n SimpleChanges,\n computed,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n CreditCard,\n Download,\n Gift,\n LucideAngularModule,\n Printer,\n RefreshCw,\n Shirt,\n ShieldCheck,\n Truck,\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 { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiRadioGroupComponent, UiRadioGroupItemComponent } from '@/ui/radio-group/radio-group.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiStepperComponent, type StepperStep } from '@/ui/stepper/stepper.component'\n\nexport interface OrderItem {\n id: string\n name: string\n variant: string\n sku: string\n price: number\n maxQty: number\n}\n\nexport type ReturnsPortalResolution = 'exchange' | 'store-credit' | 'original-payment'\n\nconst steps: StepperStep[] = [\n { id: 1, title: 'Find Order' },\n { id: 2, title: 'Select Items' },\n { id: 3, title: 'Choose Resolution' },\n { id: 4, title: 'Confirm & Print' },\n]\n\nconst orderItems: OrderItem[] = [\n {\n id: 'item-1',\n name: 'Merino Wool Crewneck Sweater',\n variant: 'Midnight Navy / Size L',\n sku: 'MWC-NAV-L',\n price: 120,\n maxQty: 1,\n },\n {\n id: 'item-2',\n name: 'Classic Canvas High-Tops',\n variant: 'Off-White / US 10.5',\n sku: 'CCHT-OW-105',\n price: 85,\n maxQty: 1,\n },\n {\n id: 'item-3',\n name: 'Tailored Chino Trousers',\n variant: 'Olive / 32x32',\n sku: 'TCT-OLV-32',\n price: 95,\n maxQty: 2,\n },\n]\n\nconst returnReasonsList = ['Wrong size', 'Item defective', 'Not as described', 'Changed mind', 'Arrived late']\n\nconst exchangeSizesList = ['Small (S)', 'Medium (M)', 'Large (L)', 'Extra Large (XL)']\n\nconst defaultSelectedItems = (): Record => ({\n 'item-1': true,\n 'item-2': false,\n 'item-3': false,\n})\n\nconst defaultReturnQuantities = (): Record => ({\n 'item-1': 1,\n 'item-2': 1,\n 'item-3': 1,\n})\n\nconst defaultReturnReasons = (): Record => ({\n 'item-1': 'Wrong size',\n 'item-2': 'Changed mind',\n 'item-3': 'Item defective',\n})\n\nconst currency = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })\n\nconst OPTION_BASE = 'flex cursor-pointer flex-col gap-3 rounded-lg border p-4 transition-colors'\nconst OPTION_ACTIVE = 'border-primary bg-primary/[0.02] dark:bg-primary/10 shadow-xs'\nconst OPTION_IDLE = 'border-border hover:bg-muted/40'\n\n/**\n * Angular port of the React ReturnsPortal block: a Card wizard with a four-step Stepper\n * (Find Order, Select Items, Choose Resolution, Confirm & Print), an order lookup form, item\n * selection with per-item quantity and reason Selects, a resolution RadioGroup (exchange,\n * store credit with a +10% bonus, original payment) with a live summary, and a confirmation\n * screen with label download, drop-off steps and a QR pass. Backward navigation through the\n * stepper is free until the return is confirmed; forward goes through the footer button only.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-returns-portal, [ui-returns-portal]',\n standalone: true,\n // React renders the Card itself: the host stays out of layout and `class` goes to the card.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiInputComponent,\n UiRadioGroupComponent,\n UiRadioGroupItemComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiStepperComponent,\n ],\n template: `\n
\n
\n
\n
\n

Returns & Exchange Portal

\n

Self-serve return, exchange, or refund for your recent order.

\n
\n \n \n Prepaid Shipping\n \n
\n
\n\n
\n \n\n \n @if (step() === 1) {\n
\n
\n

Find your order

\n

\n Enter your order number and email address to start a return or exchange.\n

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

Found on your order confirmation email.

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

The email address used at checkout.

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

30-Day Hassle-Free Return Policy

\n

\n Eligible items can be returned within 30 days of delivery. Free shipping on all exchanges and store\n credit requests.\n

\n
\n
\n
\n }\n\n \n @if (step() === 2) {\n
\n
\n
\n

Select items to return

\n

\n Order {{ orderNumber() || '#ORD-84920' }} • Placed Oct 14, 2026 • 3 items eligible\n

\n
\n {{ selectedItemsCount() }} of 3 selected\n
\n\n
\n @for (item of orderItems; track item.id) {\n
\n
\n
\n \n
\n\n \n \n
\n\n
\n
\n
\n {{ item.name }}\n

{{ item.variant }} • SKU: {{ item.sku }}

\n
\n {{\n formatCurrency(item.price)\n }}\n
\n
\n
\n\n @if (isSelected(item.id)) {\n
\n
\n \n \n \n \n @for (q of quantityOptions(item.maxQty); track q) {\n {{ q }} {{ q === 1 ? 'item' : 'items' }} (of {{ item.maxQty }})\n }\n \n \n
\n\n
\n \n \n \n \n @for (reason of returnReasonsList; track reason) {\n {{ reason }}\n }\n \n \n
\n
\n }\n
\n }\n
\n\n
\n \n @if (selectedItemsCount() > 0) {\n {{ selectedItemsCount() }} item{{\n selectedItemsCount() === 1 ? '' : 's'\n }}\n selected\n } @else {\n No items selected yet\n }\n \n Estimated Value: {{ formatCurrency(itemsSubtotal()) }}\n
\n
\n }\n\n \n @if (step() === 3) {\n
\n
\n

Choose return resolution

\n

Select how you would like your return or refund handled.

\n
\n\n \n \n
\n
\n \n
\n
\n \n \n \n Free shipping\n
\n

\n Reserve replacement item immediately. Ships as soon as carrier scans the return package.\n

\n
\n
\n\n @if (resolution() === 'exchange') {\n
\n \n \n \n \n @for (size of exchangeSizesList; track size) {\n {{ size }}\n }\n \n \n
\n }\n
\n\n \n
\n
\n \n
\n
\n \n \n +10% Bonus\n Fastest refund\n
\n

\n Get {{ formatCurrency(totalStoreCredit()) }} in\n store credit ({{ formatCurrency(itemsSubtotal()) }} + {{ formatCurrency(storeCreditBonus()) }}\n bonus). Digital card delivered by email instantly upon drop-off scan.\n

\n
\n
\n
\n\n \n
\n
\n \n
\n
\n \n \n Visa •••• 4242\n
\n

\n Refund of {{ formatCurrency(itemsSubtotal()) }} back to your card. Processed in 3–5 business days\n after carrier drop-off.\n

\n
\n
\n
\n \n\n \n
\n
\n Selected items subtotal\n {{ formatCurrency(itemsSubtotal()) }}\n
\n @if (resolution() === 'store-credit') {\n
\n Bonus store credit (+10%)\n +{{ formatCurrency(storeCreditBonus()) }}\n
\n }\n
\n Prepaid return shipping\n FREE\n
\n \n {{ totalLabel() }}\n {{ totalValue() }}\n
\n
\n
\n }\n\n \n @if (step() === 4) {\n
\n
\n \n \n
\n

Return Authorized & Confirmed

\n

\n Your return request has been submitted. A prepaid shipping label and confirmation receipt have been sent\n to {{ email() || 'sarah.connor@example.com' }}.\n

\n
\n\n \n
\n
\n
\n Return ID\n

#RET-2026-849

\n
\n \n Authorized\n \n
\n\n
\n
\n Carrier\n

USPS Ground Advantage™

\n
\n
\n Tracking Number\n

9400 1118 9956 2849

\n
\n
\n Selected Resolution\n

{{ resolutionSummary() }}

\n
\n
\n
\n\n \n
\n \n \n {{ isDownloaded() ? 'Label Downloaded (PDF)' : 'Download Prepaid Shipping Label (PDF)' }}\n \n \n
\n\n \n
\n
\n

\n Carrier Drop-off Pass & Instructions\n

\n No printer required\n
\n\n
\n
\n
\n \n 1\n
\n
\n

Pack your items

\n

\n Place returned items with tags inside the original shipping bag or any sturdy box.\n

\n
\n
\n\n
\n \n 2\n
\n
\n

Attach label or show QR code

\n

\n Tape the downloaded shipping label to the box, or present the digital QR pass at the drop-off\n counter.\n

\n
\n
\n\n
\n \n 3\n
\n
\n

Drop off before Nov 15, 2026

\n

\n Bring to any USPS Post Office, USPS drop box, or authorized FedEx shipping point.\n

\n
\n
\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (dot of qrDots; track $index) {\n \n }\n \n RET-2026-849\n \n \n \n\n
\n \n Start another return\n \n
\n \n }\n \n\n @if (step() < 4) {\n
\n @if (step() > 1) {\n \n } @else {\n
\n }\n\n Step {{ step() }} of 4\n\n @if (step() === 1) {\n \n }\n\n @if (step() === 2) {\n \n }\n\n @if (step() === 3) {\n \n }\n
\n }\n \n `,\n})\nexport class UiReturnsPortalComponent implements OnChanges, OnInit {\n /** Step to open on (1 Find Order · 2 Select Items · 3 Choose Resolution · 4 Confirm & Print). */\n @Input() initialStep = 1\n @Input() initialOrderNumber = '#ORD-84920'\n @Input() initialEmail = 'sarah.connor@example.com'\n @Input('class') className?: string\n\n protected readonly steps = steps\n protected readonly orderItems = orderItems\n protected readonly returnReasonsList = returnReasonsList\n protected readonly exchangeSizesList = exchangeSizesList\n /** Data-dot modules of the QR pass, [x, y] in the 100×100 viewBox (React order). */\n protected readonly qrDots: ReadonlyArray = [\n [42, 12],\n [52, 12],\n [42, 24],\n [52, 24],\n [12, 42],\n [24, 42],\n [36, 42],\n [48, 42],\n [60, 42],\n [72, 42],\n [84, 42],\n [42, 54],\n [54, 54],\n [66, 54],\n [78, 54],\n [42, 66],\n [54, 66],\n [66, 78],\n [78, 66],\n [42, 78],\n [54, 78],\n [84, 78],\n ]\n\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly Gift = Gift\n protected readonly Printer = Printer\n protected readonly RefreshCw = RefreshCw\n protected readonly Shirt = Shirt\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Truck = Truck\n\n readonly step = signal(1)\n readonly orderNumber = signal('#ORD-84920')\n readonly email = signal('sarah.connor@example.com')\n readonly selectedItems = signal>(defaultSelectedItems())\n readonly returnQuantities = signal>(defaultReturnQuantities())\n readonly returnReasons = signal>(defaultReturnReasons())\n readonly resolution = signal('store-credit')\n readonly exchangeSize = signal('Medium (M)')\n readonly isDownloaded = signal(false)\n\n readonly selectedItemsCount = computed(() =>\n orderItems.reduce((acc, item) => (this.isSelected(item.id) ? acc + this.quantityFor(item.id) : acc), 0),\n )\n\n readonly itemsSubtotal = computed(() =>\n orderItems.reduce(\n (acc, item) => (this.isSelected(item.id) ? acc + item.price * this.quantityFor(item.id) : acc),\n 0,\n ),\n )\n\n readonly storeCreditBonus = computed(() => this.itemsSubtotal() * 0.1)\n readonly totalStoreCredit = computed(() => this.itemsSubtotal() + this.storeCreditBonus())\n\n readonly totalLabel = computed(() => {\n const r = this.resolution()\n return r === 'store-credit' ? 'Total Store Credit' : r === 'exchange' ? 'Exchange Value' : 'Total Refund'\n })\n\n readonly totalValue = computed(() =>\n this.resolution() === 'store-credit'\n ? this.formatCurrency(this.totalStoreCredit())\n : this.formatCurrency(this.itemsSubtotal()),\n )\n\n readonly resolutionSummary = computed(() => {\n const r = this.resolution()\n return r === 'store-credit'\n ? `Store Credit (${this.formatCurrency(this.totalStoreCredit())})`\n : r === 'exchange'\n ? `Exchange (${this.exchangeSize()})`\n : 'Refund to Visa •••• 4242'\n })\n\n get cardClass(): string {\n return cn('border-border mx-auto w-full max-w-3xl shadow-xs', this.className)\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n // React re-syncs the step whenever `initialStep` changes (useEffect on initialStep).\n if (changes['initialStep']) this.step.set(this.initialStep)\n }\n\n ngOnInit(): void {\n this.orderNumber.set(this.initialOrderNumber)\n this.email.set(this.initialEmail)\n }\n\n formatCurrency(val: number): string {\n return currency.format(val)\n }\n\n isSelected(id: string): boolean {\n return this.selectedItems()[id] ?? false\n }\n\n quantityFor(id: string): number {\n return this.returnQuantities()[id] || 1\n }\n\n quantityValue(id: string): string {\n return String(this.quantityFor(id))\n }\n\n reasonFor(id: string): string | undefined {\n return this.returnReasons()[id]\n }\n\n quantityOptions(maxQty: number): number[] {\n return Array.from({ length: maxQty }, (_, idx) => idx + 1)\n }\n\n itemClass(id: string): string {\n return cn(\n 'rounded-lg border p-4 transition-colors',\n this.isSelected(id)\n ? 'border-primary/50 bg-primary/[0.02] dark:bg-primary/10 shadow-xs'\n : 'border-border bg-card hover:bg-muted/20',\n )\n }\n\n optionClass(value: ReturnsPortalResolution): string {\n return cn(OPTION_BASE, this.resolution() === value ? OPTION_ACTIVE : OPTION_IDLE)\n }\n\n setQuantity(id: string, value: string): void {\n this.returnQuantities.update((prev) => ({ ...prev, [id]: Number(value) }))\n }\n\n setReason(id: string, value: string): void {\n this.returnReasons.update((prev) => ({ ...prev, [id]: value }))\n }\n\n setResolution(value: string): void {\n this.resolution.set(value as ReturnsPortalResolution)\n }\n\n onStepperInput(value: number): void {\n // Free backward navigation until the return is confirmed; forward goes through the footer.\n const current = this.step()\n if (value < current && current !== 4) this.step.set(value)\n }\n\n goToNext(): void {\n if (this.step() < 4) this.step.update((s) => s + 1)\n }\n\n goToPrevious(): void {\n const current = this.step()\n if (current > 1 && current < 4) this.step.set(current - 1)\n }\n\n toggleItemSelection(id: string): void {\n this.selectedItems.update((prev) => ({ ...prev, [id]: !prev[id] }))\n }\n\n reset(): void {\n this.step.set(1)\n this.isDownloaded.set(false)\n this.selectedItems.set(defaultSelectedItems())\n this.returnQuantities.set(defaultReturnQuantities())\n this.returnReasons.set(defaultReturnReasons())\n this.resolution.set('store-credit')\n this.exchangeSize.set('Medium (M)')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/returns-portal/returns-portal.component.ts" }, { "path": "packages/registry-angular/blocks/returns-portal/index.ts", "content": "export { UiReturnsPortalComponent, type OrderItem, type ReturnsPortalResolution } from './returns-portal.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/returns-portal/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/checkbox.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/radio-group.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/stepper.json" ], "description": "Self-serve e-commerce returns & exchange portal wizard: Stepper header (Find Order → Select Items → Choose Resolution → Confirm & Print Label), order lookup with email and order number, item selection list with return reasons and quantities, resolution selector (size exchange, store credit with +10% bonus, or original payment refund), and confirmation screen with printable prepaid shipping label, QR code drop-off instructions, and return summary.", "categories": [ "commerce", "ecommerce", "app" ] }