@ticketboothapp/booking 1.2.166 → 1.2.168

package/src/components/booking/AdminChangePromoEditor.tsx

@@ -0,0 +1,97 @@
+import type { AdminPromoApplicationScope } from '../../lib/booking-api';
+import type { Currency } from './CurrencySwitcher';
+import { PromoCodeInput } from './PromoCodeInput';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+interface AdminChangePromoEditorProps {
+  previousPromoCode: string | null;
+  promoCodeInput: string;
+  appliedPromoCode: string | null;
+  promoCodeError: string;
+  promoCodeValidating: boolean;
+  scope: AdminPromoApplicationScope;
+  currency: Currency;
+  locale: string;
+  t: TranslationFn;
+  onInputChange: (value: string) => void;
+  onApply: () => void;
+  onRemove: () => void;
+  onScopeChange: (scope: AdminPromoApplicationScope) => void;
+}
+
+export function AdminChangePromoEditor({
+  previousPromoCode,
+  promoCodeInput,
+  appliedPromoCode,
+  promoCodeError,
+  promoCodeValidating,
+  scope,
+  currency,
+  locale,
+  t,
+  onInputChange,
+  onApply,
+  onRemove,
+  onScopeChange,
+}: AdminChangePromoEditorProps) {
+  return (
+    <div className="mb-3 rounded-lg border border-sky-200 bg-white/80 p-3">
+      <PromoCodeInput
+        promoCodeInput={promoCodeInput}
+        appliedPromoCode={appliedPromoCode}
+        promoCodeError={promoCodeError}
+        promoCodeValidating={promoCodeValidating}
+        promoDiscountAmount={0}
+        currency={currency}
+        locale={locale}
+        t={t}
+        onInputChange={onInputChange}
+        onApply={onApply}
+        onRemove={onRemove}
+        hideDiscountAmount
+      />
+
+      {previousPromoCode ? (
+        <p className="mt-2 text-xs text-stone-600">
+          Earlier value keeps its existing <span className="font-semibold">{previousPromoCode}</span> allocation.
+          It is not automatically reused on this amendment.
+        </p>
+      ) : null}
+
+      {appliedPromoCode ? (
+        <fieldset className="mt-3 space-y-2">
+          <legend className="text-xs font-semibold text-stone-800">Apply this code to</legend>
+          <label className="flex cursor-pointer items-start gap-2 text-xs text-stone-700">
+            <input
+              type="radio"
+              name="adminPromoApplicationScope"
+              value="CHANGE_ONLY"
+              checked={scope === 'CHANGE_ONLY'}
+              onChange={() => onScopeChange('CHANGE_ONLY')}
+            />
+            <span>
+              <span className="font-semibold">This change only</span>
+              <span className="block text-stone-500">Discount only eligible positive value introduced now.</span>
+            </span>
+          </label>
+          <label className="flex cursor-pointer items-start gap-2 text-xs text-stone-700">
+            <input
+              type="radio"
+              name="adminPromoApplicationScope"
+              value="ENTIRE_BOOKING"
+              checked={scope === 'ENTIRE_BOOKING'}
+              onChange={() => onScopeChange('ENTIRE_BOOKING')}
+            />
+            <span>
+              <span className="font-semibold">Entire active booking</span>
+              <span className="block text-stone-500">
+                Top up currently eligible value without duplicating discounts already allocated by earlier ledger changes.
+              </span>
+            </span>
+          </label>
+        </fieldset>
+      ) : null}
+    </div>
+  );
+}

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -9,16 +9,14 @@ import type { Locale } from '../../lib/booking/i18n/config';
 import type { ChangeBookingFlowProps } from './booking-flow-types';
 import type { Currency } from './CurrencySwitcher';
 import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import { collapseAdminPromoLines } from './admin-change-receipt-lines';
 import {
-  adminRemovalOperationLabel,
   noRefundRemovedValue,
-  normalizeReturnPriceTreatment,
   refundDecisionsComplete,
-  releaseRefundDispositionOptions,
-  returnPriceTreatmentOptions,
   type AdminReleaseRefundDisposition,
-  type AdminReturnPriceTreatment,
 } from './admin-refund-disposition';
