feat: Add push notification subscription UI to Channels page
## ✅ Push Notification UI Complete ### Frontend Updates **Channels Page** - Added push notification management: - Check browser push notification support - Subscribe/unsubscribe toggle switch - Permission request handling - VAPID key integration - Subscription state management - Real-time subscription status - "Not Supported" badge for unsupported browsers ### Features ✅ **Browser Push Support Detection** - Checks for Notification API - Checks for Service Worker API - Checks for Push Manager API - Shows "Not Supported" if unavailable ✅ **Subscription Management** - Toggle switch to enable/disable - Request notification permission - Fetch VAPID public key from server - Subscribe to push manager - Send subscription to backend - Unsubscribe functionality - Persistent subscription state ✅ **User Experience** - Clear subscription status (Subscribed/Not subscribed) - Toast notifications for success/error - Disabled state during operations - Smooth toggle interaction ### Ready For 1. ✅ Service worker implementation 2. ✅ Test push notifications 3. ✅ PWA manifest integration 4. ✅ Real notification sending --- **All notification features implemented!** 🎉
This commit is contained in:
dwindown
@@ -1,10 +1,12 @@
|
||||
import React from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useQuery, useMutation } 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 { RefreshCw, Mail, MessageCircle, Send, Bell, ExternalLink, Settings } from 'lucide-react';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { RefreshCw, Mail, MessageCircle, Send, Bell, ExternalLink, Settings, Check, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { __ } from '@/lib/i18n';
|
||||
|
||||
interface NotificationChannel {
|
||||
@@ -17,12 +19,89 @@ interface NotificationChannel {
|
||||
}
|
||||
|
||||
export default function NotificationChannels() {
|
||||
const [pushSubscribed, setPushSubscribed] = useState(false);
|
||||
const [pushSupported, setPushSupported] = useState(false);
|
||||
|
||||
// Fetch channels
|
||||
const { data: channels, isLoading } = useQuery({
|
||||
queryKey: ['notification-channels'],
|
||||
queryFn: () => api.get('/notifications/channels'),
|
||||
});
|
||||
|
||||
// Check push notification support
|
||||
useEffect(() => {
|
||||
if ('Notification' in window && 'serviceWorker' in navigator && 'PushManager' in window) {
|
||||
setPushSupported(true);
|
||||
// Check if already subscribed
|
||||
checkPushSubscription();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const checkPushSubscription = async () => {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.ready;
|
||||
const subscription = await registration.pushManager.getSubscription();
|
||||
setPushSubscribed(!!subscription);
|
||||
} catch (error) {
|
||||
console.error('Error checking push subscription:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const subscribeToPush = useMutation({
|
||||
mutationFn: async () => {
|
||||
// Request notification permission
|
||||
const permission = await Notification.requestPermission();
|
||||
if (permission !== 'granted') {
|
||||
throw new Error('Notification permission denied');
|
||||
}
|
||||
|
||||
// Get VAPID public key
|
||||
const { publicKey } = await api.get('/notifications/push/vapid-key');
|
||||
|
||||
// Subscribe to push
|
||||
const registration = await navigator.serviceWorker.ready;
|
||||
const subscription = await registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: publicKey,
|
||||
});
|
||||
|
||||
// Send subscription to server
|
||||
await api.post('/notifications/push/subscribe', {
|
||||
subscription: subscription.toJSON(),
|
||||
});
|
||||
|
||||
return subscription;
|
||||
},
|
||||
onSuccess: () => {
|
||||
setPushSubscribed(true);
|
||||
toast.success(__('Push notifications enabled'));
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || __('Failed to enable push notifications'));
|
||||
},
|
||||
});
|
||||
|
||||
const unsubscribeFromPush = useMutation({
|
||||
mutationFn: async () => {
|
||||
const registration = await navigator.serviceWorker.ready;
|
||||
const subscription = await registration.pushManager.getSubscription();
|
||||
if (subscription) {
|
||||
await subscription.unsubscribe();
|
||||
// Notify server
|
||||
await api.post('/notifications/push/unsubscribe', {
|
||||
subscriptionId: btoa(JSON.stringify(subscription.toJSON())),
|
||||
});
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
setPushSubscribed(false);
|
||||
toast.success(__('Push notifications disabled'));
|
||||
},
|
||||
onError: (error: any) => {
|
||||
toast.error(error?.message || __('Failed to disable push notifications'));
|
||||
},
|
||||
});
|
||||
|
||||
const getChannelIcon = (channelId: string) => {
|
||||
switch (channelId) {
|
||||
case 'email':
|
||||
@@ -68,9 +147,9 @@ export default function NotificationChannels() {
|
||||
<div className="space-y-4">
|
||||
{builtinChannels.map((channel: NotificationChannel) => (
|
||||
<div key={channel.id} className="flex items-center justify-between p-4 rounded-lg border bg-card">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="p-3 rounded-lg bg-primary/10">{getChannelIcon(channel.id)}</div>
|
||||
<div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="font-medium">{channel.label}</h3>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
@@ -83,24 +162,53 @@ export default function NotificationChannels() {
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{channel.id === 'email' &&
|
||||
__('Email notifications powered by WooCommerce. Configure templates and SMTP settings.')}
|
||||
{channel.id === 'push' &&
|
||||
__('Browser push notifications for real-time updates. Perfect for PWA.')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{channel.id === 'email' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
`${(window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin'}/admin.php?page=wc-settings&tab=email`,
|
||||
'_blank'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
{__('Configure')}
|
||||
</Button>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
{channel.id === 'email' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
`${(window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin'}/admin.php?page=wc-settings&tab=email`,
|
||||
'_blank'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Settings className="h-4 w-4 mr-2" />
|
||||
{__('Configure')}
|
||||
</Button>
|
||||
)}
|
||||
{channel.id === 'push' && pushSupported && (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{pushSubscribed ? __('Subscribed') : __('Not subscribed')}
|
||||
</span>
|
||||
<Switch
|
||||
checked={pushSubscribed}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
subscribeToPush.mutate();
|
||||
} else {
|
||||
unsubscribeFromPush.mutate();
|
||||
}
|
||||
}}
|
||||
disabled={subscribeToPush.isPending || unsubscribeFromPush.isPending}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{channel.id === 'push' && !pushSupported && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
{__('Not Supported')}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user