@bailierich/booking-components 2.0.0

package/components/Forms/FormRenderer.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import React, { useState } from 'react';
+import FormBlock from './FormBlock';
+import { validateField, validateForm } from './FormValidation';
+
+interface FormField {
+  id: string;
+  label: string;
+  type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'photo' | 'image';
+  placeholder?: string;
+  required: boolean;
+  options?: Array<{ value: string; label: string }>;
+}
+
+interface FormBlockData {
+  id: string;
+  type: 'section' | 'text' | 'image';
+  title?: string;
+  description?: string;
+  content?: string;
+  alignment?: 'left' | 'center' | 'right';
+  imageUrl?: string;
+  fields?: FormField[];
+}
+
+interface FormSettings {
+  title: string;
+  description: string;
+  submitButtonText: string;
+  successMessage: string;
+  blocks: FormBlockData[];
+  styling?: {
+    alignment?: 'left' | 'center' | 'right';
+    fieldStyle?: 'outlined' | 'filled' | 'underlined' | 'minimal';
+    sectionBackground?: string;
+    fieldBorder?: string;
+    buttonColor?: string;
+    labelColor?: string;
+    textColor?: string;
+  };
+  notifications: {
+    enabled: boolean;
+    adminEmail: string;
+    emailSubject: string;
+  };
+}
+
+interface FormRendererProps {
+  form: {
+    id: string;
+    name: string;
+    slug: string;
+    type: string;
+    settings: FormSettings;
+  };
+  businessId: string;
+  onSuccess?: () => void;
+}
+
+export default function FormRenderer({ form, businessId, onSuccess }: FormRendererProps) {
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const handleFieldChange = (fieldId: string, value: any, field: FormField) => {
+    setFormData(prev => ({ ...prev, [fieldId]: value }));
+
+    // Clear error when user starts typing
+    if (errors[fieldId]) {
+      const validation = validateField(value, field);
+      setErrors(prev => {
+        const newErrors = { ...prev };
+        if (validation.isValid) {
+          delete newErrors[fieldId];
+        } else {
+          newErrors[fieldId] = validation.error || '';
+        }
+        return newErrors;
+      });
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitError(null);
+
+    // Collect all fields from all section blocks
+    const allFields: FormField[] = [];
+    form.settings.blocks.forEach(block => {
+      if (block.type === 'section' && block.fields) {
+        allFields.push(...block.fields);
+      }
+    });
+
+    // Validate all fields
+    const validation = validateForm(formData, allFields);
+    if (!validation.isValid) {
+      setErrors(validation.errors);
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Use different API endpoints for tenant vs dashboard
+      // Tenant (Vite): /api/forms/submit
+      // Dashboard (Next.js): /api/studio/forms/${businessId}/${form.slug}/submit
+      const isTenant = typeof window !== 'undefined' && (import.meta as any).env;
+      const apiUrl = isTenant
+        ? '/api/forms/submit'
+        : `/api/studio/forms/${businessId}/${form.slug}/submit`;
+
+      const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          formId: form.id,
+          slug: form.slug,
+          data: formData
+        })
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || 'Failed to submit form');
+      }
+
+      setIsSuccess(true);
+      setFormData({});
+      setErrors({});
+
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (error: any) {
+      console.error('Form submission error:', error);
+      setSubmitError(error.message || 'Failed to submit form. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  if (isSuccess) {
+    return (
+      <div className="max-w-2xl mx-auto px-4 py-12">
+        <div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
+          <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h3 className="text-xl font-semibold mb-2" style={{ color: form.settings.styling?.labelColor || '#000000' }}>Success!</h3>
+          <p style={{ color: form.settings.styling?.textColor || '#000000' }}>{form.settings.successMessage}</p>
+          <button
+            onClick={() => setIsSuccess(false)}
+            className="mt-6 px-4 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
+          >
+            Submit Another Response
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const alignment = form.settings.styling?.alignment || 'left';
+  const alignmentClass = alignment === 'center' ? 'text-center' : alignment === 'right' ? 'text-right' : 'text-left';
+  const buttonColor = form.settings.styling?.buttonColor || '#CAC426';
+
+  return (
+    <div className="max-w-2xl mx-auto px-4 py-12">
+      <div className={`mb-8 ${alignmentClass}`}>
+        <h1 className="text-3xl font-bold mb-2" style={{ color: form.settings.styling?.textColor || '#000000' }}>{form.settings.title}</h1>
+        {form.settings.description && (
+          <p style={{ color: form.settings.styling?.textColor || '#000000' }}>{form.settings.description}</p>
+        )}
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        {form.settings.blocks.map((block) => (
+          <FormBlock
+            key={block.id}
+            block={block}
+            formData={formData}
+            errors={errors}
+            onChange={handleFieldChange}
+            businessId={businessId}
+            formId={form.id}
+            styling={form.settings.styling}
+          />
+        ))}
+
+        {submitError && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+            <p className="text-sm text-red-600">{submitError}</p>
+          </div>
+        )}
+
+        <div className="pt-6">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full px-6 py-3 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all font-medium hover:opacity-90"
+            style={{ backgroundColor: buttonColor }}
+          >
+            {isSubmitting ? 'Submitting...' : form.settings.submitButtonText}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/components/Forms/FormValidation.ts

@@ -0,0 +1,122 @@
+interface FormField {
+  id: string;
+  label: string;
+  type: 'text' | 'email' | 'tel' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'photo' | 'image';
+  required: boolean;
+  options?: Array<{ value: string; label: string }>;
+}
+
+interface ValidationResult {
+  isValid: boolean;
+  error?: string;
+}
+
+interface FormValidationResult {
+  isValid: boolean;
+  errors: Record<string, string>;
+}
+
+export function validateField(value: any, field: FormField): ValidationResult {
+  // Check required fields
+  if (field.required) {
+    if (value === undefined || value === null || value === '') {
+      return {
+        isValid: false,
+        error: `${field.label} is required`
+      };
+    }
+
+    // Check for empty arrays (checkboxes)
+    if (Array.isArray(value) && value.length === 0) {
+      return {
+        isValid: false,
+        error: `Please select at least one ${field.label.toLowerCase()}`
+      };
+    }
+
+    // Check for photo upload
+    if (field.type === 'photo' && !value.data) {
+      return {
+        isValid: false,
+        error: `${field.label} is required`
+      };
+    }
+  }
+
+  // Email validation
+  if (field.type === 'email' && value) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(value)) {
+      return {
+        isValid: false,
+        error: 'Please enter a valid email address'
+      };
+    }
+  }
+
+  // Phone validation (basic)
+  if (field.type === 'tel' && value) {
+    const phoneRegex = /^[\d\s\-\+\(\)]+$/;
+    if (!phoneRegex.test(value) || value.replace(/\D/g, '').length < 10) {
+      return {
+        isValid: false,
+        error: 'Please enter a valid phone number'
+      };
+    }
+  }
+
+  // Date validation
+  if (field.type === 'date' && value) {
+    const date = new Date(value);
+    if (isNaN(date.getTime())) {
+      return {
+        isValid: false,
+        error: 'Please enter a valid date'
+      };
+    }
+  }
+
+  return { isValid: true };
+}
+
+export function validateForm(
+  formData: Record<string, any>,
+  fields: FormField[]
+): FormValidationResult {
+  const errors: Record<string, string> = {};
+  let isValid = true;
+
+  fields.forEach(field => {
+    const validation = validateField(formData[field.id], field);
+    if (!validation.isValid && validation.error) {
+      errors[field.id] = validation.error;
+      isValid = false;
+    }
+  });
+
+  return { isValid, errors };
+}
+
+export function sanitizeFormData(formData: Record<string, any>): Record<string, any> {
+  const sanitized: Record<string, any> = {};
+
+  Object.keys(formData).forEach(key => {
+    const value = formData[key];
+
+    // Handle different types
+    if (typeof value === 'string') {
+      // Trim whitespace
+      sanitized[key] = value.trim();
+    } else if (Array.isArray(value)) {
+      // Keep arrays as-is (for checkboxes)
+      sanitized[key] = value;
+    } else if (value && typeof value === 'object' && value.data) {
+      // Keep file data as-is (for photo uploads)
+      sanitized[key] = value;
+    } else {
+      sanitized[key] = value;
+    }
+  });
+
+  return sanitized;
+}

package/components/Forms/index.ts

@@ -0,0 +1,4 @@
+export { default as FormRenderer } from './FormRenderer';
+export { default as FormBlock } from './FormBlock';
+// FormField is internal to FormBlock and FormRenderer, no need to export
+export * from './FormValidation';

package/components/HoldTimer/HoldTimer.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import type { HoldStatus, HoldTimerConfig } from '../../types';
+
+export interface HoldTimerProps {
+  /** Current hold status */
+  holdStatus: HoldStatus | null;
+  /** Configuration for timer behavior */
+  config?: Partial<HoldTimerConfig>;
+  /** Theme colors */
+  colors: {
+    primary: string;
+    secondary: string;
+    text?: string;
+  };
+  /** Callback when user clicks extend button */
+  onExtend?: () => void | Promise<void>;
+  /** Callback when user clicks release button */
+  onRelease?: () => void | Promise<void>;
+  /** Callback when timer enters warning state */
+  onWarning?: (timeRemaining: number) => void;
+  /** Callback when timer expires */
+  onExpired?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const DEFAULT_CONFIG: HoldTimerConfig = {
+  enabled: true,
+  duration: 600000, // 10 minutes
+  warningThreshold: 120000, // 2 minutes
+  maxExtensions: 2,
+  extensionDuration: 300000, // 5 minutes
+  showActions: true,
+  showWarning: true
+};
+
+/**
+ * HoldTimer - Countdown timer for time slot reservations
+ *
+ * Shows a countdown for how long a time slot is reserved, with
+ * visual warning states and optional extension/release actions.
+ *
+ * @example
+ * ```tsx
+ * <HoldTimer
+ *   holdStatus={activeHold}
+ *   config={{
+ *     duration: 600000, // 10 minutes
+ *     warningThreshold: 120000, // 2 minutes
+ *     maxExtensions: 2
+ *   }}
+ *   colors={{ primary: '#8B5CF6', secondary: '#EC4899' }}
+ *   onExtend={() => extendHold(activeHold.holdId)}
+ *   onRelease={() => releaseHold(activeHold.holdId)}
+ *   onExpired={() => {
+ *     // Handle expiration - usually go back to time selection
+ *     setSelectedTime(null);
+ *     setStep('time');
+ *   }}
+ * />
+ * ```
+ */
+export function HoldTimer({
+  holdStatus,
+  config: userConfig,
+  colors,
+  onExtend,
+  onRelease,
+  onWarning,
+  onExpired,
+  className = ''
+}: HoldTimerProps) {
+  const [currentTime, setCurrentTime] = useState(Date.now());
+  const [hasTriggeredWarning, setHasTriggeredWarning] = useState(false);
+  const [isExtending, setIsExtending] = useState(false);
+  const [isReleasing, setIsReleasing] = useState(false);
+
+  // Merge user config with defaults
+  const config: HoldTimerConfig = {
+    ...DEFAULT_CONFIG,
+    ...userConfig
+  };
+
+  // Update current time every second
+  useEffect(() => {
+    if (!holdStatus) return;
+
+    const interval = setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [holdStatus]);
+
+  // Calculate remaining time
+  const timeRemaining = holdStatus ? Math.max(0, holdStatus.expiresAt - currentTime) : 0;
+  const isExpired = timeRemaining === 0 && holdStatus !== null;
+  const isWarning = timeRemaining <= config.warningThreshold && timeRemaining > 0;
+
+  // Trigger warning callback
+  useEffect(() => {
+    if (isWarning && !hasTriggeredWarning && onWarning && holdStatus) {
+      setHasTriggeredWarning(true);
+      onWarning(timeRemaining);
+    }
+  }, [isWarning, hasTriggeredWarning, onWarning, holdStatus, timeRemaining]);
+
+  // Trigger expired callback
+  useEffect(() => {
+    if (isExpired && holdStatus && onExpired) {
+      onExpired();
+    }
+  }, [isExpired, holdStatus, onExpired]);
+
+  // Reset warning trigger when hold changes
+  useEffect(() => {
+    setHasTriggeredWarning(false);
+  }, [holdStatus?.holdKey]);
+
+  const handleExtend = useCallback(async () => {
+    if (!onExtend || !holdStatus || isExtending) return;
+
+    try {
+      setIsExtending(true);
+      await onExtend();
+      setHasTriggeredWarning(false); // Reset warning after extension
+    } catch (error) {
+      console.error('[HoldTimer] Failed to extend hold:', error);
+    } finally {
+      setIsExtending(false);
+    }
+  }, [onExtend, holdStatus, isExtending]);
+
+  const handleRelease = useCallback(async () => {
+    if (!onRelease || !holdStatus || isReleasing) return;
+
+    try {
+      setIsReleasing(true);
+      await onRelease();
+    } catch (error) {
+      console.error('[HoldTimer] Failed to release hold:', error);
+    } finally {
+      setIsReleasing(false);
+    }
+  }, [onRelease, holdStatus, isReleasing]);
+
+  // Don't render if no hold or not enabled
+  if (!holdStatus || !config.enabled) {
+    return null;
+  }
+
+  // Format time as MM:SS
+  const minutes = Math.floor(timeRemaining / 60000);
+  const seconds = Math.floor((timeRemaining % 60000) / 1000);
+  const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+
+  // Determine display variant
+  let bgColor = 'rgba(139, 92, 246, 0.1)'; // primary with opacity
+  let borderColor = 'rgba(139, 92, 246, 0.3)';
+  let textColor = colors.primary;
+
+  if (isExpired) {
+    bgColor = 'rgba(239, 68, 68, 0.1)';
+    borderColor = 'rgba(239, 68, 68, 0.3)';
+    textColor = '#EF4444';
+  } else if (isWarning && config.showWarning) {
+    bgColor = `${colors.secondary}1A`; // secondary with opacity (hex alpha)
+    borderColor = `${colors.secondary}4D`;
+    textColor = colors.secondary;
+  }
+
+  return (
+    <div
+      className={`rounded-lg p-4 text-center ${className}`}
+      style={{
+        backgroundColor: bgColor,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: borderColor
+      }}
+    >
+      <div className="flex flex-col items-center justify-center">
+        {/* Timer Display */}
+        <div className="flex flex-col items-center gap-2 mb-4">
+          {isExpired ? (
+            <div style={{ color: textColor }} className="font-medium text-base">
+              <span>Time expired - </span>
+              <button
+                onClick={handleRelease}
+                disabled={isReleasing}
+                className="underline hover:no-underline focus:outline-none focus:ring-2 focus:ring-offset-2 inline disabled:opacity-50"
+                style={{ color: textColor }}
+              >
+                {isReleasing ? 'Releasing...' : 'select a new time'}
+              </button>
+            </div>
+          ) : (
+            <div style={{ color: textColor }} className="font-medium text-base">
+              Your time slot is reserved for {formattedTime}
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        {config.showActions && !isExpired && (
+          <div className="flex justify-center gap-2">
+            {/* Extend Button */}
+            {onExtend && holdStatus.canExtend && (
+              <button
+                onClick={handleExtend}
+                disabled={!holdStatus.canExtend || isExtending}
+                className="px-4 py-2 text-sm font-medium rounded transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-white"
+                style={{ backgroundColor: colors.primary }}
+                aria-label={`Extend hold (${holdStatus.maxExtensions - holdStatus.extensions} extensions remaining)`}
+              >
+                {isExtending ? 'Extending...' : 'Extend'}
+                {!isExtending && holdStatus.maxExtensions - holdStatus.extensions > 0 && (
+                  <span className="ml-1">
+                    ({holdStatus.maxExtensions - holdStatus.extensions})
+                  </span>
+                )}
+              </button>
+            )}
+
+            {/* Release Button */}
+            {onRelease && (
+              <button
+                onClick={handleRelease}
+                disabled={isReleasing}
+                className="px-4 py-2 text-sm font-medium rounded border transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
+                style={{
+                  borderColor: 'rgba(255, 255, 255, 0.2)',
+                  color: colors.text || '#000000'
+                }}
+                aria-label="Release hold and return to time selection"
+              >
+                {isReleasing ? 'Releasing...' : 'Release'}
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* Extension Limit Reached */}
+        {!isExpired && !holdStatus.canExtend && holdStatus.extensions >= holdStatus.maxExtensions && (
+          <div className="mt-3 pt-3 border-t border-white/10 text-center">
+            <div className="text-sm" style={{ color: colors.secondary }}>
+              Maximum extensions reached - complete booking now or{' '}
+              <button
+                onClick={handleRelease}
+                disabled={isReleasing}
+                className="hover:underline focus:outline-none focus:underline disabled:opacity-50"
+                style={{ color: colors.primary }}
+              >
+                {isReleasing ? 'releasing...' : 'select a different time'}
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default HoldTimer;

package/components/HoldTimer/index.ts

@@ -0,0 +1,2 @@
+export { HoldTimer } from './HoldTimer';
+export type { HoldTimerProps } from './HoldTimer';