{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "order-confirmation", "title": "Order Confirmation", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/order-confirmation/order-confirmation.component.ts", "content": "// Post-purchase order confirmation & tracking page: success banner, 4-step shipment\n// stepper (grid on md+, vertical list below), itemized summary, and delivery / payment /\n// help cards. The order data lives in the constants below -- edit them in place.\nimport { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport {\n Check,\n CheckCircle2,\n CreditCard,\n Download,\n ExternalLink,\n HelpCircle,\n LucideAngularModule,\n Mail,\n MapPin,\n MessageSquare,\n Package,\n Truck,\n} from 'lucide-angular'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { cn } from '@/lib/utils'\n\nexport interface OrderItem {\n id: string\n name: string\n variant: string\n quantity: number\n price: string\n image: string\n}\n\nexport interface 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@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-order-confirmation, [ui-order-confirmation]',\n standalone: true,\n host: {\n 'data-slot': 'order-confirmation',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n ],\n template: `\n \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 sent a\n confirmation email to customer@example.com.\n

\n
\n\n
\n \n \n \n
\n \n \n\n \n
\n
\n
\n
\n \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
\n @for (step of trackingSteps; track step.id; let idx = $index, last = $last) {\n
\n
\n \n @if (idx > 0) {\n
\n }\n\n \n @if (!last) {\n
\n }\n\n \n
\n @switch (step.status) {\n @case ('completed') {\n \n \n
\n }\n @case ('current') {\n \n \n \n \n \n
\n }\n @default {\n \n \n
\n }\n }\n
\n
\n\n \n
\n \n {{ step.title }}\n

\n

{{ step.date }}

\n

{{ step.description }}

\n
\n \n }\n \n \n\n \n
\n @for (step of trackingSteps; track step.id; let idx = $index, last = $last) {\n
\n
\n @switch (step.status) {\n @case ('completed') {\n \n \n
\n }\n @case ('current') {\n \n \n \n \n \n
\n }\n @default {\n \n \n
\n }\n }\n\n @if (!last) {\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 \n
\n \n
\n
\n
\n

Order Summary

\n

3 items in shipment

\n
\n
\n \n
\n @for (item of orderItems; track item.id) {\n
\n
\n \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 \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 \n
\n Total\n $264.50\n
\n
\n
\n
\n\n \n
\n \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 \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 Paid\n
\n

Billing address matches shipping address

\n
\n
\n\n \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})\nexport class UiOrderConfirmationComponent {\n @Input('class') className?: string\n\n protected readonly orderItems = orderItems\n protected readonly trackingSteps = trackingSteps\n\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly ExternalLink = ExternalLink\n protected readonly HelpCircle = HelpCircle\n protected readonly Mail = Mail\n protected readonly MapPin = MapPin\n protected readonly MessageSquare = MessageSquare\n protected readonly Package = Package\n protected readonly Truck = Truck\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n /** The connector into step `idx + 1` is muted while that step is still upcoming. */\n protected nextIsUpcoming(idx: number): boolean {\n return trackingSteps[idx + 1]?.status === 'upcoming'\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/order-confirmation/order-confirmation.component.ts" }, { "path": "packages/registry-angular/blocks/order-confirmation/index.ts", "content": "export { UiOrderConfirmationComponent, type OrderItem, type TrackingStep } from './order-confirmation.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/order-confirmation/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/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" ] }