@bailierich/booking-components 2.0.0

package/types/index.ts

@@ -0,0 +1,369 @@
+// ============================================================================
+// Core Data Types
+// ============================================================================
+
+export interface Service {
+  id: string;
+  name: string;
+  price: number;
+  duration: number; // in minutes
+  description: string;
+  category?: string;
+  imageUrl?: string;
+}
+
+export interface ServiceCategory {
+  id: string;
+  name: string;
+  description?: string;
+  services: Service[];
+}
+
+export interface Addon {
+  id: string;
+  name: string;
+  price: number;
+  addonPrice?: number; // Alternative price field for addons (used by some implementations)
+  duration: number; // in minutes
+  description: string;
+  imageUrl?: string;
+}
+
+export interface OptInModule {
+  id: string;
+  label: string;
+  required: boolean;
+  formTitle?: string;
+  formFields?: FormField[];
+  // Optional: custom render function for advanced modules
+  // Returns the content to render inside the BottomSheet (not the BottomSheet itself)
+  renderCustomForm?: (
+    onClose: () => void,
+    onSubmitData: (data: any) => void,
+    colors: { primary: string; secondary: string; bookingText?: string }
+  ) => React.ReactNode;
+}
+
+export interface FormField {
+  id: string;
+  label: string;
+  type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'checkbox';
+  placeholder?: string;
+  required?: boolean;
+  options?: { value: string; label: string }[];
+}
+
+// ============================================================================
+// Booking Data
+// ============================================================================
+
+export interface BookingData {
+  serviceId: string;
+  date: string; // ISO date string
+  time: string;
+  addonIds: string[];
+  contactInfo: ContactInfo;
+  optInData?: Record<string, any>;
+  paymentIntentId?: string;
+  totalPrice: number;
+  depositAmount: number;
+}
+
+export interface ContactInfo {
+  name: string;
+  email: string;
+  phone: string;
+  notes?: string;
+}
+
+// ============================================================================
+// Configuration Types
+// ============================================================================
+// Note: BookingFlowConfig and BookingFlowProps are exported from BookingFlow component
+// to avoid duplication. Import those types from the component instead.
+
+export interface BackgroundConfig {
+  type: 'color' | 'gradient' | 'image';
+  value: string; // hex color, gradient CSS, or image URL
+}
+
+export interface TransitionConfig {
+  style: 'slide' | 'fade';
+  speed: 'fast' | 'normal' | 'slow';
+}
+
+export interface ProgressBarConfig {
+  style: 'dots' | 'bar' | 'minimal';
+}
+
+export interface StepConfig {
+  enabled?: boolean;
+  settings?: Record<string, any>;
+}
+
+// Service Selection Step Settings
+export interface ServiceSelectionSettings {
+  headerContent?: { value: string };
+  subheaderContent?: { value: string };
+  serviceLayout?: 'grid' | 'list';
+  columns?: 1 | 2 | 3 | 4;
+  showPricing?: boolean;
+  showDuration?: boolean;
+  showDescription?: boolean;
+  enableCategories?: boolean;
+  categoryStyle?: 'dropdown' | 'tabs' | 'pills' | 'chips' | 'accordion';
+  defaultCategoryView?: 'all' | string; // category ID
+  policyImages?: PolicyImage[];
+  policyText?: string;
+  imageSpacing?: 'none' | 'small' | 'medium' | 'large';
+  imageBorderRadius?: string;
+}
+
+export interface PolicyImage {
+  url: string;
+  alt?: string;
+}
+
+// Date Selection Step Settings
+export interface DateSelectionSettings {
+  headerContent?: { value: string };
+  calendarView?: 'month' | 'week';
+  allowedDaysAhead?: number;
+  blockedDates?: string[]; // ISO date strings
+}
+
+// Time Selection Step Settings
+export interface TimeSelectionSettings {
+  headerContent?: { value: string };
+  timeFormat?: '12h' | '24h';
+  showDuration?: boolean;
+  columns?: 2 | 3 | 4;
+  slotDuration?: number; // minutes
+}
+
+// Addon Selection Step Settings
+export interface AddonSelectionSettings {
+  headerContent?: { value: string };
+  subheaderContent?: { value: string };
+  showPricing?: boolean;
+  showDuration?: boolean;
+}
+
+// Contact Form Step Settings
+export interface ContactFormSettings {
+  headerContent?: { value: string };
+  requiredFields?: ('name' | 'email' | 'phone' | 'notes')[];
+  customFields?: FormField[];
+}
+
+// ============================================================================
+// Component Props
+// ============================================================================
+// Note: BookingFlowProps is exported from BookingFlow component. Import from there.
+
+export interface DataProviders {
+  /** Fetch available services */
+  getServices: () => Promise<Service[]>;
+
+  /** Fetch available dates for a service */
+  getAvailableDates: (serviceId: string) => Promise<string[]>;
+
+  /** Fetch available time slots for a service on a specific date */
+  getAvailableTimes: (serviceId: string, date: string) => Promise<string[]>;
+
+  /** Fetch available add-ons for a service */
+  getAddons: (serviceId: string) => Promise<Addon[]>;
+
+  /** Optional: Fetch opt-in modules (custom forms) */
+  getOptInModules?: () => Promise<OptInModule[]>;
+
+  /** Optional: Fetch service categories */
+  getServiceCategories?: () => Promise<ServiceCategory[]>;
+}
+
+export interface PaymentConfig {
+  // Square configuration
+  squareApplicationId?: string;
+  squareLocationId?: string;
+
+  // Stripe configuration
+  stripePublishableKey?: string;
+
+  // Common settings
+  depositPercentage?: number; // Default: 20 (20%)
+  currency?: string; // Default: 'USD'
+}
+
+// ============================================================================
+// BottomSheet Props
+// ============================================================================
+
+export interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  isRequired?: boolean;
+  maxHeight?: string;
+}
+
+// ============================================================================
+// Internal Step Component Props
+// ============================================================================
+
+export interface StepComponentProps {
+  config: StepConfig;
+  colors: {
+    primary: string;
+    secondary: string;
+    bookingText?: string;
+  };
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export interface ServiceSelectionStepProps extends StepComponentProps {
+  services: Service[];
+  categories?: ServiceCategory[];
+  selectedService: string | null;
+  onServiceSelect: (serviceId: string) => void;
+}
+
+export interface DateSelectionStepProps extends StepComponentProps {
+  availableDates: string[];
+  selectedDate: string | null;
+  onDateSelect: (date: string) => void;
+}
+
+export interface TimeSelectionStepProps extends StepComponentProps {
+  availableTimes: string[];
+  selectedTime: string | null;
+  onTimeSelect: (time: string) => void;
+  serviceDuration?: number;
+}
+
+export interface AddonSelectionStepProps extends StepComponentProps {
+  addons: Addon[];
+  selectedAddons: string[];
+  onAddonsChange: (addonIds: string[]) => void;
+}
+
+export interface ContactFormStepProps extends StepComponentProps {
+  contactInfo: Partial<ContactInfo>;
+  onContactInfoChange: (info: Partial<ContactInfo>) => void;
+  optInModules?: OptInModule[];
+  onOptInData?: (moduleId: string, data: any) => void;
+}
+
+export interface ConfirmationStepProps extends StepComponentProps {
+  bookingData: Partial<BookingData>;
+  service?: Service;
+  addons?: Addon[];
+  paymentProvider: 'square' | 'stripe';
+  paymentConfig: PaymentConfig;
+  onConfirm: () => Promise<void>;
+}
+
+// ============================================================================
+// Cycle-Aware Booking Types
+// ============================================================================
+
+export interface CyclePhase {
+  phase: 'avoid' | 'caution' | 'optimal' | 'neutral' | 'unknown';
+  color: string;
+  bgColor: string;
+  label: string;
+  icon: string;
+  description: string;
+  daysSinceStart?: number;
+  confidence?: number;
+}
+
+export interface CyclePhaseMap {
+  [dateString: string]: CyclePhase;
+}
+
+export interface CycleClient {
+  id: string;
+  cycle_opt_in: boolean;
+  cycle_last_period_start?: string;
+  cycle_avg_days?: number;
+  cycle_period_len?: number;
+  [key: string]: any; // Allow other client properties
+}
+
+/** Function that fetches cycle phase data for a date range */
+export type FetchCycleDataFn = (
+  client: CycleClient,
+  dateRange: string[]
+) => Promise<CyclePhaseMap>;
+
+/** Callback when a cycle warning should be shown */
+export type CycleWarningCallback = (phase: CyclePhase, date: string) => void;
+
+// ============================================================================
+// Hold Timer Types
+// ============================================================================
+
+export interface HoldTimerConfig {
+  enabled: boolean;
+  duration: number; // in milliseconds (default: 600000 = 10 minutes)
+  warningThreshold: number; // in milliseconds (default: 120000 = 2 minutes)
+  maxExtensions: number; // default: 2
+  extensionDuration: number; // in milliseconds (default: 300000 = 5 minutes)
+  showActions: boolean; // show extend/release buttons (default: true)
+  showWarning: boolean; // show warning state (default: true)
+}
+
+export interface HoldStatus {
+  holdId: string;
+  holdKey: string;
+  date: string;
+  time: string;
+  serviceId: string;
+  createdAt: number; // timestamp
+  expiresAt: number; // timestamp
+  extensions: number;
+  maxExtensions: number;
+  canExtend: boolean;
+  status: 'active' | 'warning' | 'expired';
+}
+
+export interface HoldManagerCallbacks {
+  /** Called when hold is created successfully */
+  onHoldCreated?: (hold: HoldStatus) => void;
+  /** Called when hold is extended */
+  onHoldExtended?: (hold: HoldStatus) => void;
+  /** Called when hold is released manually */
+  onHoldReleased?: (holdId: string) => void;
+  /** Called when entering warning threshold */
+  onHoldWarning?: (hold: HoldStatus) => void;
+  /** Called when hold expires */
+  onHoldExpired?: (hold: HoldStatus) => void;
+}
+
+/** Function that creates a hold on the backend */
+export type CreateHoldFn = (data: {
+  date: string;
+  time: string;
+  serviceId: string;
+  serviceDuration: number;
+}) => Promise<HoldStatus>;
+
+/** Function that extends an existing hold */
+export type ExtendHoldFn = (holdId: string) => Promise<HoldStatus>;
+
+/** Function that releases a hold */
+export type ReleaseHoldFn = (holdId: string) => Promise<void>;
+
+// ============================================================================
+// Animation Types
+// ============================================================================
+
+export type TransitionDirection = 'forward' | 'backward';
+
+export interface AnimationVariants {
+  enter: (direction: TransitionDirection) => Record<string, any>;
+  center: Record<string, any>;
+  exit: (direction: TransitionDirection) => Record<string, any>;
+}