@bailierich/booking-components 2.0.0

package/components/BookingFlow/index.ts

@@ -0,0 +1,5 @@
+export { BookingFlow } from './BookingFlow';
+export type { BookingFlowProps, BookingFlowConfig } from './BookingFlow';
+
+// Re-export step components for convenience
+export * from './steps';

package/components/BookingFlow/steps/AddonsSelection.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { Addon, AddonSelectionSettings } from '../../../types';
+import { createEntranceAnimation } from '../../../styles';
+
+interface AddonsSelectionProps {
+  addons: Addon[];
+  selectedAddons: string[];
+  onAddonsChange: (addonIds: string[]) => void;
+  settings: AddonSelectionSettings;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+}
+
+export function AddonsSelection({
+  addons,
+  selectedAddons,
+  onAddonsChange,
+  settings,
+  colors
+}: AddonsSelectionProps) {
+  const headerText = settings.headerContent?.value || 'Add Extras';
+  const subheaderText = settings.subheaderContent?.value || 'Enhance your experience with these optional add-ons';
+  const showPricing = settings.showPricing !== false;
+  const showDuration = settings.showDuration !== false;
+
+  const toggleAddon = (addonId: string) => {
+    const newSelection = selectedAddons.includes(addonId)
+      ? selectedAddons.filter(id => id !== addonId)
+      : [...selectedAddons, addonId];
+    onAddonsChange(newSelection);
+  };
+
+  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>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {addons.map((addon, index) => {
+          const isSelected = selectedAddons.includes(addon.id);
+          return (
+            <motion.button
+              key={addon.id}
+              onClick={() => toggleAddon(addon.id)}
+              className={`p-4 rounded-lg border-2 transition-all text-left relative ${
+                isSelected
+                  ? 'border-current shadow-lg'
+                  : 'border-gray-200 hover:border-gray-300'
+              }`}
+              style={{
+                borderColor: isSelected ? colors.primary : undefined,
+                backgroundColor: isSelected ? `${colors.primary}10` : undefined
+              }}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{
+                duration: 0.3,
+                delay: 0.1 + (index * 0.05)
+              }}
+            >
+              {/* Checkmark indicator */}
+              {isSelected && (
+                <div
+                  className="absolute top-3 right-3 w-6 h-6 rounded-full flex items-center justify-center text-white text-sm"
+                  style={{ backgroundColor: colors.primary }}
+                >
+                  ✓
+                </div>
+              )}
+
+              <p className="font-semibold mb-1 pr-8">{addon.name}</p>
+              <p className="text-xs opacity-70 mb-3">{addon.description}</p>
+              <div className="flex justify-between items-center text-sm">
+                {showPricing && <span className="font-bold" style={{ color: colors.primary }}>+${addon.price}</span>}
+                {showDuration && <span className="opacity-60">+{addon.duration} min</span>}
+              </div>
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {selectedAddons.length > 0 && (
+        <motion.div
+          className="bg-gray-50 rounded-lg p-4 mt-4"
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+        >
+          <p className="text-sm font-medium mb-2">Selected Add-ons:</p>
+          <div className="space-y-1">
+            {selectedAddons.map(addonId => {
+              const addon = addons.find(a => a.id === addonId);
+              if (!addon) return null;
+              return (
+                <div key={addonId} className="flex justify-between text-sm">
+                  <span>{addon.name}</span>
+                  <span className="font-medium" style={{ color: colors.primary }}>+${addon.price}</span>
+                </div>
+              );
+            })}
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+}
+
+export default AddonsSelection;

package/components/BookingFlow/steps/Confirmation.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import type { Service, Addon, PaymentConfig } from '../../../types';
+import { createEntranceAnimation } from '../../../styles';
+
+interface ConfirmationProps {
+  service?: Service;
+  addons?: Addon[];
+  selectedDate?: string;
+  selectedTime?: string;
+  paymentProvider: 'square' | 'stripe';
+  paymentConfig: PaymentConfig;
+  onConfirm: () => Promise<void>;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+  isPreview?: boolean;
+}
+
+export function Confirmation({
+  service,
+  addons = [],
+  selectedDate,
+  selectedTime,
+  paymentProvider,
+  paymentConfig,
+  onConfirm,
+  colors,
+  isPreview = false
+}: ConfirmationProps) {
+  const servicePrice = service?.price || 0;
+  // Fix: Use addonPrice field (or fallback to price for backward compatibility)
+  const addonsPrice = addons.reduce((sum, addon) => sum + (addon.addonPrice || addon.price || 0), 0);
+  const totalPrice = servicePrice + addonsPrice;
+  const serviceDuration = service?.duration || 0;
+  const addonsDuration = addons.reduce((sum, addon) => sum + (addon.duration || 0), 0);
+  const totalDuration = serviceDuration + addonsDuration;
+
+  const depositPercentage = paymentConfig.depositPercentage || 20;
+  const depositAmount = (totalPrice * (depositPercentage / 100)).toFixed(2);
+  const totalAmount = totalPrice.toFixed(2);
+  const balanceAmount = (parseFloat(totalAmount) - parseFloat(depositAmount)).toFixed(2);
+
+  return (
+    <div className="space-y-4">
+      <motion.h2
+        {...createEntranceAnimation(0.05)}
+        className="text-xl font-bold text-center"
+        style={{ color: colors.primary }}
+      >
+        Confirm & Pay
+      </motion.h2>
+
+      {/* Appointment Summary - Compact */}
+      <motion.div
+        className="bg-gray-50 rounded-lg p-4"
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.1 }}
+      >
+        <div className="space-y-2">
+          {service && (
+            <div className="flex justify-between items-center text-sm">
+              <div>
+                <p className="font-medium">{service.name}</p>
+                <p className="text-xs opacity-70">{totalDuration} min total</p>
+              </div>
+              <span className="font-bold" style={{ color: colors.primary }}>${servicePrice}</span>
+            </div>
+          )}
+          {addons.length > 0 && (
+            <div className="space-y-1 text-xs">
+              {addons.map(addon => (
+                <div key={addon.id} className="flex justify-between opacity-70">
+                  <span>+ {addon.name}</span>
+                  <span>+${addon.addonPrice || addon.price || 0}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {selectedDate && (
+            <div className="flex justify-between items-center text-sm pt-2 border-t border-gray-200">
+              <span className="opacity-70">
+                {new Date(selectedDate + 'T00:00:00').toLocaleDateString('en-US', {
+                  weekday: 'long',
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric'
+                })}
+              </span>
+              <span>{selectedTime}</span>
+            </div>
+          )}
+          <div className="pt-2 mt-2 border-t border-gray-200 flex justify-between items-center">
+            <span className="text-sm font-medium">Due Today</span>
+            <span className="text-lg font-bold" style={{ color: colors.primary }}>${depositAmount}</span>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Payment Form - Preview or Live */}
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.2 }}
+      >
+        {isPreview ? (
+          // Preview Mode: Show placeholder UI
+          <div className="border border-gray-200 rounded-lg p-4 bg-white">
+            <div className="space-y-2">
+              <div className="h-10 bg-gray-50 border border-gray-200 rounded flex items-center px-3">
+                <span className="text-xs text-gray-400">Card Number</span>
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="h-10 bg-gray-50 border border-gray-200 rounded flex items-center px-3">
+                  <span className="text-xs text-gray-400">MM/YY</span>
+                </div>
+                <div className="h-10 bg-gray-50 border border-gray-200 rounded flex items-center px-3">
+                  <span className="text-xs text-gray-400">CVV</span>
+                </div>
+              </div>
+            </div>
+            <div className="mt-3 flex items-center justify-center gap-1">
+              <svg className="w-3 h-3 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+              </svg>
+              <span className="text-xs text-gray-400">
+                Powered by {paymentProvider === 'square' ? 'Square' : 'Stripe'}
+              </span>
+            </div>
+          </div>
+        ) : (
+          // Live Mode: Real payment processing
+          // Note: The actual payment form will be rendered by the tenant app
+          // This component will trigger payment initialization when mounted
+          <div className="border border-gray-200 rounded-lg p-4 bg-white">
+            <div className="text-center py-8 text-sm text-gray-500">
+              <div className="animate-pulse">
+                Initializing {paymentProvider === 'square' ? 'Square' : 'Stripe'} payment...
+              </div>
+              <div className="mt-4 text-xs text-gray-400">
+                Please wait while we securely load the payment form
+              </div>
+            </div>
+          </div>
+        )}
+      </motion.div>
+
+      {/* Terms - Compact */}
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.3 }}
+      >
+        <div className="space-y-2">
+          <label className="flex items-start gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              className="mt-0.5 w-4 h-4 rounded border-gray-300"
+              style={{ accentColor: colors.primary }}
+            />
+            <span className="text-xs">
+              I agree to the <a href="#" className="underline" style={{ color: colors.primary }}>cancellation policy</a> and understand the ${balanceAmount} balance is due at appointment.
+            </span>
+          </label>
+
+          <label className="flex items-start gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              className="mt-0.5 w-4 h-4 rounded border-gray-300"
+              style={{ accentColor: colors.primary }}
+            />
+            <span className="text-xs">
+              I agree to the <a href="#" className="underline" style={{ color: colors.primary }}>terms of service</a>.
+            </span>
+          </label>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+
+export default Confirmation;

package/components/BookingFlow/steps/ContactForm.tsx

@@ -0,0 +1,292 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import type { ContactInfo, ContactFormSettings, OptInModule } from '../../../types';
+import { createEntranceAnimation } from '../../../styles';
+import { BottomSheet } from '../../BottomSheet';
+
+interface ContactFormProps {
+  contactInfo: Partial<ContactInfo>;
+  onContactInfoChange: (info: Partial<ContactInfo>) => void;
+  settings: ContactFormSettings;
+  optInModules?: OptInModule[];
+  onOptInData?: (moduleId: string, data: any) => void;
+  colors: {
+    primary: string;
+    secondary: string;
+  };
+  isPreview?: boolean; // Disable validation in preview mode
+}
+
+export function ContactForm({
+  contactInfo,
+  onContactInfoChange,
+  settings,
+  optInModules = [],
+  onOptInData,
+  colors,
+  isPreview = false
+}: ContactFormProps) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentOptInModule, setCurrentOptInModule] = useState<OptInModule | null>(null);
+  const [optInChecked, setOptInChecked] = useState<Record<string, boolean>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+  const headerText = settings.headerContent?.value || 'Your Information';
+
+  // Validation functions
+  const validateEmail = (email: string): string | null => {
+    if (!email) return 'Email is required';
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) return 'Please enter a valid email address';
+    return null;
+  };
+
+  const validatePhone = (phone: string): string | null => {
+    if (!phone) return 'Phone number is required';
+    // Remove all non-digit characters
+    const digits = phone.replace(/\D/g, '');
+    if (digits.length < 10) return 'Please enter a valid phone number';
+    return null;
+  };
+
+  const validateName = (name: string): string | null => {
+    if (!name || name.trim().length === 0) return 'Name is required';
+    if (name.trim().length < 2) return 'Name must be at least 2 characters';
+    return null;
+  };
+
+  const validateField = (field: keyof ContactInfo, value: string): string | null => {
+    switch (field) {
+      case 'email':
+        return validateEmail(value);
+      case 'phone':
+        return validatePhone(value);
+      case 'name':
+        return validateName(value);
+      default:
+        return null;
+    }
+  };
+
+  const formFields = [
+    { label: 'Name *', type: 'text' as const, placeholder: 'Your full name', field: 'name' },
+    { label: 'Email *', type: 'email' as const, placeholder: 'your@email.com', field: 'email' },
+    { label: 'Phone *', type: 'tel' as const, placeholder: '(555) 123-4567', field: 'phone' },
+    { label: 'Notes (optional)', type: 'textarea' as const, placeholder: 'Any special requests or notes...', field: 'notes' }
+  ];
+
+  const handleFieldChange = (field: keyof ContactInfo, value: string) => {
+    // Update the value
+    onContactInfoChange({ ...contactInfo, [field]: value });
+
+    // Skip validation in preview mode
+    if (isPreview) return;
+
+    // Validate and update errors if field has been touched
+    if (touched[field]) {
+      const error = validateField(field, value);
+      setErrors(prev => ({
+        ...prev,
+        [field]: error || ''
+      }));
+    }
+  };
+
+  const handleBlur = (field: keyof ContactInfo) => {
+    // Skip validation in preview mode
+    if (isPreview) return;
+
+    // Mark field as touched
+    setTouched(prev => ({ ...prev, [field]: true }));
+
+    // Validate on blur
+    const value = contactInfo[field] || '';
+    const error = validateField(field, value);
+    setErrors(prev => ({
+      ...prev,
+      [field]: error || ''
+    }));
+  };
+
+  const handleOptInChange = (module: OptInModule, checked: boolean) => {
+    setOptInChecked(prev => ({ ...prev, [module.id]: checked }));
+    if (checked) {
+      setCurrentOptInModule(module);
+      setIsModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <div className="space-y-4">
+        <motion.h2
+          {...createEntranceAnimation(0.05)}
+          className="text-xl sm:text-2xl font-bold text-center sm:text-left"
+          style={{ color: colors.primary }}
+        >
+          {headerText}
+        </motion.h2>
+
+        <div className="space-y-3">
+          {formFields.map((field, index) => (
+            <motion.div
+              key={field.label}
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{
+                duration: 0.3,
+                delay: 0.1 + (index * 0.05),
+                ease: 'easeOut'
+              }}
+            >
+              <label className="block text-sm font-medium mb-1">{field.label}</label>
+              {field.type === 'textarea' ? (
+                <>
+                  <textarea
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:border-transparent resize-none transition-all ${
+                      !isPreview && errors[field.field] && touched[field.field] ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                    style={{ '--tw-ring-color': colors.primary } as any}
+                    rows={3}
+                    placeholder={field.placeholder}
+                    value={contactInfo[field.field as keyof ContactInfo] || ''}
+                    onChange={(e) => handleFieldChange(field.field as keyof ContactInfo, e.target.value)}
+                    onBlur={() => handleBlur(field.field as keyof ContactInfo)}
+                  />
+                  {!isPreview && errors[field.field] && touched[field.field] && (
+                    <p className="text-red-500 text-xs mt-1">{errors[field.field]}</p>
+                  )}
+                </>
+              ) : (
+                <>
+                  <input
+                    type={field.type}
+                    className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:border-transparent transition-all ${
+                      !isPreview && errors[field.field] && touched[field.field] ? 'border-red-500' : 'border-gray-300'
+                    }`}
+                    style={{ '--tw-ring-color': colors.primary } as any}
+                    placeholder={field.placeholder}
+                    value={contactInfo[field.field as keyof ContactInfo] || ''}
+                    onChange={(e) => handleFieldChange(field.field as keyof ContactInfo, e.target.value)}
+                    onBlur={() => handleBlur(field.field as keyof ContactInfo)}
+                  />
+                  {!isPreview && errors[field.field] && touched[field.field] && (
+                    <p className="text-red-500 text-xs mt-1">{errors[field.field]}</p>
+                  )}
+                </>
+              )}
+            </motion.div>
+          ))}
+
+          {/* Opt-in Modules */}
+          {optInModules.length > 0 && (
+            <motion.div
+              className="pt-3 border-t border-gray-200 space-y-3"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.3, delay: 0.3 }}
+            >
+              {optInModules.map(module => (
+                <label key={module.id} className="flex items-start gap-3 cursor-pointer group">
+                  <input
+                    type="checkbox"
+                    checked={optInChecked[module.id] || false}
+                    onChange={(e) => handleOptInChange(module, e.target.checked)}
+                    className="mt-1 w-4 h-4 rounded border-gray-300"
+                    style={{ accentColor: colors.primary }}
+                  />
+                  <div>
+                    <span className="text-sm font-medium">
+                      {module.label}
+                      {module.required && <span className="text-red-500 ml-1">*</span>}
+                    </span>
+                    <p className="text-xs text-gray-500 mt-0.5">
+                      Check this to provide additional information
+                    </p>
+                  </div>
+                </label>
+              ))}
+            </motion.div>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom Sheet Modal for Opt-in Forms */}
+      {currentOptInModule && (
+        <BottomSheet
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          title={currentOptInModule.formTitle || 'Additional Information'}
+          isRequired={currentOptInModule.required}
+        >
+          {/* Check if module has custom render function */}
+          {currentOptInModule.renderCustomForm ? (
+            currentOptInModule.renderCustomForm(
+              () => setIsModalOpen(false),
+              (data: any) => {
+                if (onOptInData) {
+                  onOptInData(currentOptInModule.id, data);
+                }
+              },
+              colors
+            )
+          ) : (
+            /* Standard form rendering */
+            <div className="space-y-4">
+              {currentOptInModule.formFields?.map(field => (
+                <div key={field.id}>
+                  <label className="block text-sm font-medium mb-1">
+                    {field.label}
+                    {field.required && <span className="text-red-500 ml-1">*</span>}
+                  </label>
+                  {field.type === 'textarea' ? (
+                    <textarea
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent resize-none"
+                      style={{ '--tw-ring-color': colors.primary } as any}
+                      rows={3}
+                      placeholder={field.placeholder}
+                    />
+                  ) : field.type === 'select' && field.options ? (
+                    <select
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
+                      style={{ '--tw-ring-color': colors.primary } as any}
+                    >
+                      {field.options.map(opt => (
+                        <option key={opt.value} value={opt.value}>{opt.label}</option>
+                      ))}
+                    </select>
+                  ) : (
+                    <input
+                      type={field.type}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:border-transparent"
+                      style={{ '--tw-ring-color': colors.primary } as any}
+                      placeholder={field.placeholder}
+                    />
+                  )}
+                </div>
+              ))}
+
+              <button
+                onClick={() => {
+                  if (onOptInData && currentOptInModule) {
+                    onOptInData(currentOptInModule.id, {}); // Collect form data here
+                  }
+                  setIsModalOpen(false);
+                }}
+                className="w-full py-3 rounded-lg text-white font-medium transition-all hover:opacity-90"
+                style={{ backgroundColor: colors.primary }}
+              >
+                Save & Continue
+              </button>
+            </div>
+          )}
+        </BottomSheet>
+      )}
+    </>
+  );
+}
+
+export default ContactForm;