@ticketboothapp/booking 1.2.24 → 1.2.25

package/src/lib/booking/location-utils.ts

@@ -0,0 +1,165 @@
+// Location utilities for distance calculation and travel time estimation
+
+export interface Coordinates {
+  lat: number;
+  lng: number;
+}
+
+/**
+ * Calculate the distance between two coordinates using the Haversine formula
+ * Returns distance in kilometers
+ */
+export function calculateDistance(
+  coord1: Coordinates,
+  coord2: Coordinates
+): number {
+  const R = 6371; // Earth's radius in kilometers
+  const dLat = toRadians(coord2.lat - coord1.lat);
+  const dLon = toRadians(coord2.lng - coord1.lng);
+  
+  const a =
+    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(toRadians(coord1.lat)) *
+      Math.cos(toRadians(coord2.lat)) *
+      Math.sin(dLon / 2) *
+      Math.sin(dLon / 2);
+  
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  return R * c;
+}
+
+function toRadians(degrees: number): number {
+  return degrees * (Math.PI / 180);
+}
+
+/**
+ * Convert kilometers to miles
+ */
+export function kmToMiles(km: number): number {
+  return km * 0.621371;
+}
+
+/**
+ * Convert miles to kilometers
+ */
+export function milesToKm(miles: number): number {
+  return miles * 1.60934;
+}
+
+/**
+ * Estimate walking time in minutes
+ * Assumes average walking speed of 5 km/h
+ */
+export function estimateWalkingTime(distanceKm: number): number {
+  const walkingSpeedKmh = 5;
+  return Math.round((distanceKm / walkingSpeedKmh) * 60);
+}
+
+/**
+ * Estimate driving time in minutes
+ * Assumes average driving speed of 50 km/h (urban/suburban)
+ */
+export function estimateDrivingTime(distanceKm: number): number {
+  const drivingSpeedKmh = 50;
+  return Math.round((distanceKm / drivingSpeedKmh) * 60);
+}
+
+/**
+ * Format distance with appropriate unit
+ */
+export function formatDistance(
+  distanceKm: number,
+  useImperial: boolean = false
+): string {
+  if (useImperial) {
+    const miles = kmToMiles(distanceKm);
+    if (miles < 0.1) {
+      return `${Math.round(miles * 5280)} ft`;
+    } else if (miles < 1) {
+      return `${miles.toFixed(1)} mi`;
+    } else {
+      return `${miles.toFixed(1)} mi`;
+    }
+  } else {
+    if (distanceKm < 0.1) {
+      return `${Math.round(distanceKm * 1000)} m`;
+    } else if (distanceKm < 1) {
+      return `${Math.round(distanceKm * 1000)} m`;
+    } else {
+      return `${distanceKm.toFixed(1)} km`;
+    }
+  }
+}
+
+/**
+ * Format time duration
+ */
+export function formatTime(minutes: number): string {
+  if (minutes < 60) {
+    return `${minutes} min`;
+  } else {
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return mins > 0 ? `${hours} h ${mins} min` : `${hours} h`;
+  }
+}
+
+/**
+ * Service area for Private Shuttle custom pickups: Lake Louise to Kananaskis casino corridor.
+ * Bounding box encompasses: Lake Louise, Banff, Canmore, Kananaskis.
+ * Excludes Calgary and areas east.
+ */
+export const PRIVATE_SHUTTLE_SERVICE_BOUNDS = {
+  latMin: 51.0,
+  latMax: 51.5,
+  lngMin: -116.5,
+  lngMax: -114.8,
+} as const;
+
+/**
+ * Check if coordinates are within the Private Shuttle service area
+ * (corridor from Lake Louise to Kananaskis casino).
+ */
+export function isWithinPrivateShuttleServiceArea(coords: Coordinates): boolean {
+  const { latMin, latMax, lngMin, lngMax } = PRIVATE_SHUTTLE_SERVICE_BOUNDS;
+  return (
+    coords.lat >= latMin &&
+    coords.lat <= latMax &&
+    coords.lng >= lngMin &&
+    coords.lng <= lngMax
+  );
+}
+
+/**
+ * Geocode an address using Google Maps Geocoding API
+ * Note: This requires a Google Maps API key
+ */
+export async function geocodeAddress(
+  address: string,
+  apiKey?: string
+): Promise<Coordinates | null> {
+  if (!apiKey) {
+    // Fallback: try to use browser geolocation or return null
+    console.warn('Google Maps API key not provided');
+    return null;
+  }
+
+  try {
+    const response = await fetch(
+      `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(
+        address
+      )}&key=${apiKey}`
+    );
+    const data = await response.json();
+    
+    if (data.status === 'OK' && data.results.length > 0) {
+      const location = data.results[0].geometry.location;
+      return { lat: location.lat, lng: location.lng };
+    }
+    return null;
+  } catch (error) {
+    console.error('Geocoding error:', error);
+    return null;
+  }
+}
+

