From a5a2e0b9c0142f792eb92b84665bd3f75e1d43a2 Mon Sep 17 00:00:00 2001 From: dwindown Date: Sat, 15 Nov 2025 21:43:58 +0700 Subject: [PATCH] feat: Add toggles to Customer Channels and hide addon sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Customer Channels Enhancement: - Added Switch toggles for Email and Push channels - Added mutation to handle channel enable/disable - Replaced static 'Enabled' badge with interactive toggles - When disabled, channel won't appear in customer account preferences ✅ UI Cleanup: - Hidden addon sections in all channel pages (Staff, Customer, Configuration) - Will show addon offers later when addon development starts ✅ Documentation: - Created NOTIFICATION_SYSTEM_QA.md with comprehensive Q&A - Documented backend integration status - Proposed global WooNooW vs WooCommerce toggle - Listed what's wired and what needs backend implementation 📋 Backend Status: - ✅ Wired: Channel toggle, Event toggle, Template CRUD - ⚠️ Needed: Email/Push config, Global system toggle, Customer account integration 🎯 Next: Implement global notification system toggle for ultimate flexibility --- NOTIFICATION_SYSTEM_QA.md | 201 ++++++++++++++++++ .../Notifications/ChannelConfiguration.tsx | 1 + .../Notifications/Customer/Channels.tsx | 54 ++++- .../Settings/Notifications/Staff/Channels.tsx | 7 +- 4 files changed, 251 insertions(+), 12 deletions(-) create mode 100644 NOTIFICATION_SYSTEM_QA.md diff --git a/NOTIFICATION_SYSTEM_QA.md b/NOTIFICATION_SYSTEM_QA.md new file mode 100644 index 0000000..ca167be --- /dev/null +++ b/NOTIFICATION_SYSTEM_QA.md @@ -0,0 +1,201 @@ +# Notification System - Q&A + +## Questions & Answers + +### 1. **Why no toggle for Email/Push in Customer Channels?** + +**Answer**: ✅ **FIXED!** Added toggles to Customer Channels. + +**Implementation**: +- Added `Switch` component to Email and Push channels +- Added mutation to toggle channel enable/disable +- When disabled, customers won't see these options in their account page + +**User Flow**: +``` +Admin disables Email → Customer account page hides email notification preferences +Admin disables Push → Customer account page hides push notification preferences +``` + +--- + +### 2. **Flexibility: Optional Channels & WooCommerce Default Email** + +**Answer**: ✅ **Excellent idea!** Here's the proposed implementation: + +#### **A. Make All Channels Optional** +- ✅ Staff channels: Already have toggles +- ✅ Customer channels: Now have toggles (just added) +- Each channel can be completely disabled + +#### **B. Global WooNooW Notification Toggle** + +**Proposed Location**: `/settings/notifications` (main page) + +**New Card**: +``` +┌─────────────────────────────────────────┐ +│ 🔔 Notification System │ +│ │ +│ ○ Use WooNooW Notifications (default) │ +│ Modern notification system with │ +│ multiple channels and templates │ +│ │ +│ ○ Use WooCommerce Default Emails │ +│ Classic WooCommerce email system │ +│ (WooNooW notifications disabled) │ +│ │ +│ [Save Changes] │ +└─────────────────────────────────────────┘ +``` + +**Behavior**: +- **When WooNooW is active**: WooCommerce default emails are disabled +- **When WooCommerce default is active**: WooNooW notifications are disabled +- Only one system can be active at a time + +**Implementation Plan**: +1. Add global setting: `woonoow_notification_system` (values: `woonoow` | `woocommerce`) +2. Hook into WooCommerce email system: + - If `woonoow`: Disable WC emails, enable WooNooW + - If `woocommerce`: Enable WC emails, disable WooNooW +3. Add migration helper to switch between systems + +--- + +### 3. **Backend Integration Status** + +**Answer**: ⚠️ **Partially Wired** + +#### **✅ Already Wired (Frontend → Backend)**: +1. **Channel Toggle**: + - Endpoint: `POST /notifications/channels/toggle` + - Payload: `{ channelId, enabled }` + - Used in: Staff/Customer Channels tabs + +2. **Event Toggle**: + - Endpoint: `POST /notifications/events/update` + - Payload: `{ eventId, channelId, enabled, recipient }` + - Used in: Staff/Customer Events tabs + +3. **Template Fetch**: + - Endpoint: `GET /notifications/templates/{eventId}/{channelId}?recipient={type}` + - Used in: EditTemplate page + +4. **Template Save**: + - Endpoint: `POST /notifications/templates/save` + - Payload: `{ eventId, channelId, recipient, subject, body }` + - Used in: EditTemplate page + +#### **❌ Not Yet Wired (Need Backend Implementation)**: +1. **Email Configuration**: + - Template Settings (colors, logo, branding) + - Connection Settings (SMTP override) + - **Status**: Frontend ready, backend needs implementation + +2. **Push Configuration**: + - Template Settings (icon, badge, sound) + - Connection Settings (FCM/OneSignal) + - **Status**: Frontend ready, backend needs implementation + +3. **Channel Configuration**: + - Global channel settings + - **Status**: Frontend ready, backend needs implementation + +4. **Global Notification System Toggle**: + - Switch between WooNooW and WooCommerce + - **Status**: Not implemented (proposed above) + +--- + +## Backend TODO List + +### Priority 1: Core Functionality +- [ ] Implement Email Configuration endpoints + - `GET /notifications/email-settings` + - `POST /notifications/email-settings/save` +- [ ] Implement Push Configuration endpoints + - `GET /notifications/push-settings` + - `POST /notifications/push-settings/save` +- [ ] Add global notification system toggle + - `GET /notifications/system-mode` + - `POST /notifications/system-mode/set` + +### Priority 2: Integration +- [ ] Hook into WooCommerce email system + - Disable WC emails when WooNooW is active + - Re-enable WC emails when switched back +- [ ] Customer account page integration + - Show/hide notification preferences based on enabled channels + - Save customer notification preferences + +### Priority 3: Enhancement +- [ ] Activity Log endpoints + - `GET /notifications/activity-log` + - Track sent notifications +- [ ] Addon system for channels + - WhatsApp, Telegram, SMS integration points + +--- + +## Recommended Next Steps + +1. **Add Global Toggle** (High Priority) + - Implement the WooNooW vs WooCommerce toggle + - This gives users ultimate flexibility + +2. **Wire Email Configuration** (Medium Priority) + - Connect frontend to backend for email branding + +3. **Wire Push Configuration** (Low Priority) + - Can be done later, push is less critical + +4. **Customer Account Integration** (High Priority) + - Show notification preferences based on enabled channels + - Let customers opt-in/opt-out per channel + +--- + +## Architecture Summary + +``` +Frontend (React) +├── Notifications Main Page +│ └── [NEW] Global System Toggle (WooNooW vs WooCommerce) +├── Staff Notifications +│ ├── Channels (toggle on/off) ✅ Wired +│ └── Events (toggle + template edit) ✅ Wired +├── Customer Notifications +│ ├── Channels (toggle on/off) ✅ Just Added +│ └── Events (toggle + template edit) ✅ Wired +└── Channel Configuration + ├── Email Config ⚠️ Frontend ready, backend needed + ├── Push Config ⚠️ Frontend ready, backend needed + └── Addons (future) + +Backend (PHP) +├── NotificationsController ✅ Partially implemented +├── TemplateProvider ✅ Implemented +├── EventRegistry ✅ Implemented +└── [NEEDED] ConfigurationController + ├── Email settings + ├── Push settings + └── Global system toggle +``` + +--- + +## Summary + +**What's Working**: +- ✅ Channel enable/disable (Staff & Customer) +- ✅ Event enable/disable with template editing +- ✅ Template editor with markdown support +- ✅ Variable system + +**What's Needed**: +- ⚠️ Backend for Email/Push configuration +- ⚠️ Global system toggle (WooNooW vs WooCommerce) +- ⚠️ Customer account page integration + +**Recommendation**: Implement the global toggle first, as it provides the ultimate flexibility you want! diff --git a/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx b/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx index 95ebd8f..f926484 100644 --- a/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx +++ b/admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx @@ -134,6 +134,7 @@ export default function ChannelConfiguration() {
{addonChannels.map((channel) => ( diff --git a/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx b/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx index 5ed07a8..23d1b3e 100644 --- a/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx +++ b/admin-spa/src/routes/Settings/Notifications/Customer/Channels.tsx @@ -1,12 +1,14 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { useQuery } from '@tanstack/react-query'; +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 { Alert, AlertDescription } from '@/components/ui/alert'; import { RefreshCw, Mail, Bell, MessageSquare, Info, MessageCircle, Send, ExternalLink, ArrowRight } from 'lucide-react'; +import { toast } from 'sonner'; import { __ } from '@/lib/i18n'; interface NotificationChannel { @@ -19,12 +21,37 @@ interface NotificationChannel { } export default function CustomerChannels() { + const queryClient = useQueryClient(); + // Fetch channels const { data: channels, isLoading } = useQuery({ queryKey: ['notification-channels'], queryFn: () => api.get('/notifications/channels'), }); + // Toggle channel mutation + const toggleChannelMutation = useMutation({ + mutationFn: async ({ channelId, enabled }: { channelId: string; enabled: boolean }) => { + const response = await api.post('/notifications/channels/toggle', { channelId, enabled }); + return response; + }, + onSuccess: (data, variables) => { + queryClient.setQueryData(['notification-channels'], (old: any) => { + if (!old) return old; + return old.map((channel: any) => + channel.id === variables.channelId + ? { ...channel, enabled: data.enabled } + : channel + ); + }); + toast.success(__('Channel updated')); + }, + onError: (error: any) => { + queryClient.invalidateQueries({ queryKey: ['notification-channels'] }); + toast.error(error?.message || __('Failed to update channel')); + }, + }); + const getChannelIcon = (channelId: string) => { switch (channelId) { case 'email': @@ -97,11 +124,13 @@ export default function CustomerChannels() {

-
-
- {__('Enabled')} -
-
+ c.id === 'email')?.enabled ?? true} + onCheckedChange={(checked) => { + toggleChannelMutation.mutate({ channelId: 'email', enabled: checked }); + }} + disabled={toggleChannelMutation.isPending} + /> {/* Push Notifications */} @@ -122,11 +151,13 @@ export default function CustomerChannels() {

-
-
- {__('Enabled')} -
-
+ c.id === 'push')?.enabled ?? true} + onCheckedChange={(checked) => { + toggleChannelMutation.mutate({ channelId: 'push', enabled: checked }); + }} + disabled={toggleChannelMutation.isPending} + /> @@ -135,6 +166,7 @@ export default function CustomerChannels() {

diff --git a/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx b/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx index 9ee765e..4e2d66a 100644 --- a/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx +++ b/admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx @@ -256,7 +256,11 @@ export default function NotificationChannels() { {/* Addon Channels */} {addonChannels.length > 0 ? ( - +

{addonChannels.map((channel: NotificationChannel) => (
@@ -289,6 +293,7 @@ export default function NotificationChannels() {