4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T196b,'use client' import { Button } from '@/components/ui/button' import { ArrowRight, Calendar, MapPin } from 'lucide-react' import { demoOrderConfirm } from './demo/payment' /** * ═══════════════════════════════════════════════════════════════════════════ * OrderConfirmProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for an order confirmation component with product image, delivery info, * and confirm action. Displays responsive layouts for mobile and desktop. */ export interface OrderConfirmProps { data?: { /** Name of the product being ordered. */ productName?: string /** Product variant such as color or size. */ productVariant?: string /** URL to the product image. */ productImage?: string /** * Quantity of items being ordered. * @default 1 */ quantity?: number /** Total price for the order. */ price?: number /** Expected delivery date string (e.g., "Tue. Dec 10"). */ deliveryDate?: string /** Delivery address for the order. */ deliveryAddress?: string /** * Whether shipping is free for this order. * @default true */ freeShipping?: boolean } actions?: { /** Called when the user confirms the order. */ onConfirm?: () => void } appearance?: { /** * Currency code for formatting the price. * @default "USD" */ currency?: string } control?: { /** * Shows loading state on the confirm button. * @default false */ isLoading?: boolean } } /** * An order confirmation component with product image, delivery info, and confirm action. * Displays responsive layouts for mobile and desktop with delivery details. * * Features: * - Product image and details display * - Variant and quantity information * - Price with free shipping indicator * - Delivery date and address * - Confirm order button with loading state * - Responsive mobile/desktop layouts * * @component * @example * ```tsx * console.log("Order confirmed") * }} * appearance={{ currency: "USD" }} * control={{ isLoading: false }} * /> * ``` */ export function OrderConfirm({ data, actions, appearance, control }: OrderConfirmProps) { const resolved: NonNullable = data ?? demoOrderConfirm const productName = resolved?.productName const productVariant = resolved?.productVariant const productImage = resolved?.productImage const quantity = resolved?.quantity ?? 1 const price = resolved?.price const deliveryDate = resolved?.deliveryDate const deliveryAddress = resolved?.deliveryAddress const freeShipping = resolved?.freeShipping ?? true const { onConfirm } = actions ?? {} const { currency = 'USD' } = appearance ?? {} const { isLoading = false } = control ?? {} const formatCurrency = (value: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(value) } return (

{/* Product info */}

{productImage && (

)}

{/* Mobile: stacked layout */} {productName && (

{productName}

)} {(productVariant || quantity) && (

{productVariant}{productVariant && quantity ? ' • ' : ''}Qty: {quantity}

)} {/* Mobile: price below product info */}

{price !== undefined &&

{formatCurrency(price)}

} {freeShipping && (

Free shipping

)}

{/* Desktop: price on the right */}

{price !== undefined &&

{formatCurrency(price)}

} {freeShipping && (

Free shipping

)}

{/* Delivery info & button */}

{/* Mobile: stacked, Desktop: inline */}

{deliveryDate && (

{deliveryDate}

)} {deliveryDate && deliveryAddress && •} {deliveryAddress && (

{deliveryAddress}

)}

) } 52:T452,// Demo data for Payment category components // This file contains sample data used for component previews and documentation import type { OrderItem } from '../types' // Default order items for OrderSummary export const demoOrderItems: OrderItem[] = [ { id: '1', name: 'Premium Headphones', quantity: 1, price: 199.99 }, { id: '2', name: 'Wireless Charger', quantity: 2, price: 29.99 } ] // Default order data for OrderSummary export const demoOrderData = { items: demoOrderItems, subtotal: 259.97, shipping: 9.99, tax: 21.58, discount: 25.0, discountCode: 'SAVE10', total: 266.54, } // OrderConfirm component data export const demoOrderConfirm = { productName: "Air Force 1 '07", productImage: 'https://ui.manifest.build/demo/shoe-1.png', price: 299, deliveryDate: 'Jan 20, 2024', } // AmountInput presets export const demoAmountPresets = [10, 25, 50, 100] // PaymentConfirmed component data export const demoPaymentConfirmed = { productName: "Air Force 1 '07", productImage: 'https://ui.manifest.build/demo/shoe-1.png', price: 299, deliveryDate: 'Jan 20, 2024', } 4e:["$","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"}]]}]}]]}],["$","$L4f",null,{"namespace":"@manifest","registryDependencies":["button","https://ui.manifest.build/r/manifest-types.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/payment/order-confirm.tsx","content":"$51","type":"registry:block","target":"components/ui/order-confirm.tsx"},{"path":"registry/payment/demo/payment.ts","content":"$52","type":"registry:lib","target":"components/ui/demo/payment.ts"}],"className":"h-[70svh] min-h-80"}]]}]