Order Confirm

1'use client'
2 
3import { Button } from '@/components/ui/button'
4import { ArrowRight, Calendar, MapPin } from 'lucide-react'
5import { demoOrderConfirm } from './demo/payment'
6 
7/**
8 * ═══════════════════════════════════════════════════════════════════════════
9 * OrderConfirmProps
10 * ═══════════════════════════════════════════════════════════════════════════
11 *
12 * Props for an order confirmation component with product image, delivery info,
13 * and confirm action. Displays responsive layouts for mobile and desktop.
14 */
15export interface OrderConfirmProps {
16  data?: {
17    /** Name of the product being ordered. */
18    productName?: string
19    /** Product variant such as color or size. */
20    productVariant?: string
21    /** URL to the product image. */
22    productImage?: string
23    /**
24     * Quantity of items being ordered.
25     * @default 1
26     */
27    quantity?: number
28    /** Total price for the order. */
29    price?: number
30    /** Expected delivery date string (e.g., "Tue. Dec 10"). */
31    deliveryDate?: string
32    /** Delivery address for the order. */
33    deliveryAddress?: string
34    /**
35     * Whether shipping is free for this order.
36     * @default true
37     */
38    freeShipping?: boolean
39  }
40  actions?: {
41    /** Called when the user confirms the order. */
42    onConfirm?: () => void
43  }
44  appearance?: {
45    /**
46     * Currency code for formatting the price.
47     * @default "USD"
48     */
49    currency?: string
50  }
51  control?: {
52    /**
53     * Shows loading state on the confirm button.
54     * @default false
55     */
56    isLoading?: boolean
57  }
58}
59 
60/**
61 * An order confirmation component with product image, delivery info, and confirm action.
62 * Displays responsive layouts for mobile and desktop with delivery details.
63 *
64 * Features:
65 * - Product image and details display
66 * - Variant and quantity information
67 * - Price with free shipping indicator
68 * - Delivery date and address
69 * - Confirm order button with loading state
70 * - Responsive mobile/desktop layouts
71 *
72 * @component
73 * @example
74 * ```tsx
75 * <OrderConfirm
76 *   data={{
77 *     productName: "Wireless Earbuds",
78 *     productVariant: "White",
79 *     productImage: "/images/earbuds.jpg",
80 *     quantity: 1,
81// … truncated