@getmicdrop/venue-calendar 2.0.0 → 3.2.0

package/src/lib/api/types.ts

@@ -0,0 +1,289 @@
+/**
+ * API Types for MicDrop Public Checkout API
+ *
+ * These types define the shape of API requests and responses
+ * for the public checkout flow (no authentication required).
+ */
+
+// ============================================================================
+// Payment & Orders
+// ============================================================================
+
+export interface PaymentIntentRequest {
+  IP?: string;
+  productQuantities: Record<string | number, number>;
+}
+
+export interface PaymentIntentResponse {
+  client_secret: string;
+  amount: number;
+  amount_total: number;
+  tax_amount_exclusive?: number;
+  service_fee?: number;
+  discount?: number;
+  gift_card_amount?: number;
+  gift_card_code?: string;
+  stripe_publishable_key?: string;
+}
+
+export interface CompleteReservationResponse {
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+export interface CancelReservationResponse {
+  success: boolean;
+  message?: string;
+  error?: string;
+}
+
+export interface CreateOrderRequest {
+  eventId: string | number;
+  promoCode?: string;
+}
+
+export interface CreateOrderResponse {
+  uuid: string;
+}
+
+export interface ValidatePaymentRequest {
+  id: string;
+  paymentIntentId: string;
+  tickets: Record<string | number, number>;
+  firstName: string;
+  lastName: string;
+  email: string;
+  paymentMethod: string;
+  mailingList?: boolean;
+  saleType?: string;
+  attendees?: AttendeeInfo[];
+}
+
+export interface AttendeeInfo {
+  ticketId: string | number;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+export interface ValidatePaymentResponse {
+  success: boolean;
+  status: string;
+  orderUUID?: string;
+  error?: string;
+}
+
+// ============================================================================
+// Session Management
+// ============================================================================
+
+export interface ExtendSessionRequest {
+  orderUuid: string;
+}
+
+export interface ExtendSessionResponse {
+  success: boolean;
+  newExpiryTime?: string;
+  remainingExtensions?: number;
+  error?: string;
+}
+
+export interface SessionStatus {
+  expiresAt?: string;
+  extensionCount?: number;
+  remainingExtensions?: number;
+  canExtend?: boolean;
+  reservationCount?: number;
+  error?: string;
+}
+
+// ============================================================================
+// Promo Codes
+// ============================================================================
+
+export interface PromoValidationResponse {
+  valid: boolean;
+  revealHiddenTickets?: boolean;
+  revealTicketIds?: number[];
+  provideDiscount?: boolean;
+  discountType?: 'percentage' | 'fixed';
+  amount?: number;
+  code?: string;
+  error?: string;
+}
+
+export interface HasPromoCodesResponse {
+  hasPromoCodes: boolean;
+}
+
+// ============================================================================
+// Orders
+// ============================================================================
+
+export interface Order {
+  uuid: string;
+  id?: number;
+  customerEmail: string;
+  customerFirstName?: string;
+  customerLastName?: string;
+  status: string;
+  totalAmount: number;
+  subtotal?: number;
+  serviceFeesAmount: number;
+  taxAmount: number;
+  discount?: number;
+  paymentIntentId?: string;
+  paymentMethod?: string;
+  purchasedTickets: PurchasedTicket[];
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface PurchasedTicket {
+  uuid: string;
+  id?: number;
+  ticketNumber?: string;
+  orderId?: string | number;
+  attendeeFirstName?: string;
+  attendeeLastName?: string;
+  attendeeEmail?: string;
+  ticketName: string;
+  ticketTypeId?: number;
+  purchasePrice: number;
+  status?: string;
+  checkedIn?: boolean;
+  checkedInAt?: string;
+}
+
+// ============================================================================
+// Events
+// ============================================================================
+
+export interface Event {
+  eventID: number;
+  id?: number;
+  name: string;
+  title?: string;
+  slug?: string;
+  description?: string;
+  date: string;
+  startDateTime?: string;
+  endDateTime?: string;
+  doorsOpenTime?: string;
+  timezone?: string;
+  venueId?: number;
+  venueName?: string;
+  venueAddress?: string;
+  location?: string;
+  imageUrl?: string;
+  imageURL?: string;
+  status?: string;
+  isPublished?: boolean;
+  isCancelled?: boolean;
+  availableTickets?: AvailableTicket[];
+  ticketsAvailable?: number;
+  ticketsSold?: number;
+  minPrice?: number;
+  maxPrice?: number;
+  ctaText?: string;
+  ctaState?: 'available' | 'sold_out' | 'coming_soon' | 'ended';
+  showPerformers?: boolean;
+  eventSeriesId?: number;
+  seriesInstanceNumber?: number;
+}
+
+export interface AvailableTicket {
+  id: number;
+  name: string;
+  description?: string;
+  price: number;
+  quantity: number;
+  quantitySold?: number;
+  quantityAvailable?: number;
+  minPerOrder?: number;
+  maxPerOrder?: number;
+  saleStartDate?: string;
+  saleEndDate?: string;
+  isHidden?: boolean;
+  revealWithPromoCode?: boolean;
+  ticketType?: number; // 0 = GA, 1 = assigned
+  sectionId?: number;
+  sortOrder?: number;
+}
+
+export interface EventPerformersResponse {
+  performers: Performer[];
+  showPerformers: boolean;
+}
+
+export interface Performer {
+  id: number;
+  stageName: string;
+  displayName?: string;
+  avatar?: string;
+  order?: number;
+}
+
+// ============================================================================
+// Venues
+// ============================================================================
+
+export interface Venue {
+  id: number;
+  name: string;
+  slug?: string;
+  address?: string;
+  googleLocationNameCache?: string;
+  city?: string;
+  state?: string;
+  zipCode?: string;
+  country?: string;
+  timezone?: string;
+  logoUrl?: string;
+  serviceFeePercentage?: number;
+  serviceFeeCents?: number;
+  taxPercentage?: number;
+  organizationId?: number;
+}
+
+// ============================================================================
+// Series
+// ============================================================================
+
+export interface SeriesOccurrence {
+  eventId: number;
+  date: string;
+  startDateTime: string;
+  endDateTime?: string;
+  instanceNumber: number;
+  status: string;
+  ticketsAvailable?: number;
+  ctaState?: string;
+}
+
+export interface SeriesOccurrencesResponse {
+  seriesId: number;
+  occurrences: SeriesOccurrence[];
+}
+
+// ============================================================================
+// API Configuration
+// ============================================================================
+
+export interface ApiConfig {
+  baseUrl?: string;
+  timeout?: number;
+  onError?: (error: Error) => void;
+}
+
+// ============================================================================
+// Generic API Response
+// ============================================================================
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  statusCode?: number;
+}

package/src/lib/api/venues.ts

@@ -0,0 +1,100 @@
+/**
+ * Venues API
+ *
+ * Functions for fetching venue data including
+ * service fees and tax configuration.
+ */
+
+import { logger } from '../utils/logger.js';
+import { getPublicBaseUrl, getLegacyPublicUrl, simpleFetch } from './client.js';
+import type { Venue } from './types.js';
+
+/**
+ * Get venue details (public, no auth required)
+ *
+ * Fetches venue information including service fees and taxes
+ * needed for checkout calculations.
+ *
+ * @param venueId - The venue ID
+ * @returns Venue details or null on error
+ */
+export async function getVenue(venueId: string | number): Promise<Venue | null> {
+  try {
+    if (!venueId) {
+      logger.warn('getVenue called without venueId');
+      return null;
+    }
+
+    // Uses /api/public/getVenue/:id (same as micdrop-frontend)
+    const response = await fetch(`${getLegacyPublicUrl()}/getVenue/${venueId}`);
+
+    if (!response.ok) {
+      logger.error(`Failed to fetch venue: ${response.status}`);
+      return null;
+    }
+
+    return response.json();
+  } catch (error) {
+    logger.error('Error fetching venue:', error);
+    return null;
+  }
+}
+
+/**
+ * Get venue service fee configuration
+ *
+ * Returns just the fee-related fields for checkout calculations.
+ *
+ * @param venueId - The venue ID
+ * @returns Fee configuration or null on error
+ */
+export async function getVenueFees(
+  venueId: string | number
+): Promise<{
+  serviceFeePercentage: number;
+  serviceFeeCents: number;
+  taxPercentage: number;
+} | null> {
+  const venue = await getVenue(venueId);
+
+  if (!venue) {
+    return null;
+  }
+
+  return {
+    serviceFeePercentage: venue.serviceFeePercentage ?? 0,
+    serviceFeeCents: venue.serviceFeeCents ?? 0,
+    taxPercentage: venue.taxPercentage ?? 0,
+  };
+}
+
+/**
+ * Get venue by slug
+ *
+ * Fetches venue using its URL-friendly slug.
+ *
+ * @param slug - The venue slug
+ * @returns Venue details or null on error
+ */
+export async function getVenueBySlug(slug: string): Promise<Venue | null> {
+  try {
+    if (!slug) {
+      logger.warn('getVenueBySlug called without slug');
+      return null;
+    }
+
+    const encodedSlug = encodeURIComponent(slug);
+    // Uses /api/public/venue/:slug (same as micdrop-frontend)
+    const response = await fetch(`${getLegacyPublicUrl()}/venue/${encodedSlug}`);
+
+    if (!response.ok) {
+      logger.error(`Failed to fetch venue by slug: ${response.status}`);
+      return null;
+    }
+
+    return response.json();
+  } catch (error) {
+    logger.error('Error fetching venue by slug:', error);
+    return null;
+  }
+}

package/src/lib/theme.js

@@ -0,0 +1,209 @@
+/**
+ * Theme Configuration for Embeddable Calendar Widget
+ *
+ * This module provides comprehensive theming options for the calendar widget.
+ * All colors use HSL format for easy manipulation.
+ *
+ * Usage:
+ * 1. Import and call applyTheme() with your custom theme
+ * 2. Or set CSS custom properties directly on the widget container
+ *
+ * Example:
+ * ```js
+ * import { applyTheme, themes } from '@getmicdrop/venue-calendar/theme';
+ * applyTheme(themes.dark);
+ *
+ * // Or custom theme:
+ * applyTheme({
+ *   brandPrimary: '270 76% 60%', // Purple
+ *   textPrimary: '0 0% 100%',
+ *   bgPrimary: '0 0% 10%',
+ * });
+ * ```
+ */
+
+// Default light theme
+export const lightTheme = {
+  // Brand colors
+  brandPrimary: '217 91% 60%', // #2563EB - Blue
+
+  // Text colors
+  textPrimary: '0 0% 0%', // Black
+  textSecondary: '0 0% 40%', // Dark Gray
+  textTertiary: '0 0% 60%', // Gray
+
+  // Background colors
+  bgPrimary: '0 0% 100%', // White
+  bgSecondary: '0 0% 98%', // Light Gray
+  bgQuaternary: '0 0% 96%', // Very Light Gray
+
+  // Border/Stroke colors
+  strokePrimary: '0 0% 80%', // Medium Gray
+  strokeSecondary: '0 0% 90%', // Light Gray
+
+  // Status colors
+  statusOnSale: '217 91% 60%', // Blue
+  statusSellingFast: '38 92% 50%', // Orange
+  statusSoldOut: '0 84% 60%', // Red
+
+  // Calendar specific
+  todayBg: '217 91% 97%', // Light blue
+  todayText: '217 91% 50%', // Blue
+  eventDotOnSale: '217 91% 60%',
+  eventDotSellingFast: '38 92% 50%',
+  eventDotSoldOut: '0 84% 60%',
+
+  // Interaction states
+  hoverBg: '0 0% 96%',
+  focusRing: '217 91% 60%',
+};
+
+// Dark theme
+export const darkTheme = {
+  // Brand colors
+  brandPrimary: '217 91% 65%', // Lighter blue for dark mode
+
+  // Text colors
+  textPrimary: '0 0% 98%', // Near white
+  textSecondary: '0 0% 70%', // Light gray
+  textTertiary: '0 0% 50%', // Gray
+
+  // Background colors
+  bgPrimary: '0 0% 9%', // Very dark gray
+  bgSecondary: '0 0% 13%', // Dark gray
+  bgQuaternary: '0 0% 17%', // Slightly lighter
+
+  // Border/Stroke colors
+  strokePrimary: '0 0% 30%',
+  strokeSecondary: '0 0% 20%',
+
+  // Status colors
+  statusOnSale: '217 91% 65%',
+  statusSellingFast: '38 92% 55%',
+  statusSoldOut: '0 84% 65%',
+
+  // Calendar specific
+  todayBg: '217 50% 20%',
+  todayText: '217 91% 70%',
+  eventDotOnSale: '217 91% 65%',
+  eventDotSellingFast: '38 92% 55%',
+  eventDotSoldOut: '0 84% 65%',
+
+  // Interaction states
+  hoverBg: '0 0% 20%',
+  focusRing: '217 91% 65%',
+};
+
+// High contrast theme for accessibility
+export const highContrastTheme = {
+  brandPrimary: '217 100% 50%',
+  textPrimary: '0 0% 0%',
+  textSecondary: '0 0% 20%',
+  textTertiary: '0 0% 30%',
+  bgPrimary: '0 0% 100%',
+  bgSecondary: '0 0% 95%',
+  bgQuaternary: '0 0% 90%',
+  strokePrimary: '0 0% 0%',
+  strokeSecondary: '0 0% 30%',
+  statusOnSale: '217 100% 40%',
+  statusSellingFast: '30 100% 40%',
+  statusSoldOut: '0 100% 40%',
+  todayBg: '217 100% 90%',
+  todayText: '217 100% 30%',
+  eventDotOnSale: '217 100% 40%',
+  eventDotSellingFast: '30 100% 40%',
+  eventDotSoldOut: '0 100% 40%',
+  hoverBg: '217 100% 95%',
+  focusRing: '217 100% 40%',
+};
+
+// Preset themes collection
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+  highContrast: highContrastTheme,
+};
+
+/**
+ * Apply a theme to the calendar widget
+ * @param {Object} theme - Theme object with HSL color values
+ * @param {HTMLElement} container - Optional container element (defaults to :root)
+ */
+export function applyTheme(theme, container = document.documentElement) {
+  const cssVarMap = {
+    brandPrimary: '--Brand-Primary',
+    textPrimary: '--Text-Primary',
+    textSecondary: '--Text-Secondary',
+    textTertiary: '--Text-Tartiary', // Note: keeping original typo for compatibility
+    bgPrimary: '--BG-Primary',
+    bgSecondary: '--BG-Secondary',
+    bgQuaternary: '--BG-Quaternary',
+    strokePrimary: '--Stroke-Primary',
+    strokeSecondary: '--Stroke-Secondary',
+    statusOnSale: '--Status-OnSale',
+    statusSellingFast: '--Status-SellingFast',
+    statusSoldOut: '--Status-SoldOut',
+    todayBg: '--Today-BG',
+    todayText: '--Today-Text',
+    eventDotOnSale: '--EventDot-OnSale',
+    eventDotSellingFast: '--EventDot-SellingFast',
+    eventDotSoldOut: '--EventDot-SoldOut',
+    hoverBg: '--Hover-BG',
+    focusRing: '--Focus-Ring',
+  };
+
+  Object.entries(theme).forEach(([key, value]) => {
+    const cssVar = cssVarMap[key];
+    if (cssVar) {
+      container.style.setProperty(cssVar, value);
+    }
+  });
+}
+
+/**
+ * Generate CSS string for embedding
+ * @param {Object} theme - Theme object
+ * @returns {string} CSS string
+ */
+export function generateThemeCSS(theme) {
+  const cssVarMap = {
+    brandPrimary: '--Brand-Primary',
+    textPrimary: '--Text-Primary',
+    textSecondary: '--Text-Secondary',
+    textTertiary: '--Text-Tartiary',
+    bgPrimary: '--BG-Primary',
+    bgSecondary: '--BG-Secondary',
+    bgQuaternary: '--BG-Quaternary',
+    strokePrimary: '--Stroke-Primary',
+    strokeSecondary: '--Stroke-Secondary',
+    statusOnSale: '--Status-OnSale',
+    statusSellingFast: '--Status-SellingFast',
+    statusSoldOut: '--Status-SoldOut',
+    todayBg: '--Today-BG',
+    todayText: '--Today-Text',
+    eventDotOnSale: '--EventDot-OnSale',
+    eventDotSellingFast: '--EventDot-SellingFast',
+    eventDotSoldOut: '--EventDot-SoldOut',
+    hoverBg: '--Hover-BG',
+    focusRing: '--Focus-Ring',
+  };
+
+  const vars = Object.entries(theme)
+    .map(([key, value]) => {
+      const cssVar = cssVarMap[key];
+      return cssVar ? `  ${cssVar}: ${value};` : null;
+    })
+    .filter(Boolean)
+    .join('\n');
+
+  return `:root {\n${vars}\n}`;
+}
+
+export default {
+  themes,
+  lightTheme,
+  darkTheme,
+  highContrastTheme,
+  applyTheme,
+  generateThemeCSS,
+};