60: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"] 61: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"] 62:T48ce,'use client' import * as React from 'react' import { ArrowLeft, Minus, Plus, Trash2 } from 'lucide-react' import { PaymentCard } from '@/components/ui/payment-card' import { Button } from '@/components/ui/button' import { Stepper } from '@/components/ui/stepper' import { Separator } from '@/components/ui/separator' import { PaymentForm } from '@/components/blocks/PaymentForm' type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown' interface PaymentPayload { number: string name: string expiry: string cvc: string brand: CardBrand } interface CartItem { id: string name: string image?: string qty: number price: number } export interface CheckoutFlowProps { items: CartItem[] currency?: string shippingFee?: number taxRate?: number onSubmit?: (data: PaymentPayload) => Promise<{ orderId: string }> onComplete?: (payload: { orderId: string }) => void onCancel?: () => void } type Step = 'cart' | 'payment' | 'confirm' | 'success' | 'error' interface Particle { id: number x: number y: number vx: number vy: number rot: number vr: number color: string size: number } const STYLE_ID = 'checkout-flow-styles' const STYLE_CONTENT = ` .checkout-flow-anim-forward, .checkout-flow-anim-back { animation-duration: 280ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-fill-mode: both; } .checkout-flow-anim-forward { animation-name: checkout-flow-forward; } .checkout-flow-anim-back { animation-name: checkout-flow-back; } @keyframes checkout-flow-forward { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes checkout-flow-back { from { transform: translateX(-24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .checkout-flow-check-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: checkout-flow-check-draw 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms forwards; } @keyframes checkout-flow-check-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .checkout-flow-anim-forward, .checkout-flow-anim-back { animation-duration: 0ms; } .checkout-flow-check-draw { animation: none; stroke-dashoffset: 0; } } ` const stepperSteps = [ { id: 'cart', title: 'Cart' }, { id: 'payment', title: 'Payment' }, { id: 'confirm', title: 'Confirm' }, ] export function CheckoutFlow({ items, currency = 'USD', shippingFee = 0, taxRate = 0, onSubmit, onComplete, onCancel, }: CheckoutFlowProps) { const [step, setStep] = React.useState('cart') const [direction, setDirection] = React.useState<'forward' | 'back'>('forward') const [cart, setCart] = React.useState(() => items.map((i) => ({ ...i }))) const [paymentPayload, setPaymentPayload] = React.useState(null) const [orderId, setOrderId] = React.useState(null) const [lastError, setLastError] = React.useState(null) const [placing, setPlacing] = React.useState(false) // Mirror Vue's watch(() => props.items): reset the working cart when the // incoming items prop changes. React.useEffect(() => { setCart(items.map((i) => ({ ...i }))) }, [items]) // Inject keyframes + reduced-motion rules once. React.useEffect(() => { if (typeof document === 'undefined') return if (document.getElementById(STYLE_ID)) return const el = document.createElement('style') el.id = STYLE_ID el.textContent = STYLE_CONTENT document.head.appendChild(el) }, []) function go(next: Step) { const order: Record = { cart: 0, payment: 1, confirm: 2, success: 3, error: 3 } setDirection(order[next] >= order[step] ? 'forward' : 'back') setStep(next) } const subtotal = React.useMemo(() => cart.reduce((s, i) => s + i.qty * i.price, 0), [cart]) const tax = React.useMemo(() => subtotal * taxRate, [subtotal, taxRate]) const total = React.useMemo(() => subtotal + shippingFee + tax, [subtotal, shippingFee, tax]) const fmt = (n: number) => { try { return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n) } catch { return `${currency} ${n.toFixed(2)}` } } const stepIndex = step === 'cart' ? 1 : step === 'payment' ? 2 : 3 function dec(item: CartItem) { if (item.qty > 1) setCart((prev) => prev.map((i) => (i.id === item.id ? { ...i, qty: i.qty - 1 } : i))) } function inc(item: CartItem) { setCart((prev) => prev.map((i) => (i.id === item.id ? { ...i, qty: i.qty + 1 } : i))) } function remove(item: CartItem) { setCart((prev) => prev.filter((i) => i.id !== item.id)) } async function placeOrder() { if (!paymentPayload || placing) return setPlacing(true) try { let nextOrderId: string if (onSubmit) { const res = await onSubmit(paymentPayload) nextOrderId = res?.orderId ?? Math.random().toString(36).slice(2, 10).toUpperCase() } else { nextOrderId = Math.random().toString(36).slice(2, 10).toUpperCase() } setOrderId(nextOrderId) onComplete?.({ orderId: nextOrderId }) go('success') } catch (err) { setLastError(err instanceof Error ? err : new Error(String(err))) go('error') } finally { setPlacing(false) } } function onPaymentSuccess() { go('confirm') } function captureFormPayload(payload: PaymentPayload) { setPaymentPayload(payload) } // Confetti — 60 particles, simple physics, ~1.8s const [particles, setParticles] = React.useState([]) const confettiRaf = React.useRef(null) const reducedMotion = typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false const fireConfetti = React.useCallback(() => { if (reducedMotion) return // Pull theme tokens at runtime so confetti follows the active palette // (light/dark mode + any consumer theme override). Falls back to a // sensible default if the variable isn't defined. const cs = typeof window !== 'undefined' ? getComputedStyle(document.documentElement) : null const tok = (name: string, fallback: string) => cs?.getPropertyValue(name).trim() || fallback const colors = [ tok('--chart-1', 'oklch(0.65 0.18 145)'), tok('--chart-2', 'oklch(0.6 0.22 260)'), tok('--chart-3', 'oklch(0.7 0.16 75)'), tok('--chart-4', 'oklch(0.65 0.2 330)'), tok('--chart-5', 'oklch(0.6 0.22 30)'), tok('--primary', 'oklch(0.55 0.22 260)'), ] const initial: Particle[] = Array.from({ length: 60 }, (_, id) => ({ id, x: 50, y: 40, vx: (Math.random() - 0.5) * 12, vy: -Math.random() * 14 - 4, rot: Math.random() * 360, vr: (Math.random() - 0.5) * 20, color: colors[Math.floor(Math.random() * colors.length)], size: 4 + Math.random() * 6, })) setParticles(initial) const start = performance.now() const tick = (now: number) => { const elapsed = now - start if (elapsed > 1800) { setParticles([]) confettiRaf.current = null return } setParticles((prev) => prev.map((p) => ({ ...p, x: p.x + p.vx * 0.25, y: p.y + p.vy * 0.25, vy: p.vy + 0.45, rot: p.rot + p.vr, })), ) confettiRaf.current = requestAnimationFrame(tick) } confettiRaf.current = requestAnimationFrame(tick) }, [reducedMotion]) React.useEffect(() => { if (step === 'success') fireConfetti() }, [step, fireConfetti]) React.useEffect(() => { return () => { if (confettiRaf.current) cancelAnimationFrame(confettiRaf.current) } }, []) const animClass = direction === 'forward' ? 'checkout-flow-anim-forward' : 'checkout-flow-anim-back' return (

