{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "checkout-flow", "title": "Checkout Flow", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/checkout-flow/checkout-flow.component.ts", "content": "// Three-step checkout (cart → payment → confirm) with an inline PaymentForm, a success\n// screen that fires a confetti burst, and an error screen with retry. Async submit is\n// forwarded to the consumer-provided `onSubmit`, which returns an `orderId` shown on the\n// success screen. Port of the React block 1:1.\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n EventEmitter,\n Input,\n Output,\n computed,\n inject,\n signal,\n} from '@angular/core'\nimport { ArrowLeft, LucideAngularModule, Minus, Plus, Trash2 } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiPaymentCardComponent } from '@/ui/payment-card/payment-card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiStepperComponent, type StepperStep } from '@/ui/stepper/stepper.component'\nimport { UiPaymentFormComponent, type PaymentPayload } from '../payment-form/payment-form.component'\n\nexport type CheckoutCardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'\n\nexport interface CartItem {\n id: string\n name: string\n image?: string\n qty: number\n price: number\n}\n\nexport type CheckoutStep = 'cart' | 'payment' | 'confirm' | 'success' | 'error'\n\ninterface Particle {\n id: number\n x: number\n y: number\n color: string\n size: number\n rot: number\n}\n\nconst stepperSteps: StepperStep[] = [\n { id: 'cart', title: 'Cart' },\n { id: 'payment', title: 'Payment' },\n { id: 'confirm', title: 'Confirm' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-checkout-flow, [ui-checkout-flow]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiButtonComponent,\n UiPaymentCardComponent,\n UiPaymentFormComponent,\n UiSeparatorComponent,\n UiStepperComponent,\n ],\n template: `\n
\n \n @if (step() !== 'success' && step() !== 'error') {\n
\n \n
\n }\n\n
\n \n @if (step() === 'cart') {\n
\n

Your cart

\n\n @if (cart().length === 0) {\n
Your cart is empty.
\n } @else {\n
    \n @for (item of cart(); track item.id) {\n
  • \n
    \n @if (item.image) {\n \n }\n
    \n
    \n

    {{ item.name }}

    \n

    {{ fmt(item.price) }} each

    \n
    \n
    \n \n {{ item.qty }}\n \n
    \n
    {{ fmt(item.qty * item.price) }}
    \n \n
    • \n }\n
\n }\n\n \n\n
\n
\n
Subtotal
\n
{{ fmt(subtotal()) }}
\n
\n @if (shippingFee() > 0) {\n
\n
Shipping
\n
{{ fmt(shippingFee()) }}
\n
\n }\n @if (taxRate() > 0) {\n
\n
Tax
\n
{{ fmt(tax()) }}
\n
\n }\n
\n
Total
\n
{{ fmt(total()) }}
\n
\n
\n\n
\n \n \n
\n
\n }\n\n \n @if (step() === 'payment') {\n
\n \n Back to cart\n \n \n
\n }\n\n \n @if (step() === 'confirm') {\n
\n

Review your order

\n\n @if (paymentPayload(); as payload) {\n
\n \n
\n

Paying with card ending {{ lastFour(payload.number) }}

\n

{{ payload.name }} · expires {{ payload.expiry }}

\n \n
\n
\n }\n\n
    \n @for (item of cart(); track item.id) {\n
  • \n {{ item.qty }} × {{ item.name }}\n {{ fmt(item.qty * item.price) }}\n
    • \n }\n
\n\n
\n
\n
Subtotal
\n
{{ fmt(subtotal()) }}
\n
\n @if (shippingFee() > 0) {\n
\n
Shipping
\n
{{ fmt(shippingFee()) }}
\n
\n }\n @if (taxRate() > 0) {\n
\n
Tax
\n
{{ fmt(tax()) }}
\n
\n }\n
\n
Total
\n
{{ fmt(total()) }}
\n
\n
\n\n
\n \n \n
\n
\n }\n\n \n @if (step() === 'success') {\n
\n \n
\n @for (p of particles(); track p.id) {\n
\n }\n
\n\n
\n \n \n \n
\n

Order placed

\n

Thanks — a confirmation will be sent shortly.

\n
#{{ orderId() }}
\n \n
\n }\n\n \n @if (step() === 'error') {\n
\n \n \n \n \n
\n

Payment failed

\n

{{ errorMessage() }}

\n
\n \n \n
\n
\n }\n
\n \n `,\n})\nexport class UiCheckoutFlowComponent {\n protected readonly ArrowLeft = ArrowLeft\n protected readonly Minus = Minus\n protected readonly Plus = Plus\n protected readonly Trash2 = Trash2\n\n protected readonly stepperSteps = stepperSteps\n\n private readonly _items = signal([])\n @Input() set items(v: CartItem[]) {\n const list = (v ?? []).map((i) => ({ ...i }))\n this._items.set(list)\n this.cart.set(list.map((i) => ({ ...i })))\n }\n private readonly _currency = signal('USD')\n @Input() set currency(v: string) {\n if (v) this._currency.set(v)\n }\n get currency(): string {\n return this._currency()\n }\n readonly shippingFee = signal(0)\n @Input('shippingFee') set shippingFeeInput(v: number) {\n this.shippingFee.set(v ?? 0)\n }\n readonly taxRate = signal(0)\n @Input('taxRate') set taxRateInput(v: number) {\n this.taxRate.set(v ?? 0)\n }\n @Input() onSubmit?: (data: PaymentPayload) => Promise<{ orderId: string }>\n @Input('class') className?: string\n\n @Output() readonly complete = new EventEmitter<{ orderId: string }>()\n @Output() readonly cancel = new EventEmitter()\n\n get rootClass(): string {\n return cn(\n 'bg-card text-card-foreground mx-auto w-full max-w-3xl overflow-hidden rounded-xl border shadow-sm',\n this.className,\n )\n }\n\n readonly step = signal('cart')\n readonly cart = signal([])\n readonly paymentPayload = signal(null)\n readonly orderId = signal(null)\n readonly lastError = signal(null)\n readonly placing = signal(false)\n readonly particles = signal([])\n\n private confettiTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.confettiTimer))\n }\n\n readonly subtotal = computed(() => this.cart().reduce((s, i) => s + i.qty * i.price, 0))\n readonly tax = computed(() => this.subtotal() * this.taxRate())\n readonly total = computed(() => this.subtotal() + this.shippingFee() + this.tax())\n\n readonly stepIndex = computed(() => {\n const s = this.step()\n if (s === 'cart') return 1\n if (s === 'payment') return 2\n return 3\n })\n\n readonly errorMessage = computed(() => this.lastError()?.message || 'Something went wrong while charging your card.')\n\n fmt(n: number): string {\n try {\n return new Intl.NumberFormat(undefined, { style: 'currency', currency: this._currency() }).format(n)\n } catch {\n return `${this._currency()} ${n.toFixed(2)}`\n }\n }\n\n lastFour(number: string): string {\n return number.replace(/\\D/g, '').slice(-4)\n }\n\n go(next: CheckoutStep): void {\n this.step.set(next)\n if (next === 'success') this.fireConfetti()\n }\n\n dec(item: CartItem): void {\n if (item.qty > 1) {\n item.qty--\n this.cart.update((prev) => [...prev])\n }\n }\n\n inc(item: CartItem): void {\n item.qty++\n this.cart.update((prev) => [...prev])\n }\n\n removeItem(item: CartItem): void {\n this.cart.update((prev) => prev.filter((i) => i.id !== item.id))\n }\n\n /** PaymentForm hook: capture the payload and defer the real charge to the confirm step. */\n readonly captureForConfirm = async (payload: PaymentPayload): Promise => {\n this.paymentPayload.set(payload)\n }\n\n onPaymentSuccess(): void {\n this.go('confirm')\n }\n\n async placeOrder(): Promise {\n if (!this.paymentPayload() || this.placing()) return\n this.placing.set(true)\n try {\n if (this.onSubmit) {\n const res = await this.onSubmit(this.paymentPayload()!)\n this.orderId.set(res?.orderId ?? Math.random().toString(36).slice(2, 10).toUpperCase())\n } else {\n this.orderId.set(Math.random().toString(36).slice(2, 10).toUpperCase())\n }\n this.complete.emit({ orderId: this.orderId()! })\n this.go('success')\n } catch (err) {\n this.lastError.set(err instanceof Error ? err : new Error(String(err)))\n this.go('error')\n } finally {\n this.placing.set(false)\n }\n }\n\n private fireConfetti(): void {\n if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return\n const colors = ['#22c55e', '#3b82f6', '#eab308', '#ec4899', '#f97316', '#8b5cf6']\n this.particles.set(\n Array.from({ length: 60 }, (_, id) => ({\n id,\n x: 50 + (Math.random() - 0.5) * 20,\n y: 40 + (Math.random() - 0.5) * 10,\n color: colors[Math.floor(Math.random() * colors.length)]!,\n size: 4 + Math.random() * 6,\n rot: Math.random() * 360,\n })),\n )\n clearTimeout(this.confettiTimer)\n this.confettiTimer = setTimeout(() => this.particles.set([]), 1800)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/checkout-flow/checkout-flow.component.ts" }, { "path": "packages/registry-angular/blocks/checkout-flow/index.ts", "content": "export {\n UiCheckoutFlowComponent,\n type CartItem,\n type CheckoutCardBrand,\n type CheckoutStep,\n} from './checkout-flow.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/checkout-flow/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/payment-card.json", "https://uipkge.dev/r/angular/payment-form.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/stepper.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Three-step checkout (cart → payment → confirm) with an inline PaymentForm, a success screen that fires a confetti burst, and an error screen with retry. Async submit is forwarded to the consumer-provided `onSubmit`, which returns an `orderId` that ends up on the success screen.", "categories": [ "commerce" ] }