feat: implement yookassa redirect payment flow on client

client/src/features/order-payment/ui/OrderPaymentSection.tsx

@@ -1,9 +1,7 @@
-import { useState } from 'react'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
 import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
-import { PaymentDialog } from './PaymentDialog'
 
 type Props = {
   status: string
@@ -12,7 +10,7 @@ type Props = {
   totalCents: number
   isPayPending: boolean
   payError: unknown
-  onPay: (params: { detail: string; receiptFile: File | null }) => void
+  onPay: () => void
 }
 
 export function OrderPaymentSection({
@@ -24,7 +22,6 @@ export function OrderPaymentSection({
   onPay,
 }: Props) {
   const payOnPickup = (paymentMethod ?? 'online') === 'on_pickup'
-  const [payModalOpen, setPayModalOpen] = useState(false)
 
   if (payOnPickup) {
     return (
@@ -52,30 +49,24 @@ export function OrderPaymentSection({
       {status === 'PENDING_PAYMENT' && deliveryFeeLocked === true && (
         <>
           <Typography color="text.secondary" variant="body2" sx={{ mb: 1 }}>
-            После перевода подтвердите оплату — откроется форма для комментария и фото чека. Заказ получит статус «
+            Вы будете перенаправлены на защищённую платёжную страницу ЮKassa. После оплаты заказ получит статус «
             {orderStatusLabelRu('PAID')}».
           </Typography>
-          <Button variant="contained" onClick={() => setPayModalOpen(true)}>
-            Оплатить
+          <Button variant="contained" onClick={onPay} disabled={isPayPending}>
+            {isPayPending ? 'Создание платежа…' : 'Оплатить'}
           </Button>
         </>
       )}
-      {status !== 'PENDING_PAYMENT' && (
-        <Typography color="text.secondary" variant="body2">
-          На этом этапе действий по оплате в этом блоке не требуется.
+      {status === 'PAID' && (
+        <Typography color="success.main" variant="body1">
+          Оплачено. Спасибо!
+        </Typography>
+      )}
+      {status !== 'PENDING_PAYMENT' && status !== 'PAID' && (
+        <Typography color="text.secondary" variant="body2">
+          На этом этапе действий по оплате не требуется.
         </Typography>
       )}
-
-      <PaymentDialog
-        open={payModalOpen}
-        isPending={isPayPending}
-        error={payError}
-        onClose={() => setPayModalOpen(false)}
-        onSubmit={(params) => {
-          onPay(params)
-          setPayModalOpen(false)
-        }}
-      />
     </Box>
   )
 }