Kirill
104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import Box from '@mui/material/Box'
|
||
import Stack from '@mui/material/Stack'
|
||
import Typography from '@mui/material/Typography'
|
||
import { Banknote, CreditCard } from 'lucide-react'
|
||
|
||
const methods = [
|
||
{
|
||
icon: <CreditCard size={18} />,
|
||
primary: 'Онлайн-оплата через ЮKassa',
|
||
secondary: 'Карты, СБП. Оплата после подтверждения заказа админом. Перенаправление на защищённую платёжную страницу.',
|
||
},
|
||
{
|
||
icon: <Banknote size={18} />,
|
||
primary: 'Оплата при получении',
|
||
secondary: 'Наличными или картой при самовывозе.',
|
||
},
|
||
]
|
||
|
||
export function PaymentSection() {
|
||
return (
|
||
<Box>
|
||
<Typography
|
||
variant="h5"
|
||
sx={{
|
||
fontWeight: 700,
|
||
letterSpacing: '-0.03em',
|
||
lineHeight: 1.15,
|
||
mb: 1,
|
||
}}
|
||
>
|
||
Оплата
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontSize: '0.8rem',
|
||
color: 'text.secondary',
|
||
lineHeight: 1.65,
|
||
mb: 3,
|
||
maxWidth: '56ch',
|
||
}}
|
||
>
|
||
Оплата происходит после подтверждения заказа админом. Вы получите уведомление, когда заказ будет подтверждён и готов к оплате.
|
||
</Typography>
|
||
|
||
<Stack spacing={2}>
|
||
{methods.map((m) => (
|
||
<Stack
|
||
key={m.primary}
|
||
direction="row"
|
||
spacing={2}
|
||
sx={{
|
||
alignItems: 'flex-start',
|
||
p: 2.5,
|
||
borderRadius: '12px',
|
||
border: '1px solid',
|
||
borderColor: 'divider',
|
||
transition: 'all 0.2s ease',
|
||
'&:hover': {
|
||
borderColor: 'action.disabledBackground',
|
||
},
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: 36,
|
||
height: 36,
|
||
borderRadius: '8px',
|
||
backgroundColor: 'action.hover',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
color: 'text.secondary',
|
||
flexShrink: 0,
|
||
}}
|
||
>
|
||
{m.icon}
|
||
</Box>
|
||
<Stack spacing={0.25}>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 600,
|
||
fontSize: '0.875rem',
|
||
letterSpacing: '-0.01em',
|
||
}}
|
||
>
|
||
{m.primary}
|
||
</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontSize: '0.8rem',
|
||
color: 'text.secondary',
|
||
lineHeight: 1.6,
|
||
}}
|
||
>
|
||
{m.secondary}
|
||
</Typography>
|
||
</Stack>
|
||
</Stack>
|
||
))}
|
||
</Stack>
|
||
</Box>
|
||
)
|
||
}
|