Fixed 3 critical issues:
1. ✅ Price and Type Column Display
Problem: Columns showing empty even though data exists
Root Cause: price_html returns empty string for products without prices
Solution:
- Added fallback chain in index.tsx:
1. Try price_html (formatted HTML)
2. Fallback to regular_price (plain number)
3. Fallback to "—" (dash)
- Added fallback for type: {product.type || '—'}
Now displays:
- Formatted price if available
- Plain price if no HTML
- Dash if no price at all
2. ✅ Redirect After Create Product
Problem: Stays on form after creating product
Expected: Return to products index
Solution:
- Changed New.tsx redirect from:
navigate(`/products/${response.id}`) → navigate('/products')
- Removed conditional logic
- Always redirect to index after successful create
User flow now:
Create product → Success toast → Back to products list ✅
3. ✅ Edit Form Not Loading Data
Problem: Edit form shows empty fields instead of product data
Root Cause: Missing fields in API response (virtual, downloadable, featured)
Solution:
- Added to format_product_full() in ProductsController.php:
* $data['virtual'] = $product->is_virtual();
* $data['downloadable'] = $product->is_downloadable();
* $data['featured'] = $product->is_featured();
Now edit form receives complete data:
- Basic info (name, type, status, descriptions)
- Pricing (SKU, regular_price, sale_price)
- Inventory (manage_stock, stock_quantity, stock_status)
- Categories & tags
- Virtual, downloadable, featured flags
- Attributes & variations (for variable products)
Result:
✅ Products list shows prices and types correctly
✅ Creating product redirects to index
✅ Editing product loads all data properly
Critical Fixes:
1. ✅ PHP Fatal Error - FIXED
Problem: call_user_func() error - Permissions::check_admin does not exist
Cause: Method name mismatch in ProductsController.php
Solution: Changed all 8 occurrences from:
'permission_callback' => [Permissions::class, 'check_admin']
To:
'permission_callback' => [Permissions::class, 'check_admin_permission']
Affected routes:
- GET /products
- GET /products/:id
- POST /products
- PUT /products/:id
- DELETE /products/:id
- GET /products/categories
- GET /products/tags
- GET /products/attributes
2. ✅ Attribute Options Input - FIXED
Problem: Cannot type anything after first word (cursor jumps)
Cause: Controlled input with immediate state update on onChange
Solution: Changed to uncontrolled input with onBlur
Changes:
- value → defaultValue (uncontrolled)
- onChange → onBlur (update on blur)
- Added key prop for proper re-rendering
- Added onKeyDown for Enter key support
- Updated help text: "press Enter or click away"
Now you can:
✅ Type: Red, Blue, Green (naturally!)
✅ Type: Red | Blue | Green (pipe works too!)
✅ Press Enter to save
✅ Click away to save
✅ No cursor jumping!
Result:
- Products index page loads without PHP error
- Attribute options input works naturally
- Both comma and pipe separators supported
Created detailed comparison document showing:
- Problem statement (old form issues)
- Solution architecture (tabbed interface)
- Tab-by-tab breakdown
- UX principles applied
- Old vs New comparison table
- Industry benchmarking (Shopify, Shopee, etc.)
- User flow comparison
- Technical benefits
- Future enhancements roadmap
- Metrics to track
This document serves as:
✅ Reference for team
✅ Justification for stakeholders
✅ Guide for future improvements
✅ Onboarding material for new devs
Fixed Issues:
1. TypeScript error on .indeterminate property (line 332)
- Cast checkbox element to any for indeterminate access
2. API error handling for categories/tags endpoints
- Added is_wp_error() checks
- Return empty array on error instead of 500
Next: Implement modern tabbed product form (Shopify-style)
Fixed two email rendering issues:
1. Card Success Styling
- Was using hero gradient (purple) instead of green theme
- Now uses proper green background (#f0fdf4) with green border
- Info card: blue theme with border
- Warning card: orange theme with border
- Hero card: keeps gradient as intended
2. List Support Verification
- MarkdownParser already supports bullet lists
- Supports: *, -, •, ✓, ✔ as list markers
- Properly converts to <ul><li> HTML
- Works in both visual editor and email preview
Card Types Now:
- default: white background
- hero: gradient background (purple)
- success: green background with left border
- info: blue background with left border
- warning: orange background with left border
Fixed missing variable dropdown in email template editor.
Problem:
- RichTextEditor component had dropdown functionality
- But variables prop was empty array
- Users had to manually type {variable_name}
Solution:
- Added comprehensive list of 40+ available variables
- Includes order, customer, payment, shipping, URL, store variables
- Variables now show in dropdown for easy insertion
Available Variables:
- Order: order_number, order_total, order_items_table, etc.
- Customer: customer_name, customer_email, customer_phone
- Payment: payment_method, transaction_id, payment_retry_url
- Shipping: tracking_number, tracking_url, shipping_carrier
- URLs: order_url, review_url, shop_url, my_account_url
- Store: site_name, support_email, current_year
Now users can click dropdown and select variables instead of typing them manually.
Added missing order status events that were not showing in admin UI.
New Events Added (Staff + Customer):
- Order On-Hold (awaiting payment)
- Order Failed (payment/processing failed)
- Order Refunded (full refund processed)
- Order Pending (initial order state)
Changes:
1. EventRegistry.php - Added 8 new event definitions
2. DefaultTemplates.php - Added 8 new email templates
3. DefaultTemplates.php - Added subject lines for all new events
Now Available in Admin:
- Staff: 11 order events total
- Customer: 12 events total (including new customer)
All events can be toggled on/off per channel (email/push) in admin UI.
Fixed missing variables: completion_date, order_items_table, payment_date, transaction_id, tracking_number, review_url, shop_url, and more.
Added proper HTML table for order items with styling.
All template variables now properly replaced in emails.
🐛 Three Critical Email Issues Fixed:
1. Newlines Not Working
❌ "Order Number: #359 Order Total: Rp129.000" on same line
✅ Fixed by adding <br> for line continuations in paragraphs
Key change in MarkdownParser.php:
- Accumulate paragraph content with <br> between lines
- Match TypeScript behavior exactly
- Protect variables from markdown parsing
Before:
$paragraph_content = $trimmed;
After:
if ($paragraph_content) {
$paragraph_content .= '<br>' . $trimmed;
} else {
$paragraph_content = $trimmed;
}
2. Hero Card Text Color
❌ Heading black instead of white in Gmail
✅ Add inline color styles to all headings/paragraphs
Problem: Gmail doesn't inherit color from parent
Solution: Add style="color: white;" to each element
$content = preg_replace(
'/<(h[1-6]|p)([^>]*)>/',
'<$1$2 style="color: ' . $hero_text_color . ';">',
$content
);
3. Blue Border on Cards
❌ Unwanted blue border in Gmail (screenshot 2)
✅ Removed borders from .card-info, .card-warning, .card-success
Problem: CSS template had borders
Solution: Removed border declarations
Before:
.card-info { border: 1px solid #0071e3; }
After:
.card-info { background-color: #f0f7ff; }
�� Additional Improvements:
- Variable protection during markdown parsing
- Don't match bold/italic across newlines
- Proper list handling
- Block-level tag detection
- Paragraph accumulation with line breaks
🎯 Result:
- ✅ Proper line breaks in paragraphs
- ✅ White text in hero cards (Gmail compatible)
- ✅ No unwanted borders
- ✅ Variables preserved during parsing
- ✅ Professional email appearance
Test: Create order, check email - should now show:
- Order Number: #359
- Order Total: Rp129.000
- Estimated Delivery: 3-5 business days
(Each on separate line with proper spacing)
🐛 Email Rendering Issues Fixed:
1. Markdown Not Parsed
❌ Raw markdown showing: ## Great news...
✅ Created MarkdownParser.php (PHP port from TypeScript)
✅ Parses headings, bold, italic, lists, links
✅ Supports card blocks and button syntax
✅ Proper newline handling
2. Variables Not Replaced
❌ {support_email} showing literally
✅ Added support_email variable
✅ Added current_year variable
✅ Added estimated_delivery variable (3-5 business days)
3. Broken Logo Image
❌ Broken image placeholder
✅ Fallback to site icon if no logo set
✅ Fallback to text header if no icon
✅ Proper URL handling
4. Newline Issues
❌ Variables on same line
✅ Markdown parser handles newlines correctly
✅ Proper paragraph wrapping
📦 New File:
- includes/Core/Notifications/MarkdownParser.php
- parse() - Convert markdown to HTML
- parse_basics() - Parse standard markdown
- nl2br_email() - Convert newlines for email
🔧 Updated Files:
- EmailRenderer.php
- Use MarkdownParser in render_card()
- Add support_email, current_year variables
- Add estimated_delivery calculation
- Logo fallback to site icon
- Text header fallback if no logo
🎯 Result:
- ✅ Markdown properly rendered
- ✅ All variables replaced
- ✅ Logo displays (or text fallback)
- ✅ Proper line breaks
- ✅ Professional email appearance
📝 Example:
Before: ## Great news, {customer_name}!
After: <h2>Great news, Dwindi Ramadhana!</h2>
Before: {support_email}
After: admin@example.com
Before: Broken image
After: Site icon or store name
🐛 CRITICAL FIX - Root Cause Found:
Problem 1: Events Not Enabled by Default
- is_event_enabled() returned false if not configured
- Required explicit admin configuration
- Plugin didn't work out-of-the-box
Solution:
- Enable email notifications by default if not configured
- Allow plugin to work with default templates
- Users can still disable via admin if needed
Problem 2: Default Templates Not Loading
- EmailRenderer called get_template() with only 2 args
- Missing $recipient_type parameter
- Default template lookup failed
Solution:
- Pass recipient_type to get_template()
- Proper default template lookup
- Added debug logging for template resolution
📝 Changes:
1. EmailManager::is_event_enabled()
- Returns true by default for email channel
- Logs when using default (not configured)
- Respects explicit disable if configured
2. EmailRenderer::get_template_settings()
- Pass recipient_type to TemplateProvider
- Log template found/not found
- Proper default template resolution
🎯 Result:
- Plugin works out-of-the-box
- Default templates used if not customized
- Email notifications sent without configuration
- Users can still customize in admin
✅ Expected Behavior:
1. Install plugin
2. Create order
3. Email sent automatically (default template)
4. Customize templates in admin (optional)
This fixes the issue where check-settings.php showed:
- Email: ✗ NOT CONFIGURED
- Templates: 0
Now it will use defaults and send emails!
🐛 Issue: Action Scheduler completing but wp_mail() never called
🔍 Enhanced Debugging:
- Log sendNow() entry with all arguments
- Log argument type and value
- Handle array vs string arguments (Action Scheduler compatibility)
- Log payload retrieval status
- Log wp_mail() call and result
- Log WooEmailOverride disable/enable
- Check database for option existence if not found
- Log hook registration on init
📝 Debug Output:
[WooNooW MailQueue] Hook registered
[WooNooW MailQueue] sendNow() called with args
[WooNooW MailQueue] email_id type: string/array
[WooNooW MailQueue] email_id value: xxx
[WooNooW MailQueue] Processing email_id: xxx
[WooNooW MailQueue] Payload retrieved - To: xxx, Subject: xxx
[WooNooW MailQueue] Disabling WooEmailOverride
[WooNooW MailQueue] Calling wp_mail() now...
[WooNooW MailQueue] wp_mail() returned: TRUE/FALSE
[WooNooW MailQueue] Re-enabling WooEmailOverride
[WooNooW MailQueue] Sent and deleted email ID
🎯 This will reveal:
1. If sendNow() is being called at all
2. What arguments Action Scheduler is passing
3. If payload is found in wp_options
4. If wp_mail() is actually called
5. If wp_mail() succeeds or fails
🐛 Problem:
- Dev server hardcoded to http://localhost:5173
- Local by Flywheel uses *.local domains with HTTPS
- Dev mode was blank page (couldn't connect to Vite)
✅ Solution:
Auto-detect dev server URL based on current host:
- Reads $_SERVER['HTTP_HOST']
- Detects *.local domains (Local by Flywheel)
- Uses HTTPS for *.local domains
- Falls back to HTTP for localhost
📝 Examples:
- woonoow.local → https://woonoow.local:5173
- localhost → http://localhost:5173
- example.test → http://example.test:5173🎯 Result:
- Dev mode works on Local by Flywheel
- Dev mode works on standard localhost
- No hardcoded URLs
- Still filterable via 'woonoow/admin_dev_server'
💡 Usage:
1. Set WOONOOW_ADMIN_DEV=true in wp-config.php
2. Run: npm run dev
3. Visit wp-admin - Vite HMR works!
🐛 CRITICAL FIX - Root Cause Found!
The plugin had hardcoded dev mode filters that forced EVERYONE into dev mode:
- add_filter('woonoow/admin_is_dev', '__return_true');
- add_filter('woonoow/admin_dev_server', fn() => 'https://woonoow.local:5173');
This caused:
- ✗ SPA trying to load from localhost:5173
- ✗ Loading @react-refresh and main.tsx (dev files)
- ✗ Not loading app.js and app.css (production files)
✅ Solution:
- Removed hardcoded filters from woonoow.php
- Commented them out with instructions
- Added debug logging to is_dev_mode()
- Updated installation checker to detect this issue
📝 For Developers:
If you need dev mode, add to wp-config.php:
define('WOONOOW_ADMIN_DEV', true);
Or use filter in your development plugin:
add_filter('woonoow/admin_is_dev', '__return_true');
🎯 Result:
- Production mode by default (no config needed)
- Dev mode only when explicitly enabled
- Better UX - plugin works out of the box
🐛 Problem:
- WordPress Media library not loaded in standalone mode
- Error: 'wp.media is not available'
- Image upload functionality broken
✅ Solution:
- Added wp_enqueue_media() in render_standalone_admin()
- Added wpApiSettings global for REST API compatibility
- Print media-editor and media-audiovideo scripts
- Print media-views and imgareaselect styles
📝 Changes:
- StandaloneAdmin.php:
- Enqueue media library
- Output media styles in <head>
- Output media scripts before app.js
- Add wpApiSettings global
🎯 Result:
- WordPress media library now available in standalone mode
- Image upload works correctly
- 'Choose from Media Library' button functional
🐛 Problem:
- 500 errors on all API endpoints
- Class "WooNooWAPIPaymentsController" not found
- Namespace inconsistency: API vs Api
✅ Solution:
- Fixed use statements in Routes.php
- Changed WooNooW\API\ to WooNooW\Api\
- Affects: PaymentsController, StoreController, DeveloperController, SystemController
📝 PSR-4 Autoloading:
- Namespace must match directory structure exactly
- Directory: includes/Api/ (lowercase 'i')
- Namespace: WooNooW\Api\ (lowercase 'i')
🎯 Result:
- All API endpoints now work correctly
- No more class not found errors
🐛 Problem:
- SPA not loading in wp-admin
- Trying to load from dev server (localhost:5173)
- Happening in Local by Flywheel (wp_get_environment_type() = 'development')
✅ Solution:
- Changed is_dev_mode() to ONLY enable dev mode if WOONOOW_ADMIN_DEV constant is explicitly set
- Removed wp_get_environment_type() check
- Now defaults to production mode (loads from admin-spa/dist/)
📝 To Enable Dev Mode:
Add to wp-config.php:
define('WOONOOW_ADMIN_DEV', true);
🎯 Result:
- Production mode by default
- Dev mode only when explicitly enabled
- Works correctly in Local by Flywheel and other local environments
✅ Customer Channels Enhancement:
- Added Switch toggles for Email and Push channels
- Added mutation to handle channel enable/disable
- Replaced static 'Enabled' badge with interactive toggles
- When disabled, channel won't appear in customer account preferences
✅ UI Cleanup:
- Hidden addon sections in all channel pages (Staff, Customer, Configuration)
- Will show addon offers later when addon development starts
✅ Documentation:
- Created NOTIFICATION_SYSTEM_QA.md with comprehensive Q&A
- Documented backend integration status
- Proposed global WooNooW vs WooCommerce toggle
- Listed what's wired and what needs backend implementation
📋 Backend Status:
- ✅ Wired: Channel toggle, Event toggle, Template CRUD
- ⚠️ Needed: Email/Push config, Global system toggle, Customer account integration
🎯 Next: Implement global notification system toggle for ultimate flexibility
Comprehensive documentation covering all 7 completed tasks:
1. Expanded social media platforms (11 total)
2. PNG icons instead of emoji
3. Icon color selection (black/white)
4. Body background color setting
5. Editor mode preview (working as designed)
6. Hero preview text color fix
7. Complete default email templates
Includes technical details, testing checklist, and future enhancements.
## Implemented (Tasks 1-6):
### 1. All Social Platforms Added ✅
**Platforms:**
- Facebook, X (Twitter), Instagram
- LinkedIn, YouTube
- Discord, Spotify, Telegram
- WhatsApp, Threads, Website
**Frontend:** Updated select dropdown with all platforms
**Backend:** Added to allowed_platforms whitelist
### 2. PNG Icons Instead of Emoji ✅
- Use local PNG files from `/assets/icons/`
- Format: `mage--{platform}-{color}.png`
- Applied to email rendering and preview
- Much more accurate than emoji
### 3. Icon Color Option (Black/White) ✅
- New setting: `social_icon_color`
- Select dropdown: White Icons / Black Icons
- White for dark backgrounds
- Black for light backgrounds
- Applied to all social icons
### 4. Body Background Color Setting ✅
- New setting: `body_bg_color`
- Color picker + hex input
- Default: #f8f8f8
- Applied to email body background
- Applied to preview
### 5. Editor Mode Styling 📝
**Note:** Editor mode intentionally shows structure/content
Preview mode shows final styled result with all customizations
This is standard email builder UX pattern
### 6. Hero Preview Text Color Fixed ✅
- Applied `hero_text_color` directly to h3 and p
- Now correctly shows selected color
- Both heading and paragraph use custom color
## Technical Changes:
**Frontend:**
- Added body_bg_color and social_icon_color to interface
- Updated all social platform icons (Lucide)
- PNG icon URLs in preview
- Hero preview color fix
**Backend:**
- Added body_bg_color and social_icon_color to defaults
- Sanitization for new fields
- Updated allowed_platforms array
- PNG icon URL generation with color param
**Email Rendering:**
- Use PNG icons with color selection
- Apply body_bg_color
- get_social_icon_url() updated for PNG files
## Files Modified:
- `routes/Settings/Notifications/EmailCustomization.tsx`
- `routes/Settings/Notifications/EditTemplate.tsx`
- `includes/Api/NotificationsController.php`
- `includes/Core/Notifications/EmailRenderer.php`
Task 7 (default email content) pending - separate commit.
## Issues Fixed:
### 1. Button Not Rendering ✅
- Buttons now use custom primary_color
- Button text uses button_text_color
- Outline buttons use secondary_color
- Applied to .button and .button-outline classes
### 2. Double Hash in Order Number ✅
- Changed order_number from "#12345" to "12345"
- Templates already have # prefix
- Prevents ##12345 display
### 3. Duplicate Icons in Social Selector ✅
- Removed duplicate icon from SelectTrigger
- SelectValue already shows the icon
- Clean single icon display
### 4. Header/Footer Not Reflecting Customization ✅
- Fetch email settings in EditTemplate
- Apply logo_url or header_text to header
- Apply footer_text with {current_year} replacement
- Render social icons in footer
### 5. Hero Heading Not Using Custom Color ✅
- Apply hero_text_color to all hero card types
- .card-hero, .card-success, .card-highlight
- All text and headings use custom color
## Preview Now Shows:
✅ Custom logo (if set) or header text
✅ Custom hero gradient colors
✅ Custom hero text color (white/custom)
✅ Custom button colors (primary & secondary)
✅ Custom footer text with {current_year}
✅ Social icons in footer
## Files:
- `routes/Settings/Notifications/EditTemplate.tsx` - Preview integration
- `routes/Settings/Notifications/EmailCustomization.tsx` - UI fix
Everything synced! Preview matches actual emails! 🎉
Complete implementation guide covering:
- All 5 tasks with status
- Features and implementation details
- Code examples
- Testing checklist
- File changes
- Next steps
All tasks complete and ready for production! ✅
## 4. Wire to Backend ✅
### API Endpoints Created:
- `GET /woonoow/v1/notifications/email-settings` - Fetch settings
- `POST /woonoow/v1/notifications/email-settings` - Save settings
- `DELETE /woonoow/v1/notifications/email-settings` - Reset to defaults
### Features:
- Proper sanitization (sanitize_hex_color, esc_url_raw, etc.)
- Social links validation (allowed platforms only)
- Defaults fallback
- Stored in wp_options as `woonoow_email_settings`
### Email Rendering Integration:
**Logo & Header:**
- Uses logo_url if set, otherwise header_text
- Falls back to store name
**Footer:**
- Uses footer_text with {current_year} support
- Replaces {current_year} with actual year dynamically
- Social icons rendered from social_links array
**Hero Cards:**
- Applies hero_gradient_start and hero_gradient_end
- Applies hero_text_color to text and headings
- Works for type="hero" and type="success" cards
**Button Colors:**
- Ready to apply primary_color and button_text_color
- (Template needs update for dynamic button colors)
### Files:
- `includes/Api/NotificationsController.php` - API endpoints
- `includes/Core/Notifications/EmailRenderer.php` - Apply settings to emails
### Security:
- Permission checks (check_permission)
- Input sanitization
- URL validation
- Platform whitelist for social links
Frontend can now save/load settings! Backend applies them to emails! 🎉
## Frontend Improvements (1-3, 5)
### 1. Logo URL with WP Media Library ✅
- Added "Select" button next to logo URL input
- Opens WordPress Media Library
- Logo preview below input
- Easier for users to select from existing media
### 2. Footer Text with {current_year} Variable ✅
- Updated placeholder to show {current_year} usage
- Help text explains dynamic year variable
- Backend will replace with actual year
### 3. Social Links in Footer ✅
**Platforms Supported:**
- Facebook
- Twitter
- Instagram
- LinkedIn
- YouTube
- Website
**Features:**
- Add/remove social links
- Platform dropdown with icons
- URL input for each link
- Visual icons in UI
- Will render as icons in email footer
### 5. Hero Card Text Color ✅
- Added hero_text_color field
- Color picker + hex input
- Applied to preview
- Separate control for heading/text color
- Usually white for dark gradients
**Updated Interface:**
```typescript
interface EmailSettings {
// ... existing
hero_text_color: string;
social_links: SocialLink[];
}
interface SocialLink {
platform: string;
url: string;
}
```
**File:**
- `routes/Settings/Notifications/EmailCustomization.tsx`
Next: Wire to backend (task 4)!
