fix: Blank page error and reorganize notification cards
Fixed two issues:
1. Blank Page Error (ReferenceError)
- EditTemplate.tsx referenced removed 'variables' object
- Changed to use 'availableVariables' array
- Error occurred in preview generation function
2. Reorganized Notification Cards
- Added clear category sections: Recipients and Channels
- Recipients section: Staff, Customer (ready for Affiliate, Merchant)
- Channels section: Channel Configuration, Activity Log
- Better structure for future scalability
- Cleaner UI with section headers and descriptions
Structure Now:
├── Recipients
│ ├── Staff (Orders, Products, Customers)
│ └── Customer (Orders, Shipping, Account)
└── Channels
├── Channel Configuration (Email, Push, WhatsApp, Telegram)
└── Activity Log (Coming soon)
Ready to add:
- Affiliate recipient (for affiliate notifications)
- Merchant recipient (for marketplace vendors)
This commit is contained in:
dwindown
@@ -10,139 +10,161 @@ export default function NotificationsSettings() {
|
||||
return (
|
||||
<SettingsLayout
|
||||
title={__('Notifications')}
|
||||
description={__('Manage staff and customer notifications')}
|
||||
description={__('Manage notification recipients and delivery channels')}
|
||||
action={<div />} // Empty action to trigger contextual header
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Staff Notifications */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Bell className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Staff Notifications')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('Alerts for admins and staff members')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-8">
|
||||
{/* Recipients Section */}
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<h2 className="text-lg font-semibold">{__('Recipients')}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Get notified about orders, low stock, new customers, and more. Configure email and push notifications for your team.')}
|
||||
{__('Configure notifications for different user types')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Orders, Products, Customers')}
|
||||
</div>
|
||||
<Link to="/settings/notifications/staff">
|
||||
<Button variant="outline" size="sm">
|
||||
{__('Configure')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Staff Notifications */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Bell className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Staff')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('Alerts for admins and staff members')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Get notified about orders, low stock, new customers, and more. Configure email and push notifications for your team.')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Orders, Products, Customers')}
|
||||
</div>
|
||||
<Link to="/settings/notifications/staff">
|
||||
<Button variant="outline" size="sm">
|
||||
{__('Configure')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Customer Notifications */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/10 rounded-lg">
|
||||
<Users className="h-6 w-6 text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Customer Notifications')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('Transactional emails and updates for customers')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Orders, Shipping, Account')}
|
||||
</div>
|
||||
<Link to="/settings/notifications/customer">
|
||||
<Button variant="outline" size="sm">
|
||||
{__('Configure')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Customer Notifications */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500/10 rounded-lg">
|
||||
<Users className="h-6 w-6 text-blue-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Customer')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('Transactional emails and updates for customers')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Orders, Shipping, Account')}
|
||||
</div>
|
||||
<Link to="/settings/notifications/customer">
|
||||
<Button variant="outline" size="sm">
|
||||
{__('Configure')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Channel Configuration */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-500/10 rounded-lg">
|
||||
<Settings className="h-6 w-6 text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Channel Configuration')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('Configure notification channels and settings')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Channels Section */}
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<h2 className="text-lg font-semibold">{__('Channels')}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Configure email, push notifications, WhatsApp, Telegram, and other notification channels. Set templates and connection settings.')}
|
||||
{__('Configure notification delivery methods and settings')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Email, Push, WhatsApp, Telegram')}
|
||||
</div>
|
||||
<Link to="/settings/notifications/channels">
|
||||
<Button variant="outline" size="sm">
|
||||
{__('Configure')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{/* Channel Configuration */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-500/10 rounded-lg">
|
||||
<Settings className="h-6 w-6 text-green-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Channel Configuration')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('Configure notification channels and settings')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Configure email, push notifications, WhatsApp, Telegram, and other notification channels. Set templates and connection settings.')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Email, Push, WhatsApp, Telegram')}
|
||||
</div>
|
||||
<Link to="/settings/notifications/channels">
|
||||
<Button variant="outline" size="sm">
|
||||
{__('Configure')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Activity Log */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/10 rounded-lg">
|
||||
<Activity className="h-6 w-6 text-purple-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Activity Log')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('View notification history and activities')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Track all notification activities, view delivery status, and monitor system events.')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Coming soon')}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
{__('View Log')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Activity Log */}
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-purple-500/10 rounded-lg">
|
||||
<Activity className="h-6 w-6 text-purple-500" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle>{__('Activity Log')}</CardTitle>
|
||||
<CardDescription>
|
||||
{__('View notification history and activities')}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Track all notification activities, view delivery status, and monitor system events.')}
|
||||
</p>
|
||||
<div className="flex items-center justify-between pt-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{__('Coming soon')}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
{__('View Log')}
|
||||
<ChevronRight className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
|
||||
@@ -318,7 +318,7 @@ export default function EditTemplate() {
|
||||
});
|
||||
|
||||
// Highlight variables that don't have sample data
|
||||
Object.keys(variables).forEach(key => {
|
||||
availableVariables.forEach(key => {
|
||||
if (!storeVariables[key] && !sampleData[key]) {
|
||||
const sampleValue = `<span style="background: #fef3c7; padding: 2px 4px; border-radius: 2px;">[${key}]</span>`;
|
||||
previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue);
|
||||
|
||||
Reference in New Issue
Block a user