@ticketboothapp/booking 1.2.189 → 1.2.190

package/src/components/booking/CancellationPolicySelector.tsx

@@ -81,26 +81,26 @@ export function CancellationPolicySelector({
               <span className={`${styles.radio} ${styles.radioSelected}`}>
                 <Check className="h-3 w-3 text-white" />
               </span>
-              <div className={styles.policyContent}>
-                <span className={styles.policyLabel}>{forcedPolicy.label}</span>
-                <span
-                  className={styles.refundTiersText}
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      formatRefundTiersSummary(forcedPolicy.refundTiers ?? [], t) ||
-                      formatNoRefundsMessage(forcedPolicy.changeWindowHoursBefore, t),
-                  }}
-                />
-                {rowSubtitle && (
-                  <span className={`${styles.refundTiersText} mt-1 block`}>
-                    {rowSubtitle}
-                  </span>
-                )}
-              </div>
+              <span className={styles.policyLabel}>{forcedPolicy.label}</span>
             </div>
-              <span className={`${styles.fee} ${styles.feeFree}`}>
+            <span className={`${styles.fee} ${styles.feeFree}`}>
               {t('booking.included') ?? 'Included'}
             </span>
+            <div className={styles.policyDetails}>
+              <span
+                className={styles.refundTiersText}
+                dangerouslySetInnerHTML={{
+                  __html:
+                    formatRefundTiersSummary(forcedPolicy.refundTiers ?? [], t) ||
+                    formatNoRefundsMessage(forcedPolicy.changeWindowHoursBefore, t),
+                }}
+              />
+              {rowSubtitle && (
+                <span className={`${styles.refundTiersText} ${styles.rowSubtitle}`}>
+                  {rowSubtitle}
+                </span>
+              )}
+            </div>
           </div>
         )}
         {!forcedPolicy && policies.map((policy) => {
@@ -121,8 +121,17 @@ export function CancellationPolicySelector({
                 <span className={`${styles.radio} ${isSelected ? styles.radioSelected : styles.radioDefault}`}>
                   {isSelected && <Check className="h-3 w-3 text-white" />}
                 </span>
-                <div className={styles.policyContent}>
-                  <span className={styles.policyLabel}>{policy.label}</span>
+                <span className={styles.policyLabel}>{policy.label}</span>
+              </div>
+              <span className={`${styles.fee} ${isFree ? styles.feeFree : styles.feePaid}`}>
+                {suppressFees
+                  ? '—'
+                  : isFree
+                    ? (t('booking.included') ?? 'Included')
+                    : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
+              </span>
+              {(refundSummary || rowSubtitle) && (
+                <div className={styles.policyDetails}>
                   {refundSummary ? (
                     <span
                       className={styles.refundTiersText}
@@ -130,19 +139,12 @@ export function CancellationPolicySelector({
                     />
                   ) : null}
                   {rowSubtitle && (
-                    <span className={`${styles.refundTiersText} mt-1 block`}>
+                    <span className={`${styles.refundTiersText} ${styles.rowSubtitle}`}>
                       {rowSubtitle}
                     </span>
                   )}
                 </div>
-              </div>
-              <span className={`${styles.fee} ${isFree ? styles.feeFree : styles.feePaid}`}>
-                {suppressFees
-                  ? '—'
-                  : isFree
-                    ? (t('booking.included') ?? 'Included')
-                    : `+${formatCurrencyAmount(fee, currency, locale as 'en' | 'fr')}`}
-              </span>
+              )}
             </button>
           );
         })}

package/src/components/booking/ChangeBookingFlow.tsx

@@ -893,6 +893,7 @@ export function ChangeBookingFlow({
       >
         <div className="mt-6 space-y-6">
           <ChangeBookingItineraryPanel
+            productId={product.productId}
             selectedDate={selectedDate}
             hideItineraryBox={hideItineraryBox}
             activeOptions={activeOptions}

package/src/components/booking/ChangeBookingItineraryPanel.tsx

@@ -13,6 +13,7 @@ import { ItineraryPlaceholder } from './ItineraryPlaceholder';
 type TranslationFn = (key: string, params?: Record<string, string>) => string;
 
 export interface ChangeBookingItineraryPanelProps {
+  productId: string;
   selectedDate: string;
   hideItineraryBox: boolean;
   activeOptions: ProductOption[];
@@ -40,6 +41,7 @@ export interface ChangeBookingItineraryPanelProps {
 }
 
 export function ChangeBookingItineraryPanel({
+  productId,
   selectedDate,
   hideItineraryBox,
   activeOptions,
@@ -94,6 +96,7 @@ export function ChangeBookingItineraryPanel({
 
   return (
     <ItineraryBox
+      productId={productId}
       selectedDate={selectedDate}
       formattedDate={formattedDate}
       itineraryItems={itineraryItems}

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

@@ -34,7 +34,7 @@
   flex: 1;
   font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif !important;
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1.35;
   color: var(--booking-stone-900, #1c1917) !important;
 }

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

@@ -186,6 +186,20 @@
   font-size: 0.75rem;
 }
 
+.compactStopRange {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.compactStopRangeTime {
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-weight: 700;
+  color: var(--booking-stone-900, #1c1917);
+}
+
 @media (min-width: 640px) {
   .itemSticky {
     font-size: 0.875rem;

package/src/components/booking/ItineraryBox.tsx

@@ -13,6 +13,63 @@ import styles from './ItineraryBox.module.css';
 type TranslationFn = (key: string, params?: Record<string, string>) => string;
 
 const TOOLTIP_TEXT = 'Approximate time - will be finalized when you select a pickup location';
+const BIG_3_LAKES_PRODUCT_ID = 'p_C5jHohBUCwrd';
+
+type ItineraryRenderEntry = {
+  item: ItineraryDisplayStep;
+  sourceIndex: number;
+  rangeEndTime?: string;
+};
+
+function formatItineraryTime(time: string): string {
+  return time
+    .replace(/^at /i, '')
+    .replace(/:00(?=\s*(AM|PM))/i, '');
+}
+
+function formatCompactStopTimeRange(startTime: string, endTime: string): string {
+  const start = formatItineraryTime(startTime);
+  const end = formatItineraryTime(endTime);
+  const startMatch = start.match(/^(.+?)\s*(AM|PM)$/i);
+  const endMatch = end.match(/^(.+?)\s*(AM|PM)$/i);
+
+  if (startMatch && endMatch && startMatch[2].toUpperCase() === endMatch[2].toUpperCase()) {
+    return `${startMatch[1]} - ${endMatch[1]} ${endMatch[2].toUpperCase()}`;
+  }
+  return `${start} - ${end}`;
+}
+
+function buildCompactStickyItinerary(items: ItineraryDisplayStep[]): ItineraryRenderEntry[] {
+  const entries: ItineraryRenderEntry[] = [];
+
+  for (let index = 0; index < items.length; index += 1) {
+    const item = items[index];
+    const next = items[index + 1];
+    const place = item.place?.trim().toLowerCase();
+    const nextPlace = next?.place?.trim().toLowerCase();
+    const hasDefiniteRange =
+      item.time &&
+      next?.time &&
+      item.time.toUpperCase() !== 'TBD' &&
+      next.time.toUpperCase() !== 'TBD';
+
+    if (
+      item.stepType === StepType.arrive &&
+      next?.stepType === StepType.depart &&
+      place &&
+      place === nextPlace &&
+      hasDefiniteRange
+    ) {
+      entries.push({ item, sourceIndex: index, rangeEndTime: next.time });
+      index += 1;
+      continue;
+    }
+
+    entries.push({ item, sourceIndex: index });
+  }
+
+  return entries;
+}
 
 function TooltipAnchor({
   showTooltip,
@@ -107,6 +164,7 @@ function TooltipAnchor({
 }
 
 interface ItineraryBoxProps {
+  productId: string;
   selectedDate: string;
   formattedDate: string;
   itineraryItems: ItineraryDisplayStep[] | null;
@@ -127,6 +185,7 @@ interface ItineraryBoxProps {
 }
 
 export function ItineraryBox({
+  productId,
   selectedDate,
   formattedDate,
   itineraryItems,
@@ -134,7 +193,6 @@ export function ItineraryBox({
   isItinerarySticky,
   stickyTopPx = 0,
   isMobile,
-  useWindowScroll = false,
   showTooltip,
   selectedPickupLocation,
   pickupLocationSkipped,
@@ -178,6 +236,10 @@ export function ItineraryBox({
   };
 
   const stickyTop = Math.max(0, stickyTopPx ?? 0);
+  const useCompactBig3Itinerary = productId === BIG_3_LAKES_PRODUCT_ID;
+  const itineraryEntries: ItineraryRenderEntry[] = useCompactBig3Itinerary
+    ? buildCompactStickyItinerary(itineraryItems)
+    : itineraryItems.map((item, sourceIndex) => ({ item, sourceIndex }));
 
   return (
     <div
@@ -196,9 +258,9 @@ export function ItineraryBox({
           <span className={styles.dateSubtitle}> · {formattedDate}</span>
         )}
       </h3>
-      {itineraryItems.length > 0 && (
+      {itineraryEntries.length > 0 && (
         <div className={isItinerarySticky ? styles.itemsSticky : styles.itemsExpanded}>
-          {itineraryItems.map((item, index) => {
+          {itineraryEntries.map(({ item, sourceIndex: index, rangeEndTime }, displayIndex) => {
             const itemLabel = getStepLabel(item, t);
             const isUncertain =
               !item.time ||
@@ -212,8 +274,7 @@ export function ItineraryBox({
 
             let formattedTime = '';
             if (item.time) {
-              formattedTime = item.time.replace(/^at /i, '');
-              formattedTime = formattedTime.replace(/:00(?=\s*(AM|PM))/i, '');
+              formattedTime = formatItineraryTime(item.time);
             }
 
             const isUncertainPickupOrDropOff =
@@ -224,7 +285,14 @@ export function ItineraryBox({
             const prefixKey =
               item.stepType === StepType.pickup ? 'booking.pickupAtPrefix' : 'booking.dropOffAtPrefix';
 
-            const content = (
+            const content = rangeEndTime ? (
+              <span className={styles.compactStopRange}>
+                <span className={styles.compactStopRangeTime}>
+                  {formatCompactStopTimeRange(item.time, rangeEndTime)}
+                </span>
+                <span className="text-stone-600">{item.place ?? itemLabel}</span>
+              </span>
+            ) : (
               <>
                 {hasTime ? (
                   <span className="inline-flex items-center gap-1.5 flex-wrap">
@@ -302,7 +370,7 @@ export function ItineraryBox({
               return (
                 <span key={index} className={`${styles.item} ${styles.itemSticky}`}>
                   {content}
-                  {index < itineraryItems.length - 1 && (
+                  {displayIndex < itineraryEntries.length - 1 && (
                     <span className={styles.separator}>
                       <svg className="w-3 h-3 sm:w-4 sm:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -5,6 +5,7 @@ import { formatCurrencyAmount } from '../../lib/currency';
 import type { AddOn, AddOnVariant } from '../../lib/booking-api';
 import type { Currency } from './CurrencySwitcher';
 import type { Locale } from '../../lib/booking/i18n/config';
+import styles from './AddOnsSection.module.css';
 
 export interface AddOnSelection {
   addOnId: string;
@@ -229,7 +230,6 @@ export function MealDrinkAddOnSelector({
   const price = addOn.price ?? 0;
   const totalStep1 = Object.values(step1Counts).reduce((a, b) => a + b, 0);
   const totalStep2 = Object.values(step2Counts).reduce((a, b) => a + b, 0);
-  const step1Ids = parsed.step1Options.map((o) => o.id);
   const step2Ids = parsed.step2Options.map((o) => o.id);
 
   return (
@@ -255,19 +255,12 @@ export function MealDrinkAddOnSelector({
               const qty = step1Counts[opt.id] ?? 0;
               const canDecrementTotal = totalStep1 > minimumTotal;
               return (
-                <div key={opt.id} className="flex flex-wrap items-center gap-3 p-3 bg-stone-50 rounded-lg">
-                  <span className="min-w-0 flex-1">
-                    <span className="block font-medium text-stone-800">{opt.label}</span>
-                    {opt.description ? (
-                      <span className="mt-0.5 block text-xs font-normal leading-snug text-stone-500">
-                        {opt.description}
-                      </span>
-                    ) : null}
-                  </span>
-                  <span className="text-sm text-stone-500 shrink-0">
+                <div key={opt.id} className={styles.optionRow}>
+                  <span className={`${styles.optionLabel} font-medium`}>{opt.label}</span>
+                  <span className={styles.optionPrice}>
                     {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale)} ea`}
                   </span>
-                  <div className="flex items-center gap-1 shrink-0">
+                  <div className={`${styles.optionControls} !gap-1`}>
                     <button
                       type="button"
                       onClick={() => {
@@ -307,6 +300,11 @@ export function MealDrinkAddOnSelector({
                       +
                     </button>
                   </div>
+                  {opt.description ? (
+                    <span className={styles.optionDescription}>
+                      {opt.description}
+                    </span>
+                  ) : null}
                 </div>
               );
             })}

package/src/components/booking/NewBookingFlow.tsx

@@ -891,6 +891,7 @@ export function NewBookingFlow({
           {/* Form sections - equal spacing between each */}
           <div className="mt-6 space-y-6">
           <StandardBookingItineraryPanel
+            productId={product.productId}
             selectedDate={selectedDate}
             hideItineraryBox={hideItineraryBox}
             activeOptions={activeOptions}

package/src/components/booking/PrivateShuttlePassengerSection.tsx

@@ -39,7 +39,13 @@ export function PrivateShuttlePassengerSection({
         Number of Passengers
       </label>
       <div className={styles.passengerBox}>
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div
+          className={
+            isSpecialRequestMode
+              ? 'flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'
+              : 'flex items-center justify-between gap-4'
+          }
+        >
           <div>
             <div className="font-medium text-stone-900">Passengers</div>
             <div className="text-sm text-stone-600">

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

@@ -100,13 +100,17 @@
 }
 
 .content {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
   align-items: center;
-  justify-content: space-between;
+  column-gap: 1rem;
 }
 
 .details {
-  flex: 1;
+  min-width: 0;
+  grid-column: 1;
+  grid-row: 1;
 }
 
 .time {
@@ -141,6 +145,8 @@
 }
 
 .staySummary {
+  grid-column: 1;
+  grid-row: 2;
   font-size: 0.75rem;
   color: var(--booking-stone-500, #78716c);
   margin-top: 0.25rem;
@@ -155,9 +161,22 @@
 }
 
 .price {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
   font-size: 0.875rem;
   font-weight: 600;
-  margin-left: 1rem;
+  white-space: nowrap;
+}
+
+@media (max-width: 639px) {
+  .staySummary {
+    grid-column: 1 / -1;
+  }
+
+  .price {
+    grid-row: 1;
+  }
 }
 
 .priceIncluded {

package/src/components/booking/ReturnTimeSelector.tsx

@@ -115,11 +115,6 @@ export function ReturnTimeSelector({
                       {t('calendar.spotsAvailable', { count: returnVacancies })}
                     </div>
                   ))}
-                  {staySummary && (
-                    <div className={styles.staySummary}>
-                      {staySummary}
-                    </div>
-                  )}
                   {isSoldOut && (
                     <div className={styles.soldOut}>
                       {t('booking.soldOut')}
@@ -142,6 +137,11 @@ export function ReturnTimeSelector({
                     `${formatCurrencyAmount(priceAdjustmentPerPerson, currency, locale as 'en' | 'fr')} per person`
                   )}
                 </div>
+                {staySummary && (
+                  <div className={styles.staySummary}>
+                    {staySummary}
+                  </div>
+                )}
               </div>
             </button>
           );

package/src/components/booking/StandardBookingItineraryPanel.tsx

@@ -14,6 +14,7 @@ import { ItineraryPlaceholder } from './ItineraryPlaceholder';
 type TranslationFn = (key: string, params?: Record<string, string>) => string;
 
 export interface StandardBookingItineraryPanelProps {
+  productId: string;
   selectedDate: string;
   hideItineraryBox: boolean;
   activeOptions: ProductOption[];
@@ -42,6 +43,7 @@ export interface StandardBookingItineraryPanelProps {
 }
 
 export function StandardBookingItineraryPanel({
+  productId,
   selectedDate,
   hideItineraryBox,
   activeOptions,
@@ -104,6 +106,7 @@ export function StandardBookingItineraryPanel({
 
   return (
     <ItineraryBox
+      productId={productId}
       selectedDate={selectedDate}
       formattedDate={formattedDate}
       itineraryItems={itineraryItems}

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

@@ -24,14 +24,22 @@
 }
 
 .row {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
   align-items: center;
-  justify-content: space-between;
+  column-gap: 1rem;
   padding: 1rem;
   background: var(--booking-stone-50, #fafaf9);
   border-radius: 0.5rem;
 }
 
+.summary {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+}
+
 .category {
   font-weight: 500;
   color: var(--booking-stone-900, #1c1917);
@@ -50,11 +58,12 @@
 }
 
 .finePrint {
+  grid-column: 1 / -1;
+  grid-row: 2;
   margin-top: 0.25rem;
   font-size: 0.7rem;
   line-height: 1.3;
   color: var(--booking-stone-500, #78716c);
-  max-width: 16rem;
 }
 
 .priceStrikethrough {
@@ -68,11 +77,29 @@
 }
 
 .controls {
+  grid-column: 2;
+  grid-row: 1;
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
+@media (max-width: 639px) {
+  .row {
+    row-gap: 0.75rem;
+  }
+
+  .finePrint {
+    margin-top: 0;
+    font-size: 0.75rem;
+    line-height: 1.375;
+  }
+
+  .controls {
+    grid-row: 1;
+  }
+}
+
 .qtyBtn {
   width: 2.5rem;
   height: 2.5rem;

package/src/components/booking/TicketSelector.tsx

@@ -142,7 +142,7 @@ export function TicketSelector({
 
           return (
             <div key={rate.category} className={styles.row}>
-              <div>
+              <div className={styles.summary}>
                 <p className={styles.category}>
                   {rate.category}
                   {rate.category === 'CHILD' && (
@@ -169,11 +169,6 @@ export function TicketSelector({
                     formatCurrencyAmount(effectiveUnitPrice, currency, locale as 'en' | 'fr')
                   )}
                 </p>
-                {ticketFinePrintByCategory?.[rate.category] && (
-                  <p className={styles.finePrint}>
-                    {ticketFinePrintByCategory[rate.category]}
-                  </p>
-                )}
               </div>
               <div className={styles.controls}>
                 <button
@@ -195,6 +190,11 @@ export function TicketSelector({
                   +
                 </button>
               </div>
+              {ticketFinePrintByCategory?.[rate.category] && (
+                <p className={styles.finePrint}>
+                  {ticketFinePrintByCategory[rate.category]}
+                </p>
+              )}
             </div>
           );
         })}

package/src/hooks/useIsBookingLaunchLive.ts

@@ -15,7 +15,10 @@ import { BOOKING_LAUNCH_AT } from '../lib/booking-constants';
  * forces the flow for local testing (e.g. localhost:3000/?booking_preview=partial).
  */
 export function useIsBookingLaunchLive(): boolean {
-  const [isLive, setIsLive] = useState(false);
+  // Match the server-rendered HTML to the current launch state. Starting with
+  // `false` caused expired pre-launch messaging to remain in crawlable HTML
+  // until JavaScript hydrated the page.
+  const [isLive, setIsLive] = useState(() => Date.now() >= BOOKING_LAUNCH_AT.getTime());
 
   useEffect(() => {
     // Dev override for local testing

package/src/lib/booking/i18n/messages/en.json

@@ -199,7 +199,9 @@
     "paxBooked": "{count} pax booked",
     "paxProgress": "{booked}/{minimum} pax",
     "minimumReached": "minimum reached!",
+    "minimumReachedShort": "minimum met",
     "available": "Available",
+    "open": "Open",
     "days": {
       "sun": "SUN",
       "mon": "MON",

package/src/lib/booking/i18n/messages/fr.json

@@ -199,7 +199,9 @@
     "paxBooked": "{count} pax inscrits",
     "paxProgress": "{booked}/{minimum} pax",
     "minimumReached": "minimum atteint!",
+    "minimumReachedShort": "minimum atteint",
     "available": "Disponible",
+    "open": "Ouvert",
     "days": {
       "sun": "DIM",
       "mon": "LUN",

package/src/lib/booking-constants.ts

@@ -19,5 +19,5 @@ export const MINI_CALENDAR_END_DATE = new Date(2026, 9, 12); // October 12, 2026
 // Buffer weeks before/after visible range
 export const VISIBLE_RANGE_BUFFER_WEEKS = 2;
 
-/** 8am MDT Mar 11, 2025 – full booking flow becomes available at this moment (UTC). */
+/** 8am MDT Mar 11, 2026 – full booking flow becomes available at this moment (UTC). */
 export const BOOKING_LAUNCH_AT = new Date('2026-03-11T14:00:00.000Z');