diff --git a/client/src/pages/me/ui/MeLayoutPage.tsx b/client/src/pages/me/ui/MeLayoutPage.tsx index d97dab6..5998257 100644 --- a/client/src/pages/me/ui/MeLayoutPage.tsx +++ b/client/src/pages/me/ui/MeLayoutPage.tsx @@ -16,11 +16,12 @@ import Typography from '@mui/material/Typography' import useMediaQuery from '@mui/material/useMediaQuery' import { useQuery } from '@tanstack/react-query' import { useUnit } from 'effector-react' -import { MapPin, MessageCircle, Settings, SlidersHorizontal, Truck } from 'lucide-react' +import { MapPin, MessageCircle, Settings, SlidersHorizontal, Truck, Bell } from 'lucide-react' import { Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom' import { fetchUnreadMessageCount } from '@/entities/user/api/messages-api' import { AddressesPage } from '@/pages/me/ui/sections/AddressesPage' import { MessagesPage } from '@/pages/me/ui/sections/MessagesPage' +import { NotificationsPage } from '@/pages/me/ui/sections/NotificationsPage' import { OrderDetailPage } from '@/pages/me/ui/sections/OrderDetailPage' import { OrdersPage } from '@/pages/me/ui/sections/OrdersPage' import { SettingsPage } from '@/pages/me/ui/sections/SettingsPage' @@ -56,6 +57,7 @@ export function MeLayoutPage() { { to: '/me/messages', label: 'Сообщения', icon: }, { to: '/me/settings', label: 'Настройки', icon: }, { to: '/me/addresses', label: 'Адреса доставки', icon: }, + { to: '/me/notifications', label: 'Оповещения', icon: }, ], [], ) @@ -189,6 +191,7 @@ export function MeLayoutPage() { } /> } /> } /> + } /> } /> diff --git a/client/src/pages/me/ui/sections/NotificationsPage.tsx b/client/src/pages/me/ui/sections/NotificationsPage.tsx new file mode 100644 index 0000000..2458020 --- /dev/null +++ b/client/src/pages/me/ui/sections/NotificationsPage.tsx @@ -0,0 +1,99 @@ +import { useState } from 'react' +import Alert from '@mui/material/Alert' +import Box from '@mui/material/Box' +import FormControlLabel from '@mui/material/FormControlLabel' +import Stack from '@mui/material/Stack' +import Switch from '@mui/material/Switch' +import Typography from '@mui/material/Typography' +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' +import { + fetchUserNotificationSettings, + updateUserNotificationSettings, +} from '@/entities/notification/api/notifications-api' + +const eventFields = [ + { key: 'orderCreated' as const, label: 'Заказ создан' }, + { key: 'orderStatusChanged' as const, label: 'Изменение статуса заказа' }, + { key: 'orderMessageReceived' as const, label: 'Сообщение в чате заказа' }, + { key: 'paymentStatusChanged' as const, label: 'Изменение статуса оплаты' }, +] + +export function NotificationsPage() { + const queryClient = useQueryClient() + const [error, setError] = useState(null) + + const { data, isLoading } = useQuery({ + queryKey: ['me', 'notifications', 'settings'], + queryFn: fetchUserNotificationSettings, + }) + + const mutation = useMutation({ + mutationFn: updateUserNotificationSettings, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['me', 'notifications', 'settings'] }) + }, + onError: (err: { response?: { data?: { error?: string } } }) => { + setError(err.response?.data?.error || 'Ошибка сохранения') + }, + }) + + if (isLoading) return Загрузка... + + const settings = data?.settings + if (!settings) return Не удалось загрузить настройки + + const handleToggle = (field: string, value: boolean) => { + setError(null) + mutation.mutate({ [field]: value } as Record) + } + + return ( + + + Оповещения + + + Настройте, какие уведомления вы хотите получать на почту. + + + {error && ( + + {error} + + )} + + + + handleToggle('globalEnabled', e.target.checked)} + /> + } + label={Получать оповещения} + /> + + Включите, чтобы получать уведомления о заказах на почту. + + + + + {eventFields.map(({ key, label }) => ( + handleToggle(key, e.target.checked)} + /> + } + label={label} + /> + ))} + + + + ) +}