@bailierich/booking-components 2.0.0

package/components/BookingFlow/steps/ServiceSelection.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+import type { Service, ServiceCategory, ServiceSelectionSettings } from '../../../types';
+import { createEntranceAnimation } from '../../../styles';
+
+interface ServiceSelectionProps {
+  services: Service[];
+  categories?: ServiceCategory[];
+  selectedService: string | null;
+  onServiceSelect: (serviceId: string) => void;
+  settings: ServiceSelectionSettings;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+}
+
+export function ServiceSelection({
+  services,
+  categories = [],
+  selectedService,
+  onServiceSelect,
+  settings,
+  colors
+}: ServiceSelectionProps) {
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+    new Set(categories.length > 0 ? [categories[0].id] : [])
+  );
+
+  const layout = settings.serviceLayout || 'grid';
+  const columns = settings.columns || 2;
+  const headerText = settings.headerContent?.value || 'Choose Your Service';
+  const subheaderText = settings.subheaderContent?.value || 'Select the service you\'d like to book';
+  const showPricing = settings.showPricing !== false;
+  const showDuration = settings.showDuration !== false;
+  const showDescription = settings.showDescription !== false;
+  const enableCategories = settings.enableCategories === true;
+  const categoryStyle = settings.categoryStyle || 'dropdown';
+
+  const policyImages = settings.policyImages || [];
+  const policyText = settings.policyText || null;
+  const imageSpacing = settings.imageSpacing || 'small';
+
+  const spacingMap = {
+    none: '0px',
+    small: '8px',
+    medium: '16px',
+    large: '24px'
+  };
+
+  const borderRadius = settings.imageBorderRadius || '0px';
+
+  const gridCols = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 sm:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+  }[columns] || 'grid-cols-2';
+
+  const filteredServices = enableCategories && selectedCategory
+    ? services.filter(s => s.category === selectedCategory)
+    : services;
+
+  const renderServiceCard = (service: Service, layout: 'grid' | 'list') => {
+    const isSelected = selectedService === service.id;
+
+    return (
+      <button
+        key={service.id}
+        onClick={() => onServiceSelect(service.id)}
+        className={`w-full ${layout === 'grid' ? 'h-full' : ''} p-4 rounded-lg border-2 transition-all text-left ${layout === 'grid' ? 'flex flex-col' : ''} ${
+          isSelected
+            ? 'border-current shadow-lg'
+            : 'border-gray-200 hover:border-gray-300'
+        }`}
+        style={{
+          borderColor: isSelected ? colors.primary : undefined,
+          backgroundColor: isSelected ? `${colors.primary}10` : undefined
+        }}
+      >
+        {layout === 'grid' ? (
+          <>
+            <p className="font-semibold mb-1">{service.name}</p>
+            {showDescription && <p className="text-xs opacity-70 mb-2 flex-1">{service.description}</p>}
+            <div className="flex justify-between items-center text-sm mt-auto">
+              {showPricing && <span className="font-bold" style={{ color: colors.primary }}>${service.price}</span>}
+              {showDuration && <span className="opacity-60">{service.duration} min</span>}
+            </div>
+          </>
+        ) : (
+          <div className="flex justify-between items-start">
+            <div className="flex-1">
+              <p className="font-semibold mb-1">{service.name}</p>
+              {showDescription && <p className="text-sm opacity-70">{service.description}</p>}
+            </div>
+            <div className="text-right ml-4">
+              {showPricing && <p className="font-bold" style={{ color: colors.primary }}>${service.price}</p>}
+              {showDuration && <p className="text-sm opacity-60">{service.duration} min</p>}
+            </div>
+          </div>
+        )}
+      </button>
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <motion.div
+        {...createEntranceAnimation(0.05)}
+        className="text-center sm:text-left"
+      >
+        <h2 className="text-xl sm:text-2xl font-bold mb-2" style={{ color: colors.primary }}>
+          {headerText}
+        </h2>
+        <p className="text-sm opacity-70">{subheaderText}</p>
+      </motion.div>
+
+      {/* Policy Images */}
+      {policyImages && policyImages.length > 0 && (
+        <div className="w-full flex flex-col" style={{ gap: spacingMap[imageSpacing as keyof typeof spacingMap] }}>
+          {policyImages.slice(0, 3).map((image, index) => (
+            <div
+              key={index}
+              className="w-full overflow-hidden"
+              style={{
+                aspectRatio: '720 / 300',
+                borderRadius: borderRadius
+              }}
+            >
+              <img
+                src={image.url}
+                alt={image.alt || `Policy image ${index + 1}`}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Policy Text (if no images) */}
+      {(!policyImages || policyImages.length === 0) && policyText && (
+        <div
+          className="w-full p-4 rounded-lg border"
+          style={{
+            backgroundColor: `${colors.primary}10`,
+            borderColor: `${colors.primary}30`
+          }}
+          dangerouslySetInnerHTML={{ __html: policyText }}
+        />
+      )}
+
+      {/* Category Filters */}
+      {enableCategories && categories.length > 0 && (
+        <>
+          {categoryStyle === 'dropdown' && (
+            <div>
+              <label className="block text-sm font-medium mb-2">Service Category</label>
+              <select
+                value={selectedCategory || 'all'}
+                onChange={(e) => setSelectedCategory(e.target.value === 'all' ? null : e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent transition-all"
+                style={{ '--tw-ring-color': colors.primary } as any}
+              >
+                <option value="all">All Services</option>
+                {categories.map(cat => (
+                  <option key={cat.id} value={cat.id}>{cat.name}</option>
+                ))}
+              </select>
+            </div>
+          )}
+
+          {categoryStyle === 'tabs' && (
+            <div className="flex gap-2 flex-wrap">
+              <button
+                onClick={() => setSelectedCategory(null)}
+                className={`px-4 py-2 rounded-lg transition-all text-sm font-medium ${
+                  selectedCategory === null ? 'text-white shadow-lg' : 'border border-gray-300 hover:border-gray-400'
+                }`}
+                style={{ backgroundColor: selectedCategory === null ? colors.primary : undefined }}
+              >
+                All Services
+              </button>
+              {categories.map(cat => (
+                <button
+                  key={cat.id}
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={`px-4 py-2 rounded-lg transition-all text-sm font-medium ${
+                    selectedCategory === cat.id ? 'text-white shadow-lg' : 'border border-gray-300 hover:border-gray-400'
+                  }`}
+                  style={{ backgroundColor: selectedCategory === cat.id ? colors.primary : undefined }}
+                >
+                  {cat.name}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {categoryStyle === 'pills' && (
+            <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
+              <button
+                onClick={() => setSelectedCategory(null)}
+                className={`px-5 py-2 rounded-full transition-all text-sm font-medium whitespace-nowrap ${
+                  selectedCategory === null ? 'text-white shadow-md' : 'bg-gray-100 hover:bg-gray-200'
+                }`}
+                style={{ backgroundColor: selectedCategory === null ? colors.primary : undefined }}
+              >
+                All
+              </button>
+              {categories.map(cat => (
+                <button
+                  key={cat.id}
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={`px-5 py-2 rounded-full transition-all text-sm font-medium whitespace-nowrap ${
+                    selectedCategory === cat.id ? 'text-white shadow-md' : 'bg-gray-100 hover:bg-gray-200'
+                  }`}
+                  style={{ backgroundColor: selectedCategory === cat.id ? colors.primary : undefined }}
+                >
+                  {cat.name}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {categoryStyle === 'chips' && (
+            <div className="flex gap-2 flex-wrap">
+              <button
+                onClick={() => setSelectedCategory(null)}
+                className={`px-3 py-1.5 rounded-lg transition-all text-xs font-medium flex items-center gap-1.5 ${
+                  selectedCategory === null ? 'text-white' : 'border border-gray-300 bg-white hover:border-gray-400'
+                }`}
+                style={{
+                  backgroundColor: selectedCategory === null ? colors.primary : undefined,
+                  borderColor: selectedCategory === null ? colors.primary : undefined
+                }}
+              >
+                {selectedCategory === null && <span className="text-[10px]">✓</span>}
+                All
+              </button>
+              {categories.map(cat => (
+                <button
+                  key={cat.id}
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className={`px-3 py-1.5 rounded-lg transition-all text-xs font-medium flex items-center gap-1.5 ${
+                    selectedCategory === cat.id ? 'text-white' : 'border border-gray-300 bg-white hover:border-gray-400'
+                  }`}
+                  style={{
+                    backgroundColor: selectedCategory === cat.id ? colors.primary : undefined,
+                    borderColor: selectedCategory === cat.id ? colors.primary : undefined
+                  }}
+                >
+                  {selectedCategory === cat.id && <span className="text-[10px]">✓</span>}
+                  {cat.name}
+                </button>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+
+      {/* Accordion View */}
+      {enableCategories && categoryStyle === 'accordion' ? (
+        <div className="space-y-4">
+          {categories.map(cat => {
+            const isExpanded = expandedCategories.has(cat.id);
+            const categoryServices = services.filter(s => s.category === cat.id);
+            return (
+              <div key={cat.id}>
+                <button
+                  onClick={() => {
+                    const newExpanded = new Set(expandedCategories);
+                    if (isExpanded) {
+                      newExpanded.delete(cat.id);
+                    } else {
+                      newExpanded.add(cat.id);
+                    }
+                    setExpandedCategories(newExpanded);
+                  }}
+                  className="w-full flex items-center justify-between py-2 border-b-2 transition-all group"
+                  style={{ borderColor: isExpanded ? colors.primary : '#e5e7eb' }}
+                >
+                  <span className="font-semibold text-left transition-colors" style={{
+                    color: isExpanded ? colors.primary : undefined
+                  }}>{cat.name}</span>
+                  <ChevronDown
+                    className={`w-4 h-4 transition-all ${isExpanded ? 'rotate-180' : ''}`}
+                    style={{ color: isExpanded ? colors.primary : '#9ca3af' }}
+                  />
+                </button>
+                {isExpanded && (
+                  <div className={`mt-4 ${layout === 'grid' ? `grid ${gridCols} gap-3` : 'space-y-3'}`}>
+                    {categoryServices.map(service => renderServiceCard(service, layout))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ) : layout === 'grid' ? (
+        <div className={`grid ${gridCols} gap-3`}>
+          {filteredServices.map(service => renderServiceCard(service, 'grid'))}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filteredServices.map(service => renderServiceCard(service, 'list'))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ServiceSelection;

package/components/BookingFlow/steps/TimeSelection.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { TimeSelectionSettings } from '../../../types';
+import { createEntranceAnimation, createStaggerAnimation } from '../../../styles';
+
+interface TimeSelectionProps {
+  availableTimes: string[];
+  selectedTime: string | null;
+  onTimeSelect: (time: string) => void;
+  settings: TimeSelectionSettings;
+  serviceDuration?: number;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+  selectedService?: any; // Selected service object with name, price, description, duration
+  selectedDate?: string | null; // Selected date in YYYY-MM-DD format
+  selectedAddons?: string[]; // Array of selected addon IDs
+  addons?: any[]; // Array of available addon objects
+}
+
+export function TimeSelection({
+  availableTimes,
+  selectedTime,
+  onTimeSelect,
+  settings,
+  serviceDuration,
+  colors,
+  selectedService,
+  selectedDate,
+  selectedAddons = [],
+  addons = []
+}: TimeSelectionProps) {
+  const timeFormat = settings.timeFormat || '12h';
+  const showDuration = settings.showDuration !== false;
+  const headerText = settings.headerContent?.value || 'Pick a Time';
+  const columns = settings.columns || 3;
+
+  // Calculate total price including addons
+  const totalPrice = () => {
+    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;
+  };
+
+  // Format date for display
+  const formatDate = (dateStr: string) => {
+    const date = new Date(dateStr + 'T00:00:00');
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  const formatTime = (time: string) => {
+    // Parse time string (handles both "HH:MM" and "HH:MM AM/PM" formats)
+    const timeParts = time.trim().split(' ');
+    const [hourStr, minuteStr] = timeParts[0].split(':');
+    let hour = parseInt(hourStr);
+    const minute = minuteStr || '00';
+
+    // If time already has AM/PM, check if we need to convert to 24h
+    if (timeParts.length > 1) {
+      const period = timeParts[1];
+      if (timeFormat === '24h') {
+        if (period === 'PM' && hour !== 12) {
+          hour += 12;
+        } else if (period === 'AM' && hour === 12) {
+          hour = 0;
+        }
+        return `${String(hour).padStart(2, '0')}:${minute}`;
+      }
+      return time; // Already in 12h format
+    }
+
+    // Time is in 24h format, convert to 12h if needed
+    if (timeFormat === '12h') {
+      const period = hour >= 12 ? 'PM' : 'AM';
+      const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      return `${displayHour}:${minute} ${period}`;
+    }
+
+    // Keep in 24h format
+    return `${String(hour).padStart(2, '0')}:${minute}`;
+  };
+
+  const gridCols = {
+    2: 'grid-cols-2',
+    3: 'grid-cols-2 sm:grid-cols-3',
+    4: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+  }[columns] || 'grid-cols-3';
+
+  return (
+    <div className="space-y-6">
+      {/* Booking Summary Card */}
+      {selectedService && selectedDate && (
+        <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"
+        >
+          {/* Header */}
+          <div className="flex items-center gap-2 mb-4">
+            <h3 className="text-sm font-semibold tracking-wide uppercase" style={{ color: colors.primary }}>
+              Your Booking
+            </h3>
+          </div>
+
+          {/* Service */}
+          <div className="mb-3">
+            <p className="font-bold text-lg text-gray-900">
+              {selectedService.name}
+            </p>
+            {selectedService.duration && (
+              <div className="flex items-center gap-1.5 text-xs text-gray-500 mt-1">
+                <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>
+
+          {/* Add-ons */}
+          {selectedAddons.length > 0 && addons.length > 0 && (
+            <div className="mb-4">
+              <p className="text-sm font-bold text-gray-900 mb-2">Add-ons</p>
+              <div className="space-y-2">
+                {selectedAddons.map(addonId => {
+                  const addon = addons.find(a => a.id === addonId);
+                  if (!addon) return null;
+                  return (
+                    <div key={addonId} className="flex items-center justify-between">
+                      <span className="text-sm text-gray-700 font-medium">{addon.name}</span>
+                      <span className="text-sm font-semibold text-gray-900">${addon.addonPrice || addon.price || 0}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Full-width divider */}
+          <div className="border-t border-gray-200 -mx-6 mb-4"></div>
+
+          {/* Date section with emphasis */}
+          <div className="bg-gray-50/50 -mx-6 px-6 py-4 mb-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <svg className="w-5 h-5" style={{ color: colors.primary }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <span className="font-bold text-base text-gray-900">{formatDate(selectedDate)}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Full-width divider */}
+          <div className="border-t border-gray-200 -mx-6 mb-4"></div>
+
+          {/* Total */}
+          <div className="flex items-center justify-between">
+            <span className="text-base font-bold text-gray-900">Total</span>
+            <span className="text-2xl font-bold" style={{ color: colors.primary }}>
+              ${totalPrice()}
+            </span>
+          </div>
+        </motion.div>
+      )}
+
+      <motion.h2
+        {...createEntranceAnimation(selectedService && selectedDate ? 0.15 : 0.05)}
+        className="text-xl sm:text-2xl font-bold text-center sm:text-left"
+        style={{ color: colors.primary }}
+      >
+        {headerText}
+      </motion.h2>
+
+      <motion.div
+        className={`grid ${gridCols} gap-3`}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3, delay: selectedService && selectedDate ? 0.2 : 0.1 }}
+      >
+        {availableTimes.map((time, index) => {
+          const isSelected = selectedTime === time;
+
+          return (
+            <motion.button
+              key={time}
+              onClick={() => onTimeSelect(time)}
+              className={`p-3 rounded-lg border-2 transition-all text-center hover:scale-105 ${
+                isSelected
+                  ? 'border-current text-white shadow-lg'
+                  : 'border-gray-200 hover:border-gray-300'
+              }`}
+              style={{
+                borderColor: isSelected ? colors.primary : undefined,
+                backgroundColor: isSelected ? colors.primary : undefined
+              }}
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{
+                duration: 0.2,
+                delay: 0.15 + (index * 0.03),
+                ease: 'easeOut'
+              }}
+            >
+              <p className="font-medium">{formatTime(time)}</p>
+              {showDuration && serviceDuration && (
+                <p className="text-xs mt-1 opacity-75">{serviceDuration} min</p>
+              )}
+            </motion.button>
+          );
+        })}
+      </motion.div>
+    </div>
+  );
+}
+
+export default TimeSelection;

package/components/BookingFlow/steps/index.ts

@@ -0,0 +1,10 @@
+export { ServiceSelection } from './ServiceSelection';
+export { DateSelection } from './DateSelection';
+export { TimeSelection } from './TimeSelection';
+export { AddonsSelection } from './AddonsSelection';
+export { ContactForm } from './ContactForm';
+export { Confirmation } from './Confirmation';
+
+// Cycle-aware wrapper
+export { CycleAwareDateSelection, CYCLE_PHASES } from './CycleAwareDateSelection';
+export type { CycleAwareDateSelectionProps } from './CycleAwareDateSelection';

package/components/BottomSheet/index.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import type { BottomSheetProps } from '../../types';
+import { animations } from '../../styles';
+
+/**
+ * BottomSheet - Reusable slide-up modal component
+ *
+ * Perfect for custom forms, terms of service, or any content that needs
+ * to slide up from the bottom of the screen.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Color Consultation Form"
+ *   isRequired={false}
+ * >
+ *   <YourFormContent />
+ * </BottomSheet>
+ * ```
+ */
+export function BottomSheet({
+  isOpen,
+  onClose,
+  title,
+  children,
+  isRequired = false,
+  maxHeight = '80vh'
+}: BottomSheetProps) {
+  // Prevent body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  // Close on escape key (unless required)
+  useEffect(() => {
+    if (!isRequired && isOpen) {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+      window.addEventListener('keydown', handleEscape);
+      return () => window.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen, isRequired, onClose]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            {...animations.backdrop}
+            onClick={!isRequired ? onClose : undefined}
+            className="fixed inset-0 bg-black/50 z-50"
+            style={{ backdropFilter: 'blur(4px)' }}
+          />
+
+          {/* Bottom Sheet */}
+          <motion.div
+            initial={{ y: '100%' }}
+            animate={{ y: 0 }}
+            exit={{ y: '100%' }}
+            transition={animations.spring}
+            className="fixed bottom-0 left-0 right-0 bg-white rounded-t-2xl shadow-2xl z-50"
+            style={{ maxHeight }}
+          >
+            {/* Handle bar */}
+            <div className="flex justify-center pt-3 pb-2">
+              <div className="w-12 h-1 bg-gray-300 rounded-full" />
+            </div>
+
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 pb-4 border-b border-gray-200">
+              <div className="flex items-center gap-2">
+                {title && <h3 className="text-lg font-semibold">{title}</h3>}
+                {isRequired && (
+                  <span className="text-xs font-medium px-2 py-0.5 bg-amber-100 text-amber-800 rounded">
+                    Required
+                  </span>
+                )}
+              </div>
+              {!isRequired && (
+                <button
+                  onClick={onClose}
+                  className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                  aria-label="Close"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="overflow-y-auto" style={{ maxHeight: `calc(${maxHeight} - 120px)` }}>
+              <div className="px-6 py-6">
+                {children}
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default BottomSheet;