@bailierich/booking-components 2.0.0

package/components/BookingFlow/steps/CycleAwareDateSelection.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { DateSelection } from './DateSelection';
+import type {
+  DateSelectionSettings,
+  CyclePhase,
+  CyclePhaseMap,
+  CycleClient,
+  FetchCycleDataFn,
+  CycleWarningCallback
+} from '../../../types';
+
+/**
+ * Cycle phase definitions matching tenant backend
+ */
+export const CYCLE_PHASES: Record<string, Omit<CyclePhase, 'daysSinceStart' | 'confidence'>> = {
+  avoid: {
+    phase: 'avoid',
+    color: '#EF4444',
+    bgColor: '#FEF2F2',
+    label: 'Avoid',
+    icon: '🔴',
+    description: 'Period - avoid waxing'
+  },
+  caution: {
+    phase: 'caution',
+    color: '#F59E0B',
+    bgColor: '#FFFBEB',
+    label: 'Caution',
+    icon: '🟡',
+    description: 'End of period - proceed with caution'
+  },
+  optimal: {
+    phase: 'optimal',
+    color: '#10B981',
+    bgColor: '#F0FDF4',
+    label: 'Optimal',
+    icon: '🟢',
+    description: 'Best time for waxing'
+  },
+  neutral: {
+    phase: 'neutral',
+    color: '#6B7280',
+    bgColor: '#F9FAFB',
+    label: 'Neutral',
+    icon: '⚪',
+    description: 'Okay but not optimal'
+  },
+  unknown: {
+    phase: 'unknown',
+    color: '#9CA3AF',
+    bgColor: '#F3F4F6',
+    label: 'Unknown',
+    icon: '❓',
+    description: 'No cycle data available'
+  }
+};
+
+export interface CycleAwareDateSelectionProps {
+  // Standard DateSelection props
+  availableDates: string[];
+  selectedDate: string | null;
+  onDateSelect: (date: string, cyclePhase?: CyclePhase) => void;
+  settings: DateSelectionSettings;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+
+  // Cycle-aware specific props
+  /** Tenant-provided function to fetch cycle data */
+  fetchCycleData?: FetchCycleDataFn;
+
+  /** Selected client (must have cycle_opt_in = true to show cycle features) */
+  selectedClient?: CycleClient;
+
+  /** Callback when a warning should be shown (e.g., avoid phase selected) */
+  onCycleWarning?: CycleWarningCallback;
+
+  /** Override to force enable/disable cycle features */
+  cycleAwareEnabled?: boolean;
+}
+
+/**
+ * CycleAwareDateSelection - Enhanced date picker with cycle phase indicators
+ *
+ * Wraps the base DateSelection component with cycle-aware features:
+ * - Visual indicators for each cycle phase
+ * - Color-coded calendar days
+ * - Legend explaining phases
+ * - Warnings for non-optimal dates
+ *
+ * @example
+ * ```tsx
+ * const fetchCycleData = async (client, dates) => {
+ *   const res = await fetch(`/api/cycle?clientId=${client.id}`);
+ *   const data = await res.json();
+ *   return transformToCyclePhases(data, dates);
+ * };
+ *
+ * <CycleAwareDateSelection
+ *   availableDates={dates}
+ *   selectedDate={selectedDate}
+ *   onDateSelect={(date, phase) => {
+ *     setSelectedDate(date);
+ *     if (phase?.phase === 'avoid') {
+ *       showWarning('This date may be uncomfortable');
+ *     }
+ *   }}
+ *   settings={settings}
+ *   colors={colors}
+ *   fetchCycleData={fetchCycleData}
+ *   selectedClient={client}
+ *   onCycleWarning={(phase, date) => console.log('Warning:', phase, date)}
+ * />
+ * ```
+ */
+export function CycleAwareDateSelection({
+  availableDates,
+  selectedDate,
+  onDateSelect,
+  settings,
+  colors,
+  fetchCycleData,
+  selectedClient,
+  onCycleWarning,
+  cycleAwareEnabled
+}: CycleAwareDateSelectionProps) {
+  const [cyclePhases, setCyclePhases] = useState<CyclePhaseMap>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Determine if cycle features should be shown
+  const showCycleFeatures = useMemo(() => {
+    if (cycleAwareEnabled !== undefined) return cycleAwareEnabled;
+    return !!(selectedClient?.cycle_opt_in && fetchCycleData);
+  }, [cycleAwareEnabled, selectedClient?.cycle_opt_in, fetchCycleData]);
+
+  // Fetch cycle data when client or dates change
+  useEffect(() => {
+    if (!showCycleFeatures || !fetchCycleData || !selectedClient) {
+      setCyclePhases({});
+      return;
+    }
+
+    if (availableDates.length === 0) {
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    fetchCycleData(selectedClient, availableDates)
+      .then((phases) => {
+        setCyclePhases(phases);
+      })
+      .catch((err) => {
+        console.error('[CycleAwareDateSelection] Error fetching cycle data:', err);
+        setError(err.message || 'Failed to load cycle data');
+        setCyclePhases({});
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [showCycleFeatures, fetchCycleData, selectedClient, availableDates]);
+
+  // Enhanced date selection handler with cycle awareness
+  const handleDateSelect = useCallback((date: string) => {
+    const phaseData = cyclePhases[date];
+
+    // Trigger warning callback if date is in avoid phase
+    if (phaseData?.phase === 'avoid' && onCycleWarning) {
+      onCycleWarning(phaseData, date);
+    }
+
+    // Call original handler with cycle data
+    onDateSelect(date, phaseData);
+  }, [cyclePhases, onDateSelect, onCycleWarning]);
+
+  return (
+    <div className="cycle-aware-date-selection space-y-4">
+      {/* Cycle Legend */}
+      {showCycleFeatures && Object.keys(cyclePhases).length > 0 && (
+        <div className="bg-white rounded-lg border border-gray-200 p-4">
+          <h4 className="font-medium mb-3 flex items-center" style={{ color: colors.primary }}>
+            <span className="mr-2">📅</span>
+            Your Cycle Calendar
+          </h4>
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            {Object.entries(CYCLE_PHASES).map(([key, phase]) => (
+              key !== 'unknown' && (
+                <div key={key} className="flex items-center space-x-2">
+                  <div
+                    className="w-3 h-3 rounded-full border border-gray-300"
+                    style={{ backgroundColor: phase.color }}
+                  />
+                  <span>{phase.label}</span>
+                </div>
+              )
+            ))}
+          </div>
+          <p className="text-xs opacity-70 mt-2">
+            Green dates are optimal for comfortable waxing appointments
+          </p>
+        </div>
+      )}
+
+      {/* Loading State */}
+      {showCycleFeatures && isLoading && (
+        <div className="text-center py-2 text-sm opacity-70">
+          Loading cycle predictions...
+        </div>
+      )}
+
+      {/* Error State */}
+      {showCycleFeatures && error && (
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+          <p className="text-yellow-800 text-sm">
+            Unable to load cycle predictions: {error}
+          </p>
+        </div>
+      )}
+
+      {/* Enhanced Calendar with Cycle Indicators */}
+      <DateSelection
+        availableDates={availableDates}
+        selectedDate={selectedDate}
+        onDateSelect={handleDateSelect}
+        settings={settings}
+        colors={colors}
+        // TODO: Pass cycle phases to DateSelection for rendering
+        // This requires updating DateSelection to accept and render cycle indicators
+        // For now, cycle indicators are shown separately via the legend
+      />
+
+      {/* Cycle Warning for Selected Date */}
+      {showCycleFeatures && selectedDate && cyclePhases[selectedDate]?.phase === 'avoid' && (
+        <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+          <div className="flex items-start space-x-3">
+            <span className="text-red-500 text-xl">⚠️</span>
+            <div>
+              <h4 className="font-medium text-red-800 mb-1">
+                This date falls during your predicted period
+              </h4>
+              <p className="text-red-700 text-sm mb-3">
+                Waxing during this time may be more uncomfortable than usual.
+                Would you like to see better alternatives?
+              </p>
+              <div className="flex space-x-2">
+                <button
+                  className="px-3 py-1 bg-red-100 text-red-700 rounded text-sm hover:bg-red-200 transition-colors"
+                  onClick={() => {
+                    // Find next optimal date
+                    const optimalDates = availableDates.filter(d =>
+                      cyclePhases[d]?.phase === 'optimal'
+                    );
+                    if (optimalDates.length > 0) {
+                      handleDateSelect(optimalDates[0]);
+                    }
+                  }}
+                >
+                  Show optimal dates
+                </button>
+                <button className="px-3 py-1 text-red-600 text-sm hover:underline">
+                  Continue anyway
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CycleAwareDateSelection;