@ticketboothapp/booking 1.2.167 → 1.2.168

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -11,15 +11,12 @@ 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']>;
@@ -28,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;
@@ -52,6 +56,8 @@ export interface AdminChangeReceiptComparisonProps {
     disposition: AdminReleaseRefundDisposition | null,
   ) => void;
   refundQuoteLoading?: boolean;
+  sourceProductName?: string | null;
+  targetProductName?: string | null;
 }
 
 function normalizeLocale(locale: string): Locale {
@@ -82,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,
@@ -95,30 +106,47 @@ export function AdminChangeReceiptComparison({
   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,
@@ -151,13 +179,42 @@ export function AdminChangeReceiptComparison({
         ...(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'
@@ -167,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">
@@ -292,11 +248,21 @@ 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}
@@ -305,37 +271,38 @@ export function AdminChangeReceiptComparison({
               <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}
             />
@@ -343,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}

package/src/components/booking/ChangeBookingTicketsAndAddOnsPanel.tsx

@@ -1,6 +1,10 @@
 import type { AddOn, Availability, ReturnOption } from '../../lib/booking-api';
 import { AddOnsSection, type AddOnSelection } from './AddOnsSection';
 import type { Currency } from './CurrencySwitcher';
+import {
+  incompatibleAddOnSelections,
+  removeAddOnSelections,
+} from './incompatible-add-on-selections';
 import { TicketSelector, type TicketRate } from './TicketSelector';
 
 type TranslationFn = (key: string, params?: Record<string, string | number>) => string;
@@ -29,6 +33,8 @@ export interface ChangeBookingTicketsAndAddOnsPanelProps {
   applyReceiptPaidFloors: boolean;
   ticketUnitFloorByCategory?: Map<string, number>;
   addOns: AddOn[];
+  knownAddOns?: AddOn[];
+  addOnCatalogLoaded?: boolean;
   addOnSelections: AddOnSelection[];
   onAddOnSelectionsChange: AddOnSelectionsChangeHandler;
   minimumTotalByAddOnId?: Map<string, number>;
@@ -56,12 +62,23 @@ export function ChangeBookingTicketsAndAddOnsPanel({
   applyReceiptPaidFloors,
   ticketUnitFloorByCategory,
   addOns,
+  knownAddOns = addOns,
+  addOnCatalogLoaded = false,
   addOnSelections,
   onAddOnSelectionsChange,
   minimumTotalByAddOnId,
   suppressUnitPrices = false,
   suppressAddOnPrices = false,
 }: ChangeBookingTicketsAndAddOnsPanelProps) {
+  const incompatibleSelections = incompatibleAddOnSelections(
+    addOnSelections,
+    addOns,
+    addOnCatalogLoaded,
+  );
+  const incompatibleAddOnIds = Array.from(
+    new Set(incompatibleSelections.map((selection) => selection.addOnId)),
+  );
+
   return (
     <>
       <TicketSelector
@@ -97,6 +114,69 @@ export function ChangeBookingTicketsAndAddOnsPanel({
           suppressPrices={suppressAddOnPrices}
         />
       ) : null}
+
+      {incompatibleAddOnIds.length > 0 ? (
+        <div
+          className="space-y-3 rounded-lg border border-red-300 bg-red-50 p-4"
+          data-testid="incompatible-add-ons"
+        >
+          <div>
+            <h3 className="text-sm font-semibold !text-red-700">
+              Add-on unavailable with selected tour
+            </h3>
+            <p className="mt-1 text-sm text-red-800">
+              This booking still contains an add-on that the selected tour does not offer.
+              Remove it explicitly before recalculating the amendment.
+            </p>
+          </div>
+          {incompatibleAddOnIds.map((addOnId) => {
+            const addOn = knownAddOns.find((candidate) => candidate.addOnId === addOnId);
+            const selections = incompatibleSelections.filter(
+              (selection) => selection.addOnId === addOnId,
+            );
+            const quantity = selections.reduce(
+              (total, selection) => total + Math.max(1, Number(selection.quantity) || 1),
+              0,
+            );
+            const variants = selections
+              .map((selection) => (
+                addOn?.variants.find((variant) => variant.id === selection.variantId)?.label ??
+                (selection.variantId ? 'Selected option' : null)
+              ))
+              .filter((label): label is string => Boolean(label));
+            return (
+              <div
+                key={addOnId}
+                className="flex flex-col gap-3 rounded-md border border-red-200 bg-white p-3 sm:flex-row sm:items-center sm:justify-between"
+              >
+                <div className="text-sm">
+                  <div className="font-medium text-stone-900">{addOn?.name ?? 'Selected add-on'}</div>
+                  <div className="text-stone-600">
+                    {variants.length > 0 ? variants.join(', ') : `Quantity ${quantity}`}
+                  </div>
+                </div>
+                {isAdmin ? (
+                  <button
+                    type="button"
+                    className="rounded-md border border-red-500 bg-white px-3 py-2 text-sm font-semibold text-red-800 hover:bg-red-100"
+                    onClick={() => {
+                      onAddOnSelectionsChange((current) =>
+                        removeAddOnSelections(current, addOnId),
+                      );
+                    }}
+                  >
+                    Remove add-on
+                  </button>
+                ) : (
+                  <p className="text-sm text-red-800">
+                    Choose another tour to keep this add-on.
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
     </>
   );
 }