@ticketboothapp/booking 1.2.134 → 1.2.135

package/package.json

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

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -76,6 +76,68 @@ function mapOriginalReceiptLines(originalReceipt: OriginalReceipt): PriceSummary
   return withStoredReceiptBreakdowns(mapQuoteLineItemsToPriceSummaryLines(originalReceipt.lineItems));
 }
 
+function lineIdentity(line: PriceSummaryLine): string {
+  return line.kind === 'ticket'
+    ? `ticket:${line.category.trim().toUpperCase()}`
+    : `line:${String(line.type ?? '').trim().toUpperCase()}:${line.label.trim().toUpperCase()}`;
+}
+
+function lineAmount(line: PriceSummaryLine): number {
+  return line.kind === 'ticket' ? line.itemTotal : line.amount;
+}
+
+function lineQuantity(line: PriceSummaryLine): number | null {
+  return line.kind === 'ticket' ? line.qty : line.quantity ?? null;
+}
+
+function amendmentDeltaLines(
+  originalLines: PriceSummaryLine[],
+  proposedLines: PriceSummaryLine[],
+): PriceSummaryLine[] {
+  const remainingOriginal = new Map<string, { amount: number; quantity: number | null }>();
+  for (const line of originalLines) {
+    const key = lineIdentity(line);
+    const previous = remainingOriginal.get(key);
+    remainingOriginal.set(key, {
+      amount: roundMoney((previous?.amount ?? 0) + lineAmount(line)),
+      quantity:
+        previous?.quantity == null && lineQuantity(line) == null
+          ? null
+          : (previous?.quantity ?? 0) + (lineQuantity(line) ?? 0),
+    });
+  }
+
+  return proposedLines.flatMap((line): PriceSummaryLine[] => {
+    const original = remainingOriginal.get(lineIdentity(line));
+    const amount = roundMoney(lineAmount(line) - (original?.amount ?? 0));
+    const proposedQuantity = lineQuantity(line);
+    const quantity =
+      proposedQuantity == null && original?.quantity == null
+        ? null
+        : (proposedQuantity ?? 0) - (original?.quantity ?? 0);
+    if (Math.abs(amount) < 0.005 && (quantity == null || quantity === 0)) return [];
+
+    if (line.kind === 'ticket') {
+      return [{
+        ...line,
+        qty: Math.abs(quantity ?? 0) || line.qty,
+        itemTotal: amount,
+        editable: false,
+        lineKey: undefined,
+      }];
+    }
+    const isTax = String(line.type ?? '').toUpperCase() === 'TAX';
+    return [{
+      ...line,
+      label: isTax ? (amount >= 0 ? 'Additional tax' : 'Tax reduction') : line.label,
+      amount,
+      quantity: quantity == null ? null : Math.abs(quantity),
+      editable: false,
+      lineKey: undefined,
+    }];
+  });
+}
+
 export function AdminChangeReceiptComparison({
   originalReceipt,
   newReceipt,
@@ -88,11 +150,6 @@ export function AdminChangeReceiptComparison({
   t,
   taxRate,
   newReceiptAdjustments,
-  lineAmountInputs,
-  onLineAmountInputChange,
-  onLineAmountInputBlur,
-  onLineAmountReset,
-  lineLabelInputs,
 }: AdminChangeReceiptComparisonProps) {
   const displayLocale = normalizeLocale(locale);
   const originalReceiptLines = useMemo(
@@ -100,6 +157,21 @@ export function AdminChangeReceiptComparison({
     [originalReceipt],
   );
   const originalLinesIncludeTaxRow = hasTaxLine(originalReceiptLines);
+  const changeLines = useMemo(
+    () => amendmentDeltaLines(originalReceiptLines, newPriceSummaryLines),
+    [newPriceSummaryLines, originalReceiptLines],
+  );
+  const changeLinesIncludeTaxRow = hasTaxLine(changeLines);
+  const changeTax = roundMoney(
+    changeLines.reduce(
+      (sum, line) =>
+        line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
+          ? sum + line.amount
+          : sum,
+      0,
+    ),
+  );
+  const changeSubtotal = roundMoney(amountDue - changeTax);
   const originalCurrency = originalReceipt.currency ?? currency;
   const amountDueClass =
     amountDue < -0.005
@@ -113,7 +185,7 @@ export function AdminChangeReceiptComparison({
       <div className="grid gap-4 md:grid-cols-2">
         <section className="min-w-0 overflow-visible rounded-lg border border-stone-200 bg-stone-50/70 p-3">
           <div className="mb-3 flex items-center justify-between gap-3">
-            <h3 className="text-sm font-semibold text-stone-900">Current receipt</h3>
+            <h3 className="text-sm font-semibold text-stone-900">Existing purchase</h3>
             <span className="shrink-0 text-xs font-medium text-stone-500">
               {formatCurrencyAmount(originalReceipt.total, originalCurrency, displayLocale)}
             </span>
@@ -130,32 +202,60 @@ export function AdminChangeReceiptComparison({
             t={t}
           />
         </section>
-        <section className="min-w-0 overflow-visible rounded-lg border border-stone-300 bg-white p-3 shadow-sm">
+        <section className="min-w-0 overflow-visible rounded-lg border border-sky-200 bg-sky-50/50 p-3">
           <div className="mb-3 flex items-center justify-between gap-3">
-            <h3 className="text-sm font-semibold text-stone-900">New receipt</h3>
+            <div>
+              <h3 className="text-sm font-semibold text-stone-900">This change</h3>
+              <p className="mt-0.5 text-xs text-stone-500">Only newly charged, credited, or repriced value</p>
+            </div>
             <span className="shrink-0 text-xs font-medium text-stone-500">
-              {formatCurrencyAmount(newReceipt.total, currency, displayLocale)}
+              {formatCurrencyAmount(amountDue, currency, displayLocale)}
             </span>
           </div>
           <PriceSummary
-            lines={newPriceSummaryLines}
-            total={newReceipt.total}
+            lines={changeLines}
+            total={amountDue}
             currency={currency}
             locale={displayLocale}
-            subtotal={newReceipt.subtotal}
-            taxAmount={!newPriceSummaryLinesIncludeTaxRow ? newReceipt.tax : 0}
+            subtotal={changeSubtotal}
+            taxAmount={!changeLinesIncludeTaxRow ? changeTax : 0}
             taxRate={taxRate}
             size="sm"
             t={t}
-            extraBeforeSubtotal={newReceiptAdjustments}
-            lineAmountInputs={lineAmountInputs}
-            onLineAmountInputChange={onLineAmountInputChange}
-            onLineAmountInputBlur={onLineAmountInputBlur}
-            onLineAmountReset={onLineAmountReset}
-            lineLabelInputs={lineLabelInputs}
           />
         </section>
       </div>
+      <section className="min-w-0 overflow-visible rounded-lg border border-stone-300 bg-white p-3 shadow-sm">
+        <div className="mb-3 flex items-center justify-between gap-3">
+          <div>
+            <h3 className="text-sm font-semibold text-stone-900">Updated booking receipt</h3>
+            <p className="mt-0.5 text-xs text-stone-500">Read-only pricing result; historical and added cohorts remain separate when supplied by the server</p>
+          </div>
+          <span className="shrink-0 text-xs font-medium text-stone-500">
+            {formatCurrencyAmount(newReceipt.total, currency, displayLocale)}
+          </span>
+        </div>
+        <PriceSummary
+          lines={newPriceSummaryLines.map((line) => ({ ...line, editable: false, lineKey: undefined }))}
+          total={newReceipt.total}
+          currency={currency}
+          locale={displayLocale}
+          subtotal={newReceipt.subtotal}
+          taxAmount={!newPriceSummaryLinesIncludeTaxRow ? newReceipt.tax : 0}
+          taxRate={taxRate}
+          size="sm"
+          t={t}
+        />
+      </section>
+      {newReceiptAdjustments ? (
+        <section className="rounded-lg border border-amber-200 bg-amber-50/40 p-3">
+          <div className="mb-2">
+            <h3 className="text-sm font-semibold text-stone-900">Admin adjustments</h3>
+            <p className="mt-0.5 text-xs text-stone-500">Optional structured charges or credits applied to this amendment</p>
+          </div>
+          {newReceiptAdjustments}
+        </section>
+      ) : null}
       <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
         <span className="text-sm font-semibold text-stone-900">{amountDueLabel}</span>
         <span className={`text-lg font-semibold tabular-nums ${amountDueClass}`}>