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

fix: Blank page error and reorganize notification cards

Browse Source 
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
2025-11-19 17:10:48 +07:00
parent 29a7b55fda
commit 766f2353e0
2 changed files with 147 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,139 +10,161 @@ export default function NotificationsSettings() {
return ( return (
<SettingsLayout <SettingsLayout
title={__('Notifications')} title={__('Notifications')}
description={__('Manage staff and customer notifications')} description={__('Manage notification recipients and delivery channels')}
action={<div />} // Empty action to trigger contextual header action={<div />} // Empty action to trigger contextual header
> >
<div className="grid gap-6 md:grid-cols-2"> <div className="space-y-8">
{/* Staff Notifications */} {/* Recipients Section */}
<Card className="hover:shadow-md transition-shadow"> <div>
<CardHeader> <div className="mb-4">
<div className="flex items-center gap-3"> <h2 className="text-lg font-semibold">{__('Recipients')}</h2>
<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">
<p className="text-sm text-muted-foreground"> <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> </p>
<div className="flex items-center justify-between pt-2"> </div>
<div className="text-sm text-muted-foreground"> <div className="grid gap-6 md:grid-cols-2">
{__('Orders, Products, Customers')} {/* Staff Notifications */}
</div> <Card className="hover:shadow-md transition-shadow">
<Link to="/settings/notifications/staff"> <CardHeader>
<Button variant="outline" size="sm"> <div className="flex items-center gap-3">
{__('Configure')} <div className="p-2 bg-primary/10 rounded-lg">
<ChevronRight className="ml-2 h-4 w-4" /> <Bell className="h-6 w-6 text-primary" />
</Button> </div>
</Link> <div>
</div> <CardTitle>{__('Staff')}</CardTitle>
</CardContent> <CardDescription>
</Card> {__('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 */} {/* Customer Notifications */}
<Card className="hover:shadow-md transition-shadow"> <Card className="hover:shadow-md transition-shadow">
<CardHeader> <CardHeader>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/10 rounded-lg"> <div className="p-2 bg-blue-500/10 rounded-lg">
<Users className="h-6 w-6 text-blue-500" /> <Users className="h-6 w-6 text-blue-500" />
</div> </div>
<div> <div>
<CardTitle>{__('Customer Notifications')}</CardTitle> <CardTitle>{__('Customer')}</CardTitle>
<CardDescription> <CardDescription>
{__('Transactional emails and updates for customers')} {__('Transactional emails and updates for customers')}
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')} {__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
</p> </p>
<div className="flex items-center justify-between pt-2"> <div className="flex items-center justify-between pt-2">
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
{__('Orders, Shipping, Account')} {__('Orders, Shipping, Account')}
</div> </div>
<Link to="/settings/notifications/customer"> <Link to="/settings/notifications/customer">
<Button variant="outline" size="sm"> <Button variant="outline" size="sm">
{__('Configure')} {__('Configure')}
<ChevronRight className="ml-2 h-4 w-4" /> <ChevronRight className="ml-2 h-4 w-4" />
</Button> </Button>
</Link> </Link>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div>
{/* Channel Configuration */} {/* Channels Section */}
<Card className="hover:shadow-md transition-shadow"> <div>
<CardHeader> <div className="mb-4">
<div className="flex items-center gap-3"> <h2 className="text-lg font-semibold">{__('Channels')}</h2>
<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"> <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> </p>
<div className="flex items-center justify-between pt-2"> </div>
<div className="text-sm text-muted-foreground"> <div className="grid gap-6 md:grid-cols-2">
{__('Email, Push, WhatsApp, Telegram')} {/* Channel Configuration */}
</div> <Card className="hover:shadow-md transition-shadow">
<Link to="/settings/notifications/channels"> <CardHeader>
<Button variant="outline" size="sm"> <div className="flex items-center gap-3">
{__('Configure')} <div className="p-2 bg-green-500/10 rounded-lg">
<ChevronRight className="ml-2 h-4 w-4" /> <Settings className="h-6 w-6 text-green-500" />
</Button> </div>
</Link> <div>
</div> <CardTitle>{__('Channel Configuration')}</CardTitle>
</CardContent> <CardDescription>
</Card> {__('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 */} {/* Activity Log */}
<Card className="hover:shadow-md transition-shadow"> <Card className="hover:shadow-md transition-shadow">
<CardHeader> <CardHeader>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-purple-500/10 rounded-lg"> <div className="p-2 bg-purple-500/10 rounded-lg">
<Activity className="h-6 w-6 text-purple-500" /> <Activity className="h-6 w-6 text-purple-500" />
</div> </div>
<div> <div>
<CardTitle>{__('Activity Log')}</CardTitle> <CardTitle>{__('Activity Log')}</CardTitle>
<CardDescription> <CardDescription>
{__('View notification history and activities')} {__('View notification history and activities')}
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{__('Track all notification activities, view delivery status, and monitor system events.')} {__('Track all notification activities, view delivery status, and monitor system events.')}
</p> </p>
<div className="flex items-center justify-between pt-2"> <div className="flex items-center justify-between pt-2">
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
{__('Coming soon')} {__('Coming soon')}
</div> </div>
<Button variant="outline" size="sm" disabled> <Button variant="outline" size="sm" disabled>
{__('View Log')} {__('View Log')}
<ChevronRight className="ml-2 h-4 w-4" /> <ChevronRight className="ml-2 h-4 w-4" />
</Button> </Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div>
</div> </div>
</SettingsLayout> </SettingsLayout>
); );

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

@@ -318,7 +318,7 @@ export default function EditTemplate() {
}); });
// Highlight variables that don't have sample data // Highlight variables that don't have sample data
Object.keys(variables).forEach(key => { availableVariables.forEach(key => {
if (!storeVariables[key] && !sampleData[key]) { if (!storeVariables[key] && !sampleData[key]) {
const sampleValue = `<span style="background: #fef3c7; padding: 2px 4px; border-radius: 2px;">[${key}]</span>`; const sampleValue = `<span style="background: #fef3c7; padding: 2px 4px; border-radius: 2px;">[${key}]</span>`;
previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue); previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue);