@ticketboothapp/booking 1.2.77 → 1.2.79

package/package.json

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

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -104,6 +104,7 @@ import type { BookingFlowUiOptions } from './booking-flow-ui';
 import type { ProviderDashboardChangeBookingPayload } from './provider-dashboard-change-booking';
 import type { ChangeBookingFlowProps, ChangeFlowSelectionPreview } from './booking-flow-types';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
+import { useEditableSummaryLines } from './useEditableSummaryLines';
 
 /**
  * ## Pricing contract (customer self-serve)
@@ -755,8 +756,6 @@ export function AdminChangeBookingFlow({
   const [adminCustomReceiptLines, setAdminCustomReceiptLines] = useState<
     Array<{ id: string; label: string; amountInput: string; amountSign: 1 | -1 }>
   >([]);
-  const [editableSummaryLineAmountInputs, setEditableSummaryLineAmountInputs] = useState<Record<string, string>>({});
-  const [editableSummaryLineLabelInputs, setEditableSummaryLineLabelInputs] = useState<Record<string, string>>({});
   const adminCustomLineIdRef = useRef(0);
 
   // Auto-apply promo code when parent page passes one (e.g. partner pages).
@@ -937,6 +936,9 @@ export function AdminChangeBookingFlow({
   } | null>(null);
   const [changeQuoteLoading, setChangeQuoteLoading] = useState(false);
   const [changeQuoteFetchError, setChangeQuoteFetchError] = useState<string | null>(null);
+  /** Dedupe quote calls while user input payload is unchanged. */
+  const lastCompletedQuoteInputsKeyRef = useRef<string | null>(null);
+  const inFlightQuoteInputsKeyRef = useRef<string | null>(null);
   const selfServePricingConfirmed =
     suppressSelfServeCurrencyUi &&
     latestChangeQuote != null &&
@@ -3148,140 +3150,24 @@ export function AdminChangeBookingFlow({
       ),
     [checkoutPriceSummaryLinesForCheckout],
   );