+import { friendlyChangeBookingError } from './change-booking-error-message';
+import { isProductFamilyReceiptConversion } from './change-booking-flow-helpers';
 
 type TranslationFn = (key: string, params?: Record<string, string>) => string;
 type OriginalReceipt = NonNullable<ChangeBookingFlowProps['originalReceipt']>;
@@ -27,10 +25,17 @@ export interface AdminChangeReceiptComparisonProps {
   originalReceipt: OriginalReceipt;
   /** Amendment-only rows returned by the Pricing V2 server quote. */
   amendmentLines: PriceSummaryLine[] | null;
+  /** Full receipt after the amendment, used for clear family-conversion comparisons. */
+  resultingReceiptLines?: 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;
+  /** Settled cash after completed refunds, calculated by the backend. */
+  netPaid?: number | null;
+  currentPaymentCredit?: number;
+  projectedPaymentCredit?: number;
+  refundCandidate?: number;
   selectionChanged: boolean;
   quoteError?: string | null;
   amountDueLabel: string;
@@ -39,6 +44,8 @@ export interface AdminChangeReceiptComparisonProps {
   t: TranslationFn;
   taxRate?: number;
   adjustments?: ReactNode;
+  promoEditor?: ReactNode;
+  promoCode?: string | null;
   refundDecisionOperations?: AdminAmendmentOperationSnapshot[];
   returnPriceTreatmentOperations?: AdminAmendmentOperationSnapshot[];
   allowedRefundDispositionsByOperationId?: Record<string, AdminAmendmentRefundDisposition[]>;
@@ -49,6 +56,8 @@ export interface AdminChangeReceiptComparisonProps {
     disposition: AdminReleaseRefundDisposition | null,
   ) => void;
   refundQuoteLoading?: boolean;
+  sourceProductName?: string | null;
+  targetProductName?: string | null;
 }
 
 function normalizeLocale(locale: string): Locale {
@@ -79,8 +88,13 @@ function amendmentLineOrder(line: PriceSummaryLine): number {
 export function AdminChangeReceiptComparison({
   originalReceipt,
   amendmentLines,
+  resultingReceiptLines = null,
   amountDue,
   updatedTotal,
+  netPaid,
+  currentPaymentCredit = 0,
+  projectedPaymentCredit = 0,
+  refundCandidate = 0,
   selectionChanged,
   quoteError,
   amountDueLabel,
@@ -89,31 +103,50 @@ export function AdminChangeReceiptComparison({
   t,
   taxRate,
   adjustments,
+  promoEditor,
+  promoCode,
   refundDecisionOperations = [],
-  returnPriceTreatmentOperations = [],
-  allowedRefundDispositionsByOperationId = {},
   removedValueByOperationId = {},
   refundDispositionsByOperationId = {},
-  onRefundDispositionChange,
   refundQuoteLoading = false,
 }: AdminChangeReceiptComparisonProps) {
+  const readableQuoteError = friendlyChangeBookingError(quoteError);
   const displayLocale = normalizeLocale(locale);
   const existingLines = originalLines(originalReceipt);
   const originalCurrency = originalReceipt.currency ?? currency;
   const quoteReady = amendmentLines != null && amountDue != null && updatedTotal != null;
+  const settlementReady = quoteReady && netPaid != null;
+  const currentBalanceOwing = settlementReady
+    ? Math.max(
+        0,
+        Math.round(
+          (originalReceipt.total - netPaid - currentPaymentCredit) * 100,
+        ) / 100,
+      )
+    : null;
+  const projectedBalanceOwing = settlementReady
+    ? Math.max(
+        0,
+        Math.round(
+          (updatedTotal - netPaid - projectedPaymentCredit) * 100,
+        ) / 100,
+      )
+    : null;
+  const balanceReduction = settlementReady
+    ? Math.max(
+        0,
+        Math.round(((currentBalanceOwing ?? 0) - (projectedBalanceOwing ?? 0)) * 100) / 100,
+      )
+    : 0;
   const hasRefundDecisions = refundDecisionOperations.length > 0;
-  const hasReturnPriceTreatments = returnPriceTreatmentOperations.length > 0;
   const refundSelectionsComplete = refundDecisionsComplete(
     refundDecisionOperations,
     refundDispositionsByOperationId,
   );
   const settlementPending = hasRefundDecisions && (!refundSelectionsComplete || refundQuoteLoading);
-  const returnRepricePending = hasReturnPriceTreatments &&
-    returnPriceTreatmentOperations.some(
-      (operation) => refundDispositionsByOperationId[operation.operationId] != null,
-    ) &&
-    refundQuoteLoading;
   const displayedAmountDue = settlementPending ? null : amountDue;
+  const bookingTotalChange =
+    updatedTotal == null ? null : Math.round((updatedTotal - originalReceipt.total) * 100) / 100;
   const removedWithoutRefund = noRefundRemovedValue(
     refundDecisionOperations,
     refundDispositionsByOperationId,
@@ -135,23 +168,53 @@ export function AdminChangeReceiptComparison({
         .sort((a, b) => amendmentLineOrder(a.line) - amendmentLineOrder(b.line) || a.index - b.index)
         .map(({ line }) => line)
     : [];
-  const amendmentSubtotal = amendmentNonTaxLines.reduce(
+  const collapsedAmendmentNonTaxLines = collapseAdminPromoLines(amendmentNonTaxLines, promoCode);
+  const amendmentSubtotal = collapsedAmendmentNonTaxLines.reduce(
     (sum, line) => sum + (line.kind === 'ticket' ? line.itemTotal : line.amount),
     0,
   );
   const amendmentDisplayLines: PriceSummaryLine[] = amendmentLines
     ? [
-        ...amendmentNonTaxLines,
+        ...collapsedAmendmentNonTaxLines,
         ...(Math.abs(amendmentTax) >= 0.005
           ? [{
               kind: 'line' as const,
-              label: amendmentTax < 0 ? 'Refunded tax' : 'Additional tax',
+              label: amendmentTax < 0 ? 'Tax reduction' : 'Additional tax',
               amount: amendmentTax,
               type: 'TAX',
             }]
           : []),
       ]
     : [];
+  const familyConversionReceiptLines = collapseAdminPromoLines(
+    resultingReceiptLines ?? [],
+    promoCode,
+  );
+  const isProductFamilyConversion = isProductFamilyReceiptConversion(
+    existingLines,
+    familyConversionReceiptLines,
+  );
+  const summaryDisplayLines = isProductFamilyConversion
+    ? familyConversionReceiptLines
+    : amendmentDisplayLines;
+  const summarySubtotal = isProductFamilyConversion
+    ? familyConversionReceiptLines.reduce((sum, line) => {
+        if (line.kind === 'line' && String(line.type ?? '').toUpperCase() === 'TAX') return sum;
+        return sum + (line.kind === 'ticket' ? line.itemTotal : line.amount);
+      }, 0)
+    : amendmentSubtotal;
+  const summaryTotal = isProductFamilyConversion
+    ? updatedTotal
+    : bookingTotalChange ?? amountDue;
+  const translatedChangeTotalLabel = t('booking.changeToBookingTotal');
+  const summaryTotalLabel = isProductFamilyConversion
+    ? 'New booking total'
+    : translatedChangeTotalLabel && translatedChangeTotalLabel !== 'booking.changeToBookingTotal'
+      ? translatedChangeTotalLabel
+      : 'Change to booking total';
+  const displayedSettlementAmount = refundCandidate > 0.005
+    ? refundCandidate
+    : displayedAmountDue;
   const amountDueClass =
     displayedAmountDue != null && displayedAmountDue < -0.005
       ? 'text-emerald-700'
@@ -161,107 +224,6 @@ export function AdminChangeReceiptComparison({
 
   return (
     <div className="min-w-0 space-y-3 overflow-visible">
-      {hasReturnPriceTreatments ? (
-        <section className="rounded-lg border border-sky-300 bg-sky-50 p-3" aria-label="Return price treatment">
-          <div className="mb-3">
-            <h3 className="text-sm font-semibold text-stone-900">Return price</h3>
-            <p className="mt-1 text-xs text-stone-600">
-              By default the original paid return price stays on the booking. You can optionally reduce it and choose refund treatment.
-            </p>
-          </div>
-          <div className="space-y-3">
-            {returnPriceTreatmentOperations.map((operation) => {
-              const options = returnPriceTreatmentOptions(
-                allowedRefundDispositionsByOperationId[operation.operationId],
-              );
-              const selectedValue: AdminReturnPriceTreatment = normalizeReturnPriceTreatment(
-                refundDispositionsByOperationId[operation.operationId],
-              );
-              const selected = options.find((option) => option.value === selectedValue);
-              return (
-                <div key={operation.operationId} className="rounded-md border border-sky-200 bg-white p-3">
-                  <div className="mb-2 text-sm font-medium capitalize text-stone-900">
-                    {adminRemovalOperationLabel(operation)}
-                  </div>
-                  <select
-                    className="w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900"
-                    value={selectedValue}
-                    onChange={(event) => {
-                      const value = event.target.value as AdminReturnPriceTreatment;
-                      onRefundDispositionChange?.(
-                        operation.operationId,
-                        value === 'KEEP_FLOOR' ? null : value,
-                      );
-                    }}
-                    aria-label={`Return price treatment for ${adminRemovalOperationLabel(operation)}`}
-                  >
-                    {options.map((option) => (
-                      <option key={option.value} value={option.value}>{option.label}</option>
-                    ))}
-                  </select>
-                  {selected ? <p className="mt-2 text-xs text-stone-600">{selected.description}</p> : null}
-                </div>
-              );
-            })}
-          </div>
-          {returnRepricePending ? (
-            <p className="mt-3 text-xs font-medium text-sky-800">Recalculating settlement…</p>
-          ) : null}
-        </section>
-      ) : null}
-
-      {hasRefundDecisions ? (
-        <section className="rounded-lg border border-amber-300 bg-amber-50 p-3" aria-label="Refund treatment">
-          <div className="mb-3">
-            <h3 className="text-sm font-semibold text-stone-900">Choose refund treatment</h3>
-            <p className="mt-1 text-xs text-stone-600">
-              Removed paid value is never refunded automatically. Choose an explicit treatment, then the server will recalculate the settlement.
-            </p>
-          </div>
-          <div className="space-y-3">
-            {refundDecisionOperations.map((operation) => {
-              const options = releaseRefundDispositionOptions(
-                allowedRefundDispositionsByOperationId[operation.operationId],
-              );
-              const selectedValue = refundDispositionsByOperationId[operation.operationId];
-              const selected = options.find((option) => option.value === selectedValue);
-              const removedValue = removedValueByOperationId[operation.operationId];
-              return (
-                <div key={operation.operationId} className="rounded-md border border-amber-200 bg-white p-3">
-                  <div className="mb-2 flex flex-wrap items-start justify-between gap-2 text-sm font-medium text-stone-900">
-                    <span className="capitalize">{adminRemovalOperationLabel(operation)}</span>
-                    {Number.isFinite(removedValue) ? (
-                      <span>{formatCurrencyAmount(removedValue, currency, displayLocale)}</span>
-                    ) : null}
-                  </div>
-                  <select
-                    className="w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-sm text-stone-900"
-                    value={selectedValue ?? ''}
-                    onChange={(event) => {
-                      const value = event.target.value;
-                      onRefundDispositionChange?.(
-                        operation.operationId,
-                        value ? value as AdminReleaseRefundDisposition : null,
-                      );
-                    }}
-                    aria-label={`Refund treatment for ${adminRemovalOperationLabel(operation)}`}
-                  >
-                    <option value="">Choose refund treatment…</option>
-                    {options.map((option) => (
-                      <option key={option.value} value={option.value}>{option.label}</option>
-                    ))}
-                  </select>
-                  {selected ? <p className="mt-2 text-xs text-stone-600">{selected.description}</p> : null}
-                </div>
-              );
-            })}
-          </div>
-          {refundQuoteLoading && refundSelectionsComplete ? (
-            <p className="mt-3 text-xs font-medium text-amber-800">Recalculating settlement…</p>
-          ) : null}
-        </section>
-      ) : null}
-
       <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">
@@ -286,49 +248,61 @@ export function AdminChangeReceiptComparison({
         <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">Server-priced amendment</p>
+              <h3 className="text-sm font-semibold text-stone-900">
+                {isProductFamilyConversion ? 'New purchase' : 'Current change'}
+              </h3>
+              {isProductFamilyConversion ? (
+                <p className="mt-0.5 text-xs text-stone-500">
+                  Server-priced booking after conversion
+                </p>
+              ) : null}
             </div>
             <span className="shrink-0 text-xs font-medium text-stone-500">
-              {displayedAmountDue == null ? '—' : formatCurrencyAmount(displayedAmountDue, currency, displayLocale)}
+              {isProductFamilyConversion
+                ? formatCurrencyAmount(updatedTotal ?? 0, currency, displayLocale)
+                : bookingTotalChange == null
+                  ? '—'
+                  : formatCurrencyAmount(bookingTotalChange, currency, displayLocale)}
             </span>
           </div>
+          {promoEditor}
           {!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>
-          ) : quoteError ? (
+          ) : readableQuoteError ? (
             <div className="rounded-md border border-red-200 bg-red-50 px-3 py-4 text-center" role="alert">
-              <p className="text-sm font-medium text-red-800">{quoteError}</p>
+              <p className="text-sm font-medium text-red-800">{readableQuoteError}</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>
+              <p className="text-sm font-medium text-stone-700">Loading price change…</p>
             </div>
           ) : settlementPending ? (
-            <div className="rounded-md border border-dashed border-amber-300 bg-white/70 px-3 py-4 text-center">
-              <p className="text-sm font-medium text-amber-900">Refund treatment required</p>
-              <p className="mt-1 text-xs text-stone-600">Choose how to handle the removed paid value above.</p>
+            <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">Loading price change…</p>
             </div>
-          ) : amendmentDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 && removedWithoutRefund > 0 ? (
+          ) : summaryDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 && removedWithoutRefund > 0 ? (
             <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-800">No refund will be created</p>
               <p className="mt-1 text-xs text-stone-600">
                 {formatCurrencyAmount(removedWithoutRefund, currency, displayLocale)} of booking value will be removed without customer credit.
               </p>
             </div>
-          ) : amendmentDisplayLines.length === 0 && Math.abs(amountDue) < 0.005 ? (
+          ) : summaryDisplayLines.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>
             </div>
           ) : (
             <PriceSummary
-              lines={amendmentDisplayLines}
-              total={amountDue}
+              lines={summaryDisplayLines}
+              total={summaryTotal ?? amountDue}
+              totalLabel={summaryTotalLabel}
+              showPositiveTotalSign={!isProductFamilyConversion}
               currency={currency}
               locale={displayLocale}
-              subtotal={amendmentSubtotal}
+              subtotal={summarySubtotal}
               size="sm"
               t={t}
             />
@@ -336,31 +310,82 @@ export function AdminChangeReceiptComparison({
         </section>
       </div>
 
-      {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 total</h3>
-            <p className="mt-0.5 text-xs text-stone-500">Authoritative total returned by the server quote</p>
-          </div>
-          <span className="text-lg font-semibold tabular-nums text-stone-900">
-            {formatCurrencyAmount(updatedTotal, currency, displayLocale)}
-          </span>
-        </section>
-      ) : null}
-
       {adjustments ? (
         <section className="rounded-lg border border-amber-200 bg-amber-50/40 p-3">
-          <h3 className="mb-2 text-sm font-semibold text-stone-900">Admin adjustments</h3>
+          <h3 className="mb-2 text-sm font-semibold text-stone-900">Add custom line items</h3>
           {adjustments}
         </section>
       ) : null}
 
+      {quoteReady ? (
+        <section className="rounded-lg border border-stone-300 bg-white px-3 py-3 shadow-sm">
+          <h3 className="text-sm font-semibold text-stone-900">After this change</h3>
+          {settlementReady ? (
+            <div className="mt-3 space-y-2 border-t border-stone-200 pt-3 text-xs">
+              <div className="flex items-center justify-between gap-3 text-stone-600">
+                <span>Updated booking total</span>
+                <span className="font-medium tabular-nums text-stone-900">
+                  {formatCurrencyAmount(updatedTotal, currency, displayLocale)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between gap-3 text-stone-600">
+                <span>Customer already paid</span>
+                <span className="font-medium tabular-nums text-stone-900">
+                  {formatCurrencyAmount(netPaid, currency, displayLocale)}
+                </span>
+              </div>
+              {projectedPaymentCredit > 0.005 ? (
+                <div className="flex items-center justify-between gap-3 text-stone-600">
+                  <span>Payment credit applied</span>
+                  <span className="font-medium tabular-nums text-stone-900">
+                    {formatCurrencyAmount(projectedPaymentCredit, currency, displayLocale)}
+                  </span>
+                </div>
+              ) : null}
+              <div className="flex items-center justify-between gap-3 text-stone-600">
+                <span>Balance owing before change</span>
+                <span className="font-medium tabular-nums text-stone-900">
+                  {formatCurrencyAmount(currentBalanceOwing ?? 0, currency, displayLocale)}
+                </span>
+              </div>
+              {balanceReduction > 0.005 ? (
+                <div className="flex items-center justify-between gap-3 font-semibold text-emerald-700">
+                  <span>
+                    {isProductFamilyConversion
+                      ? 'Previous unpaid balance removed'
+                      : 'Balance reduction'}
+                  </span>
+                  <span className="tabular-nums">
+                    {formatCurrencyAmount(balanceReduction, currency, displayLocale)}
+                  </span>
+                </div>
+              ) : null}
+              {refundCandidate > 0.005 ? (
+                <div className="flex items-center justify-between gap-3 font-semibold text-emerald-700">
+                  <span>Amount to refund customer</span>
+                  <span className="tabular-nums">
+                    {formatCurrencyAmount(refundCandidate, currency, displayLocale)}
+                  </span>
+                </div>
+              ) : amountDue < -0.005 ? (
+                <div className="flex items-center justify-between gap-3 font-semibold text-stone-600">
+                  <span>Amount to refund customer</span>
+                  <span className="tabular-nums">
+                    {formatCurrencyAmount(0, currency, displayLocale)}
+                  </span>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+        </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}`}>
-          {!selectionChanged || displayedAmountDue == null
+          {!selectionChanged || displayedSettlementAmount == null
             ? '—'
-            : formatCurrencyAmount(displayedAmountDue, currency, displayLocale)}
+            : formatCurrencyAmount(displayedSettlementAmount, currency, displayLocale)}
         </span>
       </div>
     </div>

package/src/components/booking/ChangeBookingFlow.tsx

@@ -149,7 +149,7 @@ export function ChangeBookingFlow({
   useSeedPromoCodeInput(autoAppliedPromoCode, setPromoCodeInput);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
-  const [termsAccepted, setTermsAccepted] = useState(false);
+  const [termsAccepted, setTermsAccepted] = useState(true);
   const [, setTermsAcceptedAt] = useState<string | null>(null);
   const [partnerAttributionConfirmed, setPartnerAttributionConfirmed] = useState(false);
   const changeFlowOriginalDate = useMemo(
@@ -304,6 +304,8 @@ export function ChangeBookingFlow({
     timesForSelectedDate,
     companyTimezone,
     changeFlowResolvedInitialProductOptionId,
+    mostPopularProductOptionId:
+      activeOptions.find((option) => option.mostPopular)?.optionId ?? null,
     precomputedPricesByOption,
     currency,
     originalReceiptSubtotal: originalReceipt?.subtotal,
@@ -325,6 +327,7 @@ export function ChangeBookingFlow({
   });
 
   const {
+    initialAddOnQtyByKey,
     initialAddOnMinQtyByKey,
     initialAddOnMinTotalByAddOnId,
     updateAddOnSelections,
@@ -332,7 +335,7 @@ export function ChangeBookingFlow({
     initialValues,
     originalReceiptLineItems: originalReceipt?.lineItems,
     addOns,
-    isCustomerSelfServeChange,
+    lockExistingAddOnQuantities: isCustomerSelfServeChange,
     setAddOnSelections,
   });
 
@@ -571,7 +574,7 @@ export function ChangeBookingFlow({
     pickupLocationId,
     quantities,
     addOnSelections,
-    initialAddOnMinQtyByKey,
+    initialAddOnQtyByKey,
     changeFlowResolvedInitialProductOptionId,
   });
   const hasChangeSelection = changeSelectionDetails.hasChangesFromInitial;

package/src/components/booking/ChangeBookingQuoteStatusPlaceholder.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import { friendlyChangeBookingError } from './change-booking-error-message';
 
 export interface ChangeBookingQuoteStatusPlaceholderParams {
   suppressSelfServeCurrencyUi: boolean;
@@ -37,14 +38,18 @@ export function buildChangeBookingQuoteStatusPlaceholder({
   if (changeQuoteFetchError) {
     return (
       <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
-        {changeQuoteFetchError}
+        {friendlyChangeBookingError(changeQuoteFetchError)}
       </div>
     );
   }
   if (quoteCanProceed === false) {
     return (
       <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
-        <div>{quoteBlockedReason ?? 'This booking change is not available.'}</div>
+        <div>
+          {friendlyChangeBookingError(
+            quoteBlockedReason ?? 'This booking change is not available.',
+          )}
+        </div>
         {blockedDetails}
       </div>
     );

package/src/components/booking/ChangeBookingSelectionControlsPanel.tsx

@@ -42,6 +42,8 @@ export interface ChangeBookingSelectionControlsPanelProps {
   applyReceiptPaidFloors: boolean;
   ticketUnitFloorByCategory?: Map<string, number>;
   addOns: AddOn[];
+  knownAddOns?: AddOn[];
+  addOnCatalogLoaded?: boolean;
   addOnSelections: AddOnSelection[];
   onAddOnSelectionsChange: AddOnSelectionsChangeHandler;
   minimumTotalByAddOnId?: Map<string, number>;
@@ -80,6 +82,8 @@ export function ChangeBookingSelectionControlsPanel({
   applyReceiptPaidFloors,
   ticketUnitFloorByCategory,
   addOns,
+  knownAddOns,
+  addOnCatalogLoaded,
   addOnSelections,
   onAddOnSelectionsChange,
   minimumTotalByAddOnId,
@@ -146,6 +150,8 @@ export function ChangeBookingSelectionControlsPanel({
           ticketUnitFloorByCategory={ticketUnitFloorByCategory}
           suppressUnitPrices={suppressUnitPrices}
           addOns={addOns}
+          knownAddOns={knownAddOns}
+          addOnCatalogLoaded={addOnCatalogLoaded}
           addOnSelections={addOnSelections}
           onAddOnSelectionsChange={onAddOnSelectionsChange}
           minimumTotalByAddOnId={minimumTotalByAddOnId}