@ticketboothapp/booking 1.2.134 → 1.2.136

package/package.json

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

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -76,6 +76,74 @@ function mapOriginalReceiptLines(originalReceipt: OriginalReceipt): PriceSummary
   return withStoredReceiptBreakdowns(mapQuoteLineItemsToPriceSummaryLines(originalReceipt.lineItems));
 }
 
+function lineIdentity(line: PriceSummaryLine): string {
+  const normalizedLabel = (value: string) =>
+    value
+      .replace(/\s*\([^)]*(?:people|person|x\s*\d+)[^)]*\)\s*$/i, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .toUpperCase();
+  return line.kind === 'ticket'
+    ? `ticket:${line.category.trim().toUpperCase()}`
+    : `line:${String(line.type ?? '').trim().toUpperCase()}:${normalizedLabel(line.label)}`;
+}
+
+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 +156,6 @@ export function AdminChangeReceiptComparison({
   t,
   taxRate,
   newReceiptAdjustments,
-  lineAmountInputs,
-  onLineAmountInputChange,
-  onLineAmountInputBlur,
-  onLineAmountReset,
-  lineLabelInputs,
 }: AdminChangeReceiptComparisonProps) {
   const displayLocale = normalizeLocale(locale);
   const originalReceiptLines = useMemo(
@@ -100,6 +163,36 @@ export function AdminChangeReceiptComparison({
     [originalReceipt],
   );
   const originalLinesIncludeTaxRow = hasTaxLine(originalReceiptLines);
+  const calculatedChangeLines = useMemo(
+    () => amendmentDeltaLines(originalReceiptLines, newPriceSummaryLines),
+    [newPriceSummaryLines, originalReceiptLines],
+  );
+  const receiptTaxDelta = roundMoney(newReceipt.tax - originalReceipt.tax);
+  const changeLines = useMemo(() => {
+    if (hasTaxLine(calculatedChangeLines) || Math.abs(receiptTaxDelta) < 0.005) {
+      return calculatedChangeLines;
+    }
+    return [
+      ...calculatedChangeLines,
+      {
+        kind: 'line' as const,
+        label: receiptTaxDelta >= 0 ? 'Additional tax' : 'Tax reduction',
+        amount: receiptTaxDelta,
+        type: 'TAX',
+      },
+    ];
+  }, [calculatedChangeLines, receiptTaxDelta]);
+  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 +206,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 +223,67 @@ 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}
-            currency={currency}
-            locale={displayLocale}
-            subtotal={newReceipt.subtotal}
-            taxAmount={!newPriceSummaryLinesIncludeTaxRow ? newReceipt.tax : 0}
-            taxRate={taxRate}
-            size="sm"
-            t={t}
-            extraBeforeSubtotal={newReceiptAdjustments}
-            lineAmountInputs={lineAmountInputs}
-            onLineAmountInputChange={onLineAmountInputChange}
-            onLineAmountInputBlur={onLineAmountInputBlur}
-            onLineAmountReset={onLineAmountReset}
-            lineLabelInputs={lineLabelInputs}
-          />
+          {changeLines.length === 0 && Math.abs(amountDue) < 0.005 ? (
+            <div className="rounded-md border border-dashed border-stone-300 bg-white/70 px-3 py-4 text-center">
+              <p className="text-sm font-medium text-stone-700">No pricing changes</p>
+              <p className="mt-1 text-xs text-stone-500">The selected booking details match the existing purchase.</p>
+            </div>
+          ) : (
+            <PriceSummary
+              lines={changeLines}
+              total={amountDue}
+              currency={currency}
+              locale={displayLocale}
+              subtotal={changeSubtotal}
+              taxAmount={!changeLinesIncludeTaxRow ? changeTax : 0}
+              taxRate={taxRate}
+              size="sm"
+              t={t}
+            />
+          )}
         </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}`}>