-  const getEditableSummaryLineKey = useCallback((line: PriceSummaryLine, index: number): string => {
-    if (line.lineKey) return line.lineKey;
-    return line.kind === 'ticket'
-      ? `change-ticket-${line.category}-${index}`
-      : `change-line-${line.label}-${line.type ?? 'line'}-${index}`;
-  }, []);
-  const editableCheckoutPriceSummaryLines = useMemo((): PriceSummaryLine[] => {
-    const firstTaxLineIndex = checkoutPriceSummaryLinesForCheckout.findIndex(
-      (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
-    );
-    return checkoutPriceSummaryLinesForCheckout.map((line, index) => {
-      const isBeforeSubtotal = firstTaxLineIndex < 0 || index < firstTaxLineIndex;
-      const lineKey = getEditableSummaryLineKey(line, index);
-      if (line.kind === 'ticket') {
-        const amountInput = editableSummaryLineAmountInputs[lineKey];
-        const parsedAmount = amountInput == null || amountInput.trim() === '' ? line.itemTotal : Number(amountInput);
-        return {
-          ...line,
-          lineKey,
-          editable: isBeforeSubtotal,
-          category: editableSummaryLineLabelInputs[lineKey] ?? line.category,
-          itemTotal: Number.isFinite(parsedAmount) ? roundMoney(parsedAmount) : line.itemTotal,
-        };
-      }
-      const amountInput = editableSummaryLineAmountInputs[lineKey];
-      const parsedAmount = amountInput == null || amountInput.trim() === '' ? line.amount : Number(amountInput);
-      return {
-        ...line,
-        lineKey,
-        editable: isBeforeSubtotal,
-        label: editableSummaryLineLabelInputs[lineKey] ?? line.label,
-        amount: Number.isFinite(parsedAmount) ? roundMoney(parsedAmount) : line.amount,
-      };
-    });
-  }, [
-    checkoutPriceSummaryLinesForCheckout,
+  const {
+    editableCheckoutPriceSummaryLines,
     editableSummaryLineAmountInputs,
     editableSummaryLineLabelInputs,
-    getEditableSummaryLineKey,
-  ]);
-  useEffect(() => {
-    setEditableSummaryLineAmountInputs((prev) => {
-      const next: Record<string, string> = {};
-      for (let i = 0; i < editableCheckoutPriceSummaryLines.length; i += 1) {
-        const line = editableCheckoutPriceSummaryLines[i];
-        const key = line.lineKey;
-        if (!key) continue;
-        if (prev[key] != null) {
-          next[key] = prev[key];
-          continue;
-        }
-        next[key] = line.kind === 'ticket' ? String(line.itemTotal) : String(line.amount);
-      }
-      const prevKeys = Object.keys(prev);
-      const nextKeys = Object.keys(next);
-      if (
-        prevKeys.length === nextKeys.length &&
-        nextKeys.every((key) => prev[key] === next[key])
-      ) {
-        return prev;
-      }
-      return next;
-    });
-    setEditableSummaryLineLabelInputs((prev) => {
-      const next: Record<string, string> = {};
-      for (let i = 0; i < editableCheckoutPriceSummaryLines.length; i += 1) {
-        const line = editableCheckoutPriceSummaryLines[i];
-        const key = line.lineKey;
-        if (!key) continue;
-        if (prev[key] != null) {
-          next[key] = prev[key];
-          continue;
-        }
-        next[key] = line.kind === 'ticket' ? line.category : line.label;
-      }
-      const prevKeys = Object.keys(prev);
-      const nextKeys = Object.keys(next);
-      if (
-        prevKeys.length === nextKeys.length &&
-        nextKeys.every((key) => prev[key] === next[key])
-      ) {
-        return prev;
-      }
-      return next;
-    });
-  }, [editableCheckoutPriceSummaryLines]);
-  const editableSummaryPreSubtotalDelta = useMemo(() => {
-    const firstTaxLineIndex = checkoutPriceSummaryLinesForCheckout.findIndex(
-      (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
-    );
-    let delta = 0;
-    for (let i = 0; i < checkoutPriceSummaryLinesForCheckout.length; i += 1) {
-      if (firstTaxLineIndex >= 0 && i >= firstTaxLineIndex) break;
-      const line = checkoutPriceSummaryLinesForCheckout[i];
-      const lineKey = getEditableSummaryLineKey(line, i);
-      const baselineAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
-      const raw = editableSummaryLineAmountInputs[lineKey];
-      const parsed = raw == null || raw.trim() === '' ? baselineAmount : Number(raw);
-      const editedAmount = Number.isFinite(parsed) ? roundMoney(parsed) : baselineAmount;
-      delta += editedAmount - baselineAmount;
-    }
-    return roundMoney(delta);
-  }, [
-    checkoutPriceSummaryLinesForCheckout,
-    editableSummaryLineAmountInputs,
-    getEditableSummaryLineKey,
-  ]);
-  const editableSummaryPreSubtotalDebugRows = useMemo(() => {
-    const firstTaxLineIndex = checkoutPriceSummaryLinesForCheckout.findIndex(
-      (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX'
-    );
-    const rows: Array<{ label: string; baseline: number; edited: number; delta: number }> = [];
-    for (let i = 0; i < checkoutPriceSummaryLinesForCheckout.length; i += 1) {
-      if (firstTaxLineIndex >= 0 && i >= firstTaxLineIndex) break;
-      const line = checkoutPriceSummaryLinesForCheckout[i];
-      const lineKey = getEditableSummaryLineKey(line, i);
-      const baselineAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
-      const raw = editableSummaryLineAmountInputs[lineKey];
-      const parsed = raw == null || raw.trim() === '' ? baselineAmount : Number(raw);
-      const editedAmount = Number.isFinite(parsed) ? roundMoney(parsed) : baselineAmount;
-      const delta = roundMoney(editedAmount - baselineAmount);
-      rows.push({
-        label: line.kind === 'ticket' ? line.category : line.label,
-        baseline: roundMoney(baselineAmount),
-        edited: editedAmount,
-        delta,
-      });
-    }
-    return rows;
-  }, [
+    editableSummaryPreSubtotalDelta,
+    editableSummaryPreSubtotalDebugRows,
+    onLineAmountInputChange: handleEditableLineAmountInputChange,
+    onLineAmountInputBlur: handleEditableLineAmountInputBlur,
+    onLineAmountReset: handleEditableLineAmountReset,
+  } = useEditableSummaryLines(
     checkoutPriceSummaryLinesForCheckout,
-    editableSummaryLineAmountInputs,
-    getEditableSummaryLineKey,
-  ]);
+    {
+      enabled: showProviderPricingInlineEditor,
+      onChange: providerPricingUi?.onLineAmountInputChange,
+      onBlur: providerPricingUi?.onLineAmountInputBlur,
+      onReset: providerPricingUi?.onLineAmountReset,
+    },
+  );
 
   // Promo discount from backend (order-level only; rates are pre-promo)
   const [promoDiscountAmount, setPromoDiscountAmount] = useState(0);
@@ -3813,6 +3699,40 @@ export function AdminChangeBookingFlow({
     !!lastName.trim();
 
   const isChangeQuoteBlocked = isCustomerSelfServeChange && latestChangeQuote?.canProceed === false;
+  const changeQuoteInputsKey = useMemo(() => JSON.stringify({
+    bookingReference: initialValues?.bookingReference?.trim() ?? '',
+    lastName: lastName.trim().toLowerCase(),
+    optionId: selectedAvailability?.productOptionId?.trim() || activeOptions[0]?.optionId || '',
+    dateTime: selectedAvailability?.dateTime ?? '',
+    availabilityId: selectedAvailability?.availabilityId ?? null,
+    pickupLocationId: pickupLocationId ?? null,
+    returnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
+    quantities,
+    addOnSelections,
+    adminCustomLinesAsAdditionalAdjustments,
+    feReceiptSubtotal: adminFeAuthoritativeReceipt.subtotal,
+    feReceiptTax: adminFeAuthoritativeReceipt.tax,
+    feReceiptTotal: adminFeAuthoritativeReceipt.total,
+    feReceiptLineItems: adminFeAuthoritativeReceipt.lineItems,
+    useAdminFeAuthoritativeQuote,
+  }), [
+    initialValues?.bookingReference,
+    lastName,
+    selectedAvailability?.productOptionId,
+    selectedAvailability?.dateTime,
+    selectedAvailability?.availabilityId,
+    activeOptions,
+    pickupLocationId,
+    selectedReturnOption?.returnAvailabilityId,
+    quantities,
+    addOnSelections,
+    adminCustomLinesAsAdditionalAdjustments,
+    adminFeAuthoritativeReceipt.subtotal,
+    adminFeAuthoritativeReceipt.tax,
+    adminFeAuthoritativeReceipt.total,
+    adminFeAuthoritativeReceipt.lineItems,
+    useAdminFeAuthoritativeQuote,
+  ]);
   const requiresReturnInChangeFlow = isCustomerSelfServeChange && !!initialValues?.returnAvailabilityId?.trim();
   const missingRequiredReturnSelection = requiresReturnInChangeFlow && !selectedReturnOption;
 
@@ -3871,7 +3791,11 @@ export function AdminChangeBookingFlow({
    * UI-only gate — does not alter ticket line items or receipt-floor rules.
    */
   const showChangeFlowManualPriceLines =
-    changeFlowFinalPricePending || selfServePricingConfirmed;
+    hasEffectiveChangeSelection && (changeFlowFinalPricePending || selfServePricingConfirmed);
+  const showAdminCustomLineEditor =
+    isAdmin &&
+    selectedAvailability != null &&
+    totalQuantity > 0;
 
   const displayedChangeAmountsRaw = resolveChangeFlowDisplayedAmounts({
     providerPreview: providerTotalsPreview,
@@ -4241,11 +4165,11 @@ export function AdminChangeBookingFlow({
       return;
     }
     onPricePreviewChange({
-      subtotal: originalReceipt ? displayChangeFlowSubtotal : effectiveSubtotalForCheckout,
+      subtotal: originalReceipt ? adminFeAuthoritativeReceipt.subtotal : effectiveSubtotalForCheckout,
       tax:
         !isTaxIncludedInPrice
           ? originalReceipt
-            ? displayChangeFlowTax
+            ? adminFeAuthoritativeReceipt.tax
             : effectiveTax
           : 0,
       total: originalReceipt ? displayChangeFlowProposedTotalWithEditableLines : totalPrice,
@@ -4258,8 +4182,8 @@ export function AdminChangeBookingFlow({
     effectiveSubtotalForCheckout,
     effectiveTax,
     displayChangeFlowProposedTotalWithEditableLines,
-    displayChangeFlowSubtotal,
-    displayChangeFlowTax,
+    adminFeAuthoritativeReceipt.subtotal,
+    adminFeAuthoritativeReceipt.tax,
     currency,
     isTaxIncludedInPrice,
     originalReceipt,
@@ -4287,6 +4211,17 @@ export function AdminChangeBookingFlow({
       setLatestChangeQuote(null);
       setChangeQuoteLoading(false);
       setChangeQuoteFetchError(null);
+      lastCompletedQuoteInputsKeyRef.current = null;
+      inFlightQuoteInputsKeyRef.current = null;
+      return;
+    }
+
+    if (
+      changeQuoteInputsKey &&
+      (inFlightQuoteInputsKeyRef.current === changeQuoteInputsKey ||
+        lastCompletedQuoteInputsKeyRef.current === changeQuoteInputsKey)
+    ) {
+      setChangeQuoteLoading(false);
       return;
     }
 
@@ -4305,6 +4240,7 @@ export function AdminChangeBookingFlow({
     const bookingReferenceForQuote = initialValues.bookingReference.trim();
     const timer = window.setTimeout(() => {
       void (async () => {
+        inFlightQuoteInputsKeyRef.current = changeQuoteInputsKey;
         const bookingItems = Object.entries(quantities)
           .filter(([, count]) => count > 0)
           .map(([category, count]) => ({ category, count }));
@@ -4331,11 +4267,18 @@ export function AdminChangeBookingFlow({
               previousReturnAvailabilityId: initialValues.returnAvailabilityId ?? null,
             },
           };
+          const deterministicClientProposedTotal = useAdminFeAuthoritativeQuote
+            ? adminFeAuthoritativeReceipt.total
+            : changeFlowNewBookingTotal;
+          const deterministicAmountDue = originalReceipt
+            ? roundMoney(adminFeAuthoritativeReceipt.total - originalReceipt.total)
+            : roundMoney(changeFlowClientEstimateDue);
           const quote = useAdminFeAuthoritativeQuote
             ? await quoteChangeBookingAdminFeReceipt({
                 ...quoteRequestBase,
                 feReceipt: adminFeAuthoritativeReceipt,
-                feAmountDueMajorUnits: roundMoney(changeFlowClientEstimateDue),
+                feAmountDueMajorUnits: deterministicAmountDue,
+                clientProposedTotal: deterministicClientProposedTotal,
               })
             : await quoteChangeBooking(quoteRequestBase);
           if (seq !== changeQuoteRequestSeq.current) return;
@@ -4355,11 +4298,16 @@ export function AdminChangeBookingFlow({
               tax: effectiveTax,
             }, currency),
           );
+          lastCompletedQuoteInputsKeyRef.current = changeQuoteInputsKey;
         } catch (e) {
           if (seq !== changeQuoteRequestSeq.current) return;
           setLatestChangeQuote(null);
           setChangeQuoteFetchError(e instanceof Error ? e.message : 'Failed to get price for this change');
+          lastCompletedQuoteInputsKeyRef.current = null;
         } finally {
+          if (inFlightQuoteInputsKeyRef.current === changeQuoteInputsKey) {
+            inFlightQuoteInputsKeyRef.current = null;
+          }
           if (seq === changeQuoteRequestSeq.current) {
             setChangeQuoteLoading(false);
           }
@@ -4396,6 +4344,8 @@ export function AdminChangeBookingFlow({
     adminCustomLinesAsAdditionalAdjustments,
     adminFeAuthoritativeReceipt,
     useAdminFeAuthoritativeQuote,
+    changeQuoteInputsKey,
+    originalReceipt?.total,
   ]);
 
   // Auto-select product option when date is selected: most popular if set, otherwise first available.
@@ -4930,13 +4880,19 @@ export function AdminChangeBookingFlow({
             ? { manualLineAdjustments: adminCustomLinesAsAdditionalAdjustments }
             : {}),
           clientProposedTotal:
-            latestChangeQuote?.serverDisplay?.total ?? changeFlowNewBookingTotal,
+            useAdminFeAuthoritativeQuote
+              ? adminFeAuthoritativeReceipt.total
+              : (latestChangeQuote?.serverDisplay?.total ?? changeFlowNewBookingTotal),
         };
         const quote = useAdminFeAuthoritativeQuote
           ? await quoteChangeBookingAdminFeReceipt({
               ...quoteRequestBase,
               feReceipt: adminFeAuthoritativeReceipt,
-              feAmountDueMajorUnits: roundMoney(changeFlowClientEstimateDue),
+              feAmountDueMajorUnits: roundMoney(
+                originalReceipt
+                  ? adminFeAuthoritativeReceipt.total - originalReceipt.total
+                  : changeFlowClientEstimateDue
+              ),
             })
           : await quoteChangeBooking(quoteRequestBase);
         const quoteSlice = sliceChangeQuoteForUi(
@@ -5772,7 +5728,7 @@ export function AdminChangeBookingFlow({
             <>
             <CheckoutForm
                 priceSummaryLines={editableCheckoutPriceSummaryLines}
-                replacePriceSummary={selfServeCheckoutPlaceholder}
+                replacePriceSummary={hasChangeSelection ? selfServeCheckoutPlaceholder : undefined}
                 totalPrice={changeFlowAmountDue}
                 totalSummaryLabel={
                   changeFlowAmountDue < -0.005
@@ -5782,12 +5738,12 @@ export function AdminChangeBookingFlow({
                       ? t('booking.totalOwedForBookingChange')
                       : 'Total owed for booking difference'
                 }
-                subtotal={displayChangeFlowSubtotal}
+                subtotal={adminFeAuthoritativeReceipt.subtotal}
                 taxAmount={
                   !isTaxIncludedInPrice &&
-                  displayChangeFlowTax > 0 &&
+                  adminFeAuthoritativeReceipt.tax > 0 &&
                   !priceSummaryLinesIncludeTaxRow
-                    ? displayChangeFlowTax
+                    ? adminFeAuthoritativeReceipt.tax
                     : 0
                 }
                 taxRate={pricingConfig?.taxRate}
@@ -5813,9 +5769,11 @@ export function AdminChangeBookingFlow({
                   </>
                 }
                 extraBeforeSubtotal={
-                  showChangeFlowManualPriceLines ? (
+                  (showChangeFlowManualPriceLines || showAdminCustomLineEditor) ? (
                   <>
-                    {showProviderPricingInlineEditor && (providerPricingUi?.additionalAdjustments?.length ?? 0) > 0 ? (
+                    {showChangeFlowManualPriceLines &&
+                    showProviderPricingInlineEditor &&
+                    (providerPricingUi?.additionalAdjustments?.length ?? 0) > 0 ? (
                       <div className="space-y-1">
                         {providerPricingUi?.additionalAdjustments?.map((adj) => (
                           <div key={adj.id} className="flex items-center justify-between gap-2 text-sm">
@@ -5829,7 +5787,7 @@ export function AdminChangeBookingFlow({
                               </button>
                               <input
                                 type="text"
-                                className="w-40 rounded border border-stone-300 px-2 py-0.5 text-sm"
+                                className="admin-custom-receipt-input w-40 rounded border border-stone-300 bg-white text-sm text-stone-800 placeholder:text-stone-400"
                                 placeholder="Line description"
                                 value={adj.label}
                                 onChange={(e) =>
@@ -5853,7 +5811,7 @@ export function AdminChangeBookingFlow({
                               <input
                                 type="text"
                                 inputMode="decimal"
-                                className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+                                className="admin-custom-receipt-input-amount w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
                                 placeholder="0.00"
                                 value={adj.amountInput}
                                 onChange={(e) =>
@@ -5873,7 +5831,7 @@ export function AdminChangeBookingFlow({
                           + add line item
                         </button>
                       </div>
-                    ) : showProviderPricingInlineEditor ? (
+                    ) : showChangeFlowManualPriceLines && showProviderPricingInlineEditor ? (
                       <button
                         type="button"
                         className="rounded border border-stone-300 px-2 py-0.5 text-xs text-stone-600 hover:bg-stone-100"
@@ -5882,6 +5840,7 @@ export function AdminChangeBookingFlow({
                         + add line item
                       </button>
                     ) : null}
+                    {showAdminCustomLineEditor ? (
                     <div className="space-y-3">
                       <div className="flex justify-center">
                         <button
@@ -5995,6 +5954,7 @@ export function AdminChangeBookingFlow({
                         );
                       })}
                     </div>
+                    ) : null}
                   </>
                   ) : null
                 }
@@ -6061,48 +6021,10 @@ export function AdminChangeBookingFlow({
                 attributionConfirmed={partnerAttributionConfirmed}
                 onAttributionConfirmedChange={setPartnerAttributionConfirmed}
                 lineAmountInputs={editableSummaryLineAmountInputs}
-                onLineAmountInputChange={(lineKey, value) => {
-                  const sanitized = value.replace(/[^0-9.-]/g, '');
-                  setEditableSummaryLineAmountInputs((prev) => ({ ...prev, [lineKey]: sanitized }));
-                  if (showProviderPricingInlineEditor) {
-                    providerPricingUi?.onLineAmountInputChange?.(lineKey, sanitized);
-                  }
-                }}
-                onLineAmountInputBlur={(lineKey) => {
-                  setEditableSummaryLineAmountInputs((prev) => {
-                    const raw = prev[lineKey] ?? '';
-                    if (raw.trim() === '' || raw === '-' || raw === '.'
-                      || raw === '-.') {
-                      return prev;
-                    }
-                    const parsed = Number(raw);
-                    if (!Number.isFinite(parsed)) return prev;
-                    const normalized = roundMoney(parsed).toFixed(2);
-                    if (normalized === raw) return prev;
-                    return { ...prev, [lineKey]: normalized };
-                  });
-                  if (showProviderPricingInlineEditor) {
-                    providerPricingUi?.onLineAmountInputBlur?.(lineKey);
-                  }
-                }}
-                onLineAmountReset={(lineKey) => {
-                  const original = checkoutPriceSummaryLinesForCheckout.find(
-                    (line, index) => getEditableSummaryLineKey(line, index) === lineKey
-                  );
-                  if (!original) return;
-                  const nextValue =
-                    original.kind === 'ticket'
-                      ? String(roundMoney(original.itemTotal))
-                      : String(roundMoney(original.amount));
-                  setEditableSummaryLineAmountInputs((prev) => ({ ...prev, [lineKey]: nextValue }));
-                  if (showProviderPricingInlineEditor) {
-                    providerPricingUi?.onLineAmountReset?.(lineKey);
-                  }
-                }}
+                onLineAmountInputChange={handleEditableLineAmountInputChange}
+                onLineAmountInputBlur={handleEditableLineAmountInputBlur}
+                onLineAmountReset={handleEditableLineAmountReset}
                 lineLabelInputs={editableSummaryLineLabelInputs}
-                onLineLabelInputChange={(lineKey, value) => {
-                  setEditableSummaryLineLabelInputs((prev) => ({ ...prev, [lineKey]: value }));
-                }}
               />
             </>
           )}

package/src/components/booking/PriceBreakdown.tsx

@@ -115,7 +115,7 @@ export function PriceBreakdown({
             <input
               type="text"
               inputMode="decimal"
-              className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+              className="admin-editable-summary-amount-input w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
               value={editableValue ?? String(itemTotal)}
               onChange={(e) => onEditableChange(e.target.value)}
               onBlur={onEditableBlur}
@@ -163,7 +163,7 @@ export function PriceBreakdown({
             <input
               type="text"
               inputMode="decimal"
-              className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+              className="admin-editable-summary-amount-input w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
               value={editableValue ?? String(itemTotal)}
               onChange={(e) => onEditableChange(e.target.value)}
               onBlur={onEditableBlur}

package/src/components/booking/PriceSummary.tsx

@@ -106,6 +106,24 @@ function formatLineAmount(
   return formatted;
 }
 
+function shouldAppendQuantitySuffix(type: string | undefined, label: string, quantity: number | null | undefined): boolean {
+  if (quantity == null || quantity <= 1) return false;
+  const normalizedType = String(type ?? '').trim().toUpperCase();
+  const eligibleType =
+    normalizedType === 'TICKET' ||
+    normalizedType === 'FEE' ||
+    normalizedType === 'RETURN_OPTION' ||
+    normalizedType === 'RETURNOPTION' ||
+    normalizedType === 'RETURN';
+  if (!eligibleType) return false;
+  const normalizedLabel = label.toLowerCase();
+  const alreadyHasCountHint =
+    /\bx\s*\d+\b/.test(normalizedLabel) ||
+    /\(\s*x\s*\d+\s*\)/.test(normalizedLabel) ||
+    /\b\d+\s*(person|people|pax|traveler|travellers|ticket|tickets)\b/.test(normalizedLabel);
+  return !alreadyHasCountHint;
+}
+
 function getCurrencySymbol(currency: Currency, locale: Locale): string {
   return formatCurrencyAmount(0, currency, locale).replace(/[0-9\s,.-]/g, '') || currency;
 }
@@ -233,7 +251,7 @@ export function PriceSummary({
                 ) : (
                   <span className="min-w-0 truncate">
                     {label}
-                    {type === 'TICKET' && quantity != null && quantity > 1 ? ` (x${quantity})` : ''}
+                    {shouldAppendQuantitySuffix(type, label, quantity) ? ` (x${quantity})` : ''}
                   </span>
                 )}
                 {tooltip && <InfoTooltip text={tooltip} />}
@@ -255,7 +273,7 @@ export function PriceSummary({
                   <input
                     type="text"
                     inputMode="decimal"
-                    className="h-6 w-24 rounded border border-stone-300 bg-white px-2 py-0.5 text-right text-sm font-medium leading-none text-stone-700"
+                    className="admin-editable-summary-amount-input w-[7rem] shrink-0 rounded-md border border-stone-300 bg-white text-right text-sm font-medium tabular-nums text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-400/80"
                     value={lineAmountInputs?.[lineKey] ?? String(amount)}
                     onChange={(e) => onLineAmountInputChange(lineKey, e.target.value)}
                     onBlur={() => onLineAmountInputBlur?.(lineKey)}

package/src/components/booking/booking-flow.css

@@ -293,6 +293,14 @@
   padding: 0.5rem 0.75rem;
   min-height: 2.75rem;
 }
+.booking-flow-preflight input.admin-editable-summary-amount-input[type='text'] {
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  min-height: 2.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+}
 .booking-flow-preflight .admin-custom-receipt-line .admin-custom-receipt-segment {
   box-sizing: border-box;
   padding: 0.5rem 0.65rem;

package/src/components/booking/useEditableSummaryLines.ts

@@ -0,0 +1,244 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { PriceSummaryLine } from './PriceSummary';
+import { roundMoney } from '../../lib/booking/change-flow-pricing';
+
+type EditableSummaryLineInputState = {
+  amountInput: string;
+  labelInput: string;
+  amountDirty: boolean;
+  labelDirty: boolean;
+};
+
+type ProviderAmountSync = {
+  enabled: boolean;
+  onChange?: (lineKey: string, value: string) => void;
+  onBlur?: (lineKey: string) => void;
+  onReset?: (lineKey: string) => void;
+};
+
+function getEditableSummaryLineKey(line: PriceSummaryLine, index: number): string {
+  if (line.lineKey) return line.lineKey;
+  return line.kind === 'ticket'
+    ? `change-ticket-${line.category}-${index}`
+    : `change-line-${line.label}-${line.type ?? 'line'}-${index}`;
+}
+
+export function useEditableSummaryLines(
+  checkoutPriceSummaryLinesForCheckout: PriceSummaryLine[],
+  providerAmountSync: ProviderAmountSync,
+) {
+  const [editableSummaryInputsByKey, setEditableSummaryInputsByKey] = useState<
+    Record<string, EditableSummaryLineInputState>
+  >({});
+
+  const editableSummaryLineAmountInputs = useMemo(() => {
+    const out: Record<string, string> = {};
+    for (const [lineKey, state] of Object.entries(editableSummaryInputsByKey)) {
+      out[lineKey] = state.amountInput;
+    }
+    return out;
+  }, [editableSummaryInputsByKey]);
+
+  const editableSummaryLineLabelInputs = useMemo(() => {
+    const out: Record<string, string> = {};
+    for (const [lineKey, state] of Object.entries(editableSummaryInputsByKey)) {
+      out[lineKey] = state.labelInput;
+    }
+    return out;
+  }, [editableSummaryInputsByKey]);
+
+  const editableCheckoutPriceSummaryLines = useMemo((): PriceSummaryLine[] => {
+    const firstTaxLineIndex = checkoutPriceSummaryLinesForCheckout.findIndex(
+      (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX',
+    );
+    return checkoutPriceSummaryLinesForCheckout.map((line, index) => {
+      const isBeforeSubtotal = firstTaxLineIndex < 0 || index < firstTaxLineIndex;
+      const lineKey = getEditableSummaryLineKey(line, index);
+      const lineInputState = editableSummaryInputsByKey[lineKey];
+      if (line.kind === 'ticket') {
+        const amountInput = lineInputState?.amountInput;
+        const parsedAmount = amountInput == null || amountInput.trim() === '' ? line.itemTotal : Number(amountInput);
+        return {
+          ...line,
+          lineKey,
+          editable: isBeforeSubtotal,
+          category: lineInputState?.labelInput ?? line.category,
+          itemTotal: Number.isFinite(parsedAmount) ? roundMoney(parsedAmount) : line.itemTotal,
+        };
+      }
+      const amountInput = lineInputState?.amountInput;
+      const parsedAmount = amountInput == null || amountInput.trim() === '' ? line.amount : Number(amountInput);
+      return {
+        ...line,
+        lineKey,
+        editable: isBeforeSubtotal,
+        label: lineInputState?.labelInput ?? line.label,
+        amount: Number.isFinite(parsedAmount) ? roundMoney(parsedAmount) : line.amount,
+      };
+    });
+  }, [checkoutPriceSummaryLinesForCheckout, editableSummaryInputsByKey]);
+
+  useEffect(() => {
+    setEditableSummaryInputsByKey((prev) => {
+      const next: Record<string, EditableSummaryLineInputState> = {};
+      for (let i = 0; i < checkoutPriceSummaryLinesForCheckout.length; i += 1) {
+        const line = checkoutPriceSummaryLinesForCheckout[i];
+        const key = getEditableSummaryLineKey(line, i);
+        const baselineAmount =
+          line.kind === 'ticket' ? String(roundMoney(line.itemTotal)) : String(roundMoney(line.amount));
+        const baselineLabel = line.kind === 'ticket' ? line.category : line.label;
+        const current = prev[key];
+        const amountDirty = current?.amountDirty === true;
+        const labelDirty = current?.labelDirty === true;
+        next[key] = {
+          amountInput: amountDirty ? (current?.amountInput ?? baselineAmount) : baselineAmount,
+          labelInput: labelDirty ? (current?.labelInput ?? baselineLabel) : baselineLabel,
+          amountDirty,
+          labelDirty,
+        };
+      }
+      const prevKeys = Object.keys(prev);
+      const nextKeys = Object.keys(next);
+      if (prevKeys.length !== nextKeys.length) return next;
+      const unchanged = nextKeys.every((key) => {
+        const a = prev[key];
+        const b = next[key];
+        return (
+          a?.amountInput === b.amountInput &&
+          a?.labelInput === b.labelInput &&
+          a?.amountDirty === b.amountDirty &&
+          a?.labelDirty === b.labelDirty
+        );
+      });
+      return unchanged ? prev : next;
+    });
+  }, [checkoutPriceSummaryLinesForCheckout]);
+
+  const editableSummaryPreSubtotalDelta = useMemo(() => {
+    const firstTaxLineIndex = checkoutPriceSummaryLinesForCheckout.findIndex(
+      (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX',
+    );
+    let delta = 0;
+    for (let i = 0; i < checkoutPriceSummaryLinesForCheckout.length; i += 1) {
+      if (firstTaxLineIndex >= 0 && i >= firstTaxLineIndex) break;
+      const line = checkoutPriceSummaryLinesForCheckout[i];
+      const lineKey = getEditableSummaryLineKey(line, i);
+      const baselineAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+      const raw = editableSummaryLineAmountInputs[lineKey];
+      const parsed = raw == null || raw.trim() === '' ? baselineAmount : Number(raw);
+      const editedAmount = Number.isFinite(parsed) ? roundMoney(parsed) : baselineAmount;
+      delta += editedAmount - baselineAmount;
+    }
+    return roundMoney(delta);
+  }, [checkoutPriceSummaryLinesForCheckout, editableSummaryLineAmountInputs]);
+
+  const editableSummaryPreSubtotalDebugRows = useMemo(() => {
+    const firstTaxLineIndex = checkoutPriceSummaryLinesForCheckout.findIndex(
+      (line) => line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX',
+    );
+    const rows: Array<{ label: string; baseline: number; edited: number; delta: number }> = [];
+    for (let i = 0; i < checkoutPriceSummaryLinesForCheckout.length; i += 1) {
+      if (firstTaxLineIndex >= 0 && i >= firstTaxLineIndex) break;
+      const line = checkoutPriceSummaryLinesForCheckout[i];
+      const lineKey = getEditableSummaryLineKey(line, i);
+      const baselineAmount = line.kind === 'ticket' ? line.itemTotal : line.amount;
+      const raw = editableSummaryLineAmountInputs[lineKey];
+      const parsed = raw == null || raw.trim() === '' ? baselineAmount : Number(raw);
+      const editedAmount = Number.isFinite(parsed) ? roundMoney(parsed) : baselineAmount;
+      const delta = roundMoney(editedAmount - baselineAmount);
+      rows.push({
+        label: line.kind === 'ticket' ? line.category : line.label,
+        baseline: roundMoney(baselineAmount),
+        edited: editedAmount,
+        delta,
+      });
+    }
+    return rows;
+  }, [checkoutPriceSummaryLinesForCheckout, editableSummaryLineAmountInputs]);
+
+  const onLineAmountInputChange = (lineKey: string, value: string) => {
+    const sanitized = value.replace(/[^0-9.-]/g, '');
+    setEditableSummaryInputsByKey((prev) => {
+      const current = prev[lineKey] ?? {
+        amountInput: '',
+        labelInput: '',
+        amountDirty: false,
+        labelDirty: false,
+      };
+      return {
+        ...prev,
+        [lineKey]: { ...current, amountInput: sanitized, amountDirty: true },
+      };
+    });
+    if (providerAmountSync.enabled) providerAmountSync.onChange?.(lineKey, sanitized);
+  };
+
+  const onLineAmountInputBlur = (lineKey: string) => {
+    setEditableSummaryInputsByKey((prev) => {
+      const current = prev[lineKey];
+      if (!current) return prev;
+      const raw = current.amountInput ?? '';
+      if (raw.trim() === '' || raw === '-' || raw === '.' || raw === '-.') {
+        return prev;
+      }
+      const parsed = Number(raw);
+      if (!Number.isFinite(parsed)) return prev;
+      const normalized = roundMoney(parsed).toFixed(2);
+      if (normalized === raw) return prev;
+      return {
+        ...prev,
+        [lineKey]: { ...current, amountInput: normalized },
+      };
+    });
+    if (providerAmountSync.enabled) providerAmountSync.onBlur?.(lineKey);
+  };
+
+  const onLineAmountReset = (lineKey: string) => {
+    const original = checkoutPriceSummaryLinesForCheckout.find(
+      (line, index) => getEditableSummaryLineKey(line, index) === lineKey,
+    );
+    if (!original) return;
+    const nextValue =
+      original.kind === 'ticket' ? String(roundMoney(original.itemTotal)) : String(roundMoney(original.amount));
+    setEditableSummaryInputsByKey((prev) => {
+      const current = prev[lineKey] ?? {
+        amountInput: nextValue,
+        labelInput: '',
+        amountDirty: false,
+        labelDirty: false,
+      };
+      return {
+        ...prev,
+        [lineKey]: { ...current, amountInput: nextValue, amountDirty: false },
+      };
+    });
+    if (providerAmountSync.enabled) providerAmountSync.onReset?.(lineKey);
+  };
+
+  const onLineLabelInputChange = (lineKey: string, value: string) => {
+    setEditableSummaryInputsByKey((prev) => {
+      const current = prev[lineKey] ?? {
+        amountInput: '',
+        labelInput: '',
+        amountDirty: false,
+        labelDirty: false,
+      };
+      return {
+        ...prev,
+        [lineKey]: { ...current, labelInput: value, labelDirty: true },
+      };
+    });
+  };
+
+  return {
+    editableCheckoutPriceSummaryLines,
+    editableSummaryLineAmountInputs,
+    editableSummaryLineLabelInputs,
+    editableSummaryPreSubtotalDelta,
+    editableSummaryPreSubtotalDebugRows,
+    onLineAmountInputChange,
+    onLineAmountInputBlur,
+    onLineAmountReset,
+    onLineLabelInputChange,
+  };
+}

package/src/lib/booking/change-booking-server-preview.ts

@@ -97,6 +97,7 @@ export function mapQuoteLineItemsToPriceSummaryLines(
       label: label || type || 'Line',
       amount,
       type: summaryType,
+      quantity: qty > 0 ? qty : null,
     });
   }
   return out;