@ticketboothapp/booking 1.2.61 → 1.2.62

package/src/components/booking/Calendar.tsx

@@ -23,8 +23,6 @@ export interface DateAvailability {
   availabilityCount: number;
   isSoldOut: boolean;
   minPrice?: number;
-  hasDiscount?: boolean;
-  discountPercent?: number;
   totalVacancies?: number; // Total available tickets across all availabilities for this date
   startTimes?: string[]; // Array of start times for this date (e.g., ["09:00", "10:00", "14:00"])
   soldOutTimes?: Set<string>; // Set of sold out time strings (e.g., ["09:00", "14:00"])
@@ -51,8 +49,8 @@ interface CalendarProps {
   extraDiscountPercent?: number;
   /**
    * Change-booking: yyyy-MM-dd of the **existing** booking's tour date. When that date exists in
-   * [availabilitiesByDate], each day's badge uses `min(that day's catalog %, the booking date's catalog %)` so
-   * the cap stays tied to the current booking, not which day is selected in the UI.
+   * [availabilitiesByDate], each day's badge is `min(that day's %, the booking date's catalog %)` — including
+   * when the booking date's discount is 0% (no day shows a higher % than the booked day).
    */
   capDiscountBadgesToBookingDate?: string | null;
   /**
@@ -66,6 +64,16 @@ interface CalendarProps {
    * Used by change-booking so the original booked date can always be selected.
    */
   selectableSoldOutDate?: string | null;
+  /**
+   * Self-serve change booking: treat a day as sold out when no single departure slot has at least
+   * this many effective seats (after optional {@link getEffectiveVacancies}). New booking flow omits this.
+   */
+  partySizeRequiredForCalendarSelection?: number;
+  /**
+   * When {@link partySizeRequiredForCalendarSelection} is set, per-row seat counts for calendar logic
+   * (e.g. change flow seat release on the original slot). If omitted, raw `vacancies` are used.
+   */
+  getEffectiveVacancies?: (availability: Availability) => number;
 }
 
 // ============ Constants ============
@@ -237,9 +245,10 @@ const DateCell = memo(function DateCell({
   const ariaLabel = useMemo(() => {
     const parts = [dayNumber];
     if (availability?.isSoldOut) parts.push(' - Sold out');
-    if (availability?.hasDiscount) parts.push(` - ${availability.discountPercent}% off`);
+    const pct = availability?.totalDiscountPercent;
+    if (pct != null && pct > 0) parts.push(` - ${pct}% off`);
     return parts.join('');
-  }, [dayNumber, availability?.isSoldOut, availability?.hasDiscount, availability?.discountPercent]);
+  }, [dayNumber, availability?.isSoldOut, availability?.totalDiscountPercent]);
 
   return (
     <button
@@ -375,13 +384,6 @@ const DateCell = memo(function DateCell({
                     </div>
                   )
                 )}
-
-                {/* Discount Badge - desktop only (mobile uses corner tag) */}
-                {!isMobile && availability.hasDiscount && availability.discountPercent && (availability.totalVacancies === undefined || availability.totalVacancies >= 5) && (
-                  <div className={styles.calendarDiscountBadge}>
-                    -{availability.discountPercent}%
-                  </div>
-                )}
               </>
             ) : null}
           </div>
@@ -408,6 +410,8 @@ export function Calendar({
   capDiscountBadgesToBookingDate = null,
   syncVisibleWeekToSelectedDate = false,
   selectableSoldOutDate = null,
+  partySizeRequiredForCalendarSelection,
+  getEffectiveVacancies,
 }: CalendarProps) {
   const { t } = useTranslations();
   const { locale } = useLocale();
@@ -753,6 +757,20 @@ export function Calendar({
   // Use plain object instead of Map so React can detect changes properly
   const dateAvailabilityMap = useMemo(() => {
     const map: Record<string, DateAvailability> = {};
+    const partyReq =
+      !showCapacity &&
+      partySizeRequiredForCalendarSelection != null &&
+      partySizeRequiredForCalendarSelection > 0
+        ? partySizeRequiredForCalendarSelection
+        : 0;
+
+    const seatCountForAvailability = (avail: Availability): number => {
+      const raw =
+        getEffectiveVacancies != null
+          ? getEffectiveVacancies(avail)
+          : avail.vacancies ?? 0;
+      return Math.max(0, raw);
+    };
     
     Object.entries(availabilitiesByDate).forEach(([dateStr, availabilities]) => {
       if (availabilities && availabilities.length > 0) {
@@ -776,11 +794,24 @@ export function Calendar({
         
         const minPrice = adultPrices.length > 0 ? Math.min(...adultPrices) : undefined;
         
-        // Check if sold out (all availabilities have 0 vacancies)
-        const isSoldOut = availabilities.every(avail => avail.vacancies === 0);
+        // Sold out: no seats on any row (using effective vacancies when provided), and/or (change flow)
+        // no single departure row can fit the fixed party size.
+        const isEverySlotZero = availabilities.every((avail) => seatCountForAvailability(avail) === 0);
+        let isSoldOut = isEverySlotZero;
+        if (!isSoldOut && partyReq > 0) {
+          const hasSlotForParty = availabilities.some(
+            (avail) => seatCountForAvailability(avail) >= partyReq,
+          );
+          if (!hasSlotForParty) {
+            isSoldOut = true;
+          }
+        }
         
         // Calculate total vacancies across all availabilities for this date
-        const totalVacancies = availabilities.reduce((sum, avail) => sum + avail.vacancies, 0);
+        const totalVacancies = availabilities.reduce(
+          (sum, avail) => sum + seatCountForAvailability(avail),
+          0,
+        );
         
         // Extract start times from availabilities and track which are sold out
         const timeAvailabilityMap = new Map<string, { isSoldOut: boolean; vacancies: number }>();
@@ -797,16 +828,17 @@ export function Calendar({
             if (timeMatch) timeStr = timeMatch[1];
           }
           if (timeStr) {
+            const vac = seatCountForAvailability(avail);
             const existing = timeAvailabilityMap.get(timeStr);
             if (existing) {
               timeAvailabilityMap.set(timeStr, {
-                isSoldOut: existing.isSoldOut && avail.vacancies === 0,
-                vacancies: existing.vacancies + avail.vacancies
+                isSoldOut: existing.isSoldOut && vac === 0,
+                vacancies: existing.vacancies + vac
               });
             } else {
               timeAvailabilityMap.set(timeStr, {
-                isSoldOut: avail.vacancies === 0,
-                vacancies: avail.vacancies
+                isSoldOut: vac === 0,
+                vacancies: vac
               });
             }
             // Per-time capacity for admin: first availability for this time wins
@@ -831,7 +863,9 @@ export function Calendar({
         const startTimes = Array.from(timeAvailabilityMap.keys()).sort();
         const soldOutTimes = new Set(
           Array.from(timeAvailabilityMap.entries())
-            .filter(([, info]) => info.isSoldOut)
+            .filter(([, info]) =>
+              partyReq > 0 ? info.vacancies < partyReq : info.isSoldOut,
+            )
             .map(([time]) => time)
         );
         
@@ -856,24 +890,34 @@ export function Calendar({
     });
 
     const anchor = capDiscountBadgesToBookingDate?.trim() || null;
-    if (anchor) {
-      const anchorDiscount = map[anchor]?.totalDiscountPercent;
-      if (anchorDiscount != null && anchorDiscount > 0) {
-        const capped: Record<string, DateAvailability> = {};
-        for (const [dateStr, availability] of Object.entries(map)) {
-          const raw = availability.totalDiscountPercent;
-          const adjusted = raw != null ? Math.min(raw, anchorDiscount) : undefined;
-          capped[dateStr] = {
-            ...availability,
-            totalDiscountPercent: adjusted,
-          };
-        }
-        return capped;
+    /** Change-booking: never show a day’s badge higher than the booking date’s catalog % (y); includes y === 0. */
+    if (anchor && map[anchor]) {
+      const anchorDiscount = map[anchor].totalDiscountPercent ?? 0;
+      const capped: Record<string, DateAvailability> = {};
+      for (const [dateStr, availability] of Object.entries(map)) {
+        const raw = availability.totalDiscountPercent;
+        const adjusted =
+          raw != null ? Math.min(raw, anchorDiscount) : undefined;
+        capped[dateStr] = {
+          ...availability,
+          totalDiscountPercent:
+            adjusted !== undefined && adjusted > 0 ? adjusted : undefined,
+        };
       }
+      return capped;
     }
 
     return map;
-  }, [availabilitiesByDate, timezone, currency, extraDiscountPercent, capDiscountBadgesToBookingDate]);
+  }, [
+    availabilitiesByDate,
+    timezone,
+    currency,
+    extraDiscountPercent,
+    capDiscountBadgesToBookingDate,
+    showCapacity,
+    partySizeRequiredForCalendarSelection,
+    getEffectiveVacancies,
+  ]);
 
   // Get display range for header
   const displayRange = useMemo(() => {

package/src/components/booking/CancellationPolicySelector.tsx

@@ -48,6 +48,8 @@ interface CancellationPolicySelectorProps {
   } | null;
   /** Optional content rendered inside each policy row (e.g. deposit refundability for private shuttles) */
   rowSubtitle?: React.ReactNode;
+  /** Hide +fee amounts (customer change flow until server-backed pricing). */
+  suppressFees?: boolean;
 }
 
 export function CancellationPolicySelector({
@@ -59,6 +61,7 @@ export function CancellationPolicySelector({
   onPolicySelect,
   forcedPolicy,
   rowSubtitle,
+  suppressFees = false,
 }: CancellationPolicySelectorProps) {
   return (
     <div className={styles.wrapper}>
@@ -92,7 +95,7 @@ export function CancellationPolicySelector({
                 )}
               </div>
             </div>
-            <span className={`${styles.fee} ${styles.feeFree}`}>
+              <span className={`${styles.fee} ${styles.feeFree}`}>
               {t('booking.included') ?? 'Included'}
             </span>
           </div>
@@ -131,7 +134,11 @@ export function CancellationPolicySelector({
                 </div>
               </div>
               <span className={`${styles.fee} ${isFree ? styles.feeFree : styles.feePaid}`}>
-                {isFree ? (t('booking.included') ?? 'Included') : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
+                {suppressFees
+                  ? '—'
+                  : isFree
+                    ? (t('booking.included') ?? 'Included')
+                    : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
               </span>
             </button>
           );

package/src/components/booking/ChangeBookingDialog.tsx

@@ -6,7 +6,9 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { getProduct, type Product } from '../../lib/booking-api';
 import { useBookingHost } from '../../runtime';
 import { formatCurrencyAmount, type Currency } from '../../lib/currency';
-import { BookingFlow, type ChangeFlowSelectionPreview } from './BookingFlow';
+import { CURRENCIES, DEFAULT_CURRENCY } from './CurrencySwitcher';
+import { ChangeBookingFlow } from './ChangeBookingFlow';
+import type { ChangeFlowSelectionPreview } from './booking-flow-types';
 import { useBookingSourceMetadataFromLocation } from '../../hooks/useBookingSourceMetadataFromLocation';
 import styles from './BookingDialog.module.css';
 import './booking-flow.css';
@@ -189,6 +191,13 @@ export default function ChangeBookingDialog({
 
   const originalPromo = getOriginalPromoFromReceipt(booking.receipt);
   const lockedPromoCode = booking.receipt.promoCode?.trim() || originalPromo?.code || null;
+  const receiptCurrency = (() => {
+    const raw =
+      (booking.receipt?.currency && String(booking.receipt.currency).trim()) ||
+      (booking.currency && String(booking.currency).trim()) ||
+      '';
+    return raw && (CURRENCIES as readonly string[]).includes(raw) ? (raw as Currency) : DEFAULT_CURRENCY;
+  })();
   const initialValues = {
     bookingReference: booking.bookingReference ?? null,
     dateTime: booking.dateTime ?? null,
@@ -212,8 +221,8 @@ export default function ChangeBookingDialog({
     cancellationPolicyId: booking.cancellationPolicyId ?? null,
     returnUnitFloorPerPerson:
       (booking as { returnUnitFloorPerPerson?: number | null }).returnUnitFloorPerPerson ?? null,
+    currency: receiptCurrency,
   };
-  const receiptCurrency = (booking.receipt.currency as Currency) || 'CAD';
   // Use booking + static config only — not `product.name` (minimal → API product swaps labels).
   const tourName =
     booking.productName?.trim() ||
@@ -249,11 +258,13 @@ export default function ChangeBookingDialog({
   );
   const newTotalFormatted =
     newBookingPreview != null
-      ? formatCurrencyAmount(
-          newBookingPreview.selectionTotal,
-          newBookingPreview.selectionCurrency,
-          'en',
-        )
+      ? newBookingPreview.selectionTotal == null
+        ? '—'
+        : formatCurrencyAmount(
+            newBookingPreview.selectionTotal,
+            newBookingPreview.selectionCurrency,
+            'en',
+          )
       : '—';
 
   const visuallyMatches =
@@ -401,18 +412,17 @@ export default function ChangeBookingDialog({
                   )}
                 </AnimatePresence>
               </div>
-              <BookingFlow
+              <ChangeBookingFlow
                 product={product}
                 productId={productSlug}
                 onBack={onClose}
-                currency="CAD"
+                currency={receiptCurrency}
                 contentRef={contentRef}
                 bookingSourceAttribution={bookingSourceAttribution}
                 onSuccess={() => {
                   onChangeCompleted?.(newBookingPreview);
                   onClose();
                 }}
-                mode="change"
                 hideItineraryBox
                 originalReceipt={{
                   subtotal: booking.receipt.subtotalBeforeTax,