test commit

client/src/pages/admin-orders/ui/AdminOrdersPage.tsx

@@ -14,76 +14,21 @@ import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import {
-  fetchAdminOrder,
-  fetchAdminOrders,
-  patchAdminOrderDeliveryFee,
-  postAdminOrderMessage,
-  setAdminOrderStatus,
-} from '@/entities/order/api/admin-order-api'
-import { deliveryCarrierLabelRu } from '@/shared/constants/delivery-carrier'
-import { ORDER_STATUSES, getAdminNextOrderStatuses } from '@/shared/constants/order'
+import { useQuery } from '@tanstack/react-query'
+import { fetchAdminOrder, fetchAdminOrders } from '@/entities/order/api/admin-order-api'
+import { OrderDetailContent } from '@/features/order-detail/ui/OrderDetailContent'
+import { ORDER_STATUSES } from '@/shared/constants/order'
 import { formatPriceRub } from '@/shared/lib/format-price'
 import { groupOrdersByStatus } from '@/shared/lib/group-orders-by-status'
-import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
-import { parseOrderAddressSnapshot } from '@/shared/lib/order-address-snapshot'
 import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
 import { AdminDialog } from '@/shared/ui/AdminDialog/AdminDialog'
-import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
-import { OrderMessageBody } from '@/shared/ui/OrderMessageBody'
-import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
-
-function DeliveryFeeAdjustmentForm({ orderId, deliveryFeeCents }: { orderId: string; deliveryFeeCents: number }) {
-  const qc = useQueryClient()
-  const [rub, setRub] = useState(() => String(deliveryFeeCents / 100))
-  const feeMut = useMutation({
-    mutationFn: () => patchAdminOrderDeliveryFee(orderId, Math.round(Number.parseFloat(rub) * 100)),
-    onSuccess: async () => {
-      await invalidateQueryKeys(qc, [
-        ['admin', 'orders'],
-        ['admin', 'orders', 'detail'],
-        ['admin', 'orders', 'summary'],
-      ])
-    },
-  })
-
-  return (
-    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'flex-end' } }}>
-      <TextField
-        size="small"
-        label="Доставка, ₽"
-        type="number"
-        value={rub}
-        onChange={(e) => setRub(e.target.value)}
-        slotProps={{ htmlInput: { min: 0, step: 1 } }}
-        sx={{ width: { xs: '100%', sm: 200 } }}
-      />
-      <Button
-        variant="contained"
-        disabled={
-          feeMut.isPending ||
-          !rub.trim() ||
-          !Number.isFinite(Number.parseFloat(rub)) ||
-          Number.parseFloat(rub) < 0 ||
-          !Number.isInteger(Number.parseFloat(rub))
-        }
-        onClick={() => feeMut.mutate()}
-      >
-        Утвердить доставку и открыть оплату
-      </Button>
-    </Stack>
-  )
-}
 
 export function AdminOrdersPage() {
-  const qc = useQueryClient()
   const [q, setQ] = useState('')
   const [status, setStatus] = useState('')
   const [deliveryType, setDeliveryType] = useState<'delivery' | 'pickup' | ''>('')
   const [dialogOpen, setDialogOpen] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [msg, setMsg] = useState('')
 
   const ordersQuery = useQuery({
     queryKey: ['admin', 'orders', { q, status, deliveryType }],
@@ -101,25 +46,6 @@ export function AdminOrdersPage() {
     enabled: Boolean(selectedId),
   })
 
-  const statusMut = useMutation({
-    mutationFn: (next: string) => setAdminOrderStatus(selectedId!, next),
-    onSuccess: async () => {
-      await invalidateQueryKeys(qc, [
-        ['admin', 'orders'],
-        ['admin', 'orders', 'detail'],
-        ['admin', 'orders', 'summary'],
-      ])
-    },
-  })
-
-  const msgMut = useMutation({
-    mutationFn: () => postAdminOrderMessage(selectedId!, msg.trim()),
-    onSuccess: async () => {
-      setMsg('')
-      await invalidateQueryKeys(qc, [['admin', 'orders', 'detail']])
-    },
-  })
-
   const open = (id: string) => {
     setSelectedId(id)
     setDialogOpen(true)
@@ -136,17 +62,6 @@ export function AdminOrdersPage() {
   )
 
   const detail = orderDetailQuery.data?.item
-  const canSendMessage = msg.replace(/<[^>]*>/g, ' ').trim().length > 0
-
-  const deliverySnapshot = useMemo(
-    () => (detail?.deliveryType === 'delivery' ? parseOrderAddressSnapshot(detail.addressSnapshotJson) : null),
-    [detail],
-  )
-
-  const nextStatuses = useMemo(() => {
-    if (!detail) return []
-    return getAdminNextOrderStatuses(detail.status, detail.deliveryType ?? 'delivery')
-  }, [detail])
 
   return (
     <Box>
@@ -252,146 +167,7 @@ export function AdminOrdersPage() {
         loading={!detail && orderDetailQuery.isLoading}
         error={orderDetailQuery.isError ? 'Не удалось загрузить заказ.' : null}
       >
-        {detail && (
-          <Stack spacing={2} sx={{ mt: 1 }}>
-            <Typography sx={{ fontWeight: 700 }}>
-              #{detail.id.slice(-8)} · {detail.user.email} · {orderStatusLabelRu(detail.status)} ·{' '}
-              {formatPriceRub(detail.totalCents)}
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              Получение: {detail.deliveryType === 'pickup' ? 'самовывоз' : 'доставка'}
-              {(detail.paymentMethod ?? 'online') === 'on_pickup' ? ' · оплата при получении' : ' · онлайн-оплата'}
-              {detail.deliveryType === 'delivery' && deliveryCarrierLabelRu(detail.deliveryCarrier) && (
-                <> · служба: {deliveryCarrierLabelRu(detail.deliveryCarrier)}</>
-              )}
-            </Typography>
-
-            {detail.deliveryType === 'delivery' && (
-              <Box
-                sx={{
-                  border: 1,
-                  borderColor: 'divider',
-                  borderRadius: 1,
-                  p: 1.5,
-                  bgcolor: 'action.hover',
-                }}
-              >
-                <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 700 }}>
-                  Адрес и получатель (на момент заказа)
-                </Typography>
-                {deliverySnapshot ? (
-                  <Stack spacing={0.75}>
-                    {deliverySnapshot.label?.trim() && (
-                      <Typography variant="body2" color="text.secondary">
-                        Метка: {deliverySnapshot.label}
-                      </Typography>
-                    )}
-                    <Typography variant="body2">
-                      <Box component="span" sx={{ color: 'text.secondary' }}>
-                        Адрес:
-                      </Box>{' '}
-                      {deliverySnapshot.addressLine ?? '—'}
-                    </Typography>
-                    <Typography variant="body2">
-                      <Box component="span" sx={{ color: 'text.secondary' }}>
-                        Получатель:
-                      </Box>{' '}
-                      {deliverySnapshot.recipientName ?? '—'}
-                    </Typography>
-                    <Typography variant="body2">
-                      <Box component="span" sx={{ color: 'text.secondary' }}>
-                        Телефон:
-                      </Box>{' '}
-                      {deliverySnapshot.recipientPhone ?? '—'}
-                    </Typography>
-                    {deliverySnapshot.comment?.trim() && (
-                      <Typography variant="body2" color="text.secondary">
-                        Комментарий к адресу: {deliverySnapshot.comment}
-                      </Typography>
-                    )}
-                  </Stack>
-                ) : (
-                  <Typography color="text.secondary" variant="body2">
-                    Данные адреса в заказе отсутствуют или не распознаны.
-                  </Typography>
-                )}
-              </Box>
-            )}
-
-            {detail.status === 'PENDING_PAYMENT' && detail.deliveryFeeLocked === false && (
-              <Alert severity="info">
-                Укажите итоговую стоимость доставки (₽). После сохранения клиент сможет оплатить заказ с учётом этой
-                суммы.
-              </Alert>
-            )}
-
-            {detail.status === 'PENDING_PAYMENT' && detail.deliveryFeeLocked === false && (
-              <DeliveryFeeAdjustmentForm
-                key={detail.id}
-                orderId={detail.id}
-                deliveryFeeCents={detail.deliveryFeeCents}
-              />
-            )}
-
-            <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'center' } }}>
-              <FormControl size="small" sx={{ minWidth: 240 }}>
-                <InputLabel id="next-status-label">Сменить статус</InputLabel>
-                <Select
-                  labelId="next-status-label"
-                  label="Сменить статус"
-                  value=""
-                  onChange={(e) => {
-                    const next = String(e.target.value)
-                    if (!next) return
-                    statusMut.mutate(next)
-                  }}
-                  disabled={statusMut.isPending || nextStatuses.length === 0}
-                >
-                  <MenuItem value="">
-                    <em>Выберите…</em>
-                  </MenuItem>
-                  {nextStatuses.map((s) => (
-                    <MenuItem key={s} value={s}>
-                      {orderStatusLabelRu(s)}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Stack>
-
-            <Box>
-              <Typography variant="subtitle2" sx={{ mb: 1 }}>
-                Сообщения
-              </Typography>
-              <Stack spacing={1} sx={{ mb: 1 }}>
-                {detail.messages.map((m) => (
-                  <ChatMessageBubble key={m.id} authorType={m.authorType === 'admin' ? 'user' : 'admin'}>
-                    <Typography variant="caption" color="text.secondary">
-                      {m.authorType === 'admin' ? 'Админ (вы)' : 'Пользователь'} ·{' '}
-                      {new Date(m.createdAt).toLocaleString()}
-                    </Typography>
-                    <OrderMessageBody text={m.text} attachmentUrl={m.attachmentUrl} />
-                  </ChatMessageBubble>
-                ))}
-                {detail.messages.length === 0 && <Typography color="text.secondary">Нет сообщений.</Typography>}
-              </Stack>
-
-              <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2} sx={{ alignItems: { sm: 'flex-end' } }}>
-                <Box sx={{ flexGrow: 1, width: '100%' }}>
-                  <RichTextMessageEditor value={msg} onChange={setMsg} placeholder="Ответ админа" />
-                </Box>
-                <Button
-                  variant="contained"
-                  onClick={() => msgMut.mutate()}
-                  disabled={msgMut.isPending || !canSendMessage}
-                  sx={{ minWidth: 160 }}
-                >
-                  Отправить
-                </Button>
-              </Stack>
-            </Box>
-          </Stack>
-        )}
+        {detail && <OrderDetailContent detail={detail} orderId={detail.id} />}
       </AdminDialog>
     </Box>
   )