@bailierich/booking-components 2.0.0

package/components/BookingFlow/steps/DateSelection.tsx

@@ -0,0 +1,473 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import type { DateSelectionSettings } from '../../../types';
+import { createEntranceAnimation } from '../../../styles';
+
+interface DateSelectionProps {
+  availableDates: string[];
+  selectedDate: string | null;
+  onDateSelect: (date: string) => void;
+  settings: DateSelectionSettings;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+  cyclePhases?: Record<string, string>; // Map of date -> phase ('avoid', 'caution', 'optimal', 'neutral')
+  selectedService?: any; // Selected service object with name, price, description, duration
+  addons?: any[]; // Available addons
+  selectedAddons?: string[]; // Selected addon IDs
+  onAddonsChange?: (addonIds: string[]) => void; // Callback when addons change
+  addonPlacement?: string; // NEW: 'date_selection' | 'separate_step' - controls addon visibility
+}
+
+// Generate mock dates for preview mode
+function generateMockDates(): string[] {
+  const dates: string[] = [];
+  const today = new Date();
+
+  // Set to start of today to avoid timezone issues
+  today.setHours(0, 0, 0, 0);
+
+  // Generate dates for current + next 2 months, skip some to show unavailable dates
+  for (let monthOffset = 0; monthOffset < 3; monthOffset++) {
+    const month = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1);
+    const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+
+    for (let day = 1; day <= daysInMonth; day++) {
+      const dateObj = new Date(month.getFullYear(), month.getMonth(), day);
+
+      // Skip past dates
+      if (dateObj < today) continue;
+
+      // Skip some dates randomly to show unavailable styling (skip ~40% of dates)
+      if (Math.random() > 0.6) continue;
+
+      const dateStr = `${month.getFullYear()}-${String(month.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+      dates.push(dateStr);
+    }
+  }
+
+  return dates;
+}
+
+// Cycle phase color mapping
+const CYCLE_PHASE_COLORS: Record<string, { bg: string; text: string; label: string }> = {
+  avoid: { bg: '#FEE2E2', text: '#991B1B', label: 'Avoid' },
+  caution: { bg: '#FEF3C7', text: '#92400E', label: 'Caution' },
+  optimal: { bg: '#D1FAE5', text: '#065F46', label: 'Optimal' },
+  neutral: { bg: '#F3F4F6', text: '#4B5563', label: 'Neutral' }
+};
+
+export function DateSelection({
+  availableDates,
+  selectedDate,
+  onDateSelect,
+  settings,
+  colors,
+  cyclePhases,
+  selectedService,
+  addons = [],
+  selectedAddons = [],
+  onAddonsChange,
+  addonPlacement = 'date_selection' // Default to showing on date selection
+}: DateSelectionProps) {
+  // DEBUG: Log addon data to troubleshoot visibility
+  console.log('[DateSelection] Addon Debug:', {
+    addonsLength: addons.length,
+    hasOnAddonsChange: !!onAddonsChange,
+    addonPlacement: addonPlacement,
+    showAddons: addonPlacement !== 'separate_step' && addons.length > 0 && !!onAddonsChange,
+    addons: addons,
+    selectedService: selectedService
+  });
+
+  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;
+
+  // Use mock dates in preview mode, real dates in live mode
+  const effectiveDates = useMemo(() => {
+    return isPreviewMode ? generateMockDates() : availableDates;
+  }, [isPreviewMode, availableDates]);
+
+  // Determine initial month from first available date (today or later)
+  const initialMonth = useMemo(() => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    if (effectiveDates.length > 0) {
+      // Find first date that is today or later
+      const futureDate = effectiveDates.find(dateStr => {
+        const date = new Date(dateStr);
+        return date >= today;
+      });
+
+      if (futureDate) {
+        const firstDate = new Date(futureDate);
+        return `${firstDate.getFullYear()}-${String(firstDate.getMonth() + 1).padStart(2, '0')}`;
+      }
+    }
+
+    // Fallback to current month
+    return `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
+  }, [effectiveDates]);
+
+  const [currentMonth, setCurrentMonth] = useState(initialMonth);
+
+  // Create a Set for O(1) lookup of available dates
+  const availableDatesSet = useMemo(() => new Set(effectiveDates), [effectiveDates]);
+
+  // Parse current month
+  const [year, month] = currentMonth.split('-').map(Number);
+
+  // Get month name
+  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+                     'July', 'August', 'September', 'October', 'November', 'December'];
+  const monthName = monthNames[month - 1];
+
+  // Calculate calendar grid
+  const calendarDays = useMemo(() => {
+    const firstDay = new Date(year, month - 1, 1);
+    const lastDay = new Date(year, month, 0);
+    const startingDayOfWeek = firstDay.getDay();
+    const daysInMonth = lastDay.getDate();
+
+    const days = [];
+
+    // Add empty cells for days before the first of the month
+    for (let i = 0; i < startingDayOfWeek; i++) {
+      days.push(null);
+    }
+
+    // Add actual days
+    for (let day = 1; day <= daysInMonth; day++) {
+      const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+      const dateObj = new Date(dateStr);
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      days.push({
+        day,
+        dateStr,
+        isAvailable: availableDatesSet.has(dateStr) && dateObj >= today
+      });
+    }
+
+    return days;
+  }, [year, month, availableDatesSet]);
+
+  // Check if we can navigate to previous/next month
+  const canGoPrevious = useMemo(() => {
+    const prevMonth = new Date(year, month - 2, 1);
+    const prevMonthStr = `${prevMonth.getFullYear()}-${String(prevMonth.getMonth() + 1).padStart(2, '0')}`;
+    return effectiveDates.some(date => date.startsWith(prevMonthStr));
+  }, [effectiveDates, year, month]);
+
+  const canGoNext = useMemo(() => {
+    const nextMonth = new Date(year, month, 1);
+    const nextMonthStr = `${nextMonth.getFullYear()}-${String(nextMonth.getMonth() + 1).padStart(2, '0')}`;
+    return effectiveDates.some(date => date.startsWith(nextMonthStr));
+  }, [effectiveDates, year, month]);
+
+  const handlePreviousMonth = () => {
+    if (!canGoPrevious) return;
+    const prevMonth = new Date(year, month - 2, 1);
+    setCurrentMonth(`${prevMonth.getFullYear()}-${String(prevMonth.getMonth() + 1).padStart(2, '0')}`);
+  };
+
+  const handleNextMonth = () => {
+    if (!canGoNext) return;
+    const nextMonth = new Date(year, month, 1);
+    setCurrentMonth(`${nextMonth.getFullYear()}-${String(nextMonth.getMonth() + 1).padStart(2, '0')}`);
+  };
+
+  const hasCycleData = cyclePhases && Object.keys(cyclePhases).length > 0;
+
+  // Calculate total price including addons
+  const calculateTotal = () => {
+    let total = selectedService?.price || 0;
+
+    if (selectedAddons.length > 0 && addons.length > 0) {
+      selectedAddons.forEach(addonId => {
+        const addon = addons.find(a => a.id === addonId);
+        if (addon) {
+          total += addon.addonPrice || addon.price || 0;
+        }
+      });
+    }
+
+    return total;
+  };
+
+  // Handle addon toggle
+  const handleAddonToggle = (addonId: string) => {
+    if (!onAddonsChange) return;
+
+    const isSelected = selectedAddons.includes(addonId);
+    if (isSelected) {
+      onAddonsChange(selectedAddons.filter(id => id !== addonId));
+    } else {
+      onAddonsChange([...selectedAddons, addonId]);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Service Summary Card */}
+      {selectedService && (
+        <motion.div
+          {...createEntranceAnimation(0.05)}
+          className="bg-gradient-to-br from-white to-gray-50/30 rounded-xl border border-gray-200/80 p-6 shadow-sm hover:shadow-md transition-shadow"
+        >
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-3">
+                <h3 className="text-sm font-semibold tracking-wide uppercase" style={{ color: colors.primary }}>
+                  Your Selection
+                </h3>
+              </div>
+              <div className="space-y-2">
+                <p className="font-bold text-lg text-gray-900">
+                  {selectedService.name}
+                </p>
+                {selectedService.description && (
+                  <p className="text-sm text-gray-600 leading-relaxed">{selectedService.description}</p>
+                )}
+                {selectedService.duration && (
+                  <div className="flex items-center gap-1.5 text-xs text-gray-500">
+                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span>{selectedService.duration} minutes</span>
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="text-right">
+              <div className="text-xs text-gray-500 mb-1 font-medium">Price</div>
+              <div className="text-2xl font-bold" style={{ color: colors.primary }}>
+                ${selectedService.price}
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Addon Selection - Only show if placement is on date_selection (not separate_step) */}
+      {addonPlacement !== 'separate_step' && addons.length > 0 && onAddonsChange && (
+        <motion.div
+          {...createEntranceAnimation(0.1)}
+          className="bg-white rounded-xl border border-gray-200/80 p-6 shadow-sm hover:shadow-md transition-shadow"
+        >
+          <div className="flex items-center gap-2 mb-4">
+            <h3 className="text-sm font-semibold tracking-wide uppercase" style={{ color: colors.primary }}>
+              Enhance Your Experience
+            </h3>
+          </div>
+
+          <div className="space-y-3">
+            {addons.map((addon) => {
+              const isSelected = selectedAddons.includes(addon.id);
+              const addonPrice = addon.addonPrice || addon.price || 0;
+
+              return (
+                <label
+                  key={addon.id}
+                  className="flex items-start gap-4 p-4 rounded-xl border-2 cursor-pointer transition-all group"
+                  style={{
+                    borderColor: isSelected ? colors.primary : '#E5E7EB',
+                    backgroundColor: isSelected ? `${colors.primary}08` : 'transparent',
+                    boxShadow: isSelected ? `0 0 0 3px ${colors.primary}15` : 'none'
+                  }}
+                >
+                  <div className="flex items-center pt-0.5">
+                    <input
+                      type="checkbox"
+                      checked={isSelected}
+                      onChange={() => handleAddonToggle(addon.id)}
+                      className="w-5 h-5 rounded border-2 border-gray-300 cursor-pointer"
+                      style={{ accentColor: colors.primary }}
+                    />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-3 mb-1">
+                      <span className="font-semibold text-base text-gray-900 group-hover:text-gray-700 transition-colors">
+                        {addon.name}
+                      </span>
+                      <span
+                        className="text-base font-bold whitespace-nowrap flex-shrink-0"
+                        style={{ color: colors.primary }}
+                      >
+                        +${addonPrice}
+                      </span>
+                    </div>
+                    {addon.description && (
+                      <p className="text-sm text-gray-600 leading-relaxed">{addon.description}</p>
+                    )}
+                  </div>
+                </label>
+              );
+            })}
+          </div>
+
+          {/* Updated Total */}
+          {selectedAddons.length > 0 && (
+            <div className="mt-6 pt-5 border-t-2 border-gray-100">
+              <div className="flex items-center justify-between px-2">
+                <div>
+                  <div className="text-xs text-gray-500 mb-1 font-medium uppercase tracking-wide">New Total</div>
+                  <div className="text-sm text-gray-600">
+                    Service + {selectedAddons.length} add-on{selectedAddons.length > 1 ? 's' : ''}
+                  </div>
+                </div>
+                <div
+                  className="text-3xl font-bold"
+                  style={{ color: colors.primary }}
+                >
+                  ${calculateTotal()}
+                </div>
+              </div>
+            </div>
+          )}
+        </motion.div>
+      )}
+
+      <motion.h2
+        {...createEntranceAnimation(0.15)}
+        className="text-xl sm:text-2xl font-bold text-center sm:text-left"
+        style={{ color: colors.primary }}
+      >
+        {headerText}
+      </motion.h2>
+
+      {/* Cycle Legend */}
+      {hasCycleData && (
+        <motion.div
+          {...createEntranceAnimation(0.1)}
+          className="bg-white rounded-lg border border-gray-200 px-4 py-3"
+        >
+          <div className="flex items-center justify-between flex-wrap gap-2 text-xs">
+            <span className="font-medium flex items-center" style={{ color: colors.primary }}>
+              Cycle Calendar:
+            </span>
+            <div className="flex items-center gap-3">
+              {Object.entries(CYCLE_PHASE_COLORS).map(([phase, phaseInfo]) => (
+                <div key={phase} className="flex items-center space-x-1.5">
+                  <div
+                    className="w-3 h-3 rounded border border-gray-300"
+                    style={{ backgroundColor: phaseInfo.bg }}
+                  />
+                  <span>{phaseInfo.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {calendarView === 'month' ? (
+        <div className="border border-gray-200 rounded-lg p-4">
+          <div className="flex items-center justify-between mb-4">
+            <button
+              className={`p-2 rounded transition-colors ${
+                canGoPrevious ? 'hover:bg-gray-100' : 'opacity-30 cursor-not-allowed'
+              }`}
+              onClick={handlePreviousMonth}
+              disabled={!canGoPrevious}
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <p className="font-semibold">{monthName} {year}</p>
+            <button
+              className={`p-2 rounded transition-colors ${
+                canGoNext ? 'hover:bg-gray-100' : 'opacity-30 cursor-not-allowed'
+              }`}
+              onClick={handleNextMonth}
+              disabled={!canGoNext}
+            >
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </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>
+            ))}
+            {calendarDays.map((dayInfo, index) => {
+              if (!dayInfo) {
+                return <div key={`empty-${index}`} />;
+              }
+
+              const { day, dateStr, isAvailable } = dayInfo;
+              const isSelected = selectedDate === dateStr;
+              const cyclePhase = cyclePhases?.[dateStr];
+              const phaseColors = cyclePhase ? CYCLE_PHASE_COLORS[cyclePhase] : null;
+
+              return (
+                <button
+                  key={dateStr}
+                  onClick={() => isAvailable && onDateSelect(dateStr)}
+                  disabled={!isAvailable}
+                  className={`aspect-square rounded-lg text-sm transition-all ${
+                    isSelected
+                      ? 'text-white shadow-lg font-semibold'
+                      : isAvailable
+                      ? 'hover:scale-105 cursor-pointer'
+                      : 'bg-gray-50 text-gray-300 cursor-not-allowed opacity-40'
+                  }`}
+                  style={{
+                    backgroundColor: isSelected
+                      ? colors.primary
+                      : phaseColors?.bg || undefined,
+                    color: isSelected
+                      ? 'white'
+                      : phaseColors?.text || undefined
+                  }}
+                >
+                  {day}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-5 gap-3">
+          {effectiveDates.slice(0, 5).map(date => {
+            const dateObj = new Date(date);
+            const day = dateObj.getDate();
+            const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+            const dayName = dayNames[dateObj.getDay()];
+            const isSelected = selectedDate === date;
+
+            return (
+              <button
+                key={date}
+                onClick={() => onDateSelect(date)}
+                className={`p-4 rounded-lg border-2 transition-all text-center ${
+                  isSelected
+                    ? 'border-current text-white'
+                    : 'border-gray-200 hover:border-gray-300'
+                }`}
+                style={{
+                  borderColor: isSelected ? colors.primary : undefined,
+                  backgroundColor: isSelected ? colors.primary : undefined
+                }}
+              >
+                <p className="text-xs mb-1 opacity-75">{dayName}</p>
+                <p className="text-2xl font-semibold">{day}</p>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DateSelection;