feat: implement yookassa redirect payment flow on client

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

@@ -7,12 +7,13 @@ import Link from '@mui/material/Link'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { Link as RouterLink, useParams } from 'react-router-dom'
+import { Link as RouterLink, useParams, useSearchParams } from 'react-router-dom'
 import {
   confirmOrderReceived,
+  createOrderPayment,
   fetchMyOrder,
+  getOrderPaymentStatus,
   postOrderMessage,
-  submitOrderPayment,
   fetchOrderReviewEligibility,
 } from '@/entities/order/api/order-api'
 import { postProductReview, uploadReviewImage } from '@/entities/review/api/reviews-api'
@@ -30,6 +31,9 @@ export function OrderDetailPage() {
   const { id } = useParams()
   const qc = useQueryClient()
 
+  const [searchParams] = useSearchParams()
+  const paidParam = searchParams.get('paid')
+
   const orderQuery = useQuery({
     queryKey: ['me', 'orders', id],
     queryFn: () => fetchMyOrder(id!),
@@ -37,13 +41,20 @@ export function OrderDetailPage() {
   })
 
   const payMut = useMutation({
-    mutationFn: (params: { detail: string; receiptFile: File | null }) => submitOrderPayment(id!, params),
-    onSuccess: async () => {
-      await Promise.all([
-        qc.invalidateQueries({ queryKey: ['me', 'orders', id] }),
-        qc.invalidateQueries({ queryKey: ['me', 'orders'] }),
-        qc.invalidateQueries({ queryKey: ['me', 'conversations'] }),
-      ])
+    mutationFn: () => createOrderPayment(id!),
+    onSuccess: async (data) => {
+      window.location.href = data.confirmationUrl
+    },
+  })
+
+  const paymentStatusQuery = useQuery({
+    queryKey: ['me', 'orders', id, 'payment-status'],
+    queryFn: () => getOrderPaymentStatus(id!),
+    enabled: Boolean(id && paidParam === '1'),
+    refetchInterval: (query) => {
+      const data = query.state.data
+      if (data && (data.paid || data.status === 'canceled')) return false
+      return 3000
     },
   })
 
@@ -117,6 +128,25 @@ export function OrderDetailPage() {
         </Button>
       </Stack>
 
+      {paidParam === '1' && paymentStatusQuery.data && (
+        <Alert
+          severity={
+            paymentStatusQuery.data.paid
+              ? 'success'
+              : paymentStatusQuery.data.status === 'canceled'
+                ? 'warning'
+                : 'info'
+          }
+          sx={{ mb: 2 }}
+        >
+          {paymentStatusQuery.data.paid
+            ? 'Оплата прошла успешно!'
+            : paymentStatusQuery.data.status === 'canceled'
+              ? 'Оплата отмена. Вы можете попробовать снова.'
+              : 'Ожидаем подтверждения оплаты…'}
+        </Alert>
+      )}
+
       <Stack spacing={2} sx={{ maxWidth: 900 }}>
         <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 2, p: 2, bgcolor: 'background.paper' }}>
           <Typography variant="h6" gutterBottom>
@@ -212,7 +242,7 @@ export function OrderDetailPage() {
           totalCents={order.totalCents}
           isPayPending={payMut.isPending}
           payError={payMut.error}
-          onPay={(params) => payMut.mutate(params)}
+          onPay={() => payMut.mutate()}
         />
 
         {(order.deliveryType === 'delivery' && order.status === 'SHIPPED') ||