- Created ResetPassword.tsx with:
- Password reset form with strength indicator
- Key validation on load
- Show/hide password toggle
- Success/error states
- Redirect to login on success
- Updated EmailManager.php:
- Changed reset_link from wp-login.php to SPA route
- Format: /wp-admin/admin.php?page=woonoow#/reset-password?key=KEY&login=LOGIN
- Added AuthController API methods:
- validate_reset_key: Validates reset key before showing form
- reset_password: Performs actual password reset
- Registered new REST routes in Routes.php:
- POST /auth/validate-reset-key
- POST /auth/reset-password
Password reset emails now link to the SPA instead of native WordPress.
ROOT CAUSE (from screenshot DevTools):
href="<span style=...>[login_url]</span>" - HTML span inside href attribute!
Flow causing the bug:
1. parseCardsForPreview converts [button url="{login_url}"] to <a href="{login_url}">
2. sampleData replacement runs but login_url NOT in sampleData
3. Variable highlighting injects <span>[login_url]</span> INTO href="..."
4. HTML is completely broken
FIXES APPLIED:
1. Added missing URL variables to sampleData:
- login_url, reset_link, reset_key
- user_login, user_email, user_temp_password
- customer_first_name, customer_last_name
2. Changed variable highlighting from HTML spans to plain text [variable]
- Prevents breaking HTML attributes if variable is inside href, src, etc.
Root cause: parseCardsForPreview was called TWICE in generatePreviewHTML:
1. Line 179 - correctly parses markdown to HTML including buttons
2. Line 283 - redundantly called AGAIN after variable highlighting
After first call, variable highlighting (lines 275-280) replaced unknown
variables like {login_url} with <span>[login_url]</span>. When the second
parseCardsForPreview ran, the [login_url] text was misinterpreted as
shortcode syntax, corrupting button HTML output.
Fix: Remove the redundant second call to parseCardsForPreview at line 283.
The function is already called at line 179 before any variable replacement.
1. API Route Fix (NotificationsController.php):
- Changed PUT to POST for /templates/:eventId/:channelId
- Frontend was using api.post() but backend only accepted PUT
- Templates can now be saved
2. Contextual Variables (EventRegistry.php):
- Added get_variables_for_event() method
- Returns category-based variables (order, customer, product, etc.)
- Merges event-specific variables from event definition
- Sorted alphabetically for easy browsing
3. API Response (NotificationsController.php):
- Template API now returns available_variables for the event
- Frontend can show only relevant variables
4. Frontend (EditTemplate.tsx):
- Removed hardcoded 50+ variable list
- Now uses template.available_variables from API
- Variables update based on selected event type
1. Remove wishlist setting from customer settings (now in module toggle)
- Removed from CustomerSettingsProvider.php
- Removed from Customers.tsx
2. Remove auto-login from REST API (causes cookie issues)
- Auto-login in REST context doesn't properly set browser cookies
- Removed wp_set_current_user/wp_set_auth_cookie calls
3. Fix cart not clearing after order
- Added WC()->cart->empty_cart() after successful order
- Server-side cart was not being cleared, causing re-population
- Frontend clears local store but Cart page syncs with server
- Add Campaigns list page with table, status badges, search, actions
- Add Campaign editor with title, subject, content fields
- Add preview modal, test email dialog, send confirmation
- Update Marketing index to show hub with Newsletter, Campaigns, Coupons cards
- Add routes in App.tsx
- Remove inline submenu expansion for Marketing
- Keep it consistent with Appearance and Settings (simple buttons)
- Description provides enough context about what's inside
- Add Marketing section to More page with Newsletter and Coupons submenu
- Remove standalone Coupons entry (now under Marketing)
- Add submenu rendering support for items with children
- Use Megaphone icon for Marketing section
Implements direct-to-cart functionality for landing page CTAs.
Features:
- Parse URL parameters: ?add-to-cart=123
- Support simple products: ?add-to-cart=123
- Support variable products: ?add-to-cart=123&variation_id=456
- Support quantity: ?add-to-cart=123&quantity=2
- Auto-navigate to cart after adding
- Clean URL after adding (remove parameters)
- Toast notification on success/error
Usage examples:
1. Simple product:
https://site.com/store?add-to-cart=332
2. Variable product:
https://site.com/store?add-to-cart=332&variation_id=456
3. With quantity:
https://site.com/store?add-to-cart=332&quantity=3
Flow:
- User clicks CTA on landing page
- Redirects to SPA with add-to-cart parameter
- SPA loads, hook detects parameter
- Adds product to cart via API
- Navigates to cart page
- Shows success toast
Works with both SPA modes:
- Full SPA: loads shop, adds to cart, navigates to cart
- Checkout Only: loads cart, adds to cart, stays on cart
User feedback: 'SPA means Single Page, why 4 pages?'
Correct architecture:
- 1 SPA entry page (e.g., /store)
- SPA Mode determines initial route:
* Full SPA → starts at shop page
* Checkout Only → starts at cart page
* Disabled → never loads
- React Router handles rest via /#/ routing
Changes:
- Admin UI: Changed from 4 page selectors to 1 SPA entry page
- Backend: spa_pages array → spa_page integer
- Template: Initial route based on spa_mode setting
- Simplified is_spa_page() checks (single ID comparison)
Benefits:
- User can set /store as homepage (Settings → Reading)
- Landing page → CTA → direct to cart/checkout
- Clean single entry point
- Mode controls behavior, not multiple pages
Example flow:
- Visit https://site.com/store
- Full SPA: loads shop, navigate via /#/product/123
- Checkout Only: loads cart, navigate via /#/checkout
- Homepage: set /store as homepage, SPA loads on site root
Next: Add direct-to-cart CTA with product parameter
Complete WooCommerce-style page architecture implementation:
Backend (already committed):
- API endpoint to fetch WordPress pages
- spa_pages field in appearance settings
- is_spa_page() checks in TemplateOverride and Assets
Frontend (this commit):
- Added page selector UI in Appearance > General
- Dropdowns for Shop, Cart, Checkout, Account pages
- Loads available WordPress pages from API
- Saves selected page IDs to settings
- Info alert explaining full-body rendering
UI Features:
- Clean page selection interface
- Shows all published WordPress pages
- '— None —' option to disable
- Integrated into existing General settings tab
- Follows existing design patterns
How it works:
1. Admin selects pages in Appearance > General
2. Page IDs saved to woonoow_appearance_settings
3. Frontend checks if current page matches selected pages
4. If match, renders full SPA to body (no theme interference)
5. Works with ANY theme consistently
Next: Test page selection and verify clean SPA rendering
Problem: React warning about missing keys persisted despite keys being present.
Root cause: term_id/attribute_id could be undefined during initial render before API response.
Solution: Add fallback keys using array index when primary ID is undefined:
- Categories: key={category.term_id || `category-${index}`}
- Tags: key={tag.term_id || `tag-${index}`}
- Attributes: key={attribute.attribute_id || `attribute-${index}`}
This ensures React always has a valid key, even during the brief moment
when data is loading or if the API returns malformed data.
Files Modified:
- admin-spa/src/routes/Products/Categories.tsx
- admin-spa/src/routes/Products/Tags.tsx
- admin-spa/src/routes/Products/Attributes.tsx
Result:
✅ React key warnings should be resolved
✅ Graceful handling of edge cases where IDs might be missing
1. Toast Position Control ✅
- Added toast_position setting to Appearance > General
- 6 position options: top-left/center/right, bottom-left/center/right
- Default: top-right
- Backend: AppearanceController.php (save/load toast_position)
- Frontend: Customer SPA reads from appearanceSettings and applies to Toaster
- Admin UI: Select dropdown in General settings
- Solves UX issue: toast blocking cart icon in header
2. Currency Formatting Fix ✅
- Changed formatPrice import from @/lib/utils to @/lib/currency
- @/lib/currency respects WooCommerce currency settings (IDR, not USD)
- Reads currency code, symbol, position, separators from window.woonoowCustomer.currency
- Applies correct formatting for Indonesian Rupiah and any other currency
3. Dialog Accessibility Warnings Fixed ✅
- Added DialogDescription component to all taxonomy dialogs
- Categories: 'Update category information' / 'Create a new product category'
- Tags: 'Update tag information' / 'Create a new product tag'
- Attributes: 'Update attribute information' / 'Create a new product attribute'
- Fixes console warning: Missing Description or aria-describedby
Note on React Key Warning:
The warning about missing keys in ProductCategories is still appearing in console.
All table rows already have proper key props (key={category.term_id}).
This may be a dev server cache issue or a nested element without a key.
The code is correct - keys are present on all mapped elements.
Files Modified:
- includes/Admin/AppearanceController.php (toast_position setting)
- admin-spa/src/routes/Appearance/General.tsx (toast position UI)
- customer-spa/src/App.tsx (apply toast position from settings)
- customer-spa/src/pages/Wishlist.tsx (use correct formatPrice from currency)
- admin-spa/src/routes/Products/Categories.tsx (DialogDescription)
- admin-spa/src/routes/Products/Tags.tsx (DialogDescription)
- admin-spa/src/routes/Products/Attributes.tsx (DialogDescription)
Result:
✅ Toast notifications now configurable and won't block header elements
✅ Prices display in correct currency (IDR) with proper formatting
✅ All Dialog accessibility warnings resolved
⚠️ React key warning persists (but keys are correctly implemented)
Newsletter Fix:
- Move all hooks (useQuery, useMutation) before conditional returns
- Add 'enabled' option to useQuery to control when it fetches
- Fixes React error #310: useEffect called conditionally
- Newsletter page now loads without errors at /marketing/newsletter
Wishlist Module Refactoring:
- Create WishlistSettings.php with 8 configurable settings:
* Enable guest wishlists
* Wishlist page selector
* Show in header toggle
* Enable sharing
* Back in stock notifications
* Max items per wishlist
* Multiple wishlists support
* Show add to cart button
- Add has_settings flag to wishlist module in ModuleRegistry
- Initialize WishlistSettings in woonoow.php
- Update customer-spa BaseLayout to use isEnabled('wishlist') check
- Wishlist page already has module check (no changes needed)
Files Added (1):
- includes/Modules/WishlistSettings.php
Files Modified (5):
- admin-spa/src/routes/Marketing/Newsletter.tsx
- includes/Core/ModuleRegistry.php
- woonoow.php
- customer-spa/src/layouts/BaseLayout.tsx
- admin-spa/dist/app.js (rebuilt)
Both newsletter and wishlist now follow the same module pattern:
- Settings via schema (no code required)
- Module enable/disable controls feature visibility
- Settings page at /settings/modules/{module_id}
- Consistent user experience
- Fix: Marketing events now display in Staff notifications tab
- Reorganize: Move Coupons to Marketing/Coupons for better organization
- Add: Comprehensive email/phone validation with extensible filter hooks
- Email validation with regex pattern (xxxx@xxxx.xx)
- Phone validation with WhatsApp verification support
- Filter hooks for external API integration (QuickEmailVerification, etc.)
- Fix: Newsletter template routes now use centralized notification email builder
- Add: Validation.php class for reusable validation logic
- Add: VALIDATION_HOOKS.md documentation with integration examples
- Add: NEWSLETTER_CAMPAIGN_PLAN.md architecture for future campaign system
- Fix: API delete method call in Newsletter.tsx (delete -> del)
- Remove: Duplicate EmailTemplates.tsx (using notification system instead)
- Update: Newsletter controller to use centralized Validation class
Breaking changes:
- Coupons routes moved from /routes/Coupons to /routes/Marketing/Coupons
- Legacy /coupons routes maintained for backward compatibility
- Add WishlistController with full CRUD API
- Create wishlist page in My Account
- Add heart icon to all product card layouts (always visible)
- Implement useWishlist hook for state management
- Add wishlist toggle in admin Settings > Customer
- Fix wishlist menu visibility based on admin settings
- Fix double navigation in wishlist page
- Fix variable product navigation to use React Router
- Add TypeScript type casting fix for addresses
- Add AddressController with full CRUD API for saved addresses
- Implement address management UI in My Account > Addresses
- Add modal-based address selector in checkout (Tokopedia-style)
- Hide checkout forms when saved address is selected
- Add search functionality in address modal
- Auto-select default addresses on page load
- Fix variable products to show 'Select Options' instead of 'Add to Cart'
- Add admin toggle for multiple addresses feature
- Clean up debug logs and fix TypeScript errors
- Created LayoutWrapper component to conditionally render header/footer based on route
- Created MinimalHeader component (logo only)
- Created MinimalFooter component (trust badges + policy links)
- Created usePageVisibility hook to get visibility settings per page
- Wrapped ClassicLayout with LayoutWrapper for conditional rendering
- Header/footer visibility now controlled directly in React SPA
- Settings: show/minimal/hide for both header and footer
- Background color support for checkout and thankyou pages
Implemented context-aware back button that respects user's navigation path:
Pattern:
```typescript
const handleBack = () => {
if (window.history.state?.idx > 0) {
navigate(-1); // Go back in history
} else {
navigate('/fallback'); // Safe fallback
}
};
```
Updated Pages:
✅ Orders/Detail.tsx → Fallback: /orders
✅ Orders/Edit.tsx → Fallback: /orders/:id
✅ Customers/Detail.tsx → Fallback: /customers
✅ Customers/Edit.tsx → Fallback: /customers
✅ Products/Edit.tsx → Fallback: /products
✅ Coupons/Edit.tsx → Fallback: /coupons
User Flow Examples:
1. Normal Navigation (History Available):
Customers Index → Customer Detail → Orders Tab → Order Detail
→ Click Back → Returns to Customer Detail ✅
2. Direct Access (No History):
User opens /orders/360 directly
→ Click Back → Goes to /orders (fallback) ✅
3. New Tab (No History):
User opens order in new tab
→ Click Back → Goes to /orders (fallback) ✅
4. Page Refresh (History Cleared):
User refreshes page
→ Click Back → Goes to fallback ✅
Benefits:
✅ Respects user's navigation path when possible
✅ Never breaks or leaves the app
✅ Predictable behavior in all scenarios
✅ Professional UX (like Gmail, Shopify, etc.)
✅ Works with deep links and bookmarks
Technical:
- Uses window.history.state.idx to detect history
- Falls back to safe default when no history
- Consistent pattern across all pages
- No URL parameters needed
Result: Back button now works intelligently based on context!
Fixed 2 critical issues:
1. ✅ Orders Not Loading:
Backend (OrdersController.php):
- Added customer_id parameter support
- Lines 300-304: Filter orders by customer
- Uses WooCommerce customer_id arg
Frontend (Detail.tsx):
- Already passing customer_id correctly
- Orders will now load properly
2. ✅ Added Tabs for Better Organization:
Implemented 3-tab layout:
**Overview Tab:**
- Stats cards: Total Orders, Total Spent, Registered
- Contact information (email, phone)
- Clean, focused view
**Orders Tab:**
- Full order history (not just 10)
- Order count display
- Better empty state
- All orders clickable to detail
**Address Tab:**
- Billing address (full details)
- Shipping address (full details)
- Company names if available
- Phone in billing section
- Empty states for missing addresses
Benefits:
✅ Clean, organized, contextual data per tab
✅ No information overload
✅ Easy navigation between sections
✅ Better mobile experience
✅ Consistent with modern admin UX
Technical:
- Uses shadcn/ui Tabs component
- Responsive grid layouts
- Proper empty states
- Type-safe with TypeScript
Result: Customer detail page is now properly organized with working order history!
Created comprehensive customer detail page:
Features:
✅ Customer Info Card:
- Avatar with User icon
- Name and email display
- Member/Guest badge
- Stats grid: Total Orders, Total Spent, Registered date
✅ Contact Information:
- Email address
- Phone number (if available)
✅ Billing Address:
- Full address display
- City, state, postcode
- Country
✅ Recent Orders Section:
- Shows last 10 orders
- Order number, status badge, date
- Total amount and item count
- Clickable to view order details
- Link to view all orders
✅ Page Header:
- Customer name as title
- Back button (to customers list)
- Edit button (to edit page)
✅ Navigation:
- Name in index → Detail page (/customers/:id)
- Edit button → Edit page (/customers/:id/edit)
- Order cards → Order detail (/orders/:id)
✅ Loading & Error States:
- Skeleton loaders while fetching
- Error card with retry option
- Empty state for no orders
Technical:
- Uses OrdersApi to fetch customer orders
- Filters completed/processing orders for stats
- Responsive grid layout
- Consistent with other detail pages (Orders)
- TypeScript with proper type annotations
Files:
- Created: routes/Customers/Detail.tsx
- Updated: App.tsx (added route)
- Updated: routes/Customers/index.tsx (links to detail)
Result: Complete customer profile view with order history!
Fixed all 6 issues in Customer index:
1. ✅ Search Input - Match Coupon Module:
- Mobile: Native input with proper styling
- Desktop: Native input with proper styling
- Consistent with Coupon module pattern
- Better focus states and padding
2. ✅ Filter - Not Needed:
- Customer data is simple (name, email, stats)
- Search is sufficient for finding customers
- No complex filtering like products/coupons
3. ✅ Stats Display - FIXED:
- Backend: Changed format_customer() to include stats (detailed=true)
- Now shows actual order count and total spent
- No more zero orders or dashed values
4. ✅ Member/Guest Column - Added:
- New 'Type' column in table
- Shows badge: Member (blue) or Guest (gray)
- Based on customer.role field
5. ✅ Actions Column - Added:
- New 'Actions' column with Edit button
- Edit icon + text link
- Navigates to /customers/:id/edit
6. ✅ Navigation - Fixed:
- Name click → Detail page (/customers/:id)
- Edit button → Edit page (/customers/:id/edit)
- Mobile cards also link to detail page
- Separation of concerns: view vs edit
Changes Made:
Backend (CustomersController.php):
- Line 96: format_customer(, true) to include stats
Frontend (Customers/index.tsx):
- Search inputs: Match Coupon module styling
- Table: Added Type and Actions columns
- Type badge: Member (blue) / Guest (gray)
- Actions: Edit button with icon
- Navigation: Name → detail, Edit → edit
- Mobile cards: Link to detail page
Table Structure:
- Checkbox | Customer | Email | Type | Orders | Total Spent | Registered | Actions
- 8 columns total (was 6)
Next: Create customer detail page with related orders and stats
1. Updated PROJECT_SOP.md:
✅ Added mobile card linkable pattern with full example
✅ Added submenu mobile hiding rules and behavior matrix
✅ Documented stopPropagation pattern for checkboxes
✅ Added ChevronRight icon requirement
✅ Documented active:scale animation for tap feedback
✅ Added spacing rules (space-y-3 for cards)
2. Created CUSTOMER_DATA_FLOW_ANALYSIS.md:
✅ Comprehensive analysis of customer data flow
✅ Documented 2 customer types: Guest vs Site Member
✅ Identified validation issues in OrdersController
✅ Found weak ! empty() checks allowing bad data
✅ Documented inconsistent validation between controllers
✅ Created action items for fixes
✅ Added test cases for all scenarios
Key Findings:
❌ OrdersController uses ! empty() - allows 'Indonesia' string
❌ No phone number sanitization in order creation
❌ No validation that phone is actually a phone number
✅ CustomersController has better validation (isset + sanitize)
Next: Investigate source of 'Indonesia' value and implement fixes
Implemented full Customer CRUD following PROJECT_SOP.md standards
1. Customers Index Page (index.tsx):
✅ List with pagination (20 per page)
✅ Search by name/email
✅ Bulk delete with confirmation
✅ Refresh button (required by SOP)
✅ Desktop: Table with columns (Name, Email, Orders, Total Spent, Registered)
✅ Mobile: Cards with same data
✅ Empty state with CTA
✅ Proper toolbar styling (red delete button, refresh button)
✅ FAB config for 'New Customer'
2. CustomerForm Component (CustomerForm.tsx):
✅ Vertical tabs: Personal Data | Billing Address | Shipping Address
✅ Personal Data tab:
- First/Last name (required)
- Email (required)
- Username (auto-generated from email if empty)
- Password (auto-generated if empty for new)
- Send welcome email checkbox (create only)
✅ Billing Address tab:
- Company, Address 1/2, City, State, Postcode, Country, Phone
✅ Shipping Address tab:
- Same fields as billing
- 'Same as billing' checkbox with auto-copy
✅ Mobile: Horizontal tabs
✅ Desktop: Vertical sidebar tabs
✅ Proper form validation
3. Customer New Page (New.tsx):
✅ Uses CustomerForm in create mode
✅ Page header with Back + Create buttons
✅ Form ref for header submit
✅ Success toast with customer name
✅ Redirects to list after create
✅ Error handling
4. Customer Edit Page (Edit.tsx):
✅ Uses CustomerForm in edit mode
✅ Loads customer data
✅ Page header with Back + Save buttons
✅ Loading skeleton
✅ Error card with retry
✅ Success toast
✅ Redirects to list after save
5. Routes (App.tsx):
✅ /customers → Index
✅ /customers/new → New
✅ /customers/:id/edit → Edit
✅ Consistent with products/coupons pattern
Features:
- Full WooCommerce integration
- Billing/shipping address management
- Order statistics display
- Email uniqueness validation
- Password auto-generation
- Welcome email option
- Responsive design (mobile + desktop)
- Vertical tabs for better UX
- Follows all PROJECT_SOP.md standards
Next: Testing and verification
Critical bug: Hook called after conditional return
Problem:
- useEffect at line 107 was AFTER early returns (lines 83-102)
- When loading/error states triggered early return
- Hook order changed between renders
- React detected hook order violation
- Component broke with blank screen
Rules of Hooks violation:
❌ Before:
1. All hooks (useState, useQuery, etc.)
2. Early return if loading
3. Early return if error
4. useEffect (line 107) ← WRONG! After conditional returns
✅ After:
1. All hooks including ALL useEffects
2. Early return if loading
3. Early return if error
4. Render
Fix:
- Moved useEffect from line 107 to line 62
- Now before any early returns
- Changed product?.meta to productQ.data?.meta
- Hooks always called in same order
- No conditional hook calls
Result:
✅ Product edit form loads correctly
✅ No React warnings
✅ Follows Rules of Hooks
✅ Consistent hook order every render
Critical bug: Tab buttons were submitting the form
Problem:
- Buttons inside <form> default to type="submit"
- Clicking any tab triggered form submission
- Form would submit instead of switching tabs
- Very disruptive UX
Fix:
- Added type="button" to all tab buttons
- Mobile horizontal tabs
- Desktop vertical tabs
- Now tabs only switch sections, no submit
Changes:
1. Mobile tab buttons: type="button"
2. Desktop tab buttons: type="button"
Result:
✅ Tabs switch sections without submitting
✅ Form only submits via submit button
✅ Proper form behavior
Moved 'Register as site member' from order-level to site-level setting
Frontend Changes:
1. Customer Settings - Added new General section
- Auto-register customers as site members toggle
- Clear description of functionality
- Saved to backend via existing API
2. OrderForm - Removed checkbox
- Removed registerAsMember state
- Removed checkbox UI
- Removed register_as_member from payload
- Backend now uses site setting
Backend Changes:
1. CustomerSettingsProvider.php
- Added auto_register_members setting
- Default: false (no)
- Stored as woonoow_auto_register_members option
- Included in get_settings()
- Handled in update_settings()
2. OrdersController.php
- Removed register_as_member parameter
- Now reads from CustomerSettingsProvider
- Site-level setting applies to all orders
- Consistent behavior across all order creation
Benefits:
✅ Site-level control (not per-order)
✅ Consistent customer experience
✅ Easier to manage (one setting)
✅ No UI clutter in order form
✅ Setting persists across all orders
Migration:
- Old orders with checkbox: No impact
- New orders: Use site setting
- Default: Disabled (safe default)
Result:
Admins can now control customer registration site-wide from Customer Settings instead of per-order checkbox
Fixed 3 critical issues:
1. Fixed Vertical Tabs - Cards All Showing
- Updated VerticalTabForm to hide inactive sections
- Only active section visible (className: hidden for others)
- Proper tab switching now works
2. Added Mobile Search/Filter to Coupons
- Created CouponFilterSheet component
- Added mobile search bar with icon
- Filter button with active count badge
- Matches Products pattern exactly
- Sheet with Apply/Reset buttons
3. Removed max-height from VerticalTabForm
- User removed max-h-[calc(100vh-200px)]
- Content now flows naturally
- Better for forms with varying heights
Components Created:
- CouponFilterSheet.tsx - Mobile filter bottom sheet
- Discount type filter
- Apply/Reset actions
- Active filter count
Changes to Coupons/index.tsx:
- Added mobile search bar (md:hidden)
- Added filter sheet state
- Added activeFiltersCount
- Search icon + SlidersHorizontal icon
- Filter badge indicator
Changes to VerticalTabForm:
- Hide inactive sections (className: hidden)
- Only show section matching activeTab
- Proper visibility control
Result:
✅ Vertical tabs work correctly (only one section visible)
✅ Mobile search/filter on Coupons (like Products)
✅ Filter count badge
✅ Professional mobile UX
Next: Move customer site member checkbox to settings
Applied VerticalTabForm to ProductFormTabbed
Changes:
1. Replaced horizontal Tabs with VerticalTabForm
2. Converted TabsContent to FormSection components
3. Removed activeTab state (scroll spy handles this)
4. Dynamic tabs based on product type
- Simple: General, Inventory, Organization
- Variable: General, Inventory, Variations, Organization
Benefits:
✅ Consistent layout with Coupons form
✅ Better space utilization
✅ Narrower content area (more readable)
✅ Scroll spy navigation
✅ Click to scroll to section
✅ Professional UI
Layout:
- Desktop: 250px sidebar + content area
- Sidebar: Sticky with icons
- Content: Scrollable with smooth navigation
- Mobile: Keeps original horizontal tabs (future)
Removed:
- TabsList, TabsTrigger components
- activeTab state and setActiveTab calls
- Manual tab switching on validation errors
Result:
Both Products and Coupons now use same vertical tab pattern
Forms are more professional and easier to navigate
Added comprehensive product/category restrictions to coupon form
Features Added:
1. Product Selectors:
- Products (include) - multiselect with search
- Exclude products - multiselect with search
- Shows product names with searchable dropdown
- Badge display for selected items
2. Category Selectors:
- Product categories (include) - multiselect
- Exclude categories - multiselect
- Shows category names with search
- Badge display for selected items
3. API Integration:
- Added ProductsApi.list() endpoint
- Added ProductsApi.categories() endpoint
- Fetch products and categories on form load
- React Query caching for performance
4. Form Data:
- Added product_ids field
- Added excluded_product_ids field
- Added product_categories field
- Added excluded_product_categories field
- Proper number/string conversion
UI/UX Improvements:
- Searchable multiselect dropdowns
- Badge display with X to remove
- Shows +N more when exceeds display limit
- Clear placeholder text
- Helper text for each field
- Consistent spacing and layout
Technical:
- Uses MultiSelect component (shadcn-based)
- React Query for data fetching
- Proper TypeScript types
- Number array handling
Note: Brands field not included yet (requires WooCommerce Product Brands extension check)
Result:
- Full WooCommerce coupon restrictions support
- Clean, searchable UI
- Production ready
Fixed blank white page caused by SelectItem validation error
Problem:
- SelectItem cannot have empty string as value
- Radix UI Select requires non-empty values
- Empty value for 'All types' filter caused component crash
Solution:
- Changed empty string to 'all' value for All types option
- Updated Select to use undefined when no filter selected
- Updated query logic to ignore 'all' value (treat as no filter)
- Updated hasActiveFilters check to exclude 'all' value
Changes:
- Select value: discountType || undefined
- Select onChange: value || '' (convert back to empty string)
- Query filter: discountType !== 'all' ? discountType : undefined
- Active filters: discountType && discountType !== 'all'
Result:
- No more SelectItem validation errors
- Page loads correctly
- Filter works as expected
- Clear filters button shows/hides correctly
Issue 1: Shipping recalculation on order edit (FIXED)
- Problem: OrderForm recalculated shipping on every edit
- Expected: Shipping should be fixed unless address changes
- Solution: Use existing order.totals.shipping in edit mode
- Create mode: Still calculates from shipping method
Issue 2: Meta fields not appearing without data (DOCUMENTED)
- Problem: Private meta fields dont appear if no data exists yet
- Example: Admin cannot input tracking number on first time
- Root cause: Fields only exposed if data exists in database
- Solution: Plugins MUST register fields via MetaFieldsRegistry
- Registration makes field available even when empty
Updated METABOX_COMPAT.md:
- Changed optional to REQUIRED for field registration
- Added critical warning section
- Explained private vs public meta behavior
- Private meta: MUST register to appear
- Public meta: Auto-exposed, no registration needed
The Flow (Corrected):
1. Plugin registers field -> Field appears in UI (even empty)
2. Admin inputs data -> Saved to database
3. Data visible in both admins
Without Registration:
- Private meta (_field): Not exposed, not editable
- Public meta (field): Auto-exposed, auto-editable
Why Private Meta Requires Registration:
- Security: Hidden by default
- Privacy: Prevents exposing sensitive data
- Control: Plugins explicitly declare visibility
Files Changed:
- OrderForm.tsx: Use existing shipping total in edit mode
- METABOX_COMPAT.md: Critical documentation updates
Result:
- Shipping no longer recalculates on edit
- Clear documentation on field registration requirement
- Developers know they MUST register private meta fields
