docs: consolidate markdown documentation into master guides and remove obsolete files
This commit is contained in:
Dwindi Ramadhana
@@ -1,242 +0,0 @@
|
||||
# Bug Fixes & User Feedback Resolution
|
||||
|
||||
## All 7 Issues Resolved ✅
|
||||
|
||||
---
|
||||
|
||||
### 1. WordPress Media Library Not Loading
|
||||
|
||||
**Issue:**
|
||||
- Error: "WordPress media library is not loaded. Please refresh the page."
|
||||
- Blocking users from inserting images
|
||||
|
||||
**Root Cause:**
|
||||
- WordPress Media API (`window.wp.media`) not available in some contexts
|
||||
- No fallback mechanism
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// Added fallback to URL prompt
|
||||
if (typeof window.wp === 'undefined' || typeof window.wp.media === 'undefined') {
|
||||
const url = window.prompt('WordPress Media library is not loaded. Please enter image URL:');
|
||||
if (url) {
|
||||
onSelect({ url, id: 0, title: 'External Image', filename: url.split('/').pop() || 'image' });
|
||||
}
|
||||
return;
|
||||
}
|
||||
```
|
||||
|
||||
**Result:**
|
||||
- Users can still insert images via URL if WP Media fails
|
||||
- Better error handling
|
||||
- No blocking errors
|
||||
|
||||
---
|
||||
|
||||
### 2. Button Variables - Too Many Options
|
||||
|
||||
**Issue:**
|
||||
- All variables shown in button link field
|
||||
- Confusing for users (why show customer_name for a link?)
|
||||
|
||||
**Solution:**
|
||||
```typescript
|
||||
// Filter to only show URL variables
|
||||
{variables.filter(v => v.includes('_url')).map((variable) => (
|
||||
<code onClick={() => setButtonHref(buttonHref + `{${variable}}`)}>{`{${variable}}`}</code>
|
||||
))}
|
||||
```
|
||||
|
||||
**Before:**
|
||||
```
|
||||
{order_number} {order_total} {customer_name} {customer_email} ...
|
||||
```
|
||||
|
||||
**After:**
|
||||
```
|
||||
{order_url} {store_url}
|
||||
```
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
- `components/EmailBuilder/EmailBuilder.tsx`
|
||||
|
||||
---
|
||||
|
||||
### 3. Color Customization - Future Feature
|
||||
|
||||
**Issue:**
|
||||
- Colors are hardcoded:
|
||||
- Hero card gradient: `#667eea` to `#764ba2`
|
||||
- Button primary: `#7f54b3`
|
||||
- Button secondary border: `#7f54b3`
|
||||
|
||||
**Plan:**
|
||||
- Will be added to email customization form
|
||||
- Allow users to set brand colors
|
||||
- Apply to all email templates
|
||||
- Store in settings
|
||||
|
||||
**Note:**
|
||||
Confirmed for future implementation. Not blocking current release.
|
||||
|
||||
---
|
||||
|
||||
### 4 & 5. Headings Not Visible in Editor & Builder
|
||||
|
||||
**Issue:**
|
||||
- Headings (H1-H4) looked like paragraphs
|
||||
- No visual distinction
|
||||
- Confusing for users
|
||||
|
||||
**Root Cause:**
|
||||
- No CSS styles applied to heading elements
|
||||
- Default browser styles insufficient
|
||||
|
||||
**Solution:**
|
||||
Added Tailwind utility classes for heading styles:
|
||||
|
||||
```typescript
|
||||
// RichTextEditor
|
||||
className="prose prose-sm max-w-none [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-4 [&_h1]:mb-2 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-3 [&_h2]:mb-2 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-2 [&_h3]:mb-1 [&_h4]:text-lg [&_h4]:font-bold [&_h4]:mt-2 [&_h4]:mb-1"
|
||||
|
||||
// BlockRenderer (builder preview)
|
||||
className="prose prose-sm max-w-none [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-0 [&_h1]:mb-4 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-0 [&_h2]:mb-3 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-0 [&_h3]:mb-2 [&_h4]:text-lg [&_h4]:font-bold [&_h4]:mt-0 [&_h4]:mb-2"
|
||||
```
|
||||
|
||||
**Heading Sizes:**
|
||||
- **H1**: 3xl (1.875rem / 30px), bold
|
||||
- **H2**: 2xl (1.5rem / 24px), bold
|
||||
- **H3**: xl (1.25rem / 20px), bold
|
||||
- **H4**: lg (1.125rem / 18px), bold
|
||||
|
||||
**Result:**
|
||||
- Headings now visually distinct
|
||||
- Clear hierarchy
|
||||
- Matches email preview
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
- `components/EmailBuilder/BlockRenderer.tsx`
|
||||
|
||||
---
|
||||
|
||||
### 6. Missing Order Items Variable
|
||||
|
||||
**Issue:**
|
||||
- No variable for product list/table
|
||||
- Users can't show ordered products in emails
|
||||
|
||||
**Solution:**
|
||||
Added `order_items` variable to order variables:
|
||||
|
||||
```php
|
||||
'order_items' => __('Order Items (formatted table)', 'woonoow'),
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
[card]
|
||||
<h2>Order Summary</h2>
|
||||
{order_items}
|
||||
[/card]
|
||||
```
|
||||
|
||||
**Will Render:**
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td>Product Name</td>
|
||||
<td>Quantity</td>
|
||||
<td>Price</td>
|
||||
</tr>
|
||||
<!-- ... product rows ... -->
|
||||
</table>
|
||||
```
|
||||
|
||||
**File Modified:**
|
||||
- `includes/Core/Notifications/TemplateProvider.php`
|
||||
|
||||
---
|
||||
|
||||
### 7. Edit Icon on Spacer & Divider
|
||||
|
||||
**Issue:**
|
||||
- Edit button (✎) shown for spacer and divider
|
||||
- No options to edit (they have no configurable properties)
|
||||
- Clicking does nothing
|
||||
|
||||
**Solution:**
|
||||
Conditional rendering of edit button:
|
||||
|
||||
```typescript
|
||||
{/* Only show edit button for card and button blocks */}
|
||||
{(block.type === 'card' || block.type === 'button') && (
|
||||
<button onClick={onEdit} title={__('Edit')}>✎</button>
|
||||
)}
|
||||
```
|
||||
|
||||
**Controls Now:**
|
||||
- **Card**: ↑ ↓ ✎ × (all controls)
|
||||
- **Button**: ↑ ↓ ✎ × (all controls)
|
||||
- **Spacer**: ↑ ↓ × (no edit)
|
||||
- **Divider**: ↑ ↓ × (no edit)
|
||||
|
||||
**File Modified:**
|
||||
- `components/EmailBuilder/BlockRenderer.tsx`
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Issue 1: WP Media Fallback
|
||||
- [ ] Try inserting image when WP Media is loaded
|
||||
- [ ] Try inserting image when WP Media is not loaded
|
||||
- [ ] Verify fallback prompt appears
|
||||
- [ ] Verify image inserts correctly
|
||||
|
||||
### Issue 2: Button Variables
|
||||
- [ ] Open button dialog in RichTextEditor
|
||||
- [ ] Verify only URL variables shown
|
||||
- [ ] Open button dialog in EmailBuilder
|
||||
- [ ] Verify only URL variables shown
|
||||
|
||||
### Issue 3: Color Customization
|
||||
- [ ] Note documented for future implementation
|
||||
- [ ] Colors currently hardcoded (expected)
|
||||
|
||||
### Issue 4 & 5: Heading Display
|
||||
- [ ] Create card with H1 heading
|
||||
- [ ] Verify H1 is large and bold in editor
|
||||
- [ ] Verify H1 is large and bold in builder
|
||||
- [ ] Test H2, H3, H4 similarly
|
||||
- [ ] Verify preview matches
|
||||
|
||||
### Issue 6: Order Items Variable
|
||||
- [ ] Check variable list includes `order_items`
|
||||
- [ ] Insert `{order_items}` in template
|
||||
- [ ] Verify description shows "formatted table"
|
||||
|
||||
### Issue 7: Edit Icon Removal
|
||||
- [ ] Hover over spacer block
|
||||
- [ ] Verify no edit button (only ↑ ↓ ×)
|
||||
- [ ] Hover over divider block
|
||||
- [ ] Verify no edit button (only ↑ ↓ ×)
|
||||
- [ ] Hover over card block
|
||||
- [ ] Verify edit button present (↑ ↓ ✎ ×)
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
All 7 user-reported issues have been resolved:
|
||||
|
||||
1. ✅ **WP Media Fallback** - No more blocking errors
|
||||
2. ✅ **Button Variables Filtered** - Only relevant variables shown
|
||||
3. ✅ **Color Customization Noted** - Future feature documented
|
||||
4. ✅ **Headings Visible in Editor** - Proper styling applied
|
||||
5. ✅ **Headings Visible in Builder** - Consistent with editor
|
||||
6. ✅ **Order Items Variable** - Product list support added
|
||||
7. ✅ **Edit Icon Removed** - Only on editable blocks
|
||||
|
||||
**Status: Ready for Testing** 🚀
|
||||
@@ -1,329 +0,0 @@
|
||||
# Email Template & Builder System - Complete ✅
|
||||
|
||||
## Overview
|
||||
The WooNooW email template and builder system is now production-ready with improved templates, enhanced markdown support, and a fully functional visual builder.
|
||||
|
||||
---
|
||||
|
||||
## 🎉 What's Complete
|
||||
|
||||
### 1. **Default Email Templates** ✅
|
||||
**File:** `includes/Email/DefaultTemplates.php`
|
||||
|
||||
**Features:**
|
||||
- ✅ 16 production-ready email templates (9 customer + 7 staff)
|
||||
- ✅ Modern, clean markdown format (easy to read and edit)
|
||||
- ✅ Professional, friendly tone
|
||||
- ✅ Complete variable support
|
||||
- ✅ Ready to use without any customization
|
||||
|
||||
**Templates Included:**
|
||||
|
||||
**Customer Templates:**
|
||||
1. Order Placed - Initial order confirmation
|
||||
2. Order Confirmed - Payment confirmed, ready to ship
|
||||
3. Order Shipped - Tracking information
|
||||
4. Order Completed - Delivery confirmation with review request
|
||||
5. Order Cancelled - Cancellation notice with refund info
|
||||
6. Payment Received - Payment confirmation
|
||||
7. Payment Failed - Payment issue with resolution steps
|
||||
8. Customer Registered - Welcome email with account benefits
|
||||
9. Customer VIP Upgraded - VIP status announcement
|
||||
|
||||
**Staff Templates:**
|
||||
1. Order Placed - New order notification
|
||||
2. Order Confirmed - Order ready to process
|
||||
3. Order Shipped - Shipment confirmation
|
||||
4. Order Completed - Order lifecycle complete
|
||||
5. Order Cancelled - Cancellation with action items
|
||||
6. Payment Received - Payment notification
|
||||
7. Payment Failed - Payment failure alert
|
||||
|
||||
**Template Syntax:**
|
||||
```
|
||||
[card type="hero"]
|
||||
Welcome message here
|
||||
[/card]
|
||||
|
||||
[card]
|
||||
**Order Number:** #{order_number}
|
||||
**Order Total:** {order_total}
|
||||
[/card]
|
||||
|
||||
[button url="{order_url}"]View Order Details[/button]
|
||||
|
||||
---
|
||||
|
||||
© {current_year} {site_name}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. **Enhanced Markdown Parser** ✅
|
||||
**File:** `admin-spa/src/lib/markdown-parser.ts`
|
||||
|
||||
**New Features:**
|
||||
- ✅ Button shortcode: `[button url="..."]Text[/button]`
|
||||
- ✅ Horizontal rules: `---`
|
||||
- ✅ Checkmarks and bullet points: `✓` `•` `-` `*`
|
||||
- ✅ Card blocks with types: `[card type="success"]...[/card]`
|
||||
- ✅ Bold, italic, headings, lists, links
|
||||
- ✅ Variable support: `{variable_name}`
|
||||
|
||||
**Supported Markdown:**
|
||||
```markdown
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
|
||||
**Bold text**
|
||||
*Italic text*
|
||||
|
||||
- List item
|
||||
• Bullet point
|
||||
✓ Checkmark item
|
||||
|
||||
[Link text](url)
|
||||
|
||||
---
|
||||
|
||||
[card type="hero"]
|
||||
Card content
|
||||
[/card]
|
||||
|
||||
[button url="#"]Button Text[/button]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. **Visual Email Builder** ✅
|
||||
**File:** `admin-spa/src/components/EmailBuilder/EmailBuilder.tsx`
|
||||
|
||||
**Features:**
|
||||
- ✅ Drag-and-drop block editor
|
||||
- ✅ Card blocks (default, success, info, warning, hero)
|
||||
- ✅ Button blocks (solid/outline, width/alignment controls)
|
||||
- ✅ Image blocks with WordPress media library integration
|
||||
- ✅ Divider and spacer blocks
|
||||
- ✅ Rich text editor with variable insertion
|
||||
- ✅ Mobile fallback UI (desktop-only message)
|
||||
- ✅ WordPress media modal integration (z-index and pointer-events fixed)
|
||||
- ✅ Dialog outside-click prevention with WP media exception
|
||||
|
||||
**Block Types:**
|
||||
1. **Card** - Content container with type variants
|
||||
2. **Button** - CTA button with style and layout options
|
||||
3. **Image** - Image with alignment and width controls
|
||||
4. **Divider** - Horizontal line separator
|
||||
5. **Spacer** - Vertical spacing control
|
||||
|
||||
---
|
||||
|
||||
### 4. **Preview System** ✅
|
||||
**File:** `admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx`
|
||||
|
||||
**Features:**
|
||||
- ✅ Live preview with actual branding colors
|
||||
- ✅ Sample data for all variables
|
||||
- ✅ Mobile-responsive preview (reduced padding on small screens)
|
||||
- ✅ Button shortcode parsing
|
||||
- ✅ Card parsing with type support
|
||||
- ✅ Variable replacement with sample data
|
||||
|
||||
**Mobile Responsive:**
|
||||
```css
|
||||
@media only screen and (max-width: 600px) {
|
||||
body { padding: 8px; }
|
||||
.card-gutter { padding: 0 8px; }
|
||||
.card { padding: 20px 16px; }
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. **Variable System** ✅
|
||||
|
||||
**Complete Variable Support:**
|
||||
|
||||
**Order Variables:**
|
||||
- `{order_number}` - Order number/ID
|
||||
- `{order_date}` - Order creation date
|
||||
- `{order_total}` - Total order amount
|
||||
- `{order_url}` - Link to view order
|
||||
- `{order_item_table}` - Formatted order items table
|
||||
- `{completion_date}` - Order completion date
|
||||
|
||||
**Customer Variables:**
|
||||
- `{customer_name}` - Customer's full name
|
||||
- `{customer_email}` - Customer's email
|
||||
- `{customer_phone}` - Customer's phone
|
||||
|
||||
**Payment Variables:**
|
||||
- `{payment_method}` - Payment method used
|
||||
- `{payment_status}` - Payment status
|
||||
- `{payment_date}` - Payment date
|
||||
- `{transaction_id}` - Transaction ID
|
||||
- `{payment_retry_url}` - URL to retry payment
|
||||
|
||||
**Shipping Variables:**
|
||||
- `{tracking_number}` - Tracking number
|
||||
- `{tracking_url}` - Tracking URL
|
||||
- `{shipping_carrier}` - Carrier name
|
||||
- `{shipping_address}` - Full shipping address
|
||||
- `{billing_address}` - Full billing address
|
||||
|
||||
**URL Variables:**
|
||||
- `{order_url}` - Order details page
|
||||
- `{review_url}` - Leave review page
|
||||
- `{shop_url}` - Shop homepage
|
||||
- `{my_account_url}` - Customer account page
|
||||
- `{vip_dashboard_url}` - VIP dashboard
|
||||
|
||||
**Store Variables:**
|
||||
- `{site_name}` - Store name
|
||||
- `{store_url}` - Store URL
|
||||
- `{support_email}` - Support email
|
||||
- `{current_year}` - Current year
|
||||
|
||||
**VIP Variables:**
|
||||
- `{vip_free_shipping_threshold}` - Free shipping threshold
|
||||
|
||||
---
|
||||
|
||||
### 6. **Bug Fixes** ✅
|
||||
|
||||
**WordPress Media Modal Integration:**
|
||||
- ✅ Fixed z-index conflict (WP media now appears above Radix components)
|
||||
- ✅ Fixed pointer-events blocking (WP media is now fully clickable)
|
||||
- ✅ Fixed dialog closing when selecting image (dialog stays open)
|
||||
- ✅ Added exception for WP media in outside-click prevention
|
||||
|
||||
**CSS Fixes:**
|
||||
```css
|
||||
/* WordPress Media Modal z-index fix */
|
||||
.media-modal {
|
||||
z-index: 999999 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.media-modal-content {
|
||||
z-index: 1000000 !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
```
|
||||
|
||||
**Dialog Fix:**
|
||||
```typescript
|
||||
onInteractOutside={(e) => {
|
||||
const wpMediaOpen = document.querySelector('.media-modal');
|
||||
if (wpMediaOpen) {
|
||||
e.preventDefault(); // Keep dialog open when WP media is active
|
||||
return;
|
||||
}
|
||||
e.preventDefault(); // Prevent closing for other outside clicks
|
||||
}}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📱 Mobile Strategy
|
||||
|
||||
**Current Implementation (Optimal):**
|
||||
- ✅ **Preview Tab** - Works on mobile (read-only viewing)
|
||||
- ✅ **Code Tab** - Works on mobile (advanced users can edit)
|
||||
- ❌ **Builder Tab** - Desktop-only with clear message
|
||||
|
||||
**Why This Works:**
|
||||
- Users can view email previews on any device
|
||||
- Power users can make quick code edits on mobile
|
||||
- Visual builder requires desktop for optimal UX
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Email Customization Features
|
||||
|
||||
**Available in Settings:**
|
||||
1. **Brand Colors**
|
||||
- Primary color
|
||||
- Secondary color
|
||||
- Hero gradient (start/end)
|
||||
- Hero text color
|
||||
- Button text color
|
||||
|
||||
2. **Layout**
|
||||
- Body background color
|
||||
- Logo upload
|
||||
- Header text
|
||||
- Footer text
|
||||
|
||||
3. **Social Links**
|
||||
- Facebook, Twitter, Instagram, LinkedIn, YouTube, Website
|
||||
- Custom icon color (white/color)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Ready for Production
|
||||
|
||||
**What Store Owners Get:**
|
||||
1. ✅ Professional email templates out-of-the-box
|
||||
2. ✅ Easy customization with visual builder
|
||||
3. ✅ Code mode for advanced users
|
||||
4. ✅ Live preview with branding
|
||||
5. ✅ Mobile-friendly emails
|
||||
6. ✅ Complete variable system
|
||||
7. ✅ WordPress media library integration
|
||||
|
||||
**No Setup Required:**
|
||||
- Templates are ready to use immediately
|
||||
- Store owners can start selling without editing emails
|
||||
- Customization is optional but easy
|
||||
- However, backend integration is still required for full functionality
|
||||
|
||||
---
|
||||
|
||||
## Next Steps (REQUIRED)
|
||||
|
||||
**IMPORTANT: Backend Integration Still Needed**
|
||||
|
||||
The new `DefaultTemplates.php` is ready but NOT YET WIRED to the backend!
|
||||
|
||||
**Current State:**
|
||||
- New templates created: `includes/Email/DefaultTemplates.php`
|
||||
- Backend still using old: `includes/Core/Notifications/DefaultEmailTemplates.php`
|
||||
|
||||
**To Complete Integration:**
|
||||
1. Update `includes/Core/Notifications/DefaultEmailTemplates.php` to use new `DefaultTemplates` class
|
||||
2. Or replace old class entirely with new one
|
||||
3. Update API controller to return correct event counts per recipient
|
||||
4. Wire up to database on plugin activation
|
||||
5. Hook into WooCommerce order status changes
|
||||
6. Test email sending
|
||||
|
||||
**Example:**
|
||||
```php
|
||||
use WooNooW\Email\DefaultTemplates;
|
||||
|
||||
// On plugin activation
|
||||
$templates = DefaultTemplates::get_all_templates();
|
||||
foreach ($templates['customer'] as $event => $body) {
|
||||
$subject = DefaultTemplates::get_default_subject('customer', $event);
|
||||
// Save to database
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Phase Complete
|
||||
|
||||
The email template and builder system is now **production-ready** and can be shipped to users!
|
||||
|
||||
**Key Achievements:**
|
||||
- ✅ 16 professional email templates
|
||||
- ✅ Visual builder with drag-and-drop
|
||||
- ✅ WordPress media library integration
|
||||
- ✅ Mobile-responsive preview
|
||||
- ✅ Complete variable system
|
||||
- ✅ All bugs fixed
|
||||
- ✅ Ready for general store owners
|
||||
|
||||
**Time to move on to the next phase!** 🎉
|
||||
@@ -1,388 +0,0 @@
|
||||
# Email Builder - All Improvements Complete! 🎉
|
||||
|
||||
## Overview
|
||||
|
||||
All 5 user-requested improvements have been successfully implemented, creating a professional, user-friendly email template builder that respects WordPress conventions.
|
||||
|
||||
---
|
||||
|
||||
## ✅ 1. Heading Selector in RichTextEditor
|
||||
|
||||
### Problem
|
||||
Users couldn't control heading levels without typing HTML manually.
|
||||
|
||||
### Solution
|
||||
Added a dropdown selector in the RichTextEditor toolbar.
|
||||
|
||||
**Features:**
|
||||
- Dropdown with options: Paragraph, H1, H2, H3, H4
|
||||
- Visual feedback (shows active heading level)
|
||||
- One-click heading changes
|
||||
- User controls document structure
|
||||
|
||||
**UI Location:**
|
||||
```
|
||||
[Paragraph ▼] [B] [I] [List] [Link] ...
|
||||
↑
|
||||
First item in toolbar
|
||||
```
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ 2. Styled Buttons in Cards
|
||||
|
||||
### Problem
|
||||
- Buttons in TipTap cards looked raw (unstyled)
|
||||
- Different appearance from standalone buttons
|
||||
- Not editable (couldn't change text/URL by clicking)
|
||||
|
||||
### Solution
|
||||
Created a custom TipTap extension for buttons with proper styling.
|
||||
|
||||
**Features:**
|
||||
- Same inline styles as standalone buttons
|
||||
- Solid & Outline styles available
|
||||
- Fully editable via dialog
|
||||
- Non-editable in editor (atomic node)
|
||||
- Click button icon → dialog opens
|
||||
|
||||
**Button Styles:**
|
||||
```css
|
||||
Solid (Primary):
|
||||
background: #7f54b3
|
||||
color: white
|
||||
padding: 14px 28px
|
||||
|
||||
Outline (Secondary):
|
||||
background: transparent
|
||||
color: #7f54b3
|
||||
border: 2px solid #7f54b3
|
||||
```
|
||||
|
||||
**Files Created:**
|
||||
- `components/ui/tiptap-button-extension.ts`
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ 3. Variable Pills for Button Links
|
||||
|
||||
### Problem
|
||||
- Users had to type `{variable_name}` manually
|
||||
- Easy to make typos
|
||||
- No suggestions or discovery
|
||||
|
||||
### Solution
|
||||
Added clickable variable pills under Button Link inputs.
|
||||
|
||||
**Features:**
|
||||
- Visual display of available variables
|
||||
- One-click insertion
|
||||
- No typing errors
|
||||
- Works in both:
|
||||
- RichTextEditor button dialog
|
||||
- EmailBuilder button dialog
|
||||
|
||||
**UI:**
|
||||
```
|
||||
Button Link
|
||||
┌─────────────────────────┐
|
||||
│ {order_url} │
|
||||
└─────────────────────────┘
|
||||
|
||||
{order_number} {order_total} {customer_name} ...
|
||||
↑ Click any pill to insert
|
||||
```
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
- `components/EmailBuilder/EmailBuilder.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ 4. WordPress Media Modal for TipTap Images
|
||||
|
||||
### Problem
|
||||
- Prompt dialog for image URL
|
||||
- Manual URL entry required
|
||||
- No access to media library
|
||||
|
||||
### Solution
|
||||
Integrated WordPress native Media Modal for image selection.
|
||||
|
||||
**Features:**
|
||||
- Native WordPress Media Modal
|
||||
- Browse existing uploads
|
||||
- Upload new images
|
||||
- Full media library features
|
||||
- Auto-sets: src, alt, title
|
||||
|
||||
**User Flow:**
|
||||
1. Click image icon in RichTextEditor toolbar
|
||||
2. WordPress Media Modal opens
|
||||
3. Select from library OR upload new
|
||||
4. Image inserted with proper attributes
|
||||
|
||||
**Files Created:**
|
||||
- `lib/wp-media.ts` (WordPress Media helper)
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ 5. WordPress Media Modal for Store Logos/Favicon
|
||||
|
||||
### Problem
|
||||
- Only drag-and-drop or file picker available
|
||||
- No access to existing media library
|
||||
- Couldn't reuse uploaded assets
|
||||
|
||||
### Solution
|
||||
Added "Choose from Media Library" button to ImageUpload component.
|
||||
|
||||
**Features:**
|
||||
- WordPress Media Modal integration
|
||||
- Filtered by media type:
|
||||
- **Logo**: PNG, JPEG, SVG, WebP
|
||||
- **Favicon**: PNG, ICO
|
||||
- Browse and reuse existing assets
|
||||
- Drag-and-drop still works
|
||||
|
||||
**UI:**
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ [Upload Icon] │
|
||||
│ │
|
||||
│ Drop image here or click │
|
||||
│ Max size: 2MB │
|
||||
│ │
|
||||
│ [Choose from Media Library] │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Files Modified:**
|
||||
- `components/ui/image-upload.tsx`
|
||||
- `routes/Settings/Store.tsx`
|
||||
|
||||
---
|
||||
|
||||
## 📦 New Files Created
|
||||
|
||||
### 1. `lib/wp-media.ts`
|
||||
WordPress Media Modal integration helper.
|
||||
|
||||
**Functions:**
|
||||
- `openWPMedia()` - Core function with options
|
||||
- `openWPMediaImage()` - For general images
|
||||
- `openWPMediaLogo()` - For logos (filtered)
|
||||
- `openWPMediaFavicon()` - For favicons (filtered)
|
||||
|
||||
**Interface:**
|
||||
```typescript
|
||||
interface WPMediaFile {
|
||||
url: string;
|
||||
id: number;
|
||||
title: string;
|
||||
filename: string;
|
||||
alt?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. `components/ui/tiptap-button-extension.ts`
|
||||
Custom TipTap node for styled buttons.
|
||||
|
||||
**Features:**
|
||||
- Renders with inline styles
|
||||
- Atomic node (non-editable)
|
||||
- Data attributes for editing
|
||||
- Matches email rendering exactly
|
||||
|
||||
---
|
||||
|
||||
## 🎨 User Experience Improvements
|
||||
|
||||
### For Non-Technical Users
|
||||
- **Heading Control**: No HTML knowledge needed
|
||||
- **Visual Buttons**: Professional styling automatically
|
||||
- **Variable Discovery**: See all available variables
|
||||
- **Media Library**: Familiar WordPress interface
|
||||
|
||||
### For Tech-Savvy Users
|
||||
- **Code Mode**: Still available with CodeMirror
|
||||
- **Full Control**: Can edit raw HTML
|
||||
- **Professional Tools**: Syntax highlighting, auto-completion
|
||||
|
||||
### For Everyone
|
||||
- **Consistent UX**: Matches WordPress conventions
|
||||
- **No Learning Curve**: Familiar interfaces
|
||||
- **Professional Results**: Beautiful emails every time
|
||||
|
||||
---
|
||||
|
||||
## 🙏 Respecting WordPress
|
||||
|
||||
### Why This Matters
|
||||
|
||||
**1. Familiar Interface**
|
||||
Users already know WordPress Media Modal from Posts/Pages.
|
||||
|
||||
**2. Existing Assets**
|
||||
Access to all uploaded media, no re-uploading.
|
||||
|
||||
**3. Better UX**
|
||||
No manual URL entry, visual selection.
|
||||
|
||||
**4. Professional**
|
||||
Native WordPress integration, not a custom solution.
|
||||
|
||||
**5. Consistent**
|
||||
Same experience across WordPress admin.
|
||||
|
||||
### WordPress Integration Details
|
||||
|
||||
**Uses:**
|
||||
- `window.wp.media` API
|
||||
- WordPress REST API for uploads
|
||||
- Proper nonce handling
|
||||
- User permissions respected
|
||||
|
||||
**Compatible with:**
|
||||
- WordPress Media Library
|
||||
- Custom upload handlers
|
||||
- Media organization plugins
|
||||
- CDN integrations
|
||||
|
||||
---
|
||||
|
||||
## 📋 Complete Feature List
|
||||
|
||||
### Email Builder Features
|
||||
✅ Visual block-based editor
|
||||
✅ Drag-and-drop reordering
|
||||
✅ Card blocks with rich content
|
||||
✅ Standalone buttons (outside cards)
|
||||
✅ Dividers and spacers
|
||||
✅ Code mode with CodeMirror
|
||||
✅ Variable insertion
|
||||
✅ Preview mode
|
||||
✅ Responsive design
|
||||
|
||||
### RichTextEditor Features
|
||||
✅ Heading selector (H1-H4, Paragraph)
|
||||
✅ Bold, Italic formatting
|
||||
✅ Bullet and numbered lists
|
||||
✅ Links
|
||||
✅ Text alignment (left, center, right)
|
||||
✅ Image insertion (WordPress Media)
|
||||
✅ Button insertion (styled)
|
||||
✅ Variable insertion (pills)
|
||||
✅ Undo/Redo
|
||||
|
||||
### Store Settings Features
|
||||
✅ Logo upload (light mode)
|
||||
✅ Logo upload (dark mode)
|
||||
✅ Favicon upload
|
||||
✅ WordPress Media Modal integration
|
||||
✅ Drag-and-drop upload
|
||||
✅ File type filtering
|
||||
✅ Preview display
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Installation & Testing
|
||||
|
||||
### Install Dependencies
|
||||
|
||||
```bash
|
||||
cd admin-spa
|
||||
|
||||
# TipTap Extensions
|
||||
npm install @tiptap/extension-text-align @tiptap/extension-image
|
||||
|
||||
# CodeMirror
|
||||
npm install codemirror @codemirror/lang-html @codemirror/theme-one-dark
|
||||
|
||||
# Radix UI
|
||||
npm install @radix-ui/react-radio-group
|
||||
```
|
||||
|
||||
### Or Install All at Once
|
||||
```bash
|
||||
npm install @tiptap/extension-text-align @tiptap/extension-image codemirror @codemirror/lang-html @codemirror/theme-one-dark @radix-ui/react-radio-group
|
||||
```
|
||||
|
||||
### Start Development Server
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Test Checklist
|
||||
|
||||
**Email Builder:**
|
||||
- [ ] Add card with rich content
|
||||
- [ ] Use heading selector (H1-H4)
|
||||
- [ ] Insert styled button in card
|
||||
- [ ] Add standalone button
|
||||
- [ ] Click variable pills to insert
|
||||
- [ ] Insert image via WordPress Media
|
||||
- [ ] Test text alignment
|
||||
- [ ] Preview email
|
||||
- [ ] Switch to code mode
|
||||
- [ ] Save template
|
||||
|
||||
**Store Settings:**
|
||||
- [ ] Upload logo (light) via drag-and-drop
|
||||
- [ ] Upload logo (dark) via Media Library
|
||||
- [ ] Upload favicon via Media Library
|
||||
- [ ] Remove and re-upload
|
||||
- [ ] Verify preview display
|
||||
|
||||
---
|
||||
|
||||
## 📝 Summary
|
||||
|
||||
### What We Built
|
||||
|
||||
A **professional, user-friendly email template builder** that:
|
||||
- Respects WordPress conventions
|
||||
- Provides visual editing for beginners
|
||||
- Offers code mode for experts
|
||||
- Integrates seamlessly with WordPress Media
|
||||
- Produces beautiful, responsive emails
|
||||
|
||||
### Key Achievements
|
||||
|
||||
1. **No HTML Knowledge Required** - Visual builder handles everything
|
||||
2. **Professional Styling** - Buttons and content look great
|
||||
3. **WordPress Integration** - Native Media Modal support
|
||||
4. **Variable System** - Easy dynamic content insertion
|
||||
5. **Flexible** - Visual builder OR code mode
|
||||
|
||||
### Production Ready
|
||||
|
||||
All features tested and working:
|
||||
- ✅ Block structure optimized
|
||||
- ✅ Rich content editing
|
||||
- ✅ WordPress Media integration
|
||||
- ✅ Variable insertion
|
||||
- ✅ Professional styling
|
||||
- ✅ Code mode available
|
||||
- ✅ Responsive design
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Result
|
||||
|
||||
**The PERFECT email template builder for WooCommerce!**
|
||||
|
||||
Combines the simplicity of a visual builder with the power of code editing, all while respecting WordPress conventions and providing a familiar user experience.
|
||||
|
||||
**Best of all worlds!** 🚀
|
||||
@@ -1,310 +0,0 @@
|
||||
# Email Customization - Complete Implementation! 🎉
|
||||
|
||||
## ✅ All 5 Tasks Completed
|
||||
|
||||
### 1. Logo URL with WP Media Library
|
||||
**Status:** ✅ Complete
|
||||
|
||||
**Features:**
|
||||
- "Select" button opens WordPress Media Library
|
||||
- Logo preview below input field
|
||||
- Can paste URL or select from media
|
||||
- Proper image sizing (200x60px recommended)
|
||||
|
||||
**Implementation:**
|
||||
- Uses `openWPMediaLogo()` from wp-media.ts
|
||||
- Preview shows selected logo
|
||||
- Applied to email header in EmailRenderer
|
||||
|
||||
---
|
||||
|
||||
### 2. Footer Text with {current_year} Variable
|
||||
**Status:** ✅ Complete
|
||||
|
||||
**Features:**
|
||||
- Placeholder shows `© {current_year} Your Store`
|
||||
- Help text explains dynamic year variable
|
||||
- Backend replaces {current_year} with actual year
|
||||
|
||||
**Implementation:**
|
||||
```php
|
||||
$footer_text = str_replace('{current_year}', date('Y'), $footer_text);
|
||||
```
|
||||
|
||||
**Example:**
|
||||
```
|
||||
Input: © {current_year} My Store. All rights reserved.
|
||||
Output: © 2024 My Store. All rights reserved.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. Social Links in Footer
|
||||
**Status:** ✅ Complete
|
||||
|
||||
**Supported Platforms:**
|
||||
- Facebook
|
||||
- Twitter
|
||||
- Instagram
|
||||
- LinkedIn
|
||||
- YouTube
|
||||
- Website
|
||||
|
||||
**Features:**
|
||||
- Add/remove social links
|
||||
- Platform dropdown with icons
|
||||
- URL input for each
|
||||
- Rendered as icons in email footer
|
||||
- Centered alignment
|
||||
|
||||
**UI:**
|
||||
```
|
||||
[Facebook ▼] [https://facebook.com/yourpage] [🗑️]
|
||||
[Twitter ▼] [https://twitter.com/yourhandle] [🗑️]
|
||||
```
|
||||
|
||||
**Email Output:**
|
||||
```html
|
||||
<div class="social-icons" style="margin-top: 16px; text-align: center;">
|
||||
<a href="https://facebook.com/..."><img src="..." /></a>
|
||||
<a href="https://twitter.com/..."><img src="..." /></a>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Backend API & Integration
|
||||
**Status:** ✅ Complete
|
||||
|
||||
**API Endpoints:**
|
||||
```
|
||||
GET /woonoow/v1/notifications/email-settings
|
||||
POST /woonoow/v1/notifications/email-settings
|
||||
DELETE /woonoow/v1/notifications/email-settings
|
||||
```
|
||||
|
||||
**Database:**
|
||||
- Stored in wp_options as `woonoow_email_settings`
|
||||
- JSON structure with all settings
|
||||
- Defaults provided if not set
|
||||
|
||||
**Security:**
|
||||
- Permission checks (manage_woocommerce)
|
||||
- Input sanitization (sanitize_hex_color, esc_url_raw)
|
||||
- Platform whitelist for social links
|
||||
- URL validation
|
||||
|
||||
**Email Rendering:**
|
||||
- EmailRenderer.php applies settings
|
||||
- Logo/header text
|
||||
- Footer with {current_year}
|
||||
- Social icons
|
||||
- Hero card colors
|
||||
- Button colors (ready)
|
||||
|
||||
---
|
||||
|
||||
### 5. Hero Card Text Color
|
||||
**Status:** ✅ Complete
|
||||
|
||||
**Features:**
|
||||
- Separate color picker for hero text
|
||||
- Applied to headings and paragraphs
|
||||
- Live preview in settings
|
||||
- Usually white for dark gradients
|
||||
|
||||
**Implementation:**
|
||||
```php
|
||||
if ($type === 'hero' || $type === 'success') {
|
||||
$style .= sprintf(
|
||||
' background: linear-gradient(135deg, %s 0%%, %s 100%%);',
|
||||
$hero_gradient_start,
|
||||
$hero_gradient_end
|
||||
);
|
||||
$content_style .= sprintf(' color: %s;', $hero_text_color);
|
||||
}
|
||||
```
|
||||
|
||||
**Preview:**
|
||||
```
|
||||
[#667eea] → [#764ba2] [#ffffff]
|
||||
Gradient Start End Text Color
|
||||
|
||||
Preview:
|
||||
┌─────────────────────────────┐
|
||||
│ Preview (white text) │
|
||||
│ This is how your hero │
|
||||
│ cards will look │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Complete Settings Structure
|
||||
|
||||
```typescript
|
||||
interface EmailSettings {
|
||||
// Brand Colors
|
||||
primary_color: string; // #7f54b3
|
||||
secondary_color: string; // #7f54b3
|
||||
|
||||
// Hero Card
|
||||
hero_gradient_start: string; // #667eea
|
||||
hero_gradient_end: string; // #764ba2
|
||||
hero_text_color: string; // #ffffff
|
||||
|
||||
// Buttons
|
||||
button_text_color: string; // #ffffff
|
||||
|
||||
// Branding
|
||||
logo_url: string; // https://...
|
||||
header_text: string; // Store Name
|
||||
footer_text: string; // © {current_year} ...
|
||||
|
||||
// Social
|
||||
social_links: SocialLink[]; // [{platform, url}]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
### Frontend → Backend
|
||||
1. User customizes settings in UI
|
||||
2. Clicks "Save Settings"
|
||||
3. POST to `/notifications/email-settings`
|
||||
4. Backend sanitizes and stores in wp_options
|
||||
|
||||
### Backend → Email
|
||||
1. Email triggered (order placed, etc.)
|
||||
2. EmailRenderer loads settings
|
||||
3. Applies colors, logo, footer
|
||||
4. Renders with custom branding
|
||||
5. Sends to customer
|
||||
|
||||
### Preview
|
||||
1. EditTemplate loads settings
|
||||
2. Applies to preview iframe
|
||||
3. User sees real-time preview
|
||||
4. Colors, logo, footer all visible
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
### Frontend
|
||||
- `routes/Settings/Notifications.tsx` - Added card
|
||||
- `routes/Settings/Notifications/EmailCustomization.tsx` - NEW
|
||||
- `App.tsx` - Added route
|
||||
|
||||
### Backend
|
||||
- `includes/Api/NotificationsController.php` - API endpoints
|
||||
- `includes/Core/Notifications/EmailRenderer.php` - Apply settings
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Settings Page
|
||||
- [ ] Navigate to Settings → Notifications → Email Customization
|
||||
- [ ] Change primary color → See button preview update
|
||||
- [ ] Change hero gradient → See preview update
|
||||
- [ ] Change hero text color → See preview text color change
|
||||
- [ ] Click "Select" for logo → Media library opens
|
||||
- [ ] Select logo → Preview shows below
|
||||
- [ ] Add footer text with {current_year}
|
||||
- [ ] Add social links (Facebook, Twitter, etc.)
|
||||
- [ ] Click "Save Settings" → Success message
|
||||
- [ ] Refresh page → Settings persist
|
||||
- [ ] Click "Reset to Defaults" → Confirm → Settings reset
|
||||
|
||||
### Email Rendering
|
||||
- [ ] Trigger test email (place order)
|
||||
- [ ] Check email has custom logo (if set)
|
||||
- [ ] Check email has custom header text (if set)
|
||||
- [ ] Check hero cards have custom gradient
|
||||
- [ ] Check hero cards have custom text color
|
||||
- [ ] Check footer has {current_year} replaced with actual year
|
||||
- [ ] Check footer has social icons
|
||||
- [ ] Click social icons → Go to correct URLs
|
||||
|
||||
### Preview
|
||||
- [ ] Edit email template
|
||||
- [ ] Switch to Preview tab
|
||||
- [ ] See custom colors applied
|
||||
- [ ] See logo/header
|
||||
- [ ] See footer with social icons
|
||||
|
||||
---
|
||||
|
||||
## Next Steps (Optional Enhancements)
|
||||
|
||||
### Button Color Application
|
||||
Currently ready but needs template update:
|
||||
```php
|
||||
$primary_color = $email_settings['primary_color'] ?? '#7f54b3';
|
||||
$button_text_color = $email_settings['button_text_color'] ?? '#ffffff';
|
||||
|
||||
// Apply to .button class in template
|
||||
```
|
||||
|
||||
### Social Icon Assets
|
||||
Need to create/host social icon images:
|
||||
- facebook.png
|
||||
- twitter.png
|
||||
- instagram.png
|
||||
- linkedin.png
|
||||
- youtube.png
|
||||
- website.png
|
||||
|
||||
Or use Font Awesome / inline SVG.
|
||||
|
||||
### Preview Integration
|
||||
Update EditTemplate preview to fetch and apply email settings:
|
||||
```typescript
|
||||
const { data: emailSettings } = useQuery({
|
||||
queryKey: ['email-settings'],
|
||||
queryFn: () => api.get('/notifications/email-settings'),
|
||||
});
|
||||
|
||||
// Apply to preview styles
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Success Metrics
|
||||
|
||||
✅ **User Experience:**
|
||||
- Easy logo selection (WP Media Library)
|
||||
- Visual color pickers
|
||||
- Live previews
|
||||
- One-click save
|
||||
- One-click reset
|
||||
|
||||
✅ **Functionality:**
|
||||
- All settings saved to database
|
||||
- All settings applied to emails
|
||||
- Dynamic {current_year} variable
|
||||
- Social links rendered
|
||||
- Colors applied to cards
|
||||
|
||||
✅ **Code Quality:**
|
||||
- Proper sanitization
|
||||
- Security checks
|
||||
- Type safety (TypeScript)
|
||||
- Validation (platform whitelist)
|
||||
- Fallback defaults
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Complete!
|
||||
|
||||
All 5 tasks implemented and tested:
|
||||
1. ✅ Logo with WP Media Library
|
||||
2. ✅ Footer {current_year} variable
|
||||
3. ✅ Social links
|
||||
4. ✅ Backend API & email rendering
|
||||
5. ✅ Hero text color
|
||||
|
||||
**Ready for production!** 🚀
|
||||
@@ -1,532 +0,0 @@
|
||||
# Email Builder UX Refinements - Complete! 🎉
|
||||
|
||||
**Date:** November 13, 2025
|
||||
**Status:** ✅ ALL TASKS COMPLETE
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
Successfully implemented all 7 major refinements to the email builder UX, including expanded social media integration, color customization, and comprehensive default email templates for all notification events.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 1: Expanded Social Media Platforms
|
||||
|
||||
### Platforms Added
|
||||
- **Original:** Facebook, Twitter, Instagram, LinkedIn, YouTube, Website
|
||||
- **New Additions:**
|
||||
- X (Twitter rebrand)
|
||||
- Discord
|
||||
- Spotify
|
||||
- Telegram
|
||||
- WhatsApp
|
||||
- Threads
|
||||
- Website (Earth icon)
|
||||
|
||||
### Implementation
|
||||
- **Frontend:** `EmailCustomization.tsx`
|
||||
- Updated `getSocialIcon()` with all Lucide icons
|
||||
- Expanded select dropdown with all platforms
|
||||
- Each platform has appropriate icon and label
|
||||
|
||||
- **Backend:** `NotificationsController.php`
|
||||
- Updated `allowed_platforms` array
|
||||
- Validation for all new platforms
|
||||
- Sanitization maintained
|
||||
|
||||
### Files Modified
|
||||
- `admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx`
|
||||
- `includes/Api/NotificationsController.php`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 2: PNG Icons Instead of Emoji
|
||||
|
||||
### Icon Assets
|
||||
- **Location:** `/assets/icons/`
|
||||
- **Format:** `mage--{platform}-{color}.png`
|
||||
- **Platforms:** All 11 social platforms
|
||||
- **Colors:** Black and White variants (22 total files)
|
||||
|
||||
### Implementation
|
||||
- **Email Rendering:** `EmailRenderer.php`
|
||||
- Updated `get_social_icon_url()` to return PNG URLs
|
||||
- Uses plugin URL + assets path
|
||||
- Dynamic color selection
|
||||
|
||||
- **Preview:** `EditTemplate.tsx`
|
||||
- PNG icons in preview HTML
|
||||
- Uses `pluginUrl` from window object
|
||||
- Matches actual email rendering
|
||||
|
||||
### Benefits
|
||||
- More accurate than emoji
|
||||
- Consistent across email clients
|
||||
- Professional appearance
|
||||
- Better control over styling
|
||||
|
||||
### Files Modified
|
||||
- `includes/Core/Notifications/EmailRenderer.php`
|
||||
- `admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 3: Icon Color Selection (Black/White)
|
||||
|
||||
### New Setting
|
||||
- **Field:** `social_icon_color`
|
||||
- **Type:** Select dropdown
|
||||
- **Options:**
|
||||
- White Icons (for dark backgrounds)
|
||||
- Black Icons (for light backgrounds)
|
||||
- **Default:** White
|
||||
|
||||
### Implementation
|
||||
- **Frontend:** `EmailCustomization.tsx`
|
||||
- Select component with two options
|
||||
- Clear labeling and description
|
||||
- Saved with other settings
|
||||
|
||||
- **Backend:**
|
||||
- `NotificationsController.php`: Validation (white/black only)
|
||||
- `EmailRenderer.php`: Applied to icon URLs
|
||||
- Default value in settings
|
||||
|
||||
### Usage
|
||||
```php
|
||||
// Backend
|
||||
$icon_color = $email_settings['social_icon_color'] ?? 'white';
|
||||
$icon_url = $this->get_social_icon_url($platform, $icon_color);
|
||||
|
||||
// Frontend
|
||||
const socialIconColor = settings.social_icon_color || 'white';
|
||||
```
|
||||
|
||||
### Files Modified
|
||||
- `admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx`
|
||||
- `includes/Api/NotificationsController.php`
|
||||
- `includes/Core/Notifications/EmailRenderer.php`
|
||||
- `admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 4: Body Background Color Setting
|
||||
|
||||
### New Setting
|
||||
- **Field:** `body_bg_color`
|
||||
- **Type:** Color picker + hex input
|
||||
- **Default:** `#f8f8f8` (light gray)
|
||||
|
||||
### Implementation
|
||||
- **UI Component:**
|
||||
- Color picker for visual selection
|
||||
- Text input for hex code entry
|
||||
- Live preview in customization form
|
||||
- Descriptive help text
|
||||
|
||||
- **Application:**
|
||||
- Email body background in actual emails
|
||||
- Preview iframe background
|
||||
- Consistent across all email templates
|
||||
|
||||
### Usage
|
||||
```typescript
|
||||
// Frontend
|
||||
const bodyBgColor = settings.body_bg_color || '#f8f8f8';
|
||||
|
||||
// Applied to preview
|
||||
body { background: ${bodyBgColor}; }
|
||||
```
|
||||
|
||||
### Files Modified
|
||||
- `admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx`
|
||||
- `includes/Api/NotificationsController.php`
|
||||
- `admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 5: Editor Mode Preview Styling
|
||||
|
||||
### Current Behavior
|
||||
- **Editor Mode:** Shows content structure (blocks, HTML)
|
||||
- **Preview Mode:** Shows final styled result with all customizations
|
||||
|
||||
### Design Decision
|
||||
This is **intentional and follows standard email builder UX patterns**:
|
||||
- Editor mode = content editing focus
|
||||
- Preview mode = visual result preview
|
||||
- Separation of concerns improves usability
|
||||
|
||||
### Rationale
|
||||
- Users edit content in editor mode without distraction
|
||||
- Preview mode shows exact final appearance
|
||||
- Standard pattern in tools like Mailchimp, SendGrid, etc.
|
||||
- Prevents confusion between editing and viewing
|
||||
|
||||
### Status
|
||||
✅ **Working as designed** - No changes needed
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 6: Hero Preview Text Color Fix
|
||||
|
||||
### Issue
|
||||
Hero card preview in customization form wasn't using selected `hero_text_color`.
|
||||
|
||||
### Solution
|
||||
Applied color directly to child elements instead of parent:
|
||||
|
||||
```tsx
|
||||
// Before (color inheritance not working)
|
||||
<div style={{ background: gradient, color: heroTextColor }}>
|
||||
<h3>Preview</h3>
|
||||
<p>Text</p>
|
||||
</div>
|
||||
|
||||
// After (explicit color on each element)
|
||||
<div style={{ background: gradient }}>
|
||||
<h3 style={{ color: heroTextColor }}>Preview</h3>
|
||||
<p style={{ color: heroTextColor }}>Text</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Result
|
||||
- Hero preview now correctly shows selected text color
|
||||
- Live updates as user changes color
|
||||
- Matches actual email rendering
|
||||
|
||||
### Files Modified
|
||||
- `admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx`
|
||||
|
||||
---
|
||||
|
||||
## ✅ Task 7: Complete Default Email Content
|
||||
|
||||
### New File Created
|
||||
**`includes/Core/Notifications/DefaultEmailTemplates.php`**
|
||||
|
||||
Comprehensive default templates for all notification events with professional, card-based HTML.
|
||||
|
||||
### Templates Included
|
||||
|
||||
#### Order Events
|
||||
|
||||
**1. Order Placed (Staff)**
|
||||
```
|
||||
[card type="hero"]
|
||||
New Order Received!
|
||||
Order from {customer_name}
|
||||
[/card]
|
||||
[card] Order Details [/card]
|
||||
[card] Customer Details [/card]
|
||||
[card] Order Items [/card]
|
||||
[button] View Order Details [/button]
|
||||
```
|
||||
|
||||
**2. Order Processing (Customer)**
|
||||
```
|
||||
[card type="success"]
|
||||
Order Confirmed!
|
||||
Thank you message
|
||||
[/card]
|
||||
[card] Order Summary [/card]
|
||||
[card] What's Next [/card]
|
||||
[card] Order Items [/card]
|
||||
[button] Track Your Order [/button]
|
||||
```
|
||||
|
||||
**3. Order Completed (Customer)**
|
||||
```
|
||||
[card type="success"]
|
||||
Order Completed!
|
||||
Enjoy your purchase
|
||||
[/card]
|
||||
[card] Order Details [/card]
|
||||
[card] Thank You Message [/card]
|
||||
[button] View Order [/button]
|
||||
[button outline] Continue Shopping [/button]
|
||||
```
|
||||
|
||||
**4. Order Cancelled (Staff)**
|
||||
```
|
||||
[card type="warning"]
|
||||
Order Cancelled
|
||||
[/card]
|
||||
[card] Order Details [/card]
|
||||
[button] View Order Details [/button]
|
||||
```
|
||||
|
||||
**5. Order Refunded (Customer)**
|
||||
```
|
||||
[card type="info"]
|
||||
Refund Processed
|
||||
[/card]
|
||||
[card] Refund Details [/card]
|
||||
[card] What Happens Next [/card]
|
||||
[button] View Order [/button]
|
||||
```
|
||||
|
||||
#### Product Events
|
||||
|
||||
**6. Low Stock Alert (Staff)**
|
||||
```
|
||||
[card type="warning"]
|
||||
Low Stock Alert
|
||||
[/card]
|
||||
[card] Product Details [/card]
|
||||
[card] Action Required [/card]
|
||||
[button] View Product [/button]
|
||||
```
|
||||
|
||||
**7. Out of Stock Alert (Staff)**
|
||||
```
|
||||
[card type="warning"]
|
||||
Out of Stock Alert
|
||||
[/card]
|
||||
[card] Product Details [/card]
|
||||
[card] Immediate Action Required [/card]
|
||||
[button] Manage Product [/button]
|
||||
```
|
||||
|
||||
#### Customer Events
|
||||
|
||||
**8. New Customer (Customer)**
|
||||
```
|
||||
[card type="hero"]
|
||||
Welcome!
|
||||
Thank you for creating an account
|
||||
[/card]
|
||||
[card] Your Account Details [/card]
|
||||
[card] Get Started (feature list) [/card]
|
||||
[button] Go to My Account [/button]
|
||||
[button outline] Start Shopping [/button]
|
||||
```
|
||||
|
||||
**9. Customer Note (Customer)**
|
||||
```
|
||||
[card type="info"]
|
||||
Order Note Added
|
||||
[/card]
|
||||
[card] Order Details [/card]
|
||||
[card] Note from Store [/card]
|
||||
[button] View Order [/button]
|
||||
```
|
||||
|
||||
### Integration
|
||||
|
||||
**Updated `TemplateProvider.php`:**
|
||||
```php
|
||||
public static function get_default_templates() {
|
||||
// Generate email templates from DefaultEmailTemplates
|
||||
foreach ($events as $event_id => $recipient_type) {
|
||||
$default = DefaultEmailTemplates::get_template($event_id, $recipient_type);
|
||||
$templates["{$event_id}_email"] = [
|
||||
'event_id' => $event_id,
|
||||
'channel_id' => 'email',
|
||||
'subject' => $default['subject'],
|
||||
'body' => $default['body'],
|
||||
'variables' => self::get_variables_for_event($event_id),
|
||||
];
|
||||
}
|
||||
// ... push templates
|
||||
}
|
||||
```
|
||||
|
||||
### Features
|
||||
- ✅ All 9 events covered
|
||||
- ✅ Separate staff/customer templates
|
||||
- ✅ Professional copy and structure
|
||||
- ✅ Card-based modern design
|
||||
- ✅ Multiple card types (hero, success, warning, info)
|
||||
- ✅ Multiple buttons with styles
|
||||
- ✅ Proper variable placeholders
|
||||
- ✅ Consistent branding
|
||||
- ✅ Push notification templates included
|
||||
|
||||
### Files Created/Modified
|
||||
- `includes/Core/Notifications/DefaultEmailTemplates.php` (NEW)
|
||||
- `includes/Core/Notifications/TemplateProvider.php` (UPDATED)
|
||||
|
||||
---
|
||||
|
||||
## Technical Summary
|
||||
|
||||
### Settings Schema
|
||||
|
||||
```typescript
|
||||
interface EmailSettings {
|
||||
// Colors
|
||||
primary_color: string; // #7f54b3
|
||||
secondary_color: string; // #7f54b3
|
||||
hero_gradient_start: string; // #667eea
|
||||
hero_gradient_end: string; // #764ba2
|
||||
hero_text_color: string; // #ffffff
|
||||
button_text_color: string; // #ffffff
|
||||
body_bg_color: string; // #f8f8f8 (NEW)
|
||||
social_icon_color: 'white' | 'black'; // (NEW)
|
||||
|
||||
// Branding
|
||||
logo_url: string;
|
||||
header_text: string;
|
||||
footer_text: string;
|
||||
|
||||
// Social Links
|
||||
social_links: Array<{
|
||||
platform: string; // 11 platforms supported
|
||||
url: string;
|
||||
}>;
|
||||
}
|
||||
```
|
||||
|
||||
### API Endpoints
|
||||
|
||||
```
|
||||
GET /woonoow/v1/notifications/email-settings
|
||||
POST /woonoow/v1/notifications/email-settings
|
||||
DELETE /woonoow/v1/notifications/email-settings
|
||||
```
|
||||
|
||||
### Storage
|
||||
- **Option Key:** `woonoow_email_settings`
|
||||
- **Sanitization:** All inputs sanitized
|
||||
- **Validation:** Colors, URLs, platforms validated
|
||||
- **Defaults:** Comprehensive defaults provided
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### Social Media Integration
|
||||
- [x] All 11 platforms appear in dropdown
|
||||
- [x] Icons display correctly in customization UI
|
||||
- [x] PNG icons render in email preview
|
||||
- [x] PNG icons render in actual emails
|
||||
- [x] Black/white icon selection works
|
||||
- [x] Social links save and load correctly
|
||||
|
||||
### Color Settings
|
||||
- [x] Body background color picker works
|
||||
- [x] Body background applies to preview
|
||||
- [x] Body background applies to emails
|
||||
- [x] Icon color selection works
|
||||
- [x] Hero text color preview fixed
|
||||
- [x] All colors save and persist
|
||||
|
||||
### Default Templates
|
||||
- [x] All 9 email events have templates
|
||||
- [x] Staff templates appropriate for admins
|
||||
- [x] Customer templates appropriate for customers
|
||||
- [x] Card syntax correct
|
||||
- [x] Variables properly placed
|
||||
- [x] Buttons included where needed
|
||||
- [x] Push templates complete
|
||||
|
||||
### Integration
|
||||
- [x] Settings API working
|
||||
- [x] Frontend loads settings
|
||||
- [x] Preview reflects settings
|
||||
- [x] Emails use settings
|
||||
- [x] Reset functionality works
|
||||
- [x] Save functionality works
|
||||
|
||||
---
|
||||
|
||||
## Files Changed
|
||||
|
||||
### Frontend (React/TypeScript)
|
||||
```
|
||||
admin-spa/src/routes/Settings/Notifications/
|
||||
├── EmailCustomization.tsx (Updated - UI for all settings)
|
||||
└── EditTemplate.tsx (Updated - Preview with PNG icons)
|
||||
```
|
||||
|
||||
### Backend (PHP)
|
||||
```
|
||||
includes/
|
||||
├── Api/
|
||||
│ └── NotificationsController.php (Updated - API endpoints)
|
||||
└── Core/Notifications/
|
||||
├── EmailRenderer.php (Updated - PNG icons, colors)
|
||||
├── TemplateProvider.php (Updated - Integration)
|
||||
└── DefaultEmailTemplates.php (NEW - All default content)
|
||||
```
|
||||
|
||||
### Assets
|
||||
```
|
||||
assets/icons/
|
||||
├── mage--discord-black.png
|
||||
├── mage--discord-white.png
|
||||
├── mage--earth-black.png
|
||||
├── mage--earth-white.png
|
||||
├── mage--facebook-black.png
|
||||
├── mage--facebook-white.png
|
||||
├── mage--instagram-black.png
|
||||
├── mage--instagram-white.png
|
||||
├── mage--linkedin-black.png
|
||||
├── mage--linkedin-white.png
|
||||
├── mage--spotify-black.png
|
||||
├── mage--spotify-white.png
|
||||
├── mage--telegram-black.png
|
||||
├── mage--telegram-white.png
|
||||
├── mage--threads-black.png
|
||||
├── mage--threads-white.png
|
||||
├── mage--whatsapp-black.png
|
||||
├── mage--whatsapp-white.png
|
||||
├── mage--x-black.png
|
||||
├── mage--x-white.png
|
||||
├── mage--youtube-black.png
|
||||
└── mage--youtube-white.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Next Steps (Optional Enhancements)
|
||||
|
||||
### Future Improvements
|
||||
1. **Email Template Variables**
|
||||
- Add more dynamic variables
|
||||
- Variable preview in editor
|
||||
- Variable documentation
|
||||
|
||||
2. **Template Library**
|
||||
- Pre-built template variations
|
||||
- Industry-specific templates
|
||||
- Seasonal templates
|
||||
|
||||
3. **A/B Testing**
|
||||
- Test different subject lines
|
||||
- Test different layouts
|
||||
- Analytics integration
|
||||
|
||||
4. **Advanced Customization**
|
||||
- Font family selection
|
||||
- Font size controls
|
||||
- Spacing/padding controls
|
||||
- Border radius controls
|
||||
|
||||
5. **Conditional Content**
|
||||
- Show/hide based on order value
|
||||
- Show/hide based on customer type
|
||||
- Dynamic product recommendations
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
All 7 tasks successfully completed! The email builder now has:
|
||||
- ✅ Expanded social media platform support (11 platforms)
|
||||
- ✅ Professional PNG icons with color selection
|
||||
- ✅ Body background color customization
|
||||
- ✅ Fixed hero preview text color
|
||||
- ✅ Complete default templates for all events
|
||||
- ✅ Comprehensive documentation
|
||||
|
||||
The email system is now production-ready with professional defaults and extensive customization options.
|
||||
|
||||
**Total Commits:** 2
|
||||
**Total Files Modified:** 6
|
||||
**Total Files Created:** 23 (22 icons + 1 template class)
|
||||
**Lines of Code:** ~1,500+
|
||||
|
||||
🎉 **Project Status: COMPLETE**
|
||||
@@ -1,414 +0,0 @@
|
||||
# Final UX Improvements - Session Complete! 🎉
|
||||
|
||||
## All 6 Improvements Implemented
|
||||
|
||||
---
|
||||
|
||||
## 1. ✅ Dialog Scrollable Body with Fixed Header/Footer
|
||||
|
||||
### Problem
|
||||
Long content made header (with close button) and footer (with action buttons) disappear. Users couldn't close dialog or take action.
|
||||
|
||||
### Solution
|
||||
- Changed dialog to flexbox layout (`flex flex-col`)
|
||||
- Added `DialogBody` component with `overflow-y-auto`
|
||||
- Header and footer fixed with borders
|
||||
- Max height `90vh` for viewport fit
|
||||
|
||||
### Structure
|
||||
```tsx
|
||||
<DialogContent> (flex flex-col max-h-[90vh])
|
||||
<DialogHeader> (px-6 pt-6 pb-4 border-b) - FIXED
|
||||
<DialogBody> (flex-1 overflow-y-auto px-6 py-4) - SCROLLABLE
|
||||
<DialogFooter> (px-6 py-4 border-t mt-auto) - FIXED
|
||||
</DialogContent>
|
||||
```
|
||||
|
||||
### Files
|
||||
- `components/ui/dialog.tsx`
|
||||
- `components/ui/rich-text-editor.tsx`
|
||||
|
||||
---
|
||||
|
||||
## 2. ✅ Dialog Close-Proof (No Outside Click)
|
||||
|
||||
### Problem
|
||||
Accidental outside clicks closed dialog, losing user input and causing confusion.
|
||||
|
||||
### Solution
|
||||
```tsx
|
||||
<DialogPrimitive.Content
|
||||
onPointerDownOutside={(e) => e.preventDefault()}
|
||||
onInteractOutside={(e) => e.preventDefault()}
|
||||
>
|
||||
```
|
||||
|
||||
### Result
|
||||
- Must click X button or Cancel to close
|
||||
- No accidental dismissal
|
||||
- No lost UI control
|
||||
- Better user confidence
|
||||
|
||||
### Files
|
||||
- `components/ui/dialog.tsx`
|
||||
|
||||
---
|
||||
|
||||
## 3. ✅ Code Mode Button Moved to Left
|
||||
|
||||
### Problem
|
||||
Inconsistent layout - Code Mode button was grouped with Editor/Preview tabs on the right.
|
||||
|
||||
### Solution
|
||||
Moved Code Mode button next to "Message Body" label on the left.
|
||||
|
||||
### Before
|
||||
```
|
||||
Message Body [Editor|Preview] [Code Mode]
|
||||
```
|
||||
|
||||
### After
|
||||
```
|
||||
Message Body [Code Mode] [Editor|Preview]
|
||||
```
|
||||
|
||||
### Result
|
||||
- Logical grouping
|
||||
- Editor/Preview tabs stay together on right
|
||||
- Code Mode is a mode toggle, not a tab
|
||||
- Consistent, professional layout
|
||||
|
||||
### Files
|
||||
- `routes/Settings/Notifications/EditTemplate.tsx`
|
||||
|
||||
---
|
||||
|
||||
## 4. ✅ Markdown Support in Code Mode! 🎉
|
||||
|
||||
### Problem
|
||||
HTML is verbose and not user-friendly for tech-savvy users who prefer Markdown.
|
||||
|
||||
### Solution
|
||||
Full Markdown support with custom syntax for email-specific features.
|
||||
|
||||
### Markdown Syntax
|
||||
|
||||
**Standard Markdown:**
|
||||
```markdown
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
|
||||
**Bold text**
|
||||
*Italic text*
|
||||
|
||||
- List item 1
|
||||
- List item 2
|
||||
|
||||
[Link text](https://example.com)
|
||||
```
|
||||
|
||||
**Card Blocks:**
|
||||
```markdown
|
||||
:::card
|
||||
# Your heading
|
||||
Your content here
|
||||
:::
|
||||
|
||||
:::card[success]
|
||||
✅ Success message
|
||||
:::
|
||||
|
||||
:::card[warning]
|
||||
⚠️ Warning message
|
||||
:::
|
||||
```
|
||||
|
||||
**Button Blocks:**
|
||||
```markdown
|
||||
[button](https://example.com){Click Here}
|
||||
|
||||
[button style="outline"](https://example.com){Secondary Button}
|
||||
```
|
||||
|
||||
**Variables:**
|
||||
```markdown
|
||||
Hi {customer_name},
|
||||
|
||||
Your order #{order_number} totaling {order_total} is ready!
|
||||
```
|
||||
|
||||
### Features
|
||||
- Bidirectional conversion (HTML ↔ Markdown)
|
||||
- Toggle button: "📝 Switch to Markdown" / "🔧 Switch to HTML"
|
||||
- Syntax highlighting for both modes
|
||||
- Preserves all email features
|
||||
- Easier for non-HTML users
|
||||
|
||||
### Files
|
||||
- `lib/markdown-parser.ts` - Parser implementation
|
||||
- `components/ui/code-editor.tsx` - Mode toggle
|
||||
- `routes/Settings/Notifications/EditTemplate.tsx` - Enable support
|
||||
|
||||
### Dependencies
|
||||
```bash
|
||||
npm install @codemirror/lang-markdown
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. ✅ Realistic Variable Simulations in Preview
|
||||
|
||||
### Problem
|
||||
Variables showed as raw text like `{order_items_list}` in preview, making it hard to judge layout.
|
||||
|
||||
### Solution
|
||||
Added realistic HTML simulations for better preview experience.
|
||||
|
||||
### order_items_list Simulation
|
||||
```html
|
||||
<ul style="list-style: none; padding: 0; margin: 16px 0;">
|
||||
<li style="padding: 12px; background: #f9f9f9; border-radius: 6px; margin-bottom: 8px;">
|
||||
<strong>Premium T-Shirt</strong> × 2<br>
|
||||
<span style="color: #666;">Size: L, Color: Blue</span><br>
|
||||
<span style="font-weight: 600;">$49.98</span>
|
||||
</li>
|
||||
<li style="padding: 12px; background: #f9f9f9; border-radius: 6px; margin-bottom: 8px;">
|
||||
<strong>Classic Jeans</strong> × 1<br>
|
||||
<span style="color: #666;">Size: 32, Color: Dark Blue</span><br>
|
||||
<span style="font-weight: 600;">$79.99</span>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### order_items_table Simulation
|
||||
```html
|
||||
<table style="width: 100%; border-collapse: collapse; margin: 16px 0;">
|
||||
<thead>
|
||||
<tr style="background: #f5f5f5;">
|
||||
<th style="padding: 12px; text-align: left;">Product</th>
|
||||
<th style="padding: 12px; text-align: center;">Qty</th>
|
||||
<th style="padding: 12px; text-align: right;">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 12px;">
|
||||
<strong>Premium T-Shirt</strong><br>
|
||||
<span style="color: #666; font-size: 13px;">Size: L, Color: Blue</span>
|
||||
</td>
|
||||
<td style="padding: 12px; text-align: center;">2</td>
|
||||
<td style="padding: 12px; text-align: right;">$49.98</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Result
|
||||
- Users see realistic email preview
|
||||
- Can judge layout and design accurately
|
||||
- No guessing what variables will look like
|
||||
- Professional presentation
|
||||
- Better design decisions
|
||||
|
||||
### Files
|
||||
- `routes/Settings/Notifications/EditTemplate.tsx`
|
||||
|
||||
---
|
||||
|
||||
## 6. ✅ Smart Back Navigation to Accordion
|
||||
|
||||
### Problem
|
||||
- Back button used `navigate(-1)`
|
||||
- Returned to parent page but wrong tab
|
||||
- Required 2-3 clicks to get back to Email accordion
|
||||
- Lost context, poor UX
|
||||
|
||||
### Solution
|
||||
Navigate with query params to preserve context.
|
||||
|
||||
### Implementation
|
||||
|
||||
**EditTemplate.tsx:**
|
||||
```tsx
|
||||
<Button onClick={() => navigate(`/settings/notifications?tab=${channelId}&event=${eventId}`)}>
|
||||
Back
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Templates.tsx:**
|
||||
```tsx
|
||||
const [openAccordion, setOpenAccordion] = useState<string | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
const eventParam = searchParams.get('event');
|
||||
if (eventParam) {
|
||||
setOpenAccordion(eventParam);
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
<Accordion value={openAccordion} onValueChange={setOpenAccordion}>
|
||||
{/* ... */}
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
### User Flow
|
||||
1. User in Email accordion, editing "Order Placed" template
|
||||
2. Clicks Back button
|
||||
3. Returns to Notifications page with `?tab=email&event=order_placed`
|
||||
4. Email accordion auto-opens
|
||||
5. "Order Placed" template visible
|
||||
6. Perfect context preservation!
|
||||
|
||||
### Result
|
||||
- One-click return to context
|
||||
- No confusion
|
||||
- No extra clicks
|
||||
- Professional navigation
|
||||
- Context always preserved
|
||||
|
||||
### Files
|
||||
- `routes/Settings/Notifications/EditTemplate.tsx`
|
||||
- `routes/Settings/Notifications/Templates.tsx`
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
### What We Built
|
||||
Six critical UX improvements that transform the email builder from good to **perfect**.
|
||||
|
||||
### Key Achievements
|
||||
|
||||
1. **Healthy Dialogs** - Scrollable body, fixed header/footer, no accidental closing
|
||||
2. **Logical Layout** - Code Mode button in correct position
|
||||
3. **Markdown Support** - Easier editing for tech-savvy users
|
||||
4. **Realistic Previews** - See exactly what emails will look like
|
||||
5. **Smart Navigation** - Context-aware back button
|
||||
|
||||
### Impact
|
||||
|
||||
**For Users:**
|
||||
- No frustration
|
||||
- Faster workflow
|
||||
- Better previews
|
||||
- Professional tools
|
||||
- Intuitive navigation
|
||||
|
||||
**For Business:**
|
||||
- Happy users
|
||||
- Fewer support tickets
|
||||
- Better email designs
|
||||
- Professional product
|
||||
- Competitive advantage
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### 1. Dialog Improvements
|
||||
- [ ] Paste long content in dialog
|
||||
- [ ] Verify header stays visible
|
||||
- [ ] Verify footer stays visible
|
||||
- [ ] Body scrolls independently
|
||||
- [ ] Click outside dialog - should NOT close
|
||||
- [ ] Click X button - closes
|
||||
- [ ] Click Cancel - closes
|
||||
|
||||
### 2. Code Mode Button
|
||||
- [ ] Verify button is left of label
|
||||
- [ ] Verify Editor/Preview tabs on right
|
||||
- [ ] Toggle Code Mode
|
||||
- [ ] Layout looks professional
|
||||
|
||||
### 3. Markdown Support
|
||||
- [ ] Toggle to Markdown mode
|
||||
- [ ] Write Markdown syntax
|
||||
- [ ] Use :::card blocks
|
||||
- [ ] Use [button] syntax
|
||||
- [ ] Toggle back to HTML
|
||||
- [ ] Verify conversion works both ways
|
||||
|
||||
### 4. Variable Simulations
|
||||
- [ ] Use {order_items_list} in template
|
||||
- [ ] Preview shows realistic list
|
||||
- [ ] Use {order_items_table} in template
|
||||
- [ ] Preview shows realistic table
|
||||
- [ ] Verify styling looks good
|
||||
|
||||
### 5. Back Navigation
|
||||
- [ ] Open Email accordion
|
||||
- [ ] Edit a template
|
||||
- [ ] Click Back
|
||||
- [ ] Verify returns to Email accordion
|
||||
- [ ] Verify accordion is open
|
||||
- [ ] Verify correct template visible
|
||||
|
||||
---
|
||||
|
||||
## Dependencies
|
||||
|
||||
### New Package Required
|
||||
```bash
|
||||
npm install @codemirror/lang-markdown
|
||||
```
|
||||
|
||||
### Complete Install Command
|
||||
```bash
|
||||
cd admin-spa
|
||||
npm install @tiptap/extension-text-align @tiptap/extension-image codemirror @codemirror/lang-html @codemirror/lang-markdown @codemirror/theme-one-dark @radix-ui/react-radio-group
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
### Components
|
||||
1. `components/ui/dialog.tsx` - Scrollable body, close-proof
|
||||
2. `components/ui/code-editor.tsx` - Markdown support
|
||||
3. `components/ui/rich-text-editor.tsx` - Use DialogBody
|
||||
|
||||
### Routes
|
||||
4. `routes/Settings/Notifications/EditTemplate.tsx` - Layout, simulations, navigation
|
||||
5. `routes/Settings/Notifications/Templates.tsx` - Accordion state management
|
||||
|
||||
### Libraries
|
||||
6. `lib/markdown-parser.ts` - NEW - Markdown ↔ HTML conversion
|
||||
|
||||
### Documentation
|
||||
7. `DEPENDENCIES.md` - Updated with markdown package
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Result
|
||||
|
||||
**The PERFECT email builder experience!**
|
||||
|
||||
All user feedback addressed:
|
||||
- ✅ Healthy dialogs
|
||||
- ✅ Logical layout
|
||||
- ✅ Markdown support
|
||||
- ✅ Realistic previews
|
||||
- ✅ Smart navigation
|
||||
- ✅ Professional UX
|
||||
|
||||
**Ready for production!** 🚀
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
### Lint Warnings
|
||||
The following lint warnings are expected and can be ignored:
|
||||
- `mso-table-lspace` and `mso-table-rspace` in `templates/emails/modern.html` - These are Microsoft Outlook-specific CSS properties
|
||||
|
||||
### Future Enhancements
|
||||
- Variable categorization (order vs account vs product)
|
||||
- Color customization UI
|
||||
- More default templates
|
||||
- Template preview mode
|
||||
- A/B testing support
|
||||
|
||||
---
|
||||
|
||||
**Session Complete! All 6 improvements implemented successfully!** ✨
|
||||
@@ -1,424 +0,0 @@
|
||||
# UX Improvements - Perfect Builder Experience! 🎯
|
||||
|
||||
## Overview
|
||||
|
||||
Six major UX improvements implemented to create the perfect email builder experience. These changes address real user pain points and make the builder intuitive and professional.
|
||||
|
||||
---
|
||||
|
||||
## 1. Prevent Link/Button Navigation in Builder ✅
|
||||
|
||||
### Problem
|
||||
- Clicking links or buttons in the builder redirected users
|
||||
- Users couldn't edit button text (clicking opened the link)
|
||||
- Frustrating experience, broke editing workflow
|
||||
|
||||
### Solution
|
||||
**BlockRenderer (Email Builder):**
|
||||
```typescript
|
||||
const handleClick = (e: React.MouseEvent) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName === 'A' || target.tagName === 'BUTTON' ||
|
||||
target.closest('a') || target.closest('button')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="group relative" onClick={handleClick}>
|
||||
{/* Block content */}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
**RichTextEditor (TipTap):**
|
||||
```typescript
|
||||
editorProps: {
|
||||
handleClick: (view, pos, event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.tagName === 'A' || target.closest('a')) {
|
||||
event.preventDefault();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Result
|
||||
- Links and buttons are now **editable only**
|
||||
- No accidental navigation
|
||||
- Click to edit, not to follow
|
||||
- Perfect editing experience
|
||||
|
||||
---
|
||||
|
||||
## 2. Default Templates Use Raw Buttons ✅
|
||||
|
||||
### Problem
|
||||
- Default templates had buttons wrapped in cards:
|
||||
```html
|
||||
[card]
|
||||
<p style="text-align: center;">
|
||||
<a href="{order_url}" class="button">View Order</a>
|
||||
</p>
|
||||
[/card]
|
||||
```
|
||||
- Didn't match current block structure
|
||||
- Confusing for users
|
||||
|
||||
### Solution
|
||||
Changed to raw button blocks:
|
||||
```html
|
||||
[button link="{order_url}" style="solid"]View Order Details[/button]
|
||||
```
|
||||
|
||||
### Before & After
|
||||
|
||||
**Before:**
|
||||
```
|
||||
[card]
|
||||
<p><a class="button">Track Order</a></p>
|
||||
<p>Questions? Contact us.</p>
|
||||
[/card]
|
||||
```
|
||||
|
||||
**After:**
|
||||
```
|
||||
[button link="{order_url}" style="solid"]Track Your Order[/button]
|
||||
|
||||
[card]
|
||||
<p>Questions? Contact us.</p>
|
||||
[/card]
|
||||
```
|
||||
|
||||
### Result
|
||||
- Matches block structure
|
||||
- Buttons are standalone blocks
|
||||
- Easier to edit and rearrange
|
||||
- Consistent with builder UI
|
||||
|
||||
---
|
||||
|
||||
## 3. Split Order Items: List & Table ✅
|
||||
|
||||
### Problem
|
||||
- Only one `{order_items}` variable
|
||||
- No control over presentation format
|
||||
- Users want different styles for different emails
|
||||
|
||||
### Solution
|
||||
Split into two variables:
|
||||
|
||||
**`{order_items_list}`** - Formatted List
|
||||
```html
|
||||
<ul>
|
||||
<li>Product Name × 2 - $50.00</li>
|
||||
<li>Another Product × 1 - $25.00</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
**`{order_items_table}`** - Formatted Table
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Qty</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Product Name</td>
|
||||
<td>2</td>
|
||||
<td>$50.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Use Cases
|
||||
- **List format**: Simple, compact, mobile-friendly
|
||||
- **Table format**: Detailed, professional, desktop-optimized
|
||||
|
||||
### Result
|
||||
- Better control over presentation
|
||||
- Choose format based on email type
|
||||
- Professional-looking order summaries
|
||||
|
||||
---
|
||||
|
||||
## 4. Payment URL Variable Added ✅
|
||||
|
||||
### Problem
|
||||
- No way to link to payment page
|
||||
- Users couldn't send payment reminders
|
||||
- Missing critical functionality
|
||||
|
||||
### Solution
|
||||
Added `{payment_url}` variable with smart strategy:
|
||||
|
||||
**Strategy:**
|
||||
```php
|
||||
if (manual_payment) {
|
||||
// Use order details URL or thank you page
|
||||
// Contains payment instructions
|
||||
$payment_url = get_order_url();
|
||||
} else if (api_payment) {
|
||||
// Use payment gateway URL
|
||||
// From order payment_meta
|
||||
$payment_url = get_payment_gateway_url();
|
||||
}
|
||||
```
|
||||
|
||||
**Implementation:**
|
||||
```php
|
||||
'payment_url' => __('Payment URL (for pending payments)', 'woonoow'),
|
||||
```
|
||||
|
||||
### Use Cases
|
||||
- **Pending payment emails**: "Complete your payment"
|
||||
- **Failed payment emails**: "Retry payment"
|
||||
- **Payment reminder emails**: "Your payment is waiting"
|
||||
|
||||
### Example
|
||||
```html
|
||||
[card type="warning"]
|
||||
<h2>⏳ Payment Pending</h2>
|
||||
<p>Your order is waiting for payment.</p>
|
||||
[/card]
|
||||
|
||||
[button link="{payment_url}" style="solid"]Complete Payment[/button]
|
||||
```
|
||||
|
||||
### Result
|
||||
- Complete payment workflow
|
||||
- Better conversion rates
|
||||
- Professional payment reminders
|
||||
|
||||
---
|
||||
|
||||
## 5. Variable Categorization Strategy 📝
|
||||
|
||||
### Problem
|
||||
- All variables shown for all events
|
||||
- Confusing (why show `order_items` for account emails?)
|
||||
- Poor UX
|
||||
|
||||
### Strategy (For Future Implementation)
|
||||
|
||||
**Order-Related Events:**
|
||||
```javascript
|
||||
{
|
||||
order_number, order_total, order_status,
|
||||
order_items_list, order_items_table,
|
||||
payment_url, tracking_number,
|
||||
customer_name, customer_email,
|
||||
shipping_address, billing_address
|
||||
}
|
||||
```
|
||||
|
||||
**Account-Related Events:**
|
||||
```javascript
|
||||
{
|
||||
customer_name, customer_email,
|
||||
login_url, account_url,
|
||||
reset_password_url
|
||||
}
|
||||
```
|
||||
|
||||
**Product-Related Events:**
|
||||
```javascript
|
||||
{
|
||||
product_name, product_url,
|
||||
product_price, product_image,
|
||||
stock_quantity
|
||||
}
|
||||
```
|
||||
|
||||
### Implementation Plan
|
||||
1. Add event categories to event definitions
|
||||
2. Filter variables by event category
|
||||
3. Show only relevant variables in UI
|
||||
4. Better UX, less confusion
|
||||
|
||||
### Result (When Implemented)
|
||||
- Contextual variables only
|
||||
- Cleaner UI
|
||||
- Faster template creation
|
||||
- Less user confusion
|
||||
|
||||
---
|
||||
|
||||
## 6. WordPress Media Library Fixed ✅
|
||||
|
||||
### Problem
|
||||
- WordPress Media library not loaded
|
||||
- Error: "WordPress media library is not loaded"
|
||||
- Browser prompt fallback (poor UX)
|
||||
- Store logos/favicon upload broken
|
||||
|
||||
### Root Cause
|
||||
```php
|
||||
// Missing in Assets.php
|
||||
wp_enqueue_media(); // ← Not called!
|
||||
```
|
||||
|
||||
### Solution
|
||||
|
||||
**Assets.php:**
|
||||
```php
|
||||
public static function enqueue($hook) {
|
||||
if ($hook !== 'toplevel_page_woonoow') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Enqueue WordPress Media library for image uploads
|
||||
wp_enqueue_media(); // ← Added!
|
||||
|
||||
// ... rest of code
|
||||
}
|
||||
```
|
||||
|
||||
**wp-media.ts (Better Error Handling):**
|
||||
```typescript
|
||||
if (typeof window.wp === 'undefined' || typeof window.wp.media === 'undefined') {
|
||||
console.error('WordPress media library is not available');
|
||||
console.error('window.wp:', typeof window.wp);
|
||||
console.error('window.wp.media:', typeof (window as any).wp?.media);
|
||||
|
||||
alert('WordPress Media library is not loaded.\n\n' +
|
||||
'Please ensure you are in WordPress admin and the page has fully loaded.\n\n' +
|
||||
'If the problem persists, try refreshing the page.');
|
||||
return;
|
||||
}
|
||||
```
|
||||
|
||||
### Result
|
||||
- WordPress Media Modal loads properly
|
||||
- No more errors
|
||||
- Professional image selection
|
||||
- Store logos/favicon upload works
|
||||
- Better error messages with debugging info
|
||||
|
||||
---
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### 1. Link/Button Navigation
|
||||
- [ ] Click link in card content → no navigation
|
||||
- [ ] Click button in builder → no navigation
|
||||
- [ ] Click button in RichTextEditor → no navigation
|
||||
- [ ] Edit button text by clicking → works
|
||||
- [ ] Links/buttons work in email preview
|
||||
|
||||
### 2. Default Templates
|
||||
- [ ] Create new template from default
|
||||
- [ ] Verify buttons are standalone blocks
|
||||
- [ ] Verify buttons not wrapped in cards
|
||||
- [ ] Edit button easily
|
||||
- [ ] Rearrange blocks easily
|
||||
|
||||
### 3. Order Items Variables
|
||||
- [ ] Insert `{order_items_list}` → shows list format
|
||||
- [ ] Insert `{order_items_table}` → shows table format
|
||||
- [ ] Preview both formats
|
||||
- [ ] Verify formatting in email
|
||||
|
||||
### 4. Payment URL
|
||||
- [ ] Insert `{payment_url}` in button
|
||||
- [ ] Verify variable appears in list
|
||||
- [ ] Test with pending payment order
|
||||
- [ ] Test with manual payment
|
||||
- [ ] Test with API payment gateway
|
||||
|
||||
### 5. WordPress Media
|
||||
- [ ] Click image icon in RichTextEditor
|
||||
- [ ] Verify WP Media Modal opens
|
||||
- [ ] Select image from library
|
||||
- [ ] Upload new image
|
||||
- [ ] Click "Choose from Media Library" in Store settings
|
||||
- [ ] Upload logo (light mode)
|
||||
- [ ] Upload logo (dark mode)
|
||||
- [ ] Upload favicon
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
### What We Built
|
||||
A **perfect email builder experience** with:
|
||||
- No accidental navigation
|
||||
- Intuitive block structure
|
||||
- Flexible content formatting
|
||||
- Complete payment workflow
|
||||
- Professional image management
|
||||
|
||||
### Key Achievements
|
||||
|
||||
1. **✅ No Navigation in Builder** - Links/buttons editable only
|
||||
2. **✅ Raw Button Blocks** - Matches current structure
|
||||
3. **✅ List & Table Formats** - Better control
|
||||
4. **✅ Payment URL** - Complete workflow
|
||||
5. **📝 Variable Strategy** - Future improvement
|
||||
6. **✅ WP Media Fixed** - Professional uploads
|
||||
|
||||
### Impact
|
||||
|
||||
**For Users:**
|
||||
- Faster template creation
|
||||
- No frustration
|
||||
- Professional results
|
||||
- Intuitive workflow
|
||||
|
||||
**For Business:**
|
||||
- Better conversion (payment URLs)
|
||||
- Professional emails
|
||||
- Happy users
|
||||
- Fewer support tickets
|
||||
|
||||
---
|
||||
|
||||
## Files Modified
|
||||
|
||||
### Frontend (TypeScript/React)
|
||||
1. `components/EmailBuilder/BlockRenderer.tsx` - Prevent navigation
|
||||
2. `components/ui/rich-text-editor.tsx` - Prevent navigation
|
||||
3. `lib/wp-media.ts` - Better error handling
|
||||
|
||||
### Backend (PHP)
|
||||
4. `includes/Admin/Assets.php` - Enqueue WP Media
|
||||
5. `includes/Core/Notifications/TemplateProvider.php` - Variables & defaults
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
### Immediate
|
||||
1. Test all features
|
||||
2. Verify WP Media loads
|
||||
3. Test payment URL generation
|
||||
4. Verify order items formatting
|
||||
|
||||
### Future
|
||||
1. Implement variable categorization
|
||||
2. Add color customization UI
|
||||
3. Create more default templates
|
||||
4. Add template preview mode
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Result
|
||||
|
||||
**The PERFECT email builder experience!**
|
||||
|
||||
All pain points addressed:
|
||||
- ✅ No accidental navigation
|
||||
- ✅ Intuitive editing
|
||||
- ✅ Professional features
|
||||
- ✅ WordPress integration
|
||||
- ✅ Complete workflow
|
||||
|
||||
**Ready for production!** 🚀
|
||||
Reference in New Issue
Block a user