package/src/lib/booking/map-utils.ts

@@ -0,0 +1,153 @@
+/**
+ * Google Maps utilities
+ */
+
+import type { Coordinates } from '@/lib/booking/location-utils';
+import type { PickupLocation } from '@/lib/booking-api';
+import type { NearbyLocation } from '@/lib/booking/pickup-location-types';
+
+export interface MapCenter {
+  lat: number;
+  lng: number;
+}
+
+const DEFAULT_CENTER: MapCenter = { lat: 51.1784, lng: -115.5708 };
+
+/**
+ * Calculate map center based on available locations
+ */
+export function calculateMapCenter(
+  searchedLocation: { coordinates: Coordinates | null } | null,
+  nearbyLocations: NearbyLocation[],
+  pickupLocations: PickupLocation[]
+): MapCenter {
+  // Prioritize searched location - center on it when found
+  if (searchedLocation?.coordinates) {
+    return searchedLocation.coordinates;
+  }
+
+  if (nearbyLocations.length > 0 && nearbyLocations[0].coordinates) {
+    return {
+      lat: nearbyLocations[0].coordinates.lat,
+      lng: nearbyLocations[0].coordinates.lng,
+    };
+  }
+
+  // Default to first pickup location if available
+  if (pickupLocations.length > 0 && pickupLocations[0].coordinates) {
+    return {
+      lat: pickupLocations[0].coordinates.lat,
+      lng: pickupLocations[0].coordinates.lng,
+    };
+  }
+
+  return DEFAULT_CENTER;
+}
+
+/**
+ * Get map options configuration
+ * Note: Returns a plain object that will be typed by Google Maps API
+ */
+export function getMapOptions(): google.maps.MapOptions {
+  return {
+    disableDefaultUI: false,
+    clickableIcons: false,
+    scrollwheel: true,
+    zoomControl: true,
+    streetViewControl: false,
+    mapTypeControl: false,
+    fullscreenControl: true,
+    gestureHandling: 'cooperative',
+    panControl: false,
+  } as google.maps.MapOptions;
+}
+
+/**
+ * Calculate bounds for all locations to fit on map
+ * Note: Requires Google Maps API to be loaded
+ */
+export function calculateMapBounds(
+  nearbyLocations: NearbyLocation[],
+  searchedLocation: { coordinates: Coordinates | null } | null,
+  isValidLocation: boolean | null,
+  pickupLocations: PickupLocation[]
+): google.maps.LatLngBounds | null {
+  if (typeof google === 'undefined' || !google.maps) {
+    console.warn('Google Maps API not loaded');
+    return null;
+  }
+
+  try {
+    const bounds = new google.maps.LatLngBounds();
+    let hasLocations = false;
+
+    // Add nearby locations to bounds (if user searched)
+    nearbyLocations.forEach((location) => {
+      if (location.coordinates) {
+        bounds.extend(location.coordinates);
+        hasLocations = true;
+      }
+    });
+
+    // Add searched location to bounds if invalid
+    if (searchedLocation?.coordinates && !isValidLocation) {
+      bounds.extend(searchedLocation.coordinates);
+      hasLocations = true;
+    }
+
+    // If no search results, show all pickup locations
+    if (!hasLocations) {
+      pickupLocations.forEach((location) => {
+        if (location.coordinates) {
+          bounds.extend(location.coordinates);
+          hasLocations = true;
+        }
+      });
+    }
+
+    return hasLocations ? bounds : null;
+  } catch (error) {
+    console.error('Error calculating map bounds:', error);
+    return null;
+  }
+}
+
+/**
+ * Pan map to location if it's outside viewport
+ * Note: Requires Google Maps API to be loaded
+ */
+export function panToLocationIfNeeded(
+  map: google.maps.Map,
+  coordinates: Coordinates
+): void {
+  if (typeof google === 'undefined' || !google.maps) {
+    console.warn('Google Maps API not loaded');
+    return;
+  }
+
+  try {
+    const latLng = new google.maps.LatLng(coordinates.lat, coordinates.lng);
+    const bounds = map.getBounds();
+
+    if (bounds && !bounds.contains(latLng)) {
+      const currentCenter = map.getCenter();
+      if (currentCenter) {
+        const panBounds = new google.maps.LatLngBounds();
+        panBounds.extend(currentCenter);
+        panBounds.extend(latLng);
+        // Add padding to make the pan more visible
+        map.fitBounds(panBounds, {
+          top: 50,
+          right: 50,
+          bottom: 50,
+          left: 50,
+        });
+      } else {
+        map.panTo(latLng);
+      }
+    }
+  } catch (error) {
+    console.error('Error panning map:', error);
+  }
+}
+

