@ticketboothapp/booking 1.2.112 → 1.2.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.112",
+  "version": "1.2.113",
   "private": false,
   "sideEffects": [
     "**/*.css",

package/src/components/booking/Calendar.module.css

@@ -76,8 +76,10 @@
   --cal-discount-tag-bg: rgba(239, 68, 68, 0.9);
   --cal-discount-tag-text: #fff;
 
-  /* Today ring */
-  --cal-today-ring: var(--booking-emerald-600, #059669);
+  /* Today marker */
+  --cal-today-ring: var(--booking-orange-600, #ff4d00);
+  --cal-today-text: var(--booking-orange-600, #ff4d00);
+  --cal-today-dot: var(--booking-orange-600, #ff4d00);
 
   /* Grid borders */
   --cal-grid-border: var(--booking-stone-300, #d6d3d1);
@@ -201,7 +203,8 @@
   --cal-dropdown-day-selected-bg-hover: var(--booking-emerald-700, #047857);
   --cal-dropdown-day-soldout-bg: #f87171;
   --cal-dropdown-day-soldout-bg-hover: #ef4444;
-  --cal-dropdown-day-today-ring: var(--booking-emerald-500, #10b981);
+  --cal-dropdown-day-today-ring: var(--booking-orange-600, #ff4d00);
+  --cal-dropdown-day-today-text: var(--booking-orange-600, #ff4d00);
 
   position: fixed;
   background-color: var(--cal-dropdown-bg);
@@ -305,6 +308,7 @@
   transition: background-color 0.2s, color 0.2s;
   border: none;
   cursor: pointer;
+  position: relative;
 }
 
 .calendarDropdownDayMuted {
@@ -312,6 +316,12 @@
   cursor: not-allowed;
 }
 
+.calendarDropdownDayPast {
+  background-color: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
 .calendarDropdownDayAvailable {
   color: var(--cal-dropdown-day-text);
   background-color: var(--cal-dropdown-day-available-bg);
@@ -348,6 +358,20 @@
 
 .calendarDropdownDayToday {
   box-shadow: inset 0 0 0 1px var(--cal-dropdown-day-today-ring);
+  color: var(--cal-dropdown-day-today-text);
+  font-weight: 700;
+}
+
+.calendarDropdownDayToday::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0.1875rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 999px;
+  background-color: var(--cal-dropdown-day-today-ring);
+  transform: translateX(-50%);
 }
 
 .calendarGrid {
@@ -402,10 +426,10 @@
   }
 }
 
-/* Desktop: don't stretch every cell to the tallest day in the row (was huge empty space). */
+/* Desktop: stretch each day to the row height so grid borders stay aligned across empty and available days. */
 @media (min-width: 640px) {
   .calendarDaysGrid {
-    align-items: start;
+    align-items: stretch;
   }
 
   /* Admin capacity mode: keep all days in a row equal height (including empty days like leading/trailing month dates). */
@@ -456,15 +480,9 @@
   width: 100%;
 }
 
-/* Desktop: pin time pills to bottom of cell; centering left a tall empty band under the date. */
+/* Desktop: center availability content while row stretching keeps grid borders aligned. */
 @media (min-width: 640px) {
   .calendarDayCellInner:not(.calendarDayCellInnerMobile) {
-    justify-content: flex-end;
-    padding-bottom: 0.125rem;
-  }
-
-  /* Admin capacity mode: with stretched row heights, bottom-pinning creates excessive top whitespace. */
-  .calendar.calendarAdminMode .calendarDayCellInner:not(.calendarDayCellInnerMobile) {
     justify-content: center;
     padding-bottom: 0;
   }
@@ -517,8 +535,19 @@
   cursor: not-allowed;
 }
 
+.calendar button.calendarDayCellPast,
+.calendar .calendarDayCellPast {
+  background-color: var(--booking-stone-100, #f5f5f4);
+  color: var(--booking-stone-400, #a8a29e);
+  cursor: not-allowed;
+}
+
+.calendarDayCellPast .calendarDayNumber {
+  color: var(--booking-stone-400, #a8a29e);
+}
+
 .calendarDayCellToday {
-  box-shadow: inset 0 0 0 1px var(--cal-today-ring);
+  box-shadow: none;
 }
 
 /* Day number */
@@ -534,6 +563,22 @@
   color: var(--cal-day-number-selected);
 }
 
+.calendarDayCellToday .calendarDayNumber {
+  color: var(--cal-today-text);
+  font-weight: 700;
+}
+
+.calendarDayCellToday .calendarDayNumber::after {
+  content: "";
+  display: inline-block;
+  width: 0.25rem;
+  height: 0.25rem;
+  margin-left: 0.1875rem;
+  border-radius: 999px;
+  background-color: var(--cal-today-dot);
+  vertical-align: 0.125rem;
+}
+
 /* ============ BADGES & PILLS ============ */
 .calendarDiscountTag {
   position: absolute;

package/src/components/booking/Calendar.tsx

@@ -178,6 +178,7 @@ interface DateCellProps {
   availability: DateAvailability | null;
   isSelected: boolean;
   isToday: boolean;
+  isPast: boolean;
   showCapacity?: boolean;
   timezone: string;
   displayMode: 'times' | 'status';
@@ -192,6 +193,7 @@ const DateCell = memo(function DateCell({
   availability,
   isSelected,
   isToday,
+  isPast,
   showCapacity,
   timezone,
   displayMode,
@@ -209,7 +211,7 @@ const DateCell = memo(function DateCell({
   // In change flow, also allow the original booked sold-out date to stay selectable.
   const hasAvailability =
     hasAvailabilityData && (!availability.isSoldOut || showCapacity || allowPinnedSoldOutDate);
-  const isDisabled = !hasAvailability;
+  const isDisabled = isPast || !hasAvailability;
 
   // Format time for display. timeStr (e.g. "09:00") is already in company timezone (MDT).
   // Create a Date with those components, interpret as company timezone, then format.
@@ -246,21 +248,24 @@ const DateCell = memo(function DateCell({
           ? 'min-w-0 min-h-[5.75rem]'
           : 'min-h-[5rem]'
     ),
-    isDisabled
+    isPast
+      ? styles.calendarDayCellPast
+      : isDisabled
       ? styles.calendarDayCellDisabled
       : isSelected
       ? styles.calendarDayCellSelected
       : styles.calendarDayCellAvailable,
-    isToday && hasAvailability && !isSelected && styles.calendarDayCellToday
-  ), [isDisabled, isSelected, isToday, hasAvailability, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
+    isToday && !isPast && !isSelected && styles.calendarDayCellToday
+  ), [isPast, isDisabled, isSelected, isToday, needsTallerCell, isMobile, mobileNeedsTaller, adminCapacityTallCells]);
 
   const ariaLabel = useMemo(() => {
     const parts = [dayNumber];
+    if (isPast) parts.push(' - Past date');
     if (availability?.isSoldOut) parts.push(' - Sold out');
     const pct = availability?.totalDiscountPercent;
     if (pct != null && pct > 0) parts.push(` - ${pct}% off`);
     return parts.join('');
-  }, [dayNumber, availability?.isSoldOut, availability?.totalDiscountPercent]);
+  }, [dayNumber, isPast, availability?.isSoldOut, availability?.totalDiscountPercent]);
 
   return (
     <button
@@ -996,6 +1001,8 @@ export function Calendar({
     getEffectiveVacancies,
   ]);
 
+  const todayDateStr = formatInTimeZone(new Date(), timezone, 'yyyy-MM-dd');
+
   // Get display range for header
   const displayRange = useMemo(() => {
     const firstDay = calendarDays[0];
@@ -1022,6 +1029,8 @@ export function Calendar({
 
   const handleDateClick = (date: Date) => {
     const dateStr = formatInTimeZone(date, timezone, 'yyyy-MM-dd');
+    if (dateStr < todayDateStr) return;
+
     const availability = dateAvailabilityMap[dateStr] || null;
 
     const allowPinnedSoldOutDate = Boolean(
@@ -1165,6 +1174,7 @@ export function Calendar({
                     const availability = dateAvailabilityMap[dateStr] || null;
                     const isSelected = selectedDate === dateStr;
                     const isCurrentMonth = day >= miniCalendarData.monthStart && day <= miniCalendarData.monthEnd;
+                    const isPast = dateStr < todayDateStr;
                     // Check if day is within allowed range (June 1 - October 12, 2026) in company timezone
                     const isInAllowedRange = day >= miniCalendarBoundsInTz.start && day <= miniCalendarBoundsInTz.end;
                     
@@ -1178,19 +1188,21 @@ export function Calendar({
                     const isAvailable =
                       hasAvailabilityData &&
                       isInAllowedRange &&
+                      !isPast &&
                       (!isSoldOut || showCapacity || allowPinnedSoldOutDate);
                     const isToday = isSameDay(day, new Date());
                     
                     const dayClass = cn(
                       styles.calendarDropdownDay,
                       !isCurrentMonth && styles.calendarDropdownDayMuted,
+                      isPast && styles.calendarDropdownDayPast,
                       isSoldOut && !showCapacity && styles.calendarDropdownDaySoldOut,
                       isSoldOut && showCapacity && styles.calendarDropdownDaySoldOutAdmin,
                       !isSoldOut && !isInAllowedRange && styles.calendarDropdownDayMuted,
                       !hasAvailabilityData && isInAllowedRange && styles.calendarDropdownDayMuted,
                       isSelected && isAvailable && styles.calendarDropdownDaySelected,
                       isAvailable && !isSelected && styles.calendarDropdownDayAvailable,
-                      isToday && isAvailable && !isSelected && styles.calendarDropdownDayToday
+                      isToday && !isPast && !isSelected && styles.calendarDropdownDayToday
                     );
                     
                     return (
@@ -1276,6 +1288,7 @@ export function Calendar({
             const availability = dateAvailabilityMap[dateStr] || null;
             const isSelected = selectedDate === dateStr;
             const isToday = isSameDay(date, new Date());
+            const isPast = dateStr < todayDateStr;
 
             // Include availability data in key to force re-render when availability changes
             const availabilityKey = availability 
@@ -1289,6 +1302,7 @@ export function Calendar({
                 availability={availability}
                 isSelected={isSelected}
                 isToday={isToday}
+                isPast={isPast}
                 showCapacity={showCapacity}
                 timezone={timezone}
                 displayMode={displayMode}

package/src/components/booking/PrivateShuttleBookingFlow.tsx

@@ -33,6 +33,10 @@ import {
 import { formatCurrencyAmount } from '../../lib/currency';
 import { formatBookingRefForDisplay } from '../../lib/booking-ref';
 import { buildCheckoutBreakdown } from '../../lib/booking/checkout-breakdown';
+import {
+  isDateAfterPublicBookingCutoff,
+  resolvePublicBookingCutoffMinutes,
+} from '../../lib/booking/booking-cutoffs';
 import type { PricingConfig, PrecomputedPricesByCategory } from '../../lib/booking-api';
 import { Calendar } from './Calendar';
 import { PickupLocationSelector } from './PickupLocationSelector';
@@ -122,6 +126,32 @@ function parseAvailabilityDateTime(value: string): Date {
   return parseISO(hasExplicitOffset ? value : `${value}Z`);
 }
 
+function privateShuttleStartDateTime(dateStr: string, timeStr: string, timezone: string): Date {
+  return fromZonedTime(parseISO(`${dateStr}T${timeStr}:00`), timezone);
+}
+
+function privateShuttleStartTimeAllowed(
+  dateStr: string,
+  timeStr: string,
+  timezone: string,
+  now: Date,
+  cutoffMinutes?: number | null,
+): boolean {
+  return isDateAfterPublicBookingCutoff(
+    privateShuttleStartDateTime(dateStr, timeStr, timezone),
+    now,
+    cutoffMinutes,
+  );
+}
+
+function privateShuttleBookingCutoffMessage(cutoffMinutes?: number | null): string {
+  const resolvedCutoffMinutes = resolvePublicBookingCutoffMinutes(cutoffMinutes);
+  if (resolvedCutoffMinutes % 60 === 0) {
+    return `Private shuttles must be booked at least ${resolvedCutoffMinutes / 60} hours before departure.`;
+  }
+  return `Private shuttles must be booked at least ${resolvedCutoffMinutes} minutes before departure.`;
+}
+
 function findMergedPrivateShuttleAvailability(
   merged: Availability[],
   sel: Availability | null,
@@ -257,6 +287,7 @@ export function PrivateShuttleBookingFlow({
   const [loading, setLoading] = useState(false);
   const [loadingAvailabilities, setLoadingAvailabilities] = useState(true);
   const [isFetchingMoreAvailabilities, setIsFetchingMoreAvailabilities] = useState(false);
+  const [bookingCutoffNowMs, setBookingCutoffNowMs] = useState(() => Date.now());
   const [error, setError] = useState('');
   const [showCheckoutModal, setShowCheckoutModal] = useState(false);
   /** Pending reservation while user is in checkout (RESERVED until confirmed/cancelled). */
@@ -355,6 +386,14 @@ export function PrivateShuttleBookingFlow({
     () => product.options?.filter((opt) => opt.status === 'ACTIVE') || [],
     [product.options]
   );
+  const bookingCutoffNow = useMemo(() => new Date(bookingCutoffNowMs), [bookingCutoffNowMs]);
+  const bookingCutoffMinutes = product.bookingCutoffMinutes ?? null;
+
+  useEffect(() => {
+    if (isAdmin) return;
+    const interval = window.setInterval(() => setBookingCutoffNowMs(Date.now()), 60 * 1000);
+    return () => window.clearInterval(interval);
+  }, [isAdmin]);
 
   // Fire view_item when product is first displayed
   const hasFiredViewItem = useRef(false);
@@ -780,9 +819,43 @@ export function PrivateShuttleBookingFlow({
     availabilitiesCache,
   ]);
 
+  const isPrivateShuttleAvailabilityBookable = useCallback(
+    (availability: Availability): boolean => {
+      if (isAdmin) return true;
+      const dateInCompanyTz = DATE_ONLY_REGEX.test(availability.dateTime)
+        ? availability.dateTime
+        : formatInTimeZone(parseAvailabilityDateTime(availability.dateTime), companyTimezone, 'yyyy-MM-dd');
+      const optionId = getPrivateShuttleAvailabilityOptionId(availability);
+      const option = activeOptions.find((opt) => opt.optionId === optionId);
+      const startTimes = availability.suggestedStartTimes || option?.privateShuttleConfig?.suggestedStartTimes || [];
+      if (startTimes.length === 0) {
+        return isDateAfterPublicBookingCutoff(
+          fromZonedTime(parseISO(`${dateInCompanyTz}T23:59:59`), companyTimezone),
+          bookingCutoffNow,
+          bookingCutoffMinutes,
+        );
+      }
+      return startTimes.some((time) =>
+        privateShuttleStartTimeAllowed(
+          dateInCompanyTz,
+          time,
+          companyTimezone,
+          bookingCutoffNow,
+          bookingCutoffMinutes,
+        ),
+      );
+    },
+    [activeOptions, bookingCutoffMinutes, bookingCutoffNow, companyTimezone, isAdmin],
+  );
+
+  const publicVisibleAvailabilities = useMemo(
+    () => (isAdmin ? availabilities : availabilities.filter(isPrivateShuttleAvailabilityBookable)),
+    [availabilities, isAdmin, isPrivateShuttleAvailabilityBookable],
+  );
+
   // Group availabilities by date (in company timezone - MDT). Availabilities from API are in UTC.
   const availabilitiesByDate = useMemo(() => {
-    const grouped = availabilities.reduce(
+    const grouped = publicVisibleAvailabilities.reduce(
       (acc, avail) => {
         const dateInCompanyTz = DATE_ONLY_REGEX.test(avail.dateTime)
           ? avail.dateTime
@@ -803,7 +876,7 @@ export function PrivateShuttleBookingFlow({
       });
     });
     return sorted;
-  }, [availabilities, companyTimezone]);
+  }, [publicVisibleAvailabilities, companyTimezone]);
 
   const optionsAvailableForSelectedDate = useMemo(() => {
     if (!selectedDate) return [];
@@ -914,8 +987,27 @@ export function PrivateShuttleBookingFlow({
     return fromZonedTime(parseISO(`${dates[0]}T12:00:00`), companyTimezone);
   }, [dates, companyTimezone]);
 
-  const suggestedStartTimes =
-    selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
+  const suggestedStartTimes = useMemo(() => {
+    const times = selectedAvailability?.suggestedStartTimes || privateShuttleConfig?.suggestedStartTimes || [];
+    if (isAdmin || !selectedDate) return times;
+    return times.filter((time) =>
+      privateShuttleStartTimeAllowed(
+        selectedDate,
+        time,
+        companyTimezone,
+        bookingCutoffNow,
+        bookingCutoffMinutes,
+      ),
+    );
+  }, [
+    bookingCutoffMinutes,
+    bookingCutoffNow,
+    companyTimezone,
+    isAdmin,
+    privateShuttleConfig?.suggestedStartTimes,
+    selectedAvailability?.suggestedStartTimes,
+    selectedDate,
+  ]);
   const resourceCount = Math.ceil(passengerCount / RESOURCE_CAPACITY);
   const maxVacancies = selectedAvailability?.vacancies || 0;
   const isSpecialRequest = passengerCount > maxVacancies;
@@ -1255,6 +1347,13 @@ export function PrivateShuttleBookingFlow({
     }
   }, [suggestedStartTimes, isCustomTimeMode, selectedStartTime]);
 
+  useEffect(() => {
+    if (isAdmin || isCustomTimeMode || !selectedStartTime) return;
+    if (!suggestedStartTimes.includes(selectedStartTime)) {
+      setSelectedStartTime('');
+    }
+  }, [isAdmin, isCustomTimeMode, selectedStartTime, suggestedStartTimes]);
+
   useEffect(() => {
     if (
       pricingConfig?.cancellationPolicies &&
@@ -1282,6 +1381,14 @@ export function PrivateShuttleBookingFlow({
   };
 
   const handleStartTimeSelect = (time: string) => {
+    if (
+      !isAdmin &&
+      selectedDate &&
+      !privateShuttleStartTimeAllowed(selectedDate, time, companyTimezone, bookingCutoffNow, bookingCutoffMinutes)
+    ) {
+      setError(privateShuttleBookingCutoffMessage(bookingCutoffMinutes));
+      return;
+    }
     setSelectedStartTime(time);
     setIsCustomTimeMode(false);
     setError('');
@@ -1465,6 +1572,19 @@ export function PrivateShuttleBookingFlow({
       setError('Please select a date, start time, and passenger count');
       return;
     }
+    if (
+      !isAdmin &&
+      !privateShuttleStartTimeAllowed(
+        selectedDate,
+        selectedStartTime,
+        companyTimezone,
+        bookingCutoffNow,
+        bookingCutoffMinutes,
+      )
+    ) {
+      setError(privateShuttleBookingCutoffMessage(bookingCutoffMinutes));
+      return;
+    }
     if (
       product.pickupLocations &&
       product.pickupLocations.length > 0 &&

package/src/data/products-config.json

@@ -113,6 +113,7 @@
       "productId": "p_urmbvZepRegd",
       "optionIds": ["po_uO9Ra6NHzwof", "po_44EQlZn24gXg", "po_vuzqpvGk6wVS", "po_nIToR7Qwau3E"],
       "productType": "PRIVATE_SHUTTLE",
+      "bookingCutoffMinutes": 2880,
       "display": {
         "path": "/private-shuttle",
         "slug": "private-tour",