0c5efa3efc
Implemented: Frontend Components for Level 1 Compatibility Created Components: - MetaFields.tsx - Generic meta field renderer - useMetaFields.ts - Hook for field registry Integrated Into: - Orders/Edit.tsx - Meta fields after OrderForm - Products/Edit.tsx - Meta fields after ProductForm Features: - Supports: text, textarea, number, date, select, checkbox - Groups fields by section - Zero coupling with specific plugins - Renders any registered fields dynamically - Read-only mode support How It Works: 1. Backend exposes meta via API (Phase 1) 2. PHP registers fields via MetaFieldsRegistry (Phase 3 - next) 3. Fields localized to window.WooNooWMetaFields 4. useMetaFields hook reads registry 5. MetaFields component renders fields 6. User edits fields 7. Form submission includes meta 8. Backend saves via update_order_meta_data() Result: - Generic, reusable components - Zero plugin-specific code - Works with any registered fields - Clean separation of concerns Next: Phase 3 - PHP MetaFieldsRegistry system
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import type { MetaField } from '@/components/MetaFields';
|
|
|
|
interface MetaFieldsRegistry {
|
|
orders: MetaField[];
|
|
products: MetaField[];
|
|
}
|
|
|
|
// Global registry exposed by PHP via wp_localize_script
|
|
declare global {
|
|
interface Window {
|
|
WooNooWMetaFields?: MetaFieldsRegistry;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* useMetaFields Hook
|
|
*
|
|
* Retrieves registered meta fields from global registry (set by PHP).
|
|
* Part of Level 1 compatibility - allows plugins to register their fields
|
|
* via PHP filters, which are then exposed to the frontend.
|
|
*
|
|
* Zero coupling with specific plugins - just reads the registry.
|
|
*
|
|
* @param type - 'orders' or 'products'
|
|
* @returns Array of registered meta fields
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const metaFields = useMetaFields('orders');
|
|
*
|
|
* return (
|
|
* <MetaFields
|
|
* meta={order.meta}
|
|
* fields={metaFields}
|
|
* onChange={handleMetaChange}
|
|
* />
|
|
* );
|
|
* ```
|
|
*/
|
|
export function useMetaFields(type: 'orders' | 'products'): MetaField[] {
|
|
const [fields, setFields] = useState<MetaField[]>([]);
|
|
|
|
useEffect(() => {
|
|
// Get fields from global registry (set by PHP via wp_localize_script)
|
|
const registry = window.WooNooWMetaFields || { orders: [], products: [] };
|
|
setFields(registry[type] || []);
|
|
|
|
// Listen for dynamic field registration (for future extensibility)
|
|
const handleFieldsUpdated = (e: CustomEvent) => {
|
|
if (e.detail.type === type) {
|
|
setFields(e.detail.fields);
|
|
}
|
|
};
|
|
|
|
window.addEventListener(
|
|
'woonoow:meta_fields_updated',
|
|
handleFieldsUpdated as EventListener
|
|
);
|
|
|
|
return () => {
|
|
window.removeEventListener(
|
|
'woonoow:meta_fields_updated',
|
|
handleFieldsUpdated as EventListener
|
|
);
|
|
};
|
|
}, [type]);
|
|
|
|
return fields;
|
|
}
|