import React from 'react'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { api } from '@/lib/api'; import { SettingsLayout } from './components/SettingsLayout'; import { SettingsCard } from './components/SettingsCard'; import { Switch } from '@/components/ui/switch'; import { Button } from '@/components/ui/button'; import { ExternalLink, RefreshCw, Mail } from 'lucide-react'; import { toast } from 'sonner'; import { __ } from '@/lib/i18n'; export default function NotificationsSettings() { const queryClient = useQueryClient(); const wcAdminUrl = (window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin'; // Fetch email settings const { data: settings, isLoading, refetch } = useQuery({ queryKey: ['email-settings'], queryFn: () => api.get('/settings/emails'), }); // Toggle email mutation const toggleMutation = useMutation({ mutationFn: async ({ emailId, enabled }: { emailId: string; enabled: boolean }) => { return api.post(`/settings/emails/${emailId}/toggle`, { enabled }); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['email-settings'] }); toast.success(__('Email settings updated')); }, onError: (error: any) => { toast.error(error?.message || __('Failed to update email settings')); }, }); if (isLoading) { return (
); } const customerEmails = settings?.emails?.filter((e: any) => e.recipient === 'customer') || []; const adminEmails = settings?.emails?.filter((e: any) => e.recipient === 'admin') || []; return ( refetch()} > {__('Refresh')} } >
{/* Info Card - Shopify/Marketplace Style */}

{__('Control which email notifications are sent automatically when orders are placed, shipped, or updated. All emails use your store branding and can be customized in WooCommerce settings.')}

💡 {__('Quick Tips')}

  • • {__('Keep order confirmation emails enabled - customers expect immediate confirmation')}
  • • {__('Enable shipping notifications to reduce "where is my order?" inquiries')}
  • • {__('Admin notifications help you stay on top of new orders and issues')}
  • • {__('Disable emails you don\'t need to reduce inbox clutter')}

{__('Need to customize email templates, subject lines, or sender details?')}{' '} {__('Go to advanced email settings →')}

{/* Customer Emails */}
{customerEmails.map((email: any) => (

{email.title}

{email.description}

toggleMutation.mutate({ emailId: email.id, enabled: checked })} disabled={toggleMutation.isPending} />
))}
{/* Admin Emails */}
{adminEmails.map((email: any) => (

{email.title}

{email.description}

toggleMutation.mutate({ emailId: email.id, enabled: checked })} disabled={toggleMutation.isPending} />
))}
); }