@ticketboothapp/booking 1.2.58 → 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';
@@ -202,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
@@ -285,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?: {
@@ -766,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;
 
@@ -1576,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();
@@ -1616,7 +1802,7 @@ export function BookingFlow({
       target,
       companyTimezone,
       initialValues.availabilityId ?? null,
-      initialValues.productOptionId ?? null,
+      changeFlowResolvedInitialProductOptionId ?? initialValues.productOptionId ?? null,
       initialValues.bookingItems ?? null,
       precomputedPricesByOption,
       currency,
@@ -1632,6 +1818,7 @@ export function BookingFlow({
     initialValues?.availabilityId,
     initialValues?.productOptionId,
     initialValues?.bookingItems,
+    changeFlowResolvedInitialProductOptionId,
     selectedAvailability,
     selectedDate,
     timesForSelectedDate,
@@ -1779,7 +1966,61 @@ export function BookingFlow({
     }
     return Math.max(...product.pickupLocations.map(loc => loc.pickupTimeOffsetMinutes ?? 0));
   }, [product.pickupLocations]);
+  const changeFlowInitialTicketCountForSeatCredit = useMemo(() => {
+    if (!isChangeFlow || !initialValues?.bookingItems?.length) return 0;
+    return initialValues.bookingItems.reduce(
+      (sum, item) => sum + Math.max(0, Number(item.count) || 0),
+      0,
+    );
+  }, [isChangeFlow, initialValues?.bookingItems]);
   
+  const changeFlowSeatCreditForOutboundAvailability = useCallback(
+    (availability: Availability): number => {
+      if (!isChangeFlow || changeFlowInitialTicketCountForSeatCredit <= 0) return 0;
+      const initialAvailabilityId = initialValues?.availabilityId?.trim();
+      const availabilityId = availability.availabilityId?.trim();
+      if (initialAvailabilityId && availabilityId) {
+        return initialAvailabilityId === availabilityId ? changeFlowInitialTicketCountForSeatCredit : 0;
+      }
+      if (!initialValues?.dateTime) return 0;
+      const selectedMs = parseAvailabilityDateTime(availability.dateTime).getTime();
+      const initialMs = parseAvailabilityDateTime(initialValues.dateTime).getTime();
+      if (selectedMs !== initialMs) return 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,
+    ],
+  );
+  const changeFlowSeatCreditForReturnAvailabilityId = useCallback(
+    (returnAvailabilityId: string | null | undefined): number => {
+      if (!isChangeFlow || changeFlowInitialTicketCountForSeatCredit <= 0) return 0;
+      const initialReturnAvailabilityId = initialValues?.returnAvailabilityId?.trim() || null;
+      const selectedReturnAvailabilityId = returnAvailabilityId?.trim() || null;
+      if (!selectedReturnAvailabilityId) {
+        return initialReturnAvailabilityId == null ? changeFlowInitialTicketCountForSeatCredit : 0;
+      }
+      if (!initialReturnAvailabilityId) return 0;
+      return selectedReturnAvailabilityId === initialReturnAvailabilityId
+        ? changeFlowInitialTicketCountForSeatCredit
+        : 0;
+    },
+    [isChangeFlow, changeFlowInitialTicketCountForSeatCredit, initialValues?.returnAvailabilityId],
+  );
+
   // Calculate pickup times based on availability times + pickup location offset
   interface PickupTimeInfo extends Availability {
     pickupTime: string;
@@ -1802,6 +2043,8 @@ export function BookingFlow({
     return timesForSelectedDate.map(avail => {
       // Parse the dateTime (which should already be in company timezone from backend)
       const availabilityTime = parseISO(avail.dateTime);
+      const vacancyCredit = changeFlowSeatCreditForOutboundAvailability(avail);
+      const adjustedVacancies = Math.max(0, avail.vacancies ?? 0) + vacancyCredit;
       
       // Only apply offset if it's set and > 0 and location is selected
       const pickupTime = (offsetMinutes > 0 && selectedPickupLocation) 
@@ -1822,13 +2065,22 @@ export function BookingFlow({
       
       return {
         ...avail,
+        vacancies: adjustedVacancies,
         pickupTime: pickupTime.toISOString(),
         displayTime,
         originalTime,
         displayTimeRange,
       };
     });
-  }, [selectedDate, selectedPickupLocation, timesForSelectedDate, pickupLocationSkipped, maxTimeOffsetMinutes, companyTimezone]);
+  }, [
+    selectedDate,
+    selectedPickupLocation,
+    timesForSelectedDate,
+    pickupLocationSkipped,
+    maxTimeOffsetMinutes,
+    companyTimezone,
+    changeFlowSeatCreditForOutboundAvailability,
+  ]);
 
   // Check if any pickup time has "most popular" tag (memoized for performance)
   const hasAnyMostPopular = useMemo(() => {
@@ -2095,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);
@@ -2103,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;
@@ -2114,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;
@@ -2134,27 +2399,137 @@ export function BookingFlow({
     return feeUnitByLabel;
   }, [isChangeFlow, originalReceipt?.lineItems, initialValues?.bookingItems]);
 
+  const changeFlowInitialTicketQtyByCategory = useMemo(() => {
+    const qtyByCategory = new Map<string, number>();
+    if (!isChangeFlow || !initialValues?.bookingItems?.length) return qtyByCategory;
+    for (const item of initialValues.bookingItems) {
+      const category = item.category?.trim().toUpperCase();
+      if (!category) continue;
+      qtyByCategory.set(category, Math.max(0, Number(item.count) || 0));
+    }
+    return qtyByCategory;
+  }, [isChangeFlow, initialValues?.bookingItems]);
+  const changeFlowInitialTicketCount = useMemo(() => {
+    let sum = 0;
+    for (const qty of changeFlowInitialTicketQtyByCategory.values()) sum += qty;
+    return sum;
+  }, [changeFlowInitialTicketQtyByCategory]);
+  const changeFlowOutboundMatchesOriginalSelection = useMemo(() => {
+    if (!isChangeFlow || !selectedAvailability || !initialValues?.dateTime) return false;
+    const initialAvailabilityId = initialValues.availabilityId?.trim();
+    const selectedAvailabilityId = selectedAvailability.availabilityId?.trim();
+    const idsMatch =
+      Boolean(initialAvailabilityId && selectedAvailabilityId) &&
+      initialAvailabilityId === selectedAvailabilityId;
+    if (idsMatch) return true;
+    // 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 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;
+    const initialReturnAvailabilityId = initialValues?.returnAvailabilityId?.trim() || null;
+    const selectedReturnAvailabilityId = selectedReturnOption?.returnAvailabilityId?.trim() || null;
+    const initialReturnDt = initialValues?.returnDateTime?.trim() || null;
+    const selectedReturnDt = selectedReturnOption?.dateTime?.trim() || null;
+
+    if (!selectedReturnAvailabilityId) {
+      return initialReturnAvailabilityId == null;
+    }
+    if (initialReturnAvailabilityId && selectedReturnAvailabilityId) {
+      if (initialReturnAvailabilityId === selectedReturnAvailabilityId) return true;
+      if (initialReturnDt && selectedReturnDt) {
+        return (
+          parseAvailabilityDateTime(initialReturnDt).getTime() ===
+          parseAvailabilityDateTime(selectedReturnDt).getTime()
+        );
+      }
+      return false;
+    }
+    // Bookings often store returnDateTime without returnAvailabilityId; still the same return if wall times match.
+    if (!initialReturnAvailabilityId && initialReturnDt && selectedReturnDt) {
+      return (
+        parseAvailabilityDateTime(initialReturnDt).getTime() ===
+        parseAvailabilityDateTime(selectedReturnDt).getTime()
+      );
+    }
+    return false;
+  }, [
+    isChangeFlow,
+    initialValues?.returnAvailabilityId,
+    initialValues?.returnDateTime,
+    selectedReturnOption?.returnAvailabilityId,
+    selectedReturnOption?.dateTime,
+  ]);
+  /** Same outbound + return as original booking: incremental seats use live pricing; receipt floors apply only after itinerary changes. */
+  const changeFlowSameItineraryAsOriginalBooking = useMemo(
+    () =>
+      isChangeFlow &&
+      changeFlowOutboundMatchesOriginalSelection &&
+      changeFlowReturnMatchesOriginalSelection,
+    [isChangeFlow, changeFlowOutboundMatchesOriginalSelection, changeFlowReturnMatchesOriginalSelection],
+  );
+
   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 flooredPerPerson = Math.max(rawPerPerson, changeFlowReturnUnitFloorPerPerson);
-      if (flooredPerPerson === rawPerPerson) return opt;
+      const applyReturnFloor =
+        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, effectiveChangeFlowReturnUnitFloorPerPerson!)
+        : rawPerPerson;
+      if (flooredPerPerson === rawPerPerson && adjustedVacancies === (opt.vacancies ?? 0)) return opt;
       return {
         ...opt,
+        vacancies: adjustedVacancies,
         priceAdjustmentByCurrency: {
           ...(opt.priceAdjustmentByCurrency ?? {}),
           [currency]: flooredPerPerson,
         },
       };
     });
-  }, [selectedAvailability?.returnOptions, isChangeFlow, changeFlowReturnUnitFloorPerPerson, currency]);
+  }, [
+    selectedAvailability?.returnOptions,
+    isChangeFlow,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+    changeFlowSameItineraryAsOriginalBooking,
+    isCustomerSelfServeChange,
+    currency,
+    changeFlowSeatCreditForReturnAvailabilityId,
+  ]);
 
   const selectedReturnOptionWithFloor = useMemo(() => {
-    if (!selectedReturnOption || !isChangeFlow || changeFlowReturnUnitFloorPerPerson == null) 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,
@@ -2163,74 +2538,60 @@ export function BookingFlow({
         [currency]: flooredPerPerson,
       },
     };
-  }, [selectedReturnOption, isChangeFlow, changeFlowReturnUnitFloorPerPerson, currency]);
+  }, [
+    selectedReturnOption,
+    isChangeFlow,
+    effectiveChangeFlowReturnUnitFloorPerPerson,
+    changeFlowSameItineraryAsOriginalBooking,
+    isCustomerSelfServeChange,
+    currency,
+  ]);
+
+  const returnOptionForOrderSummary = useMemo(() => {
+    // 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,
+    isCustomerSelfServeChange,
+    selectedReturnOption,
+    selectedReturnOptionWithFloor,
+  ]);
+  const effectiveSelectedPickupVacancies = useMemo(() => {
+    if (!selectedAvailability) return 0;
+    const seatCredit = changeFlowSeatCreditForOutboundAvailability(selectedAvailability);
+    return Math.max(0, selectedAvailability.vacancies ?? 0) + seatCredit;
+  }, [selectedAvailability, changeFlowSeatCreditForOutboundAvailability]);
+  const effectiveSelectedReturnVacancies = useMemo(() => {
+    if (!selectedReturnOption) return null;
+    const seatCredit = changeFlowSeatCreditForReturnAvailabilityId(
+      selectedReturnOption.returnAvailabilityId
+    );
+    return Math.max(0, selectedReturnOption.vacancies ?? 0) + seatCredit;
+  }, [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 => {
@@ -2257,56 +2618,38 @@ export function BookingFlow({
       computeOrderSummary(
         quantities,
         pricing,
-        selectedReturnOptionWithFloor,
+        returnOptionForOrderSummary,
         pricingConfig ?? null,
         currency,
         hasFees,
         cancellationPolicyId
       ),
-    [quantities, pricing, selectedReturnOptionWithFloor, pricingConfig, currency, hasFees, cancellationPolicyId]
+    [quantities, pricing, returnOptionForOrderSummary, pricingConfig, currency, hasFees, cancellationPolicyId]
   );
+
   const { totalQuantity, subtotal, tax, total: totalFromSummary, feeLineItems, returnPriceAdjustment, cancellationPolicyFee, isTaxIncludedInPrice, ticketLineItems } = orderSummary;
-  const changeFlowInitialTicketQtyByCategory = useMemo(() => {
-    const qtyByCategory = new Map<string, number>();
-    if (!isChangeFlow || !initialValues?.bookingItems?.length) return qtyByCategory;
-    for (const item of initialValues.bookingItems) {
-      const category = item.category?.trim().toUpperCase();
-      if (!category) continue;
-      qtyByCategory.set(category, Math.max(0, Number(item.count) || 0));
-    }
-    return qtyByCategory;
-  }, [isChangeFlow, initialValues?.bookingItems]);
-  const changeFlowPreserveBookedTicketPricing = useMemo(() => {
-    if (!isChangeFlow || !selectedAvailability || !initialValues?.dateTime) return false;
-    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;
-    // If option IDs are missing, still protect pricing when date/time is unchanged.
-    if (!selectedOptionId || !initialOptionId) return true;
-    return selectedOptionId === initialOptionId;
-  }, [isChangeFlow, selectedAvailability, initialValues?.dateTime, initialValues?.productOptionId]);
   const changeFlowProtectedTicketSubtotal = useMemo(() => {
     const currentTicketSubtotal = ticketLineItems.reduce(
       (sum, line) => sum + Math.max(0, Number(line.itemTotal) || 0),
       0,
     );
-    if (!changeFlowPreserveBookedTicketPricing) 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);
-      const liveUnitPrice = qty > 0 ? line.itemTotal / qty : 0;
       if (!category || qty <= 0) return sum;
-      const bookedUnitPrice = changeFlowTicketBookedUnitPriceByCategory.get(category);
-      if (bookedUnitPrice == null) return sum + line.itemTotal;
-      const baselineQty = Math.max(0, changeFlowInitialTicketQtyByCategory.get(category) ?? 0);
-      const protectedQty = Math.min(qty, baselineQty);
-      const incrementalQty = Math.max(0, qty - baselineQty);
-      return sum + protectedQty * bookedUnitPrice + incrementalQty * liveUnitPrice;
+      return (
+        sum +
+        changeFlowTicketLineTotalWithReceiptFloor({
+          qty,
+          baselineQtyForCategory: changeFlowInitialTicketQtyByCategory.get(category) ?? 0,
+          receiptUnitFloor: changeFlowTicketBookedUnitPriceByCategory.get(category),
+          liveLineTotal: Number(line.itemTotal) || 0,
+        })
+      );
     }, 0);
   }, [
-    changeFlowPreserveBookedTicketPricing,
+    changeFlowApplyReceiptPaidFloors,
     ticketLineItems,
     changeFlowTicketBookedUnitPriceByCategory,
     changeFlowInitialTicketQtyByCategory,
@@ -2314,10 +2657,25 @@ export function BookingFlow({
   /** Round-trip party limit: both legs must fit — use the tighter of outbound vs return vacancies. */
   const effectivePartySizeCap = useMemo(() => {
     if (!selectedAvailability) return 0;
-    const outbound = selectedAvailability.vacancies ?? 0;
+    const outboundSeatCredit =
+      changeFlowOutboundMatchesOriginalSelection && changeFlowInitialTicketCount > 0
+        ? changeFlowInitialTicketCount
+        : 0;
+    const outbound = Math.max(0, selectedAvailability.vacancies ?? 0) + outboundSeatCredit;
     if (selectedReturnOption == null) return outbound;
-    return Math.min(outbound, selectedReturnOption.vacancies ?? 0);
-  }, [selectedAvailability, selectedReturnOption]);
+    const returnSeatCredit =
+      changeFlowReturnMatchesOriginalSelection && changeFlowInitialTicketCount > 0
+        ? changeFlowInitialTicketCount
+        : 0;
+    const returnCap = Math.max(0, selectedReturnOption.vacancies ?? 0) + returnSeatCredit;
+    return Math.min(outbound, returnCap);
+  }, [
+    selectedAvailability,
+    selectedReturnOption,
+    changeFlowInitialTicketCount,
+    changeFlowOutboundMatchesOriginalSelection,
+    changeFlowReturnMatchesOriginalSelection,
+  ]);
 
   const selectedCancellationPolicy = pricingConfig?.cancellationPolicies?.find((p) => p.id === cancellationPolicyId);
   /** Label for display when policy may be forced by promo (not in pricingConfig list). */
@@ -2378,50 +2736,104 @@ export function BookingFlow({
     () => ticketLineItems.reduce((sum, line) => sum + Math.max(0, Number(line.itemTotal) || 0), 0),
     [ticketLineItems],
   );
-  const changeFlowInitialTotalTicketQty = useMemo(() => {
-    let sum = 0;
-    for (const qty of changeFlowInitialTicketQtyByCategory.values()) sum += qty;
-    return sum;
-  }, [changeFlowInitialTicketQtyByCategory]);
+  const changeFlowInitialTotalTicketQty = changeFlowInitialTicketCount;
   const currentFeeSubtotal = useMemo(
     () => feeLineItems.reduce((sum, line) => sum + Math.max(0, Number(line.totalAmount) || 0), 0),
     [feeLineItems],
   );
   const changeFlowProtectedFeeSubtotal = useMemo(() => {
-    if (!changeFlowPreserveBookedTicketPricing || totalQuantity <= 0) return currentFeeSubtotal;
+    if (!changeFlowApplyReceiptPaidFloors || totalQuantity <= 0) return currentFeeSubtotal;
+    const initialParty = changeFlowInitialTicketCount;
     return feeLineItems.reduce((sum, line) => {
       const key = normalizeLineLabelForCompare(line.name || '');
-      const currentUnitPrice = line.totalAmount / totalQuantity;
-      const bookedUnitPrice = key ? changeFlowBookedFeeUnitByNormalizedLabel.get(key) : null;
-      if (bookedUnitPrice == null) return sum + line.totalAmount;
-      const protectedQty = Math.min(totalQuantity, changeFlowInitialTotalTicketQty);
-      const incrementalQty = Math.max(0, totalQuantity - changeFlowInitialTotalTicketQty);
-      return sum + protectedQty * bookedUnitPrice + incrementalQty * currentUnitPrice;
+      const bookedFeePerPerson = key ? changeFlowBookedFeeUnitByNormalizedLabel.get(key) : undefined;
+      return (
+        sum +
+        changeFlowFeeLineTotalWithReceiptFloor({
+          totalQuantity,
+          initialTicketCount: initialParty,
+          bookedFeePerPerson,
+          liveFeeLineTotal: Number(line.totalAmount) || 0,
+        })
+      );
     }, 0);
   }, [
-    changeFlowPreserveBookedTicketPricing,
+    changeFlowApplyReceiptPaidFloors,
     totalQuantity,
     currentFeeSubtotal,
     feeLineItems,
     changeFlowBookedFeeUnitByNormalizedLabel,
-    changeFlowInitialTotalTicketQty,
+    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 (!changeFlowPreserveBookedTicketPricing || totalQuantity <= 0) return returnPriceAdjustment;
-    if (changeFlowReturnUnitFloorPerPerson == null) return returnPriceAdjustment;
-    const currentUnitPrice = returnPriceAdjustment / totalQuantity;
-    const protectedQty = Math.min(totalQuantity, changeFlowInitialTotalTicketQty);
-    const incrementalQty = Math.max(0, totalQuantity - changeFlowInitialTotalTicketQty);
-    return protectedQty * changeFlowReturnUnitFloorPerPerson + incrementalQty * currentUnitPrice;
+    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;
   }, [
-    changeFlowPreserveBookedTicketPricing,
+    changeFlowApplyReceiptPaidFloors,
     totalQuantity,
     returnPriceAdjustment,
-    changeFlowReturnUnitFloorPerPerson,
-    changeFlowInitialTotalTicketQty,
+    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 && changeFlowPreserveBookedTicketPricing
+    isChangeFlow && changeFlowApplyReceiptPaidFloors
       ? subtotal -
         currentTicketSubtotal -
         currentFeeSubtotal -
@@ -2488,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,
@@ -2512,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',
             },
           ]
@@ -2572,11 +2987,11 @@ export function BookingFlow({
     ];
   }, [
     selectedAvailability,
-    ticketLineItems,
+    ticketLineItemsForChangeFlowDisplay,
     pricing,
     getPriceBreakdown,
     selectedReturnOption,
-    returnPriceAdjustment,
+    checkoutReturnLineAmount,
     totalQuantity,
     t,
     cancellationPolicyFee,
@@ -2713,9 +3128,13 @@ export function BookingFlow({
       ? (effectiveSubtotal - effectivePromoDiscountAmount) * (pricingConfig?.taxRate ?? 0)
       : taxOnSubtotal;
   const totalPrice = effectiveSubtotal + effectiveTax - effectivePromoDiscountAmount;
-  const changeFlowProposedTotal = isChangeFlow && originalReceipt
-    ? reconcileChangeBookingProposedTotal(totalPrice, originalReceipt.total)
-    : totalPrice;
+  /** Change-flow product rules: `lib/booking/change-flow-pricing.ts`. */
+  const changeFlowNewBookingTotal = resolveChangeFlowNewBookingTotal({
+    isChangeFlow,
+    cartTotal: totalPrice,
+    originalReceiptTotal: originalReceipt?.total,
+  });
+
   const changeSelectionDetails = useMemo(() => {
     if (!isChangeFlow || !initialValues) {
       return {
@@ -2747,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();
@@ -2851,6 +3271,7 @@ export function BookingFlow({
   }, [
     isChangeFlow,
     initialValues,
+    changeFlowResolvedInitialProductOptionId,
     selectedAvailability,
     selectedReturnOption,
     implicitReturnBaselineId,
@@ -2885,15 +3306,6 @@ export function BookingFlow({
     showProviderPricingInlineEditor && providerPricingUi?.totalsPreview
       ? providerPricingUi.totalsPreview
       : null;
-  const displayChangeFlowProposedTotal = providerTotalsPreview
-    ? providerTotalsPreview.totalAmount
-    : changeFlowProposedTotal;
-  const displayChangeFlowSubtotal = providerTotalsPreview
-    ? providerTotalsPreview.subtotalBeforeTax
-    : effectiveSubtotal;
-  const displayChangeFlowTax = providerTotalsPreview
-    ? providerTotalsPreview.taxAmount
-    : effectiveTax;
   const providerHasEditedLineOverrides =
     isProviderDashboardChange &&
     providerQuotedLines.some((line) => {
@@ -2921,23 +3333,29 @@ export function BookingFlow({
   const hasEffectiveChangeSelection =
     hasChangeSelection || providerHasEditedLineOverrides || providerHasAdditionalAdjustments;
 
+  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: same recipe as normal booking — FE `totalPrice` 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;
+
 
   const changeCheckoutButtonLabel = (() => {
     if (!isChangeFlow) return undefined;
@@ -3039,7 +3457,7 @@ export function BookingFlow({
       dateChanged: changeSelectionDetails.dateChanged,
       ticketsChanged: changeSelectionDetails.ticketsChanged,
       hasChangesFromInitial: changeSelectionDetails.hasChangesFromInitial,
-      selectionTotal: totalPrice,
+      selectionTotal: originalReceipt ? changeFlowNewBookingTotal : totalPrice,
       selectionCurrency: currency,
     };
   }, [
@@ -3052,6 +3470,8 @@ export function BookingFlow({
     changeSelectionDetails,
     totalPrice,
     currency,
+    originalReceipt,
+    changeFlowNewBookingTotal,
   ]);
 
   useEffect(() => {
@@ -3087,9 +3507,14 @@ export function BookingFlow({
       return;
     }
     onPricePreviewChange({
-      subtotal: effectiveSubtotal,
-      tax: !isTaxIncludedInPrice ? effectiveTax : 0,
-      total: totalPrice,
+      subtotal: isChangeFlow && originalReceipt ? displayChangeFlowSubtotal : effectiveSubtotal,
+      tax:
+        !isTaxIncludedInPrice
+          ? isChangeFlow && originalReceipt
+            ? displayChangeFlowTax
+            : effectiveTax
+          : 0,
+      total: isChangeFlow && originalReceipt ? changeFlowNewBookingTotal : totalPrice,
       currency,
     });
   }, [
@@ -3098,9 +3523,14 @@ export function BookingFlow({
     totalQuantity,
     effectiveSubtotal,
     effectiveTax,
-    changeFlowProposedTotal,
+    changeFlowNewBookingTotal,
+    displayChangeFlowSubtotal,
+    displayChangeFlowTax,
     currency,
     isTaxIncludedInPrice,
+    isChangeFlow,
+    originalReceipt,
+    totalPrice,
   ]);
 
   /** Debounced server quote so CTA + “amount owed” match PaymentIntent; avoids free confirm when FE estimate ≠ BE. */
@@ -3155,7 +3585,13 @@ export function BookingFlow({
             newPassengerCounts: bookingItems,
             // Omit when empty: backend treats [] as "clear all"; missing = preserve stored selections (BookingChangeIntentService).
             ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
-            clientProposedTotal: changeFlowProposedTotal,
+            clientProposedTotal: changeFlowNewBookingTotal,
+            capacitySeatCredit: {
+              enabled: true,
+              previousPassengerCount: changeFlowInitialTicketCount,
+              previousAvailabilityId: initialValues.availabilityId ?? null,
+              previousReturnAvailabilityId: initialValues.returnAvailabilityId ?? null,
+            },
           });
           if (seq !== changeQuoteRequestSeq.current) return;
           const canProceed = quote.canProceed !== false;
@@ -3200,9 +3636,13 @@ export function BookingFlow({
     selectedReturnOption?.returnAvailabilityId,
     quantities,
     addOnSelections,
+    changeFlowInitialTicketCount,
+    changeFlowNewBookingTotal,
     totalPrice,
     currency,
     activeOptions,
+    initialValues?.availabilityId,
+    initialValues?.returnAvailabilityId,
   ]);
 
   // Auto-select product option when date is selected: most popular if set, otherwise first available.
@@ -3350,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() ===
@@ -3778,6 +4217,12 @@ export function BookingFlow({
                   additionalAdjustments: providerAdditionalAdjustments,
                 }
               : undefined,
+          capacitySeatCredit: {
+            enabled: true,
+            previousPassengerCount: changeFlowInitialTicketCount,
+            previousAvailabilityId: initialValues?.availabilityId ?? null,
+            previousReturnAvailabilityId: initialValues?.returnAvailabilityId ?? null,
+          },
         });
         setLoading(false);
         return;
@@ -3816,7 +4261,7 @@ export function BookingFlow({
           newReturnAvailabilityId: selectedReturnOption?.returnAvailabilityId ?? null,
           newPassengerCounts: bookingItems,
           ...(addOnSelections.length > 0 ? { newAddOnSelections: addOnSelections } : {}),
-          clientProposedTotal: changeFlowProposedTotal,
+          clientProposedTotal: changeFlowNewBookingTotal,
         });
         const canProceed = quote.canProceed !== false;
         const quoteCurrency = (quote.currency || currency) as Currency;
@@ -3837,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, changeFlowProposedTotal - (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)
@@ -3947,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, changeFlowProposedTotal - (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,
               },
@@ -4158,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,
@@ -4169,7 +4622,7 @@ export function BookingFlow({
             return { line, breakdown };
           }),
           feeLineItems: feeLineItemsWithAddOns,
-          returnPriceAdjustment,
+          returnPriceAdjustment: checkoutReturnLineAmount,
           cancellationPolicyFee,
           cancellationPolicyLabel: effectiveCancellationPolicyLabel,
           subtotal: effectiveSubtotal,
@@ -4185,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,
@@ -4221,7 +4674,7 @@ export function BookingFlow({
             : undefined,
         ticketLines: ticketLinesForModal,
         feeLineItems: feeLineItemsWithAddOns,
-        returnPriceAdjustment,
+        returnPriceAdjustment: checkoutReturnLineAmount,
         cancellationPolicyFee,
         cancellationPolicyLabel: effectiveCancellationPolicyLabel,
         subtotal: effectiveSubtotal,
@@ -4236,7 +4689,7 @@ export function BookingFlow({
           isCustomerSelfServeChange && originalReceipt
             ? {
                 previousTotal: originalReceipt.total,
-                newTotal: totalPrice,
+                newTotal: displayChangeFlowProposedTotal,
                 differenceTotal: amountDueForCheckout,
               }
             : undefined,
@@ -4507,6 +4960,7 @@ export function BookingFlow({
                 availabilitiesByDate={availabilitiesByDate}
                 selectedDate={selectedDate}
                 syncVisibleWeekToSelectedDate={isChangeFlow}
+                selectableSoldOutDate={changeFlowOriginalDate}
                 isLoading={loadingAvailabilities || isFetchingMoreAvailabilities}
                 onDateSelect={(date) => {
                   setSelectedDate(date);
@@ -4529,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>
@@ -4642,11 +5100,9 @@ export function BookingFlow({
               selectedVacancies={effectivePartySizeCap}
               companyTimezone={companyTimezone}
               pickupDateTime={selectedAvailability.dateTime}
-              pickupVacancies={selectedAvailability.vacancies ?? 0}
+              pickupVacancies={effectiveSelectedPickupVacancies}
               returnDateTime={selectedReturnOption?.dateTime ?? null}
-              returnVacancies={
-                selectedReturnOption != null ? (selectedReturnOption.vacancies ?? 0) : null
-              }
+              returnVacancies={effectiveSelectedReturnVacancies}
               resourceCount={selectedReturnOption ? null : (selectedAvailability.resourceCount ?? null)}
               currency={currency}
               locale={locale}
@@ -4673,6 +5129,7 @@ export function BookingFlow({
 
           {/* Total and Checkout — shared PriceSummary component */}
           {selectedAvailability && (
+            <>
             <CheckoutForm
                 priceSummaryLines={checkoutPriceSummaryLines}
                 totalPrice={changeFlowAmountDue}
@@ -4900,6 +5357,7 @@ export function BookingFlow({
                   showProviderPricingInlineEditor ? providerPricingUi?.onLineAmountReset : undefined
                 }
               />
+            </>
           )}
           </div>
         </>