@ticketboothapp/booking 1.2.101 → 1.2.102

package/package.json

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

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

@@ -363,6 +363,15 @@
   padding: var(--spacing-small);
 }
 
+.dapCheckoutCheckboxQuestion label {
+  align-items: center;
+}
+
+.dapCheckoutCheckboxQuestion input[type="checkbox"] {
+  flex: 0 0 auto;
+  margin-top: 0;
+}
+
 .dapField {
   display: flex;
   flex-direction: column;

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

@@ -357,3 +357,14 @@
     left: 0.75rem;
   }
 }
+
+/* Embedded pickers (photo-first dialog): 2 columns only — default tile sizes */
+.compactRoot .grid {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (min-width: 768px) {
+  .compactRoot .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+}

package/src/components/booking/BookingProductGrid.tsx

@@ -137,6 +137,7 @@ function BookingProductTileExpanded({
   useLayoutId,
   suppressLayoutAnimation,
   isPartialLaunch,
+  selectProductLabel,
 }: {
   product: Product;
   onBook: () => void;
@@ -145,6 +146,7 @@ function BookingProductTileExpanded({
   useLayoutId: boolean;
   suppressLayoutAnimation?: boolean;
   isPartialLaunch: boolean;
+  selectProductLabel?: string;
 }) {
   const [isClosing, setIsClosing] = useState(false);
   const { locale } = useLocale();
@@ -257,7 +259,10 @@ function BookingProductTileExpanded({
             ))}
           </div>
           <div className={styles.expandedActions}>
-          <Button className={styles.bookButton} hoverColor={ButtonHoverColor.Turquoise} onClick={onBook}>{isPartialLaunch ? defaultStrings.common.moreInfo : defaultStrings.common.bookNow}</Button>
+          <Button className={styles.bookButton} hoverColor={ButtonHoverColor.Turquoise} onClick={onBook}>
+            {selectProductLabel ??
+              (isPartialLaunch ? defaultStrings.common.moreInfo : defaultStrings.common.bookNow)}
+          </Button>
           </div>
         </div>
       </div>
@@ -271,6 +276,8 @@ interface BookingProductGridProps {
   onRestoreApplied?: () => void;
   /** Pre-select a filter when opening the grid (e.g. from a theme page). */
   initialFilterId?: FilterId;
+  /** When true, hides the theme filter pills (e.g. photo-first shuttle picker). */
+  hideFilterPills?: boolean;
   /** When true, shows "More Info" instead of "Book Now" (pre-launch state). */
   isPartialLaunch?: boolean;
   /**
@@ -283,6 +290,12 @@ interface BookingProductGridProps {
    * Default false keeps expand-in-place behavior for the main booking dialog.
    */
   bookOnTileClick?: boolean;
+  /** Extra filter applied after theme filter (e.g. DAP-eligible shuttles only). */
+  productFilter?: (product: Product) => boolean;
+  /** Expanded tile CTA label when `onBookProduct` is set (default: book now / more info). */
+  selectProductLabel?: string;
+  /** Force a 2-column grid (e.g. photo-first add-on dialog); uses default tile sizing. */
+  compact?: boolean;
 }
 
 function filterProductsByFilterId(products: Product[], filterId: FilterId): Product[] {
@@ -297,9 +310,13 @@ export default function BookingProductGrid({
   restoreState,
   onRestoreApplied,
   initialFilterId,
+  hideFilterPills = false,
   isPartialLaunch = false,
   onBookProduct,
   bookOnTileClick = false,
+  productFilter,
+  selectProductLabel,
+  compact = false,
 }: BookingProductGridProps = {}) {
   const { catalog, strings: defaultStrings } = useBookingHost();
   const { push } = useBookingDialog();
@@ -340,10 +357,10 @@ export default function BookingProductGrid({
     [catalog, defaultStrings]
   );
 
-  const products = useMemo(
-    () => filterProductsByFilterId(allProducts, selectedFilterId),
-    [allProducts, selectedFilterId]
-  );
+  const products = useMemo(() => {
+    const filtered = filterProductsByFilterId(allProducts, selectedFilterId);
+    return productFilter ? filtered.filter(productFilter) : filtered;
+  }, [allProducts, selectedFilterId, productFilter]);
 
   // Collapse expanded tile if it's no longer in the filtered list
   useEffect(() => {
@@ -358,15 +375,21 @@ export default function BookingProductGrid({
   const expandedProduct =
     expandedIndex >= 0 ? products[expandedIndex] : null;
 
-  // Column count for expand-in-place logic (2 mobile, 3 desktop)
-  const [cols, setCols] = useState(3);
+  // Column count for expand-in-place logic (2 mobile, 3 desktop; compact always 2)
+  const [cols, setCols] = useState(compact ? 2 : 3);
   useEffect(() => {
+    if (compact) {
+      setCols(2);
+      return;
+    }
     const mq = window.matchMedia('(min-width: 768px)');
     const update = () => setCols(mq.matches ? 3 : 2);
     update();
     mq.addEventListener('change', update);
     return () => mq.removeEventListener('change', update);
-  }, []);
+  }, [compact]);
+
+  const useLayoutAnimations = !compact && cols === 3;
 
   // Expand in place: keep expanded tile in its row, move same-row siblings below.
   // This avoids holes and prevents the expanded tile from appearing far from the click.
@@ -487,24 +510,26 @@ export default function BookingProductGrid({
   };
 
   return (
-    <div>
-      <div className={styles.filterPillsScroll}>
-        <div className={styles.filterPills}>
-          {FILTER_IDS.map((filterId) => {
-            const isApplied = selectedFilterId === filterId;
-            return (
-              <button
-                key={filterId}
-                type="button"
-                onClick={() => setSelectedFilterId(filterId)}
-                className={`${styles.filterPill} ${isApplied ? styles.filterPillApplied : ''}`}
-              >
-                {filterLabels[filterId]}
-              </button>
-            );
-          })}
+    <div className={compact ? styles.compactRoot : undefined}>
+      {hideFilterPills ? null : (
+        <div className={styles.filterPillsScroll}>
+          <div className={styles.filterPills}>
+            {FILTER_IDS.map((filterId) => {
+              const isApplied = selectedFilterId === filterId;
+              return (
+                <button
+                  key={filterId}
+                  type="button"
+                  onClick={() => setSelectedFilterId(filterId)}
+                  className={`${styles.filterPill} ${isApplied ? styles.filterPillApplied : ''}`}
+                >
+                  {filterLabels[filterId]}
+                </button>
+              );
+            })}
+          </div>
         </div>
-      </div>
+      )}
       <div className={styles.grid}>
       <AnimatePresence mode={isRestoring ? 'sync' : 'popLayout'}>
         {productsAbove.map((product) => (
@@ -512,7 +537,7 @@ export default function BookingProductGrid({
             key={product.id}
             product={product}
             onClick={() => onCollapsedTileClick(product)}
-            useLayoutId={cols === 3}
+            useLayoutId={useLayoutAnimations}
             suppressLayoutAnimation={isRestoring}
           />
         ))}
@@ -524,9 +549,10 @@ export default function BookingProductGrid({
             onBook={() => handleBook(expandedProduct)}
             onCollapse={() => setExpandedId(null)}
             onMount={scrollExpandedToTop}
-            useLayoutId={cols === 3}
+            useLayoutId={useLayoutAnimations}
             suppressLayoutAnimation={isRestoring}
             isPartialLaunch={isPartialLaunch}
+            selectProductLabel={onBookProduct ? selectProductLabel : undefined}
           />
         )}
 
@@ -535,7 +561,7 @@ export default function BookingProductGrid({
             key={product.id}
             product={product}
             onClick={() => onCollapsedTileClick(product)}
-            useLayoutId={cols === 3}
+            useLayoutId={useLayoutAnimations}
             suppressLayoutAnimation={isRestoring}
           />
         ))}

package/src/components/booking/CancellationPolicySelector.tsx

@@ -50,6 +50,8 @@ interface CancellationPolicySelectorProps {
   rowSubtitle?: React.ReactNode;
   /** Hide +fee amounts (customer change flow until server-backed pricing). */
   suppressFees?: boolean;
+  /** Override default `booking.cancellationPolicy` section heading. */
+  sectionLabel?: string;
 }
 
 export function CancellationPolicySelector({
@@ -62,11 +64,12 @@ export function CancellationPolicySelector({
   forcedPolicy,
   rowSubtitle,
   suppressFees = false,
+  sectionLabel,
 }: CancellationPolicySelectorProps) {
   return (
     <div className={styles.wrapper}>
       <div className={styles.label}>
-        {t('booking.cancellationPolicy')}
+        {sectionLabel ?? t('booking.cancellationPolicy')}
       </div>
       <div className={styles.list}>
         {forcedPolicy && (

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

@@ -45,22 +45,127 @@
 
 .input {
   width: 100%;
-  padding: 0.875rem 1.25rem;
+  padding: 0.5rem 0.625rem;
   border-radius: 0.5rem;
   border: 1px solid var(--booking-stone-300, #d6d3d1);
-  font-size: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--booking-stone-900, #1c1917);
+  background: var(--booking-stone-50, #fafaf9);
+  box-sizing: border-box;
 }
 
 .input:focus {
   outline: none;
-  border-color: var(--booking-stone-500, #78716c);
+  border-color: var(--booking-emerald-600, #059669);
+  background: #fff;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
 }
 
 .inputError {
   font-size: 0.75rem;
   color: #b91c1c;
   margin-top: 0.375rem;
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+
+.optionalPhoneField {
+  display: flex;
+  flex-direction: column;
+}
+
+.contactFieldHint {
+  margin: 0.625rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: var(--booking-stone-500, #78716c);
+}
+
+.optionalPhoneFieldHint {
+  margin: 0;
+  padding: 0.375rem 0.5rem 0;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--booking-stone-500, #78716c);
+}
+
+.checkoutPhoneInput {
+  width: 100%;
+  --react-international-phone-height: auto;
+  --react-international-phone-border-radius: 0.5rem;
+  --react-international-phone-background-color: var(--booking-stone-50, #fafaf9);
+  --react-international-phone-border-color: var(--booking-stone-300, #d6d3d1);
+  --react-international-phone-font-size: 0.875rem;
+}
+
+/* Override site PhoneInputWithCountry (orange 2px border) — match promo / contact fields */
+.checkoutPhoneInput :global(.react-international-phone-input-container) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 0;
+  border: 1px solid var(--booking-stone-300, #d6d3d1) !important;
+  border-radius: 0.5rem !important;
+  background: var(--booking-stone-50, #fafaf9) !important;
+  box-shadow: none !important;
+  overflow: visible;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.checkoutPhoneInput:focus-within :global(.react-international-phone-input-container) {
+  border-color: var(--booking-emerald-600, #059669) !important;
+  border-width: 1px !important;
+  background: #fff !important;
+  outline: none !important;
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2) !important;
+}
+
+.checkoutPhoneInput:focus-within :global(.react-international-phone-country-selector-button) {
+  background: transparent !important;
+}
+
+.checkoutPhoneInput :global(.react-international-phone-country-selector-button) {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 0.375rem 0 0.5rem !important;
+  height: auto !important;
+  align-self: stretch;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+.checkoutPhoneInput :global(.react-international-phone-country-selector-button:hover) {
+  background: rgba(0, 0, 0, 0.03) !important;
+}
+
+.checkoutPhoneInput :global(.react-international-phone-input) {
+  flex: 1;
+  min-width: 0;
+  border: none !important;
+  padding: 0.5rem 0.625rem 0.5rem 0.25rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+  color: var(--booking-stone-900, #1c1917) !important;
+  background: transparent !important;
+}
+
+.checkoutPhoneInput :global(.react-international-phone-input:focus),
+.checkoutPhoneInput :global(.react-international-phone-input:focus-visible) {
+  outline: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.checkoutPhoneInput :global(.react-international-phone-country-selector-button:focus),
+.checkoutPhoneInput :global(.react-international-phone-country-selector-button:focus-visible) {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.checkoutPhoneInput :global(.react-international-phone-country-selector-dropdown) {
+  z-index: 1000;
 }
 
 .contactStaticValue {

package/src/components/booking/CheckoutForm.tsx

@@ -7,6 +7,7 @@ import { PickupLocationSelector } from './PickupLocationSelector';
 import type { Currency } from './CurrencySwitcher';
 import type { PickupLocation, Destination } from '../../lib/booking-api';
 import styles from './CheckoutForm.module.css';
+import { CheckoutOptionalPhoneFields } from './CheckoutOptionalPhoneFields';
 import { useBookingHost } from '../../runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -41,9 +42,11 @@ interface CheckoutFormProps {
   firstName: string;
   lastName: string;
   email: string;
+  phoneNumber?: string;
   onFirstNameChange: (value: string) => void;
   onLastNameChange: (value: string) => void;
   onEmailChange: (value: string) => void;
+  onPhoneNumberChange?: (value: string) => void;
   readOnlyContactFields?: boolean;
   // Pickup location
   pickupLocations?: PickupLocation[];
@@ -104,9 +107,11 @@ export function CheckoutForm({
   firstName,
   lastName,
   email,
+  phoneNumber = '',
   onFirstNameChange,
   onLastNameChange,
   onEmailChange,
+  onPhoneNumberChange,
   readOnlyContactFields = false,
   pickupLocations,
   destinations = [],
@@ -255,9 +260,16 @@ export function CheckoutForm({
                 className={styles.input}
               />
               {email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && (
-                <p className={styles.inputError}>{t('booking.invalidEmail') || 'Please enter a valid email address'}</p>
+                <div className={styles.inputError} role="alert">
+                  {t('booking.invalidEmail') || 'Please enter a valid email address'}
+                </div>
               )}
             </div>
+            <CheckoutOptionalPhoneFields
+              phoneNumber={phoneNumber}
+              onPhoneNumberChange={onPhoneNumberChange}
+              t={t}
+            />
           </>
         )}
       </div>

package/src/components/booking/CheckoutOptionalPhoneFields.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useBookingHost } from '../../runtime';
+import styles from './CheckoutForm.module.css';
+
+type TranslationFn = (key: string, params?: Record<string, string>) => string;
+
+export interface CheckoutOptionalPhoneFieldsProps {
+  phoneNumber: string;
+  onPhoneNumberChange?: (value: string) => void;
+  t: TranslationFn;
+  idPrefix?: string;
+  labelClassName?: string;
+}
+
+export function CheckoutOptionalPhoneFields({
+  phoneNumber,
+  onPhoneNumberChange,
+  t,
+  idPrefix = 'booking',
+  labelClassName = styles.label,
+}: CheckoutOptionalPhoneFieldsProps) {
+  const { slots } = useBookingHost();
+  const PhoneInput = slots.PhoneInput;
+  const phonePlaceholder =
+    t('booking.phoneOptionalPlaceholder') || 'e.g. +1 403 555 0123';
+  const fieldId = `${idPrefix}-phone`;
+
+  return (
+    <div className={styles.optionalPhoneField}>
+      <label className={labelClassName} htmlFor={fieldId}>
+        {t('booking.phoneOptional') || 'Phone'}
+      </label>
+      {PhoneInput ? (
+        <PhoneInput
+          id={fieldId}
+          value={phoneNumber}
+          onChange={(v: string | undefined) => onPhoneNumberChange?.(v ?? '')}
+          placeholder={phonePlaceholder}
+          className={styles.checkoutPhoneInput}
+        />
+      ) : (
+        <input
+          type="tel"
+          id={fieldId}
+          value={phoneNumber}
+          onChange={(e) => onPhoneNumberChange?.(e.target.value)}
+          placeholder={phonePlaceholder}
+          autoComplete="tel"
+          className={styles.input}
+        />
+      )}
+      <div className={styles.optionalPhoneFieldHint} role="note">
+        {t('booking.phoneOptionalHint') || 'For pickup and day-of updates'}
+      </div>
+    </div>
+  );
+}

package/src/components/booking/DapTourDescription.tsx

@@ -24,12 +24,14 @@ export function DapTourDescription({
   }
 
   return (
-    <TourDescription
-      paragraphs={content.paragraphs}
-      review={content.review}
-      sections={content.sections}
-      defaultExpanded={false}
-      toggleLabel={t('booking.seeFullAddOnDescription')}
-    />
+    <div>
+      <TourDescription
+        paragraphs={content.paragraphs}
+        review={content.review}
+        sections={content.sections}
+        defaultExpanded={false}
+        toggleLabel={t('booking.seeFullAddOnDescription')}
+      />
+    </div>
   );
 }

package/src/components/booking/DependentAddOnBookingDialog.tsx

@@ -467,13 +467,42 @@ export default function DependentAddOnBookingDialog() {
   }, [isOpen]);
 
   useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
+    if (!isOpen) return;
+
+    const inheritedScrollLock = document.body.dataset.vviaScrollLockScrollY;
+    if (inheritedScrollLock != null) {
       return () => {
-        document.body.style.overflow = 'unset';
+        document.body.style.overflow = document.body.dataset.vviaScrollLockOverflow ?? '';
+        document.body.style.position = document.body.dataset.vviaScrollLockPosition ?? '';
+        document.body.style.top = document.body.dataset.vviaScrollLockTop ?? '';
+        document.body.style.width = document.body.dataset.vviaScrollLockWidth ?? '';
+        document.body.style.paddingRight = document.body.dataset.vviaScrollLockPaddingRight ?? '';
+        delete document.body.dataset.vviaScrollLockScrollY;
+        delete document.body.dataset.vviaScrollLockOverflow;
+        delete document.body.dataset.vviaScrollLockPosition;
+        delete document.body.dataset.vviaScrollLockTop;
+        delete document.body.dataset.vviaScrollLockWidth;
+        delete document.body.dataset.vviaScrollLockPaddingRight;
       };
     }
-    document.body.style.overflow = 'unset';
+
+    const previousOverflow = document.body.style.overflow;
+    const previousPosition = document.body.style.position;
+    const previousTop = document.body.style.top;
+    const previousWidth = document.body.style.width;
+    const previousPaddingRight = document.body.style.paddingRight;
+    const scrollbarWidth = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+    document.body.style.overflow = 'hidden';
+    if (scrollbarWidth > 0 && !previousPaddingRight) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.body.style.position = previousPosition;
+      document.body.style.top = previousTop;
+      document.body.style.width = previousWidth;
+      document.body.style.paddingRight = previousPaddingRight;
+    };
   }, [isOpen]);
 
   const clearPaymentPrepForSlotChange = useCallback(() => {
@@ -836,9 +865,10 @@ export default function DependentAddOnBookingDialog() {
 
   const dapCheckoutSummary = useMemo(() => {
     if (!payload || !selectedSlot) return null;
+    const receiptTitle = payload.receiptDisplayTitle?.trim() || payload.productDisplayTitle;
     const lineTitle = sessionLengthLabel
-      ? `${payload.productDisplayTitle} (${sessionLengthLabel})`
-      : payload.productDisplayTitle;
+      ? `${receiptTitle} - ${sessionLengthLabel}`
+      : receiptTitle;
     const subtotal =
       paymentSubtotalAmount ??
       (selectedSlot.price != null ? selectedSlot.price * DAP_SLOT_QUANTITY : 0);
@@ -1053,8 +1083,13 @@ export default function DependentAddOnBookingDialog() {
                             }
                           >
                             <span className={bookingStyles.dapSessionOptionTitle}>
-                              {opt.label}
+                              {opt.name ?? opt.label}
                             </span>
+                            {opt.name && opt.label ? (
+                              <span className={bookingStyles.dapSessionOptionMeta}>
+                                {opt.label}
+                              </span>
+                            ) : null}
                             {opt.photosLabel ? (
                               <span className={bookingStyles.dapSessionOptionMeta}>
                                 {opt.photosLabel}