"use client"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { cn } from "@/lib/utils"; import { Sparkles } from "lucide-react"; interface OrderSummaryCardProps { items?: { label: string; count: number; cost: number; }[]; deliveryFee?: number; serviceCharge?: number; coupon?: { label: string; value: number; }; onPlaceOrder?: () => void; currency?: string; } const mockItems = [ { label: "AI Pro Membership", count: 1, cost: 79.99, }, ]; export function OrderSummaryCard({ items = mockItems, deliveryFee = 0, serviceCharge = 4.99, coupon = { label: "NEWUSER", value: 10 }, currency = "USD", onPlaceOrder, }: OrderSummaryCardProps) { const total = items.reduce((sum, item) => sum + item.count * item.cost, 0); const netAmount = total + serviceCharge + deliveryFee - (coupon?.value ?? 0); const formatCurrency = (amount: number) => new Intl.NumberFormat("en-US", { style: "currency", currency, }).format(amount); return (

Order Summary

A clear view of your purchase

{/* Item List */}

{items.map((item, index) => (

{item.label}

{item.count} × {formatCurrency(item.cost)}

{formatCurrency(item.count * item.cost)}

))}

{/* Charges Breakdown */}

Service {formatCurrency(serviceCharge)}

{deliveryFee > 0 && (

Delivery {formatCurrency(deliveryFee)}

)} {coupon && (

Coupon ({coupon.label}) -{formatCurrency(coupon.value)}

)}

{/* Total */}

Total {formatCurrency(netAmount)}

{/* Action Button */} ); }

Prop	Type	Default	Description
`items`	`object[]`	-	Array of order items with cost details
`deliveryFee`	`number`	`0`	Delivery fee amount
`serviceCharge`	`number`	`4.99`	Service charge amount
`coupon`	`object`	-	Coupon discount information
`currency`	`string`	`"USD"`	Currency code for formatting
`onPlaceOrder`	`function`	-	Callback function for checkout action

Order Summary Card

Installation

Props