@ticketboothapp/booking 1.2.189 → 1.2.191

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticketboothapp/booking",
-  "version": "1.2.189",
+  "version": "1.2.191",
   "private": false,
   "sideEffects": [
     "**/*.css",
@@ -12,6 +12,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./background-video": "./src/components/BackgroundVideo.tsx",
+    "./terms-content": "./src/components/booking/DefaultTermsContent.tsx",
     "./booking-flow.css": "./src/components/booking/booking-flow.css",
     "./runtime": "./src/runtime/index.ts",
     "./contexts/booking-app-context": "./src/contexts/BookingAppContext.tsx",
@@ -21,6 +22,7 @@
     "./hooks/useBookingSourceMetadataFromLocation": "./src/hooks/useBookingSourceMetadataFromLocation.ts",
     "./hooks/useIsBookingLaunchLive": "./src/hooks/useIsBookingLaunchLive.ts",
     "./hooks/usePlacesAutocompleteSearch": "./src/hooks/usePlacesAutocompleteSearch.ts",
+    "./pickup-location-disclaimer": "./src/lib/booking/pickup-location-disclaimer.ts",
     "./viavia/catalog": "./src/constants/products.ts",
     "./viavia/images": "./src/constants/images.ts",
     "./viavia/product-descriptions": "./src/lib/product-descriptions.ts",

package/src/components/BackgroundVideo.tsx

@@ -20,6 +20,7 @@ export interface BackgroundVideoProps
   poster?: string;
   preload?: 'auto' | 'metadata' | 'none';
   loading?: BackgroundVideoLoading;
+  viewportMargin?: string;
   className?: string;
   style?: CSSProperties;
 }
@@ -41,6 +42,7 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
       poster,
       preload,
       loading = 'viewport',
+      viewportMargin = '300px 0px',
       className,
       style,
       autoPlay = true,
@@ -80,11 +82,11 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
           if (entry.isIntersecting) setShouldLoad(true);
           setShouldPlay(entry.isIntersecting);
         },
-        { rootMargin: '300px 0px' },
+        { rootMargin: viewportMargin },
       );
       observer.observe(container);
       return () => observer.disconnect();
