dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
270 Commits 1 Branch 0 Tags
7394d2f21348413faeaf7951cb0bd623a46b84be
Commit Graph

7 Commits

Author SHA1 Message Date
dwindown
4471cd600f feat: Complete markdown syntax refinement and variable protection 
✅ New cleaner syntax implemented:
- [card:type] instead of [card type='type']
- [button:style](url)Text[/button] instead of [button url='...' style='...']
- Standard markdown images: ![alt](url)

✅ Variable protection from markdown parsing:
- Variables with underscores (e.g., {order_items_table}) now protected
- HTML comment placeholders prevent italic/bold parsing
- All variables render correctly in preview

✅ Button rendering fixes:
- Buttons work in Visual mode inside cards
- Buttons work in Preview mode
- Button clicks prevented in visual editor
- Proper styling for solid and outline buttons

✅ Backward compatibility:
- Old syntax still supported
- No breaking changes

✅ Bug fixes:
- Fixed order_item_table → order_items_table naming
- Fixed button regex to match across newlines
- Added button/image parsing to parseMarkdownBasics
- Prevented button clicks on .button and .button-outline classes

📚 Documentation:
- NEW_MARKDOWN_SYNTAX.md - Complete user guide
- MARKDOWN_SYNTAX_AND_VARIABLES.md - Technical analysis
 2025-11-15 20:05:50 +07:00
dwindown
a3aab7f4a0 feat: Complete Default Email Templates for All Events! 📧 
## Task 7 Complete: Default Email Content ✅

### New File Created:
**`DefaultEmailTemplates.php`**
- Comprehensive default templates for all 9 events
- Separate templates for staff vs customer recipients
- Professional, well-structured HTML with card blocks
- All use modern card-based email builder syntax

### Email Templates Included:

**Order Events:**
1. **Order Placed** (Staff)
   - Hero card with order notification
   - Order details, customer info, items list
   - View order button

2. **Order Processing** (Customer)
   - Success card confirmation
   - Order summary with status
   - What's next information
   - Track order button

3. **Order Completed** (Customer)
   - Success card celebration
   - Order details with completion date
   - Thank you message
   - View order + Continue shopping buttons

4. **Order Cancelled** (Staff)
   - Warning card notification
   - Order and customer details
   - View order button

5. **Order Refunded** (Customer)
   - Info card with refund notification
   - Refund details and amount
   - Timeline expectations
   - View order button

**Product Events:**
6. **Low Stock Alert** (Staff)
   - Warning card
   - Product details with stock levels
   - Action required message
   - View product button

7. **Out of Stock Alert** (Staff)
   - Warning card
   - Product details
   - Immediate action required
   - Manage product button

**Customer Events:**
8. **New Customer** (Customer)
   - Hero welcome card
   - Account details
   - Feature list (order history, tracking, etc.)
   - My Account + Start Shopping buttons

9. **Customer Note** (Customer)
   - Info card
   - Order details
   - Note content display
   - View order button

### Integration:
- Updated `TemplateProvider.php` to use DefaultEmailTemplates
- Automatic template generation for all events
- Push notification templates also complete
- Proper variable mapping per event type

### Features:
- Card-based modern design
- Hero/Success/Warning/Info card types
- Multiple buttons with solid/outline styles
- Proper variable placeholders
- Professional copy for all scenarios
- Consistent branding throughout

All 7 tasks now complete! 🎉
 2025-11-13 15:27:16 +07:00
dwindown
5d04878264 feat: Major UX Improvements - Perfect Builder Experience! 🎯 
## ✅ 1. Prevent Link/Button Navigation in Builder
**Problem:** Clicking links/buttons redirected users, preventing editing
**Solution:**
- Added click handler in BlockRenderer to prevent navigation
- Added handleClick in TipTap editorProps
- Links and buttons now only editable, not clickable

**Files:**
- `components/EmailBuilder/BlockRenderer.tsx`
- `components/ui/rich-text-editor.tsx`

## ✅ 2. Default Templates Use Raw Buttons
**Problem:** Default content had formatted buttons in cards
**Solution:**
- Changed `[card]<a class="button">...</a>[/card]`
- To `[button link="..." style="solid"]...[/button]`
- Matches current block structure

**File:**
- `includes/Core/Notifications/TemplateProvider.php`

## ✅ 3. Split Order Items into List & Table
**Problem:** Only one order_items variable
**Solution:**
- `{order_items_list}` - Formatted list (ul/li)
- `{order_items_table}` - Formatted table
- Better control over presentation

**File:**
- `includes/Core/Notifications/TemplateProvider.php`

## ✅ 4. Payment URL Variable Added
**Problem:** No way to link to payment page
**Solution:**
- Added `{payment_url}` variable
- Strategy:
  - Manual payment → order details/thankyou page
  - API payment → payment gateway URL
