From 2fe426b70a2fbf0af37712bc681cd5c0750870b3 Mon Sep 17 00:00:00 2001 From: Kirill Date: Sun, 24 May 2026 13:43:23 +0500 Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B2=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../5692-1779609387/state/server.pid | 1 + .../7074-1779609479/state/server-info | 1 + .../7074-1779609479/state/server.pid | 1 + client/src/pages/info/ui/InfoPage.tsx | 2 + .../info/ui/sections/DeliverySection.tsx | 76 +++++++----- .../info/ui/sections/HowToOrderSection.tsx | 115 +++++++++++++++--- .../info/ui/sections/OrderStatusesSection.tsx | 47 +++++++ .../pages/info/ui/sections/PaymentSection.tsx | 8 +- .../pages/me/ui/sections/OrderDetailPage.tsx | 11 +- client/src/shared/constants/pickup-point.ts | 3 + client/src/shared/lib/order-status-data.ts | 67 ++++++++++ client/src/shared/lib/order-status-labels.ts | 2 +- client/src/shared/ui/OrderStatusChip.tsx | 34 ++++++ .../2026-05-24-info-page-redesign-design.md | 91 ++++++++++++++ server/prisma/prisma/dev.db | Bin 364544 -> 364544 bytes .../templates/telegram-templates.js | 4 +- shared/constants/order-status.js | 44 +++---- 17 files changed, 425 insertions(+), 82 deletions(-) create mode 100644 .superpowers/brainstorm/5692-1779609387/state/server.pid create mode 100644 .superpowers/brainstorm/7074-1779609479/state/server-info create mode 100644 .superpowers/brainstorm/7074-1779609479/state/server.pid create mode 100644 client/src/pages/info/ui/sections/OrderStatusesSection.tsx create mode 100644 client/src/shared/lib/order-status-data.ts create mode 100644 client/src/shared/ui/OrderStatusChip.tsx create mode 100644 docs/superpowers/specs/2026-05-24-info-page-redesign-design.md diff --git a/.superpowers/brainstorm/5692-1779609387/state/server.pid b/.superpowers/brainstorm/5692-1779609387/state/server.pid new file mode 100644 index 0000000..7a1f00d --- /dev/null +++ b/.superpowers/brainstorm/5692-1779609387/state/server.pid @@ -0,0 +1 @@ +5700 diff --git a/.superpowers/brainstorm/7074-1779609479/state/server-info b/.superpowers/brainstorm/7074-1779609479/state/server-info new file mode 100644 index 0000000..a9aa216 --- /dev/null +++ b/.superpowers/brainstorm/7074-1779609479/state/server-info @@ -0,0 +1 @@ +{"type":"server-started","port":53669,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:53669","screen_dir":"/mnt/d/my_projects/shop/.superpowers/brainstorm/7074-1779609479/content","state_dir":"/mnt/d/my_projects/shop/.superpowers/brainstorm/7074-1779609479/state"} diff --git a/.superpowers/brainstorm/7074-1779609479/state/server.pid b/.superpowers/brainstorm/7074-1779609479/state/server.pid new file mode 100644 index 0000000..c048eab --- /dev/null +++ b/.superpowers/brainstorm/7074-1779609479/state/server.pid @@ -0,0 +1 @@ +7319 diff --git a/client/src/pages/info/ui/InfoPage.tsx b/client/src/pages/info/ui/InfoPage.tsx index bbfad43..81dd0f5 100644 --- a/client/src/pages/info/ui/InfoPage.tsx +++ b/client/src/pages/info/ui/InfoPage.tsx @@ -3,6 +3,7 @@ import Stack from '@mui/material/Stack' import Typography from '@mui/material/Typography' import { DeliverySection } from './sections/DeliverySection' import { HowToOrderSection } from './sections/HowToOrderSection' +import { OrderStatusesSection } from './sections/OrderStatusesSection' import { PaymentSection } from './sections/PaymentSection' import { ReturnsSection } from './sections/ReturnsSection' @@ -20,6 +21,7 @@ export function InfoPage() { + diff --git a/client/src/pages/info/ui/sections/DeliverySection.tsx b/client/src/pages/info/ui/sections/DeliverySection.tsx index 2a6cc01..72c6377 100644 --- a/client/src/pages/info/ui/sections/DeliverySection.tsx +++ b/client/src/pages/info/ui/sections/DeliverySection.tsx @@ -1,27 +1,13 @@ import Grid from '@mui/material/Grid' +import Link from '@mui/material/Link' import Paper from '@mui/material/Paper' import Stack from '@mui/material/Stack' import Typography from '@mui/material/Typography' import { Package, Store } from 'lucide-react' +import { Link as RouterLink } from 'react-router-dom' +import { DELIVERY_CARRIER_OPTIONS } from '@/shared/constants/delivery-carrier' import { PICKUP_ADDRESS_FULL } from '@/shared/constants/pickup-point' -const deliveries = [ - { - title: 'Самовывоз', - icon: , - lines: ['Бесплатно.', PICKUP_ADDRESS_FULL, 'Перед визитом согласуем время — чтобы заказ точно был готов к выдаче.'], - }, - { - title: 'Почта / Службы доставки', - icon: , - lines: [ - 'Отправка в другие города.', - 'Каждому заказу присваивается трек-номер для отслеживания.', - 'Стоимость рассчитывается по тарифу перевозчика при оформлении.', - ], - }, -] - export function DeliverySection() { return ( @@ -29,23 +15,51 @@ export function DeliverySection() { Доставка - {deliveries.map((d) => ( - - - - - {d.icon} - {d.title} - - {d.lines.map((line, i) => ( - - {line} + + + + + + Самовывоз + + + Бесплатно. + + + {PICKUP_ADDRESS_FULL} + + + Перед визитом согласуем время — чтобы заказ точно был готов к выдаче. + + + Посмотреть на карте + + + + + + + + + + Доставка по России + + + Доступные службы доставки: + + + {DELIVERY_CARRIER_OPTIONS.map((c) => ( + + {c.label} ))} - - - ))} + + Стоимость рассчитывается по тарифу перевозчика. Админ скорректирует цену после оформления заказа. + + + + ) diff --git a/client/src/pages/info/ui/sections/HowToOrderSection.tsx b/client/src/pages/info/ui/sections/HowToOrderSection.tsx index c51a52d..e776bb0 100644 --- a/client/src/pages/info/ui/sections/HowToOrderSection.tsx +++ b/client/src/pages/info/ui/sections/HowToOrderSection.tsx @@ -1,12 +1,30 @@ +import { useState } from 'react' +import Box from '@mui/material/Box' +import Link from '@mui/material/Link' 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 Tab from '@mui/material/Tab' +import Tabs from '@mui/material/Tabs' import Typography from '@mui/material/Typography' -import { CheckCircle, ClipboardList, Mail, ShoppingCart, Truck } from 'lucide-react' +import { + CheckCircle, + ClipboardList, + Clock, + CreditCard, + MapPin, + PackageOpen, + ShoppingCart, + Star, + Store, + Truck, +} from 'lucide-react' +import { Link as RouterLink } from 'react-router-dom' +import { PICKUP_ADDRESS_SHORT } from '@/shared/constants/pickup-point' -const steps = [ +const commonSteps = [ { label: 'Выберите товары', icon: , @@ -17,39 +35,96 @@ const steps = [ icon: , text: 'Перейдите в корзину и проверьте состав заказа: названия товаров, количество и итоговую сумму. Здесь же можно изменить количество или удалить позиции.', }, +] + +const deliverySteps = [ { - label: 'Укажите контакты и адрес', - icon: , - text: 'Заполните имя, телефон и email для связи. Укажите адрес доставки — город, улицу, дом и квартиру. Эти данные нужны для расчёта стоимости и сроков.', + label: 'Укажите адрес доставки и получателя', + icon: , + text: 'Заполните имя, телефон, email и адрес доставки. Если у вас уже есть сохранённые адреса — выберите из списка или добавьте новый в личном кабинете.', }, { - label: 'Выберите доставку и оплату', + label: 'Выберите способ доставки', icon: , - text: 'Выберите способ доставки: самовывоз, курьер или почта/СДЭК. Затем укажите способ оплаты: картой онлайн или при получении.', + text: 'Доступны: Почта России, Озон ПВЗ, Яндекс ПВЗ, 5Post, WB ПВЗ. После оформления админ рассчитает точную стоимость доставки и скорректирует цену заказа.', }, { - label: 'Подтвердите заказ', - icon: , - text: 'Проверьте все данные ещё раз и нажмите «Оформить заказ». После этого мастер получит уведомление и начнёт подготовку вашего изделия.', + label: 'Оплатите заказ', + icon: , + text: 'Онлайн-оплата через ЮKassa — банковские карты и СБП. Перенаправление на защищённую платёжную страницу.', + }, + { + label: 'Получите заказ', + icon: , + text: 'После отправки вы получите трек-номер для отслеживания. Следите за статусом заказа в личном кабинете.', }, ] +const pickupSteps = [ + { + label: 'Подтвердите заказ', + icon: , + text: 'Выберите способ оплаты: онлайн через ЮKassa (карты, СБП) или при получении (наличные / карта).', + }, + { + label: 'Согласуйте время получения', + icon: , + text: 'Админ свяжется с вами, чтобы договориться об удобном времени выдачи заказа.', + }, + { + label: 'Получите заказ', + icon: , + text: `Адрес: ${PICKUP_ADDRESS_SHORT}. Перед визитом согласуем время, чтобы заказ точно был готов.`, + }, +] + +function BranchStepper({ steps }: { steps: typeof deliverySteps }) { + return ( + + {steps.map((step) => ( + + step.icon }}>{step.label} + + {step.text} + + + ))} + + ) +} + export function HowToOrderSection() { + const [tab, setTab] = useState(0) + return ( Как оформить заказ - - {steps.map((step) => ( - - step.icon }}>{step.label} - - {step.text} - - - ))} - + + + setTab(v)} variant="fullWidth"> + + + + + {tab === 0 && } + {tab === 1 && ( + + + + + Посмотреть на карте + + + + )} + + + + После получения заказа вы можете оставить отзыв в личном кабинете. + + ) } diff --git a/client/src/pages/info/ui/sections/OrderStatusesSection.tsx b/client/src/pages/info/ui/sections/OrderStatusesSection.tsx new file mode 100644 index 0000000..29c079a --- /dev/null +++ b/client/src/pages/info/ui/sections/OrderStatusesSection.tsx @@ -0,0 +1,47 @@ +import type { ReactElement } from 'react' +import Chip from '@mui/material/Chip' +import Paper from '@mui/material/Paper' +import Stack from '@mui/material/Stack' +import Typography from '@mui/material/Typography' +import { Banknote, CheckCircle, Package, PackageCheck, PackageSearch, Store, XCircle } from 'lucide-react' +import { ORDER_STATUS_DATA, type StatusIconName } from '@/shared/lib/order-status-data' + +const iconMap: Record = { + banknote: , + 'check-circle': , + 'package-search': , + package: , + 'package-check': , + store: , + 'x-circle': , +} + +export function OrderStatusesSection() { + return ( + + + Статусы заказа + + + Текущий статус отображается в личном кабинете. Вот что означает каждый из них: + + + {ORDER_STATUS_DATA.map((s) => ( + + + + {s.description} + + + ))} + + + ) +} diff --git a/client/src/pages/info/ui/sections/PaymentSection.tsx b/client/src/pages/info/ui/sections/PaymentSection.tsx index d558824..4288910 100644 --- a/client/src/pages/info/ui/sections/PaymentSection.tsx +++ b/client/src/pages/info/ui/sections/PaymentSection.tsx @@ -9,13 +9,13 @@ import { Banknote, CreditCard } from 'lucide-react' const methods = [ { icon: , - primary: 'Банковская карта онлайн', - secondary: 'Оплата картой Visa, Mastercard или МИР сразу при оформлении заказа.', + primary: 'Онлайн-оплата через ЮKassa (карты, СБП)', + secondary: 'Оплата после подтверждения заказа админом. Перенаправление на защищённую платёжную страницу ЮKassa.', }, { icon: , primary: 'Оплата при получении', - secondary: 'Оплата наличными или картой при получении заказа.', + secondary: 'Наличными или картой при самовывозе.', }, ] @@ -26,7 +26,7 @@ export function PaymentSection() { Оплата - Оплата происходит после подтверждения заказа мастером. Вы получите уведомление, когда заказ будет подтверждён и + Оплата происходит после подтверждения заказа админом. Вы получите уведомление, когда заказ будет подтверждён и готов к оплате. diff --git a/client/src/pages/me/ui/sections/OrderDetailPage.tsx b/client/src/pages/me/ui/sections/OrderDetailPage.tsx index ae3d180..720e53f 100644 --- a/client/src/pages/me/ui/sections/OrderDetailPage.tsx +++ b/client/src/pages/me/ui/sections/OrderDetailPage.tsx @@ -25,7 +25,7 @@ import { deliveryCarrierLabelRu } from '@/shared/constants/delivery-carrier' import { PICKUP_ADDRESS_FULL } from '@/shared/constants/pickup-point' import { formatPriceRub } from '@/shared/lib/format-price' import { parseOrderAddressSnapshot } from '@/shared/lib/order-address-snapshot' -import { orderStatusLabelRu } from '@/shared/lib/order-status-labels' +import { OrderStatusChip } from '@/shared/ui/OrderStatusChip' export function OrderDetailPage() { const { id } = useParams() @@ -130,7 +130,14 @@ export function OrderDetailPage() { Заказ #{order.id.slice(-6)} - Статус: {orderStatusLabelRu(order.status)} +