{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "order-confirmation", "title": "Order Confirmation", "type": "registry:block", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/order-confirmation/order-confirmation.ts", "content": "import { LitElement, css, html } from 'lit'\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'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/separator/separator'\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\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\n/**\n * — the registry OrderConfirmation block as a web component.\n *\n * Class strings and sample data are React's verbatim. The block is fully\n * static (React holds no state): success banner, desktop + mobile tracking\n * stepper, itemized summary with cost breakdown, and shipping / payment /\n * help cards. No props, no events.\n */\nexport class UipOrderConfirmation extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'order-confirmation')\n }\n\n render() {\n return html`\n
\n \n \n \n ${icon(CheckCircle2, 'circle-check', 'size-8 sm:size-10')}\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 ${icon(ExternalLink, 'external-link', 'size-4')} Track Shipment\n \n \n ${icon(Download, 'download', 'size-4')} Download Receipt\n \n Continue Shopping\n
\n \n \n\n \n \n
\n
\n ${icon(Truck, 'truck', 'text-primary size-4')}\n Shipment Progress\n In Transit\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
\n
\n ${trackingSteps.map(\n (step, idx) => html`
\n
\n ${idx > 0\n ? html`
`\n : html``}\n ${idx < trackingSteps.length - 1\n ? html`
`\n : html``}\n
\n ${step.status === 'completed'\n ? html`\n ${icon(Check, 'check', 'size-4')}\n
`\n : step.status === 'current'\n ? html`\n \n \n \n \n
`\n : html`\n ${icon(Package, 'package', 'size-3.5')}\n
`}\n \n \n
\n

\n ${step.title}\n

\n

${step.date}

\n

${step.description}

\n
\n `,\n )}\n \n \n\n
\n ${trackingSteps.map(\n (step, idx) => html`
\n
\n ${step.status === 'completed'\n ? html`
\n ${icon(Check, 'check', 'size-3.5')}\n
`\n : step.status === 'current'\n ? html`\n \n \n \n \n
`\n : html`\n ${icon(Package, 'package', 'size-3')}\n
`}\n ${idx < trackingSteps.length - 1\n ? html`
`\n : html``}\n \n
\n
\n

\n ${step.title}\n

\n ${step.date}\n
\n

${step.description}

\n
\n `,\n )}\n \n \n \n\n
\n
\n \n \n Order Summary\n 3 items in shipment\n \n \n
\n ${orderItems.map(\n (item) => html`
\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 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 Total\n $264.50\n
\n \n \n
\n\n
\n \n \n
\n ${icon(MapPin, 'map-pin', 'text-muted-foreground size-4')}\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 \n \n
\n ${icon(CreditCard, 'credit-card', 'text-muted-foreground size-4')}\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 Paid\n
\n

Billing address matches shipping address

\n \n \n\n \n \n
\n ${icon(HelpCircle, 'circle-help', 'text-muted-foreground size-4')}\n Need Help?\n
\n \n \n

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

\n
\n \n ${icon(MessageSquare, 'message-square', 'size-3.5')} Chat with Support\n \n \n ${icon(Mail, 'mail', 'size-3.5')} support@example.com\n \n
\n \n \n
\n
\n \n `\n }\n}\n\ncustomElements.get('uip-order-confirmation') || customElements.define('uip-order-confirmation', UipOrderConfirmation)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-order-confirmation': UipOrderConfirmation\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/order-confirmation/order-confirmation.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/separator.json" ] }