diff --git a/admin-spa/src/routes/Settings/Notifications/Channels.tsx b/admin-spa/src/routes/Settings/Notifications/Channels.tsx index 399cb01..321736d 100644 --- a/admin-spa/src/routes/Settings/Notifications/Channels.tsx +++ b/admin-spa/src/routes/Settings/Notifications/Channels.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { useQuery, useMutation } 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'; @@ -32,6 +32,7 @@ function urlBase64ToUint8Array(base64String: string) { } export default function NotificationChannels() { + const queryClient = useQueryClient(); const [pushSubscribed, setPushSubscribed] = useState(false); const [pushSupported, setPushSupported] = useState(false); const [configOpen, setConfigOpen] = useState(false); @@ -42,6 +43,20 @@ export default function NotificationChannels() { queryKey: ['notification-channels'], queryFn: () => api.get('/notifications/channels'), }); + + // Toggle channel mutation + const toggleChannelMutation = useMutation({ + mutationFn: async ({ channelId, enabled }: { channelId: string; enabled: boolean }) => { + return api.post('/notifications/channels/toggle', { channelId, enabled }); + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['notification-channels'] }); + toast.success(__('Channel updated')); + }, + onError: (error: any) => { + toast.error(error?.message || __('Failed to update channel')); + }, + }); // Check push notification support useEffect(() => { @@ -198,6 +213,20 @@ export default function NotificationChannels() {
+ {/* Channel Enable/Disable Toggle */} +
+ + {channel.enabled ? __('Enabled') : __('Disabled')} + + { + toggleChannelMutation.mutate({ channelId: channel.id, enabled: checked }); + }} + disabled={toggleChannelMutation.isPending} + /> +
+