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

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">
-              <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>
+            <Switch
+              checked={channels?.find((c: any) => c.id === 'email')?.enabled ?? true}
+              onCheckedChange={(checked) => {
+                toggleChannelMutation.mutate({ channelId: 'email', enabled: checked });
+              }}
+              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">
-              <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>
+            <Switch
+              checked={channels?.find((c: any) => c.id === 'push')?.enabled ?? true}
+              onCheckedChange={(checked) => {
+                toggleChannelMutation.mutate({ channelId: 'push', enabled: checked });
+              }}
+              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">