{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "order-confirmation", "title": "Order Confirmation", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/order-confirmation/OrderConfirmation.tsx", "content": "'use client'\n\nimport {\n Check,\n CheckCircle2,\n CreditCard,\n Download,\n ExternalLink,\n HelpCircle,\n Mail,\n MapPin,\n MessageSquare,\n Package,\n Truck,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\ninterface OrderItem {\n id: string\n name: string\n variant: string\n quantity: number\n price: string\n image: string\n}\n\ninterface TrackingStep {\n id: string\n title: string\n date: string\n status: 'completed' | 'current' | 'upcoming'\n description: string\n}\n\ninterface OrderConfirmationProps {\n className?: string\n}\n\nconst orderItems: OrderItem[] = [\n {\n id: 'item-1',\n name: 'Studio Wireless Noise-Canceling Headphones',\n variant: 'Space Gray • Over-Ear',\n quantity: 1,\n price: '$179.00',\n image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=160&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-2',\n name: 'Braided USB-C Fast Charging Cable (2m)',\n variant: 'Midnight Black • 100W PD',\n quantity: 2,\n price: '$38.00',\n image: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=160&auto=format&fit=crop&q=80',\n },\n {\n id: 'item-3',\n name: 'Magnetic Aluminum Desk Stand',\n variant: 'Silver • Anodized Aluminum',\n quantity: 1,\n price: '$35.00',\n image: 'https://images.unsplash.com/photo-1586105251261-72a756497a11?w=160&auto=format&fit=crop&q=80',\n },\n]\n\nconst trackingSteps: TrackingStep[] = [\n {\n id: 'step-1',\n title: 'Order Placed',\n date: 'Aug 21, 2026 • 10:42 AM',\n status: 'completed',\n description: 'Payment authorized & order confirmed',\n },\n {\n id: 'step-2',\n title: 'Processing',\n date: 'Aug 22, 2026 • 02:15 PM',\n status: 'completed',\n description: 'Item picked & packed at warehouse',\n },\n {\n id: 'step-3',\n title: 'Shipped',\n date: 'Aug 23, 2026 • 09:30 AM',\n status: 'current',\n description: 'In transit via FedEx Priority • Chicago, IL',\n },\n {\n id: 'step-4',\n title: 'Delivered',\n date: 'Est. Aug 27, 2026',\n status: 'upcoming',\n description: 'Estimated delivery to front door',\n },\n]\n\nexport function OrderConfirmation({ className }: OrderConfirmationProps) {\n return (\n
\n {/* Success Banner Card */}\n \n \n
\n \n
\n\n
\n
\n \n Order Confirmed\n
\n

Thank you for your order!

\n

\n We've received your order #ORD-92841 and\n sent a confirmation email to customer@example.com.\n

\n
\n\n
\n \n \n \n
\n \n \n\n {/* Tracking Stepper Card */}\n \n \n
\n
\n \n Shipment Progress\n \n In Transit\n \n
\n

\n Carrier: FedEx Priority • Tracking:{' '}\n #FX-9821734910\n

\n
\n
\n Estimated Delivery:\n Thursday, Aug 27, 2026\n
\n \n \n {/* Desktop Stepper (md+) */}\n
\n
\n {trackingSteps.map((step, idx) => (\n
\n
\n {/* Connecting Line before current step */}\n {idx > 0 && (\n \n )}\n\n {/* Connecting Line after current step */}\n {idx < trackingSteps.length - 1 && (\n \n )}\n\n {/* Step Indicator Circle */}\n
\n {step.status === 'completed' ? (\n
\n \n
\n ) : step.status === 'current' ? (\n
\n \n \n \n \n
\n ) : (\n
\n \n
\n )}\n
\n
\n\n {/* Step Info */}\n
\n \n {step.title}\n

\n

{step.date}

\n

{step.description}

\n
\n
\n ))}\n
\n
\n\n {/* Mobile Stepper (< md) */}\n
\n {trackingSteps.map((step, idx) => (\n
\n
\n {step.status === 'completed' ? (\n
\n \n
\n ) : step.status === 'current' ? (\n
\n \n \n \n \n
\n ) : (\n
\n \n
\n )}\n\n {idx < trackingSteps.length - 1 && (\n \n )}\n
\n\n
\n
\n \n {step.title}\n

\n {step.date}\n
\n

{step.description}

\n
\n
\n ))}\n
\n \n \n\n {/* 2-Column Details Grid */}\n
\n {/* Left Column: Itemized Order Summary */}\n
\n \n \n Order Summary\n 3 items in shipment\n \n \n {/* Items list */}\n
\n {orderItems.map((item) => (\n
\n
\n {item.name}\n
\n
\n

{item.name}

\n

{item.variant}

\n

Qty: {item.quantity}

\n
\n
\n

{item.price}

\n
\n
\n ))}\n
\n\n \n\n {/* Cost breakdown */}\n
\n
\n Subtotal\n $252.00\n
\n
\n Shipping (FedEx Priority)\n Free\n
\n
\n Estimated Tax\n $12.50\n
\n
\n\n \n\n {/* Total */}\n
\n Total\n $264.50\n
\n \n \n
\n\n {/* Right Column: Customer & Delivery Details */}\n
\n {/* Shipping Address Card */}\n \n \n
\n \n Shipping Address\n
\n \n \n
\n

Alex Morgan

\n

742 Evergreen Terrace, Suite 4B

\n

Springfield, OR 97477

\n

United States

\n

+1 (555) 234-5678

\n
\n
\n Delivery Method:\n FedEx Priority Express\n
\n \n \n\n {/* Payment Method Card */}\n \n \n
\n \n Payment Method\n
\n \n \n
\n
\n
\n VISA\n
\n
\n

Visa ending in 4242

\n

Expires 08/29

\n
\n
\n \n Paid\n \n
\n

Billing address matches shipping address

\n \n \n\n {/* Need Help Card */}\n \n \n
\n \n Need Help?\n
\n \n \n

\n Questions about your order? Chat with support or email support@example.com.\n

\n
\n \n \n \n support@example.com\n \n
\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/OrderConfirmation.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "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/separator.json" ], "description": "Post-purchase order confirmation & tracking page featuring a success banner with emerald checkmark halo, 4-step shipment progress bar with pulsing active state, itemized order breakdown, and customer delivery & payment cards.", "categories": [ "commerce", "ecommerce" ] }