Commit Graph

2 Commits

Author SHA1 Message Date
dwindown
1225d7b0ff fix: Email rendering - newlines, hero text color, and card borders
🐛 Three Critical Email Issues Fixed:

1. Newlines Not Working
    "Order Number: #359 Order Total: Rp129.000" on same line
    Fixed by adding <br> for line continuations in paragraphs

   Key change in MarkdownParser.php:
   - Accumulate paragraph content with <br> between lines
   - Match TypeScript behavior exactly
   - Protect variables from markdown parsing

   Before:
   $paragraph_content = $trimmed;

   After:
   if ($paragraph_content) {
       $paragraph_content .= '<br>' . $trimmed;
   } else {
       $paragraph_content = $trimmed;
   }

2. Hero Card Text Color
    Heading black instead of white in Gmail
    Add inline color styles to all headings/paragraphs

   Problem: Gmail doesn't inherit color from parent
   Solution: Add style="color: white;" to each element

   $content = preg_replace(
       '/<(h[1-6]|p)([^>]*)>/',
       '<$1$2 style="color: ' . $hero_text_color . ';">',
       $content
   );

3. Blue Border on Cards
    Unwanted blue border in Gmail (screenshot 2)
    Removed borders from .card-info, .card-warning, .card-success

   Problem: CSS template had borders
   Solution: Removed border declarations

   Before:
   .card-info { border: 1px solid #0071e3; }

   After:
   .card-info { background-color: #f0f7ff; }

�� Additional Improvements:
- Variable protection during markdown parsing
- Don't match bold/italic across newlines
- Proper list handling
- Block-level tag detection
- Paragraph accumulation with line breaks

🎯 Result:
-  Proper line breaks in paragraphs
-  White text in hero cards (Gmail compatible)
-  No unwanted borders
-  Variables preserved during parsing
-  Professional email appearance

Test: Create order, check email - should now show:
- Order Number: #359
- Order Total: Rp129.000
- Estimated Delivery: 3-5 business days
(Each on separate line with proper spacing)
2025-11-18 21:46:06 +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