Checkout summary card

1/* eslint-disable @next/next/no-img-element -- lomi. UI registry components are framework-portable copy-paste components. */
2 
3import * as React from 'react';
4 
5export interface CheckoutSummaryItem {
6  name: string;
7  quantity?: number;
8  amount: number;
9  unitAmount?: number;
10  imageUrl?: string;
11}
12 
13export interface CheckoutSummaryFee {
14  name: string;
15  amount: number;
16  label?: string;
17}
18 
19export interface CheckoutSummaryCardProps {
20  /** Product or payment link title shown above the price. */
21  title: string;
22  items?: CheckoutSummaryItem[];
23  subtotal: number;
24  fees?: number | CheckoutSummaryFee[];
25  discount?: number;
26  total: number;
27  currency: string;
28  description?: string;
29  productImageUrl?: string;
30  className?: string;
31}
32 
33function cn(...classes: Array<string | false | null | undefined>) {
34  return classes.filter(Boolean).join(' ');
35}
36 
37function formatAmount(amount: number) {
38  return new Intl.NumberFormat('fr-FR', {
39    maximumFractionDigits: 0,
40  }).format(amount);
41}
42 
43function normalizeFees(
44  fees: number | CheckoutSummaryFee[] | undefined,
45): CheckoutSummaryFee[] {
46  if (!fees) return [];
47  if (typeof fees === 'number') {
48    return fees > 0 ? [{ name: 'Fees', amount: fees }] : [];
49  }
50  return fees.filter((fee) => fee.amount > 0);
51}
52 
53export function CheckoutSummaryCard({
54  title,
55  items = [],
56  subtotal,
57  fees,
58  discount = 0,
59  total,
60  currency,
61  description,
62  productImageUrl,
63  className,
64}: CheckoutSummaryCardProps) {
65  const feeRows = normalizeFees(fees);
66  const totalItems = items.reduce((sum, item) => sum + (item.quantity ?? 1), 0);
67  const showCart = items.length > 1;
68 
69  return (
70    <aside
71      className={cn(
72        'w-full max-w-[488px] p-4 text-white select-none lg:p-8',
73        className,
74      )}
75      style={{ backgroundColor: '#121317' }}
76    >
77      {showCart ? (
78        <div className="mb-8 space-y-4">
79          <div className="flex items-center justify-between border-b border-gray-800 pb-3">
80            <h3 className="text-lg font-medium text-white">Your Cart</h3>
81            <span className="text-sm text-gray-400">
82              {totalItems} {totalItems === 1 ? 'item' : 'items'}
83            </span>
84          </div>
85          <div className="max-h-[300px] space-y-4 overflow-y-auto pr-2 scrollbar-thin">
86            {items.map((item) => (
87              <div
88                key={item.name}
89// … truncated