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
Shipping Migration:
- Move shipping configuration from product-level to form-level
- Add form shipping tab in form settings (no_shipping, flat_rate, free_shipping)
- Update FlatRate to register at form level instead of product level
- Update checkout logic to read from form settings
- Support percentage-based flat rate calculation
- Simplify shipping method IDs (flat_rate, free_shipping)
Currency Flags Integration:
- Add formipay_get_all_currency_flags() to read from admin/assets/json/flags.json
- Remove hardcoded CURRENCY_FLAGS emoji map from VariationField.js
- Create CurrencyFlag component to render base64 flag images
- Localize currency_flags to window.formipayProductDetails
- Update shipping info display in admin order details
Benefits:
- Form-level shipping prevents multiplying shipping costs per product
- Single source of truth for currency flags (flags.json)
- Better support for future cart system
- Consistent with e-commerce standards
- Fetch post titles for pre-selected IDs on mount via include[] param
- Cache labels from search results to avoid re-fetching
- Filter already-selected items from dropdown results
- Add loading spinner and no-results message
- Update PHP autocomplete handler to support include[] param
- Fix CSS class conflict warning
- Create CouponMetabox React component with WPCFTO design system
- Add MetaboxLayout with vertical tabs (Rules, Restrictions)
- Implement Rules tab: active toggle, type radio, amount fields, multi-currency support
- Implement Restrictions tab: usage limit, date limit, autocomplete for forms/products/customers
- Add metabox registration in Coupon.php for formipay-coupon post type
- Update ReactAdmin to load assets on post.php edit screens
- Add autocomplete AJAX handler for relation fields
- Disable old WPCFTO metabox in favor of React island
- Update CSS tokens to match WPCFTO values (sidebar #2c3e50, content #f0f3f5)
- Update Field component to 40%/60% 2-column layout
- Update Checkbox component to toggle switch UI
- Add GroupTitle component for visual section dividers
- Update TabNav component to WPCFTO sidebar styling
- Add MetaboxLayout component for 2-column wrapper
- Update TabPanel styles to match WPCFTO tab content area
- Fix Coupons page to use native WordPress post.php editor instead of modal
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Add WPCFTO-inspired design system CSS (colors, spacing, typography)
- Add reusable React components matching WPCFTO visual language
- Implement client-side navigation with hash-based routing
- Add NavigationMenu component for on-page navigation (no SSR)
- Update WordPress submenu highlighting based on current React page
- Add Refresh button to DataTable toolbar
- Fix icon imports in VariationPricingTable
- Remove page headers from all table pages (consistent UX)
- Convert Orders page to use DataTable for consistency
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>
Remove all dual-mode rendering logic since React is now the single
admin interface. Focus on implementing full table features in React.
Changes:
- Remove ?react= query param checks from all page methods
- Remove admin notice and footer toggle from ReactAdmin
- Simplify asset loading - ReactAdmin handles all assets
- Clean up Init.php enqueue method
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>
Implement dual-mode rendering allowing classic Grid.js and new React
versions to run side-by-side during migration.
- Add coexistence mode checks to all admin page methods
- Check query param ?react=1 or option 'formipay_use_react_admin'
- Include classic PHP pages when React not active
- Add admin notice showing current version with toggle button
- Add footer toggle link to switch between versions
This ensures zero feature loss - old Grid.js pages continue working
(~20 features per page) while React versions are developed.
Files:
- Form.php, Coupon.php, Access.php, Order.php
- Customer.php, Product.php, License.php
- ReactAdmin.php (added version_notice, footer_toggle)
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
- Create FormBuilderAjax class for React form builder
- Add formipay_save_form_fields AJAX action
- Add formipay_load_form_fields AJAX action
- Sanitize field data on save
- Update FormBuilder to load fields on mount
- Add save status feedback (saving, saved, error)
- Register FormBuilderAjax singleton in main plugin file
- Add package.json with @wordpress/scripts and React dependencies
- Configure webpack for admin bundle output
- Create src/admin directory structure (api, components, pages)
- Implement API client with nonce handling (ajaxRequest, apiRequest)
- Add API methods for orders, customers, products, forms, coupons, licenses
- Create React App component with page routing
- Add placeholder page components for all admin sections
- Create ReactAdmin PHP class to manage asset enqueuing
- Register ReactAdmin singleton in main plugin file
- Bump version to 2.0.0
Build: Run 'npm install && npm run build' to generate assets
- Add currency_code column to formipay_bank_transfer_trx table schema
- Store currency code from product settings when creating transaction
- Prevents data loss by tracking which currency was used for bank transfer payments
- Matches PayPal implementation pattern for consistency
Checkpoint before implementation. Includes audit findings (FINDINGS.md),
architectural recommendation (RECOMMENDATION.md), and existing code changes
to Form, Order, Render, and form-action.js from recent development.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
