@ticketboothapp/booking 1.2.189 → 1.2.191

package/src/components/booking/ChangeBookingDialog.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { getProduct, type Product } from '../../lib/booking-api';
 import { useBookingHost } from '../../runtime';
-import { formatCurrencyAmount, type Currency } from '../../lib/currency';
+import { formatCurrencyAmount, toMoneyCents, type Currency } from '../../lib/currency';
 import { CURRENCIES, DEFAULT_CURRENCY } from './CurrencySwitcher';
 import { ChangeBookingFlow } from './ChangeBookingFlow';
 import { VIAVIA_TICKET_FINE_PRINT_BY_CATEGORY } from './booking-flow-ui';
@@ -18,6 +18,7 @@ import { getItineraryStepLabel } from '../../lib/booking/itinerary-display';
 import { effectiveProductOptionIdForChangeFlow } from '../../lib/booking/product-option-id';
 import {
   BookingChangeSummaryColumn,
+  MobileBookingChangeDigest,
   changeBookingCompareColumnsVisuallyMatch,
   computeItineraryStepChanged,
   formatBookingDateForChangeCompare,
@@ -85,6 +86,7 @@ export default function ChangeBookingDialog({
   const [product, setProduct] = useState<Product | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [newBookingPreview, setNewBookingPreview] = useState<ChangeFlowSelectionPreview | null>(null);
+  const [isMobileCompareExpanded, setIsMobileCompareExpanded] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -189,7 +191,10 @@ export default function ChangeBookingDialog({
   }, [isOpen]);
 
   useEffect(() => {
-    if (!isOpen) setNewBookingPreview(null);
+    if (!isOpen) {
+      setNewBookingPreview(null);
+      setIsMobileCompareExpanded(false);
+    }
   }, [isOpen]);
 
   const handleChangeFlowSelectionPreview = useCallback((preview: ChangeFlowSelectionPreview | null) => {
@@ -303,6 +308,35 @@ export default function ChangeBookingDialog({
   const itineraryStepChangedNew = showNewBookingColumn
     ? computeItineraryStepChanged(newItinerarySteps, currentItinerarySteps)
     : undefined;
+  const itineraryChangeCount = showNewBookingColumn
+    ? Math.max(
+        itineraryStepChangedCurrent?.filter(Boolean).length ?? 0,
+        itineraryStepChangedNew?.filter(Boolean).length ?? 0,
+      )
+    : 0;
+  const totalDeltaCents =
+    newBookingPreview?.selectionTotal == null
+      ? null
+      : toMoneyCents(newBookingPreview.selectionTotal) - toMoneyCents(booking.receipt.totalAmount);
+  const priceDeltaDirection =
+    totalDeltaCents == null
+      ? null
+      : totalDeltaCents > 0
+        ? 'increase'
+        : totalDeltaCents < 0
+          ? 'decrease'
+          : 'same';
+  const priceDeltaFormatted =
+    totalDeltaCents == null
+      ? null
+      : totalDeltaCents === 0
+        ? 'No price change'
+        : `${totalDeltaCents > 0 ? '+' : '−'}${formatCurrencyAmount(
+            Math.abs(totalDeltaCents) / 100,
+            receiptCurrency,
+            'en',
+          )}`;
+  const mobileCompareDetailsId = 'mobile-booking-change-details';
 
   return (
     <div ref={overlayRef} className={`${styles.overlay} booking-dialog-overlay`} onClick={onClose}>
@@ -363,63 +397,90 @@ export default function ChangeBookingDialog({
           {product && (
             <div className={`${styles.screen} booking-flow-preflight`}>
               <div
-                className="sticky top-0 z-10 mb-3 flex w-full flex-col gap-0 rounded-2xl py-2 md:flex-row md:items-stretch"
-                style={{ background: 'var(--light-orange-background)' }}
+                className={styles.bookingCompareSticky}
               >
-                <motion.div
-                  layout
-                  transition={{ type: 'spring', stiffness: 380, damping: 34 }}
-                  className={
-                    showNewBookingColumn
-                      ? 'min-w-0 md:flex-1 md:basis-0'
-                      : 'min-w-0 w-full'
-                  }
-                >
-                  <BookingChangeSummaryColumn
-                    highlightVariant="current"
-                    kicker="Current booking"
-                    tourName={tourName}
-                    dateStr={currentDateStr}
-                    ticketsStr={ticketsLine}
-                    itinerarySteps={currentItinerarySteps}
-                    totalFormatted={currentTotalFormatted}
+                <div className={styles.mobileCompareDigestContainer}>
+                  <MobileBookingChangeDigest
+                    expanded={isMobileCompareExpanded}
+                    detailsId={mobileCompareDetailsId}
+                    showChanges={showNewBookingColumn}
+                    currentDate={currentDateStr}
+                    newDate={newDateStr}
+                    currentTickets={ticketsLine}
+                    newTickets={newTicketsStr}
+                    currentTotal={currentTotalFormatted}
+                    newTotal={newTotalFormatted}
                     dateChanged={dateChanged}
                     ticketsChanged={ticketsChanged}
-                    itineraryStepChanged={itineraryStepChangedCurrent}
+                    itineraryChangeCount={itineraryChangeCount}
+                    priceDeltaFormatted={priceDeltaFormatted}
+                    priceDeltaDirection={priceDeltaDirection}
+                    pricePending={showNewBookingColumn && newBookingPreview?.selectionTotal == null}
+                    onToggle={() => setIsMobileCompareExpanded((expanded) => !expanded)}
                   />
-                </motion.div>
-                {showNewBookingColumn ? (
-                  <div
-                    aria-hidden
-                    className="booking-change-compare-divider max-md:my-3 md:my-0"
-                  />
-                ) : null}
-                <AnimatePresence initial={false} mode="popLayout">
-                  {showNewBookingColumn && (
-                    <motion.div
-                      key="new-booking-summary"
-                      layout
-                      initial={{ opacity: 0, x: 16, scale: 0.99 }}
-                      animate={{ opacity: 1, x: 0, scale: 1 }}
-                      exit={{ opacity: 0, x: 16, scale: 0.99 }}
-                      transition={{ type: 'spring', stiffness: 380, damping: 34 }}
-                      className="min-w-0 md:flex-1 md:basis-0"
-                    >
-                      <BookingChangeSummaryColumn
-                        highlightVariant="new"
-                        kicker="New booking"
-                        tourName={tourName}
-                        dateStr={newDateStr}
-                        ticketsStr={newTicketsStr}
-                        itinerarySteps={newItinerarySteps}
-                        totalFormatted={newTotalFormatted}
-                        dateChanged={dateChanged}
-                        ticketsChanged={ticketsChanged}
-                        itineraryStepChanged={itineraryStepChangedNew}
-                      />
-                    </motion.div>
-                  )}
-                </AnimatePresence>
+                </div>
+                <div
+                  id={mobileCompareDetailsId}
+                  className={`${styles.bookingCompareDetails} ${isMobileCompareExpanded ? 'flex' : 'hidden'} w-full flex-col gap-0 md:flex md:flex-row md:items-stretch`}
+                >
+                  <motion.div
+                    layout
+                    transition={{ type: 'spring', stiffness: 380, damping: 34 }}
+                    className={
+                      showNewBookingColumn ? 'min-w-0 md:flex-1 md:basis-0' : 'min-w-0 w-full'
+                    }
+                  >
+                    <BookingChangeSummaryColumn
+                      highlightVariant="current"
+                      kicker="Current booking"
+                      tourName={tourName}
+                      dateStr={currentDateStr}
+                      ticketsStr={ticketsLine}
+                      itinerarySteps={currentItinerarySteps}
+                      totalFormatted={currentTotalFormatted}
+                      dateChanged={dateChanged}
+                      ticketsChanged={ticketsChanged}
+                      itineraryStepChanged={itineraryStepChangedCurrent}
+                      hideKickerOnMobile={!showNewBookingColumn}
+                    />
+                  </motion.div>
+                  {showNewBookingColumn ? (
+                    <div
+                      aria-hidden
+                      className="booking-change-compare-divider max-md:my-3 md:my-0"
+                    />
+                  ) : null}
+                  <AnimatePresence initial={false} mode="popLayout">
+                    {showNewBookingColumn && (
+                      <motion.div
+                        key="new-booking-summary"
+                        layout
+                        initial={{ opacity: 0, x: 16, scale: 0.99 }}
+                        animate={{ opacity: 1, x: 0, scale: 1 }}
+                        exit={{ opacity: 0, x: 16, scale: 0.99 }}
+                        transition={{
+                          type: 'spring',
+                          stiffness: 380,
+                          damping: 34,
+                        }}
+                        className="min-w-0 md:flex-1 md:basis-0"
+                      >
+                        <BookingChangeSummaryColumn
+                          highlightVariant="new"
+                          kicker="New booking"
+                          tourName={tourName}
+                          dateStr={newDateStr}
+                          ticketsStr={newTicketsStr}
+                          itinerarySteps={newItinerarySteps}
+                          totalFormatted={newTotalFormatted}
+                          dateChanged={dateChanged}
+                          ticketsChanged={ticketsChanged}
+                          itineraryStepChanged={itineraryStepChangedNew}
+                        />
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
               </div>
               <ChangeBookingFlow
                 product={product}

package/src/components/booking/ChangeBookingFlow.tsx

@@ -617,6 +617,7 @@ export function ChangeBookingFlow({
       locale={locale}
       t={t}
       taxRate={pricingConfig?.taxRate}
+      compactMobile
     />
   ) : null;
 
@@ -893,6 +894,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/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;
 }
@@ -34,7 +35,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;
 }
@@ -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/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={() => {
@@ -287,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>
@@ -302,11 +295,16 @@ 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>
                   </div>
+                  {opt.description ? (
+                    <span className={styles.optionDescription}>
+                      {opt.description}
+                    </span>
+                  ) : null}
                 </div>
               );
             })}
@@ -340,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>
@@ -359,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/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/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>
               )}