- Reads from order payment_meta

**File:**
- `includes/Core/Notifications/TemplateProvider.php`

## ✅ 5. Variable Categorization (Noted)
**Strategy for future:**
- Order events: order_items_table, payment_url
- Account events: login_url, account_url
- Contextual variables only
- Better UX, less confusion

## ✅ 6. WordPress Media Library Fixed
**Problem:** WP Media not loaded, showing browser prompt
**Solution:**
- Added `wp_enqueue_media()` in Assets.php
- Changed prompt to alert with better message
- Added debugging console logs
- Now loads properly!

**Files:**
- `includes/Admin/Assets.php`
- `lib/wp-media.ts`

---

## 📋 Summary

All 6 UX improvements implemented:
1. ✅ No navigation in builder (links/buttons editable only)
2. ✅ Default templates use raw buttons
3. ✅ Order items split: list & table
4. ✅ Payment URL variable added
5. ✅ Variable categorization strategy noted
6. ✅ WordPress Media library properly loaded

**Perfect builder experience achieved!** 🎉
 2025-11-13 10:32:52 +07:00
dwindown
aa9ca24988 fix: All 7 User Feedback Issues Resolved! 🎯 
## ✅ Issue 1: WordPress Media Not Loading
**Problem:** WP media library not loaded error
**Solution:**
- Added fallback to URL prompt
- Better error handling
- User can still insert images if WP media fails

## ✅ Issue 2: Button Variables Filter
**Problem:** All variables shown in button link field
**Solution:**
- Filter to only show URL variables
- Applied to both RichTextEditor and EmailBuilder
- Only `*_url` variables displayed

**Before:** {order_number} {customer_name} {order_total} ...
**After:** {order_url} {store_url} only

## ✅ Issue 3: Color Customization Note
**Noted for future:**
- Hero card gradient colors
- Button primary color
- Button secondary border color
- Will be added to email customization form later

## ✅ Issue 4 & 5: Heading Display in Editor & Builder
**Problem:** Headings looked like paragraphs
**Solution:**
- Added Tailwind heading styles to RichTextEditor
- Added heading styles to BlockRenderer
- Now headings are visually distinct:
  - H1: 3xl, bold
  - H2: 2xl, bold
  - H3: xl, bold
  - H4: lg, bold

**Files Modified:**
- `components/ui/rich-text-editor.tsx`
- `components/EmailBuilder/BlockRenderer.tsx`

## ✅ Issue 6: Order Items Variable
**Problem:** No variable for product list/table
**Solution:**
- Added `order_items` variable
- Description: "Order Items (formatted table)"
- Will render formatted product list in emails

**File Modified:**
- `includes/Core/Notifications/TemplateProvider.php`

## ✅ Issue 7: Remove Edit Icon from Spacer/Divider
**Problem:** Edit button shown but no options to edit
**Solution:**
- Conditional rendering of edit button
- Only show for `card` and `button` blocks
- Spacer and divider only show: ↑ ↓ ×

**File Modified:**
- `components/EmailBuilder/BlockRenderer.tsx`

---

## 📋 Summary

All user feedback addressed:
1. ✅ WP Media fallback
2. ✅ Button variables filtered
3. ✅ Color customization noted
4. ✅ Headings visible in editor
5. ✅ Headings visible in builder
6. ✅ Order items variable added
7. ✅ Edit icon removed from spacer/divider

Ready for testing! ��
 2025-11-13 10:12:03 +07:00
dwindown
1573bff7b3 feat: Card-based email system implementation 
## ✅ Core Card System Complete!

### base.html Template
- ✅ Single, theme-agnostic template
- ✅ Card system CSS (default, highlight, info, warning, success, bg)
- ✅ Customizable header (logo/text)
- ✅ Customizable footer + social icons
- ✅ Customizable body background
- ✅ Mobile responsive
- ✅ Email client compatible (Outlook, Gmail, etc.)

### EmailRenderer.php - Card Parser
- ✅ `parse_cards()` - Parses [card]...[/card] syntax
- ✅ `parse_card_attributes()` - Extracts type and bg attributes
- ✅ `render_card()` - Renders card HTML
- ✅ `render_card_spacing()` - 24px spacing between cards
- ✅ `render_html()` - Email customization support
- ✅ `get_social_icon_url()` - Social media icons

### Card Types Supported
```
[card]                        → Default white card
[card type="highlight"]       → Purple gradient card
[card type="info"]            → Blue info card
[card type="warning"]         → Yellow warning card
[card type="success"]         → Green success card
[card bg="https://..."]       → Background image card
```

### Email Customization
- ✅ Header: Logo or text
- ✅ Body background color
- ✅ Footer text
- ✅ Social media links (Facebook, Instagram, Twitter, LinkedIn)
- ✅ Stored in `woonoow_notification_settings[email_appearance]`

