@ticketboothapp/booking 1.2.141 → 1.2.143

package/package.json

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

package/src/components/booking/AdminChangeBookingContent.tsx

@@ -155,7 +155,9 @@ const checkoutPanelPropKeys = [
   'receiptTotal',
   'originalReceipt',
   'priceSummaryLinesIncludeTaxRow',
-  'isServerAmendmentQuote',
+  'serverAmendmentLines',
+  'serverAmountDue',
+  'serverUpdatedTotal',
   'isTaxIncludedInPrice',
   'taxRate',
   'currency',

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -971,7 +971,18 @@ export function AdminChangeBookingFlow({
         receiptTax: adminFeAuthoritativeReceipt.tax,
         receiptTotal: adminFeAuthoritativeReceipt.total,
         originalReceipt,
-        isServerAmendmentQuote: latestChangeQuote?.pricingVersion === 'booking-amendment-v1',
+        serverAmendmentLines:
+          latestChangeQuote?.pricingVersion === 'booking-amendment-v1'
+            ? latestChangeQuote.serverPreview?.priceSummaryLines ?? []
+            : null,
+        serverAmountDue:
+          latestChangeQuote?.pricingVersion === 'booking-amendment-v1'
+            ? latestChangeQuote.serverPreview?.amountDue ?? null
+            : null,
+        serverUpdatedTotal:
+          latestChangeQuote?.pricingVersion === 'booking-amendment-v1'
+            ? latestChangeQuote.serverPreview?.totalNewBooking ?? null
+            : null,
         ...{ priceSummaryLinesIncludeTaxRow, isTaxIncludedInPrice, showProviderPricingInlineEditor },
         taxRate: pricingConfig?.taxRate,
         ...{ providerPricingUi, providerQuotedLines },

package/src/components/booking/AdminChangeCheckoutPanel.tsx

@@ -30,7 +30,9 @@ export interface AdminChangeCheckoutPanelProps {
   receiptTotal: number;
   originalReceipt: ChangeBookingFlowProps['originalReceipt'];
   priceSummaryLinesIncludeTaxRow: boolean;
-  isServerAmendmentQuote?: boolean;
+  serverAmendmentLines: PriceSummaryLine[] | null;
+  serverAmountDue: number | null;
+  serverUpdatedTotal: number | null;
   isTaxIncludedInPrice: boolean;
   taxRate?: number;
   currency: Currency;
@@ -100,7 +102,9 @@ export function AdminChangeCheckoutPanel({
   receiptTotal,
   originalReceipt,
   priceSummaryLinesIncludeTaxRow,
-  isServerAmendmentQuote,
+  serverAmendmentLines,
+  serverAmountDue,
+  serverUpdatedTotal,
   isTaxIncludedInPrice,
   taxRate,
   currency,
@@ -183,26 +187,16 @@ export function AdminChangeCheckoutPanel({
     isAdmin && originalReceipt ? (
       <AdminChangeReceiptComparison
         originalReceipt={originalReceipt}
-        newReceipt={{
-          subtotal: receiptSubtotal,
-          tax: receiptTax,
-          total: receiptTotal,
-        }}
-        newPriceSummaryLines={priceSummaryLines}
-        newPriceSummaryLinesIncludeTaxRow={priceSummaryLinesIncludeTaxRow}
-        isServerAmendmentQuote={isServerAmendmentQuote}
-        amountDue={changeFlowAmountDue}
+        amendmentLines={serverAmendmentLines}
+        amountDue={serverAmountDue}
+        updatedTotal={serverUpdatedTotal}
+        selectionChanged={hasEffectiveChangeSelection}
         amountDueLabel={totalSummaryLabel}
         currency={currency}
         locale={locale}
         t={t}
         taxRate={taxRate}
-        newReceiptAdjustments={pricingAdjustments}
-        lineAmountInputs={lineAmountInputs}
-        onLineAmountInputChange={onLineAmountInputChange}
-        onLineAmountInputBlur={onLineAmountInputBlur}
-        onLineAmountReset={onLineAmountReset}
-        lineLabelInputs={lineLabelInputs}
+        adjustments={pricingAdjustments}
       />
     ) : null;
 

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -1,6 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
-import type { AdminFeAuthoritativeReceipt } from '../../lib/booking-api';
-import { roundMoney } from '../../lib/booking/change-flow-pricing';
+import type { ReactNode } from 'react';
 import { mapQuoteLineItemsToPriceSummaryLines } from '../../lib/booking/change-booking-server-preview';
 import { formatCurrencyAmount } from '../../lib/currency';
 import type { Locale } from '../../lib/booking/i18n/config';
@@ -13,240 +11,63 @@ type OriginalReceipt = NonNullable<ChangeBookingFlowProps['originalReceipt']>;
 
 export interface AdminChangeReceiptComparisonProps {
   originalReceipt: OriginalReceipt;
-  newReceipt: Pick<AdminFeAuthoritativeReceipt, 'subtotal' | 'tax' | 'total'>;
-  newPriceSummaryLines: PriceSummaryLine[];
-  newPriceSummaryLinesIncludeTaxRow: boolean;
-  isServerAmendmentQuote?: boolean;
-  amountDue: number;
+  /** Amendment-only rows returned by the Pricing V2 server quote. */
+  amendmentLines: PriceSummaryLine[] | null;
+  /** Signed server balance delta. Never calculated by this component. */
+  amountDue: number | null;
+  /** Full resulting booking total returned by the same server quote. */
+  updatedTotal: number | null;
+  selectionChanged: boolean;
   amountDueLabel: string;
   currency: Currency;
   locale: string;
   t: TranslationFn;
   taxRate?: number;
-  newReceiptAdjustments?: ReactNode;
-  lineAmountInputs?: Record<string, string>;
-  onLineAmountInputChange?: (lineKey: string, value: string) => void;
-  onLineAmountInputBlur?: (lineKey: string) => void;
-  onLineAmountReset?: (lineKey: string) => void;
-  lineLabelInputs?: Record<string, string>;
+  adjustments?: ReactNode;
 }
 
 function normalizeLocale(locale: string): Locale {
   return locale === 'fr' ? 'fr' : 'en';
 }
 
+function originalLines(receipt: OriginalReceipt): PriceSummaryLine[] {
+  return receipt.lineItems?.length
+    ? mapQuoteLineItemsToPriceSummaryLines(receipt.lineItems)
+    : [];
+}
+
 function hasTaxLine(lines: PriceSummaryLine[]): boolean {
   return lines.some(
     (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX',
   );
 }
 
-function mapOriginalReceiptLines(originalReceipt: OriginalReceipt): PriceSummaryLine[] {
-  if (!originalReceipt.lineItems?.length) return [];
-  return 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 proposedQuantity = lineQuantity(line);
-    const quantity =
-      proposedQuantity == null && original?.quantity == null
-        ? null
-        : (proposedQuantity ?? 0) - (original?.quantity ?? 0);
-    const proposedAmount = lineAmount(line);
-    const amount = roundMoney(
-      quantity != null && quantity > 0 && proposedQuantity != null && proposedQuantity > 0
-        ? (proposedAmount / proposedQuantity) * quantity
-        : proposedAmount - (original?.amount ?? 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.replace(/\s*\([^)]*(?:people|person|x\s*\d+)[^)]*\)\s*$/i, '').trim(),
-      amount,
-      quantity: quantity == null ? null : Math.abs(quantity),
-      editable: false,
-      lineKey: undefined,
-    }];
-  });
-}
-
 export function AdminChangeReceiptComparison({
   originalReceipt,
-  newReceipt,
-  newPriceSummaryLines,
-  isServerAmendmentQuote = false,
+  amendmentLines,
+  amountDue,
+  updatedTotal,
+  selectionChanged,
   amountDueLabel,
   currency,
   locale,
   t,
   taxRate,
-  newReceiptAdjustments,
+  adjustments,
 }: AdminChangeReceiptComparisonProps) {
   const displayLocale = normalizeLocale(locale);
-  const originalReceiptLines = useMemo(
-    () => mapOriginalReceiptLines(originalReceipt),
-    [originalReceipt],
-  );
-  const originalLinesIncludeTaxRow = hasTaxLine(originalReceiptLines);
-  const calculatedChangeLines = useMemo(() => {
-    if (!isServerAmendmentQuote) {
-      return amendmentDeltaLines(originalReceiptLines, newPriceSummaryLines);
-    }
-    const nonTax = newPriceSummaryLines.filter(
-      (line) => !(line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'),
-    );
-    const tax = roundMoney(
-      newPriceSummaryLines.reduce(
-        (sum, line) =>
-          line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
-            ? sum + line.amount
-            : sum,
-        0,
-      ),
-    );
-    return Math.abs(tax) < 0.005
-      ? nonTax
-      : [
-          ...nonTax,
-          {
-            kind: 'line' as const,
-            label: tax >= 0 ? 'Additional tax' : 'Tax reduction',
-            amount: tax,
-            type: 'TAX',
-          },
-        ];
-  }, [isServerAmendmentQuote, newPriceSummaryLines, originalReceiptLines]);
-  const nonTaxChangeSubtotal = roundMoney(
-    calculatedChangeLines.reduce(
-      (sum, line) =>
-        line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
-          ? sum
-          : sum + lineAmount(line),
-      0,
-    ),
-  );
-  const receiptTaxDelta = roundMoney(
-    isServerAmendmentQuote
-      ? calculatedChangeLines.reduce(
-          (sum, line) =>
-            line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
-              ? sum + line.amount
-              : sum,
-          0,
-        )
-      : taxRate != null && nonTaxChangeSubtotal > 0
-      ? nonTaxChangeSubtotal * taxRate
-      : 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 displayedAmountDue = roundMoney(changeLines.reduce((sum, line) => sum + lineAmount(line), 0));
-  const displayedUpdatedTotal = roundMoney(originalReceipt.total + displayedAmountDue);
-  const displayedUpdatedSubtotal = roundMoney(originalReceipt.subtotal + nonTaxChangeSubtotal);
-  const displayedUpdatedTax = roundMoney(originalReceipt.tax + changeTax);
+  const existingLines = originalLines(originalReceipt);
   const originalCurrency = originalReceipt.currency ?? currency;
-  const originalReceiptLinesWithComparableBreakdowns = useMemo(
-    () =>
-      originalReceiptLines.map((line) =>
-        line.kind === 'ticket' && line.qty > 0
-          ? {
-              ...line,
-              breakdown: line.breakdown ?? {
-                lineItems: [],
-                subtotalAfterAdjustments: roundMoney(line.itemTotal / line.qty),
-                feeLines: [],
-                taxRate: 0,
-                taxAmount: 0,
-                isTaxIncluded: false,
-                finalPrice: roundMoney(line.itemTotal / line.qty),
-              },
-            }
-          : line,
-      ),
-    [originalReceiptLines],
-  );
+  const quoteReady = amendmentLines != null && amountDue != null && updatedTotal != null;
   const amountDueClass =
-    displayedAmountDue < -0.005
+    amountDue != null && amountDue < -0.005
       ? 'text-emerald-700'
-      : displayedAmountDue > 0.005
+      : amountDue != null && amountDue > 0.005
         ? 'text-stone-900'
         : 'text-stone-700';
 
   return (
-    <div className="space-y-3 min-w-0 overflow-visible">
+    <div className="min-w-0 space-y-3 overflow-visible">
       <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">
@@ -256,89 +77,77 @@ export function AdminChangeReceiptComparison({
             </span>
           </div>
           <PriceSummary
-            lines={originalReceiptLinesWithComparableBreakdowns}
+            lines={existingLines}
             total={originalReceipt.total}
             currency={originalCurrency}
             locale={displayLocale}
             subtotal={originalReceipt.subtotal}
-            taxAmount={!originalLinesIncludeTaxRow ? originalReceipt.tax : 0}
+            taxAmount={hasTaxLine(existingLines) ? 0 : originalReceipt.tax}
             taxRate={taxRate}
             size="sm"
             t={t}
           />
         </section>
+
         <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">
             <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>
+              <p className="mt-0.5 text-xs text-stone-500">Server-priced amendment</p>
             </div>
             <span className="shrink-0 text-xs font-medium text-stone-500">
-              {formatCurrencyAmount(displayedAmountDue, currency, displayLocale)}
+              {amountDue == null ? '—' : formatCurrencyAmount(amountDue, currency, displayLocale)}
             </span>
           </div>
-          {changeLines.length === 0 && Math.abs(displayedAmountDue) < 0.005 ? (
+          {!selectionChanged ? (
+            <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 changes selected</p>
+              <p className="mt-1 text-xs text-stone-500">Change tickets or another booking option to request a price.</p>
+            </div>
+          ) : !quoteReady ? (
+            <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">Waiting for server price…</p>
+            </div>
+          ) : amendmentLines.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={displayedAmountDue}
+              lines={amendmentLines}
+              total={amountDue}
               currency={currency}
               locale={displayLocale}
-              subtotal={nonTaxChangeSubtotal}
-              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">
+
+      {quoteReady ? (
+        <section className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-stone-300 bg-white px-3 py-3 shadow-sm">
           <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>
+            <h3 className="text-sm font-semibold text-stone-900">Updated booking total</h3>
+            <p className="mt-0.5 text-xs text-stone-500">Authoritative total returned by the server quote</p>
           </div>
-          <span className="shrink-0 text-xs font-medium text-stone-500">
-            {formatCurrencyAmount(displayedUpdatedTotal, currency, displayLocale)}
+          <span className="text-lg font-semibold tabular-nums text-stone-900">
+            {formatCurrencyAmount(updatedTotal, currency, displayLocale)}
           </span>
-        </div>
-        <PriceSummary
-          lines={[
-            ...originalReceiptLines.filter(
-              (line) => !(line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'),
-            ),
-            ...changeLines.filter(
-              (line) => !(line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'),
-            ),
-          ].map((line) => ({ ...line, editable: false, lineKey: undefined }))}
-          total={displayedUpdatedTotal}
-          currency={currency}
-          locale={displayLocale}
-          subtotal={displayedUpdatedSubtotal}
-          taxAmount={displayedUpdatedTax}
-          taxRate={taxRate}
-          size="sm"
-          t={t}
-        />
-      </section>
-      {newReceiptAdjustments ? (
+        </section>
+      ) : null}
+
+      {adjustments ? (
         <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}
+          <h3 className="mb-2 text-sm font-semibold text-stone-900">Admin adjustments</h3>
+          {adjustments}
         </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}`}>
-          {formatCurrencyAmount(displayedAmountDue, currency, displayLocale)}
+          {!selectionChanged || amountDue == null ? '—' : formatCurrencyAmount(amountDue, currency, displayLocale)}
         </span>
       </div>
     </div>