feat: Add toggles to Customer Channels and hide addon sections

✅ 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

@@ -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!

admin-spa/src/routes/Settings/Notifications/ChannelConfiguration.tsx

@@ -134,6 +134,7 @@ export default function ChannelConfiguration() {
         <SettingsCard
           title={__('Addon Channels')}
           description={__('Install addons to enable additional notification channels')}
+          className='hidden'
         >
           <div className="space-y-3">
             {addonChannels.map((channel) => (

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() {
                 </p>
               </div>
             </div>
-            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
+            <Switch
-              <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">
+              checked={channels?.find((c: any) => c.id === 'email')?.enabled ?? true}
-                <span className="text-sm text-muted-foreground">{__('Enabled')}</span>
+              onCheckedChange={(checked) => {
-              </div>
+                toggleChannelMutation.mutate({ channelId: 'email', enabled: checked });
-            </div>
+              }}
+              disabled={toggleChannelMutation.isPending}
+            />
           </div>
 
           {/* Push Notifications */}
@@ -122,11 +151,13 @@ export default function CustomerChannels() {
                 </p>
               </div>
             </div>
-            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
+            <Switch
-              <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">
+              checked={channels?.find((c: any) => c.id === 'push')?.enabled ?? true}
-                <span className="text-sm text-muted-foreground">{__('Enabled')}</span>
+              onCheckedChange={(checked) => {
-              </div>
+                toggleChannelMutation.mutate({ channelId: 'push', enabled: checked });
-            </div>
+              }}
+              disabled={toggleChannelMutation.isPending}
+            />
           </div>
         </div>
       </SettingsCard>
@@ -135,6 +166,7 @@ export default function CustomerChannels() {
       <SettingsCard
         title={__('Extend with Addons')}
         description={__('Add more notification channels to your store')}
+        className='hidden'
       >
         <div className="space-y-4">
           <p className="text-sm text-muted-foreground">

admin-spa/src/routes/Settings/Notifications/Staff/Channels.tsx

@@ -256,7 +256,11 @@ export default function NotificationChannels() {
 
       {/* Addon Channels */}
       {addonChannels.length > 0 ? (
-        <SettingsCard title={__('Addon Channels')} description={__('Channels provided by installed addons')}>
+        <SettingsCard 
+          title={__('Addon Channels')} 
+          description={__('Channels provided by installed addons')}
+          className='hidden'
+        >
           <div className="space-y-4">
             {addonChannels.map((channel: NotificationChannel) => (
               <div key={channel.id} className="flex items-center justify-between p-4 rounded-lg border bg-card">
@@ -289,6 +293,7 @@ export default function NotificationChannels() {
         <SettingsCard
           title={__('Extend with Addons')}
           description={__('Add more notification channels to your store')}
+          className='hidden'
         >
           <div className="space-y-4">
             <p className="text-sm text-muted-foreground">