@ticketboothapp/booking 1.2.189 → 1.2.191

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/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/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;
+  }
+}