base commit

client/src/pages/me/ui/sections/MessagesPage.tsx

@@ -1,13 +1,204 @@
+import { useEffect, useMemo, useState } from 'react'
+import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Chip from '@mui/material/Chip'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link as RouterLink } from 'react-router-dom'
+import { fetchMyOrder, postOrderMessage } from '@/entities/order/api/order-api'
+import { fetchMyConversations, markOrderMessagesRead } from '@/entities/user/api/messages-api'
+import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
 
 export function MessagesPage() {
+  const qc = useQueryClient()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [text, setText] = useState('')
+
+  const listQuery = useQuery({
+    queryKey: ['me', 'conversations'],
+    queryFn: fetchMyConversations,
+  })
+
+  const conversationsList = useMemo(() => listQuery.data?.items ?? [], [listQuery.data?.items])
+
+  const activeThreadId = useMemo(() => {
+    return selectedId ?? conversationsList[0]?.orderId ?? null
+  }, [selectedId, conversationsList])
+
+  const orderQuery = useQuery({
+    queryKey: ['me', 'orders', activeThreadId],
+    queryFn: () => fetchMyOrder(activeThreadId!),
+    enabled: Boolean(activeThreadId),
+  })
+
+  useEffect(() => {
+    if (!activeThreadId || orderQuery.status !== 'success') return
+    void (async () => {
+      await markOrderMessagesRead(activeThreadId).catch(() => undefined)
+      await qc.invalidateQueries({ queryKey: ['me', 'messages', 'unread-count'] })
+      await qc.invalidateQueries({ queryKey: ['me', 'conversations'] })
+    })()
+  }, [activeThreadId, orderQuery.status, qc])
+
+  const msgMut = useMutation({
+    mutationFn: () => postOrderMessage(activeThreadId!, text.trim()),
+    onSuccess: async () => {
+      setText('')
+      await qc.invalidateQueries({ queryKey: ['me', 'orders', activeThreadId] })
+      await qc.invalidateQueries({ queryKey: ['me', 'conversations'] })
+    },
+  })
+
+  const order = orderQuery.data?.item
+
   return (
     <Box>
       <Typography variant="h4" gutterBottom>
         Сообщения
       </Typography>
-      <Typography color="text.secondary">Скоро здесь появятся сообщения и уведомления.</Typography>
+
+      <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        Переписка по всем заказам. Последнее сообщение в каждом заказе — в списке слева.
+      </Typography>
+
+      {listQuery.isError && <Alert severity="error">Не удалось загрузить переписки.</Alert>}
+      {listQuery.isSuccess && conversationsList.length === 0 && (
+        <Alert severity="info">
+          Пока нет сообщений в заказах. Их отправит администратор — или напишите сами на странице заказа.
+        </Alert>
+      )}
+
+      {conversationsList.length > 0 && (
+        <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ alignItems: 'flex-start' }}>
+          <Box
+            sx={{
+              width: { xs: '100%', md: 320 },
+              flexShrink: 0,
+              border: 1,
+              borderColor: 'divider',
+              borderRadius: 2,
+              bgcolor: 'background.paper',
+              maxHeight: 520,
+              overflow: 'auto',
+            }}
+          >
+            <List disablePadding>
+              {conversationsList.map((c) => (
+                <ListItem
+                  key={c.orderId}
+                  disablePadding
+                  secondaryAction={
+                    c.unreadCount > 0 ? (
+                      <Chip sx={{ mr: 1 }} size="small" color="error" label={String(c.unreadCount)} />
+                    ) : null
+                  }
+                >
+                  <ListItemButton selected={activeThreadId === c.orderId} onClick={() => setSelectedId(c.orderId)}>
+                    <ListItemText
+                      primary={
+                        <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flexWrap: 'wrap' }}>
+                          <Typography component="span" sx={{ fontWeight: 700 }}>
+                            №{c.orderId.slice(-6)}
+                          </Typography>
+                          <Typography component="span" variant="caption" color="text.secondary">
+                            · {orderStatusLabelRu(c.status)}
+                          </Typography>
+                        </Stack>
+                      }
+                      secondaryTypographyProps={{
+                        sx: {
+                          mt: 0.5,
+                          overflow: 'hidden',
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: 'vertical',
+                        },
+                      }}
+                      secondary={c.preview}
+                    />
+                  </ListItemButton>
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+
+          <Box
+            sx={{
+              flexGrow: 1,
+              minWidth: 0,
+              border: 1,
+              borderColor: 'divider',
+              borderRadius: 2,
+              p: 2,
+              bgcolor: 'background.paper',
+            }}
+          >
+            {!activeThreadId && <Typography color="text.secondary">Выберите заказ.</Typography>}
+            {activeThreadId && orderQuery.isLoading && <Typography>Загрузка чата…</Typography>}
+            {activeThreadId && orderQuery.isError && <Alert severity="error">Не удалось загрузить заказ.</Alert>}
+            {order && (
+              <>
+                <Stack direction="row" sx={{ mb: 2, justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
+                  <Typography variant="h6">
+                    Чат заказа №{order.id.slice(-6)}{' '}
+                    <Typography component="span" variant="body2" color="text.secondary">
+                      ({orderStatusLabelRu(order.status)})
+                    </Typography>
+                  </Typography>
+                  <Button component={RouterLink} to={`/me/orders/${order.id}`} size="small" variant="outlined">
+                    Открыть заказ
+                  </Button>
+                </Stack>
+                <Stack spacing={1} sx={{ mb: 2, maxHeight: 360, overflow: 'auto' }}>
+                  {order.messages.map((m) => (
+                    <Box
+                      key={m.id}
+                      sx={{
+                        p: 1.25,
+                        borderRadius: 2,
+                        bgcolor: m.authorType === 'admin' ? 'grey.100' : 'primary.50',
+                        border: 1,
+                        borderColor: 'divider',
+                      }}
+                    >
+                      <Typography variant="caption" color="text.secondary">
+                        {m.authorType === 'admin' ? 'Админ' : 'Вы'} · {new Date(m.createdAt).toLocaleString()}
+                      </Typography>
+                      <Typography sx={{ whiteSpace: 'pre-wrap' }}>{m.text}</Typography>
+                    </Box>
+                  ))}
+                  {order.messages.length === 0 && <Typography color="text.secondary">Нет сообщений.</Typography>}
+                </Stack>
+                <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'flex-end' } }}>
+                  <TextField
+                    label="Сообщение"
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    fullWidth
+                    multiline
+                    minRows={2}
+                  />
+                  <Button
+                    variant="contained"
+                    sx={{ minWidth: 140 }}
+                    onClick={() => msgMut.mutate()}
+                    disabled={msgMut.isPending || !text.trim()}
+                  >
+                    Отправить
+                  </Button>
+                </Stack>
+              </>
+            )}
+          </Box>
+        </Stack>
+      )}
     </Box>
   )
 }

