@ticketboothapp/booking 1.2.190 → 1.2.191

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

@@ -17,6 +17,11 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  min-width: 0;
+}
+
+.contactSection > * {
+  min-width: 0;
 }
 
 .contactGrid {
@@ -170,10 +175,12 @@
 
 .contactStaticValue {
   margin: 0;
+  max-width: 100%;
   font-size: 1rem;
   line-height: 1.4;
   color: var(--booking-stone-900, #1c1917);
   font-weight: 500;
+  overflow-wrap: anywhere;
 }
 
 .pickupSection {

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

@@ -1,6 +1,7 @@
 .card {
   overflow: hidden;
-  border: 1px solid var(--booking-stone-200, #e7e5e4);
+  /* The scoped booking preflight can be emitted after CSS modules in local dev. */
+  border: 1px solid var(--booking-stone-200, #e7e5e4) !important;
   border-radius: 0.75rem;
   background: #fff;
 }
@@ -67,6 +68,6 @@
 }
 
 .content {
-  border-top: 1px solid var(--booking-stone-100, #f5f5f4);
+  border-top: 1px solid var(--booking-stone-100, #f5f5f4) !important;
   padding: 0.75rem 0.875rem;
 }

package/src/components/booking/MealDrinkAddOnSelector.tsx

@@ -280,7 +280,7 @@ export function MealDrinkAddOnSelector({
                         updateSelections(next, drinks);
                       }}
                       disabled={qty <= 0 || !canDecrementTotal}
-                      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>
@@ -295,7 +295,7 @@ export function MealDrinkAddOnSelector({
                         };
                         updateSelections(next, drinks);
                       }}
-                      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>
@@ -338,7 +338,7 @@ export function MealDrinkAddOnSelector({
                           });
                         }}
                         disabled={qty <= 0}
-                        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>
@@ -357,7 +357,7 @@ export function MealDrinkAddOnSelector({
                           });
                         }}
                         disabled={otherQty <= 0}
-                        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>

package/src/components/booking/PickupLocationDialog.tsx

@@ -10,12 +10,9 @@ import {
 } from '../../lib/booking-api';
 import { PickupLocationSelector } from './PickupLocationSelector';
 import { useTranslations } from '../../lib/booking/i18n';
+import { getPickupLocationDisclaimer } from '../../lib/booking/pickup-location-disclaimer';
 import styles from './PickupLocationDialog.module.css';
 
-const SAMSON_MALL_PICKUP_LOCATION_ID = 'loc_afkvmlNRwRqZ';
-const SAMSON_MALL_PARKING_DISCLAIMER =
-  'No public parking at this pickup location. This pickup location is meant to serve guests staying at the HI Lake Louise Alpine Hostel, Lake Louise Inn, or Lake Louise Campground and can walk to Samson Mall for pickup due to parking restrictions in the town of Lake Louise.';
-
 function findProductWithPickupLocations(
   products: Product[],
   bookingProductId: string
@@ -31,13 +28,6 @@ function findProductWithPickupLocations(
   return null;
 }
 
-function hasSamsonMallParkingDisclaimer(location: { id?: string | null; name?: string | null }): boolean {
-  return (
-    location.id === SAMSON_MALL_PICKUP_LOCATION_ID ||
-    location.name?.trim().toLowerCase() === 'samson mall'
-  );
-}
-
 /** Itinerary rows shown on manage-booking (may include optional label/time from API). */
 export interface PickupDialogItineraryStep {
   label?: string | null;
@@ -228,20 +218,26 @@ export function PickupLocationDialog({
     lastName,
   ]);
 
+  const currentPickupLocation = booking.pickupLocationId
+    ? pickupLocations.find((l) => l.id === booking.pickupLocationId) ?? null
+    : null;
   const currentPickupName =
     booking.travelerHotel ||
     (booking.pickupLocationId
-      ? pickupLocations.find((l) => l.id === booking.pickupLocationId)?.name ?? booking.pickupLocationId
+      ? currentPickupLocation?.name ?? booking.pickupLocationId
       : null);
-  const currentPickupRequiresParkingDisclaimer = hasSamsonMallParkingDisclaimer({
-    id: booking.pickupLocationId,
-    name: currentPickupName,
-  });
+  const currentPickupDisclaimer = getPickupLocationDisclaimer(
+    currentPickupLocation ?? {
+      id: booking.pickupLocationId,
+      name: currentPickupName,
+    }
+  );
   const selectedPickupLocation = selectedLocationId
     ? pickupLocations.find((l) => l.id === selectedLocationId) ?? null
     : null;
-  const selectedPickupRequiresParkingDisclaimer =
-    selectedPickupLocation ? hasSamsonMallParkingDisclaimer(selectedPickupLocation) : false;
+  const selectedPickupDisclaimer = selectedPickupLocation
+    ? getPickupLocationDisclaimer(selectedPickupLocation)
+    : null;
 
   const itineraryDisplay = booking.itineraryDisplay ?? [];
   const pickupOrDropOffSteps = itineraryDisplay.filter(
@@ -332,9 +328,9 @@ export function PickupLocationDialog({
                     {getDropoffTimeFromItinerary(itineraryDisplay)}
                   </p>
                 )}
-                {currentPickupRequiresParkingDisclaimer && (
+                {currentPickupDisclaimer && (
                   <p className={styles.parkingNotice} role="note">
-                    {SAMSON_MALL_PARKING_DISCLAIMER}
+                    {currentPickupDisclaimer.message}
                   </p>
                 )}
               </div>
@@ -366,10 +362,10 @@ export function PickupLocationDialog({
                 />
               </div>
 
-              {selectedPickupRequiresParkingDisclaimer && (
+              {selectedPickupDisclaimer && (
                 <div className={styles.selectedParkingNotice} role="note">
-                  <strong>Samson Mall pickup note</strong>
-                  <span>{SAMSON_MALL_PARKING_DISCLAIMER}</span>
+                  <strong>{selectedPickupDisclaimer.title}</strong>
+                  <span>{selectedPickupDisclaimer.message}</span>
                 </div>
               )}
 

package/src/components/booking/PickupLocationSelector.tsx

@@ -33,6 +33,7 @@ import {
 } from '../../lib/booking/map-utils';
 import type { SearchedLocation, NearbyLocation } from '../../lib/booking/pickup-location-types';
 import { useTranslations } from '../../lib/booking/i18n';
+import { getPickupLocationDisclaimer } from '../../lib/booking/pickup-location-disclaimer';
 import { useBookingApp } from '../../contexts/BookingAppContext';
 import styles from './PickupLocationSelector.module.css';
 
@@ -77,9 +78,6 @@ const SUGGESTION_HIDE_DELAY = 200; // ms
 const DEFAULT_MAP_ZOOM = 10;
 const SEARCHED_LOCATION_ZOOM = 14;
 const MAX_ZOOM = 15;
-const SAMSON_MALL_PICKUP_LOCATION_ID = 'loc_afkvmlNRwRqZ';
-const SAMSON_MALL_PARKING_DISCLAIMER =
-  'No public parking at this pickup location. This pickup location is meant to serve guests staying at the HI Lake Louise Alpine Hostel, Lake Louise Inn, or Lake Louise Campground and can walk to Samson Mall for pickup due to parking restrictions in the town of Lake Louise.';
 
 // Filter definitions
 const FILTERS = [
@@ -114,8 +112,21 @@ function hasFreeParking(location: PickupLocation): boolean {
   return location.name.toLowerCase().includes('free parking');
 }
 
-function hasSamsonMallParkingDisclaimer(location: Pick<PickupLocation, 'id' | 'name'>): boolean {
-  return location.id === SAMSON_MALL_PICKUP_LOCATION_ID || location.name.trim().toLowerCase() === 'samson mall';
+function PickupLocationDisclaimerNote({
+  location,
+  className,
+}: {
+  location: Pick<PickupLocation, 'id' | 'name' | 'disclaimer'>;
+  className: string;
+}) {
+  const disclaimer = getPickupLocationDisclaimer(location);
+  if (!disclaimer) return null;
+
+  return (
+    <p className={className} role="note">
+      {disclaimer.message}
+    </p>
+  );
 }
 
 // Filter locations based on selected filters (AND logic)
@@ -1213,11 +1224,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                         )}
                       </div>
                       <p className="text-xs text-stone-600 truncate">{location.address}</p>
-                      {hasSamsonMallParkingDisclaimer(location) && (
-                        <p className={styles.parkingDisclaimer} role="note">
-                          {SAMSON_MALL_PARKING_DISCLAIMER}
-                        </p>
-                      )}
+                      <PickupLocationDisclaimerNote location={location} className={styles.parkingDisclaimer} />
                       {isNearby && searchedLocation && !exactMatchLocationId && !cityFilter && (
                         <div className="flex items-center gap-2 mt-1 text-xs text-stone-500">
                           <span>📍 {formatDistance((location as NearbyLocation).distance, useImperial)}</span>
@@ -1318,11 +1325,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             <p className="text-sm text-stone-600 mb-2">
                               {location.address}
                             </p>
-                            {hasSamsonMallParkingDisclaimer(location) && (
-                              <p className={styles.mapParkingDisclaimer}>
-                                {SAMSON_MALL_PARKING_DISCLAIMER}
-                              </p>
-                            )}
+                            <PickupLocationDisclaimerNote location={location} className={styles.mapParkingDisclaimer} />
                             <div className="text-xs text-stone-500 space-y-1">
                               <p>
                                 📍 {formatDistance(location.distance, useImperial)} {t('pickup.away')}
@@ -1376,11 +1379,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             <p className="text-sm text-stone-600 mb-2">
                               {location.address}
                             </p>
-                            {hasSamsonMallParkingDisclaimer(location) && (
-                              <p className={styles.mapParkingDisclaimer}>
-                                {SAMSON_MALL_PARKING_DISCLAIMER}
-                              </p>
-                            )}
+                            <PickupLocationDisclaimerNote location={location} className={styles.mapParkingDisclaimer} />
                             {location.notes && (
                               <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mb-2">
                                 {location.notes}
@@ -1438,11 +1437,7 @@ function PickupLocationSelectorWithMap(props: PickupLocationSelectorProps) {
                             <p className="text-sm text-stone-600 mb-2">
                               {location.address}
                             </p>
-                            {hasSamsonMallParkingDisclaimer(location) && (
-                              <p className={styles.mapParkingDisclaimer}>
-                                {SAMSON_MALL_PARKING_DISCLAIMER}
-                              </p>
-                            )}
+                            <PickupLocationDisclaimerNote location={location} className={styles.mapParkingDisclaimer} />
                             {location.notes && (
                               <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mb-2">
                                 {location.notes}

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

@@ -5,3 +5,22 @@
 .ruleAbove {
   border-top: 1px solid var(--booking-stone-200, #e7e5e4);
 }
+
+@media (max-width: 639px) {
+  .compactMobileTotal .totalRow {
+    align-items: flex-start;
+    font-size: 1rem !important;
+    line-height: 1.3 !important;
+  }
+
+  .compactMobileTotal .totalLabel {
+    overflow: visible !important;
+    white-space: normal !important;
+    text-overflow: clip !important;
+  }
+
+  .compactMobileTotal .totalAmount {
+    font-size: 1rem !important;
+    line-height: 1.3 !important;
+  }
+}

package/src/components/booking/PriceSummary.tsx

@@ -84,6 +84,8 @@ export interface PriceSummaryProps {
   totalLabel?: string;
   /** Prefix a positive total with + when the row represents a signed change rather than an absolute total. */
   showPositiveTotalSign?: boolean;
+  /** Keep the total row compact and allow its label to wrap on narrow mobile screens. */
+  compactMobileTotal?: boolean;
   /** Render after the total row (e.g. provider price delta + keep-original-price) */
   extraAfterTotal?: ReactNode;
   /** Optional map of editable line input values by line key. */
@@ -188,6 +190,7 @@ export function PriceSummary({
   hideSubtotal = false,
   totalLabel,
   showPositiveTotalSign = false,
+  compactMobileTotal = false,
   extraAfterTotal,
   lineAmountInputs,
   lineLabelInputs,
@@ -218,7 +221,7 @@ export function PriceSummary({
     !embedSubtotalBeforeTaxInLines && extraBeforeSubtotal ? extraBeforeSubtotal : null;
 
   return (
-    <div className={`space-y-2 min-w-0 ${className}`}>
+    <div className={`space-y-2 min-w-0 ${compactMobileTotal ? styles.compactMobileTotal : ''} ${className}`}>
       {lines.map((row, index) => {
         const isBeforeSubtotalBoundary = firstTaxLineIndex < 0 || index < firstTaxLineIndex;
         if (row.kind === 'ticket') {
@@ -375,11 +378,11 @@ export function PriceSummary({
       <div className="space-y-0">
         {depositMode ? (
           <>
-            <div className={`flex justify-between gap-3 pt-2 min-w-0 ${totalSize} ${styles.ruleAbove}`}>
-              <span className="font-semibold text-stone-900 min-w-0 truncate">
+            <div className={`flex justify-between gap-3 pt-2 min-w-0 ${totalSize} ${styles.ruleAbove} ${styles.totalRow}`}>
+              <span className={`font-semibold text-stone-900 min-w-0 truncate ${styles.totalLabel}`}>
                 {t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total'}
               </span>
-              <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+              <span className={`flex-shrink-0 whitespace-nowrap font-semibold text-stone-900 ${styles.totalAmount}`}>
                 {formatCurrencyAmount(depositMode.fullTotalAmount, currency, locale)}
               </span>
             </div>
@@ -399,12 +402,12 @@ export function PriceSummary({
             )}
           </>
         ) : (
-          <div className={`flex justify-between gap-3 pt-2 min-w-0 ${totalSize} ${styles.ruleAbove}`}>
-            <span className="font-semibold text-stone-900 min-w-0 truncate">
+          <div className={`flex justify-between gap-3 pt-2 min-w-0 ${totalSize} ${styles.ruleAbove} ${styles.totalRow}`}>
+            <span className={`font-semibold text-stone-900 min-w-0 truncate ${styles.totalLabel}`}>
               {totalLabel ??
                 (t('common.total') && t('common.total') !== 'common.total' ? t('common.total') : 'Total')}
             </span>
-            <span className="flex-shrink-0 whitespace-nowrap font-semibold text-stone-900">
+            <span className={`flex-shrink-0 whitespace-nowrap font-semibold text-stone-900 ${styles.totalAmount}`}>
               {showPositiveTotalSign && total > 0.005 ? '+' : ''}
               {formatCurrencyAmount(total, currency, locale)}
             </span>

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

@@ -17,7 +17,7 @@
   border-radius: 0.5rem;
   border: none;
   cursor: pointer;
-  font-family: 'Poppins', sans-serif !important;
+  font-family: 'Figtree', sans-serif !important;
   font-size: 1.125rem;
   font-weight: 700;
   text-transform: lowercase;
@@ -26,6 +26,10 @@
   transition: opacity 0.2s;
 }
 
+.root .mainToggleStatic {
+  position: relative;
+}
+
 .root .mainToggle:hover {
   opacity: 0.9;
 }
@@ -168,6 +172,7 @@
   background: none;
   border: none;
   cursor: pointer;
+  font-family: 'Figtree', sans-serif !important;
   font-size: 0.9375rem;
   font-weight: 700 !important;
   color: var(--accent-orange) !important;

package/src/components/booking/TourDescription.tsx

@@ -41,6 +41,10 @@ export interface TourDescriptionProps {
   sections?: TourDescriptionSection[];
   /** Start expanded (e.g. when in partial/pre-launch state) */
   defaultExpanded?: boolean;
+  /** Keep the main toggle visible while scrolling inside booking dialogs. */
+  stickyToggle?: boolean;
+  /** Show the description content without a collapse control. */
+  alwaysExpanded?: boolean;
 }
 
 /** Items starting with • - * are bullet list; otherwise join as HTML (multi-line format) */
@@ -123,6 +127,8 @@ export function TourDescription({
   review: reviewProp,
   sections: sectionsProp,
   defaultExpanded = false,
+  stickyToggle = true,
+  alwaysExpanded = false,
 }: TourDescriptionProps) {
   const { catalog, slots } = useBookingHost();
   const PlusIcon = slots.PlusIcon;
@@ -154,6 +160,7 @@ export function TourDescription({
   const displayReview = review ?? null;
   const displaySections =
     sections.length > 0 ? sections : [];
+  const contentIsExpanded = alwaysExpanded || isExpanded;
 
   /** Group paragraphs: consecutive bullet items become a single <ul> block */
   const paragraphBlocks = useMemo(() => {
@@ -178,23 +185,25 @@ export function TourDescription({
 
   return (
     <div className={styles.root}>
-      <button
-        type="button"
-        className={styles.mainToggle}
-        onClick={() => setIsExpanded((e) => !e)}
-        aria-expanded={isExpanded}
-      >
-        <span>{toggleLabel ?? t('booking.seeFullTourDescription')}</span>
-        <span className={`${styles.toggleIcon} ${isExpanded ? styles.toggleIconExpanded : ''}`} aria-hidden>
-          {isExpanded ? (
-            <MinusIcon />
-          ) : (
-            <PlusIcon />
-          )}
-        </span>
-      </button>
+      {!alwaysExpanded && (
+        <button
+          type="button"
+          className={`${styles.mainToggle} ${stickyToggle ? '' : styles.mainToggleStatic}`}
+          onClick={() => setIsExpanded((e) => !e)}
+          aria-expanded={isExpanded}
+        >
+          <span>{toggleLabel ?? t('booking.seeFullTourDescription')}</span>
+          <span className={`${styles.toggleIcon} ${isExpanded ? styles.toggleIconExpanded : ''}`} aria-hidden>
+            {isExpanded ? (
+              <MinusIcon />
+            ) : (
+              <PlusIcon />
+            )}
+          </span>
+        </button>
+      )}
 
-      <div className={`${styles.contentWrapper} ${isExpanded ? styles.contentExpanded : ''}`}>
+      <div className={`${styles.contentWrapper} ${contentIsExpanded ? styles.contentExpanded : ''}`}>
         <div className={styles.content}>
           {paragraphBlocks.map((block, i) =>
             block.type === 'paragraph' ? (

package/src/components/booking/change-booking-compare.module.css

@@ -95,3 +95,157 @@
   line-height: 1.2;
   color: var(--primary-text, var(--booking-text, #1c1917));
 }
+
+.mobileDigest {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .kickerMobileHidden {
+    display: none;
+  }
+
+  .mobileDigest {
+    display: block;
+    padding: 0 0.25rem;
+    font-family: 'Figtree', var(--booking-font-sans, ui-sans-serif), sans-serif;
+  }
+
+  .mobileDigest .mobileDigestToggle {
+    display: block;
+    width: 100%;
+    min-height: 2.75rem;
+    margin: 0;
+    padding: 0.625rem 0.75rem;
+    border: 0;
+    border-radius: 0.75rem;
+    background: transparent;
+    color: var(--primary-text, var(--booking-text, #1c1917));
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .mobileDigest .mobileDigestToggle:focus-visible {
+    outline: 2px solid var(--accent-orange, #ff4d00);
+    outline-offset: 2px;
+  }
+
+  .mobileDigestExpanded .mobileDigestToggle {
+    border-radius: 0.75rem 0.75rem 0 0;
+  }
+
+  .mobileDigestHeading,
+  .mobileDigestAction,
+  .mobileDigestLine,
+  .mobileDigestTotalLine {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .mobileDigestHeading {
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .mobileDigestKicker {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.07em;
+    line-height: 1.2;
+    text-transform: uppercase;
+    color: var(--grey-text, var(--booking-text-muted, #78716c));
+  }
+
+  .mobileDigestAction {
+    flex-shrink: 0;
+    gap: 0.125rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--accent-orange, #ff4d00);
+  }
+
+  .mobileDigestChevron {
+    flex-shrink: 0;
+    align-self: center;
+    transition: transform 160ms ease;
+  }
+
+  .mobileDigestChevronExpanded {
+    transform: rotate(180deg);
+  }
+
+  .mobileDigestChanges {
+    display: grid;
+    gap: 0.125rem;
+    margin-top: 0.375rem;
+    font-size: 0.8125rem;
+    line-height: 1.3;
+  }
+
+  .mobileDigestLine {
+    min-width: 0;
+  }
+
+  .mobileDigestArrow {
+    margin: 0 0.35rem;
+    color: var(--grey-text, var(--booking-text-muted, #78716c));
+  }
+
+  .mobileDigestNewValue {
+    font-weight: 700;
+  }
+
+  .mobileDigestMuted {
+    color: var(--grey-text, var(--booking-text-muted, #78716c));
+  }
+
+  .mobileDigestTotalLine {
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding-top: 0.125rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .deltaIncrease,
+  .deltaDecrease,
+  .deltaSame {
+    flex-shrink: 0;
+    font-weight: 700;
+  }
+
+  .deltaIncrease {
+    color: var(--accent-orange, #ff4d00);
+  }
+
+  .deltaDecrease {
+    color: var(--booking-emerald-700, #047857);
+  }
+
+  .deltaSame {
+    color: var(--grey-text, var(--booking-text-muted, #78716c));
+  }
+
+  .mobileDigestBaseline {
+    display: block;
+    margin-top: 0.375rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.3;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}