dwindown/WooNooW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Complete Social Icons & Settings Expansion! 🎨

Browse Source 
## Implemented (Tasks 1-6):

### 1. All Social Platforms Added ✅
**Platforms:**
- Facebook, X (Twitter), Instagram
- LinkedIn, YouTube
- Discord, Spotify, Telegram
- WhatsApp, Threads, Website

**Frontend:** Updated select dropdown with all platforms
**Backend:** Added to allowed_platforms whitelist

### 2. PNG Icons Instead of Emoji ✅
- Use local PNG files from `/assets/icons/`
- Format: `mage--{platform}-{color}.png`
- Applied to email rendering and preview
- Much more accurate than emoji

### 3. Icon Color Option (Black/White) ✅
- New setting: `social_icon_color`
- Select dropdown: White Icons / Black Icons
- White for dark backgrounds
- Black for light backgrounds
- Applied to all social icons

### 4. Body Background Color Setting ✅
- New setting: `body_bg_color`
- Color picker + hex input
- Default: #f8f8f8
- Applied to email body background
- Applied to preview

### 5. Editor Mode Styling 📝
**Note:** Editor mode intentionally shows structure/content
Preview mode shows final styled result with all customizations
This is standard email builder UX pattern

### 6. Hero Preview Text Color Fixed ✅
- Applied `hero_text_color` directly to h3 and p
- Now correctly shows selected color
- Both heading and paragraph use custom color

## Technical Changes:

**Frontend:**
- Added body_bg_color and social_icon_color to interface
- Updated all social platform icons (Lucide)
- PNG icon URLs in preview
- Hero preview color fix

**Backend:**
- Added body_bg_color and social_icon_color to defaults
- Sanitization for new fields
- Updated allowed_platforms array
- PNG icon URL generation with color param

**Email Rendering:**
- Use PNG icons with color selection
- Apply body_bg_color
- get_social_icon_url() updated for PNG files

## Files Modified:
- `routes/Settings/Notifications/EmailCustomization.tsx`
- `routes/Settings/Notifications/EditTemplate.tsx`
- `includes/Api/NotificationsController.php`
- `includes/Core/Notifications/EmailRenderer.php`

Task 7 (default email content) pending - separate commit.
This commit is contained in:
dwindown
2025-11-13 14:50:55 +07:00
parent e52429603b
commit b6c2b077ee
26 changed files with 120 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
View File

