From 778afeef9afee4bc341b452d374829fe05b4e717 Mon Sep 17 00:00:00 2001 From: dwindown Date: Sat, 15 Nov 2025 21:05:57 +0700 Subject: [PATCH] feat: Restructure Channel Configuration as separate section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ New Structure: Notifications ├── Staff Notifications (toggle only) ├── Customer Notifications (toggle only) ├── Channel Configuration (new section) │ ├── Email Configuration │ │ ├── Template Settings (colors, logo, branding) │ │ └── Connection Settings (wp_mail/SMTP) │ ├── Push Configuration │ │ ├── Template Settings (icon, badge, sound) │ │ └── Connection Settings (browser-native/FCM) │ └── Future: WhatsApp, Telegram, SMS (addons) └── Activity Log (coming soon) ✅ Separation of Concerns: - Staff/Customer pages: "What to send" (enable/disable) - Channel Config: "How to send" (global settings) ✅ Changes: - Created ChannelConfiguration.tsx (main page listing all channels) - Created EmailConfiguration.tsx (template + connection tabs) - Created PushConfiguration.tsx (template + connection tabs) - Updated Staff/Customer Channels tabs to toggle-only - Removed Configure buttons from Staff/Customer pages - Added links to Channel Configuration - Updated main Notifications page with new card - Added routing for all new pages ✅ Benefits: - Clear separation: enable vs configure - Global settings apply to both staff & customer - Scalable for addon channels - No confusion about where to configure - Consistent with app patterns 🎯 Ready for: WhatsApp, Telegram, SMS addons --- admin-spa/src/App.tsx | 6 + .../src/routes/Settings/Notifications.tsx | 18 +- .../Notifications/ChannelConfiguration.tsx | 168 ++++++++++++++++++ .../Notifications/Customer/Channels.tsx | 20 ++- .../Notifications/EmailConfiguration.tsx | 53 ++++++ .../Notifications/PushConfiguration.tsx | 130 ++++++++++++++ .../Settings/Notifications/Staff/Channels.tsx | 45 ++--- 7 files changed, 399 insertions(+), 41 deletions(-) create mode 100644 admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx create mode 100644 admin-spa/src/routes/Settings/Notifications/EmailConfiguration.tsx create mode 100644 admin-spa/src/routes/Settings/Notifications/PushConfiguration.tsx diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx index da21c81..16c092c 100644 --- a/admin-spa/src/App.tsx +++ b/admin-spa/src/App.tsx @@ -203,6 +203,9 @@ import SettingsLocalPickup from '@/routes/Settings/LocalPickup'; import SettingsNotifications from '@/routes/Settings/Notifications'; import StaffNotifications from '@/routes/Settings/Notifications/Staff'; import CustomerNotifications from '@/routes/Settings/Notifications/Customer'; +import ChannelConfiguration from '@/routes/Settings/Notifications/ChannelConfiguration'; +import EmailConfiguration from '@/routes/Settings/Notifications/EmailConfiguration'; +import PushConfiguration from '@/routes/Settings/Notifications/PushConfiguration'; import EmailCustomization from '@/routes/Settings/Notifications/EmailCustomization'; import EditTemplate from '@/routes/Settings/Notifications/EditTemplate'; import SettingsDeveloper from '@/routes/Settings/Developer'; @@ -494,6 +497,9 @@ function AppRoutes() { } /> } /> } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/admin-spa/src/routes/Settings/Notifications.tsx b/admin-spa/src/routes/Settings/Notifications.tsx index 6fe8ecd..6fbc51a 100644 --- a/admin-spa/src/routes/Settings/Notifications.tsx +++ b/admin-spa/src/routes/Settings/Notifications.tsx @@ -4,7 +4,7 @@ import { SettingsLayout } from './components/SettingsLayout'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { __ } from '@/lib/i18n'; -import { Bell, Users, ChevronRight, Activity, Palette } from 'lucide-react'; +import { Bell, Users, ChevronRight, Activity, Settings } from 'lucide-react'; export default function NotificationsSettings() { return ( @@ -80,32 +80,32 @@ export default function NotificationsSettings() { - {/* Email Customization */} + {/* Channel Configuration */}
- +
- {__('Email Customization')} + {__('Channel Configuration')} - {__('Customize email appearance and branding')} + {__('Configure notification channels and settings')}

- {__('Set your brand colors, logo, and email styling. Customize header, footer, and button colors for all email templates.')} + {__('Configure email, push notifications, WhatsApp, Telegram, and other notification channels. Set templates and connection settings.')}

- {__('Colors, Logo, Styling')} + {__('Email, Push, WhatsApp, Telegram')}
- + diff --git a/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx b/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx new file mode 100644 index 0000000..95ebd8f --- /dev/null +++ b/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx @@ -0,0 +1,168 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { SettingsLayout } from '../components/SettingsLayout'; +import { SettingsCard } from '../components/SettingsCard'; +import { Button } from '@/components/ui/button'; +import { Badge } from '@/components/ui/badge'; +import { ChevronLeft, Mail, Bell, MessageCircle, Send, Settings, ChevronRight } from 'lucide-react'; +import { __ } from '@/lib/i18n'; + +interface Channel { + id: string; + name: string; + description: string; + icon: React.ReactNode; + type: 'builtin' | 'addon'; + enabled: boolean; + configPath: string; +} + +export default function ChannelConfiguration() { + const channels: Channel[] = [ + { + id: 'email', + name: __('Email'), + description: __('Email notifications powered by WordPress. Configure templates and SMTP settings.'), + icon: , + type: 'builtin', + enabled: true, + configPath: '/settings/notifications/channels/email', + }, + { + id: 'push', + name: __('Push Notifications'), + description: __('Browser push notifications for real-time updates. Perfect for PWA.'), + icon: , + type: 'builtin', + enabled: true, + configPath: '/settings/notifications/channels/push', + }, + { + id: 'whatsapp', + name: __('WhatsApp'), + description: __('Send notifications via WhatsApp Business API. Requires addon installation.'), + icon: , + type: 'addon', + enabled: false, + configPath: '/settings/notifications/channels/whatsapp', + }, + { + id: 'telegram', + name: __('Telegram'), + description: __('Send notifications via Telegram Bot API. Requires addon installation.'), + icon: , + type: 'addon', + enabled: false, + configPath: '/settings/notifications/channels/telegram', + }, + ]; + + const builtinChannels = channels.filter(c => c.type === 'builtin'); + const addonChannels = channels.filter(c => c.type === 'addon'); + + return ( + + + + } + > +
+ {/* Info Card */} + +
+

+ {__( + 'Each notification channel has its own configuration for templates and connection settings. These settings apply globally to both staff and customer notifications.' + )} +

+
+

+ 💡 {__('Tip: Configure your channels here, then enable them for specific events in Staff or Customer Notifications.')} +

+
+
+ + + {/* Built-in Channels */} + +
+ {builtinChannels.map((channel) => ( +
+
+
+ {channel.icon} +
+
+
+

{channel.name}

+ + {__('Built-in')} + +
+

{channel.description}

+
+
+ + + +
+ ))} +
+ + + {/* Addon Channels */} + +
+ {addonChannels.map((channel) => ( +
+
+
+ {channel.icon} +
+
+
+

{channel.name}

+ + {__('Addon Required')} + +
+

{channel.description}

+
+
+ +
+ ))} +
+ +
+ + ); +} diff --git a/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx b/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx index 20c1245..5ed07a8 100644 --- a/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx +++ b/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx @@ -1,11 +1,12 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import { useQuery } from '@tanstack/react-query'; import { api } from '@/lib/api'; 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, MessageCircle, Send, ExternalLink } from 'lucide-react'; +import { RefreshCw, Mail, Bell, MessageSquare, Info, MessageCircle, Send, ExternalLink, ArrowRight } from 'lucide-react'; import { __ } from '@/lib/i18n'; interface NotificationChannel { @@ -58,6 +59,23 @@ export default function CustomerChannels() { +
+

+ 💡 {__('Need to configure channel settings?')} +

+ + + +
+ + +
diff --git a/admin-spa/src/routes/Settings/Notifications/EmailConfiguration.tsx b/admin-spa/src/routes/Settings/Notifications/EmailConfiguration.tsx new file mode 100644 index 0000000..e459d67 --- /dev/null +++ b/admin-spa/src/routes/Settings/Notifications/EmailConfiguration.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { SettingsLayout } from '../components/SettingsLayout'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Button } from '@/components/ui/button'; +import { ChevronLeft } from 'lucide-react'; +import { __ } from '@/lib/i18n'; +import EmailCustomization from './EmailCustomization'; + +export default function EmailConfiguration() { + return ( + + + + } + > + + + {__('Template Settings')} + {__('Connection Settings')} + + + + + + + + {/* Connection Settings - SMTP Override */} +
+

{__('Email Delivery')}

+

+ {__( + 'By default, emails are sent using WordPress wp_mail() function. You can override this with custom SMTP settings if needed.' + )} +

+
+

+ 💡 {__('Tip: For custom SMTP configuration, install a dedicated SMTP plugin like WP Mail SMTP or Easy WP SMTP.')} +

+
+
+ + + + ); +} diff --git a/admin-spa/src/routes/Settings/Notifications/PushConfiguration.tsx b/admin-spa/src/routes/Settings/Notifications/PushConfiguration.tsx new file mode 100644 index 0000000..4996dfb --- /dev/null +++ b/admin-spa/src/routes/Settings/Notifications/PushConfiguration.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { SettingsLayout } from '../components/SettingsLayout'; +import { SettingsCard } from '../components/SettingsCard'; +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { Switch } from '@/components/ui/switch'; +import { ChevronLeft } from 'lucide-react'; +import { __ } from '@/lib/i18n'; + +export default function PushConfiguration() { + return ( + + + + } + > + + + {__('Template Settings')} + {__('Connection Settings')} + + + + +
+ {/* Icon */} +
+ + +

+ {__('Icon displayed in push notifications (recommended: 192x192px PNG)')} +

+
+ + {/* Badge */} +
+ + +

+ {__('Small icon shown on notification badge (recommended: 96x96px PNG)')} +

+
+ + {/* Sound */} +
+
+ +

+ {__('Play default notification sound')} +

+
+ +
+ + {/* Vibrate */} +
+
+ +

+ {__('Vibrate device on notification (mobile only)')} +

+
+ +
+
+ + + + + +
+
+

{__('Browser-Native Push (Default)')}

+

+ {__( + 'Uses the browser\'s built-in Push API. No external service required. Works great for PWA applications.' + )} +

+
+ +
+

+ 💡 {__('Want more features? Install one of these addons:')} +

+
    +
  • + • + + {__('Firebase Cloud Messaging (FCM)')} - {__('Advanced features, analytics, and cross-platform support')} + +
    • +
  • + • + + {__('OneSignal')} - {__('Easy setup, segmentation, and A/B testing')} + +
    • +
+
+
+ + + + + ); +} diff --git a/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx b/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx index 068197d..9ee765e 100644 --- a/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx +++ b/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx @@ -1,14 +1,14 @@ import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { api } from '@/lib/api'; import { SettingsCard } from '../../components/SettingsCard'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Switch } from '@/components/ui/switch'; -import { RefreshCw, Mail, MessageCircle, Send, Bell, ExternalLink, Settings, Check, X } from 'lucide-react'; +import { RefreshCw, Mail, MessageCircle, Send, Bell, ExternalLink, Check, X, ArrowRight } from 'lucide-react'; import { toast } from 'sonner'; import { __ } from '@/lib/i18n'; -import ChannelConfig from '../ChannelConfig'; interface NotificationChannel { id: string; @@ -35,8 +35,6 @@ export default function NotificationChannels() { const queryClient = useQueryClient(); const [pushSubscribed, setPushSubscribed] = useState(false); const [pushSupported, setPushSupported] = useState(false); - const [configOpen, setConfigOpen] = useState(false); - const [selectedChannel, setSelectedChannel] = useState(null); // Fetch channels const { data: channels, isLoading } = useQuery({ @@ -185,9 +183,20 @@ export default function NotificationChannels() {

{__( - 'Channels are the different ways notifications can be sent. Email is built-in and always available. Install addons to enable additional channels like WhatsApp, Telegram, SMS, and more.' + 'Enable or disable notification channels for staff notifications. Toggle channels on/off to control which delivery methods are available.' )}

+
+

+ 💡 {__('Need to configure channel settings?')} +

+ + + +
@@ -234,19 +243,6 @@ export default function NotificationChannels() { />
- - {channel.id === 'push' && !pushSupported && ( {__('Not Supported')} @@ -348,19 +344,6 @@ export default function NotificationChannels() {
)} - - {/* Channel Configuration Dialog */} - {selectedChannel && ( - { - setConfigOpen(false); - setSelectedChannel(null); - }} - channelId={selectedChannel.id} - channelLabel={selectedChannel.label} - /> - )} ); }