@ticketboothapp/booking 0.1.4 → 0.1.8

package/src/lib/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/pickup-location-types.ts

@@ -0,0 +1,25 @@
+/**
+ * Types for pickup location selector
+ */
+
+import type { PickupLocation } from './api';
+import type { Coordinates } from './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/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;
+}
+