@ticketboothapp/booking 1.2.59 → 1.2.60

package/src/components/booking/BookingFlow.tsx

@@ -47,9 +47,20 @@ import { useTranslations, useLocale } from '../../lib/booking/i18n';
 import { type Currency } from './CurrencySwitcher';
 import { formatBookingRefForDisplay } from '../../lib/booking-ref';
 import {
-  formatCurrencyAmount,
-  reconcileChangeBookingProposedTotal,
-} from '../../lib/currency';
+  effectiveProductOptionIdForChangeFlow,
+  isParentProductId,
+  normalizeProductOptionIdForChangeFlow,
+} from '../../lib/booking/product-option-id';
+import { formatCurrencyAmount } from '../../lib/currency';
+import {
+  resolveChangeFlowNewBookingTotal,
+  changeFlowBalanceVsOriginal,
+  resolveChangeFlowDisplayedAmounts,
+  normalizeNearZeroOwed,
+  changeFlowTicketLineTotalWithReceiptFloor,
+  changeFlowFeeLineTotalWithReceiptFloor,
+  changeFlowReturnPerPersonWithReceiptFloor,
+} from '../../lib/booking/change-flow-pricing';
 import { buildCheckoutBreakdown } from '../../lib/booking/checkout-breakdown';
 import type { PricingConfig, PrecomputedPricesByCategory, ItineraryDisplayStep } from '../../lib/booking-api';
 import { ItineraryStepType as StepType } from '../../lib/booking-api';
@@ -79,16 +90,6 @@ import type { BookingFlowUiOptions } from './booking-flow-ui';
 import type { ProviderDashboardChangeBookingPayload } from './provider-dashboard-change-booking';
 import { BOOKING_FLOW_ABANDON_EVENT } from '../../providers/booking-dialog-provider';
 
