@ticketboothapp/booking 1.2.72 → 1.2.74

package/package.json

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

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

@@ -0,0 +1,390 @@
+/* Root class for scoping - nested selectors override Tailwind */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal {
+  background: var(--primary-background, #fff);
+  border-radius: 24px;
+  max-width: 900px;
+  width: 100%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+}
+
+.pickupDialogRoot .header {
+  display: grid !important;
+  grid-template-columns: auto 1fr auto !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+  padding: 1rem 0.75rem !important;
+  border-bottom: 1px solid #e5e7eb !important;
+}
+
+.pickupDialogRoot .headerSpacer {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+}
+
+.pickupDialogRoot .title {
+  font-family: 'Poppins', sans-serif !important;
+  font-weight: 800 !important;
+  font-size: 1.5rem !important;
+  color: var(--accent-orange, #e85a2e) !important;
+  margin: 0 !important;
+  justify-self: center !important;
+  text-align: center !important;
+}
+
+.pickupDialogRoot .closeBtn {
+  background: none !important;
+  border: none !important;
+  padding: 0.5rem !important;
+  cursor: pointer !important;
+  color: var(--grey-text, #6b7280) !important;
+}
+
+.pickupDialogRoot .closeBtn:hover {
+  color: var(--primary-text, #1f2937) !important;
+}
+
+.pickupDialogRoot .content {
+  padding: var(--spacing-large);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-width: 0;
+}
+
+.pickupDialogRoot .loading,
+.pickupDialogRoot .error,
+.pickupDialogRoot .empty {
+  text-align: center;
+  padding: 2rem;
+  color: var(--grey-text, #6b7280);
+}
+
+.pickupDialogRoot .error {
+  color: #dc2626;
+}
+
+/* Current pickup section - shown when dialog opens */
+.pickupDialogRoot .currentPickupSection {
+  margin-bottom: 1.25rem;
+  padding: 1rem;
+  background: var(--accent-orange-10, rgba(0, 0, 0, 0.04));
+  border-radius: 12px;
+  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+}
+
+.pickupDialogRoot .currentPickupLabel {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--grey-text, #6b7280);
+  margin: 0 0 0.25rem 0;
+}
+
+.pickupDialogRoot .currentPickupName {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--primary-text, #1f2937);
+  margin: 0 0 0.25rem 0;
+}
+
+.pickupDialogRoot .currentPickupTimes {
+  font-size: 0.875rem;
+  color: var(--grey-text, #6b7280);
+  margin: 0;
+}
+
+.pickupDialogRoot .selectorWrapper {
+  margin-bottom: 1.5rem;
+}
+
+/* Prevent input overflow - constrain width in flex/grid layouts */
+.pickupDialogRoot .selectorWrapperConstrained {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.pickupDialogRoot .selectorWrapperConstrained > div {
+  min-width: 0;
+}
+
+/* Override Tailwind resets for input and filter pills when inside dialog */
+.pickupDialogRoot .selectorWrapper input[data-pickup-search],
+.pickupDialogRoot .selectorWrapper input[type="text"] {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  padding: 0.5rem 1rem 0.5rem 2.5rem !important;
+  font-family: 'Figtree', sans-serif !important;
+  font-size: 1rem !important;
+  line-height: 1.5 !important;
+  color: #1c1917 !important;
+  background-color: #fff !important;
+  border: 1px solid #d6d3d1 !important;
+  border-radius: 0.5rem !important;
+}
+
+.pickupDialogRoot .selectorWrapper input::placeholder {
+  color: #a8a29e !important;
+}
+
+.pickupDialogRoot .selectorWrapper input:focus {
+  outline: none !important;
+  border-color: #78716c !important;
+}
+
+/* Filter pills - match booking flow (PrivateShuttleBookingFlow / CheckoutForm) */
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: center !important;
+  gap: 0.5rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] > div:first-child {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.5rem !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button {
+  padding: 0.875rem 1.25rem !important;
+  font-family: 'Figtree', sans-serif !important;
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+  border-radius: 9999px !important;
+  transition: background-color 0.15s, color 0.15s !important;
+  flex-shrink: 0 !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+/* Unselected - stone/grey to match booking flow */
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button:not([class*="bg-emerald"]) {
+  background-color: #f5f5f4 !important;
+  color: #44403c !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button:hover:not([class*="bg-emerald"]) {
+  background-color: #e7e5e4 !important;
+}
+
+/* Selected - emerald green to match booking flow */
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button[class*="bg-emerald"] {
+  background-color: #059669 !important;
+  color: #fff !important;
+}
+
+.pickupDialogRoot .selectorWrapper [class*="filterPillsScroll"] button[class*="bg-emerald"]:hover {
+  background-color: #047857 !important;
+}
+
+.pickupDialogRoot .mapContainer {
+  margin-bottom: var(--spacing-medium);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+}
+
+.map {
+  width: 100%;
+  height: 320px;
+}
+
+.mapFallback {
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  margin-bottom: var(--spacing-medium);
+}
+
+.infoWindow {
+  padding: 0.25rem;
+  min-width: 200px;
+}
+
+.infoTitle {
+  font-weight: 600;
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+}
+
+.infoAddress {
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  margin: 0 0 0.5rem 0;
+}
+
+.selectBtn {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: var(--accent-orange, #e85a2e);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.selectBtn:hover:not(:disabled) {
+  background: #e85a2e;
+  opacity: 0.9;
+}
+
+.selectBtn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: var(--spacing-large);
+}
+
+.listItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 2px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+  border-radius: 12px;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.listItem:hover {
+  border-color: var(--accent-orange, #e85a2e);
+  background: rgba(232, 90, 46, 0.05);
+}
+
+.listItemSelected {
+  border-color: var(--accent-orange, #e85a2e);
+  background: rgba(232, 90, 46, 0.08);
+}
+
+.listName {
+  font-weight: 600;
+  color: var(--primary-text, #1f2937);
+}
+
+.listAddress {
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  margin-top: 0.25rem;
+}
+
+.pickupDialogRoot .footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid #e5e7eb !important;
+}
+
+.pickupDialogRoot .footerBtn {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding: 0.625rem 1.25rem;
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: opacity 0.15s, filter 0.15s;
+}
+
+.pickupDialogRoot .footerBtnOutline {
+  border: 2px solid var(--grey-text, #6b7280);
+  color: var(--grey-text, #6b7280);
+  background: transparent;
+}
+
+.pickupDialogRoot .footerBtnOutline:hover {
+  opacity: 0.88;
+}
+
+.pickupDialogRoot .footerBtnPrimary {
+  border: 2px solid var(--accent-orange, #e85a2e);
+  background: var(--accent-orange, #e85a2e);
+  color: #fff;
+}
+
+.pickupDialogRoot .footerBtnPrimary:hover:not(:disabled) {
+  filter: brightness(1.05);
+}
+
+.pickupDialogRoot .footerBtnPrimary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Itinerary preview before save */
+.pickupDialogRoot .itineraryPreview {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--accent-orange-10, rgba(0, 0, 0, 0.04));
+  border-radius: 12px;
+  border: 1px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+}
+
+.pickupDialogRoot .previewTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: var(--primary-text, #1f2937);
+}
+
+.pickupDialogRoot .previewIntro {
+  font-size: 0.8125rem;
+  color: var(--grey-text, #6b7280);
+  margin: 0 0 0.75rem 0;
+}
+
+.pickupDialogRoot .previewList {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.8125rem;
+}
+
+.pickupDialogRoot .previewItem {
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.pickupDialogRoot .previewOld {
+  color: var(--grey-text, #6b7280);
+  text-decoration: line-through;
+}
+
+.pickupDialogRoot .previewArrow {
+  color: var(--accent-orange, #e85a2e);
+  font-weight: 600;
+}
+
+.pickupDialogRoot .previewNew {
+  color: var(--primary-text, #1f2937);
+  font-weight: 500;
+}

package/src/components/booking/PickupLocationDialog.tsx

@@ -0,0 +1,397 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { formatBookingRefForDisplay } from '../../lib/format-booking-ref';
+import {
+  fetchProducts,
+  updatePickupLocation,
+  previewPickupLocationChange,
+  type Product,
+} from '../../lib/booking-api';
+import { PickupLocationSelector } from './PickupLocationSelector';
+import { useTranslations } from '../../lib/booking/i18n';
+import styles from './PickupLocationDialog.module.css';
+
+function findProductWithPickupLocations(
+  products: Product[],
+  bookingProductId: string
+): Product | null {
+  for (const p of products) {
+    if (p.productId === bookingProductId) return p;
+    if (p.pickupLocations?.some((loc) => loc.id === bookingProductId)) return p;
+    const opt = (p as Product & { options?: { optionId: string }[] })?.options?.find(
+      (o) => o.optionId === bookingProductId
+    );
+    if (opt) return p;
+  }
+  return null;
+}
+
+/** Itinerary rows shown on manage-booking (may include optional label/time from API). */
+export interface PickupDialogItineraryStep {
+  label?: string | null;
+  time?: string | null;
+  stepType?: string | null;
+  place?: string | null;
+}
+
+/** Minimal booking shape required by the manage-booking pickup dialog. */
+export interface PickupLocationDialogBooking {
+  bookingReference: string;
+  companyId?: string | null;
+  productId: string;
+  pickupLocationId?: string | null;
+  travelerHotel?: string | null;
+  customer?: { lastName?: string | null } | null;
+  productType?: string | null;
+  itineraryDisplay?: PickupDialogItineraryStep[] | null;
+}
+
+export interface PickupLocationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  booking: PickupLocationDialogBooking;
+  /** Prefer URL query `ref` / `bookingReference` when present (e.g. manage-booking page). */
+  bookingReferenceFromUrl?: string | null;
+  onSuccess: (updatedBooking: unknown) => void;
+}
+
+function getPickupTimeFromItinerary(itinerary: PickupDialogItineraryStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const pickupStep = itinerary.find((s) => s.stepType === 'pickup');
+  return pickupStep?.time?.trim() || 'TBD';
+}
+
+function getDropoffTimeFromItinerary(itinerary: PickupDialogItineraryStep[] | null | undefined): string {
+  if (!itinerary?.length) return '—';
+  const dropOffStep = [...itinerary].reverse().find((s) => s.stepType === 'drop_off');
+  return dropOffStep?.time?.trim() || 'TBD';
+}
+
+function getItineraryStepLabel(step: PickupDialogItineraryStep, includeTime = false): string {
+  if (step.label?.trim()) {
+    const base = step.label.trim();
+    return includeTime && step.time?.trim() ? `${base} ${step.time.trim()}` : base;
+  }
+  const place = step.place?.trim();
+  const placeDisplay =
+    place === 'your_pickup_location'
+      ? 'your pickup location'
+      : place === 'the_destination'
+        ? 'the destination'
+        : place ?? '';
+  const timePart = includeTime && step.time?.trim() ? ` ${step.time.trim()}` : '';
+  switch (step.stepType) {
+    case 'pickup':
+      return placeDisplay ? `Pickup at ${placeDisplay}${timePart}` : `Pickup${timePart}`;
+    case 'drop_off':
+      return placeDisplay ? `Drop off at ${placeDisplay}${timePart}` : `Drop-off${timePart}`;
+    case 'arrive':
+      return placeDisplay ? `Arrive at ${placeDisplay}${timePart}` : `Arrive${timePart}`;
+    case 'depart':
+      return placeDisplay ? `Depart ${placeDisplay}${timePart}` : `Depart${timePart}`;
+    case 'trip_end':
+      return 'Trip ends';
+    case 'draft':
+      return placeDisplay || 'Stop';
+    default:
+      return placeDisplay || (step.stepType ?? 'Step');
+  }
+}
+
+export function PickupLocationDialog({
+  isOpen,
+  onClose,
+  booking,
+  bookingReferenceFromUrl = '',
+  onSuccess,
+}: PickupLocationDialogProps) {
+  const { t } = useTranslations();
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
+    booking.pickupLocationId ?? null
+  );
+  const [selectedLocationName, setSelectedLocationName] = useState<string | null>(null);
+  const [selectedCustomAddress, setSelectedCustomAddress] = useState<string | null>(
+    booking.travelerHotel ?? null
+  );
+  const [saving, setSaving] = useState(false);
+  const [previewItinerary, setPreviewItinerary] = useState<PickupDialogItineraryStep[] | null>(null);
+
+  const refFromUrl = (bookingReferenceFromUrl ?? '').trim();
+  const refFromBooking =
+    formatBookingRefForDisplay(booking.bookingReference) || booking.bookingReference || '';
+  const effectiveBookingRef = (refFromUrl || refFromBooking).trim();
+
+  const companyId = booking.companyId ?? '';
+  const lastName = booking.customer?.lastName ?? '';
+  const isPrivateShuttle = booking.productType === 'PRIVATE_SHUTTLE';
+
+  const product = useMemo(
+    () => findProductWithPickupLocations(products, booking.productId),
+    [products, booking.productId]
+  );
+  const pickupLocations = product?.pickupLocations ?? [];
+  const destinations = product?.destinations ?? [];
+
+  const loadProducts = useCallback(async () => {
+    if (!companyId?.trim()) {
+      setError('Missing company information');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await fetchProducts(companyId);
+      setProducts(data);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load pickup locations');
+    } finally {
+      setLoading(false);
+    }
+  }, [companyId]);
+
+  useEffect(() => {
+    if (isOpen && companyId) loadProducts();
+  }, [isOpen, companyId, loadProducts]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedLocationId(booking.pickupLocationId ?? null);
+      setSelectedLocationName(null);
+      setSelectedCustomAddress(booking.travelerHotel ?? null);
+      setPreviewItinerary(null);
+    }
+  }, [isOpen, booking.pickupLocationId, booking.travelerHotel]);
+
+  const selectedPickupName = useMemo(() => {
+    if (selectedCustomAddress) return selectedCustomAddress;
+    if (selectedLocationId) {
+      return (
+        selectedLocationName ??
+        pickupLocations.find((l) => l.id === selectedLocationId)?.name ??
+        selectedLocationId
+      );
+    }
+    return null;
+  }, [selectedLocationId, selectedLocationName, selectedCustomAddress, pickupLocations]);
+
+  const hasValidSelection = Boolean(selectedLocationId || selectedCustomAddress);
+  const hasChanged =
+    selectedLocationId !== (booking.pickupLocationId ?? null) ||
+    selectedCustomAddress !== (booking.travelerHotel ?? null);
+
+  useEffect(() => {
+    if (!isOpen || !hasValidSelection || !hasChanged || !lastName?.trim()) {
+      setPreviewItinerary(null);
+      return;
+    }
+    let cancelled = false;
+    const payload = selectedCustomAddress
+      ? { travelerHotel: selectedCustomAddress }
+      : selectedLocationId
+        ? { pickupLocationId: selectedLocationId }
+        : null;
+    if (!payload) return;
+    previewPickupLocationChange(effectiveBookingRef, lastName, payload)
+      .then((data) => {
+        if (!cancelled && data?.itineraryDisplay) {
+          setPreviewItinerary(data.itineraryDisplay as PickupDialogItineraryStep[]);
+        } else {
+          setPreviewItinerary(null);
+        }
+      })
+      .catch(() => setPreviewItinerary(null));
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    isOpen,
+    hasValidSelection,
+    hasChanged,
+    selectedLocationId,
+    selectedCustomAddress,
+    effectiveBookingRef,
+    lastName,
+  ]);
+
+  const currentPickupName =
+    booking.travelerHotel ||
+    (booking.pickupLocationId
+      ? pickupLocations.find((l) => l.id === booking.pickupLocationId)?.name ?? booking.pickupLocationId
+      : null);
+
+  const itineraryDisplay = booking.itineraryDisplay ?? [];
+  const pickupOrDropOffSteps = itineraryDisplay.filter(
+    (s) => s.stepType === 'pickup' || s.stepType === 'drop_off'
+  );
+
+  const handleSave = async () => {
+    if (!lastName?.trim()) {
+      setError('Last name is required to update pickup');
+      return;
+    }
+    if (!hasValidSelection) {
+      setError('Please select a pickup location');
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      let payload: { pickupLocationId?: string; travelerHotel?: string };
+      if (selectedCustomAddress) {
+        payload = { travelerHotel: selectedCustomAddress };
+      } else if (selectedLocationId) {
+        payload = { pickupLocationId: selectedLocationId, travelerHotel: selectedLocationName ?? undefined };
+      } else {
+        setError('Please select a pickup location');
+        setSaving(false);
+        return;
+      }
+
+      const updated = await updatePickupLocation(effectiveBookingRef, lastName, payload);
+      onSuccess(updated);
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to update pickup location');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="pickup-dialog-title"
+    >
+      <div className={`${styles.modal} ${styles.pickupDialogRoot}`} onClick={(e) => e.stopPropagation()}>
+        <div
+          className={styles.header}
+          style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center' }}
+        >
+          <span className={styles.headerSpacer} aria-hidden />
+          <h2
+            id="pickup-dialog-title"
+            className={styles.title}
+            style={{ textAlign: 'center', justifySelf: 'center' }}
+          >
+            {t('pickup.title') || 'Select pickup location'}
+          </h2>
+          <button type="button" onClick={onClose} className={styles.closeBtn} aria-label="Close">
+            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className={styles.content}>
+          {loading ? (
+            <div className={styles.loading}>Loading pickup locations…</div>
+          ) : error && !pickupLocations.length ? (
+            <div className={styles.error}>{error}</div>
+          ) : pickupLocations.length === 0 ? (
+            <div className={styles.empty}>No pickup locations available for this tour.</div>
+          ) : (
+            <>
+              <div className={styles.currentPickupSection}>
+                <p className={styles.currentPickupLabel}>Current pickup</p>
+                <p className={styles.currentPickupName}>
+                  {currentPickupName ?? (t('booking.pickupLocationUnknown') || "I don't know")}
+                </p>
+                {(booking.pickupLocationId || booking.travelerHotel) && (
+                  <p className={styles.currentPickupTimes}>
+                    Pickup: {getPickupTimeFromItinerary(itineraryDisplay)} · Drop-off:{' '}
+                    {getDropoffTimeFromItinerary(itineraryDisplay)}
+                  </p>
+                )}
+              </div>
+              <div
+                className={`${styles.selectorWrapper} ${styles.selectorWrapperConstrained}`}
+                style={{ fontFamily: "'Figtree', sans-serif" }}
+              >
+                <PickupLocationSelector
+                  hideTitle
+                  hideSkipOption
+                  pickupLocations={pickupLocations}
+                  selectedLocationId={selectedLocationId}
+                  selectedCustomAddress={selectedCustomAddress}
+                  allowCustomLocation={isPrivateShuttle}
+                  restrictCustomLocationToServiceArea={isPrivateShuttle}
+                  destinations={destinations}
+                  onLocationSelect={(locationId, customLocation, locationName) => {
+                    setError('');
+                    if (customLocation) {
+                      setSelectedLocationId(null);
+                      setSelectedLocationName(null);
+                      setSelectedCustomAddress(customLocation.address);
+                    } else {
+                      setSelectedLocationId(locationId);
+                      setSelectedLocationName(locationName ?? null);
+                      setSelectedCustomAddress(null);
+                    }
+                  }}
+                />
+              </div>
+
+              {hasValidSelection && hasChanged && pickupOrDropOffSteps.length > 0 && (
+                <div className={styles.itineraryPreview}>
+                  <h3 className={styles.previewTitle}>Itinerary changes</h3>
+                  <p className={styles.previewIntro}>
+                    Your itinerary will be updated with the new pickup location:
+                  </p>
+                  <ul className={styles.previewList}>
+                    {pickupOrDropOffSteps.map((step, i) => {
+                      const previewStep = previewItinerary?.find((s) => s.stepType === step.stepType);
+                      const newTime = previewStep?.time?.trim();
+                      const newLabel =
+                        step.stepType === 'pickup'
+                          ? selectedPickupName
+                            ? `Pickup at ${selectedPickupName}${newTime ? ` ${newTime}` : ''}`
+                            : t('booking.pickupLocationUnknown') || "I don't know"
+                          : step.stepType === 'drop_off'
+                            ? selectedPickupName
+                              ? `Drop off at ${selectedPickupName}${newTime ? ` ${newTime}` : ''}`
+                              : t('booking.pickupLocationUnknown') || "I don't know"
+                            : getItineraryStepLabel(previewStep ?? step, true);
+                      return (
+                        <li key={i} className={styles.previewItem}>
+                          <span className={styles.previewOld}>{getItineraryStepLabel(step, true)}</span>
+                          <span className={styles.previewArrow}>→</span>
+                          <span className={styles.previewNew}>{newLabel}</span>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
+
+              {error && <div className={styles.error}>{error}</div>}
+
+              <div className={styles.footer}>
+                <button type="button" className={`${styles.footerBtn} ${styles.footerBtnOutline}`} onClick={onClose}>
+                  Cancel
+                </button>
+                <button
+                  type="button"
+                  className={`${styles.footerBtn} ${styles.footerBtnPrimary}`}
+                  onClick={handleSave}
+                  disabled={!hasValidSelection || !hasChanged || saving}
+                >
+                  {saving ? 'Saving…' : 'Save pickup location'}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -44,6 +44,13 @@ export type {
 export { getItineraryStepLabel } from './lib/booking/itinerary-display';
 export { PARTNER_EMBEDDED_BOOKING_FLOW_UI_BASE } from './components/booking/booking-flow-ui';
 export { default as BookingDialog } from './components/booking/BookingDialog';
+export { PickupLocationDialog } from './components/booking/PickupLocationDialog';
+export type {
+  PickupLocationDialogBooking,
+  PickupLocationDialogProps,
+  PickupDialogItineraryStep,
+} from './components/booking/PickupLocationDialog';
+export { formatBookingRefForDisplay } from './lib/format-booking-ref';
 export { default as BookingProductGrid } from './components/booking/BookingProductGrid';
 export { DefaultTermsContent as TermsContent } from './components/booking/DefaultTermsContent';
 

package/src/lib/format-booking-ref.ts

@@ -0,0 +1,12 @@
+/**
+ * Format booking reference for display and URLs.
+ * Strips the bookRef_ prefix so users see the short form. Backend accepts both forms.
+ */
+export function formatBookingRefForDisplay(ref: string | null | undefined): string {
+  if (!ref || typeof ref !== 'string') return '';
+  const trimmed = ref.trim();
+  if (trimmed.toLowerCase().startsWith('bookref_')) {
+    return trimmed.slice(8);
+  }
+  return trimmed;
+}