Order Summary

1import { CheckCircle, Package } from "lucide-react";
2import type { ReactElement } from "react";
3import { cn, Separator } from "./_adapter";
4import type {
5  OrderSummaryProps,
6  OrderItem,
7  Pricing,
8  OrderDecision,
9  OrderSummaryVariant,
10} from "./schema";
11 
12function formatCurrency(amount: number, currency: string): string {
13  try {
14    return new Intl.NumberFormat(undefined, {
15      style: "currency",
16      currency,
17    }).format(amount);
18  } catch {
19    return `${currency} ${amount.toFixed(2)}`;
20  }
21}
22 
23function formatQuantity(quantity: number): string {
24  return quantity === 1 ? "" : `Qty: ${quantity}`;
25}
26 
27function ItemImage({ src, alt }: { src?: string; alt: string }) {
28  if (!src) {
29    return (
30      <div className="bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-md">
31        <Package
32          aria-hidden="true"
33          focusable="false"
34          className="text-muted-foreground h-5 w-5"
35        />
36      </div>
37    );
38  }
39 
40  return (
41    <img
42      src={src}
43      alt={alt}
44      width={48}
45      height={48}
46      className="h-12 w-12 shrink-0 rounded-md object-cover"
47    />
48  );
49}
50 
51function OrderItemRow({
52  item,
53  currency,
54}: {
55  item: OrderItem;
56  currency: string;
57}) {
58  const quantity = item.quantity ?? 1;
59  const quantityText = formatQuantity(quantity);
60  const hasDescription = item.description || quantityText;
61  const lineTotal = item.unitPrice * quantity;
62 
63  return (
64    <div className="flex gap-3">
65      <ItemImage src={item.imageUrl} alt={item.name} />
66      <div className="flex min-w-0 flex-1 items-center justify-between">
67        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
68          <div className="flex items-center justify-between">
69            <span className="truncate text-sm font-medium">{item.name}</span>
70            <span className="truncate text-sm tabular-nums">
71              {formatCurrency(lineTotal, currency)}
72            </span>
73          </div>
74          {hasDescription && (
75            <div className="text-muted-foreground truncate text-sm">
76              {[item.description, quantityText].filter(Boolean).join(" · ")}
77            </div>
78          )}
79        </div>
80      </div>
81    </div>
82  );
83}
84 
85function PricingBreakdown({
86  pricing,
87  className,
88}: {
89  pricing: Pricing;
90  className?: string;
91}) {
92  const currency = pricing.currency ?? "USD";
93 
94  return (
95    <dl className={cn("flex flex-col gap-2 text-sm", className)}>
96      <div className="flex justify-between gap-4">
97// … truncated