@getmicdrop/venue-calendar 3.3.0 → 3.3.1

package/src/lib/utils/event-transform.js

@@ -0,0 +1,464 @@
+/**
+ * Event Transformation Utilities
+ * 
+ * Single source of truth for transforming API event data into display-ready formats.
+ * Consolidates duplicate transformation logic from utils.js and api.js.
+ */
+
+import {
+  getIANATimezone,
+  formatEventTime,
+  formatTimeRange,
+  getDateParts as getDatePartsNew,
+} from './datetime.js';
+
+/** CDN base URL for image assets */
+const CDN_BASE_URL = 'https://moxy.sfo3.digitaloceanspaces.com';
+
+/**
+ * Default placeholder image
+ * Using a data URI SVG to avoid third-party dependencies
+ */
+const PLACEHOLDER_IMAGE = 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 300" fill="none">
+  <rect width="200" height="300" fill="#E5E7EB"/>
+  <rect x="60" y="90" width="80" height="80" rx="10" fill="#D1D5DB"/>
+  <circle cx="85" cy="115" r="10" fill="#9CA3AF"/>
+  <path d="M70 155 L100 125 L130 155 L130 155" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <text x="100" y="210" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#6B7280">Event Image</text>
+</svg>`);
+
+// ============================================================================
+// Shared Helpers
+// ============================================================================
+
+/**
+ * Prepend CDN URL to relative image paths.
+ * 
+ * @param {string} imagePath - Image path (relative or absolute)
+ * @returns {string} Full image URL
+ */
+export function getCDNImageUrl(imagePath) {
+  if (!imagePath) return '';
+  if (imagePath.startsWith('/')) {
+    return `${CDN_BASE_URL}${imagePath}`;
+  }
+  return imagePath;
+}
+
+/**
+ * Extract image URL from event data with fallbacks.
+ * 
+ * @param {Object} event - Event object from API
+ * @returns {string} Resolved image URL
+ */
+export function getEventImageUrl(event) {
+  const rawImage = event.image || event.coverImage || event.imageUrl || event.image_url || '';
+  return getCDNImageUrl(rawImage) || PLACEHOLDER_IMAGE;
+}
+
+/**
+ * Calculate ticket status based on capacity and dates.
+ * 
+ * @param {Object} ticket - Ticket object
+ * @returns {string} Status: 'available', 'low', 'sold_out', 'not_started', 'ended'
+ */
+export function calculateTicketStatus(ticket) {
+  const now = new Date();
+  
+  if (ticket.saleStartDate && new Date(ticket.saleStartDate) > now) {
+    return 'not_started';
+  }
+  if (ticket.saleEndDate && new Date(ticket.saleEndDate) < now) {
+    return 'ended';
+  }
+  
+  const remaining = ticket.remainingCapacity ?? ticket.quantityRemaining ?? ticket.quantity ?? 0;
+  const total = ticket.totalCapacity ?? ticket.quantity ?? remaining;
+  
+  if (remaining === 0) return 'sold_out';
+  if (total > 0 && remaining / total < 0.1) return 'low';
+  return 'available';
+}
+
+/**
+ * Filter tickets to only public/online sales.
+ * 
+ * @param {Array} tickets - Array of ticket objects
+ * @param {Object} options - Filter options
+ * @param {boolean} options.excludeDoorOnly - Exclude "at the door only" tickets (salesChannel === 2)
+ * @param {boolean} options.publicOnly - Only include visibility === 0 tickets
+ * @returns {Array} Filtered tickets
+ */
+export function filterPublicTickets(tickets, options = {}) {
+  if (!Array.isArray(tickets)) return [];
+  
+  let filtered = tickets;
+  
+  if (options.excludeDoorOnly) {
+    filtered = filtered.filter(t => t.salesChannel !== 2);
+  }
+  
+  if (options.publicOnly) {
+    filtered = filtered.filter(t => t.visibility === 0);
+  }
+  
+  return filtered;
+}
+
+/**
+ * Calculate scarcity data for an event's tickets.
+ * 
+ * @param {Array} tickets - Array of ticket objects (should be pre-filtered)
+ * @returns {Object} { totalRemaining, totalCapacity, isSoldOut }
+ */
+export function calculateScarcity(tickets) {
+  if (!Array.isArray(tickets) || tickets.length === 0) {
+    return { totalRemaining: 0, totalCapacity: 0, isSoldOut: false };
+  }
+  
+  let totalRemaining = 0;
+  let totalCapacity = 0;
+  
+  for (const ticket of tickets) {
+    const remaining = ticket.remainingCapacity ?? ticket.quantityRemaining ?? ticket.quantity ?? 0;
+    const capacity = ticket.totalCapacity ?? ticket.quantity ?? remaining;
+    totalRemaining += remaining;
+    totalCapacity += capacity;
+  }
+  
+  return {
+    totalRemaining,
+    totalCapacity,
+    isSoldOut: totalRemaining === 0,
+  };
+}
+
+/**
+ * Find the lowest price among tickets.
+ * 
+ * @param {Array} tickets - Array of ticket objects
+ * @returns {number} Lowest price or 0
+ */
+export function findLowestPrice(tickets) {
+  if (!Array.isArray(tickets) || tickets.length === 0) return 0;
+  
+  const prices = tickets
+    .map(t => t.price ?? t.ticketPrice ?? 0)
+    .filter(p => p > 0);
+  
+  return prices.length > 0 ? Math.min(...prices) : 0;
+}
+
+// ============================================================================
+// Date/Time Formatting
+// Now uses consolidated datetime module from @getmicdrop/svelte-components
+// ============================================================================
+
+/**
+ * Format a datetime for display in a specific timezone.
+ * @deprecated Use formatEventTime or formatEventDateTime from datetime.js
+ * 
+ * @param {string} isoString - ISO datetime string
+ * @param {string} timeZone - IANA timezone
+ * @param {Object} options - Intl.DateTimeFormat options
+ * @returns {string} Formatted string
+ */
+export function formatInTimezone(isoString, timeZone, options) {
+  if (!isoString) return '';
+  
+  const date = new Date(isoString);
+  if (isNaN(date.getTime())) return '';
+  
+  return new Intl.DateTimeFormat('en-US', { ...options, timeZone }).format(date);
+}
+
+/**
+ * Format event time range for display.
+ * Uses formatTimeRange from datetime module.
+ * 
+ * @param {Object} event - Event object with startDateTime/endDateTime
+ * @param {string} timeZone - IANA timezone
+ * @returns {string} Formatted time range (e.g., "8:00 PM - 10:00 PM")
+ */
+export function formatEventTimeRange(event, timeZone) {
+  if (!event.startDateTime) return '';
+  
+  try {
+    if (!event.endDateTime) {
+      return formatEventTime(event.startDateTime, timeZone);
+    }
+    return formatTimeRange(event.startDateTime, event.endDateTime, timeZone);
+  } catch {
+    // Fallback to legacy implementation for invalid data
+    const formatOptions = {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    };
+    
+    const startTime = formatInTimezone(event.startDateTime, timeZone, formatOptions);
+    
+    if (!event.endDateTime) return startTime;
+    
+    const endTime = formatInTimezone(event.endDateTime, timeZone, formatOptions);
+    return startTime && endTime ? `${startTime} - ${endTime}` : startTime;
+  }
+}
+
+/**
+ * Get date parts for display (day, month, dateOfMonth).
+ * Uses getDateParts from datetime module.
+ * 
+ * @param {string} isoString - ISO datetime string
+ * @param {string} timeZone - IANA timezone
+ * @returns {Object} { day, month, dateOfMonth }
+ */
+export function getDateParts(isoString, timeZone) {
+  if (!isoString) return { day: '', month: '', dateOfMonth: '' };
+  
+  try {
+    const parts = getDatePartsNew(isoString, timeZone);
+    return {
+      day: parts.day,
+      month: parts.month,
+      dateOfMonth: String(parts.date),
+    };
+  } catch {
+    // Fallback to legacy implementation for invalid data
+    return {
+      day: formatInTimezone(isoString, timeZone, { weekday: 'short' }),
+      month: formatInTimezone(isoString, timeZone, { month: 'short' }),
+      dateOfMonth: formatInTimezone(isoString, timeZone, { day: 'numeric' }),
+    };
+  }
+}
+
+// ============================================================================
+// Main Transform Functions
+// ============================================================================
+
+/**
+ * Transform modes for different use cases.
+ */
+export const TransformMode = {
+  /** Minimal data for list/card views */
+  BROWSE: 'browse',
+  /** Full data for detail pages */
+  DETAIL: 'detail',
+};
+
+/**
+ * Transform an API event into display-ready format.
+ * 
+ * @param {Object} apiEvent - Raw event from API
+ * @param {Object} options - Transform options
+ * @param {string} options.mode - Transform mode: 'browse' or 'detail'
+ * @returns {Object} Transformed event
+ */
+export function transformEvent(apiEvent, options = {}) {
+  const { mode = TransformMode.DETAIL } = options;
+  
+  if (!apiEvent) {
+    return mode === TransformMode.BROWSE
+      ? getEmptyBrowseEvent()
+      : getEmptyDetailEvent();
+  }
+  
+  const timeZone = getIANATimezone(apiEvent.timeZone);
+  const imageUrl = getEventImageUrl(apiEvent);
+  
+  // Base properties shared by both modes
+  const base = {
+    id: apiEvent.id || apiEvent.ID,
+    name: apiEvent.title || apiEvent.name || '',
+    image: imageUrl,
+    timeZone,
+    startDateTime: apiEvent.startDateTime || null,
+  };
+  
+  if (mode === TransformMode.BROWSE) {
+    return transformBrowseEvent(apiEvent, base, timeZone);
+  }
+  
+  return transformDetailEvent(apiEvent, base, timeZone, imageUrl);
+}
+
+/**
+ * Transform for browse/list views (minimal data).
+ */
+function transformBrowseEvent(apiEvent, base, timeZone) {
+  // Calculate date in venue timezone
+  let startDate = '';
+  if (apiEvent.startDateTime) {
+    const dt = new Date(apiEvent.startDateTime);
+    startDate = dt.toLocaleDateString('en-CA', {
+      timeZone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    });
+  }
+  
+  // Filter and calculate scarcity
+  const publicTickets = filterPublicTickets(apiEvent.availableTickets || [], { excludeDoorOnly: true });
+  const scarcity = calculateScarcity(publicTickets);
+  
+  return {
+    ...base,
+    date: startDate || apiEvent.date || '',
+    status: apiEvent.status || 'On Sale',
+    timeline: formatEventTimeRange(apiEvent, timeZone),
+    description: apiEvent.description || apiEvent.eventSummary || '',
+    venueId: apiEvent.venueId || apiEvent.venue_id,
+    eventSeriesId: apiEvent.eventSeriesId || null,
+    // Scarcity data
+    ticketsRemaining: scarcity.totalRemaining,
+    ticketsTotal: scarcity.totalCapacity,
+    isSoldOut: scarcity.isSoldOut,
+  };
+}
+
+/**
+ * Transform for detail views (full data).
+ */
+function transformDetailEvent(apiEvent, base, timeZone, imageUrl) {
+  const allTickets = (apiEvent.availableTickets || []).map(ticket => ({
+    ...ticket,
+    status: calculateTicketStatus(ticket),
+  }));
+  const publicTickets = filterPublicTickets(allTickets, { publicOnly: true });
+  const dateParts = getDateParts(apiEvent.startDateTime, timeZone);
+  
+  return {
+    ...base,
+    date: apiEvent.startDateTime ? formatDateCustom(apiEvent.startDateTime) : null,
+    endDateTime: apiEvent.endDateTime,
+    description: apiEvent.description,
+    timeline: formatInTimezone(apiEvent.startDateTime, timeZone, {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    }),
+    location: apiEvent.venue?.googleLocationNameCache || apiEvent.venue?.address || '',
+    ...dateParts,
+    coverImage: imageUrl,
+    price: findLowestPrice(apiEvent.availableTickets),
+    status: 'Only 2 left!', // TODO: Calculate from scarcity
+    eventSummary: apiEvent.eventSummary,
+    password: apiEvent.password,
+    availableTickets: allTickets,
+    publicTickets,
+    doorsOpenTime: apiEvent.doorsOpenTime,
+    venue: apiEvent.venue,
+    venueID: apiEvent.venueId,
+    eventID: apiEvent.ID,
+    stage: apiEvent.stage,
+    performers: apiEvent.performers,
+    ticketType: apiEvent.ticketType,
+    eventTicketingType: apiEvent.eventTicketingType,
+    purchasedTickets: apiEvent.purchasedTickets,
+    ShowImage: imageUrl,
+    displayStartTime: apiEvent.displayStartTime,
+    displayEndTime: apiEvent.displayEndTime,
+    displayDoorsTime: apiEvent.displayDoorsTime,
+    ageRestriction: apiEvent.ageRestriction || null,
+    minimumAge: apiEvent.ageRestriction || null,
+    ageRequirement: apiEvent.ageRestriction ? `${apiEvent.ageRestriction}` : null,
+    hasAgeRestriction: !!apiEvent.ageRestriction,
+    displayAgeRestriction: apiEvent.displayAgeRestriction ?? false,
+  };
+}
+
+/**
+ * Format date to custom format (for backwards compatibility).
+ */
+function formatDateCustom(isoString) {
+  if (!isoString) return null;
+  const date = new Date(isoString);
+  if (isNaN(date.getTime())) return null;
+  
+  const options = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  };
+  return new Intl.DateTimeFormat('en-US', options).format(date);
+}
+
+/**
+ * Empty event for browse mode.
+ */
+function getEmptyBrowseEvent() {
+  return {
+    id: null,
+    name: '',
+    date: '',
+    image: '',
+    status: 'unavailable',
+    timeline: '',
+    description: '',
+    venueId: null,
+    timeZone: 'UTC',
+    eventSeriesId: null,
+    startDateTime: null,
+    ticketsRemaining: 0,
+    ticketsTotal: 0,
+    isSoldOut: false,
+  };
+}
+
+/**
+ * Empty event for detail mode.
+ */
+function getEmptyDetailEvent() {
+  return {
+    id: null,
+    name: '',
+    date: null,
+    startDateTime: null,
+    endDateTime: null,
+    description: '',
+    timeline: '',
+    location: '',
+    day: '',
+    month: '',
+    dateOfMonth: null,
+    image: '',
+    coverImage: '',
+    price: 0,
+    status: 'unavailable',
+    eventSummary: '',
+    password: '',
+    availableTickets: [],
+    publicTickets: [],
+    doorsOpenTime: null,
+    venue: null,
+    venueID: null,
+    eventID: null,
+    stage: null,
+    performers: [],
+    ticketType: 0,
+    eventTicketingType: 0,
+    purchasedTickets: [],
+    ShowImage: '',
+    displayStartTime: null,
+    displayEndTime: null,
+    ageRestriction: null,
+    minimumAge: null,
+    ageRequirement: null,
+    hasAgeRestriction: false,
+    timeZone: 'UTC',
+  };
+}
+
+// ============================================================================
+// Backward Compatibility Exports
+// ============================================================================
+
+/**
+ * @deprecated Use transformEvent(event, { mode: TransformMode.BROWSE }) instead.
+ */
+export function transformEventData(apiEvent) {
+  return transformEvent(apiEvent, { mode: TransformMode.BROWSE });
+}