- 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
- Rewrite DataTable using shadcn Table, Button, Dialog, Input, Select, Checkbox, Skeleton
- Replace all SweetAlert2 calls with shadcn Dialog (confirm) + sonner toast
- Rewrite design system internals to use shadcn Label, Input, Switch, Button, Alert, Badge, Tabs
- Add Toaster to App.js for global toast support
- Remove all @wordpress/components imports from DataTable
- Remove WpcftoDesign.css import from design system
- Replace Swal.fire() in Coupons, Products, Forms, Access, Licenses pages
- Add Array.isArray checks to getGlobalCurrencies helper
- Store global currencies in state to avoid timing issues
- Add null checks when mapping over currencies
- Add defensive checks to TabNav and TabPanel components
- Improve error handling in data loading
- 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>
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>
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>
- 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>
