Kirill
56 lines
2.8 KiB
TypeScript
56 lines
2.8 KiB
TypeScript
import Paper from '@mui/material/Paper'
|
||
import Step from '@mui/material/Step'
|
||
import StepContent from '@mui/material/StepContent'
|
||
import StepLabel from '@mui/material/StepLabel'
|
||
import Stepper from '@mui/material/Stepper'
|
||
import Typography from '@mui/material/Typography'
|
||
import { CheckCircle, ClipboardList, Mail, ShoppingCart, Truck } from 'lucide-react'
|
||
|
||
const steps = [
|
||
{
|
||
label: 'Выберите товары',
|
||
icon: <ShoppingCart size={20} />,
|
||
text: 'Найдите нужные изделия в каталоге и добавьте их в корзину. Вы можете выбрать несколько товаров от разных мастеров — все они соберутся в одном заказе.',
|
||
},
|
||
{
|
||
label: 'Проверьте корзину',
|
||
icon: <ClipboardList size={20} />,
|
||
text: 'Перейдите в корзину и проверьте состав заказа: названия товаров, количество и итоговую сумму. Здесь же можно изменить количество или удалить позиции.',
|
||
},
|
||
{
|
||
label: 'Укажите контакты и адрес',
|
||
icon: <Mail size={20} />,
|
||
text: 'Заполните имя, телефон и email для связи. Укажите адрес доставки — город, улицу, дом и квартиру. Эти данные нужны для расчёта стоимости и сроков.',
|
||
},
|
||
{
|
||
label: 'Выберите доставку и оплату',
|
||
icon: <Truck size={20} />,
|
||
text: 'Выберите способ доставки: самовывоз, курьер или почта/СДЭК. Затем укажите способ оплаты: картой онлайн или при получении.',
|
||
},
|
||
{
|
||
label: 'Подтвердите заказ',
|
||
icon: <CheckCircle size={20} />,
|
||
text: 'Проверьте все данные ещё раз и нажмите «Оформить заказ». После этого мастер получит уведомление и начнёт подготовку вашего изделия.',
|
||
},
|
||
]
|
||
|
||
export function HowToOrderSection() {
|
||
return (
|
||
<Paper variant="outlined" sx={{ p: 3, borderRadius: 2 }}>
|
||
<Typography variant="h5" gutterBottom>
|
||
Как оформить заказ
|
||
</Typography>
|
||
<Stepper orientation="vertical" activeStep={-1}>
|
||
{steps.map((step) => (
|
||
<Step key={step.label} completed={false}>
|
||
<StepLabel slots={{ stepIcon: () => step.icon }}>{step.label}</StepLabel>
|
||
<StepContent>
|
||
<Typography color="text.secondary">{step.text}</Typography>
|
||
</StepContent>
|
||
</Step>
|
||
))}
|
||
</Stepper>
|
||
</Paper>
|
||
)
|
||
}
|