Complete React-based field rendering system that replaces WPCFTO Vue.js
layer while maintaining PHP field configuration compatibility.
Components:
- FieldRenderer: Main renderer with tabs support (metabox) and direct mode (settings)
- FieldTypes: 15+ field types (Text, Number, Select, Radio, Date, etc.)
- RepeaterField: Collapsible repeater with currency label parsing
- DependencyEngine: Show/hide fields based on conditions
- ValidationEngine: Client-side validation with error messages
- SettingsRenderer: Settings page with AJAX save to wp_options
Features:
- Repeater rows collapsed by default with readable currency titles
- Searchable dropdowns using Popover + Command pattern
- Proper label resolution for pre-selected values
- Hidden input sync for WordPress form submission
Also includes:
- FieldConfigBridge: Transform PHP configs to React format
- Updated Settings.php for React-based settings page
- Radio-group UI component
- wp-admin-restore.css for admin panel isolation
- Add postcss-prefix-selector to prefix all CSS selectors with .formipay-design-system
- This gives Tailwind utilities higher specificity than WP admin styles
- Prevents WP input/select/button styles from overriding shadcn components
- All 129 selectors now scoped correctly
- Remove all WPCFTO wrapper components (MetaboxLayout, TabNav, TabPanel, GroupTitle, etc.)
- Use shadcn Tabs with horizontal underline triggers
- Use grid-cols-[1fr_2fr] for clean form field layout
- Use shadcn Switch for toggle fields
- Use shadcn Select for discount type dropdown
- Replace inline Notice with toast notifications
- Add Skeleton loading state
- Add SearchableSelect with Badge chips for relation fields
- Move save button to tab header bar
- No custom CSS classes - all Tailwind utilities
Change modal rendering strategy from controlled via 'open' prop to
conditional rendering. Now the Modal component is only added to DOM
when isAddModalOpen is true, preventing it from being present on page load.
Before: {actions.addNew && <Modal open={isAddModalOpen} ...>}
After: {actions.addNew && isAddModalOpen && <Modal ...>}
This ensures the modal cannot accidentally show on page load and cannot be
interfered with when it shouldn't exist.
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Fix modal that was persisting by using correct @wordpress/components
Modal API:
- Use 'open' instead of 'isOpen' prop
- Use 'onRequestClose' instead of 'onClose'
- Add 'isDismissible' to allow closing with ESC/outside click
- Add 'focusOnMount' for accessibility
- Add deprecation warning props for TextControl (__next40pxDefaultSize,
__nextHasNoMarginBottom)
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Remove duplicate inline actions from Forms page title column to prevent
conflicts with DataTable's built-in actions column.
Fix DataTable actions column:
- Only show delete/duplicate on hover using CSS
- Add proper event propagation handling (stopPropagation)
- Remove unnecessary wrapper div that was causing issues
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Update Products page with full-featured DataTable:
- All columns (ID, title, price with multi-currency, type, stock, status)
- Status filter (All, Published, Draft)
- Inline actions (edit variations, delete, duplicate)
- Bulk delete and Add New modal
- VariationPricingTable editor preserved for editing individual products
All 7 admin listing pages now use the full-featured DataTable component:
✓ Forms - with shortcode copy button
✓ Coupons - with type and amount display
✓ Access - with product relation
✓ Orders - specialized with filters and date ranges
✓ Products - with multi-currency pricing
✓ Customers - read-only with order counts
✓ Licenses - read-only with status labels
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Update all admin listing pages to use the full-featured DataTable component:
Coupons page:
- All columns (ID, code, type, amount, usages, date limit, status)
- Status filter (All, Active, Inactive)
- Inline actions and bulk delete
- Add New modal
Access page:
- All columns (ID, title, product, status, date)
- Status filter (All, Published, Draft)
- Inline actions and bulk delete
- Add New modal
Customers page:
- All columns (ID, name, email, phone, total orders, date)
- Read-only (no selection or inline actions)
- Search and pagination
Licenses page:
- All columns (ID, license key, product, order, email, status)
- Status labels (Active, Inactive, Expired)
- Read-only (no selection or inline actions)
- Search and pagination
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Implement comprehensive DataTable with all Grid.js features:
- Checkbox selection with "Select All"
- Bulk delete button (shows when rows selected)
- Inline row actions (edit, delete, duplicate) on hover
- Status filter tabs with counts
- Search input with debounce
- Sort dropdown (ID, date, title ASC/DESC)
- Server-side pagination
- "Add New" modal with SweetAlert2
- SweetAlert2 loaded via WordPress global scope
Updated Forms page to use new DataTable component with:
- Full column rendering (ID, title, date, status, shortcode)
- Copy shortcode button with toast notification
- All filter, search, sort, pagination features
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.
Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks
Now the toggle between Classic and React versions works correctly.
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