### Default Templates Updated
- ✅ order_placed_email - Multi-card layout
- ✅ order_processing_email - Success card + summary
- ✅ Other templates ready to update

---

**Architecture:**
```
Content with [card] tags
    ↓
parse_cards()
    ↓
render_card() × N
    ↓
base.html template
    ↓
Beautiful HTML email! 🎨
```

**Next:** Settings UI + Live Preview 🚀
 2025-11-12 23:14:00 +07:00
dwindown
c8adb9e924 feat: Integrate WooCommerce email templates 
## ✅ Issue #4: WooCommerce Template Integration

**TemplateProvider.php:**
- ✅ Added `get_wc_email_template()` method
- ✅ Loads actual WooCommerce email subjects
- ✅ Falls back to custom defaults if WC not available
- ✅ Maps WooNooW events to WC email classes:
  - order_placed → WC_Email_New_Order
  - order_processing → WC_Email_Customer_Processing_Order
  - order_completed → WC_Email_Customer_Completed_Order
  - order_cancelled → WC_Email_Cancelled_Order
  - order_refunded → WC_Email_Customer_Refunded_Order
  - new_customer → WC_Email_Customer_New_Account
  - customer_note → WC_Email_Customer_Note

### How It Works
1. On template load, checks if WooCommerce is active
2. Loads WC email objects via `WC()->mailer()->get_emails()`
3. Extracts subject, heading, enabled status
4. Uses WC subject as default, falls back to custom if not available
5. Body remains custom (WC templates are HTML, we use plain text)

### Benefits
- ✅ Consistent with WooCommerce email settings
- ✅ Respects store owner customizations
- ✅ Automatic updates when WC emails change
- ✅ Graceful fallback if WC not available

---

**Result:** Templates now load from WooCommerce! 🎉
 2025-11-11 21:06:56 +07:00
dwindown
97e76a837b feat: Add template editor and push notifications infrastructure 
## ✅ Template Editor + Push Notifications

### Backend (PHP)

**1. TemplateProvider** (`includes/Core/Notifications/TemplateProvider.php`)
- Manages notification templates in wp_options
- Default templates for all events x channels
- Variable system (order, product, customer, store)
- Template CRUD operations
- Variable replacement engine

**2. PushNotificationHandler** (`includes/Core/Notifications/PushNotificationHandler.php`)
- VAPID keys generation and storage
- Push subscription management
- Queue system for push notifications
- User-specific subscriptions
- Service worker integration ready

**3. NotificationsController** - Extended with:
- GET /notifications/templates - List all templates
- GET /notifications/templates/:eventId/:channelId - Get template
- POST /notifications/templates - Save template
- DELETE /notifications/templates/:eventId/:channelId - Reset to default
- GET /notifications/push/vapid-key - Get VAPID public key
- POST /notifications/push/subscribe - Subscribe to push
- POST /notifications/push/unsubscribe - Unsubscribe

**4. Push channel added to built-in channels**

### Frontend (React)

**1. TemplateEditor Component** (`TemplateEditor.tsx`)
- Modal dialog for editing templates
- Subject + Body text editors
- Variable insertion with dropdown
- Click-to-insert variables
- Live preview
- Save and reset to default
- Per event + channel customization

**2. Templates Page** - Completely rewritten:
- Lists all events x channels
- Shows "Custom" badge for customized templates
- Edit button opens template editor
- Fetches templates from API
- Variable reference guide
- Organized by channel

### Key Features

✅ **Simple Text Editor** (not HTML builder)
- Subject line
- Body text with variables
- Variable picker
- Preview mode

✅ **Variable System**
- Order variables: {order_number}, {order_total}, etc.
- Customer variables: {customer_name}, {customer_email}, etc.
- Product variables: {product_name}, {stock_quantity}, etc.
- Store variables: {store_name}, {store_url}, etc.
- Click to insert at cursor position

✅ **Push Notifications Ready**
- VAPID key generation
- Subscription management
- Queue system
- PWA integration ready
- Built-in channel (alongside email)

✅ **Template Management**
- Default templates for all events
- Per-event, per-channel customization
- Reset to default functionality
- Custom badge indicator

### Default Templates Included

**Email:**
- Order Placed, Processing, Completed, Cancelled, Refunded
- Low Stock, Out of Stock
- New Customer, Customer Note

**Push:**
- Order Placed, Processing, Completed
- Low Stock Alert

### Next Steps

1. ✅ Service worker for push notifications
2. ✅ Push subscription UI in Channels page
3. ✅ Test push notifications
4. ✅ Addon integration examples

---

**Ready for testing!** 🚀
 2025-11-11 13:09:33 +07:00