-/**
- * Change-booking diagnostics in the console on local machines only.
- * Uses hostname (not NODE_ENV): bundled packages often inline production, so `development` was never true in the browser.
- */
-function isLocalhostChangeBookingDebug(): boolean {
-  if (typeof window === 'undefined') return false;
-  const h = window.location.hostname;
-  return h === 'localhost' || h === '127.0.0.1' || h === '[::1]' || h.endsWith('.localhost');
-}
-
 /** Live selection snapshot for change-booking compare UI (parent dialog). */
 export interface ChangeFlowSelectionPreview {
   tourName: string;
@@ -153,140 +154,6 @@ function normalizeLineLabelForCompare(label: string): string {
     .trim();
 }
 
-/** Mirrors BookingFlow protected ticket subtotal for a given order summary snapshot. */
-function computeChangeFlowProtectedTicketSubtotalForOrderSummary(
-  sameItinerary: boolean,
-  ticketLineItems: OrderSummary['ticketLineItems'],
-  ticketFloors: Map<string, number>,
-  initialQtyByCat: Map<string, number>,
-): number {
-  if (!sameItinerary) {
-    return ticketLineItems.reduce((sum, line) => sum + Math.max(0, Number(line.itemTotal) || 0), 0);
-  }
-  return ticketLineItems.reduce((sum, line) => {
-    const category = line.category?.trim().toUpperCase();
-    const qty = Math.max(0, Number(line.qty) || 0);
-    if (!category || qty <= 0) return sum;
-    const bookedUnitPrice = ticketFloors.get(category);
-    if (bookedUnitPrice == null) return sum + line.itemTotal;
-    const baselineQty = initialQtyByCat.get(category) ?? 0;
-    const protectedQty = Math.min(qty, baselineQty);
-    const incrementalQty = Math.max(0, qty - baselineQty);
-    const liveUnit = qty > 0 ? Math.max(0, Number(line.itemTotal) || 0) / qty : 0;
-    return sum + protectedQty * bookedUnitPrice + incrementalQty * liveUnit;
-  }, 0);
-}
-
-function computeChangeFlowProtectedFeeSubtotalForOrderSummary(
-  sameItinerary: boolean,
-  totalQuantity: number,
-  feeLineItems: OrderSummary['feeLineItems'],
-  feeFloors: Map<string, number>,
-  initialTicketCount: number,
-): number {
-  if (!sameItinerary || totalQuantity <= 0) {
-    return feeLineItems.reduce((sum, line) => sum + Math.max(0, Number(line.totalAmount) || 0), 0);
-  }
-  const protectedP = Math.min(initialTicketCount, totalQuantity);
-  const incrementalP = Math.max(0, totalQuantity - protectedP);
-  return feeLineItems.reduce((sum, line) => {
-    const key = normalizeLineLabelForCompare(line.name || '');
-    const bookedUnitPrice = key ? feeFloors.get(key) : undefined;
-    if (bookedUnitPrice == null) return sum + line.totalAmount;
-    const liveTotal = Math.max(0, Number(line.totalAmount) || 0);
-    const livePer = totalQuantity > 0 ? liveTotal / totalQuantity : 0;
-    return sum + protectedP * bookedUnitPrice + incrementalP * livePer;
-  }, 0);
-}
-
-function computeChangeFlowProtectedReturnForOrderSummary(
-  sameItinerary: boolean,
-  totalQuantity: number,
-  returnPriceAdjustment: number,
-  returnFloorPerPerson: number | null,
-  initialTicketCount: number,
-  selectedReturnOption: ReturnOption | null,
-  currency: Currency,
-): number {
-  if (!sameItinerary || totalQuantity <= 0) return returnPriceAdjustment;
-  if (returnFloorPerPerson == null) return returnPriceAdjustment;
-  const rawPerPerson = selectedReturnOption?.priceAdjustmentByCurrency?.[currency] ?? 0;
-  const protectedP = Math.min(initialTicketCount, totalQuantity);
-  const incrementalP = Math.max(0, totalQuantity - protectedP);
-  return protectedP * returnFloorPerPerson + incrementalP * rawPerPerson;
-}
-
-function computeChangeFlowEffectiveSubtotalBeforeAddOnsForOrderSummary(
-  isChangeFlow: boolean,
-  sameItinerary: boolean,
-  os: OrderSummary,
-  ticketFloors: Map<string, number>,
-  initialQtyByCat: Map<string, number>,
-  feeFloors: Map<string, number>,
-  initialTicketCount: number,
-  returnFloorPerPerson: number | null,
-  selectedReturnOption: ReturnOption | null,
-  currency: Currency,
-): number {
-  const { subtotal, ticketLineItems, feeLineItems, returnPriceAdjustment, totalQuantity } = os;
-  if (!isChangeFlow || !sameItinerary) return subtotal;
-  const currentTicketSubtotal = ticketLineItems.reduce(
-    (s, l) => s + Math.max(0, Number(l.itemTotal) || 0),
-    0,
-  );
-  const currentFeeSubtotal = feeLineItems.reduce((s, l) => s + Math.max(0, Number(l.totalAmount) || 0), 0);
-  const protectedT = computeChangeFlowProtectedTicketSubtotalForOrderSummary(
-    sameItinerary,
-    ticketLineItems,
-    ticketFloors,
-    initialQtyByCat,
-  );
-  const protectedF = computeChangeFlowProtectedFeeSubtotalForOrderSummary(
-    sameItinerary,
-    totalQuantity,
-    feeLineItems,
-    feeFloors,
-    initialTicketCount,
-  );
-  const protectedR = computeChangeFlowProtectedReturnForOrderSummary(
-    sameItinerary,
-    totalQuantity,
-    returnPriceAdjustment,
-    returnFloorPerPerson,
-    initialTicketCount,
-    selectedReturnOption,
-    currency,
-  );
-  return (
-    subtotal -
-    currentTicketSubtotal -
-    currentFeeSubtotal -
-    returnPriceAdjustment +
-    protectedT +
-    protectedF +
-    protectedR
-  );
-}
-
-/** Matches BookingFlow totalPrice from effectiveSubtotalBeforeAddOns + add-ons + tax − promo. */
-function computeTotalPriceFromEffectiveSubtotalBeforeAddOns(
-  effectiveSubtotalBeforeAddOns: number,
-  addOnTotal: number,
-  effectivePromoDiscountAmount: number,
-  isGiftCard: boolean,
-  isVoucher: boolean,
-  isTaxIncludedInPrice: boolean,
-  pricingConfig: PricingConfig | null,
-): number {
-  const effectiveSubtotal = effectiveSubtotalBeforeAddOns + addOnTotal;
-  const taxOnSubtotal = isTaxIncludedInPrice ? 0 : effectiveSubtotal * (pricingConfig?.taxRate ?? 0);
-  const effectiveTax =
-    effectivePromoDiscountAmount > 0 && !isGiftCard && !isVoucher
-      ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
-      : taxOnSubtotal;
-  return effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
-}
-
 function deriveAddOnSelectionsFromReceiptLines(
   addOns: AddOn[],
   lines: Array<{ type?: string; label?: string; amount?: number; quantity?: number }>
@@ -346,6 +213,92 @@ function findMergedAvailabilityForSelection(
   return merged.find((a) => a.dateTime === dt && a.productOptionId === optId);
 }
 
+/** Ticket rates for one availability row — mirrors main cart [pricing] useMemo so baseline slots match BE. */
+function buildPricingFromAvailability(
+  selectedAvailability: Availability | null,
+  activeOptions: Product['options'],
+  precomputedPricesByOption: Record<string, PrecomputedPricesByCategory> | null | undefined,
+  currency: Currency,
+  pricingConfig: PricingConfig | null,
+  hasFees: boolean,
+  isSimplifiedPricingView: boolean,
+) {
+  if (!selectedAvailability || !pricingConfig) return [];
+  const optionId = selectedAvailability.productOptionId;
+  const selectedOption = activeOptions.find((opt) => opt.optionId === optionId);
+  const precomputed = optionId ? precomputedPricesByOption?.[optionId] : undefined;
+  const rateToDisplayPrice = (backendInDisplayCurrency: number) =>
+    getDisplayPriceFromBaseInDisplayCurrency(backendInDisplayCurrency, currency, pricingConfig, hasFees);
+  const getBaseInDisplayCurrency = (category: string) => {
+    const fromPrecomputed = precomputed?.[category]?.[currency];
+    if (fromPrecomputed != null) return fromPrecomputed;
+    return 0;
+  };
+  const buildRate = (
+    category: string,
+    backendPriceCAD: number,
+    backendInDisplayCurrency: number,
+    baseInDisplayCurrency: number,
+    appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }>,
+  ) => {
+    const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
+    const isPublicMode = isSimplifiedPricingView;
+    const breakdown = computePriceBreakdown(
+      pricingConfig,
+      currency,
+      backendPriceCAD,
+      basePriceCAD,
+      hasFees,
+      appliedAdjustments,
+      undefined,
+      baseInDisplayCurrency,
+      isPublicMode,
+    );
+    const price = breakdown?.finalPrice ?? rateToDisplayPrice(backendInDisplayCurrency);
+    return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: backendPriceCAD };
+  };
+  return (
+    selectedAvailability.rates?.map((rate) => {
+      const backendPriceCAD = rate.price ?? 0;
+      const backendInDisplayCurrency =
+        rate.priceByCurrency?.[currency] ?? (currency === 'CAD' ? backendPriceCAD : 0);
+      const baseInDisplayCurrency = getBaseInDisplayCurrency(rate.category);
+      const built = buildRate(
+        rate.category,
+        backendPriceCAD,
+        backendInDisplayCurrency,
+        baseInDisplayCurrency,
+        rate.appliedAdjustments ?? rate.applied_adjustments ?? [],
+      );
+      return {
+        category: rate.category,
+        rateId: rate.rateId || rate.category,
+        available: rate.available,
+        price: built.price,
+        priceCAD: built.priceCAD,
+        baseInDisplayCurrency: built.baseInDisplayCurrency,
+        appliedAdjustments: built.appliedAdjustments,
+      };
+    }) ||
+    selectedAvailability.pricesByCategory?.retailPrices?.map((p) => {
+      const priceCADFromApi = p.price / 100;
+      const baseInDisplayCurrency = getBaseInDisplayCurrency(p.category);
+      const backendInDisplayCurrency = currency === 'CAD' ? priceCADFromApi : 0;
+      const built = buildRate(p.category, priceCADFromApi, backendInDisplayCurrency, baseInDisplayCurrency, []);
+      return {
+        category: p.category,
+        rateId: p.category,
+        available: selectedAvailability.vacancies,
+        price: built.price,
+        priceCAD: built.priceCAD,
+        baseInDisplayCurrency: built.baseInDisplayCurrency,
+        appliedAdjustments: built.appliedAdjustments,
+      };
+    }) ||
+    []
+  );
+}
+
 function findMergedReturnVacancies(
   outbound: Availability | undefined,
   selectedReturn: ReturnOption | null | undefined
@@ -429,12 +382,16 @@ interface BookingFlowProps {
     dateTime?: string | null;
     /** Inventory slot id from booking (when API persists it); strongest match for change flow. */
     availabilityId?: string | null;
+    /** Parent product id when option id is omitted or differs from availability rows (GYG/ticketbooth shape). */
+    productId?: string | null;
     productOptionId?: string | null;
     pickupLocationId?: string | null;
     /** Original booked return slot (round-trip), when API provides it. */
     returnAvailabilityId?: string | null;
     /** Fallback when only return datetime is on the booking payload. */
     returnDateTime?: string | null;
+    /** Persisted return floor per person from booking API (must match ticketbooth `return_unit_floor_per_person`). */
+    returnUnitFloorPerPerson?: number | null;
     bookingItems?: Array<{ category: string; count: number }> | null;
     addOnSelections?: Array<{ addOnId: string; variantId?: string; quantity?: number }> | null;
     customer?: {
@@ -910,6 +867,18 @@ export function BookingFlow({
   const hasAutoSelectedPartnerPickupRef = useRef(false);
   const handleDateSelectRef = useRef<(date: string) => void>(() => {});
   const isChangeFlow = mode === 'change';
+  const changeFlowOriginalDate = useMemo(() => {
+    if (!isChangeFlow || !initialValues?.dateTime?.trim()) return null;
+    try {
+      return formatInTimeZone(
+        parseAvailabilityDateTime(initialValues.dateTime.trim()),
+        companyTimezone,
+        'yyyy-MM-dd',
+      );
+    } catch {
+      return null;
+    }
+  }, [isChangeFlow, initialValues?.dateTime, companyTimezone]);
   const isProviderDashboardChange = Boolean(onChangeBooking);
   const isCustomerSelfServeChange = isChangeFlow && !isProviderDashboardChange;
 
@@ -1720,6 +1689,79 @@ export function BookingFlow({
     [timesForSelectedDate],
   );
 
+  /**
+   * Bookings often store only parent `p_…` (no `po_…`). Resolve the booked option id from inventory rows,
+   * wall-clock match, or single active option — must be defined before effects that seed selection / seat credit.
+   */
+  const changeFlowResolvedInitialProductOptionId = useMemo((): string | null => {
+    if (!isChangeFlow) return null;
+    const fromFields = effectiveProductOptionIdForChangeFlow({
+      productId: initialValues?.productId,
+      productOptionId: initialValues?.productOptionId,
+    });
+    if (fromFields) return fromFields;
+
+    const aid = initialValues?.availabilityId?.trim();
+    if (aid) {
+      for (const a of availabilities) {
+        if (a.availabilityId === aid) {
+          const po = normalizeProductOptionIdForChangeFlow(a.productOptionId);
+          if (po) return po;
+        }
+      }
+    }
+
+    if (initialValues?.dateTime?.trim()) {
+      try {
+        const initialDt = parseAvailabilityDateTime(initialValues.dateTime.trim());
+        const initialMs = initialDt.getTime();
+        const initialDay = formatInTimeZone(initialDt, companyTimezone, 'yyyy-MM-dd');
+        for (const a of availabilities) {
+          const avDt = parseAvailabilityDateTime(a.dateTime);
+          if (formatInTimeZone(avDt, companyTimezone, 'yyyy-MM-dd') !== initialDay) continue;
+          if (avDt.getTime() !== initialMs) continue;
+          const po = normalizeProductOptionIdForChangeFlow(a.productOptionId);
+          if (po) return po;
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+
+    if (activeOptions.length === 1) {
+      return normalizeProductOptionIdForChangeFlow(activeOptions[0].optionId);
+    }
+
+    return null;
+  }, [
+    isChangeFlow,
+    initialValues?.productId,
+    initialValues?.productOptionId,
+    initialValues?.availabilityId,
+    initialValues?.dateTime,
+    availabilities,
+    activeOptions,
+    companyTimezone,
+  ]);
+
+  /**
+   * Parent catalog product id (`p_…`) for minimum-paid receipt floors: explicit parent on the booking,
+   * otherwise the product loaded for this change session (booking payload may only carry `po_…`).
+   */
+  const changeFlowBookingParentProductIdForFloors = useMemo(() => {
+    const pid = initialValues?.productId?.trim();
+    if (pid && isParentProductId(pid)) return pid;
+    return product.productId.trim();
+  }, [initialValues?.productId, product.productId]);
+
+  /** Minimum paid price / receipt anchoring applies for any option under this parent product. */
+  const changeFlowApplyReceiptPaidFloors = useMemo(
+    () =>
+      isChangeFlow &&
+      changeFlowBookingParentProductIdForFloors === product.productId.trim(),
+    [isChangeFlow, changeFlowBookingParentProductIdForFloors, product.productId],
+  );
+
   useEffect(() => {
     if (hasAppliedInitialValuesRef.current || !initialValues) return;
     const trimmedEmail = initialValues.customer?.email?.trim();
@@ -1760,7 +1802,7 @@ export function BookingFlow({
       target,
       companyTimezone,
       initialValues.availabilityId ?? null,
-      initialValues.productOptionId ?? null,
+      changeFlowResolvedInitialProductOptionId ?? initialValues.productOptionId ?? null,
       initialValues.bookingItems ?? null,
       precomputedPricesByOption,
       currency,
@@ -1776,6 +1818,7 @@ export function BookingFlow({
     initialValues?.availabilityId,
     initialValues?.productOptionId,
     initialValues?.bookingItems,
+    changeFlowResolvedInitialProductOptionId,
     selectedAvailability,
     selectedDate,
     timesForSelectedDate,
@@ -1943,14 +1986,20 @@ export function BookingFlow({
       const selectedMs = parseAvailabilityDateTime(availability.dateTime).getTime();
       const initialMs = parseAvailabilityDateTime(initialValues.dateTime).getTime();
       if (selectedMs !== initialMs) return 0;
-      const selectedOptionId = availability.productOptionId?.trim() || null;
-      const initialOptionId = initialValues.productOptionId?.trim() || null;
-      if (!selectedOptionId || !initialOptionId) return changeFlowInitialTicketCountForSeatCredit;
-      return selectedOptionId === initialOptionId ? changeFlowInitialTicketCountForSeatCredit : 0;
+      const selectedOpt = normalizeProductOptionIdForChangeFlow(availability.productOptionId);
+      const initialOpt = changeFlowResolvedInitialProductOptionId;
+      if (selectedOpt != null && initialOpt != null) {
+        return selectedOpt === initialOpt ? changeFlowInitialTicketCountForSeatCredit : 0;
+      }
+      const legacyInitial = initialValues.productOptionId?.trim() || null;
+      const legacySelected = availability.productOptionId?.trim() || null;
+      if (!legacySelected || !legacyInitial) return changeFlowInitialTicketCountForSeatCredit;
+      return legacySelected === legacyInitial ? changeFlowInitialTicketCountForSeatCredit : 0;
     },
     [
       isChangeFlow,
       changeFlowInitialTicketCountForSeatCredit,
+      changeFlowResolvedInitialProductOptionId,
       initialValues?.availabilityId,
       initialValues?.dateTime,
       initialValues?.productOptionId,
@@ -2298,7 +2347,11 @@ export function BookingFlow({
     return floors;
   }, [isChangeFlow, originalReceipt?.lineItems]);
 
-  const changeFlowReturnUnitFloorPerPerson = useMemo(() => {
+  /**
+   * When the API omits `returnUnitFloorPerPerson`, derive per-person paid return from the stored receipt
+   * so catalog "free" return slots still show and price at the original return value in change flow.
+   */
+  const changeFlowReturnUnitFloorFromReceipt = useMemo(() => {
     if (!isChangeFlow || !originalReceipt?.lineItems?.length) return null;
     const fallbackBookedQty =
       (initialValues?.bookingItems ?? []).reduce((sum, item) => sum + Math.max(0, Number(item.count) || 0), 0);
@@ -2306,7 +2359,7 @@ export function BookingFlow({
     let totalQty = 0;
     for (const line of originalReceipt.lineItems) {
       const type = (line.type || '').trim().toUpperCase();
-      if (type !== 'RETURN_OPTION') continue;
+      if (type !== 'RETURN_OPTION' && type !== 'RETURN') continue;
       const amount = Number(line.amount ?? 0);
       const qtyRaw = Number(line.quantity ?? 0);
       const qty = qtyRaw > 0 ? qtyRaw : fallbackBookedQty;
@@ -2317,6 +2370,15 @@ export function BookingFlow({
     if (totalAmount <= 0 || totalQty <= 0) return null;
     return totalAmount / totalQty;
   }, [isChangeFlow, originalReceipt?.lineItems, initialValues?.bookingItems]);
+
+  const effectiveChangeFlowReturnUnitFloorPerPerson = useMemo(() => {
+    if (!isChangeFlow) return null;
+    const fromApi = Number(initialValues?.returnUnitFloorPerPerson ?? 0);
+    if (Number.isFinite(fromApi) && fromApi > 0) return fromApi;
+    const fromReceipt = changeFlowReturnUnitFloorFromReceipt;
+    if (fromReceipt != null && fromReceipt > 0) return fromReceipt;
+    return null;
+  }, [isChangeFlow, initialValues?.returnUnitFloorPerPerson, changeFlowReturnUnitFloorFromReceipt]);
   const changeFlowBookedFeeUnitByNormalizedLabel = useMemo(() => {
     const feeUnitByLabel = new Map<string, number>();
     if (!isChangeFlow || !originalReceipt?.lineItems?.length) return feeUnitByLabel;
@@ -2360,19 +2422,25 @@ export function BookingFlow({
       Boolean(initialAvailabilityId && selectedAvailabilityId) &&
       initialAvailabilityId === selectedAvailabilityId;
     if (idsMatch) return true;
-    // Same wall time + option after API/list refreshes can carry a new availability row id; still "same" for price floors.
+    // Same wall time + same product option (ids may rotate on refresh).
     const selectedMs = parseAvailabilityDateTime(selectedAvailability.dateTime).getTime();
     const initialMs = parseAvailabilityDateTime(initialValues.dateTime).getTime();
     if (selectedMs !== initialMs) return false;
-    const selectedOptionId = selectedAvailability.productOptionId?.trim() || null;
-    const initialOptionId = initialValues.productOptionId?.trim() || null;
-    return !selectedOptionId || !initialOptionId || selectedOptionId === initialOptionId;
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
+    const initialOpt = changeFlowResolvedInitialProductOptionId;
+    if (selectedOpt != null && initialOpt != null) {
+      return selectedOpt === initialOpt;
+    }
+    const legacyInitial = initialValues.productOptionId?.trim() || null;
+    const legacySelected = selectedAvailability.productOptionId?.trim() || null;
+    return !legacySelected || !legacyInitial || legacySelected === legacyInitial;
   }, [
     isChangeFlow,
     selectedAvailability,
     initialValues?.availabilityId,
     initialValues?.dateTime,
     initialValues?.productOptionId,
+    changeFlowResolvedInitialProductOptionId,
   ]);
   const changeFlowReturnMatchesOriginalSelection = useMemo(() => {
     if (!isChangeFlow) return false;
@@ -2420,15 +2488,22 @@ export function BookingFlow({
 
   const returnOptionsWithFloor = useMemo(() => {
     const options = selectedAvailability?.returnOptions ?? [];
-    if (!isChangeFlow && changeFlowReturnUnitFloorPerPerson == null) return options;
+    if (!isChangeFlow && effectiveChangeFlowReturnUnitFloorPerPerson == null) return options;
     return options.map((opt) => {
       const vacancyCredit = changeFlowSeatCreditForReturnAvailabilityId(opt.returnAvailabilityId);
       const adjustedVacancies = Math.max(0, opt.vacancies ?? 0) + vacancyCredit;
       const rawPerPerson = opt.priceAdjustmentByCurrency?.[currency] ?? 0;
       const applyReturnFloor =
-        changeFlowReturnUnitFloorPerPerson != null && (!isChangeFlow || !changeFlowSameItineraryAsOriginalBooking);
+        effectiveChangeFlowReturnUnitFloorPerPerson != null &&
+        (
+          // Public self-serve change flow should always display the paid return floor on cards.
+          isCustomerSelfServeChange ||
+          // For non-public paths, only apply floor after itinerary changes.
+          !isChangeFlow ||
+          !changeFlowSameItineraryAsOriginalBooking
+        );
       const flooredPerPerson = applyReturnFloor
-        ? Math.max(rawPerPerson, changeFlowReturnUnitFloorPerPerson!)
+        ? Math.max(rawPerPerson, effectiveChangeFlowReturnUnitFloorPerPerson!)
         : rawPerPerson;
       if (flooredPerPerson === rawPerPerson && adjustedVacancies === (opt.vacancies ?? 0)) return opt;
       return {
@@ -2443,17 +2518,18 @@ export function BookingFlow({
   }, [
     selectedAvailability?.returnOptions,
     isChangeFlow,
-    changeFlowReturnUnitFloorPerPerson,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
     changeFlowSameItineraryAsOriginalBooking,
+    isCustomerSelfServeChange,
     currency,
     changeFlowSeatCreditForReturnAvailabilityId,
   ]);
 
   const selectedReturnOptionWithFloor = useMemo(() => {
-    if (!selectedReturnOption || !isChangeFlow || changeFlowReturnUnitFloorPerPerson == null) return selectedReturnOption;
-    if (changeFlowSameItineraryAsOriginalBooking) return selectedReturnOption;
+    if (!selectedReturnOption || !isChangeFlow || effectiveChangeFlowReturnUnitFloorPerPerson == null) return selectedReturnOption;
+    if (!isCustomerSelfServeChange && changeFlowSameItineraryAsOriginalBooking) return selectedReturnOption;
     const rawPerPerson = selectedReturnOption.priceAdjustmentByCurrency?.[currency] ?? 0;
-    const flooredPerPerson = Math.max(rawPerPerson, changeFlowReturnUnitFloorPerPerson);
+    const flooredPerPerson = Math.max(rawPerPerson, effectiveChangeFlowReturnUnitFloorPerPerson);
     if (flooredPerPerson === rawPerPerson) return selectedReturnOption;
     return {
       ...selectedReturnOption,
@@ -2465,15 +2541,30 @@ export function BookingFlow({
   }, [
     selectedReturnOption,
     isChangeFlow,
-    changeFlowReturnUnitFloorPerPerson,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
     changeFlowSameItineraryAsOriginalBooking,
+    isCustomerSelfServeChange,
     currency,
   ]);
 
   const returnOptionForOrderSummary = useMemo(() => {
-    if (isChangeFlow && changeFlowSameItineraryAsOriginalBooking) return selectedReturnOption ?? null;
+    // Same itinerary + dashboard change: keep raw return option (floor only after itinerary changes).
+    // Public self-serve: always apply API return floor on options so totals match paid return.
+    if (
+      isChangeFlow &&
+      changeFlowSameItineraryAsOriginalBooking &&
+      !isCustomerSelfServeChange
+    ) {
+      return selectedReturnOption ?? null;
+    }
     return selectedReturnOptionWithFloor;
-  }, [isChangeFlow, changeFlowSameItineraryAsOriginalBooking, selectedReturnOption, selectedReturnOptionWithFloor]);
+  }, [
+    isChangeFlow,
+    changeFlowSameItineraryAsOriginalBooking,
+    isCustomerSelfServeChange,
+    selectedReturnOption,
+    selectedReturnOptionWithFloor,
+  ]);
   const effectiveSelectedPickupVacancies = useMemo(() => {
     if (!selectedAvailability) return 0;
     const seatCredit = changeFlowSeatCreditForOutboundAvailability(selectedAvailability);
@@ -2488,71 +2579,19 @@ export function BookingFlow({
   }, [selectedReturnOption, changeFlowSeatCreditForReturnAvailabilityId]);
   
   // Ticket prices: use breakdown final price so booking flow total matches the price breakdown. All conversion in mid-layer.
-  const pricing = useMemo(() => {
-    if (!selectedAvailability || !pricingConfig) return [];
-    const optionId = selectedAvailability.productOptionId;
-    const selectedOption = activeOptions.find(opt => opt.optionId === optionId);
-    const precomputed = optionId ? precomputedPricesByOption?.[optionId] : undefined;
-    const rateToDisplayPrice = (backendInDisplayCurrency: number) =>
-      getDisplayPriceFromBaseInDisplayCurrency(backendInDisplayCurrency, currency, pricingConfig, hasFees);
-    const getBaseInDisplayCurrency = (category: string) => {
-      const fromPrecomputed = precomputed?.[category]?.[currency];
-      if (fromPrecomputed != null) return fromPrecomputed;
-      return 0;
-    };
-    const buildRate = (
-      category: string,
-      backendPriceCAD: number,
-      backendInDisplayCurrency: number,
-      baseInDisplayCurrency: number,
-      appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }>
-    ) => {
-      const basePriceCAD = selectedOption?.pricing?.[category.toUpperCase()] ?? 0;
-      const isPublicMode = isSimplifiedPricingView;
-      const breakdown = computePriceBreakdown(
-        pricingConfig,
+  const pricing = useMemo(
+    () =>
+      buildPricingFromAvailability(
+        selectedAvailability,
+        activeOptions,
+        precomputedPricesByOption,
         currency,
-        backendPriceCAD,
-        basePriceCAD,
+        pricingConfig,
         hasFees,
-        appliedAdjustments,
-        undefined,
-        baseInDisplayCurrency,
-        isPublicMode
-      );
-      const price = breakdown?.finalPrice ?? rateToDisplayPrice(backendInDisplayCurrency);
-      return { category, baseInDisplayCurrency, appliedAdjustments, price, priceCAD: backendPriceCAD };
-    };
-    return selectedAvailability.rates?.map(rate => {
-      const backendPriceCAD = rate.price ?? 0;
-      const backendInDisplayCurrency = rate.priceByCurrency?.[currency] ?? (currency === 'CAD' ? backendPriceCAD : 0);
-      const baseInDisplayCurrency = getBaseInDisplayCurrency(rate.category);
-      const built = buildRate(rate.category, backendPriceCAD, backendInDisplayCurrency, baseInDisplayCurrency, rate.appliedAdjustments ?? rate.applied_adjustments ?? []);
-      return {
-        category: rate.category,
-        rateId: rate.rateId || rate.category,
-        available: rate.available,
-        price: built.price,
-        priceCAD: built.priceCAD,
-        baseInDisplayCurrency: built.baseInDisplayCurrency,
-        appliedAdjustments: built.appliedAdjustments,
-      };
-    }) || selectedAvailability.pricesByCategory?.retailPrices?.map(p => {
-      const priceCADFromApi = p.price / 100;
-      const baseInDisplayCurrency = getBaseInDisplayCurrency(p.category);
-      const backendInDisplayCurrency = currency === 'CAD' ? priceCADFromApi : 0;
-      const built = buildRate(p.category, priceCADFromApi, backendInDisplayCurrency, baseInDisplayCurrency, []);
-      return {
-        category: p.category,
-        rateId: p.category,
-        available: selectedAvailability.vacancies,
-        price: built.price,
-        priceCAD: built.priceCAD,
-        baseInDisplayCurrency: built.baseInDisplayCurrency,
-        appliedAdjustments: built.appliedAdjustments,
-      };
-    }) || [];
-  }, [selectedAvailability, currency, hasFees, pricingConfig, precomputedPricesByOption, activeOptions, isSimplifiedPricingView]);
+        isSimplifiedPricingView,
+      ),
+    [selectedAvailability, currency, hasFees, pricingConfig, precomputedPricesByOption, activeOptions, isSimplifiedPricingView],
+  );
 
   // Price breakdown: mid-layer returns line items (base + one per rule/deal). UI renders each line; rate in brackets when used.
   const getPriceBreakdown = useCallback((category: string, priceCAD: number, baseInDisplayCurrency: number | undefined, appliedAdjustments: Array<{ type: string; id: string; name: string; changeByCurrency?: Record<string, number> }> = []): PriceBreakdownData | null => {
@@ -2588,62 +2627,29 @@ export function BookingFlow({
     [quantities, pricing, returnOptionForOrderSummary, pricingConfig, currency, hasFees, cancellationPolicyId]
   );
 
-  /** Initial booking ticket counts on the same pricing grid (for catalog delta vs receipt anchoring). */
-  const changeFlowBaselineQuantitiesForSummary = useMemo((): Record<string, number> => {
-    const next: Record<string, number> = {};
-    for (const rate of pricing) {
-      next[rate.category] = 0;
-    }
-    for (const item of initialValues?.bookingItems ?? []) {
-      const c = item.category?.trim();
-      if (c) next[c] = Math.max(0, Number(item.count) || 0);
-    }
-    return next;
-  }, [pricing, initialValues?.bookingItems]);
-
-  const orderSummaryChangeFlowBaseline: OrderSummary = useMemo(
-    () =>
-      computeOrderSummary(
-        changeFlowBaselineQuantitiesForSummary,
-        pricing,
-        returnOptionForOrderSummary,
-        pricingConfig ?? null,
-        currency,
-        hasFees,
-        cancellationPolicyId
-      ),
-    [
-      changeFlowBaselineQuantitiesForSummary,
-      pricing,
-      returnOptionForOrderSummary,
-      pricingConfig,
-      currency,
-      hasFees,
-      cancellationPolicyId,
-    ],
-  );
-
   const { totalQuantity, subtotal, tax, total: totalFromSummary, feeLineItems, returnPriceAdjustment, cancellationPolicyFee, isTaxIncludedInPrice, ticketLineItems } = orderSummary;
   const changeFlowProtectedTicketSubtotal = useMemo(() => {
     const currentTicketSubtotal = ticketLineItems.reduce(
       (sum, line) => sum + Math.max(0, Number(line.itemTotal) || 0),
       0,
     );
-    if (!changeFlowSameItineraryAsOriginalBooking) return currentTicketSubtotal;
+    if (!changeFlowApplyReceiptPaidFloors) return currentTicketSubtotal;
     return ticketLineItems.reduce((sum, line) => {
       const category = line.category?.trim().toUpperCase();
       const qty = Math.max(0, Number(line.qty) || 0);
       if (!category || qty <= 0) return sum;
-      const bookedUnitPrice = changeFlowTicketBookedUnitPriceByCategory.get(category);
-      if (bookedUnitPrice == null) return sum + line.itemTotal;
-      const baselineQty = changeFlowInitialTicketQtyByCategory.get(category) ?? 0;
-      const protectedQty = Math.min(qty, baselineQty);
-      const incrementalQty = Math.max(0, qty - baselineQty);
-      const liveUnit = qty > 0 ? Math.max(0, Number(line.itemTotal) || 0) / qty : 0;
-      return sum + protectedQty * bookedUnitPrice + incrementalQty * liveUnit;
+      return (
+        sum +
+        changeFlowTicketLineTotalWithReceiptFloor({
+          qty,
+          baselineQtyForCategory: changeFlowInitialTicketQtyByCategory.get(category) ?? 0,
+          receiptUnitFloor: changeFlowTicketBookedUnitPriceByCategory.get(category),
+          liveLineTotal: Number(line.itemTotal) || 0,
+        })
+      );
     }, 0);
   }, [
-    changeFlowSameItineraryAsOriginalBooking,
+    changeFlowApplyReceiptPaidFloors,
     ticketLineItems,
     changeFlowTicketBookedUnitPriceByCategory,
     changeFlowInitialTicketQtyByCategory,
@@ -2736,45 +2742,98 @@ export function BookingFlow({
     [feeLineItems],
   );
   const changeFlowProtectedFeeSubtotal = useMemo(() => {
-    if (!changeFlowSameItineraryAsOriginalBooking || totalQuantity <= 0) return currentFeeSubtotal;
+    if (!changeFlowApplyReceiptPaidFloors || totalQuantity <= 0) return currentFeeSubtotal;
     const initialParty = changeFlowInitialTicketCount;
-    const protectedP = Math.min(initialParty, totalQuantity);
-    const incrementalP = Math.max(0, totalQuantity - protectedP);
     return feeLineItems.reduce((sum, line) => {
       const key = normalizeLineLabelForCompare(line.name || '');
-      const bookedUnitPrice = key ? changeFlowBookedFeeUnitByNormalizedLabel.get(key) : null;
-      if (bookedUnitPrice == null) return sum + line.totalAmount;
-      const liveTotal = Math.max(0, Number(line.totalAmount) || 0);
-      const livePer = totalQuantity > 0 ? liveTotal / totalQuantity : 0;
-      return sum + protectedP * bookedUnitPrice + incrementalP * livePer;
+      const bookedFeePerPerson = key ? changeFlowBookedFeeUnitByNormalizedLabel.get(key) : undefined;
+      return (
+        sum +
+        changeFlowFeeLineTotalWithReceiptFloor({
+          totalQuantity,
+          initialTicketCount: initialParty,
+          bookedFeePerPerson,
+          liveFeeLineTotal: Number(line.totalAmount) || 0,
+        })
+      );
     }, 0);
   }, [
-    changeFlowSameItineraryAsOriginalBooking,
+    changeFlowApplyReceiptPaidFloors,
     totalQuantity,
     currentFeeSubtotal,
     feeLineItems,
     changeFlowBookedFeeUnitByNormalizedLabel,
     changeFlowInitialTicketCount,
   ]);
+  /** Catalog (unfloored) return price per person — same slot as [selectedReturnOption] on the raw availability list. */
+  const returnOptionCatalogPerPerson = useMemo(() => {
+    if (!selectedReturnOption?.returnAvailabilityId || !selectedAvailability?.returnOptions?.length) {
+      return null;
+    }
+    const raw = selectedAvailability.returnOptions.find(
+      (o) => o.returnAvailabilityId === selectedReturnOption.returnAvailabilityId
+    );
+    const v = raw?.priceAdjustmentByCurrency?.[currency];
+    return typeof v === 'number' && Number.isFinite(v) ? v : null;
+  }, [selectedReturnOption?.returnAvailabilityId, selectedAvailability?.returnOptions, currency]);
+
   const changeFlowProtectedReturnAdjustment = useMemo(() => {
-    if (!changeFlowSameItineraryAsOriginalBooking || totalQuantity <= 0) return returnPriceAdjustment;
-    if (changeFlowReturnUnitFloorPerPerson == null) return returnPriceAdjustment;
-    const rawPerPerson = selectedReturnOption?.priceAdjustmentByCurrency?.[currency] ?? 0;
-    const initialParty = changeFlowInitialTicketCount;
-    const protectedP = Math.min(initialParty, totalQuantity);
-    const incrementalP = Math.max(0, totalQuantity - protectedP);
-    return protectedP * changeFlowReturnUnitFloorPerPerson + incrementalP * rawPerPerson;
+    if (!changeFlowApplyReceiptPaidFloors || totalQuantity <= 0) return returnPriceAdjustment;
+    if (effectiveChangeFlowReturnUnitFloorPerPerson == null) return returnPriceAdjustment;
+    const livePerPerson =
+      returnOptionCatalogPerPerson ?? (selectedReturnOption?.priceAdjustmentByCurrency?.[currency] ?? 0);
+    const perPerson = changeFlowReturnPerPersonWithReceiptFloor({
+      livePerPerson,
+      receiptFloorPerPerson: effectiveChangeFlowReturnUnitFloorPerPerson,
+    });
+    return totalQuantity * perPerson;
   }, [
-    changeFlowSameItineraryAsOriginalBooking,
+    changeFlowApplyReceiptPaidFloors,
     totalQuantity,
     returnPriceAdjustment,
-    changeFlowReturnUnitFloorPerPerson,
-    changeFlowInitialTicketCount,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
     selectedReturnOption,
+    returnOptionCatalogPerPerson,
     currency,
   ]);
+
+  /** Return row amount for PriceSummary, Stripe breakdown, and CheckoutModal (catalog vs protected same-product-option). */
+  const checkoutReturnLineAmount = useMemo(() => {
+    if (isChangeFlow && changeFlowApplyReceiptPaidFloors) {
+      return changeFlowProtectedReturnAdjustment;
+    }
+    return returnPriceAdjustment;
+  }, [
+    isChangeFlow,
+    changeFlowApplyReceiptPaidFloors,
+    changeFlowProtectedReturnAdjustment,
+    returnPriceAdjustment,
+  ]);
+
+  /** Ticket lines with receipt floors applied for breakdown/modal (matches protected ticket subtotal). */
+  const ticketLineItemsForChangeFlowDisplay = useMemo(() => {
+    if (!changeFlowApplyReceiptPaidFloors) return ticketLineItems;
+    return ticketLineItems.map((line) => {
+      const category = line.category?.trim().toUpperCase();
+      const qty = Math.max(0, Number(line.qty) || 0);
+      if (!category || qty <= 0) return line;
+      const newTotal = changeFlowTicketLineTotalWithReceiptFloor({
+        qty,
+        baselineQtyForCategory: changeFlowInitialTicketQtyByCategory.get(category) ?? 0,
+        receiptUnitFloor: changeFlowTicketBookedUnitPriceByCategory.get(category),
+        liveLineTotal: Number(line.itemTotal) || 0,
+      });
+      return { ...line, itemTotal: newTotal };
+    });
+  }, [
+    changeFlowApplyReceiptPaidFloors,
+    ticketLineItems,
+    changeFlowTicketBookedUnitPriceByCategory,
+    changeFlowInitialTicketQtyByCategory,
+  ]);
+
   const effectiveSubtotalBeforeAddOns =
-    isChangeFlow && changeFlowSameItineraryAsOriginalBooking
+    isChangeFlow && changeFlowApplyReceiptPaidFloors
       ? subtotal -
         currentTicketSubtotal -
         currentFeeSubtotal -
@@ -2841,8 +2900,11 @@ export function BookingFlow({
 
   const checkoutPriceSummaryLines = useMemo((): PriceSummaryLine[] => {
     if (!selectedAvailability) return [];
+    const returnLineAmount = checkoutReturnLineAmount;
+    const showReturnLine =
+      Boolean(selectedReturnOption) && Math.abs(returnLineAmount) > 0.0005;
     return [
-      ...ticketLineItems.map((line): PriceSummaryLine => {
+      ...ticketLineItemsForChangeFlowDisplay.map((line): PriceSummaryLine => {
         const rate = pricing.find((r) => r.category === line.category);
         const breakdown = getPriceBreakdown(
           line.category,
@@ -2865,12 +2927,12 @@ export function BookingFlow({
           breakdown,
         };
       }),
-      ...(selectedReturnOption && returnPriceAdjustment !== 0
+      ...(showReturnLine
         ? [
             {
               kind: 'line' as const,
               label: `${t('booking.returnOption')} (${totalQuantity} ${totalQuantity === 1 ? 'person' : 'people'})`,
-              amount: returnPriceAdjustment,
+              amount: returnLineAmount,
               type: 'return',
             },
           ]
@@ -2925,11 +2987,11 @@ export function BookingFlow({
     ];
   }, [
     selectedAvailability,
-    ticketLineItems,
+    ticketLineItemsForChangeFlowDisplay,
     pricing,
     getPriceBreakdown,
     selectedReturnOption,
-    returnPriceAdjustment,
+    checkoutReturnLineAmount,
     totalQuantity,
     t,
     cancellationPolicyFee,
@@ -3066,93 +3128,13 @@ export function BookingFlow({
       ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
       : taxOnSubtotal;
   const totalPrice = effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
-  /** Cent-round for change quote only; matches server final rounding and avoids float noise in clientProposedTotal. */
-  const changeFlowProposedTotal = isChangeFlow && originalReceipt
-    ? reconcileChangeBookingProposedTotal(Math.round(totalPrice * 100) / 100, originalReceipt.total)
-    : totalPrice;
-
-  const changeFlowBaselineEffectiveSubtotalBeforeAddOns = useMemo(() => {
-    if (!isChangeFlow || !changeFlowSameItineraryAsOriginalBooking) return effectiveSubtotalBeforeAddOns;
-    return computeChangeFlowEffectiveSubtotalBeforeAddOnsForOrderSummary(
-      true,
-      true,
-      orderSummaryChangeFlowBaseline,
-      changeFlowTicketBookedUnitPriceByCategory,
-      changeFlowInitialTicketQtyByCategory,
-      changeFlowBookedFeeUnitByNormalizedLabel,
-      changeFlowInitialTicketCount,
-      changeFlowReturnUnitFloorPerPerson,
-      selectedReturnOption,
-      currency,
-    );
-  }, [
-    isChangeFlow,
-    changeFlowSameItineraryAsOriginalBooking,
-    effectiveSubtotalBeforeAddOns,
-    orderSummaryChangeFlowBaseline,
-    changeFlowTicketBookedUnitPriceByCategory,
-    changeFlowInitialTicketQtyByCategory,
-    changeFlowBookedFeeUnitByNormalizedLabel,
-    changeFlowInitialTicketCount,
-    changeFlowReturnUnitFloorPerPerson,
-    selectedReturnOption,
-    currency,
-  ]);
-
-  const changeFlowBaselineEffectiveSubtotalFull = useMemo(() => {
-    if (!isChangeFlow || !changeFlowSameItineraryAsOriginalBooking) return effectiveSubtotal;
-    return changeFlowBaselineEffectiveSubtotalBeforeAddOns + addOnTotal;
-  }, [
-    isChangeFlow,
-    changeFlowSameItineraryAsOriginalBooking,
-    changeFlowBaselineEffectiveSubtotalBeforeAddOns,
-    addOnTotal,
-    effectiveSubtotal,
-  ]);
-
-  const changeFlowBaselineEffectiveTax = useMemo(() => {
-    if (!isChangeFlow || !changeFlowSameItineraryAsOriginalBooking) return effectiveTax;
-    const es = changeFlowBaselineEffectiveSubtotalFull;
-    const taxOnSubtotal = isTaxIncludedInPrice ? 0 : es * (pricingConfig?.taxRate ?? 0);
-    return effectivePromoDiscountAmount > 0 && !isGiftCard && !isVoucher
-      ? (es - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
-      : taxOnSubtotal;
-  }, [
+  /** Change-flow product rules: `lib/booking/change-flow-pricing.ts`. */
+  const changeFlowNewBookingTotal = resolveChangeFlowNewBookingTotal({
     isChangeFlow,
-    changeFlowSameItineraryAsOriginalBooking,
-    changeFlowBaselineEffectiveSubtotalFull,
-    effectiveTax,
-    isTaxIncludedInPrice,
-    pricingConfig?.taxRate,
-    effectivePromoDiscountAmount,
-    isGiftCard,
-    isVoucher,
-  ]);
+    cartTotal: totalPrice,
+    originalReceiptTotal: originalReceipt?.total,
+  });
 
-  const changeFlowBaselineTotalPrice = useMemo(() => {
-    if (!isChangeFlow || !changeFlowSameItineraryAsOriginalBooking) {
-      return totalPrice;
-    }
-    return computeTotalPriceFromEffectiveSubtotalBeforeAddOns(
-      changeFlowBaselineEffectiveSubtotalBeforeAddOns,
-      addOnTotal,
-      effectivePromoDiscountAmount,
-      isGiftCard,
-      isVoucher,
-      isTaxIncludedInPrice,
-      pricingConfig,
-    );
-  }, [
-    isChangeFlow,
-    changeFlowSameItineraryAsOriginalBooking,
-    changeFlowBaselineEffectiveSubtotalBeforeAddOns,
-    addOnTotal,
-    effectivePromoDiscountAmount,
-    isGiftCard,
-    isVoucher,
-    isTaxIncludedInPrice,
-    pricingConfig,
-  ]);
   const changeSelectionDetails = useMemo(() => {
     if (!isChangeFlow || !initialValues) {
       return {
@@ -3184,11 +3166,12 @@ export function BookingFlow({
     const selectedMs = parseAvailabilityDateTime(selectedAvailability.dateTime).getTime();
     // Only treat as date change when we have an original datetime to compare (otherwise we’d always flag “changed”).
     const dateChanged = initialMs != null && initialMs !== selectedMs;
-    // productOptionId on the booking is the option id, not productId — compare only when both are known.
-    const initialOpt = initialValues.productOptionId?.trim() || null;
-    const selectedOpt = selectedAvailability.productOptionId?.trim() || null;
+    const initialOpt =
+      changeFlowResolvedInitialProductOptionId ??
+      (initialValues.productOptionId?.trim() || null);
+    const selectedOpt = normalizeProductOptionIdForChangeFlow(selectedAvailability.productOptionId);
     const optionChanged = Boolean(
-      initialOpt && selectedOpt && initialOpt !== selectedOpt
+      selectedOpt != null && initialOpt != null && initialOpt !== selectedOpt
     );
     const normalizePickupId = (value: string | null | undefined) => {
       const trimmed = value?.trim();
@@ -3288,6 +3271,7 @@ export function BookingFlow({
   }, [
     isChangeFlow,
     initialValues,
+    changeFlowResolvedInitialProductOptionId,
     selectedAvailability,
     selectedReturnOption,
     implicitReturnBaselineId,
@@ -3349,167 +3333,29 @@ export function BookingFlow({
   const hasEffectiveChangeSelection =
     hasChangeSelection || providerHasEditedLineOverrides || providerHasAdditionalAdjustments;
 
-  /**
-   * Same itinerary: amount owed must be catalog delta from the *initial* party size, anchored to what
-   * was actually paid (`originalReceipt`). Otherwise `totalPrice − receipt.total` includes a bogus gap
-   * whenever list pricing ≠ historical receipt (e.g. ~$703 + real ticket delta).
-   */
-  const changeFlowReceiptAnchoredCatalogTotalRaw =
-    isChangeFlow && originalReceipt && changeFlowSameItineraryAsOriginalBooking
-      ? originalReceipt.total + (totalPrice - changeFlowBaselineTotalPrice)
-      : totalPrice;
-
-  const changeFlowProposedTotalResolved =
-    isChangeFlow && originalReceipt
-      ? reconcileChangeBookingProposedTotal(
-          Math.round(changeFlowReceiptAnchoredCatalogTotalRaw * 100) / 100,
-          originalReceipt.total,
-        )
-      : changeFlowProposedTotal;
-
-  const displayChangeFlowProposedTotal = providerTotalsPreview
-    ? providerTotalsPreview.totalAmount
-    : changeFlowProposedTotalResolved;
-  const displayChangeFlowSubtotal = providerTotalsPreview
-    ? providerTotalsPreview.subtotalBeforeTax
-    : isChangeFlow && originalReceipt && changeFlowSameItineraryAsOriginalBooking
-      ? Math.round(
-          (originalReceipt.subtotal + (effectiveSubtotal - changeFlowBaselineEffectiveSubtotalFull)) * 100,
-        ) / 100
-      : effectiveSubtotal;
-  const displayChangeFlowTax = providerTotalsPreview
-    ? providerTotalsPreview.taxAmount
-    : isChangeFlow && originalReceipt && changeFlowSameItineraryAsOriginalBooking
-      ? Math.round((originalReceipt.tax + (effectiveTax - changeFlowBaselineEffectiveTax)) * 100) / 100
-      : effectiveTax;
+  const displayedChangeAmounts = resolveChangeFlowDisplayedAmounts({
+    providerPreview: providerTotalsPreview,
+    fromCart: {
+      total: changeFlowNewBookingTotal,
+      subtotal: effectiveSubtotal,
+      tax: effectiveTax,
+    },
+  });
+  const displayChangeFlowProposedTotal = displayedChangeAmounts.total;
+  const displayChangeFlowSubtotal = displayedChangeAmounts.subtotal;
+  const displayChangeFlowTax = displayedChangeAmounts.tax;
 
   const changeFlowClientEstimateDue = originalReceipt
-    ? (isProviderDashboardChange
-        ? displayChangeFlowProposedTotal - originalReceipt.total
-        : Math.max(displayChangeFlowProposedTotal - originalReceipt.total, 0))
+    ? changeFlowBalanceVsOriginal({
+        newTotal: displayChangeFlowProposedTotal,
+        originalReceiptTotal: originalReceipt.total,
+        audience: isProviderDashboardChange ? 'provider' : 'customer',
+      })
     : totalPrice;
 
-  /**
-   * Amount owed for change flow: FE proposed total vs original receipt.
-   * Quote is still required before submit (session + canProceed); `clientProposedTotal` on quote keeps BE in sync.
-   */
   const changeFlowAmountDueRaw = isChangeFlow ? changeFlowClientEstimateDue : totalPrice;
-  const changeFlowAmountDue = isChangeFlow
-    ? (() => {
-        const rounded = Math.round(changeFlowAmountDueRaw * 100) / 100;
-        return Math.abs(rounded) < 0.01 ? 0 : rounded;
-      })()
-    : changeFlowAmountDueRaw;
+  const changeFlowAmountDue = isChangeFlow ? normalizeNearZeroOwed(changeFlowAmountDueRaw) : changeFlowAmountDueRaw;
 
-  useEffect(() => {
-    if (!isChangeFlow || !isLocalhostChangeBookingDebug()) return;
-    const receiptTicketLines =
-      originalReceipt?.lineItems?.filter((l) => (l.type || '').toUpperCase() === 'TICKET') ?? [];
-    const ticketFloors: Record<string, number> = {};
-    changeFlowTicketBookedUnitPriceByCategory.forEach((v, k) => {
-      ticketFloors[k] = v;
-    });
-    const tag = '[viavia change-booking]';
-    // Plain console.log only (no groupCollapsed — those are easy to miss / count as “hidden” in DevTools).
-    console.log(tag, 'itinerary gates', {
-      outboundMatch: changeFlowOutboundMatchesOriginalSelection,
-      returnMatch: changeFlowReturnMatchesOriginalSelection,
-      sameItinerary: changeFlowSameItineraryAsOriginalBooking,
-    });
-    console.log(tag, 'ids & times', {
-      initialAvailabilityId: initialValues?.availabilityId ?? null,
-      selectedAvailabilityId: selectedAvailability?.availabilityId ?? null,
-      initialDateTime: initialValues?.dateTime ?? null,
-      selectedDateTime: selectedAvailability?.dateTime ?? null,
-      initialOptionId: initialValues?.productOptionId ?? null,
-      selectedOptionId: selectedAvailability?.productOptionId ?? null,
-      initialReturnId: initialValues?.returnAvailabilityId ?? null,
-      selectedReturnId: selectedReturnOption?.returnAvailabilityId ?? null,
-      initialReturnDateTime: initialValues?.returnDateTime ?? null,
-      selectedReturnDateTime: selectedReturnOption?.dateTime ?? null,
-    });
-    console.log(tag, 'selection flags', {
-      hasChangeSelection,
-      hasEffectiveChangeSelection,
-      changeFlowNeedsServerPrice,
-      dateChanged: changeSelectionDetails.dateChanged,
-      returnChanged: changeSelectionDetails.returnChanged,
-      optionChanged: changeSelectionDetails.optionChanged,
-      countsChanged: changeSelectionDetails.countsChanged,
-    });
-    console.log(tag, 'promo', {
-      promoFromApi: promoDiscountAmount,
-      lockedPromoFallback: lockedPromoFallbackAmount,
-      effectivePromo: effectivePromoDiscountAmount,
-    });
-    console.log(tag, 'receipt anchor (same itinerary)', {
-      baselineCatalogTotal: changeFlowBaselineTotalPrice,
-      catalogDeltaVsBaseline: totalPrice - changeFlowBaselineTotalPrice,
-      anchoredTotalRaw: changeFlowReceiptAnchoredCatalogTotalRaw,
-      resolvedProposedTotal: changeFlowProposedTotalResolved,
-    });
-    console.log(tag, 'subtotals (live vs protected)', {
-      orderSummarySubtotal: subtotal,
-      currentTicketSubtotal,
-      changeFlowProtectedTicketSubtotal,
-      currentFeeSubtotal,
-      changeFlowProtectedFeeSubtotal,
-      returnPriceAdjustment,
-      changeFlowProtectedReturnAdjustment,
-      effectiveSubtotal,
-      tax: effectiveTax,
-      totalPrice,
-      changeFlowProposedTotal,
-      changeFlowProposedTotalResolved,
-      originalReceiptTotal: originalReceipt?.total ?? null,
-      amountDue: changeFlowAmountDue,
-    });
-    console.log(tag, 'ticket price floors from receipt (empty => live catalog for tickets)', ticketFloors);
-    console.log(tag, 'receipt TICKET lines', receiptTicketLines);
-  }, [
-    isChangeFlow,
-    changeFlowOutboundMatchesOriginalSelection,
-    changeFlowReturnMatchesOriginalSelection,
-    changeFlowSameItineraryAsOriginalBooking,
-    initialValues?.availabilityId,
-    initialValues?.dateTime,
-    initialValues?.productOptionId,
-    initialValues?.returnAvailabilityId,
-    initialValues?.returnDateTime,
-    selectedAvailability?.availabilityId,
-    selectedAvailability?.dateTime,
-    selectedAvailability?.productOptionId,
-    selectedReturnOption?.returnAvailabilityId,
-    selectedReturnOption?.dateTime,
-    hasChangeSelection,
-    hasEffectiveChangeSelection,
-    changeFlowNeedsServerPrice,
-    changeSelectionDetails.dateChanged,
-    changeSelectionDetails.returnChanged,
-    changeSelectionDetails.optionChanged,
-    changeSelectionDetails.countsChanged,
-    subtotal,
-    currentTicketSubtotal,
-    changeFlowProtectedTicketSubtotal,
-    currentFeeSubtotal,
-    changeFlowProtectedFeeSubtotal,
-    returnPriceAdjustment,
-    changeFlowProtectedReturnAdjustment,
-    effectiveSubtotal,
-    effectivePromoDiscountAmount,
-    effectiveTax,
-    totalPrice,
-    changeFlowProposedTotal,
-    originalReceipt?.total,
-    originalReceipt?.lineItems,
-    changeFlowAmountDue,
-    changeFlowTicketBookedUnitPriceByCategory,
-    changeFlowProposedTotalResolved,
-    changeFlowBaselineTotalPrice,
-    changeFlowReceiptAnchoredCatalogTotalRaw,
-    promoDiscountAmount,
-    lockedPromoFallbackAmount,
-  ]);
 
   const changeCheckoutButtonLabel = (() => {
     if (!isChangeFlow) return undefined;
@@ -3611,7 +3457,7 @@ export function BookingFlow({
       dateChanged: changeSelectionDetails.dateChanged,
       ticketsChanged: changeSelectionDetails.ticketsChanged,
       hasChangesFromInitial: changeSelectionDetails.hasChangesFromInitial,
-      selectionTotal: originalReceipt ? changeFlowProposedTotalResolved : totalPrice,
+      selectionTotal: originalReceipt ? changeFlowNewBookingTotal : totalPrice,
       selectionCurrency: currency,
     };
   }, [
@@ -3625,7 +3471,7 @@ export function BookingFlow({
     totalPrice,
     currency,
     originalReceipt,
-    changeFlowProposedTotalResolved,
+    changeFlowNewBookingTotal,
   ]);
 
   useEffect(() => {
@@ -3668,7 +3514,7 @@ export function BookingFlow({
             ? displayChangeFlowTax
             : effectiveTax
           : 0,
-      total: isChangeFlow && originalReceipt ? changeFlowProposedTotalResolved : totalPrice,
+      total: isChangeFlow && originalReceipt ? changeFlowNewBookingTotal : totalPrice,
       currency,
     });
   }, [
@@ -3677,7 +3523,7 @@ export function BookingFlow({
     totalQuantity,
     effectiveSubtotal,
     effectiveTax,
-    changeFlowProposedTotalResolved,
+    changeFlowNewBookingTotal,
     displayChangeFlowSubtotal,
     displayChangeFlowTax,
     currency,
@@ -3739,7 +3585,7 @@ export function BookingFlow({
             newPassengerCounts: bookingItems,
             // Omit when empty: backend treats [] as "clear all"; missing = preserve stored selections (BookingChangeIntentService).
             ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
-            clientProposedTotal: changeFlowProposedTotalResolved,
+            clientProposedTotal: changeFlowNewBookingTotal,
             capacitySeatCredit: {
               enabled: true,
               previousPassengerCount: changeFlowInitialTicketCount,
@@ -3791,7 +3637,7 @@ export function BookingFlow({
     quantities,
     addOnSelections,
     changeFlowInitialTicketCount,
-    changeFlowProposedTotalResolved,
+    changeFlowNewBookingTotal,
     totalPrice,
     currency,
     activeOptions,
@@ -3944,12 +3790,11 @@ export function BookingFlow({
 
       const preferBooked =
         isChangeFlow && initialReturnIdForSelect
-          ? sorted.find((opt) => opt.returnAvailabilityId === initialReturnIdForSelect && opt.vacancies > 0)
+          ? sorted.find((opt) => opt.returnAvailabilityId === initialReturnIdForSelect)
           : undefined;
       const preferByDateTime =
         isChangeFlow && initialReturnDtForSelect && !preferBooked
           ? sorted.find((opt) => {
-              if (opt.vacancies <= 0) return false;
               try {
                 return (
                   parseAvailabilityDateTime(opt.dateTime).getTime() ===
@@ -4416,7 +4261,7 @@ export function BookingFlow({
           newReturnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
           newPassengerCounts: bookingItems,
           ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
-          clientProposedTotal: changeFlowProposedTotalResolved,
+          clientProposedTotal: changeFlowNewBookingTotal,
         });
         const canProceed = quote.canProceed !== false;
         const quoteCurrency = (quote.currency || currency) as Currency;
@@ -4437,7 +4282,11 @@ export function BookingFlow({
         if (!canProceed) {
           throw new Error(quote.reasonIfBlocked || 'This booking change cannot be completed right now.');
         }
-        const feChangeDue = Math.max(0, changeFlowProposedTotalResolved - (originalReceipt?.total ?? 0));
+        const feChangeDue = changeFlowBalanceVsOriginal({
+          newTotal: changeFlowNewBookingTotal,
+          originalReceiptTotal: originalReceipt?.total ?? 0,
+          audience: 'customer',
+        });
         const serverAmountDue =
           quote.amountDueCents != null
             ? Math.max(0, quote.amountDueCents / 100)
@@ -4547,20 +4396,24 @@ export function BookingFlow({
       // Backend will charge totalAmount and store this as the receipt so /manage matches.
       const taxForBreakdown = effectivePromoDiscountAmount > 0 ? effectiveTax : tax;
       const amountDueForCheckout = isCustomerSelfServeChange
-        ? Math.max(0, changeFlowProposedTotalResolved - (originalReceipt?.total ?? 0))
+        ? changeFlowBalanceVsOriginal({
+            newTotal: changeFlowNewBookingTotal,
+            originalReceiptTotal: originalReceipt?.total ?? 0,
+            audience: 'customer',
+          })
         : totalPrice;
       const lines = [
-        ...ticketLineItems.map((line) => ({
+        ...ticketLineItemsForChangeFlowDisplay.map((line) => ({
           label: line.category,
           amount: line.itemTotal,
           type: 'TICKET' as const,
           quantity: line.qty,
         })),
-        ...(returnPriceAdjustment !== 0
+        ...(checkoutReturnLineAmount !== 0
           ? [
               {
                 label: `${t('booking.returnOption') || 'Return option'} (${totalQuantity} ${totalQuantity === 1 ? (t('booking.person') || 'person') : (t('booking.people') || 'people')})`,
-                amount: returnPriceAdjustment,
+                amount: checkoutReturnLineAmount,
                 type: 'RETURN_OPTION' as const,
                 quantity: totalQuantity,
               },
@@ -4758,7 +4611,7 @@ export function BookingFlow({
           availabilityProductOptionId,
           itineraryDisplay: itineraryDisplay ?? undefined,
           clientSecret: paymentIntent.clientSecret ?? '',
-          ticketLinesForModal: ticketLineItems.map((line) => {
+          ticketLinesForModal: ticketLineItemsForChangeFlowDisplay.map((line) => {
             const rate = pricing.find((r) => r.category === line.category);
             const breakdown = getPriceBreakdown(
               line.category,
@@ -4769,7 +4622,7 @@ export function BookingFlow({
             return { line, breakdown };
           }),
           feeLineItems: feeLineItemsWithAddOns,
-          returnPriceAdjustment,
+          returnPriceAdjustment: checkoutReturnLineAmount,
           cancellationPolicyFee,
           cancellationPolicyLabel: effectiveCancellationPolicyLabel,
           subtotal: effectiveSubtotal,
@@ -4785,7 +4638,7 @@ export function BookingFlow({
         return;
       }
 
-      const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItems.map((line) => {
+      const ticketLinesForModal: CheckoutModalLineItem[] = ticketLineItemsForChangeFlowDisplay.map((line) => {
         const rate = pricing.find((r) => r.category === line.category);
         const breakdown = getPriceBreakdown(
           line.category,
@@ -4821,7 +4674,7 @@ export function BookingFlow({
             : undefined,
         ticketLines: ticketLinesForModal,
         feeLineItems: feeLineItemsWithAddOns,
-        returnPriceAdjustment,
+        returnPriceAdjustment: checkoutReturnLineAmount,
         cancellationPolicyFee,
         cancellationPolicyLabel: effectiveCancellationPolicyLabel,
         subtotal: effectiveSubtotal,
@@ -5107,6 +4960,7 @@ export function BookingFlow({
                 availabilitiesByDate={availabilitiesByDate}
                 selectedDate={selectedDate}
                 syncVisibleWeekToSelectedDate={isChangeFlow}
+                selectableSoldOutDate={changeFlowOriginalDate}
                 isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
                 onDateSelect={(date) => {
                   setSelectedDate(date);
@@ -5129,7 +4983,11 @@ export function BookingFlow({
                 currency={currency}
                 showCapacity={isAdmin}
                 extraDiscountPercent={calendarDiscountPercent}
-                capDiscountToSelectedDate={isChangeFlow && changeFlowTicketBookedUnitPriceByCategory.size > 0}
+                capDiscountBadgesToBookingDate={
+                  isChangeFlow && changeFlowTicketBookedUnitPriceByCategory.size > 0
+                    ? changeFlowOriginalDate
+                    : null
+                }
               />
             </div>
           </div>
@@ -5271,6 +5129,7 @@ export function BookingFlow({
 
           {/* Total and Checkout — shared PriceSummary component */}
           {selectedAvailability && (
+            <>
             <CheckoutForm
                 priceSummaryLines={checkoutPriceSummaryLines}
                 totalPrice={changeFlowAmountDue}
@@ -5498,6 +5357,7 @@ export function BookingFlow({
                   showProviderPricingInlineEditor ? providerPricingUi?.onLineAmountReset : undefined
                 }
               />
+            </>
           )}
           </div>
         </>