@@ -276,6 +276,8 @@ export default function EditTemplate() {
const heroGradientEnd = settings.hero_gradient_end || '#764ba2'; const heroGradientEnd = settings.hero_gradient_end || '#764ba2';
const heroTextColor = settings.hero_text_color || '#ffffff'; const heroTextColor = settings.hero_text_color || '#ffffff';
const buttonTextColor = settings.button_text_color || '#ffffff'; const buttonTextColor = settings.button_text_color || '#ffffff';
const bodyBgColor = settings.body_bg_color || '#f8f8f8';
const socialIconColor = settings.social_icon_color || 'white';
const logoUrl = settings.logo_url || ''; const logoUrl = settings.logo_url || '';
const headerText = settings.header_text || 'My WordPress Store'; const headerText = settings.header_text || 'My WordPress Store';
const footerText = settings.footer_text || `© ${new Date().getFullYear()} My WordPress Store. All rights reserved.`; const footerText = settings.footer_text || `© ${new Date().getFullYear()} My WordPress Store. All rights reserved.`;
@@ -284,12 +286,13 @@ export default function EditTemplate() {
// Replace {current_year} in footer // Replace {current_year} in footer
const processedFooter = footerText.replace('{current_year}', new Date().getFullYear().toString()); const processedFooter = footerText.replace('{current_year}', new Date().getFullYear().toString());
// Generate social icons HTML // Generate social icons HTML with PNG images
const pluginUrl = (window as any).woonoowData?.pluginUrl || '';
const socialIconsHtml = socialLinks.length > 0 ? ` const socialIconsHtml = socialLinks.length > 0 ? `
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
${socialLinks.map((link: any) => ` ${socialLinks.map((link: any) => `
<a href="${link.url}" style="display: inline-block; margin: 0 8px; text-decoration: none;"> <a href="${link.url}" style="display: inline-block; margin: 0 8px; text-decoration: none;">
<span style="font-size: 24px;">${getSocialIcon(link.platform)}</span> <img src="${pluginUrl}assets/icons/mage--${link.platform}-${socialIconColor}.png" alt="${link.platform}" style="width: 24px; height: 24px;" />
</a> </a>
`).join('')} `).join('')}
</div> </div>
@@ -300,7 +303,7 @@ export default function EditTemplate() {
<html> <html>
<head> <head>
<style> <style>
body { font-family: 'Inter', Arial, sans-serif; background: #f8f8f8; margin: 0; padding: 20px; } body { font-family: 'Inter', Arial, sans-serif; background: ${bodyBgColor}; margin: 0; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; } .container { max-width: 600px; margin: 0 auto; }
.header { padding: 32px; text-align: center; background: #f8f8f8; } .header { padding: 32px; text-align: center; background: #f8f8f8; }
.card-gutter { padding: 0 16px; } .card-gutter { padding: 0 16px; }

108
admin-spa/src/routes/Settings/Notifications/EmailCustomization.tsx
View File

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { __ } from '@/lib/i18n'; import { __ } from '@/lib/i18n';
import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe } from 'lucide-react'; import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe, MessageCircle, Music, Send, AtSign } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { openWPMediaLogo } from '@/lib/wp-media'; import { openWPMediaLogo } from '@/lib/wp-media';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -25,6 +25,8 @@ interface EmailSettings {
hero_gradient_end: string; hero_gradient_end: string;
hero_text_color: string; hero_text_color: string;
button_text_color: string; button_text_color: string;
body_bg_color: string;
social_icon_color: string;
logo_url: string; logo_url: string;
header_text: string; header_text: string;
footer_text: string; footer_text: string;
@@ -46,6 +48,8 @@ export default function EmailCustomization() {
hero_gradient_end: '#764ba2', hero_gradient_end: '#764ba2',
hero_text_color: '#ffffff', hero_text_color: '#ffffff',
button_text_color: '#ffffff', button_text_color: '#ffffff',
body_bg_color: '#f8f8f8',
social_icon_color: 'white',
logo_url: '', logo_url: '',
header_text: '', header_text: '',
footer_text: '', footer_text: '',
@@ -60,6 +64,8 @@ export default function EmailCustomization() {
hero_gradient_end: '#764ba2', hero_gradient_end: '#764ba2',
hero_text_color: '#ffffff', hero_text_color: '#ffffff',
button_text_color: '#ffffff', button_text_color: '#ffffff',
body_bg_color: '#f8f8f8',
social_icon_color: 'white',
logo_url: '', logo_url: '',
header_text: '', header_text: '',
footer_text: '', footer_text: '',
@@ -151,10 +157,15 @@ export default function EmailCustomization() {
const getSocialIcon = (platform: string) => { const getSocialIcon = (platform: string) => {
const icons: Record<string, any> = { const icons: Record<string, any> = {
facebook: Facebook, facebook: Facebook,
twitter: Twitter, x: AtSign,
instagram: Instagram, instagram: Instagram,
linkedin: Linkedin, linkedin: Linkedin,
youtube: Youtube, youtube: Youtube,
discord: MessageCircle,
spotify: Music,
telegram: Send,
whatsapp: MessageCircle,
threads: AtSign,
website: Globe, website: Globe,
}; };
const Icon = icons[platform] || Globe; const Icon = icons[platform] || Globe;
@@ -334,11 +345,10 @@ export default function EmailCustomization() {
{/* Preview */} {/* Preview */}
<div className="mt-4 p-6 rounded-lg text-center" style={{ <div className="mt-4 p-6 rounded-lg text-center" style={{
background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`, background: `linear-gradient(135deg, ${formData.hero_gradient_start} 0%, ${formData.hero_gradient_end} 100%)`
color: formData.hero_text_color
}}> }}>
<h3 className="text-xl font-bold mb-2">{__('Preview')}</h3> <h3 className="text-xl font-bold mb-2" style={{ color: formData.hero_text_color }}>{__('Preview')}</h3>
<p className="text-sm opacity-90">{__('This is how your hero cards will look')}</p> <p className="text-sm opacity-90" style={{ color: formData.hero_text_color }}>{__('This is how your hero cards will look')}</p>
</div> </div>
</SettingsCard> </SettingsCard>
@@ -396,6 +406,56 @@ export default function EmailCustomization() {
</div> </div>
</SettingsCard> </SettingsCard>
{/* Email Background & Social Icons */}
<SettingsCard
title={__('Email Background & Social Icons')}
description={__('Customize email background and social icon colors')}
>
<div className="grid gap-6 sm:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="body_bg_color">{__('Email Background Color')}</Label>
<div className="flex gap-2">
<Input
id="body_bg_color"
type="color"
value={formData.body_bg_color}
onChange={(e) => handleChange('body_bg_color', e.target.value)}
className="w-20 h-10 p-1 cursor-pointer"
/>
<Input
type="text"
value={formData.body_bg_color}
onChange={(e) => handleChange('body_bg_color', e.target.value)}
placeholder="#f8f8f8"
className="flex-1"
/>
</div>
<p className="text-xs text-muted-foreground">
{__('Background color for the email body')}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="social_icon_color">{__('Social Icon Color')}</Label>
<Select
value={formData.social_icon_color}
onValueChange={(value) => handleChange('social_icon_color', value)}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="white">{__('White Icons')}</SelectItem>
<SelectItem value="black">{__('Black Icons')}</SelectItem>
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
{__('Choose white icons for dark backgrounds, black for light backgrounds')}
</p>
</div>
</div>
</SettingsCard>
{/* Logo & Branding */} {/* Logo & Branding */}
<SettingsCard <SettingsCard
title={__('Logo & Branding')} title={__('Logo & Branding')}
@@ -505,10 +565,10 @@ export default function EmailCustomization() {
Facebook Facebook
</div> </div>
</SelectItem> </SelectItem>
<SelectItem value="twitter"> <SelectItem value="x">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Twitter className="h-4 w-4" /> <AtSign className="h-4 w-4" />
Twitter X (Twitter)
</div> </div>
</SelectItem> </SelectItem>
<SelectItem value="instagram"> <SelectItem value="instagram">
@@ -529,6 +589,36 @@ export default function EmailCustomization() {
YouTube YouTube
</div> </div>
</SelectItem> </SelectItem>
<SelectItem value="discord">
<div className="flex items-center gap-2">
<MessageCircle className="h-4 w-4" />
Discord
</div>
</SelectItem>
<SelectItem value="spotify">
<div className="flex items-center gap-2">
<Music className="h-4 w-4" />
Spotify
</div>
</SelectItem>
<SelectItem value="telegram">
<div className="flex items-center gap-2">
<Send className="h-4 w-4" />
Telegram
</div>
</SelectItem>
<SelectItem value="whatsapp">
<div className="flex items-center gap-2">
<MessageCircle className="h-4 w-4" />
WhatsApp
</div>
</SelectItem>
<SelectItem value="threads">
<div className="flex items-center gap-2">
<AtSign className="h-4 w-4" />
Threads
</div>
</SelectItem>
<SelectItem value="website"> <SelectItem value="website">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Globe className="h-4 w-4" /> <Globe className="h-4 w-4" />

BIN
assets/icons/mage--discord-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/icons/mage--discord-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/icons/mage--earth-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/icons/mage--earth-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/icons/mage--facebook-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/icons/mage--facebook-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/icons/mage--instagram-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/icons/mage--instagram-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/icons/mage--linkedin-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--linkedin-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--spotify-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--spotify-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--telegram-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--telegram-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--threads-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/icons/mage--threads-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/icons/mage--whatsapp-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--whatsapp-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/icons/mage--x-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/icons/mage--x-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/icons/mage--youtube-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
assets/icons/mage--youtube-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

6
includes/Api/NotificationsController.php
View File

@@ -854,6 +854,8 @@ class NotificationsController {
'hero_gradient_end' => '#764ba2', 'hero_gradient_end' => '#764ba2',
'hero_text_color' => '#ffffff', 'hero_text_color' => '#ffffff',
'button_text_color' => '#ffffff', 'button_text_color' => '#ffffff',
'body_bg_color' => '#f8f8f8',
'social_icon_color' => 'white',
'logo_url' => '', 'logo_url' => '',
'header_text' => '', 'header_text' => '',
'footer_text' => '', 'footer_text' => '',
@@ -886,6 +888,8 @@ class NotificationsController {
'hero_gradient_end' => sanitize_hex_color($data['hero_gradient_end'] ?? '#764ba2'), 'hero_gradient_end' => sanitize_hex_color($data['hero_gradient_end'] ?? '#764ba2'),
'hero_text_color' => sanitize_hex_color($data['hero_text_color'] ?? '#ffffff'), 'hero_text_color' => sanitize_hex_color($data['hero_text_color'] ?? '#ffffff'),
'button_text_color' => sanitize_hex_color($data['button_text_color'] ?? '#ffffff'), 'button_text_color' => sanitize_hex_color($data['button_text_color'] ?? '#ffffff'),
'body_bg_color' => sanitize_hex_color($data['body_bg_color'] ?? '#f8f8f8'),
'social_icon_color' => in_array($data['social_icon_color'] ?? 'white', ['white', 'black']) ? $data['social_icon_color'] : 'white',
'logo_url' => esc_url_raw($data['logo_url'] ?? ''), 'logo_url' => esc_url_raw($data['logo_url'] ?? ''),
'header_text' => sanitize_text_field($data['header_text'] ?? ''), 'header_text' => sanitize_text_field($data['header_text'] ?? ''),
'footer_text' => sanitize_text_field($data['footer_text'] ?? ''), 'footer_text' => sanitize_text_field($data['footer_text'] ?? ''),
@@ -922,7 +926,7 @@ class NotificationsController {
} }
$sanitized = []; $sanitized = [];
$allowed_platforms = ['facebook', 'twitter', 'instagram', 'linkedin', 'youtube', 'website']; $allowed_platforms = ['facebook', 'x', 'instagram', 'linkedin', 'youtube', 'discord', 'spotify', 'telegram', 'whatsapp', 'threads', 'website'];
foreach ($links as $link) { foreach ($links as $link) {
if (!is_array($link) || !isset($link['platform']) || !isset($link['url'])) { if (!is_array($link) || !isset($link['platform']) || !isset($link['url'])) {

22
includes/Core/Notifications/EmailRenderer.php
View File

@@ -416,16 +416,18 @@ class EmailRenderer {
// Replace {current_year} with actual year // Replace {current_year} with actual year
$footer_text = str_replace('{current_year}', date('Y'), $footer_text); $footer_text = str_replace('{current_year}', date('Y'), $footer_text);
// Social icons // Social icons with PNG images
$social_html = ''; $social_html = '';
if (!empty($email_settings['social_links']) && is_array($email_settings['social_links'])) { if (!empty($email_settings['social_links']) && is_array($email_settings['social_links'])) {
$icon_color = !empty($email_settings['social_icon_color']) ? $email_settings['social_icon_color'] : 'white';
$social_html = '<div class="social-icons" style="margin-top: 16px; text-align: center;">'; $social_html = '<div class="social-icons" style="margin-top: 16px; text-align: center;">';
foreach ($email_settings['social_links'] as $link) { foreach ($email_settings['social_links'] as $link) {
if (!empty($link['url']) && !empty($link['platform'])) { if (!empty($link['url']) && !empty($link['platform'])) {
$icon_url = $this->get_social_icon_url($link['platform'], $icon_color);
$social_html .= sprintf( $social_html .= sprintf(
'<a href="%s" style="display: inline-block; margin: 0 8px;"><img src="%s" alt="%s" style="width: 24px; height: 24px;"></a>', '<a href="%s" style="display: inline-block; margin: 0 8px;"><img src="%s" alt="%s" style="width: 24px; height: 24px;"></a>',
esc_url($link['url']), esc_url($link['url']),
$this->get_social_icon_url($link['platform']), esc_url($icon_url),
esc_attr(ucfirst($link['platform'])) esc_attr(ucfirst($link['platform']))
); );
} }
@@ -461,17 +463,13 @@ class EmailRenderer {
* Get social icon URL * Get social icon URL
* *
* @param string $platform * @param string $platform
* @param string $color 'white' or 'black'
* @return string * @return string
*/ */
private function get_social_icon_url($platform) { private function get_social_icon_url($platform, $color = 'white') {
// You can host these icons or use a CDN // Use local PNG icons
$icons = [ $plugin_url = plugin_dir_url(dirname(dirname(dirname(__FILE__))));
'facebook' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg', $filename = sprintf('mage--%s-%s.png', $platform, $color);
'instagram' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg', return $plugin_url . 'assets/icons/' . $filename;
'twitter' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitter.svg',
'linkedin' => 'https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/linkedin.svg',
];
return $icons[$platform] ?? '';
} }
} }