package/src/lib/booking/marker-icons.ts

@@ -0,0 +1,113 @@
+/**
+ * Marker icon generation utilities
+ */
+
+export interface MarkerIconOptions {
+  bgColor: string;
+  distanceStr?: string;
+  walkingTimeStr?: string;
+  label?: string;
+}
+
+/**
+ * Escape text for safe use in SVG
+ */
+function escapeSvgText(text: string): string {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/**
+ * Validate and sanitize color value (hex color)
+ */
+function validateColor(color: string): string {
+  // Only allow hex colors (# followed by 3 or 6 hex digits)
+  const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  if (hexColorRegex.test(color)) {
+    return color;
+  }
+  // Default to a safe color if invalid
+  console.warn(`Invalid color provided: ${color}, using default`);
+  return '#dc2626';
+}
+
+/**
+ * Truncate text to fit within marker width
+ */
+function truncateText(text: string, maxLength: number = 20): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength - 3) + '...';
+}
+
+/**
+ * Generate SVG icon for pickup location marker with distance/time
+ */
+export function createDistanceMarkerIcon(options: MarkerIconOptions): string {
+  const { bgColor, distanceStr, walkingTimeStr } = options;
+  const safeColor = validateColor(bgColor);
+  const text = distanceStr && walkingTimeStr 
+    ? truncateText(`${distanceStr} • ${walkingTimeStr}`, 20)
+    : '';
+  const escapedText = escapeSvgText(text);
+
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+    <svg width="120" height="32" viewBox="0 0 120 32" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="0" width="120" height="24" rx="4" fill="${safeColor}"/>
+      <polygon points="55,24 60,32 65,24" fill="${safeColor}"/>
+      <text x="60" y="16" fill="white" font-size="10" font-weight="600" text-anchor="middle" font-family="Arial">${escapedText}</text>
+    </svg>
+  `)}`;
+}
+
+/**
+ * Generate SVG icon for simple pickup location pin
+ */
+export function createPinMarkerIcon(color: string): string {
+  const safeColor = validateColor(color);
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+    <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16 0C7.163 0 0 7.163 0 16C0 24.837 16 40 16 40C16 40 32 24.837 32 16C32 7.163 24.837 0 16 0Z" fill="#ffffff"/>
+      <path d="M16 2C8.268 2 2 8.268 2 16C2 22.177 16 38 16 38C16 38 30 22.177 30 16C30 8.268 23.732 2 16 2Z" fill="${safeColor}"/>
+      <circle cx="16" cy="16" r="6" fill="#ffffff"/>
+    </svg>
+  `)}`;
+}
+
+/**
+ * Generate SVG icon for user's searched location pin
+ */
+export function createSearchedLocationPinIcon(): string {
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+    <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M16 0C7.163 0 0 7.163 0 16C0 24.837 16 40 16 40C16 40 32 24.837 32 16C32 7.163 24.837 0 16 0Z" fill="#ffffff"/>
+      <path d="M16 2C8.268 2 2 8.268 2 16C2 22.177 16 38 16 38C16 38 30 22.177 30 16C30 8.268 23.732 2 16 2Z" fill="#3b82f6"/>
+      <circle cx="16" cy="16" r="6" fill="#ffffff"/>
+    </svg>
+  `)}`;
+}
+
+/**
+ * Generate SVG icon for destination marker pin with text below (yellow)
+ */
+export function createDestinationMarkerIcon(name: string, color: string = '#facc15'): string {
+  const safeColor = validateColor(color);
+  const escapedName = escapeSvgText(truncateText(name, 20));
+  // SVG includes pin (40px height) + text below (20px height) = 60px total
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
+    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <!-- Pin marker (centered horizontally, at top) -->
+      <g transform="translate(24, 0)">
+        <path d="M16 0C7.163 0 0 7.163 0 16C0 24.837 16 40 16 40C16 40 32 24.837 32 16C32 7.163 24.837 0 16 0Z" fill="#ffffff"/>
+        <path d="M16 2C8.268 2 2 8.268 2 16C2 22.177 16 38 16 38C16 38 30 22.177 30 16C30 8.268 23.732 2 16 2Z" fill="${safeColor}"/>
+        <circle cx="16" cy="16" r="6" fill="#ffffff"/>
+      </g>
+      <!-- Text below pin -->
+      <text x="40" y="52" fill="#1f2937" font-size="12" font-weight="600" text-anchor="middle" font-family="Arial, sans-serif">${escapedName}</text>
+    </svg>
+  `)}`;
+}
+