{/* Stepper header (hidden on end states) */} {step !== 'success' && step !== 'error' && (

)}

{/* CART */} {step === 'cart' && (

Your cart

{cart.length === 0 ? (

Your cart is empty.

) : (

{item.image && }

{item.name}

{fmt(item.price)} each

{item.qty}

{fmt(item.qty * item.price)}

)}

Subtotal: {fmt(subtotal)}
Shipping: {fmt(shippingFee)}
Tax: {fmt(tax)}
Total: {fmt(total)}

)} {/* PAYMENT */} {step === 'payment' && (

{ /* parent could react */ void b }} onSuccess={onPaymentSuccess} onSubmit={async (payload) => { captureFormPayload(payload) /* defer real call to confirm step */ }} />

)} {/* CONFIRM */} {step === 'confirm' && (

Review your order

{paymentPayload && ( )}

Paying with card ending {paymentPayload?.number.slice(-4)}

{paymentPayload?.name} · expires {paymentPayload?.expiry}

{item.qty} × {item.name} {fmt(item.qty * item.price)}

Subtotal: {fmt(subtotal)}
Shipping: {fmt(shippingFee)}
Tax: {fmt(tax)}
Total: {fmt(total)}

)} {/* SUCCESS */} {step === 'success' && (

{/* Confetti layer */}

{particles.map((p) => (

))}

Order placed

Thanks — a confirmation will be sent shortly.

#{orderId}

)} {/* ERROR */} {step === 'error' && (

Payment failed

{lastError?.message || 'Something went wrong while charging your card.'}

)}

) } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/payment-card.json","https://uipkge.dev/r/react/payment-form.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/stepper.json","https://uipkge.dev/r/react/separator.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/checkout-flow/CheckoutFlow.tsx","content":"$62","type":"registry:block","target":"~/components/blocks/CheckoutFlow.tsx"}],"className":"h-[70svh] min-h-80"}]]}]