import React, { useState } from 'react'; import { Plus, GripVertical, Copy, Trash2, ChevronDown, Type, FileText, Hash, AtSign, Link as LinkIcon, List, ToggleLeft, Image, File, Layers, GitBranch, X, ChevronRight, Calendar, Clock, CalendarClock, Palette, AlignLeft, FolderOpen, Repeat, GalleryHorizontal, Network, Tags, Users, } from 'lucide-react'; import { MetaField, ConditionalRule, usePostTypes } from '../../hooks/usePostTypes'; import { useTaxonomies } from '../../hooks/useTaxonomies'; import { Input } from '../ui/input'; import { Select, SelectOption } from '../ui/select'; import { ProSettingWrapper } from '../ui/pro-feature-gate'; import { ProBadge } from '../ui/pro-badge'; import { useProContext } from '@/contexts/ProContext'; // Field types for Meta Fields const fieldTypes = [ // Basic Fields (Free) { value: 'text', label: 'Text', icon: Type, isPro: false }, { value: 'textarea', label: 'Textarea', icon: FileText, isPro: false }, { value: 'number', label: 'Number', icon: Hash, isPro: false }, { value: 'email', label: 'Email', icon: AtSign, isPro: false }, { value: 'url', label: 'URL', icon: LinkIcon, isPro: false }, { value: 'date', label: 'Date', icon: Calendar, isPro: false }, // Choice Fields (Free) { value: 'select', label: 'Select', icon: List, isPro: false }, { value: 'checkbox', label: 'Checkbox', icon: ToggleLeft, isPro: false }, { value: 'radio', label: 'Radio', icon: ToggleLeft, isPro: false }, { value: 'toggle', label: 'Toggle (Yes/No)', icon: ToggleLeft, isPro: false }, // Media Fields (Free) { value: 'image', label: 'Image', icon: Image, isPro: false }, { value: 'file', label: 'File', icon: File, isPro: false }, // Content Fields (Free) { value: 'wysiwyg', label: 'WYSIWYG Editor', icon: AlignLeft, isPro: false }, { value: 'time', label: 'Time', icon: Clock, isPro: false }, { value: 'datetime', label: 'Date & Time', icon: CalendarClock, isPro: false }, { value: 'color', label: 'Color Picker', icon: Palette, isPro: false }, // Pro Fields - Layout { value: 'group', label: 'Group', icon: FolderOpen, isPro: true }, { value: 'repeater', label: 'Repeater', icon: Repeat, isPro: true }, // Pro Fields - Media { value: 'gallery', label: 'Gallery', icon: GalleryHorizontal, isPro: true }, // Pro Fields - Relational { value: 'relationship', label: 'Relationship', icon: Network, isPro: true }, { value: 'taxonomy', label: 'Taxonomy Picker', icon: Tags, isPro: true }, { value: 'user', label: 'User Picker', icon: Users, isPro: true }, ]; // Object types (Field, Tab, Accordion, Endpoint) const objectTypeOptions: SelectOption[] = [ { value: 'field', label: 'Field' }, { value: 'tab', label: 'Tab' }, { value: 'accordion', label: 'Accordion' }, { value: 'endpoint', label: 'Endpoint' }, ]; // Field width options const fieldWidthOptions: SelectOption[] = [ { value: '100%', label: '100%' }, { value: '75%', label: '75%' }, { value: '66.6%', label: '66.6%' }, { value: '50%', label: '50%' }, { value: '33.3%', label: '33.3%' }, { value: '25%', label: '25%' }, ]; // Tab Layout options const tabLayoutOptions: SelectOption[] = [ { value: 'horizontal', label: 'Horizontal' }, { value: 'vertical', label: 'Vertical' }, ]; // Options source for Select/Checkbox/Radio fields const optionsSourceOptions: SelectOption[] = [ { value: 'manual', label: 'Manual Input' }, { value: 'query_builder', label: 'Query Builder' }, ]; // Conditional logic operators const conditionalOperators: SelectOption[] = [ { value: 'equal', label: 'Is equal to' }, { value: 'not_equal', label: 'Is not equal to' }, { value: 'empty', label: 'Is empty' }, { value: 'not_empty', label: 'Is not empty' }, { value: 'contains', label: 'Contains' }, { value: 'not_contains', label: 'Does not contain' }, { value: 'greater', label: 'Greater than' }, { value: 'less', label: 'Less than' }, ]; // Collapsible Section Component function CollapsibleSection({ title, icon, children, defaultOpen = true, badge }: { title: string; icon: React.ReactNode; children: React.ReactNode; defaultOpen?: boolean; badge?: string; }) { const [isOpen, setIsOpen] = useState(defaultOpen); return (
{isOpen && (
{children}
)}
); } // Field Type Selector Component with Pro badges function FieldTypeSelector({ value, onChange }: { value: string; onChange: (value: string) => void; }) { const { isPro, isProFeature } = useProContext(); const [showDropdown, setShowDropdown] = useState(false); const dropdownRef = React.useRef(null); const selectedType = fieldTypes.find(ft => ft.value === value) || fieldTypes[0]; const TypeIcon = selectedType.icon; // Close dropdown when clicking outside React.useEffect(() => { function handleClickOutside(event: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setShowDropdown(false); } } document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const handleSelect = (fieldType: typeof fieldTypes[0]) => { // Check if Pro field type and not Pro user if (fieldType.isPro && !isPro && isProFeature(fieldType.value, 'field_type')) { // Still allow selection - Pro check is done on save // This allows users to see the field type but can't use it without Pro } onChange(fieldType.value); setShowDropdown(false); }; // Group field types by category const freeBasicTypes = fieldTypes.filter(ft => !ft.isPro && ['text', 'textarea', 'number', 'email', 'url', 'date'].includes(ft.value)); const freeChoiceTypes = fieldTypes.filter(ft => !ft.isPro && ['select', 'checkbox', 'radio', 'toggle'].includes(ft.value)); const freeMediaTypes = fieldTypes.filter(ft => !ft.isPro && ['image', 'file'].includes(ft.value)); const freeContentTypes = fieldTypes.filter(ft => !ft.isPro && ['wysiwyg', 'time', 'datetime', 'color'].includes(ft.value)); const proLayoutTypes = fieldTypes.filter(ft => ft.isPro && ['group', 'repeater'].includes(ft.value)); const proMediaTypes = fieldTypes.filter(ft => ft.isPro && ['gallery'].includes(ft.value)); const proRelationalTypes = fieldTypes.filter(ft => ft.isPro && ['relationship', 'taxonomy', 'user'].includes(ft.value)); return (
{showDropdown && (
{/* Free Basic Fields */}
Basic
{freeBasicTypes.map(ft => { const Icon = ft.icon; return ( ); })} {/* Free Choice Fields */}
Choice
{freeChoiceTypes.map(ft => { const Icon = ft.icon; return ( ); })} {/* Free Media Fields */}
Media
{freeMediaTypes.map(ft => { const Icon = ft.icon; return ( ); })} {/* Free Content Fields */}
Content
{freeContentTypes.map(ft => { const Icon = ft.icon; return ( ); })} {/* Pro Layout Fields */}
Layout
{proLayoutTypes.map(ft => { const Icon = ft.icon; const isProLocked = !isPro && isProFeature(ft.value, 'field_type'); return ( ); })} {/* Pro Media Fields */}
Pro Media
{proMediaTypes.map(ft => { const Icon = ft.icon; const isProLocked = !isPro && isProFeature(ft.value, 'field_type'); return ( ); })} {/* Pro Relational Fields */}
Relational
{proRelationalTypes.map(ft => { const Icon = ft.icon; const isProLocked = !isPro && isProFeature(ft.value, 'field_type'); return ( ); })}
)}
); } // Generic Multi-Select Dropdown Component (used by Post Type, Taxonomy, Role selectors) function MultiSelectDropdown({ label, description, selectedValues, availableOptions, onChange, placeholder = 'Select...', allowEmpty = false, defaultValue, singleSelect = false, showSlug = true, }: { label: string; description?: string; selectedValues: string[]; availableOptions: { slug: string; label: string }[]; onChange: (newValues: string[]) => void; placeholder?: string; allowEmpty?: boolean; defaultValue?: string; singleSelect?: boolean; showSlug?: boolean; }) { const [isOpen, setIsOpen] = useState(false); const dropdownRef = React.useRef(null); // Close dropdown on outside click React.useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { setIsOpen(false); } }; document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); }, []); const toggleValue = (slug: string) => { if (singleSelect) { onChange([slug]); setIsOpen(false); return; } let newValues: string[]; if (selectedValues.includes(slug)) { newValues = selectedValues.filter(s => s !== slug); if (!allowEmpty && newValues.length === 0) { newValues = defaultValue ? [defaultValue] : [slug]; // Can't remove last one } } else { newValues = [...selectedValues, slug]; } onChange(newValues); }; const removeValue = (slug: string) => { const newValues = selectedValues.filter(s => s !== slug); if (!allowEmpty && newValues.length === 0) { onChange(defaultValue ? [defaultValue] : [slug]); } else { onChange(newValues); } }; return (
{description && ( {description} )}
{/* Trigger button */} )} ); })}
) : ( {placeholder} )} {/* Dropdown panel */} {isOpen && (
{availableOptions.map(opt => { const isChecked = selectedValues.includes(opt.slug); return ( ); })}
)}
); } // Props interface interface MetaFieldsEditorProps { metaFields: MetaField[]; setMetaFields: React.Dispatch>; emptyStateText?: string; enableLayoutTypes?: boolean; // Enable Tab, Accordion, Endpoint types (disabled for metaboxes) showFieldWidth?: boolean; // Show Field Width option (disabled for taxonomies as term meta doesn't support side-by-side layout) } export function MetaFieldsEditor({ metaFields, setMetaFields, emptyStateText = "Add custom fields to collect additional data for your posts", enableLayoutTypes = true, showFieldWidth = true }: MetaFieldsEditorProps) { const [expandedFields, setExpandedFields] = useState>(new Set()); const [draggedFieldIndex, setDraggedFieldIndex] = useState(null); const [dragOverFieldIndex, setDragOverFieldIndex] = useState(null); const [conditionalModalOpen, setConditionalModalOpen] = useState(null); // Fetch registered post types for Relationship field picker const { data: registeredPostTypes } = usePostTypes(); const availablePostTypes = [ { slug: 'post', label: 'Post' }, { slug: 'page', label: 'Page' }, ...(registeredPostTypes?.map(pt => ({ slug: pt.slug, label: pt.title })) || []), ].filter((pt, index, self) => self.findIndex(p => p.slug === pt.slug) === index); // deduplicate // Fetch registered taxonomies for Taxonomy Picker field const { data: registeredTaxonomies } = useTaxonomies(); const availableTaxonomies = [ { slug: 'category', label: 'Category' }, { slug: 'post_tag', label: 'Tag' }, ...(registeredTaxonomies?.map(tax => ({ slug: tax.slug, label: tax.title })) || []), ].filter((tax, index, self) => self.findIndex(t => t.slug === tax.slug) === index); // Available user roles for User Picker field const availableRoles = [ { slug: 'administrator', label: 'Administrator' }, { slug: 'editor', label: 'Editor' }, { slug: 'author', label: 'Author' }, { slug: 'contributor', label: 'Contributor' }, { slug: 'subscriber', label: 'Subscriber' }, ]; // Meta Fields handlers const addMetaField = () => { const newField: MetaField = { id: `field_${Date.now()}`, label: '', name: '', object_type: 'field', type: 'text', description: '', placeholder: '', default_value: '', field_width: '100%', character_limit: null, required: false, quick_edit: false, revision_support: false, show_in_rest: false, conditional_logic: null, layout: 'horizontal', options_source: 'manual', options: [], multiple: false, min_search_characters: 3, options_layout: 'vertical', return_format: 'array', }; setMetaFields([...metaFields, newField]); setExpandedFields(prev => new Set([...prev, newField.id])); }; const updateMetaField = (id: string, field: keyof MetaField, value: unknown) => { setMetaFields(fields => fields.map(f => f.id === id ? { ...f, [field]: value } : f )); }; const handleMetaFieldLabelChange = (id: string, label: string) => { const generatedSlug = label.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, ''); const generatedPlaceholder = label; setMetaFields(fields => fields.map(f => f.id === id ? { ...f, label, name: generatedSlug, placeholder: generatedPlaceholder } : f )); }; const removeMetaField = (id: string) => { setMetaFields(fields => fields.filter(f => f.id !== id)); setExpandedFields(prev => { const next = new Set(prev); next.delete(id); return next; }); }; const duplicateMetaField = (id: string) => { const fieldToDuplicate = metaFields.find(f => f.id === id); if (!fieldToDuplicate) return; const newField: MetaField = { ...fieldToDuplicate, id: `field_${Date.now()}`, label: `${fieldToDuplicate.label} (Copy)`, name: `${fieldToDuplicate.name}_copy`, }; const originalIndex = metaFields.findIndex(f => f.id === id); const newFields = [...metaFields]; newFields.splice(originalIndex + 1, 0, newField); setMetaFields(newFields); setExpandedFields(prev => new Set([...prev, newField.id])); }; const toggleFieldExpand = (id: string) => { setExpandedFields(prev => { const next = new Set(prev); if (next.has(id)) { next.delete(id); } else { next.add(id); } return next; }); }; const expandAllFields = () => { setExpandedFields(new Set(metaFields.map(f => f.id))); }; const collapseAllFields = () => { setExpandedFields(new Set()); }; // Conditional Logic helpers const openConditionalModal = (fieldId: string) => { setConditionalModalOpen(fieldId); }; const closeConditionalModal = () => { setConditionalModalOpen(null); }; const initializeConditionalLogic = (fieldId: string) => { setMetaFields(fields => fields.map(f => { if (f.id === fieldId && !f.conditional_logic) { return { ...f, conditional_logic: { enabled: true, relation: 'and', rules: [{ id: `rule_${Date.now()}`, field: '', operator: 'equal', value: '', }], }, }; } return f; })); openConditionalModal(fieldId); }; const addConditionalRule = (fieldId: string) => { setMetaFields(fields => fields.map(f => { if (f.id === fieldId && f.conditional_logic) { return { ...f, conditional_logic: { ...f.conditional_logic, rules: [ ...f.conditional_logic.rules, { id: `rule_${Date.now()}`, field: '', operator: 'equal' as const, value: '', }, ], }, }; } return f; })); }; const updateConditionalRule = (fieldId: string, ruleId: string, key: keyof ConditionalRule, value: string) => { setMetaFields(fields => fields.map(f => { if (f.id === fieldId && f.conditional_logic) { return { ...f, conditional_logic: { ...f.conditional_logic, rules: f.conditional_logic.rules.map(r => r.id === ruleId ? { ...r, [key]: value } : r ), }, }; } return f; })); }; const removeConditionalRule = (fieldId: string, ruleId: string) => { setMetaFields(fields => fields.map(f => { if (f.id === fieldId && f.conditional_logic) { return { ...f, conditional_logic: { ...f.conditional_logic, rules: f.conditional_logic.rules.filter(r => r.id !== ruleId), }, }; } return f; })); }; const toggleConditionalLogic = (fieldId: string, enabled: boolean) => { setMetaFields(fields => fields.map(f => { if (f.id === fieldId) { if (enabled && !f.conditional_logic) { return { ...f, conditional_logic: { enabled: true, relation: 'and', rules: [{ id: `rule_${Date.now()}`, field: '', operator: 'equal' as const, value: '', }], }, }; } else if (f.conditional_logic) { return { ...f, conditional_logic: { ...f.conditional_logic, enabled }, }; } } return f; })); }; const updateConditionalRelation = (fieldId: string, relation: 'and' | 'or') => { setMetaFields(fields => fields.map(f => { if (f.id === fieldId && f.conditional_logic) { return { ...f, conditional_logic: { ...f.conditional_logic, relation }, }; } return f; })); }; // Drag and drop handlers const handleDragStart = (index: number) => { setDraggedFieldIndex(index); }; const handleDragOver = (e: React.DragEvent, index: number) => { e.preventDefault(); if (draggedFieldIndex === null || draggedFieldIndex === index) return; setDragOverFieldIndex(index); }; const handleDragEnd = () => { if (draggedFieldIndex !== null && dragOverFieldIndex !== null && draggedFieldIndex !== dragOverFieldIndex) { const newFields = [...metaFields]; const [draggedItem] = newFields.splice(draggedFieldIndex, 1); newFields.splice(dragOverFieldIndex, 0, draggedItem); setMetaFields(newFields); } setDraggedFieldIndex(null); setDragOverFieldIndex(null); }; const handleDragLeave = () => { setDragOverFieldIndex(null); }; return ( <>
} badge={metaFields.length > 0 ? `${metaFields.length} fields` : undefined} > {metaFields.length === 0 ? (

No Meta Fields Yet

{emptyStateText}

) : (
{/* Expand/Collapse All */}
{metaFields.length} field{metaFields.length !== 1 ? 's' : ''} • {expandedFields.size} expanded
|
{metaFields.map((field, fieldIndex) => { const fieldTypeInfo = fieldTypes.find(ft => ft.value === field.type); const TypeIcon = fieldTypeInfo?.icon || Type; const objectType = field.object_type || 'field'; const isField = objectType === 'field'; const isTab = objectType === 'tab'; const isEndpoint = objectType === 'endpoint'; const isExpanded = expandedFields.has(field.id); const isDragging = draggedFieldIndex === fieldIndex; const isDragOver = dragOverFieldIndex === fieldIndex; // Check if this field should be indented const shouldIndent = (() => { if (objectType === 'tab' || objectType === 'accordion' || objectType === 'endpoint') { return false; } for (let i = fieldIndex - 1; i >= 0; i--) { const prevType = metaFields[i].object_type || 'field'; if (prevType === 'tab' || prevType === 'accordion') { return true; } if (prevType === 'endpoint') { return false; } } return false; })(); // Check if field has validation errors (missing label or name) const hasValidationError = isField && (!field.label?.trim() || !field.name?.trim()); const iconBgColors: Record = { field: 'rdcfe-bg-[hsl(var(--rdcfe-primary)/0.15)]', tab: 'rdcfe-bg-[hsl(217_91%_60%/0.15)]', accordion: 'rdcfe-bg-[hsl(262_83%_58%/0.15)]', endpoint: 'rdcfe-bg-[hsl(var(--rdcfe-muted-foreground)/0.15)]', }; const iconColors: Record = { field: 'rdcfe-text-[hsl(var(--rdcfe-primary))]', tab: 'rdcfe-text-[hsl(217_91%_50%)]', accordion: 'rdcfe-text-[hsl(262_83%_48%)]', endpoint: 'rdcfe-text-[hsl(var(--rdcfe-muted-foreground))]', }; return (
handleDragOver(e, fieldIndex)} onDragEnd={handleDragEnd} onDragLeave={handleDragLeave} className={`rdcfe-rounded-2xl rdcfe-border rdcfe-bg-white rdcfe-shadow-sm rdcfe-overflow-hidden rdcfe-transition-all ${ hasValidationError ? 'rdcfe-border-[hsl(var(--rdcfe-destructive)/0.5)] rdcfe-border-2' : isExpanded ? 'rdcfe-border-[hsl(var(--rdcfe-primary)/0.3)]' : 'rdcfe-border-[hsl(var(--rdcfe-border))]' } ${isDragging ? 'rdcfe-opacity-50 rdcfe-scale-[0.98]' : ''} ${ isDragOver ? 'rdcfe-border-[hsl(var(--rdcfe-primary))] rdcfe-border-2 rdcfe-border-dashed' : '' } ${shouldIndent ? 'rdcfe-ml-8 rdcfe-border-l-4 rdcfe-border-l-[hsl(var(--rdcfe-primary)/0.3)]' : ''}`} > {/* Field Header */}
toggleFieldExpand(field.id)} > {/* Drag Handle */}
{ e.stopPropagation(); handleDragStart(fieldIndex); }} className="rdcfe-cursor-grab active:rdcfe-cursor-grabbing rdcfe-text-[hsl(var(--rdcfe-muted-foreground))] hover:rdcfe-text-[hsl(var(--rdcfe-foreground))] rdcfe-transition-colors rdcfe-p-1 rdcfe-rounded hover:rdcfe-bg-[hsl(var(--rdcfe-muted))]" onClick={(e) => e.stopPropagation()} title="Drag to reorder" >
{/* Field Type Icon */}
{/* Label & Info */}
{field.label || 'Untitled Field'}
{hasValidationError && ( Required )}
{fieldTypeInfo?.label || 'Text'} • {field.name || 'no_name'}
{/* Conditional Logic Indicator */} {field.conditional_logic?.enabled && field.conditional_logic?.rules?.length > 0 && (
)} {/* Action Buttons */}
e.stopPropagation()}>
{/* Expand/Collapse Arrow */}
{/* Field Content - Collapsible */} {isExpanded && (
{/* Object Type Radio */} {enableLayoutTypes && (
Type:
{objectTypeOptions.map(opt => ( ))}
{objectType === 'field' && '— Input field for collecting data'} {objectType === 'tab' && '— Group fields under a tab'} {objectType === 'accordion' && '— Collapsible section for fields'} {objectType === 'endpoint' && '— End current tab or accordion'}
)} {/* Basic Info - Label & Name */}
handleMetaFieldLabelChange(field.id, e.target.value)} placeholder="e.g. Your Name, Email Address" error={isField && !field.label?.trim()} /> {isField && !field.label?.trim() && (

Label is required

)}
updateMetaField(field.id, 'name', e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, ''))} placeholder="your_name" className="rdcfe-font-mono" error={isField && !field.name?.trim()} /> {isField && !field.name?.trim() && (

Name/ID is required

)}
{/* Tab Layout - Only for Tab */} {isTab && (
{tabLayoutOptions.map(opt => ( ))}
)} {/* Field Settings - Only for Field type */} {isField && ( <> {/* Field Type & Width */}
updateMetaField(field.id, 'type', value)} /> {showFieldWidth && (
updateMetaField(field.id, 'options_source', e.target.value)} />
{(field.options_source || 'manual') === 'manual' && (
One option per line. Format: value:Label