61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T8195,'use client' import * as React from 'react' import { Check, CheckCircle2, ChevronLeft, ChevronRight, CreditCard, Download, Printer, RefreshCw, ShieldCheck, Gift, Shirt, Truck, } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Checkbox } from '@/components/ui/checkbox' import { Input } from '@/components/ui/input' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Stepper } from '@/components/ui/stepper' export interface OrderItem { id: string name: string variant: string sku: string price: number maxQty: number } export interface ReturnsPortalProps { initialStep?: number initialOrderNumber?: string initialEmail?: string className?: string } const steps = [ { id: 1, title: 'Find Order' }, { id: 2, title: 'Select Items' }, { id: 3, title: 'Choose Resolution' }, { id: 4, title: 'Confirm & Print' }, ] const orderItems: OrderItem[] = [ { id: 'item-1', name: 'Merino Wool Crewneck Sweater', variant: 'Midnight Navy / Size L', sku: 'MWC-NAV-L', price: 120, maxQty: 1, }, { id: 'item-2', name: 'Classic Canvas High-Tops', variant: 'Off-White / US 10.5', sku: 'CCHT-OW-105', price: 85, maxQty: 1, }, { id: 'item-3', name: 'Tailored Chino Trousers', variant: 'Olive / 32x32', sku: 'TCT-OLV-32', price: 95, maxQty: 2, }, ] const returnReasonsList = ['Wrong size', 'Item defective', 'Not as described', 'Changed mind', 'Arrived late'] const exchangeSizesList = ['Small (S)', 'Medium (M)', 'Large (L)', 'Extra Large (XL)'] export function ReturnsPortal({ initialStep = 1, initialOrderNumber = '#ORD-84920', initialEmail = 'sarah.connor@example.com', className, }: ReturnsPortalProps) { const [step, setStep] = React.useState(initialStep) const [orderNumber, setOrderNumber] = React.useState(initialOrderNumber) const [email, setEmail] = React.useState(initialEmail) const [selectedItems, setSelectedItems] = React.useState>({ 'item-1': true, 'item-2': false, 'item-3': false, }) const [returnQuantities, setReturnQuantities] = React.useState>({ 'item-1': 1, 'item-2': 1, 'item-3': 1, }) const [returnReasons, setReturnReasons] = React.useState>({ 'item-1': 'Wrong size', 'item-2': 'Changed mind', 'item-3': 'Item defective', }) const [resolution, setResolution] = React.useState<'exchange' | 'store-credit' | 'original-payment'>('store-credit') const [exchangeSize, setExchangeSize] = React.useState('Medium (M)') const [isDownloaded, setIsDownloaded] = React.useState(false) React.useEffect(() => { setStep(initialStep) }, [initialStep]) const selectedItemsCount = orderItems.reduce((acc, item) => { if (selectedItems[item.id]) { return acc + (returnQuantities[item.id] || 1) } return acc }, 0) const itemsSubtotal = orderItems.reduce((acc, item) => { if (selectedItems[item.id]) { return acc + item.price * (returnQuantities[item.id] || 1) } return acc }, 0) const storeCreditBonus = itemsSubtotal * 0.1 const totalStoreCredit = itemsSubtotal + storeCreditBonus function formatCurrency(val: number) { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(val) } function onStepperInput(value: number) { if (value < step && step !== 4) { setStep(value) } } function goToNext() { if (step < 4) { setStep(step + 1) } } function goToPrevious() { if (step > 1 && step < 4) { setStep(step - 1) } } function toggleItemSelection(id: string) { setSelectedItems((prev) => ({ ...prev, [id]: !prev[id], })) } function reset() { setStep(1) setIsDownloaded(false) setSelectedItems({ 'item-1': true, 'item-2': false, 'item-3': false, }) setReturnQuantities({ 'item-1': 1, 'item-2': 1, 'item-3': 1, }) setReturnReasons({ 'item-1': 'Wrong size', 'item-2': 'Changed mind', 'item-3': 'Item defective', }) setResolution('store-credit') setExchangeSize('Medium (M)') } return (

Returns & Exchange Portal Self-serve return, exchange, or refund for your recent order.

Prepaid Shipping

{/* Step 1: Find Order */} {step === 1 && (

Find your order

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

Order number setOrderNumber(e.target.value)} placeholder="#ORD-84920" autoComplete="off" />

Found on your order confirmation email.

Email address setEmail(e.target.value)} type="email" placeholder="sarah.connor@example.com" autoComplete="email" />

The email address used at checkout.

30-Day Hassle-Free Return Policy

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

)} {/* Step 2: Select Items */} {step === 2 && (

Select items to return

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

{selectedItemsCount} of 3 selected

{orderItems.map((item) => (

toggleItemSelection(item.id)} />

{item.name}

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

{formatCurrency(item.price)}

{selectedItems[item.id] && (

Qty to return

Return reason

)}

))}

{selectedItemsCount > 0 ? ( <> {selectedItemsCount} item {selectedItemsCount === 1 ? '' : 's'} selected ) : ( 'No items selected yet' )} Estimated Value: {formatCurrency(itemsSubtotal)}

)} {/* Step 3: Choose Resolution */} {step === 3 && (

Choose return resolution

Select how you would like your return or refund handled.

setResolution(val as typeof resolution)} className="gap-3" > {/* Option A: Exchange */}

setResolution('exchange')} >

Exchange for different size / color Free shipping

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

{resolution === 'exchange' && (

e.stopPropagation()} > Select replacement size

)}

{/* Option B: Store Credit (+10% Bonus) */}

setResolution('store-credit')} >

Store Credit (+10% Bonus value) +10% Bonus Fastest refund

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

{/* Option C: Original Payment Method */}

setResolution('original-payment')} >

Original Payment Method Visa •••• 4242

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

{/* Summary calculation box */}

Selected items subtotal {formatCurrency(itemsSubtotal)}

{resolution === 'store-credit' && (

Bonus store credit (+10%) +{formatCurrency(storeCreditBonus)}

)}

Prepaid return shipping FREE

{resolution === 'store-credit' ? 'Total Store Credit' : resolution === 'exchange' ? 'Exchange Value' : 'Total Refund'} {resolution === 'store-credit' ? formatCurrency(totalStoreCredit) : formatCurrency(itemsSubtotal)}

)} {/* Step 4: Confirmation & Label */} {step === 4 && (

Return Authorized & Confirmed

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

{/* Return Details Overview */}

Return ID

#RET-2026-849

Authorized

Carrier

USPS Ground Advantage™

Tracking Number

9400 1118 9956 2849

Selected Resolution

{resolution === 'store-credit' ? `Store Credit (${formatCurrency(totalStoreCredit)})` : resolution === 'exchange' ? `Exchange (${exchangeSize})` : `Refund to Visa •••• 4242`}

{/* Action Download Buttons */}

{/* Drop-off instructions & QR code card */}

Carrier Drop-off Pass & Instructions

No printer required

Pack your items

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

Attach label or show QR code

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

Drop off before Nov 15, 2026

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

{/* QR code visual */}

RET-2026-849

)} {step < 4 && ( {step > 1 ? ( ) : (

)} Step {step} of 4 {step === 1 && ( )} {step === 2 && ( )} {step === 3 && ( )} )} ) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["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/checkbox.json","https://uipkge.dev/r/react/input.json","https://uipkge.dev/r/react/radio-group.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/stepper.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/registry-react/blocks/returns-portal/ReturnsPortal.tsx","content":"$63","type":"registry:block","target":"~/components/blocks/ReturnsPortal.tsx"}],"className":"h-[70svh] min-h-80"}]]}]