package/src/lib/booking/normalize-booking-product-id.ts

@@ -0,0 +1,21 @@
+/**
+ * Normalize IDs used in TicketBooth query params (product id, product option id).
+ * Strips hash fragments, accidental query strings, or concatenated `&…` tails — aligned with
+ * defensive parsing in GetAvailabilitiesHandler.
+ */
+export function normalizeBookingProductId(rawId: string): string {
+  const trimmed = rawId.trim();
+  if (!trimmed) return '';
+  const withoutHash = trimmed.split('#', 1)[0] ?? '';
+  const withoutQuery = withoutHash.split('?', 1)[0] ?? '';
+  const normalized = withoutQuery.split('&', 1)[0] ?? '';
+  return normalized.trim();
+}
+
+/** True when the raw value clearly contains URL/query junk and should be normalized before use. */
+export function isSuspiciousBookingProductId(value: string): boolean {
+  return /[?&=]/.test(value);
+}
+
+/** Alias: same normalization for get-availabilities lookup id (product or option). */
+export const normalizeAvailabilityLookupId = normalizeBookingProductId;

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

@@ -0,0 +1,25 @@
+/**
+ * Types for pickup location selector
+ */
+
+import type { PickupLocation } from '@/lib/booking-api';
+import type { Coordinates } from '@/lib/booking/location-utils';
+
+export interface NearbyLocation extends PickupLocation {
+  distance: number;
+  walkingTime: number;
+  drivingTime: number;
+}
+
+export interface SearchedLocation {
+  address: string;
+  coordinates: Coordinates | null;
+}
+
+export interface AutocompleteSuggestion {
+  placeId: string;
+  mainText: string;
+  secondaryText: string;
+  description: string;
+}
+

package/src/lib/booking/places-api.ts

