@bailierich/booking-components 2.0.0

package/components/BookingFlow/BookingFlow.tsx

@@ -0,0 +1,790 @@
+'use client';
+
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ServiceSelection,
+  DateSelection,
+  TimeSelection,
+  AddonsSelection,
+  ContactForm,
+  Confirmation
+} from './steps';
+import { HoldTimer } from '../HoldTimer';
+import type {
+  HoldTimerConfig,
+  HoldStatus,
+  CreateHoldFn,
+  ExtendHoldFn,
+  ReleaseHoldFn
+} from '../../types';
+
+// Local interface for step management
+interface BookingFlowStep {
+  id: string;
+  name: string;
+  enabled: boolean;
+  settings?: any;
+}
+
+// Export simplified versions (not conflicting with types/index.ts)
+export interface BookingFlowConfig {
+  steps: {
+    service_selection?: {
+      enabled: boolean;
+      settings?: any;
+    };
+    date_selection?: {
+      enabled: boolean;
+      settings?: any;
+    };
+    time_selection?: {
+      enabled: boolean;
+      settings?: any;
+    };
+    addon_selection?: {
+      enabled: boolean;
+      settings?: any;
+    };
+    contact_form?: {
+      enabled: boolean;
+      settings?: any;
+    };
+    confirmation?: {
+      enabled: boolean;
+      settings?: any;
+    };
+  };
+  progressBar?: {
+    style?: 'dots' | 'bar' | 'minimal';
+  };
+  transitions?: {
+    style?: 'slide' | 'fade';
+    speed?: 'fast' | 'normal' | 'slow';
+  };
+  background?: {
+    type: 'color' | 'gradient' | 'image';
+    value: string;
+  };
+}
+
+export interface BookingFlowProps {
+  config: BookingFlowConfig;
+  colors: {
+    primary: string;
+    secondary: string;
+    text?: string;
+    bookingText?: string;
+  };
+  // Data providers - pass your service/date/time data
+  services?: any[];
+  categories?: any[];
+  dates?: string[];
+  times?: string[];
+  addons?: any[];
+  // Payment configuration (for confirmation step)
+  paymentProvider?: 'square' | 'stripe';
+  paymentConfig?: any;
+  isPreview?: boolean;
+  // Callbacks
+  onComplete?: (bookingData: any) => void;
+  onStepChange?: (stepIndex: number, stepId: string) => void;
+  onServiceSelect?: (serviceId: string) => void;
+  onDateSelect?: (date: string) => void;
+  onContactInfoChange?: (contactInfo: any) => void; // NEW: Callback when contact info changes
+  // Optional: provide custom step validation
+  validateStep?: (stepId: string, data: any) => boolean;
+  // Hold timer integration (optional)
+  holdTimer?: {
+    enabled: boolean;
+    config: Partial<HoldTimerConfig>;
+    createHold: CreateHoldFn;
+    extendHold: ExtendHoldFn;
+    releaseHold: ReleaseHoldFn;
+  };
+  // Optional: custom step order for mod-based flows
+  stepOrder?: string[]; // NEW: Array of step IDs in desired order, e.g., ['details', 'service', 'date', 'time', 'addons', 'confirm']
+  // Optional: opt-in modules for contact form
+  optInModules?: import('../../types').OptInModule[]; // NEW: Modules for cycle-aware, etc.
+  onOptInData?: (moduleId: string, data: any) => void; // NEW: Callback for opt-in module data
+  // Optional: custom payment form component to replace default confirmation
+  customPaymentForm?: React.ComponentType<any>;
+  // Optional: cycle phase data for date selection
+  cyclePhases?: Record<string, string>; // NEW: Map of date -> phase for cycle-aware booking
+}
+
+/**
+ * BookingFlow - Main orchestrator component for multi-step booking
+ *
+ * Manages flow state, navigation, and renders appropriate step components.
+ *
+ * @example
+ * ```tsx
+ * <BookingFlow
+ *   config={{
+ *     steps: {
+ *       service_selection: { enabled: true, settings: {} },
+ *       date_selection: { enabled: true, settings: {} },
+ *       time_selection: { enabled: true, settings: {} },
+ *       contact_form: { enabled: true, settings: {} }
+ *     },
+ *     progressBar: { style: 'dots' },
+ *     transitions: { style: 'slide', speed: 'normal' }
+ *   }}
+ *   colors={{ primary: '#BCB4FF', secondary: '#CAC426' }}
+ *   services={services}
+ *   onComplete={(data) => console.log('Booking complete!', data)}
+ * />
+ * ```
+ */
+export function BookingFlow({
+  config,
+  colors,
+  services = [],
+  categories = [],
+  dates = [],
+  times = [],
+  addons = [],
+  paymentProvider,
+  paymentConfig,
+  isPreview = false,
+  onComplete,
+  onStepChange,
+  onServiceSelect,
+  onDateSelect,
+  onContactInfoChange,
+  validateStep,
+  holdTimer,
+  stepOrder,
+  optInModules = [],
+  onOptInData,
+  customPaymentForm,
+  cyclePhases
+}: BookingFlowProps) {
+  // Flow state
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');
+
+  // Booking data state
+  const [selectedService, setSelectedService] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const [selectedTime, setSelectedTime] = useState<string | null>(null);
+  const [selectedAddons, setSelectedAddons] = useState<string[]>([]);
+  const [contactInfo, setContactInfo] = useState<any>({});
+  const [optInData, setOptInData] = useState<any>({});
+
+  // Hold timer state
+  const [activeHold, setActiveHold] = useState<HoldStatus | null>(null);
+
+  // Configuration
+  const textColor = colors.bookingText || colors.text || '#000000';
+  const transitions = config.transitions || {};
+  const transitionStyle = transitions.style || 'slide';
+  const transitionSpeed = transitions.speed || 'normal';
+  const reducedMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const background = config.background || { type: 'color', value: '#FFFFFF' };
+
+  // Build enabled steps array
+  const stepsMap: Record<string, BookingFlowStep> = {
+    service: {
+      id: 'service',
+      name: 'Service',
+      enabled: config.steps?.service_selection?.enabled !== false, // Core step - defaults to enabled
+      settings: config.steps?.service_selection?.settings || {}
+    },
+    date: {
+      id: 'date',
+      name: 'Date',
+      enabled: config.steps?.date_selection?.enabled !== false, // Core step - defaults to enabled
+      settings: config.steps?.date_selection?.settings || {}
+    },
+    time: {
+      id: 'time',
+      name: 'Time',
+      enabled: config.steps?.time_selection?.enabled !== false, // Core step - defaults to enabled
+      settings: config.steps?.time_selection?.settings || {}
+    },
+    addons: {
+      id: 'addons',
+      name: 'Add-ons',
+      enabled: config.steps?.addon_selection?.enabled === true, // Optional step - must be explicitly enabled
+      settings: config.steps?.addon_selection?.settings || {}
+    },
+    details: {
+      id: 'details',
+      name: 'Details',
+      enabled: config.steps?.contact_form?.enabled !== false, // Core step - defaults to enabled
+      settings: config.steps?.contact_form?.settings || {}
+    },
+    confirm: {
+      id: 'confirm',
+      name: 'Confirm',
+      enabled: config.steps?.confirmation?.enabled === true, // Conditional based on config
+      settings: config.steps?.confirmation?.settings || {}
+    }
+  };
+
+  // NEW: Use custom step order if provided, otherwise use default order
+  const defaultOrder = ['service', 'date', 'time', 'addons', 'details', 'confirm'];
+  const orderedStepIds = stepOrder || defaultOrder;
+
+  // Build steps array respecting the custom order and filtering disabled steps
+  const allSteps: BookingFlowStep[] = orderedStepIds
+    .map(id => stepsMap[id])
+    .filter(step => step && step.enabled);
+
+  console.log('[BookingFlow] Step configuration:', {
+    customStepOrder: stepOrder,
+    orderedStepIds,
+    allSteps: allSteps.map(s => s.id),
+    currentStepIndex,
+    currentStepId: allSteps[currentStepIndex]?.id
+  });
+
+  const currentStep = allSteps[currentStepIndex];
+
+  // Background styling
+  const getBackgroundStyle = () => {
+    if (background.type === 'gradient') {
+      return { background: background.value };
+    }
+    if (background.type === 'image') {
+      return {
+        backgroundImage: `url(${background.value})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center'
+      };
+    }
+    return { backgroundColor: background.value };
+  };
+
+  // Animation configuration
+  const getDuration = () => {
+    if (reducedMotion) return 0.15;
+    switch (transitionSpeed) {
+      case 'fast': return 0.2;
+      case 'slow': return 0.5;
+      default: return 0.3;
+    }
+  };
+
+  const getVariants = () => {
+    const slideDistance = 50;
+
+    if (transitionStyle === 'fade') {
+      return {
+        enter: () => ({ opacity: 0, scale: 0.95 }),
+        center: { opacity: 1, scale: 1 },
+        exit: () => ({ opacity: 0, scale: 0.95 })
+      };
+    }
+
+    // Default: slide
+    return {
+      enter: () => ({
+        x: direction === 'forward' ? slideDistance : -slideDistance,
+        opacity: 0
+      }),
+      center: { x: 0, opacity: 1 },
+      exit: () => ({
+        x: direction === 'forward' ? -slideDistance : slideDistance,
+        opacity: 0
+      })
+    };
+  };
+
+  // Step validation
+  const canGoNext = () => {
+    const stepId = currentStep?.id;
+
+    // Custom validation if provided
+    if (validateStep) {
+      const currentData = {
+        service: selectedService,
+        date: selectedDate,
+        time: selectedTime,
+        addons: selectedAddons,
+        contact: contactInfo
+      };
+      return validateStep(stepId, currentData);
+    }
+
+    // Default validation
+    switch (stepId) {
+      case 'service':
+        return selectedService !== null;
+      case 'date':
+        return selectedDate !== null;
+      case 'time':
+        return selectedTime !== null;
+      case 'details':
+        // Validate contact form: name, email, and phone are required (notes optional)
+        if (isPreview) return true; // Skip validation in preview mode
+
+        const hasName = contactInfo?.name && contactInfo.name.trim().length >= 2;
+        const hasValidEmail = contactInfo?.email && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactInfo.email);
+        const hasValidPhone = contactInfo?.phone && contactInfo.phone.replace(/\D/g, '').length >= 10;
+
+        return hasName && hasValidEmail && hasValidPhone;
+      default:
+        return true;
+    }
+  };
+
+  const isStepCompleted = (stepIndex: number) => {
+    return stepIndex < currentStepIndex;
+  };
+
+  // Navigation
+  const handleStepChange = (newStepIndex: number) => {
+    setDirection(newStepIndex > currentStepIndex ? 'forward' : 'backward');
+    setCurrentStepIndex(newStepIndex);
+
+    if (onStepChange) {
+      onStepChange(newStepIndex, allSteps[newStepIndex]?.id);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentStepIndex < allSteps.length - 1) {
+      handleStepChange(currentStepIndex + 1);
+    }
+  };
+
+  const handleBack = async () => {
+    if (currentStepIndex === 0) return;
+
+    const prevStepIndex = currentStepIndex - 1;
+    const prevStep = allSteps[prevStepIndex];
+
+    // If going back to/before time selection, release hold
+    if (prevStep?.id === 'time' && activeHold && holdTimer?.releaseHold) {
+      try {
+        await holdTimer.releaseHold(activeHold.holdId);
+        setActiveHold(null);
+        setSelectedTime(null);
+      } catch (error) {
+        console.error('[BookingFlow] Failed to release hold:', error);
+      }
+    }
+
+    handleStepChange(prevStepIndex);
+  };
+
+  // Enhanced time selection handler with hold integration
+  const handleTimeSelect = async (time: string) => {
+    setSelectedTime(time);
+
+    // If hold timer enabled, create hold before proceeding
+    if (holdTimer?.enabled && holdTimer.createHold && selectedDate && selectedService) {
+      try {
+        const selectedServiceData = services.find((s: any) => s.id === selectedService);
+
+        const hold = await holdTimer.createHold({
+          date: selectedDate,
+          time,
+          serviceId: selectedService,
+          serviceDuration: selectedServiceData?.duration || 60
+        });
+
+        setActiveHold(hold);
+      } catch (error) {
+        console.error('[BookingFlow] Failed to create hold:', error);
+        // Don't proceed if hold creation fails
+        return;
+      }
+    }
+
+    // Navigate to next step
+    handleNext();
+  };
+
+  // Hold expiration handler
+  const handleHoldExpired = () => {
+    setActiveHold(null);
+    setSelectedTime(null);
+
+    // Find and navigate to time step
+    const timeStepIndex = allSteps.findIndex(s => s.id === 'time');
+    if (timeStepIndex >= 0) {
+      handleStepChange(timeStepIndex);
+    }
+  };
+
+  const handleComplete = async () => {
+    const bookingData = {
+      service: selectedService,
+      date: selectedDate,
+      time: selectedTime,
+      addons: selectedAddons,
+      contact: contactInfo,
+      optIn: optInData
+    };
+
+    if (onComplete) {
+      onComplete(bookingData);
+    }
+  };
+
+  // Render current step
+  const renderCurrentStep = () => {
+    if (!currentStep) return null;
+
+    const stepProps = {
+      settings: currentStep.settings,
+      colors
+    };
+
+    // Get selected service data once for all steps that need it
+    const selectedServiceData = services.find((s: any) => s.id === selectedService);
+
+    switch (currentStep.id) {
+      case 'service':
+        return (
+          <ServiceSelection
+            {...stepProps}
+            services={services}
+            categories={categories}
+            selectedService={selectedService}
+            onServiceSelect={(serviceId) => {
+              setSelectedService(serviceId);
+              // NEW: Notify parent of service selection
+              if (onServiceSelect) {
+                onServiceSelect(serviceId);
+              }
+            }}
+          />
+        );
+
+      case 'date':
+        return (
+          <DateSelection
+            {...stepProps}
+            availableDates={dates}
+            selectedDate={selectedDate}
+            onDateSelect={(date) => {
+              setSelectedDate(date);
+              // NEW: Notify parent of date selection
+              if (onDateSelect) {
+                onDateSelect(date);
+              }
+            }}
+            cyclePhases={cyclePhases} // NEW: Pass cycle phases for cycle-aware booking
+            selectedService={selectedServiceData} // NEW: Pass selected service for summary card
+            addons={addons} // NEW: Pass addons for selection
+            selectedAddons={selectedAddons} // NEW: Pass selected addons
+            onAddonsChange={setSelectedAddons} // NEW: Handle addon changes
+            addonPlacement={config.steps?.addon_selection?.settings?.placement || 'date_selection'} // NEW: Pass addon placement config
+          />
+        );
+
+      case 'time':
+        return (
+          <TimeSelection
+            {...stepProps}
+            availableTimes={times}
+            selectedTime={selectedTime}
+            onTimeSelect={handleTimeSelect}
+            serviceDuration={selectedServiceData?.duration || 60}
+            selectedService={selectedServiceData}
+            selectedDate={selectedDate}
+            selectedAddons={selectedAddons}
+            addons={addons}
+          />
+        );
+
+      case 'addons':
+        return (
+          <AddonsSelection
+            {...stepProps}
+            addons={addons}
+            selectedAddons={selectedAddons}
+            onAddonsChange={setSelectedAddons}
+          />
+        );
+
+      case 'details':
+        return (
+          <ContactForm
+            {...stepProps}
+            contactInfo={contactInfo}
+            onContactInfoChange={(info) => {
+              setContactInfo(info);
+              // NEW: Notify parent of contact info changes
+              if (onContactInfoChange) {
+                onContactInfoChange(info);
+              }
+            }}
+            optInModules={optInModules} // NEW: Pass opt-in modules from parent
+            onOptInData={onOptInData} // NEW: Pass opt-in data callback
+          />
+        );
+
+      case 'confirm':
+        const selectedAddonsData = addons.filter((a: any) => selectedAddons.includes(a.id));
+
+        // Calculate addon total cost
+        const addonTotalCost = selectedAddonsData.reduce((sum, addon) => {
+          return sum + (addon.addonPrice || addon.price || 0);
+        }, 0);
+
+        // Calculate total amount (service + addons)
+        const totalAmount = (selectedServiceData?.price || 0) + addonTotalCost;
+
+        // Calculate total duration (service + addons that affect duration)
+        const totalDuration = selectedAddonsData.reduce((duration, addon) => {
+          if (addon.affectsDuration && addon.additionalDuration) {
+            return duration + addon.additionalDuration;
+          }
+          return duration;
+        }, selectedServiceData?.duration || 60);
+
+        // Use custom payment form if provided, otherwise use default Confirmation
+        if (customPaymentForm) {
+          const CustomPaymentForm = customPaymentForm;
+          return (
+            <CustomPaymentForm
+              bookingData={{
+                service: selectedService,
+                serviceName: selectedServiceData?.name,
+                date: selectedDate,
+                time: selectedTime,
+                addons: selectedAddons,
+                contact: contactInfo,
+                amount: selectedServiceData?.price || 0,
+                duration: totalDuration,
+                // Contact info for automation
+                clientName: contactInfo?.name,
+                clientEmail: contactInfo?.email,
+                clientPhone: contactInfo?.phone,
+                // Add pendingBooking with COMPLETE booking data for PaymentForm
+                pendingBooking: {
+                  // Customer info
+                  customerClientId: null, // Will be populated by wrapper if returning customer
+
+                  // Service info
+                  serviceId: selectedService,
+                  date: selectedDate,
+                  time: selectedTime,
+                  notes: contactInfo?.notes || '',
+
+                  // Addon info
+                  selectedAddons: selectedAddonsData,        // Full addon objects for display
+                  addonServices: selectedAddons,             // Addon IDs for database
+                  addonTotalCost: addonTotalCost,
+
+                  // Payment calculations
+                  totalAmount: totalAmount,
+                  duration: totalDuration
+                }
+              }}
+              onPaymentSuccess={handleComplete}
+              onPaymentError={(error: any) => {
+                console.error('[BookingFlow] Payment error:', error);
+              }}
+            />
+          );
+        }
+
+        return (
+          <Confirmation
+            {...stepProps}
+            service={selectedServiceData}
+            addons={selectedAddonsData}
+            selectedDate={selectedDate || ''}
+            selectedTime={selectedTime || ''}
+            paymentProvider={paymentProvider || 'square'}
+            paymentConfig={paymentConfig || { depositPercentage: 20 }}
+            isPreview={isPreview}
+            onConfirm={handleComplete}
+          />
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  // Render progress indicator
+  const renderProgressBar = () => {
+    const progressStyle = config.progressBar?.style || 'dots';
+
+    if (progressStyle === 'bar') {
+      return (
+        <div className="mb-6">
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm font-medium">Step {currentStepIndex + 1} of {allSteps.length}</span>
+            <span className="text-xs opacity-60">{currentStep?.name}</span>
+          </div>
+          <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+            <motion.div
+              className="h-full rounded-full"
+              style={{ backgroundColor: colors.primary }}
+              initial={{ width: 0 }}
+              animate={{ width: `${((currentStepIndex + 1) / allSteps.length) * 100}%` }}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            />
+          </div>
+        </div>
+      );
+    }
+
+    if (progressStyle === 'minimal') {
+      return (
+        <div className="mb-6 text-center">
+          <p className="text-sm font-medium" style={{ color: colors.primary }}>
+            {currentStep?.name}
+          </p>
+          <p className="text-xs opacity-60 mt-1">
+            Step {currentStepIndex + 1} of {allSteps.length}
+          </p>
+        </div>
+      );
+    }
+
+    // Default: dots
+    return (
+      <div className="flex justify-center mb-4 overflow-x-auto py-2">
+        <div className="flex items-center space-x-1.5 px-4 min-w-max">
+          {allSteps.map((step, index) => (
+            <div key={step.id} className="flex items-center">
+              <motion.div
+                className={`w-6 h-6 rounded-full flex items-center justify-center font-medium text-xs transition-all flex-shrink-0 ${
+                  index === currentStepIndex
+                    ? 'text-white shadow-md'
+                    : isStepCompleted(index)
+                    ? 'text-white'
+                    : 'bg-gray-200 text-gray-500'
+                }`}
+                style={{
+                  backgroundColor: index <= currentStepIndex ? colors.primary : undefined
+                }}
+                animate={{
+                  scale: index === currentStepIndex ? 1.05 : 1
+                }}
+                transition={{ duration: 0.2 }}
+              >
+                {isStepCompleted(index) ? '✓' : index + 1}
+              </motion.div>
+              {index < allSteps.length - 1 && (
+                <motion.div
+                  className={`w-4 h-0.5 mx-1 transition-all flex-shrink-0 ${
+                    index < currentStepIndex ? '' : 'bg-gray-200'
+                  }`}
+                  style={{
+                    backgroundColor: index < currentStepIndex ? colors.primary : undefined
+                  }}
+                  initial={{ scaleX: 0 }}
+                  animate={{ scaleX: 1 }}
+                  transition={{ duration: 0.3, delay: 0.1 }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div
+      className="w-full max-w-4xl mx-auto p-6 rounded-2xl shadow-xl"
+      style={{ ...getBackgroundStyle(), color: textColor }}
+    >
+      {/* Progress Indicator */}
+      {renderProgressBar()}
+
+      {/* Hold Timer - Show when active and past time step */}
+      {holdTimer?.enabled && activeHold && currentStep?.id !== 'time' && (
+        <HoldTimer
+          holdStatus={activeHold}
+          config={holdTimer.config}
+          colors={colors}
+          onExtend={async () => {
+            if (holdTimer.extendHold && activeHold) {
+              try {
+                const extended = await holdTimer.extendHold(activeHold.holdId);
+                setActiveHold(extended);
+              } catch (error) {
+                console.error('[BookingFlow] Failed to extend hold:', error);
+              }
+            }
+          }}
+          onRelease={async () => {
+            if (holdTimer.releaseHold && activeHold) {
+              try {
+                await holdTimer.releaseHold(activeHold.holdId);
+                setActiveHold(null);
+                setSelectedTime(null);
+                // Navigate to time step
+                const timeStepIndex = allSteps.findIndex(s => s.id === 'time');
+                if (timeStepIndex >= 0) {
+                  handleStepChange(timeStepIndex);
+                }
+              } catch (error) {
+                console.error('[BookingFlow] Failed to release hold:', error);
+              }
+            }
+          }}
+          onExpired={handleHoldExpired}
+          className="mb-6"
+        />
+      )}
+
+      {/* Current Step Content */}
+      <div className="mb-6 min-h-[300px] relative overflow-hidden">
+        <AnimatePresence mode="wait" custom={direction}>
+          <motion.div
+            key={currentStepIndex}
+            custom={direction}
+            variants={getVariants()}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{
+              duration: getDuration(),
+              ease: [0.4, 0, 0.2, 1]
+            }}
+          >
+            {renderCurrentStep()}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+
+      {/* Navigation Buttons - Hide when on confirm step with custom payment form */}
+      {!(currentStep?.id === 'confirm' && customPaymentForm) && (
+        <div className="flex items-center justify-between pt-4 border-t border-gray-200">
+          <button
+            onClick={handleBack}
+            disabled={currentStepIndex === 0}
+            className="px-4 py-2 rounded-lg border border-gray-300 disabled:opacity-30 disabled:cursor-not-allowed hover:bg-gray-50 transition-all text-sm font-medium"
+          >
+            Back
+          </button>
+
+          {currentStepIndex < allSteps.length - 1 ? (
+            <button
+              onClick={handleNext}
+              disabled={!canGoNext()}
+              className="px-6 py-2 rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90 transition-all text-sm font-medium shadow-md"
+              style={{ backgroundColor: colors.primary }}
+            >
+              Next
+            </button>
+          ) : (
+            <button
+              onClick={handleComplete}
+              disabled={!canGoNext()}
+              className="px-6 py-2 rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90 transition-all text-sm font-medium shadow-md"
+              style={{ backgroundColor: colors.primary }}
+            >
+              {currentStep?.id === 'confirm' ? 'Pay & Confirm' : 'Complete'}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default BookingFlow;