feat: add PaymentSection with card and cash methods
This commit is contained in:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user