@@ -0,0 +1,154 @@
+/**
+ * Google Places API (New) utilities
+ */
+
+export interface AutocompleteSuggestion {
+  placeId: string;
+  mainText: string;
+  secondaryText: string;
+  description: string;
+}
+
+// Internal API response types
+interface PlacePrediction {
+  placeId: string;
+  text?: { text: string };
+  structuredFormat?: {
+    mainText?: { text: string };
+    secondaryText?: { text: string };
+  };
+}
+
+interface AutocompleteSuggestionResponse {
+  placePrediction?: PlacePrediction;
+}
+
+const GOOGLE_PLACES_API_BASE = 'https://places.googleapis.com/v1';
+
+/**
+ * Get autocomplete suggestions using Places API (New)
+ */
+export async function getAutocompleteSuggestions(
+  input: string,
+  apiKey: string,
+  locationBias?: { latitude: number; longitude: number; radius: number }
+): Promise<AutocompleteSuggestion[]> {
+  if (!input.trim() || !apiKey) {
+    return [];
+  }
+
+  try {
+    const response = await fetch(`${GOOGLE_PLACES_API_BASE}/places:autocomplete`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Goog-Api-Key': apiKey,
+        'X-Goog-FieldMask':
+          'suggestions.placePrediction.placeId,suggestions.placePrediction.text,suggestions.placePrediction.structuredFormat',
+      },
+      body: JSON.stringify({
+        input,
+        includedRegionCodes: ['ca'], // Restrict to Canada
+        ...(locationBias && {
+          locationBias: {
+            circle: {
+              center: {
+                latitude: locationBias.latitude,
+                longitude: locationBias.longitude,
+              },
+              radius: locationBias.radius,
+            },
+          },
+        }),
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Autocomplete API error:', response.status, errorText);
+      throw new Error(`Autocomplete request failed: ${response.status} ${errorText}`);
+    }
+
+    const data = await response.json() as {
+      suggestions?: AutocompleteSuggestionResponse[];
+    };
+
+    if (data.suggestions && Array.isArray(data.suggestions)) {
+      return data.suggestions
+        .filter((s): s is AutocompleteSuggestionResponse & { placePrediction: PlacePrediction } => 
+          !!s.placePrediction
+        )
+        .map((s) => {
+          const prediction = s.placePrediction;
+          const text = prediction.text?.text || '';
+          const structuredFormat = prediction.structuredFormat || {};
+
+          return {
+            placeId: prediction.placeId,
+            mainText: structuredFormat.mainText?.text || text,
+            secondaryText: structuredFormat.secondaryText?.text || '',
+            description: text,
+          };
+        });
+    }
+
+    return [];
+  } catch (error) {
+    console.error('Autocomplete error:', error);
+    return [];
+  }
+}
+
+/**
+ * Get place coordinates and types using Place Details API (New)
+ */
+export async function getPlaceDetails(
+  placeId: string,
+  apiKey: string
+): Promise<{ lat: number; lng: number; types: string[] } | null> {
+  try {
+    const response = await fetch(`${GOOGLE_PLACES_API_BASE}/places/${placeId}`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Goog-Api-Key': apiKey,
+        'X-Goog-FieldMask': 'location,types',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error('Place details request failed');
+    }
+
+    const data = await response.json();
+
+    if (data.location) {
+      return {
+        lat: data.location.latitude,
+        lng: data.location.longitude,
+        types: data.types || [],
+      };
+    }
+
+    return null;
+  } catch (error) {
+    console.error('Error getting place details:', error);
+    return null;
+  }
+}
+
+/**
+ * Get place coordinates using Place Details API (New)
+ * @deprecated Use getPlaceDetails instead to also get types
+ */
+export async function getPlaceCoordinates(
+  placeId: string,
+  apiKey: string
+): Promise<{ lat: number; lng: number } | null> {
+  const details = await getPlaceDetails(placeId, apiKey);
+  if (details) {
+    return { lat: details.lat, lng: details.lng };
+  }
+  return null;
+}
+