' . __('You have received a new order...', 'woonoow') . '
-[/card]' -``` - -The new `DefaultTemplates.php` uses clean markdown: -```php -return '[card type="hero"] - -New order received! - -A customer has placed a new order. Please review and process. -[/card]' -``` - -**Root Cause:** -The backend API controller is still calling the old `DefaultEmailTemplates` class instead of the new `DefaultTemplates` class. - ---- - -## Required Backend Changes - -### 1. Update Default Templates Integration - -**Option A: Replace Old Class (Recommended)** - -Replace `includes/Core/Notifications/DefaultEmailTemplates.php` with a wrapper that uses the new class: - -```php - 'order_placed', - 'order_processing' => 'order_confirmed', - 'order_completed' => 'order_completed', - 'order_cancelled' => 'order_cancelled', - 'order_refunded' => 'order_cancelled', // Map to cancelled for now - 'low_stock' => 'order_placed', // Placeholder - 'out_of_stock' => 'order_placed', // Placeholder - 'new_customer' => 'customer_registered', - 'customer_note' => 'order_placed', // Placeholder - ]; - - $newEventId = $eventMap[$event_id] ?? $event_id; - - // Get templates from new class - $allTemplates = NewDefaultTemplates::get_all_templates(); - $templates = $allTemplates[$recipient_type] ?? []; - - if (isset($templates[$newEventId])) { - return [ - 'subject' => NewDefaultTemplates::get_default_subject($recipient_type, $newEventId), - 'body' => $templates[$newEventId], - ]; - } - - // Fallback - return [ - 'subject' => __('Notification from {store_name}', 'woonoow'), - 'body' => '[card]New notification[/card]', - ]; - } -} -``` - -**Option B: Update API Controller Directly** - -Update the API controller to use the new `DefaultTemplates` class: - -```php -use WooNooW\Email\DefaultTemplates; - -// In the get_template endpoint: -$templates = DefaultTemplates::get_all_templates(); -$subject = DefaultTemplates::get_default_subject($recipient_type, $event_id); -$body = $templates[$recipient_type][$event_id] ?? ''; -``` - ---- - -### 2. Fix Event Counts in API - -**Update:** `includes/Api/NotificationsController.php` - -The `/notifications/events` endpoint should return events with recipient type information: - -```php -public function get_events($request) { - $events = [ - 'orders' => [ - [ - 'id' => 'order_placed', - 'label' => __('Order Placed'), - 'description' => __('When a new order is placed'), - 'recipients' => ['customer', 'staff'], // โ Add this - ], - [ - 'id' => 'order_confirmed', - 'label' => __('Order Confirmed'), - 'description' => __('When order is confirmed'), - 'recipients' => ['customer', 'staff'], // โ Add this - ], - // ... etc - ], - 'customers' => [ - [ - 'id' => 'customer_registered', - 'label' => __('Customer Registered'), - 'description' => __('When customer creates account'), - 'recipients' => ['customer'], // โ Customer only - ], - [ - 'id' => 'customer_vip_upgraded', - 'label' => __('VIP Upgraded'), - 'description' => __('When customer becomes VIP'), - 'recipients' => ['customer'], // โ Customer only - ], - ], - ]; - - return rest_ensure_response($events); -} -``` - ---- - -### 3. Update Frontend to Filter Events - -**Update:** `admin-spa/src/routes/Settings/Notifications/Templates.tsx` - -```tsx -// Determine recipient type from current page -const isStaffPage = window.location.pathname.includes('/staff'); -const recipientType = isStaffPage ? 'staff' : 'customer'; - -// Filter events by recipient -const filteredEvents = allEvents.filter((event: any) => { - return event.recipients && event.recipients.includes(recipientType); -}); - -// Use filteredEvents instead of allEvents -` tags - -**Result:** -```markdown -Order Number: #12345 -Customer: John Doe -``` -Now renders as: -```html -
-Order Number: #12345
-Customer: John Doe
-
This is plain text.
-No background, no border, no padding.
Just content.
-` and `
` tags โ
-3. Mixed HTML + markdown syntax (messy!)
-4. Switch back to visual โ More `
` and `
` added
-5. **Endless pollution!** โ
-
-### **Root Cause:**
-```typescript
-// OLD (BROKEN) FLOW:
-Visual Builder (blocks)
- โ
-blocksToHTML() โ Adds
and
- โ
-htmlToMarkdown() โ Tries to clean, but messy
- โ
-"Markdown mode" shows:
,
, mixed syntax โ
-```
-
----
-
-## โ
The Solution
-
-### **New Clean Flow:**
-```typescript
-// NEW (FIXED) FLOW:
-Visual Builder (blocks)
- โ
-blocksToMarkdown() โ Direct conversion!
- โ
-Markdown mode shows: Clean markdown โ
-```
-
-### **Key Insight:**
-**Skip HTML entirely when converting blocks โ markdown!**
-
----
-
-## ๐ ๏ธ What Was Built
-
-### **1. New Function: `blocksToMarkdown()`**
-```typescript
-// Direct conversion: Blocks โ Markdown (no HTML!)
-export function blocksToMarkdown(blocks: EmailBlock[]): string {
- return blocks.map(block => {
- switch (block.type) {
- case 'card':
- return `[card type="${block.cardType}"]\n\n${block.content}\n\n[/card]`;
- case 'button':
- return `[button url="${block.link}"]${block.text}[/button]`;
- case 'divider':
- return '---';
- // ... etc
- }
- }).join('\n\n');
-}
-```
-
-**Result:** Clean markdown, no `
`, no `
`! โ
-
----
-
-### **2. New Function: `markdownToBlocks()`**
-```typescript
-// Direct conversion: Markdown โ Blocks (no HTML!)
-export function markdownToBlocks(markdown: string): EmailBlock[] {
- const blocks: EmailBlock[] = [];
-
- // Parse [card] blocks
- const cardMatch = markdown.match(/\[card([^\]]*)\]([\s\S]*)\[\/card\]/);
- if (cardMatch) {
- blocks.push({
- type: 'card',
- cardType: extractType(cardMatch[1]),
- content: cardMatch[2].trim(), // Clean content!
- });
- }
-
- // ... parse other blocks
-
- return blocks;
-}
-```
-
-**Result:** Direct parsing, no HTML intermediary! โ
-
----
-
-### **3. Updated EditTemplate.tsx**
-
-#### **Before (BROKEN):**
-```typescript
-// Switching to markdown mode
-const html = blocksToHTML(blocks); // Adds
,
-const markdown = htmlToMarkdown(html); // Messy conversion
-setMarkdownContent(markdown); // Shows HTML pollution โ
-```
-
-#### **After (FIXED):**
-```typescript
-// Switching to markdown mode
-const markdown = blocksToMarkdown(blocks); // Direct, clean!
-setMarkdownContent(markdown); // Shows clean markdown โ
-```
-
----
-
-## ๐ Comparison
-
-### **Old Flow (HTML Pollution):**
-```
-Visual Builder
- โ
-Blocks: { content: "Hello world" }
- โ
-blocksToHTML()
- โ
-HTML: "
Hello world
" - โ -htmlToMarkdown() - โ -Markdown: "Hello world
" โ Still has HTML! -``` - -### **New Flow (Clean Markdown):** -``` -Visual Builder - โ -Blocks: { content: "Hello world" } - โ -blocksToMarkdown() - โ -Markdown: "Hello world" โ Clean! -``` - ---- - -## ๐ฏ What You'll See Now - -### **Markdown Mode (Clean!):** -```markdown -[card type="hero"] - -# New order received! - -A customer has placed a new order. Please review and process. - -[/card] - -[card] - -**Order Number:** #{order_number} -**Customer:** {customer_name} -**Order Date:** {order_date} - -[/card] - -[button url="{order_url}"]View Order[/button] -``` - -**No ``, no `
`, just clean markdown!** โ
-
----
-
-## ๐ The Complete Data Flow
-
-### **Loading Template:**
-```
-Database (HTML)
- โ
-htmlToBlocks() โ Blocks
- โ
-blocksToMarkdown() โ Clean markdown
- โ
-โ
Both views ready!
-```
-
-### **Visual Mode Editing:**
-```
-User edits blocks
- โ
-handleBlocksChange()
- โ
-โโ blocksToHTML() โ HTML (for saving)
-โโ blocksToMarkdown() โ Markdown (for markdown mode)
- โ
-โ
Both synced, no pollution!
-```
-
-### **Markdown Mode Editing:**
-```
-User types markdown
- โ
-handleMarkdownChange()
- โ
-โโ markdownToBlocks() โ Blocks (for visual mode)
-โโ blocksToHTML() โ HTML (for saving)
- โ
-โ
Both synced, no pollution!
-```
-
-### **Mode Switching:**
-```
-Visual โ Markdown:
- blocksToMarkdown(blocks) โ Clean markdown โ
-
-Markdown โ Visual:
- markdownToBlocks(markdown) โ Blocks โ
-
-No HTML intermediary = No pollution!
-```
-
----
-
-## ๐งช Testing Results
-
-### โ
Test 1: Visual โ Markdown
-1. Edit in visual mode
-2. Click "Markdown"
-3. **Result:** Clean markdown, no `
`, no `
` โ
-
-### โ
Test 2: Markdown โ Visual
-1. Type clean markdown
-2. Click "Visual Builder"
-3. **Result:** Blocks created correctly โ
-
-### โ
Test 3: Multiple Switches
-1. Visual โ Markdown โ Visual โ Markdown
-2. **Result:** No pollution accumulation โ
-
-### โ
Test 4: Save & Reload
-1. Edit in any mode
-2. Save
-3. Reload
-4. **Result:** Clean markdown, no pollution โ
-
----
-
-## ๐ Files Modified
-
-### **1. `converter.ts`**
-**Added:**
-- โ
`blocksToMarkdown()` - Direct blocks โ markdown
-- โ
`markdownToBlocks()` - Direct markdown โ blocks
-
-**Result:** Clean conversions without HTML pollution
-
----
-
-### **2. `index.ts`**
-**Added:**
-- โ
Export `blocksToMarkdown`
-- โ
Export `markdownToBlocks`
-
-**Result:** Functions available throughout the app
-
----
-
-### **3. `EditTemplate.tsx`**
-**Changed:**
-- โ
Import new functions
-- โ
Use `blocksToMarkdown()` instead of `htmlToMarkdown()`
-- โ
Use `markdownToBlocks()` instead of `markdownToHtml() โ htmlToBlocks()`
-- โ
Direct conversions in all handlers
-
-**Result:** No more HTML pollution!
-
----
-
-## ๐จ Architecture Summary
-
-```
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-โ USER INTERFACE โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
-โ Visual Builder โโ Markdown โ
-โ โ
-โ Direct conversion (no HTML pollution!) โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- โ โ
- blocksToMarkdown markdownToBlocks
- โ โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-โ INTERNAL PIVOT โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
-โ HTML (for database & preview only) โ
-โ Generated via blocksToHTML() โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-โ DATABASE โ
-โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-```
-
----
-
-## ๐ก Key Principles
-
-### **1. Direct Conversion**
-- Blocks โ Markdown: Direct, no HTML
-- Only use HTML for database & preview
-
-### **2. Clean Separation**
-- **User-facing:** Markdown (clean, readable)
-- **Internal:** HTML (for compatibility)
-- **Never mix them!**
-
-### **3. No Pollution**
-- Markdown mode shows pure markdown
-- No `
`, no `
`, no HTML tags
-- Clean, mobile-friendly typing
-
----
-
-## ๐ Benefits
-
-| Feature | Before | After |
-|---------|--------|-------|
-| **Markdown view** | Mixed HTML + markdown โ | Pure markdown โ
|
-| **HTML pollution** | Accumulates with switches โ | Never happens โ
|
-| **Mobile typing** | Hard (HTML tags) โ | Easy (clean markdown) โ
|
-| **Readability** | Poor โ | Excellent โ
|
-| **Maintainability** | Complex โ | Simple โ
|
-
----
-
-## ๐ Example Output
-
-### **Before (Polluted):**
-```
-[card type="hero"]
-
-
- -
- -
- -# New order received! - -
- - - -A customer has placed... - - - -` and `
` tags
-- Pollution accumulated with mode switches
-- Not truly "markdown mode"
-
-### **Solution:**
-- Created `blocksToMarkdown()` for direct conversion
-- Created `markdownToBlocks()` for direct parsing
-- Bypassed HTML entirely for markdown โ blocks
-- HTML only used for database & preview
-
-### **Result:**
-- โ
Clean, pure markdown in markdown mode
-- โ
No HTML pollution ever
-- โ
Mobile-friendly typing
-- โ
Professional, modern approach
-
----
-
-**๐ FIXED! Test it now with hard refresh (Cmd+Shift+R)! ๐**
-
-**Click "Markdown" โ See clean markdown, no HTML pollution!**
diff --git a/CONVERTER_FIXES_SUMMARY.md b/CONVERTER_FIXES_SUMMARY.md
deleted file mode 100644
index a4c1198..0000000
--- a/CONVERTER_FIXES_SUMMARY.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Converter Fixes Summary
-
-## Issues Fixed
-
-### 1. โ
Exact Event Naming - No Mapping
-
-**Problem:** API used `order_processing` but Email templates had `order_confirmed`. Required a "bridge" mapping.
-
-**Solution:** Renamed template methods to match API exactly:
-- `customer_order_confirmed()` โ `customer_order_processing()`
-- `staff_order_confirmed()` โ `staff_order_processing()`
-- `customer_registered()` โ `customer_new_customer()`
-
-**Result:** Direct 1:1 mapping, no confusion, clean code.
-
-### 2. โ
Markdown Converter Respects [card] Boundaries
-
-**Problem:** `markdownToBlocks()` was splitting by double newlines (`\n\n`), causing:
-- Raw `[/card]` tags left in output
-- Each line with double space became a new card
-- `##` headings not rendered
-
-**Root Cause:**
-```typescript
-// OLD - WRONG
-const sections = markdown.split(/\n\n+/); // Splits by double newlines!
-```
-
-**Solution:** Parse by `[card]...[/card]` boundaries:
-```typescript
-// NEW - CORRECT
-while (remaining.length > 0) {
- const cardMatch = remaining.match(/^\[card([^\]]*)\]([\s\S]*?)\[\/card\]/);
- if (cardMatch) {
- // Extract content between [card] and [/card]
- const content = cardMatch[2].trim();
- blocks.push({ type: 'card', content });
- remaining = remaining.substring(cardMatch[0].length); // Advance!
- }
-}
-```
-
-**Key Changes:**
-- Uses regex to find `[card]...[/card]` pairs
-- Extracts content between tags
-- Advances `remaining` string after each match
-- No splitting by newlines
-
-### 3. โ ๏ธ Markdown Rendering in Preview (Partial)
-
-**Current State:**
-- Markdown is stored in database: `## Heading\n\n**bold**`
-- Frontend CodeEditor shows clean markdown โ
-- Preview shows markdown as-is (not converted to HTML) โ
-
-**Why:**
-The preview uses `htmlContent` which contains `[card]## Heading[/card]` but doesn't convert the markdown inside to HTML.
-
-**Next Steps:**
-Backend PHP needs to convert markdown to HTML when rendering emails. The `[card]` shortcode handler should:
-1. Extract content
-2. Convert markdown to HTML
-3. Wrap in styled div
-
-## Files Modified
-
-1. `/includes/Email/DefaultTemplates.php`
- - Renamed methods to match API event IDs exactly
- - Updated subject keys
-
-2. `/includes/Core/Notifications/TemplateProvider.php`
- - Removed event mapping
- - Direct lookup: `$allEmailTemplates[$recipient_type][$event_id]`
-
-3. `/admin-spa/src/components/EmailBuilder/converter.ts`
- - Fixed `markdownToBlocks()` to respect `[card]...[/card]` boundaries
- - Added proper string advancement
- - No more double-newline splitting
-
-## Testing Checklist
-
-- [x] Event names match between API and templates
-- [x] No mapping/bridging code
-- [x] Markdown editor shows clean markdown
-- [x] `[/card]` tags not left in output
-- [x] Double newlines don't create new cards
-- [ ] Preview renders markdown as HTML (needs backend fix)
-- [ ] Headings show as `