@ticketboothapp/booking 1.2.190 → 1.2.193

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

package/src/components/booking/change-booking-compare.tsx

@@ -6,6 +6,8 @@ export type ItineraryStepLine = { time: string | null; label: string };
 
 export type ChangeHighlightVariant = 'current' | 'new';
 
+export type ChangePriceDeltaDirection = 'increase' | 'decrease' | 'same' | null;
+
 /** Same date formatting as manage-booking / ChangeBookingDialog (Mountain Time label). */
 export function formatBookingDateForChangeCompare(dateTime: string | null | undefined): string {
   if (!dateTime) return '—';
@@ -102,6 +104,7 @@ export function BookingChangeSummaryColumn({
   dateChanged = false,
   ticketsChanged = false,
   itineraryStepChanged,
+  hideKickerOnMobile = false,
 }: {
   kicker: string;
   tourName: string;
@@ -114,6 +117,7 @@ export function BookingChangeSummaryColumn({
   dateChanged?: boolean;
   ticketsChanged?: boolean;
   itineraryStepChanged?: boolean[];
+  hideKickerOnMobile?: boolean;
 }) {
   const dateClass =
     highlightVariant === 'current' && dateChanged
@@ -130,7 +134,11 @@ export function BookingChangeSummaryColumn({
 
   return (
     <div className={`booking-change-summary-column ${styles.column}`}>
-      <p className={styles.kicker}>{kicker}</p>
+      <p
+        className={`${styles.kicker} ${hideKickerOnMobile ? styles.kickerMobileHidden : ''}`}
+      >
+        {kicker}
+      </p>
 
       {/* Same pattern as manage-booking `BookingDetails`: label + value on one baseline row */}
       <div className={styles.row}>
@@ -226,3 +234,135 @@ export function BookingChangeSummaryColumn({
     </div>
   );
 }
+
+export function MobileBookingChangeDigest({
+  expanded,
+  detailsId,
+  showChanges,
+  currentDate,
+  newDate,
+  currentTickets,
+  newTickets,
+  currentTotal,
+  newTotal,
+  dateChanged,
+  ticketsChanged,
+  itineraryChangeCount,
+  priceDeltaFormatted,
+  priceDeltaDirection,
+  pricePending,
+  onToggle,
+}: {
+  expanded: boolean;
+  detailsId: string;
+  showChanges: boolean;
+  currentDate: string;
+  newDate: string;
+  currentTickets: string;
+  newTickets: string;
+  currentTotal: string;
+  newTotal: string;
+  dateChanged: boolean;
+  ticketsChanged: boolean;
+  itineraryChangeCount: number;
+  priceDeltaFormatted: string | null;
+  priceDeltaDirection: ChangePriceDeltaDirection;
+  pricePending: boolean;
+  onToggle: () => void;
+}) {
+  const actionLabel = expanded ? 'Hide details' : showChanges ? 'Review changes' : 'View details';
+  const deltaClass =
+    priceDeltaDirection === 'increase'
+      ? styles.deltaIncrease
+      : priceDeltaDirection === 'decrease'
+        ? styles.deltaDecrease
+        : styles.deltaSame;
+
+  return (
+    <div
+      className={`${styles.mobileDigest} ${expanded ? styles.mobileDigestExpanded : ''}`}
+    >
+      <button
+        type="button"
+        className={styles.mobileDigestToggle}
+        aria-expanded={expanded}
+        aria-controls={detailsId}
+        onClick={onToggle}
+      >
+        <span className={styles.mobileDigestHeading}>
+          <span className={styles.mobileDigestKicker}>
+            {showChanges ? 'Your changes' : 'Current booking'}
+          </span>
+          <span className={styles.mobileDigestAction}>
+            {actionLabel}
+            <svg
+              aria-hidden="true"
+              className={`${styles.mobileDigestChevron} ${expanded ? styles.mobileDigestChevronExpanded : ''}`}
+              width="16"
+              height="16"
+              viewBox="0 0 20 20"
+              fill="none"
+            >
+              <path
+                d="m5 7.5 5 5 5-5"
+                stroke="currentColor"
+                strokeWidth="1.75"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+        </span>
+
+        {showChanges ? (
+          <span className={styles.mobileDigestChanges}>
+            {dateChanged ? (
+              <span className={styles.mobileDigestLine}>
+                <span>{currentDate}</span>
+                <span className={styles.mobileDigestArrow} aria-hidden="true">
+                  →
+                </span>
+                <span className={styles.visuallyHidden}>changes to</span>
+                <span className={styles.mobileDigestNewValue}>{newDate}</span>
+              </span>
+            ) : null}
+            {ticketsChanged ? (
+              <span className={styles.mobileDigestLine}>
+                <span>{currentTickets}</span>
+                <span className={styles.mobileDigestArrow} aria-hidden="true">
+                  →
+                </span>
+                <span className={styles.visuallyHidden}>changes to</span>
+                <span className={styles.mobileDigestNewValue}>{newTickets}</span>
+              </span>
+            ) : null}
+            {itineraryChangeCount > 0 ? (
+              <span className={styles.mobileDigestMuted}>
+                {itineraryChangeCount}{' '}
+                {itineraryChangeCount === 1 ? 'itinerary update' : 'itinerary updates'}
+              </span>
+            ) : null}
+            <span className={styles.mobileDigestTotalLine}>
+              <span>
+                {currentTotal}
+                <span className={styles.mobileDigestArrow} aria-hidden="true">
+                  →
+                </span>
+                <span className={styles.visuallyHidden}>changes to</span>
+                <span className={styles.mobileDigestNewValue}>{newTotal}</span>
+              </span>
+              <span className={pricePending ? styles.deltaSame : deltaClass}>
+                {pricePending ? 'Updating price…' : priceDeltaFormatted}
+              </span>
+            </span>
+          </span>
+        ) : (
+          <span className={styles.mobileDigestBaseline}>
+            {currentDate} <span aria-hidden="true">·</span> {currentTickets}{' '}
+            <span aria-hidden="true">·</span> {currentTotal}
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}

package/src/components/booking/pickup-location-product.ts

@@ -0,0 +1,24 @@
+import type { Product } from '../../lib/booking-api';
+
+export function findProductForPickupLocations(
+  products: Product[],
+  bookingProductId: string,
+): Product | null {
+  for (const product of products) {
+    if (product.productId === bookingProductId) return product;
+    if (product.pickupLocations?.some((location) => location.id === bookingProductId)) {
+      return product;
+    }
+    if (product.options?.some((option) => option.optionId === bookingProductId)) return product;
+  }
+  return null;
+}
+
+/** Keep manage-booking pickup choices aligned with the normal booking flow's static catalog. */
+export function resolvePickupLocationProduct(
+  staticProduct: Product | null,
+  liveProducts: Product[],
+  bookingProductId: string,
+): Product | null {
+  return staticProduct ?? findProductForPickupLocations(liveProducts, bookingProductId);
+}

package/src/constants/images.ts

@@ -553,4 +553,4 @@ export const IMAGES: Record<string, ImageData> = {
 } as const;
 
 // Type for accessing image keys
-export type ImageKey = keyof typeof IMAGES;
+export type ImageKey = keyof typeof IMAGES;

package/src/index.ts

@@ -64,6 +64,17 @@ export { default as BookingProductGrid } from './components/booking/BookingProdu
 export { DefaultTermsContent as TermsContent } from './components/booking/DefaultTermsContent';
 export { BackgroundVideo } from './components/BackgroundVideo';
 export type { BackgroundVideoLoading, BackgroundVideoProps } from './components/BackgroundVideo';
+export {
+  BookingFlowCollage,
+  type BookingFlowCollageProps,
+} from './components/booking/BookingFlowCollage';
+export {
+  TourDescription,
+  type TourDescriptionProps,
+  type TourDescriptionReview,
+  type TourDescriptionSection,
+  type TourDescriptionSubsection,
+} from './components/booking/TourDescription';
 
 export type {
   BookingAppMode,

package/src/lib/booking/pickup-location-disclaimer.ts

@@ -0,0 +1,69 @@
+export interface PickupLocationDisclaimerInput {
+  id?: string | null;
+  name?: string | null;
+  disclaimer?: string | null;
+}
+
+export interface PickupLocationDisclaimer {
+  title: string;
+  message: string;
+}
+
+const SAMSON_MALL_PICKUP_LOCATION_ID = 'loc_afkvmlNRwRqZ';
+const SAMSON_MALL_PICKUP_LOCATION_NAME = 'samson mall';
+
+const LAKE_LOUISE_HOTEL_PICKUP_LOCATIONS = new Map([
+  ['loc_Ll05oVACjjAx', 'HI Lake Louise Alpine Centre'],
+  ['loc_VAJ0L8amxnC5', 'Fairmont Lake Louise'],
+  ['loc_arPLLVG1xKxw', 'Mountaineer Lodge'],
+  ['loc_9ObwCZ7MxfjC', 'Paradise Lodge and Bungalows'],
+  ['loc_ieW6EfdVeYd4', 'Post Hotel'],
+]);
+
+const LAKE_LOUISE_HOTEL_NAMES = new Set(
+  Array.from(LAKE_LOUISE_HOTEL_PICKUP_LOCATIONS.values(), (name) =>
+    name.toLowerCase(),
+  ),
+);
+
+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.';
+
+export function getPickupLocationDisclaimer(
+  location: PickupLocationDisclaimerInput,
+): PickupLocationDisclaimer | null {
+  const objectDisclaimer = location.disclaimer?.trim();
+  if (objectDisclaimer) {
+    return {
+      title: 'Pickup location note',
+      message: objectDisclaimer,
+    };
+  }
+
+  const normalizedName = location.name?.trim().toLowerCase() ?? '';
+
+  if (
+    location.id === SAMSON_MALL_PICKUP_LOCATION_ID ||
+    normalizedName === SAMSON_MALL_PICKUP_LOCATION_NAME
+  ) {
+    return {
+      title: 'Samson Mall pickup note',
+      message: SAMSON_MALL_PARKING_DISCLAIMER,
+    };
+  }
+
+  const hotelName =
+    (location.id
+      ? LAKE_LOUISE_HOTEL_PICKUP_LOCATIONS.get(location.id)
+      : undefined) ??
+    (LAKE_LOUISE_HOTEL_NAMES.has(normalizedName)
+      ? location.name?.trim()
+      : undefined);
+
+  if (!hotelName) return null;
+
+  return {
+    title: 'Hotel guests only',
+    message: `This pickup location is only available to guests staying at ${hotelName}. There is no public parking for shuttle guests anywhere in Lake Louise.`,
+  };
+}

package/src/lib/booking-api.ts

@@ -849,6 +849,7 @@ export interface PickupLocation {
   pickupTimeOffsetMinutes?: number;
   travelMinutesFromDestination?: Record<string, number>;
   freeParking?: boolean;
+  disclaimer?: string | null;
   notes?: string;
   driverNotes?: string;
 }