@bailierich/booking-components 2.1.2 → 2.1.4

package/components/BookingFlow/BookingFlow.tsx

@@ -469,6 +469,7 @@ export function BookingFlow({
                 onDateSelect(date);
               }
             }}
+            isPreview={isPreview}
             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

package/components/BookingFlow/steps/DateSelection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import type { DateSelectionSettings } from '../../../types';
@@ -16,6 +16,7 @@ interface DateSelectionProps {
     secondary: string;
   };
   cyclePhases?: Record<string, string>; // Map of date -> phase ('avoid', 'caution', 'optimal', 'neutral')
+  isPreview?: boolean; // true = admin preview with mock dates, false/undefined = live mode
   selectedService?: any; // Selected service object with name, price, description, duration
   addons?: any[]; // Available addons
   selectedAddons?: string[]; // Selected addon IDs
@@ -68,6 +69,7 @@ export function DateSelection({
   settings,
   colors,
   cyclePhases,
+  isPreview,
   selectedService,
   addons = [],
   selectedAddons = [],
@@ -87,12 +89,14 @@ export function DateSelection({
   const calendarView = settings.calendarView || 'month';
   const headerText = settings.headerContent?.value || 'Select a Date';
 
-  // Detect preview mode vs live mode
-  const isPreviewMode = !availableDates || availableDates.length === 0;
+  // Preview mode: admin studio shows mock dates. Live mode: show real dates or loading.
+  const isPreviewMode = isPreview === true;
+  const isLoadingDates = !isPreview && (!availableDates || availableDates.length === 0);
 
-  // Use mock dates in preview mode, real dates in live mode
+  // Use mock dates only in preview mode, otherwise use real dates
   const effectiveDates = useMemo(() => {
-    return isPreviewMode ? generateMockDates() : availableDates;
+    if (isPreviewMode) return generateMockDates();
+    return availableDates || [];
   }, [isPreviewMode, availableDates]);
 
   // Determine initial month from first available date (today or later)
@@ -119,6 +123,11 @@ export function DateSelection({
 
   const [currentMonth, setCurrentMonth] = useState(initialMonth);
 
+  // Reset calendar month when dates transition from mock to real (or vice versa)
+  useEffect(() => {
+    setCurrentMonth(initialMonth);
+  }, [initialMonth]);
+
   // Create a Set for O(1) lookup of available dates
   const availableDatesSet = useMemo(() => new Set(effectiveDates), [effectiveDates]);
 
@@ -370,7 +379,27 @@ export function DateSelection({
         </motion.div>
       )}
 
-      {calendarView === 'month' ? (
+      {isLoadingDates ? (
+        <div className="space-y-4 animate-pulse">
+          <div className="border border-gray-200 rounded-lg p-4">
+            <div className="flex items-center justify-between mb-4">
+              <div className="h-4 w-4 rounded" style={{ backgroundColor: '#e5e7eb' }} />
+              <div className="h-5 rounded w-32" style={{ backgroundColor: '#e5e7eb' }} />
+              <div className="h-4 w-4 rounded" style={{ backgroundColor: '#e5e7eb' }} />
+            </div>
+            <div className="grid grid-cols-7 gap-2">
+              {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => (
+                <div key={day} className="text-center text-xs font-medium py-2 opacity-60">
+                  {day}
+                </div>
+              ))}
+              {Array.from({ length: 35 }).map((_, i) => (
+                <div key={i} className="aspect-square rounded-lg" style={{ backgroundColor: '#e5e7eb', opacity: 0.3 + (i % 3) * 0.2 }} />
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : calendarView === 'month' ? (
         <div className="border border-gray-200 rounded-lg p-4">
           <div className="flex items-center justify-between mb-4">
             <button