@ticketboothapp/booking 1.2.137 → 1.2.138

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.137",
+  "version": "1.2.138",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -163,6 +163,22 @@ export function AdminChangeReceiptComparison({
   );
   const changeSubtotal = roundMoney(amountDue - changeTax);
   const originalCurrency = originalReceipt.currency ?? currency;
+  const originalReceiptLinesWithUnitAmounts = useMemo(
+    () =>
+      originalReceiptLines.map((line) =>
+        line.kind === 'ticket' && line.qty > 0
+          ? {
+              ...line,
+              unitAmountLabel: `${formatCurrencyAmount(
+                roundMoney(line.itemTotal / line.qty),
+                originalCurrency,
+                displayLocale,
+              )} each`,
+            }
+          : line,
+      ),
+    [displayLocale, originalCurrency, originalReceiptLines],
+  );
   const amountDueClass =
     amountDue < -0.005
       ? 'text-emerald-700'
@@ -181,7 +197,7 @@ export function AdminChangeReceiptComparison({
             </span>
           </div>
           <PriceSummary
-            lines={originalReceiptLines}
+            lines={originalReceiptLinesWithUnitAmounts}
             total={originalReceipt.total}
             currency={originalCurrency}
             locale={displayLocale}

package/src/components/booking/PriceBreakdown.tsx

@@ -12,6 +12,7 @@ export interface PriceBreakdownProps {
   category: string;
   qty: number;
   itemTotal: number;
+  unitAmountLabel?: string;
   breakdown: PriceBreakdownType | null;
   currency: Currency;
   locale: Locale;
@@ -59,6 +60,7 @@ export function PriceBreakdown({
   category,
   qty,
   itemTotal,
+  unitAmountLabel,
   breakdown,
   currency,
   locale,
@@ -96,6 +98,7 @@ export function PriceBreakdown({
         ) : (
           <span className="text-sm text-stone-600">
             {category} {qty > 1 ? `× ${qty}` : ''}
+            {unitAmountLabel ? <span className="ml-1 text-xs text-stone-400">· {unitAmountLabel}</span> : null}
           </span>
         )}
         {editable && onEditableChange ? (
@@ -157,6 +160,7 @@ export function PriceBreakdown({
           }
         >
           {category} {qty > 1 ? `× ${qty}` : ''}
+          {unitAmountLabel ? <span className="ml-1 text-xs text-stone-400">· {unitAmountLabel}</span> : null}
         </span>
       )}
       <div className="relative flex-shrink-0 whitespace-nowrap">

package/src/components/booking/PriceSummary.tsx

@@ -18,6 +18,7 @@ export type PriceSummaryLine =
       category: string;
       qty: number;
       itemTotal: number;
+      unitAmountLabel?: string;
       breakdown?: PriceBreakdownType | null;
     }
   | {
@@ -210,6 +211,7 @@ export function PriceSummary({
               category={row.category}
               qty={row.qty}
               itemTotal={row.itemTotal}
+              unitAmountLabel={row.unitAmountLabel}
               breakdown={row.breakdown ?? null}
               currency={currency}
               locale={locale}