-    }, [loading]);
+    }, [loading, viewportMargin]);
 
     useEffect(() => {
       const video = videoRef.current;
@@ -100,6 +102,7 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
         style={{ width: '100%', height: '100%', display: 'grid', ...style }}
       >
         <video
+          key={shouldLoad ? `${webm ?? ''}|${src}` : 'deferred'}
           {...videoProps}
           ref={setVideoRef}
           className="next-video-bg-video"
@@ -107,7 +110,7 @@ export const BackgroundVideo = forwardRef<HTMLVideoElement, BackgroundVideoProps
           muted={muted}
           loop={loop}
           playsInline={playsInline}
-          poster={poster}
+          poster={shouldLoad ? poster : undefined}
           preload={shouldLoad ? (preload ?? (loading === 'eager' ? 'auto' : 'metadata')) : 'none'}
           style={{
             gridArea: '1 / 1',

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

@@ -1,7 +1,7 @@
 .section {
   padding-top: 1.5rem;
   margin-top: 1.5rem;
-  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4) !important;
 }
 
 .items {
@@ -39,3 +39,131 @@
   line-height: 1.5;
   color: var(--booking-stone-500, #78716c);
 }
+
+.optionRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  padding: 0.75rem;
+  background: var(--booking-stone-50, #fafaf9);
+  border-radius: 0.5rem;
+}
+
+.optionLabel {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  color: var(--booking-stone-800, #292524);
+}
+
+.optionPrice {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
+  flex-shrink: 0;
+  font-size: 0.875rem;
+  color: var(--booking-stone-500, #78716c);
+  white-space: nowrap;
+}
+
+.optionControls {
+  grid-column: 3;
+  grid-row: 1 / 3;
+  align-self: center;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.quantityButton {
+  border: 1px solid var(--booking-stone-300, #d6d3d1) !important;
+}
+
+.optionDescription {
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.375;
+  color: var(--booking-stone-500, #78716c);
+}
+
+.choiceRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  width: 100%;
+  padding: 0.75rem;
+  border-width: 2px !important;
+  border-radius: 0.5rem;
+  text-align: left;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.choiceLabel {
+  grid-column: 1;
+  grid-row: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-800, #292524);
+}
+
+.choicePrice {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  align-self: center;
+  font-size: 0.875rem;
+  color: var(--booking-stone-500, #78716c);
+  white-space: nowrap;
+}
+
+.choiceDescription {
+  grid-column: 1;
+  grid-row: 2;
+  min-width: 0;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.375;
+  color: var(--booking-stone-500, #78716c);
+}
+
+@media (max-width: 639px) {
+  .optionRow {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto auto auto;
+  }
+
+  .optionPrice {
+    grid-column: 1;
+    grid-row: 2;
+    justify-self: start;
+  }
+
+  .optionControls {
+    grid-column: 2;
+    grid-row: 1 / 3;
+  }
+
+  .optionDescription {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    margin-top: 0.125rem;
+  }
+
+  .choiceDescription {
+    grid-column: 1 / -1;
+    margin-top: 0.125rem;
+  }
+
+  .choicePrice {
+    grid-row: 1;
+  }
+}

package/src/components/booking/AddOnsSection.tsx

@@ -94,7 +94,7 @@ export function AddOnsSection({
                         });
                       }}
                       disabled={!canDecrement}
-                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-sm text-stone-600 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50"
+                      className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-sm text-stone-600 hover:bg-stone-50 disabled:cursor-not-allowed disabled:opacity-50`}
                     >
                       −
                     </button>
@@ -107,7 +107,7 @@ export function AddOnsSection({
                           return [...rest, { addOnId: addOn.addOnId, quantity: quantity + 1 }];
                         });
                       }}
-                      className="h-8 w-8 rounded-full border border-stone-300 bg-white text-sm text-stone-600 hover:bg-stone-50"
+                      className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-sm text-stone-600 hover:bg-stone-50`}
                     >
                       +
                     </button>
@@ -159,19 +159,12 @@ export function AddOnsSection({
                     const canDecrement = qty > 0 && currentTotalForAddOn > minTotalForAddOn;
                     const price = (addOn.price ?? 0) + (variant.priceAdjustment ?? 0);
                     return (
-                      <div key={variant.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 text-sm text-stone-800">{variant.label}</span>
-                          {variant.description?.trim() ? (
-                            <span className="mt-0.5 block text-xs leading-snug text-stone-500">
-                              {variant.description.trim()}
-                            </span>
-                          ) : null}
-                        </span>
-                        <span className="text-sm text-stone-500 shrink-0">
+                      <div key={variant.id} className={styles.optionRow}>
+                        <span className={styles.optionLabel}>{variant.label}</span>
+                        <span className={styles.optionPrice}>
                           {suppressPrices ? '—' : `${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')} ea`}
                         </span>
-                        <div className="flex items-center gap-2 shrink-0">
+                        <div className={styles.optionControls}>
                           <button
                             type="button"
                             onClick={() => {
@@ -193,7 +186,7 @@ export function AddOnsSection({
                               });
                             }}
                             disabled={!canDecrement}
-                            className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                            className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-stone-600 hover:bg-stone-50 disabled:opacity-50 disabled:cursor-not-allowed text-sm`}
                           >
                             −
                           </button>
@@ -215,11 +208,16 @@ export function AddOnsSection({
                                 ];
                               });
                             }}
-                            className="h-8 w-8 rounded-full border border-stone-300 bg-white text-stone-600 hover:bg-stone-50 text-sm"
+                            className={`${styles.quantityButton} h-8 w-8 rounded-full bg-white text-stone-600 hover:bg-stone-50 text-sm`}
                           >
                             +
                           </button>
                         </div>
+                        {variant.description?.trim() ? (
+                          <span className={styles.optionDescription}>
+                            {variant.description.trim()}
+                          </span>
+                        ) : null}
                       </div>
                     );
                   })}
@@ -261,23 +259,21 @@ export function AddOnsSection({
                             ];
                           });
                         }}
-                        className={`flex items-center justify-between w-full p-3 rounded-lg border-2 text-left transition-colors ${
+                        className={`${styles.choiceRow} ${
                           isSelected
                             ? 'border-emerald-500 bg-emerald-50'
                             : 'border-stone-200 bg-stone-50 hover:border-stone-300'
                         }`}
                       >
-                        <span className="min-w-0 flex-1">
-                          <span className="block text-sm font-medium text-stone-800">{variant.label}</span>
-                          {variant.description?.trim() ? (
-                            <span className="mt-0.5 block text-xs font-normal leading-snug text-stone-500">
-                              {variant.description.trim()}
-                            </span>
-                          ) : null}
-                        </span>
-                        <span className="text-sm text-stone-500">
+                        <span className={styles.choiceLabel}>{variant.label}</span>
+                        <span className={styles.choicePrice}>
                           {suppressPrices ? '—' : `+${formatCurrencyAmount(price, currency, locale as 'en' | 'fr')}`}
                         </span>
+                        {variant.description?.trim() ? (
+                          <span className={styles.choiceDescription}>
+                            {variant.description.trim()}
+                          </span>
+                        ) : null}
                       </button>
                     );
                   })}

package/src/components/booking/AdminChangeBookingContent.tsx

@@ -86,6 +86,7 @@ const calendarPropKeys = [
 ] as const;
 
 const itineraryPropKeys = [
+  'productId',
   'selectedDate',
   'hideItineraryBox',
   'activeOptions',

package/src/components/booking/AdminChangeBookingFlow.tsx

@@ -1238,6 +1238,7 @@ export function AdminChangeBookingFlow({
             ? getCalendarEffectiveOutboundVacancies
             : undefined,
         hideItineraryBox, activeOptions,
+        productId: product.productId,
         destinationsCount: product.destinations?.length ?? 0, pickupLocationsCount: product.pickupLocations?.length ?? 0,
         getItineraryItems: computeItineraryDisplay,
         ...{ isItinerarySticky, isMobile, showTooltip, selectedPickupLocation, itineraryRef },

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

@@ -0,0 +1,16 @@
+@media (max-width: 639px) {
+  .receiptTitle {
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+  }
+
+  .amountDueLabel {
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+  }
+
+  .amountDueValue {
+    font-size: 1rem !important;
+    line-height: 1.25rem !important;
+  }
+}

package/src/components/booking/AdminChangeReceiptComparison.tsx

@@ -9,6 +9,7 @@ import type { Locale } from '../../lib/booking/i18n/config';
 import type { ChangeBookingFlowProps } from './booking-flow-types';
 import type { Currency } from './CurrencySwitcher';
 import { PriceSummary, type PriceSummaryLine } from './PriceSummary';
+import styles from './AdminChangeReceiptComparison.module.css';
 import { collapseAdminPromoLines } from './admin-change-receipt-lines';
 import type { AdminCustomReceiptLine } from './useAdminCustomReceiptLines';
 import {
@@ -74,6 +75,8 @@ export interface AdminChangeReceiptComparisonProps {
   }) => void;
   preserveExistingReceipt?: boolean;
   onPreserveExistingReceiptChange?: (preserve: boolean) => void;
+  /** Use denser, wrapping receipt typography in the public mobile change flow. */
+  compactMobile?: boolean;
 }
 
 function normalizeLocale(locale: string): Locale {
@@ -132,6 +135,7 @@ export function AdminChangeReceiptComparison({
   onSetReceiptLineOverride,
   preserveExistingReceipt = false,
   onPreserveExistingReceiptChange,
+  compactMobile = false,
 }: AdminChangeReceiptComparisonProps) {
   const [overrideDrafts, setOverrideDrafts] = useState<Record<string, string>>({});
   useEffect(() => {
@@ -344,7 +348,9 @@ export function AdminChangeReceiptComparison({
       <div className="grid gap-4 md:grid-cols-2">
         <section className="min-w-0 overflow-visible rounded-lg border border-stone-200 bg-stone-50/70 p-3">
           <div className="mb-3 flex items-center justify-between gap-3">
-            <h3 className="text-sm font-semibold text-stone-900">Existing purchase</h3>
+            <h3 className={`${compactMobile ? styles.receiptTitle : ''} text-sm font-semibold text-stone-900`}>
+              Existing purchase
+            </h3>
             <span className="shrink-0 text-xs font-medium text-stone-500">
               {formatCurrencyAmount(originalReceipt.total, originalCurrency, displayLocale)}
             </span>
@@ -358,6 +364,7 @@ export function AdminChangeReceiptComparison({
             taxAmount={hasTaxLine(existingLines) ? 0 : originalReceipt.tax}
             taxRate={taxRate}
             size="sm"
+            compactMobileTotal={compactMobile}
             t={t}
           />
         </section>
@@ -365,7 +372,7 @@ export function AdminChangeReceiptComparison({
         <section className="min-w-0 overflow-visible rounded-lg border border-sky-200 bg-sky-50/50 p-3">
           <div className="mb-3">
             <div>
-              <h3 className="text-sm font-semibold text-stone-900">
+              <h3 className={`${compactMobile ? styles.receiptTitle : ''} text-sm font-semibold text-stone-900`}>
                 {isProductFamilyConversion ? 'New purchase' : 'Current change'}
               </h3>
               {isProductFamilyConversion ? (
@@ -436,6 +443,7 @@ export function AdminChangeReceiptComparison({
                 locale={displayLocale}
                 subtotal={summarySubtotal}
                 size="sm"
+                compactMobileTotal={compactMobile}
                 t={t}
                 lineAmountInputs={preserveExistingReceipt ? undefined : { ...quotedOverrideAmountInputs, ...overrideDrafts }}
                 onLineAmountInputChange={preserveExistingReceipt ? undefined : handleOverrideChange}
@@ -538,8 +546,10 @@ export function AdminChangeReceiptComparison({
       ) : null}
 
       <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-stone-200 bg-stone-50 px-3 py-2">
-        <span className="text-sm font-semibold text-stone-900">{amountDueLabel}</span>
-        <span className={`text-lg font-semibold tabular-nums ${amountDueClass}`}>
+        <span className={`${compactMobile ? styles.amountDueLabel : ''} text-sm font-semibold text-stone-900`}>
+          {amountDueLabel}
+        </span>
+        <span className={`${compactMobile ? styles.amountDueValue : ''} text-lg font-semibold tabular-nums ${amountDueClass}`}>
           {!selectionChanged || displayedSettlementAmount == null
             ? '—'
             : formatCurrencyAmount(displayedSettlementAmount, currency, displayLocale)}

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

@@ -109,6 +109,49 @@
   padding: 1.25rem;
 }
 
+.bookingCompareSticky {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  margin-bottom: 0.75rem;
+  width: 100%;
+  border-radius: 1rem;
+  padding: 0.5rem 0;
+  background: var(--light-orange-background);
+}
+
+.mobileCompareDigestContainer {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .bookingCompareSticky {
+    z-index: 20;
+    max-height: calc(90vh - 4.5rem);
+    max-height: calc(90dvh - 4.5rem);
+    overflow: hidden;
+  }
+
+  .mobileCompareDigestContainer {
+    display: block;
+  }
+
+  .bookingCompareDetails {
+    max-height: calc(90vh - 11rem);
+    max-height: calc(90dvh - 11rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-radius: 0 0 1rem 1rem;
+    padding: 0 0.25rem 0.25rem;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .bookingCompareDetails :global(.booking-change-summary-column) {
+    border-radius: 0 0 0.75rem 0.75rem;
+    background: transparent;
+  }
+}
+
 @media (min-width: 768px) {
   .dialog {
     max-width: 960px;

package/src/components/booking/BookingFlowCollage.tsx

@@ -4,6 +4,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { BackgroundVideo } from '../BackgroundVideo';
 import type { VideoSources } from '../../constants/products';
+import type { BackgroundVideoLoading } from '../BackgroundVideo';
 import { resolvePublicAssetUrl, useBookingHost } from '../../runtime';
 import { useTranslations } from '../../lib/booking/i18n';
 import styles from './BookingFlowCollage.module.css';
@@ -17,6 +18,17 @@ export interface BookingFlowCollageProps {
   imageIds: string[];
   /** Alt text prefix for images (e.g. product name) */
   altPrefix?: string;
+  /** Descriptive alt text matching imageIds. Falls back to numbered labels. */
+  imageAlts?: string[];
+  /** Responsive slot widths for the one- and two-column gallery cells. */
+  imageSizes?: {
+    narrow: string;
+    wide: string;
+  };
+  /** Defer loading when the collage appears below the fold. */
+  videoLoading?: BackgroundVideoLoading;
+  /** Browser preload hint once the video is eligible to load. */
+  videoPreload?: 'auto' | 'metadata' | 'none';
 }
 
 const DEFAULT_VIDEO: VideoSources = {
@@ -24,25 +36,36 @@ const DEFAULT_VIDEO: VideoSources = {
   webm: '/videos/via-via-moraine-lake-tour-video.webm',
 };
 
+// The first and fourth cells occupy one grid column; the middle cells occupy
+// two. Accurate slot hints prevent small thumbnails from selecting full-width
+// gallery assets while retaining enough resolution for high-density displays.
+const NARROW_IMAGE_SIZES = '(max-width: 640px) 29vw, 300px';
+const WIDE_IMAGE_SIZES = '(max-width: 640px) 59vw, 560px';
+const DEFAULT_IMAGE_SIZES = {
+  narrow: NARROW_IMAGE_SIZES,
+  wide: WIDE_IMAGE_SIZES,
+};
+
 export function BookingFlowCollage({
   video,
   videoPosterImageId,
   imageIds,
   altPrefix = 'Tour',
+  imageAlts,
+  imageSizes = DEFAULT_IMAGE_SIZES,
+  videoLoading = 'eager',
+  videoPreload = 'auto',
 }: BookingFlowCollageProps) {
   const { catalog, slots, env } = useBookingHost();
   const ViaViaImage = slots.Image;
   const ImageModal = slots.ImageModal;
   const videoSrc = video ?? DEFAULT_VIDEO;
-  // Use long version in BookingFlow when available; fall back to short
-  const videoForCollageRaw =
-    videoSrc.longSrc && videoSrc.longWebm
-      ? { src: videoSrc.longSrc, webm: videoSrc.longWebm }
-      : { src: videoSrc.src, webm: videoSrc.webm };
-  const videoForCollage = {
-    src: resolvePublicAssetUrl(env.STATIC_ASSET_ORIGIN, videoForCollageRaw.src),
-    webm: resolvePublicAssetUrl(env.STATIC_ASSET_ORIGIN, videoForCollageRaw.webm),
-  };
+  // Use the MP4 here because these videos include an audio track, while the
+  // WebM variants are silent background-video encodes.
+  const videoForCollageSrc = resolvePublicAssetUrl(
+    env.STATIC_ASSET_ORIGIN,
+    videoSrc.longSrc ?? videoSrc.src,
+  );
   const posterUrl =
     videoPosterImageId && catalog.getImageUrl
       ? String(catalog.getImageUrl(videoPosterImageId))
@@ -91,10 +114,13 @@ export function BookingFlowCollage({
   const handleToggleMute = useCallback(() => {
     const el = videoRef.current;
     if (!el) return;
-    el.muted = !el.muted;
+    const nextMuted = !el.muted;
+    el.muted = nextMuted;
+    setIsMuted(nextMuted);
   }, []);
 
-  const imageItems = gridImages.map((id, i) => ({ id, alt: `${altPrefix} - ${i + 1}` }));
+  const getAlt = (i: number) => imageAlts?.[i] ?? `${altPrefix} - ${i + 1}`;
+  const imageItems = gridImages.map((id, i) => ({ id, alt: getAlt(i) }));
 
   return (
     <div className={`${styles.collage} ${!hasGridImages ? styles.videoOnly : ''}`}>
@@ -102,11 +128,11 @@ export function BookingFlowCollage({
         <div className={styles.videoWrapper}>
           <BackgroundVideo
             ref={videoRef}
-            {...videoForCollage}
-            loading="eager"
-            preload="auto"
+            src={videoForCollageSrc}
+            loading={videoLoading}
+            preload={videoPreload}
             autoPlay
-            muted
+            muted={isMuted}
             loop
             playsInline
             poster={posterUrl}
@@ -163,8 +189,9 @@ export function BookingFlowCollage({
             >
               <ViaViaImage
                 imageId={id}
-                alt={`${altPrefix} - ${i + 1}`}
+                alt={getAlt(i)}
                 context="GALLERY"
+                sizes={i === 0 || i === 3 ? imageSizes.narrow : imageSizes.wide}
               />
             </button>
           ))}