client/src/pages/me/ui/sections/OrderDetailPage.tsx

@@ -1,17 +1,50 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
 import Divider from '@mui/material/Divider'
+import Rating from '@mui/material/Rating'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
 import { Link as RouterLink, useParams } from 'react-router-dom'
-import { fetchMyOrder, payOrderStub, postOrderMessage } from '@/entities/order/api/order-api'
+import {
+  confirmOrderReceived,
+  fetchMyOrder,
+  fetchOrderReviewEligibility,
+  payOrderStub,
+  postOrderMessage,
+} from '@/entities/order/api/order-api'
+import { postProductReview } from '@/entities/product/api/reviews-api'
+import { markOrderMessagesRead } from '@/entities/user/api/messages-api'
 import { formatPriceRub } from '@/shared/lib/format-price'
+import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
+
+function reviewSubmitErrorMessage(err: unknown): string {
+  if (axios.isAxiosError(err)) {
+    const status = err.response?.status
+    const raw = err.response?.data
+    const apiMsg =
+      raw && typeof raw === 'object' && 'error' in raw && typeof (raw as { error: unknown }).error === 'string'
+        ? (raw as { error: string }).error
+        : null
+    if (status === 409 || apiMsg?.toLowerCase().includes('уже')) {
+      return 'Вы уже оставляли отзыв на этот товар.'
+    }
+    return apiMsg || err.message || 'Не удалось отправить отзыв'
+  }
+  if (err instanceof Error) return err.message
+  return 'Не удалось отправить отзыв'
+}
 
 type AddressSnapshot = {
+  deliveryType?: 'delivery' | 'pickup'
   label?: string | null
   recipientName?: string
   recipientPhone?: string
@@ -23,6 +56,9 @@ export function OrderDetailPage() {
   const { id } = useParams()
   const qc = useQueryClient()
   const [text, setText] = useState('')
+  const [reviewTarget, setReviewTarget] = useState<{ productId: string; title: string } | null>(null)
+  const [reviewRating, setReviewRating] = useState<number>(5)
+  const [reviewText, setReviewText] = useState('')
 
   const orderQuery = useQuery({
     queryKey: ['me', 'orders', id],
@@ -32,7 +68,20 @@ export function OrderDetailPage() {
 
   const payMut = useMutation({
     mutationFn: () => payOrderStub(id!),
-    onSuccess: () => void qc.invalidateQueries({ queryKey: ['me', 'orders', id] }),
+    onSuccess: () =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: ['me', 'orders', id] }),
+        qc.invalidateQueries({ queryKey: ['me', 'orders'] }),
+      ]),
+  })
+
+  const confirmMut = useMutation({
+    mutationFn: () => confirmOrderReceived(id!),
+    onSuccess: () =>
+      Promise.all([
+        qc.invalidateQueries({ queryKey: ['me', 'orders', id] }),
+        qc.invalidateQueries({ queryKey: ['me', 'orders'] }),
+      ]),
   })
 
   const msgMut = useMutation({
@@ -40,11 +89,43 @@ export function OrderDetailPage() {
     onSuccess: async () => {
       setText('')
       await qc.invalidateQueries({ queryKey: ['me', 'orders', id] })
+      await qc.invalidateQueries({ queryKey: ['me', 'conversations'] })
     },
   })
 
   const order = orderQuery.data?.item
 
+  const eligibilityQuery = useQuery({
+    queryKey: ['me', 'orders', id, 'review-eligibility'],
+    queryFn: () => fetchOrderReviewEligibility(id!),
+    enabled: Boolean(id && order?.status === 'DONE'),
+  })
+
+  const reviewMut = useMutation({
+    mutationFn: async () => {
+      if (!reviewTarget) return
+      const t = reviewText.trim()
+      await postProductReview(reviewTarget.productId, {
+        rating: reviewRating,
+        text: t.length ? t : null,
+      })
+    },
+    onSuccess: async () => {
+      setReviewTarget(null)
+      setReviewRating(5)
+      setReviewText('')
+      await qc.invalidateQueries({ queryKey: ['me', 'orders', id, 'review-eligibility'] })
+    },
+  })
+
+  useEffect(() => {
+    if (!id || orderQuery.status !== 'success' || !order) return
+    void (async () => {
+      await markOrderMessagesRead(id).catch(() => undefined)
+      await qc.invalidateQueries({ queryKey: ['me', 'messages', 'unread-count'] })
+    })()
+  }, [id, order, orderQuery.status, qc])
+
   const address = useMemo((): AddressSnapshot | null => {
     if (!order?.addressSnapshotJson) return null
     try {
@@ -63,7 +144,7 @@ export function OrderDetailPage() {
       <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ mb: 2, alignItems: { sm: 'center' } }}>
         <Box sx={{ flexGrow: 1 }}>
           <Typography variant="h4">Заказ #{order.id.slice(-6)}</Typography>
-          <Typography color="text.secondary">Статус: {order.status}</Typography>
+          <Typography color="text.secondary">Статус: {orderStatusLabelRu(order.status)}</Typography>
         </Box>
         <Button component={RouterLink} to="/me/orders" variant="outlined">
           К списку
@@ -89,27 +170,49 @@ export function OrderDetailPage() {
             ))}
           </Stack>
           <Divider sx={{ my: 2 }} />
-          <Typography variant="h6">Итого: {formatPriceRub(order.totalCents)}</Typography>
+          <Stack spacing={0.25}>
+            <Typography variant="body2" color="text.secondary">
+              Товары: {formatPriceRub(order.itemsSubtotalCents)}
+            </Typography>
+            {order.deliveryType === 'delivery' && (
+              <Typography variant="body2" color="text.secondary">
+                Доставка: {formatPriceRub(order.deliveryFeeCents)}
+              </Typography>
+            )}
+            <Typography variant="h6">Итого: {formatPriceRub(order.totalCents)}</Typography>
+          </Stack>
         </Box>
 
         <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
           <Typography variant="h6" gutterBottom>
-            Доставка
+            Получение
           </Typography>
-          {address ? (
+          <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
+            Способ: {order.deliveryType === 'pickup' ? 'Самовывоз' : 'Доставка'}
+          </Typography>
+          {order.deliveryType === 'delivery' && (
             <>
-              <Typography sx={{ fontWeight: 700 }}>{address.addressLine}</Typography>
-              <Typography color="text.secondary" variant="body2">
-                Получатель: {address.recipientName} · {address.recipientPhone}
-              </Typography>
-              {address.comment && (
-                <Typography color="text.secondary" variant="body2">
-                  Комментарий: {address.comment}
-                </Typography>
+              {address ? (
+                <>
+                  <Typography sx={{ fontWeight: 700 }}>{address.addressLine}</Typography>
+                  <Typography color="text.secondary" variant="body2">
+                    Получатель: {address.recipientName} · {address.recipientPhone}
+                  </Typography>
+                  {address.comment && (
+                    <Typography color="text.secondary" variant="body2">
+                      Комментарий: {address.comment}
+                    </Typography>
+                  )}
+                </>
+              ) : (
+                <Typography color="text.secondary">Адрес не распознан.</Typography>
               )}
             </>
-          ) : (
-            <Typography color="text.secondary">Адрес не распознан.</Typography>
+          )}
+          {order.deliveryType === 'pickup' && (
+            <Typography color="text.secondary">
+              Адрес доставки не требуется. Мы свяжемся для согласования самовывоза.
+            </Typography>
           )}
           {order.comment && (
             <Typography color="text.secondary" variant="body2" sx={{ mt: 1 }}>
@@ -122,14 +225,81 @@ export function OrderDetailPage() {
           <Typography variant="h6" gutterBottom>
             Оплата
           </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
-            Пока это заглушка. Позже подключим реальную оплату.
-          </Typography>
-          <Button variant="contained" onClick={() => payMut.mutate()} disabled={payMut.isPending}>
-            Оплатить (заглушка)
-          </Button>
+          {order.status === 'PENDING_PAYMENT' && (
+            <>
+              <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
+                Пока это заглушка. После нажатия заказ перейдёт в статус «Проверка оплаты».
+              </Typography>
+              <Button variant="contained" onClick={() => payMut.mutate()} disabled={payMut.isPending}>
+                Оплатить (заглушка)
+              </Button>
+            </>
+          )}
+          {order.status === 'PAYMENT_VERIFICATION' && (
+            <Typography color="info.main" variant="body2">
+              Оплата отправлена на проверку. Мы проверим поступление и обновим статус.
+            </Typography>
+          )}
+          {!['PENDING_PAYMENT', 'PAYMENT_VERIFICATION'].includes(order.status) && (
+            <Typography color="text.secondary" variant="body2">
+              На этом этапе действий по оплате в этом блоке не требуется.
+            </Typography>
+          )}
         </Box>
 
+        {(order.deliveryType === 'delivery' && order.status === 'SHIPPED') ||
+        (order.deliveryType === 'pickup' && order.status === 'READY_FOR_PICKUP') ? (
+          <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
+            <Typography variant="h6" gutterBottom>
+              Получение заказа
+            </Typography>
+            <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+              {order.deliveryType === 'delivery'
+                ? 'Когда забрали посылку у курьера или на пункте выдачи — подтвердите получение.'
+                : 'Когда забрали заказ самовывозом — подтвердите получение.'}
+            </Typography>
+            <Button
+              variant="contained"
+              color="success"
+              onClick={() => confirmMut.mutate()}
+              disabled={confirmMut.isPending}
+            >
+              Подтвердить получение
+            </Button>
+          </Box>
+        ) : null}
+
+        {order.status === 'DONE' && eligibilityQuery.isSuccess && eligibilityQuery.data.canReview && (
+          <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
+            <Typography variant="h6" gutterBottom>
+              Отзывы
+            </Typography>
+            <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+              Поделитесь впечатлением о товарах. Отзывы появляются после модерации.
+            </Typography>
+            <Stack spacing={1}>
+              {eligibilityQuery.data.items.map((row) => (
+                <Stack
+                  key={row.productId}
+                  direction={{ xs: 'column', sm: 'row' }}
+                  spacing={1}
+                  sx={{ alignItems: { sm: 'center' }, justifyContent: 'space-between' }}
+                >
+                  <Typography sx={{ flexGrow: 1 }}>{row.title}</Typography>
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    disabled={row.hasReview}
+                    onClick={() => setReviewTarget({ productId: row.productId, title: row.title })}
+                  >
+                    {row.hasReview ? 'Отзыв отправлен' : 'Оставить отзыв'}
+                  </Button>
+                </Stack>
+              ))}
+            </Stack>
+          </Box>
+        )}
+
         <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
           <Typography variant="h6" gutterBottom>
             Чат по заказу
@@ -175,6 +345,48 @@ export function OrderDetailPage() {
           </Stack>
         </Box>
       </Stack>
+
+      <Dialog
+        open={Boolean(reviewTarget)}
+        onClose={() => !reviewMut.isPending && setReviewTarget(null)}
+        fullWidth
+        maxWidth="sm"
+      >
+        <DialogTitle>Отзыв: {reviewTarget?.title}</DialogTitle>
+        <DialogContent>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+            Оценка
+          </Typography>
+          <Rating
+            value={reviewRating}
+            onChange={(_, v) => {
+              if (v !== null) setReviewRating(v)
+            }}
+          />
+          <TextField
+            sx={{ mt: 2 }}
+            label="Комментарий (необязательно)"
+            value={reviewText}
+            onChange={(e) => setReviewText(e.target.value)}
+            fullWidth
+            multiline
+            minRows={3}
+          />
+          {reviewMut.isError && (
+            <Alert severity="error" sx={{ mt: 2 }}>
+              {reviewSubmitErrorMessage(reviewMut.error)}
+            </Alert>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setReviewTarget(null)} disabled={reviewMut.isPending}>
+            Отмена
+          </Button>
+          <Button variant="contained" disabled={reviewMut.isPending} onClick={() => reviewMut.mutate()}>
+            Отправить
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   )
 }

client/src/pages/me/ui/sections/OrdersPage.tsx

@@ -7,6 +7,7 @@ import { useQuery } from '@tanstack/react-query'
 import { Link as RouterLink } from 'react-router-dom'
 import { fetchMyOrders } from '@/entities/order/api/order-api'
 import { formatPriceRub } from '@/shared/lib/format-price'
+import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
 
 export function OrdersPage() {
   const ordersQuery = useQuery({
@@ -44,7 +45,7 @@ export function OrdersPage() {
               <Box sx={{ flexGrow: 1 }}>
                 <Typography sx={{ fontWeight: 700 }}>Заказ #{o.id.slice(-6)}</Typography>
                 <Typography color="text.secondary" variant="body2">
-                  Статус: {o.status} · {o.itemsCount} поз.
+                  Статус: {orderStatusLabelRu(o.status)} · {o.itemsCount} поз.
                 </Typography>
               </Box>
               <Typography sx={{ fontWeight: 700 }}>{formatPriceRub(o.totalCents)}</Typography>