feat: Fix preview with realistic sample data
## ✅ SUCCESS! Template Editor Working!
### What Works Now:
1. ✅ **Variables** - Dropdown populated
2. ✅ **Default values** - Form filled with template data
3. ✅ **Preview** - Shows realistic email
### Preview Improvements:
**Before:**
- Button showed: `[order_url]">View Order Details`
- Variables showed as raw text: `{customer_name}`
- Looked broken and confusing
**After:**
- Button shows: `View Order Details` (with # link)
- Variables replaced with sample data:
- `{customer_name}` → "John Doe"
- `{order_number}` → "12345"
- `{order_total}` → "$99.99"
- `{order_url}` → "#preview-order-details"
- etc.
**Sample Data Added:**
```tsx
const sampleData = {
customer_name: "John Doe",
customer_email: "john@example.com",
customer_phone: "+1 234 567 8900",
order_number: "12345",
order_total: "$99.99",
order_status: "Processing",
order_date: new Date().toLocaleDateString(),
order_url: "#preview-order-details",
order_items: "• Product 1 x 2<br>• Product 2 x 1",
payment_method: "Credit Card",
tracking_number: "TRACK123456",
// ... and more
};
```
### Preview Now Shows:
- ✅ Realistic customer names
- ✅ Sample order numbers
- ✅ Proper button links
- ✅ Formatted order items
- ✅ Professional appearance
- ✅ Store admins can see exactly how email will look
### Next Steps:
1. Card insert buttons (make it easy to add cards)
2. Custom [card] rendering in TipTap (optional)
3. Email appearance settings (customize colors/logo)
The template editor is now PRODUCTION READY! 🚀
efd6fa36c9