@bailierich/booking-components 2.0.0

package/components/Forms/FormBlock.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import React from 'react';
+import FormField from './FormField';
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical } from 'lucide-react';
+
+// Sortable wrapper for form fields in preview mode
+function SortableFormField({ field, value, error, onChange, businessId, formId, styling }: any) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: field.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`relative group ${isDragging ? 'z-50' : ''}`}
+    >
+      {/* Drag Handle */}
+      <div
+        {...attributes}
+        {...listeners}
+        className="absolute -left-8 top-1/2 -translate-y-1/2 z-50 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-1 bg-[#BCB4FF] text-black px-1.5 py-1 rounded-md shadow-lg border border-black/10">
+          <GripVertical className="w-3 h-3" />
+        </div>
+      </div>
+
+      {/* Hover Outline */}
+      <div className="absolute inset-0 pointer-events-none transition-all rounded-lg group-hover:border border-[#BCB4FF]/30" />
+
+      {/* Field Content - ensure inputs can receive clicks */}
+      <div style={{ pointerEvents: 'auto' }}>
+        <FormField
+          field={field}
+          value={value}
+          error={error}
+          onChange={onChange}
+          businessId={businessId}
+          formId={formId}
+          styling={styling}
+        />
+      </div>
+    </div>
+  );
+}
+
+interface FormFieldData {
+  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?: FormFieldData[];
+}
+
+interface FormBlockProps {
+  block: FormBlockData;
+  formData: Record<string, any>;
+  errors: Record<string, string>;
+  onChange: (fieldId: string, value: any, field: FormFieldData) => void;
+  businessId?: string;
+  formId?: string;
+  styling?: {
+    alignment?: 'left' | 'center' | 'right';
+    fieldStyle?: 'outlined' | 'filled' | 'underlined' | 'minimal';
+    sectionBackground?: string;
+    fieldBorder?: string;
+    buttonColor?: string;
+    labelColor?: string;
+    textColor?: string;
+  };
+  previewMode?: boolean;
+  onFieldReorder?: (blockId: string, oldIndex: number, newIndex: number) => void;
+}
+
+export default function FormBlock({ block, formData, errors, onChange, businessId, formId, styling, previewMode, onFieldReorder }: FormBlockProps) {
+  // Setup sensors for drag detection (only used in preview mode)
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Require 8px movement before drag starts
+      },
+    })
+  );
+
+  // Handle field drag end
+  const handleFieldDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id && onFieldReorder && block.fields) {
+      const oldIndex = block.fields.findIndex((f: any) => f.id === active.id);
+      const newIndex = block.fields.findIndex((f: any) => f.id === over.id);
+
+      onFieldReorder(block.id, oldIndex, newIndex);
+    }
+  };
+
+  // Section Block - Contains form fields
+  if (block.type === 'section') {
+    const fields = block.fields || [];
+
+    // In preview mode with field reordering, use drag-and-drop
+    if (previewMode && onFieldReorder) {
+      return (
+        <div
+          className="border rounded-lg p-6"
+          style={{
+            backgroundColor: styling?.sectionBackground || '#FFFFFF',
+            borderColor: styling?.fieldBorder ? `${styling.fieldBorder}30` : '#E5E7EB'
+          }}
+        >
+          {block.title && (
+            <h2 className="text-xl font-semibold mb-2" style={{ color: styling?.labelColor || '#000000' }}>{block.title}</h2>
+          )}
+          {block.description && (
+            <p className="text-sm mb-6" style={{ color: styling?.textColor || '#000000' }}>{block.description}</p>
+          )}
+
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleFieldDragEnd}
+          >
+            <SortableContext
+              items={fields.map((f: any) => f.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-4">
+                {fields.map((field) => (
+                  <SortableFormField
+                    key={field.id}
+                    field={field}
+                    value={formData[field.id]}
+                    error={errors[field.id]}
+                    onChange={(value: any) => onChange(field.id, value, field)}
+                    businessId={businessId}
+                    formId={formId}
+                    styling={styling}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        </div>
+      );
+    }
+
+    // In normal mode, render without drag-and-drop
+    return (
+      <div
+        className="border rounded-lg p-6"
+        style={{
+          backgroundColor: styling?.sectionBackground || '#FFFFFF',
+          borderColor: styling?.fieldBorder ? `${styling.fieldBorder}30` : '#E5E7EB'
+        }}
+      >
+        {block.title && (
+          <h2 className="text-xl font-semibold mb-2" style={{ color: styling?.labelColor || '#000000' }}>{block.title}</h2>
+        )}
+        {block.description && (
+          <p className="text-sm mb-6" style={{ color: styling?.textColor || '#000000' }}>{block.description}</p>
+        )}
+
+        <div className="space-y-4">
+          {fields.map((field) => (
+            <FormField
+              key={field.id}
+              field={field}
+              value={formData[field.id]}
+              error={errors[field.id]}
+              onChange={(value) => onChange(field.id, value, field)}
+              businessId={businessId}
+              formId={formId}
+              styling={styling}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Text Block - Rich text content
+  if (block.type === 'text') {
+    const alignmentClass = {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right'
+    }[block.alignment || 'left'];
+
+    return (
+      <div className={`prose prose-gray max-w-none ${alignmentClass}`}>
+        <p className="whitespace-pre-wrap" style={{ color: styling?.textColor || '#000000' }}>{block.content}</p>
+      </div>
+    );
+  }
+
+  // Image Block - Styled image
+  if (block.type === 'image' && block.imageUrl) {
+    const imageSize = (block as any).imageSize || 'medium';
+    const isFull = imageSize === 'full';
+
+    const alignmentClass = isFull ? '' : {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto'
+    }[block.alignment || 'center'];
+
+    const sizeMap = {
+      small: '300px',
+      medium: '500px',
+      large: '700px'
+    };
+    const maxWidth = isFull ? 'none' : (sizeMap[imageSize as keyof typeof sizeMap] || sizeMap.medium);
+
+    const borderRadiusMap = {
+      none: '0',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      xl: '0.75rem',
+      full: '9999px'
+    };
+    const borderRadius = borderRadiusMap[(block as any).borderRadius as keyof typeof borderRadiusMap] || borderRadiusMap.lg;
+
+    const containerStyle: React.CSSProperties = {
+      maxWidth,
+      ...(isFull && { width: '100vw', marginLeft: '50%', transform: 'translateX(-50%)' })
+    };
+
+    return (
+      <div className={alignmentClass} style={containerStyle}>
+        <img
+          src={block.imageUrl}
+          alt=""
+          className="w-full h-auto"
+          style={{ borderRadius, objectFit: 'cover' }}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}

package/components/Forms/FormField.tsx

@@ -0,0 +1,385 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import { uploadFormImage, validateImageFile } from '../../lib/storage';
+
+interface FormFieldData {
+  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 FormFieldProps {
+  field: FormFieldData;
+  value: any;
+  error?: string;
+  onChange: (value: any) => void;
+  businessId?: string;
+  formId?: string;
+  styling?: {
+    fieldStyle?: 'outlined' | 'filled' | 'underlined' | 'minimal';
+    sectionBackground?: string;
+    fieldBorder?: string;
+    labelColor?: string;
+    textColor?: string;
+    buttonColor?: string;
+  };
+}
+
+export default function FormField({ field, value, error, onChange, businessId, formId, styling }: FormFieldProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  const labelColor = styling?.labelColor || '#374151';
+  const fieldStyle = styling?.fieldStyle || 'outlined';
+
+  // Build input classes based on field style
+  const getInputClasses = () => {
+    const baseClasses = 'w-full px-4 py-2 transition-all focus:outline-none';
+
+    if (error) {
+      return `${baseClasses} bg-red-50 border border-red-300 rounded-lg focus:ring-2 focus:ring-red-500`;
+    }
+
+    switch (fieldStyle) {
+      case 'filled':
+        return `${baseClasses} bg-gray-100 border border-transparent rounded-lg focus:bg-white focus:ring-2 focus:ring-gray-900 focus:border-transparent`;
+      case 'underlined':
+        return `${baseClasses} bg-transparent border-0 border-b-2 border-gray-300 rounded-none focus:border-gray-900 focus:ring-0 px-0`;
+      case 'minimal':
+        return `${baseClasses} bg-transparent border border-gray-200 rounded-lg focus:border-gray-400 focus:ring-1 focus:ring-gray-300`;
+      case 'outlined':
+      default:
+        return `${baseClasses} bg-white border-2 border-gray-300 rounded-lg focus:border-gray-900 focus:ring-2 focus:ring-gray-900`;
+    }
+  };
+
+  const baseInputClass = getInputClasses();
+  const labelClass = `block text-sm font-medium mb-1`;
+
+  // Text input
+  if (field.type === 'text' || field.type === 'email' || field.type === 'tel') {
+    return (
+      <div>
+        <label htmlFor={field.id} className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <input
+          type={field.type}
+          id={field.id}
+          name={field.id}
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder}
+          required={field.required}
+          className={baseInputClass}
+          style={{ color: labelColor }}
+        />
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Textarea
+  if (field.type === 'textarea') {
+    return (
+      <div>
+        <label htmlFor={field.id} className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <textarea
+          id={field.id}
+          name={field.id}
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={field.placeholder}
+          required={field.required}
+          rows={4}
+          className={baseInputClass}
+          style={{ color: labelColor }}
+        />
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Date input
+  if (field.type === 'date') {
+    return (
+      <div>
+        <label htmlFor={field.id} className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <input
+          type="date"
+          id={field.id}
+          name={field.id}
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          required={field.required}
+          className={baseInputClass}
+          style={{ color: labelColor }}
+        />
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Select dropdown
+  if (field.type === 'select' && field.options) {
+    return (
+      <div>
+        <label htmlFor={field.id} className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <select
+          id={field.id}
+          name={field.id}
+          value={value || ''}
+          onChange={(e) => onChange(e.target.value)}
+          required={field.required}
+          className={baseInputClass}
+          style={{ color: labelColor }}
+        >
+          <option value="">Select an option...</option>
+          {field.options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Radio buttons
+  if (field.type === 'radio' && field.options) {
+    return (
+      <div>
+        <label className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className="space-y-2 mt-2">
+          {field.options.map((option) => (
+            <label
+              key={option.value}
+              className="flex items-center space-x-2 cursor-pointer"
+            >
+              <input
+                type="radio"
+                name={field.id}
+                value={option.value}
+                checked={value === option.value}
+                onChange={(e) => onChange(e.target.value)}
+                required={field.required}
+                className="w-4 h-4 text-gray-900 focus:ring-gray-900 focus:ring-2"
+              />
+              <span className="text-sm" style={{ color: styling?.labelColor || '#000000' }}>{option.label}</span>
+            </label>
+          ))}
+        </div>
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Checkboxes (multiple selection)
+  if (field.type === 'checkbox' && field.options) {
+    const selectedValues = Array.isArray(value) ? value : [];
+
+    const handleCheckboxChange = (optionValue: string) => {
+      const newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter((v) => v !== optionValue)
+        : [...selectedValues, optionValue];
+      onChange(newValues);
+    };
+
+    return (
+      <div>
+        <label className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className="space-y-2 mt-2">
+          {field.options.map((option) => (
+            <label
+              key={option.value}
+              className="flex items-center space-x-2 cursor-pointer"
+            >
+              <input
+                type="checkbox"
+                name={`${field.id}[]`}
+                value={option.value}
+                checked={selectedValues.includes(option.value)}
+                onChange={() => handleCheckboxChange(option.value)}
+                className="w-4 h-4 text-gray-900 focus:ring-gray-900 focus:ring-2 rounded"
+              />
+              <span className="text-sm" style={{ color: styling?.labelColor || '#000000' }}>{option.label}</span>
+            </label>
+          ))}
+        </div>
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Photo upload
+  if (field.type === 'photo') {
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      setUploadError(null);
+
+      // Validate file
+      const validation = validateImageFile(file);
+      if (!validation.valid) {
+        setUploadError(validation.error || 'Invalid file');
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+        return;
+      }
+
+      // Check if businessId and formId are provided
+      if (!businessId || !formId) {
+        setUploadError('Missing required configuration for file upload');
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+        return;
+      }
+
+      // Upload to Supabase Storage
+      setUploading(true);
+      try {
+        const uploaded = await uploadFormImage(file, businessId, formId);
+        onChange({
+          url: uploaded.url,
+          filename: uploaded.filename,
+          size: uploaded.size,
+          type: uploaded.type,
+          uploadedAt: new Date().toISOString()
+        });
+        setUploadError(null);
+      } catch (err) {
+        console.error('Photo upload error:', err);
+        setUploadError(err instanceof Error ? err.message : 'Upload failed');
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      } finally {
+        setUploading(false);
+      }
+    };
+
+    return (
+      <div>
+        <label htmlFor={field.id} className={labelClass} style={{ color: labelColor }}>
+          {field.label}
+          {field.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className="mt-1">
+          <input
+            ref={fileInputRef}
+            type="file"
+            id={field.id}
+            name={field.id}
+            accept="image/*"
+            onChange={handleFileChange}
+            required={field.required}
+            disabled={uploading}
+            className="block w-full text-sm text-gray-500
+              file:mr-4 file:py-2 file:px-4
+              file:rounded-lg file:border-0
+              file:text-sm file:font-medium
+              file:bg-gray-900 file:text-white
+              hover:file:bg-gray-800
+              file:cursor-pointer cursor-pointer
+              disabled:opacity-50 disabled:cursor-not-allowed"
+          />
+          {uploading && (
+            <div className="mt-2 flex items-center gap-2 text-xs text-blue-600">
+              <div className="animate-spin rounded-full h-4 w-4 border-2 border-blue-600 border-t-transparent"></div>
+              <span>Uploading...</span>
+            </div>
+          )}
+          {value && !uploading && (
+            <div className="mt-2 flex items-center gap-2">
+              <svg className="w-4 h-4 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>
+              <span className="text-xs text-gray-600">
+                {value.filename} ({Math.round(value.size / 1024)}KB)
+              </span>
+            </div>
+          )}
+        </div>
+        <p className="mt-1 text-xs text-gray-500">Max file size: 5MB • JPG, PNG, WebP</p>
+        {uploadError && <p className="mt-1 text-xs text-red-600">{uploadError}</p>}
+        {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+      </div>
+    );
+  }
+
+  // Decorative image (within section)
+  if (field.type === 'image') {
+    const fieldData = field as any;
+    const imageUrl = fieldData.imageUrl;
+
+    if (!imageUrl) return null;
+
+    const imageSize = fieldData.imageSize || 'medium';
+    const isFull = imageSize === 'full';
+
+    const sizeMap = {
+      small: '200px',
+      medium: '400px',
+      large: '600px'
+    };
+    const maxWidth = isFull ? 'none' : (sizeMap[imageSize as keyof typeof sizeMap] || sizeMap.medium);
+
+    const borderRadiusMap = {
+      none: '0',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      full: '9999px'
+    };
+    const borderRadius = borderRadiusMap[fieldData.borderRadius as keyof typeof borderRadiusMap] || borderRadiusMap.md;
+
+    const alignmentClass = isFull ? '' : {
+      left: 'mr-auto',
+      center: 'mx-auto',
+      right: 'ml-auto'
+    }[fieldData.imageAlignment || 'center'];
+
+    const containerStyle: React.CSSProperties = {
+      maxWidth,
+      ...(isFull && { width: '100%' })
+    };
+
+    return (
+      <div className={alignmentClass} style={containerStyle}>
+        <img
+          src={imageUrl}
+          alt={field.label || ''}
+          className="w-full h-auto"
+          style={{ borderRadius }}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}