fix: Match Customer Channels to Staff layout and fix event filtering
## 🐛 Bug Fixes ### Customer/Channels.tsx - ✅ Matched layout to Staff Channels - ✅ Added "Extend with Addons" section - ✅ WhatsApp, Telegram, SMS addon cards - ✅ Consistent UI with Staff page - ✅ Removed confusing SMS "Coming Soon" inline card ### NotificationsController.php - ✅ Fixed `get_staff_events()` filtering logic - ✅ Fixed `get_customer_events()` filtering logic - ✅ Now uses `recipient_type` field instead of `reset()` on channels - ✅ Customer events will now show correctly ### Issues Fixed 1. ❌ Customer Channels inconsistent with Staff → ✅ Now matches 2. ❌ Customer Events showing "No Events" → ✅ Now filters correctly --- **Result:** Both Staff and Customer pages now have consistent UI and working event filtering! 🎉
This commit is contained in:
dwindown
@@ -5,7 +5,7 @@ import { SettingsCard } from '../../components/SettingsCard';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { RefreshCw, Mail, Bell, MessageSquare, Info } from 'lucide-react';
|
||||
import { RefreshCw, Mail, Bell, MessageSquare, Info, MessageCircle, Send, ExternalLink } from 'lucide-react';
|
||||
import { __ } from '@/lib/i18n';
|
||||
|
||||
interface NotificationChannel {
|
||||
@@ -58,77 +58,114 @@ export default function CustomerChannels() {
|
||||
|
||||
<SettingsCard
|
||||
title={__('Channels')}
|
||||
description={__('Available notification channels for customers')}
|
||||
description={__('Manage notification delivery channels')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
{/* Email Channel */}
|
||||
<div className="flex items-start gap-4 p-4 border rounded-lg">
|
||||
<div className="p-2 bg-primary/10 rounded-lg text-primary">
|
||||
<Mail className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium">{__('Email')}</h4>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{__('Built-in')}
|
||||
</Badge>
|
||||
<Badge variant="default" className="text-xs bg-green-600">
|
||||
{__('Active')}
|
||||
</Badge>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 rounded-lg shrink-0 bg-green-500/20 text-green-600">
|
||||
<Mail className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{__('Transactional emails sent to customers for order updates, account activities, and more.')}
|
||||
</p>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{__('Powered by WordPress email system')}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-medium">{__('Email')}</h3>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{__('Built-in')}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Email notifications powered by WooCommerce. Configure templates and SMTP settings.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
|
||||
<div className="flex items-center justify-between sm:justify-start gap-2 p-2 sm:p-0 rounded-lg sm:rounded-none border sm:border-0">
|
||||
<span className="text-sm text-muted-foreground">{__('Enabled')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Push Notifications */}
|
||||
<div className="flex items-start gap-4 p-4 border rounded-lg bg-muted/30">
|
||||
<div className="p-2 bg-blue-500/10 rounded-lg text-blue-500">
|
||||
<Bell className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium">{__('Push Notifications')}</h4>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{__('Built-in')}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{__('Requires opt-in')}
|
||||
</Badge>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 rounded-lg shrink-0 bg-green-500/20 text-green-600">
|
||||
<Bell className="h-6 w-6" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{__('Browser push notifications for real-time order updates. Customers must enable push notifications in their account.')}
|
||||
</p>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{__('Customer-controlled from their account preferences')}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="font-medium">{__('Push Notifications')}</h3>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{__('Built-in')}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Browser push notifications for real-time updates. Perfect for PWA.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
|
||||
<div className="flex items-center justify-between sm:justify-start gap-2 p-2 sm:p-0 rounded-lg sm:rounded-none border sm:border-0">
|
||||
<span className="text-sm text-muted-foreground">{__('Enabled')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
|
||||
{/* SMS Channel (Coming Soon) */}
|
||||
<div className="flex items-start gap-4 p-4 border rounded-lg bg-muted/30 opacity-60">
|
||||
<div className="p-2 bg-purple-500/10 rounded-lg text-purple-500">
|
||||
<MessageSquare className="h-6 w-6" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium">{__('SMS Notifications')}</h4>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{__('Addon')}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{__('Coming Soon')}
|
||||
</Badge>
|
||||
{/* Extend with Addons */}
|
||||
<SettingsCard
|
||||
title={__('Extend with Addons')}
|
||||
description={__('Add more notification channels to your store')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__('Install notification addons to send notifications via WhatsApp, Telegram, SMS, and more.')}
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{/* WhatsApp Addon */}
|
||||
<div className="p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<MessageCircle className="h-5 w-5 text-green-600" />
|
||||
<h4 className="font-medium">{__('WhatsApp Notifications')}</h4>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{__('Send SMS notifications for critical order updates and delivery notifications.')}
|
||||
{__('Send order updates and notifications via WhatsApp Business API')}
|
||||
</p>
|
||||
<Button variant="outline" size="sm" disabled>
|
||||
{__('Install SMS Addon')}
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
{__('View Addon')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Telegram Addon */}
|
||||
<div className="p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Send className="h-5 w-5 text-blue-600" />
|
||||
<h4 className="font-medium">{__('Telegram Notifications')}</h4>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{__('Get instant notifications in your Telegram channel or group')}
|
||||
</p>
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
{__('View Addon')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* SMS Addon */}
|
||||
<div className="p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Bell className="h-5 w-5 text-purple-600" />
|
||||
<h4 className="font-medium">{__('SMS Notifications')}</h4>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
{__('Send SMS notifications via Twilio, Nexmo, or other providers')}
|
||||
</p>
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
<ExternalLink className="h-4 w-4 mr-2" />
|
||||
{__('View Addon')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user