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>
- Remove @wordpress/url (version doesn't exist)
- Remove unused @wordpress/date and @tanstack/react-table
- Keep only core WordPress dependencies that are actually used
- Add build/ directory with compiled assets
- Add placeholder content for Coupons page
- Add placeholder content for Access Items page
- Add placeholder content for Licenses page
- Users can use classic editor until React versions are ready
- Create NotificationLog component with type icons
- Display notification history (email, SMS, WhatsApp)
- Show status badges (sent, failed, pending)
- Include recipient and timestamp information
- Add to OrderDetail sidebar
Components:
- OrderList: table with filters (status, date, search, pagination)
- OrderListItem: single order row with status badge
- OrderDetail: full order view with status update, items, customer info
- OrderTimeline: status change history with visual progress
- AnalyticsDashboard: stats cards (orders, revenue, completed, pending)
Features:
- Order list with keyword search, status filter, date range
- Pagination support
- Status change workflow with immediate update
- Order detail with items breakdown and customer info
- Visual timeline progress indicator
- Analytics dashboard with key metrics
- Placeholder charts for future implementation
Updated Orders page to use new components with list/detail navigation
- 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
Components:
- FieldPalette: drag-and-drop source for all field types
- FormCanvas: drop target with field list, reordering, CRUD
- FormField: individual field component with actions
- FieldSettingsPanel: edit field properties (label, ID, options, etc.)
- FormFieldOptions: manage select/radio/checkbox options
- FormPreview: live preview of rendered form
- FormFieldPreview: preview individual field types
Features:
- 16 field types (text, email, select, checkbox, radio, etc.)
- Categorized field palette
- Drag-and-drop field reordering
- Per-field settings panel
- Option management for choice fields
- Live form preview
- Save via AJAX
Config:
- fieldTypes.js: field definitions and constants
- Generate unique field IDs
- Field type categories (input, choice, layout, preset, advanced)
- 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
All critical bug fixes, performance improvements, and security
hardening tasks are now complete. Ready to proceed to Phase 2.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
PRD.md defines product requirements across 4 phases (critical fixes,
React admin, frontend enhancements, missing features). TASKLIST.md
breaks all work into checkable tasks with file references.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
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>
