501 lines
18 KiB
TypeScript
501 lines
18 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { api } from '@/lib/api';
|
|
import { SettingsLayout } from '../components/SettingsLayout';
|
|
import { SettingsCard } from '../components/SettingsCard';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { __ } from '@/lib/i18n';
|
|
import { ArrowLeft, RefreshCw, Upload, Plus, Trash2, Facebook, Twitter, Instagram, Linkedin, Youtube, Globe, MessageCircle, Music, Send, AtSign } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
import { openWPMediaLogo } from '@/lib/wp-media';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
|
|
interface SocialLink {
|
|
platform: string;
|
|
url: string;
|
|
}
|
|
|
|
interface EmailSettings {
|
|
primary_color: string;
|
|
secondary_color: string;
|
|
hero_gradient_start: string;
|
|
hero_gradient_end: string;
|
|
hero_text_color: string;
|
|
button_text_color: string;
|
|
body_bg_color: string;
|
|
social_icon_color: string;
|
|
logo_url: string;
|
|
header_text: string;
|
|
footer_text: string;
|
|
social_links: SocialLink[];
|
|
}
|
|
|
|
export default function EmailCustomization() {
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
|
|
// Fetch email settings
|
|
const { data: settings, isLoading } = useQuery({
|
|
queryKey: ['email-settings'],
|
|
queryFn: () => api.get('/notifications/email-settings'),
|
|
placeholderData: {
|
|
primary_color: '#7f54b3',
|
|
secondary_color: '#7f54b3',
|
|
hero_gradient_start: '#667eea',
|
|
hero_gradient_end: '#764ba2',
|
|
hero_text_color: '#ffffff',
|
|
button_text_color: '#ffffff',
|
|
body_bg_color: '#f8f8f8',
|
|
social_icon_color: 'white',
|
|
logo_url: '',
|
|
header_text: '',
|
|
footer_text: '',
|
|
social_links: [],
|
|
},
|
|
});
|
|
|
|
const [formData, setFormData] = useState<EmailSettings>(settings || {
|
|
primary_color: '#7f54b3',
|
|
secondary_color: '#7f54b3',
|
|
hero_gradient_start: '#667eea',
|
|
hero_gradient_end: '#764ba2',
|
|
hero_text_color: '#ffffff',
|
|
button_text_color: '#ffffff',
|
|
body_bg_color: '#f8f8f8',
|
|
social_icon_color: 'white',
|
|
logo_url: '',
|
|
header_text: '',
|
|
footer_text: '',
|
|
social_links: [],
|
|
});
|
|
|
|
// Update form when settings load
|
|
React.useEffect(() => {
|
|
if (settings) {
|
|
setFormData(settings);
|
|
}
|
|
}, [settings]);
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: async () => {
|
|
return api.post('/notifications/email-settings', formData);
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['email-settings'] });
|
|
toast.success(__('Email settings saved successfully'));
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error.message || __('Failed to save email settings'));
|
|
},
|
|
});
|
|
|
|
const resetMutation = useMutation({
|
|
mutationFn: async () => {
|
|
return api.del('/notifications/email-settings');
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['email-settings'] });
|
|
toast.success(__('Email settings reset to defaults'));
|
|
},
|
|
onError: (error: any) => {
|
|
toast.error(error.message || __('Failed to reset email settings'));
|
|
},
|
|
});
|
|
|
|
const handleSave = async () => {
|
|
return new Promise<void>((resolve, reject) => {
|
|
saveMutation.mutate(undefined, {
|
|
onSuccess: () => resolve(),
|
|
onError: () => reject(),
|
|
});
|
|
});
|
|
};
|
|
|
|
const handleReset = () => {
|
|
if (!confirm(__('Are you sure you want to reset all email customization to defaults?'))) return;
|
|
resetMutation.mutate();
|
|
};
|
|
|
|
const handleChange = (field: keyof EmailSettings, value: string) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleLogoSelect = () => {
|
|
openWPMediaLogo((media) => {
|
|
if (media && media.url) {
|
|
handleChange('logo_url', media.url);
|
|
}
|
|
});
|
|
};
|
|
|
|
const addSocialLink = () => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
social_links: [...prev.social_links, { platform: 'facebook', url: '' }],
|
|
}));
|
|
};
|
|
|
|
const removeSocialLink = (index: number) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
social_links: prev.social_links.filter((_, i) => i !== index),
|
|
}));
|
|
};
|
|
|
|
const updateSocialLink = (index: number, field: 'platform' | 'url', value: string) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
social_links: prev.social_links.map((link, i) =>
|
|
i === index ? { ...link, [field]: value } : link
|
|
),
|
|
}));
|
|
};
|
|
|
|
const getSocialIcon = (platform: string) => {
|
|
const icons: Record<string, any> = {
|
|
facebook: Facebook,
|
|
x: AtSign,
|
|
instagram: Instagram,
|
|
linkedin: Linkedin,
|
|
youtube: Youtube,
|
|
discord: MessageCircle,
|
|
spotify: Music,
|
|
telegram: Send,
|
|
whatsapp: MessageCircle,
|
|
threads: AtSign,
|
|
website: Globe,
|
|
};
|
|
const Icon = icons[platform] || Globe;
|
|
return <Icon className="h-4 w-4" />;
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Email Customization')}
|
|
description={__('Loading...')}
|
|
>
|
|
<div className="flex items-center justify-center py-12">
|
|
<RefreshCw className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
</SettingsLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SettingsLayout
|
|
title={__('Email Customization')}
|
|
description={__('Customize the appearance and branding of all email templates')}
|
|
onSave={handleSave}
|
|
saveLabel={__('Save Settings')}
|
|
isLoading={saveMutation.isPending}
|
|
action={
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => navigate('/settings/notifications')}
|
|
className="gap-2"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
<span className="hidden sm:inline">{__('Back')}</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={handleReset}
|
|
disabled={resetMutation.isPending}
|
|
>
|
|
{resetMutation.isPending ? (
|
|
<RefreshCw className="h-4 w-4 animate-spin" />
|
|
) : (
|
|
__('Reset to Defaults')
|
|
)}
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="space-y-6">
|
|
{/* Unified Colors Notice */}
|
|
<SettingsCard
|
|
title={__('Brand Colors')}
|
|
description={__('Colors for buttons, gradients, and accents in emails')}
|
|
>
|
|
<div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<p className="text-sm text-blue-900 dark:text-blue-100">
|
|
<strong>{__('Colors are now unified!')}</strong>{' '}
|
|
{__('Email colors (buttons, gradients) now use the same colors as your storefront for consistent branding.')}
|
|
</p>
|
|
<p className="text-sm text-blue-900 dark:text-blue-100 mt-2">
|
|
{__('To change colors, go to')}{' '}
|
|
<a href="#/appearance/general" className="font-medium underline hover:no-underline">
|
|
{__('Appearance → General → Colors')}
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</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 */}
|
|
<SettingsCard
|
|
title={__('Logo & Branding')}
|
|
description={__('Add your logo and custom header/footer text')}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="logo_url">{__('Logo URL')}</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="logo_url"
|
|
type="url"
|
|
value={formData.logo_url}
|
|
onChange={(e) => handleChange('logo_url', e.target.value)}
|
|
placeholder="https://example.com/logo.png"
|
|
className="flex-1"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleLogoSelect}
|
|
className="gap-2"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
{__('Select')}
|
|
</Button>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{__('Full URL to your logo image (recommended: 200x60px)')}
|
|
</p>
|
|
{formData.logo_url && (
|
|
<div className="mt-2 p-4 border rounded-lg bg-muted/30">
|
|
<img
|
|
src={formData.logo_url}
|
|
alt="Logo preview"
|
|
className="max-h-16 object-contain"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="header_text">{__('Header Text')}</Label>
|
|
<Input
|
|
id="header_text"
|
|
type="text"
|
|
value={formData.header_text}
|
|
onChange={(e) => handleChange('header_text', e.target.value)}
|
|
placeholder={__('Your Store Name')}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
{__('Text shown in email header (leave empty to use store name)')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="footer_text">{__('Footer Text')}</Label>
|
|
<Input
|
|
id="footer_text"
|
|
type="text"
|
|
value={formData.footer_text}
|
|
onChange={(e) => handleChange('footer_text', e.target.value)}
|
|
placeholder={__('© {current_year} Your Store. All rights reserved.')}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
{__('Text shown in email footer. Use {current_year} for dynamic year.')}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Social Links */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label>{__('Social Links')}</Label>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={addSocialLink}
|
|
className="gap-2"
|
|
>
|
|
<Plus className="h-4 w-4" />
|
|
{__('Add Social Link')}
|
|
</Button>
|
|
</div>
|
|
|
|
{formData.social_links.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">
|
|
{__('No social links added. Click "Add Social Link" to get started.')}
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{formData.social_links.map((link, index) => (
|
|
<div key={index} className="flex gap-2 items-start p-3 border rounded-lg">
|
|
<div className="flex-1 grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Select
|
|
value={link.platform}
|
|
onValueChange={(value) => updateSocialLink(index, 'platform', value)}
|
|
>
|
|
<SelectTrigger className="h-9">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="facebook">
|
|
<div className="flex items-center gap-2">
|
|
<Facebook className="h-4 w-4" />
|
|
Facebook
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="x">
|
|
<div className="flex items-center gap-2">
|
|
<AtSign className="h-4 w-4" />
|
|
X (Twitter)
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="instagram">
|
|
<div className="flex items-center gap-2">
|
|
<Instagram className="h-4 w-4" />
|
|
Instagram
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="linkedin">
|
|
<div className="flex items-center gap-2">
|
|
<Linkedin className="h-4 w-4" />
|
|
LinkedIn
|
|
</div>
|
|
</SelectItem>
|
|
<SelectItem value="youtube">
|
|
<div className="flex items-center gap-2">
|
|
<Youtube className="h-4 w-4" />
|
|
YouTube
|
|
</div>
|
|
</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">
|
|
<div className="flex items-center gap-2">
|
|
<Globe className="h-4 w-4" />
|
|
Website
|
|
</div>
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<Input
|
|
type="url"
|
|
value={link.url}
|
|
onChange={(e) => updateSocialLink(index, 'url', e.target.value)}
|
|
placeholder="https://..."
|
|
className="h-9"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => removeSocialLink(index)}
|
|
className="h-9 w-9 p-0 text-destructive hover:text-destructive"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
<p className="text-xs text-muted-foreground">
|
|
{__('Social links will appear as icons in the email footer')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SettingsCard>
|
|
|
|
{/* Info Box */}
|
|
<div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<p className="text-sm text-blue-900 dark:text-blue-100">
|
|
<strong>{__('Note:')}</strong> {__('These settings will apply to all email templates. Individual templates can still override specific content, but colors and branding will be consistent across all emails.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SettingsLayout>
|
|
);
|
|
}
|