From 22ac9e381d1dc465728855e87c4f683b32e70075 Mon Sep 17 00:00:00 2001
From: Kirill <mpak8501@yandex.ru>
Date: Tue, 19 May 2026 14:43:58 +0500
Subject: [PATCH] feat: add PaymentSection with card and cash methods

---
 .../pages/info/ui/sections/PaymentSection.tsx | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 client/src/pages/info/ui/sections/PaymentSection.tsx

diff --git a/client/src/pages/info/ui/sections/PaymentSection.tsx b/client/src/pages/info/ui/sections/PaymentSection.tsx
new file mode 100644
index 0000000..53eeb41
--- /dev/null
+++ b/client/src/pages/info/ui/sections/PaymentSection.tsx
@@ -0,0 +1,33 @@
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import { Banknote, CreditCard } from 'lucide-react'
+
+const methods = [
+  { icon: <CreditCard size={22} />, primary: 'Банковская карта онлайн', secondary: 'Оплата картой Visa, Mastercard или МИР сразу при оформлении заказа.' },
+  { icon: <Banknote size={22} />, primary: 'Оплата при получении', secondary: 'Оплата наличными или картой при получении заказа у курьера или в пункте самовывоза.' },
+]
+
+export function PaymentSection() {
+  return (
+    <Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
+      <Typography variant="h5" gutterBottom>
+        Оплата
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        Оплата происходит после подтверждения заказа мастером. Вы получите уведомление, когда заказ будет подтверждён и готов к оплате.
+      </Typography>
+      <List disablePadding>
+        {methods.map((m) => (
+          <ListItem key={m.primary} disableGutters>
+            <ListItemIcon sx={{ minWidth: 40 }}>{m.icon}</ListItemIcon>
+            <ListItemText primary={m.primary} secondary={m.secondary} />
+          </ListItem>
+        ))}
+      </List>
+    </Paper>
+  )
+}