Files
shop-server/docs/superpowers/specs/2026-05-19-info-page-static-design.md
T
2026-05-19 15:32:45 +05:00

6.2 KiB
Raw Blame History

2026-05-19 — Статическая страница «О покупке» (удаление админ-CRUD)

Цель

Убрать ручное наполнение информационной страницы админом через InfoPageBlock CRUD. Заменить на статическую страницу с хардкод-контентом в React-компонентах: схемы процессов, пошаговые инструкции, карточки доставки, список оплат, условия возврата.

Что удаляется

Файл/директория Действие
client/src/pages/admin-info/ Удалить целиком (AdminInfoPage + index.ts)
client/src/entities/info/ Удалить целиком (api, model, index.ts)
server/src/routes/api/info-page.js Удалить целиком
server/src/routes/api.js Убрать import + вызов registerInfoPageRoutes
server/prisma/schema.prisma Удалить модель InfoPageBlock и связанный индекс
client/src/pages/admin-layout/ui/AdminLayoutPage.tsx Убрать пункт меню «Инфо-страница», импорт и роут
Миграция 20260503144425_... Не трогать, Prisma обработает через db:migrate

После удаления модели Prisma нужно выполнить npm run db:migrate в server/.

Что остаётся

  • Публичный роут GET /api/info-page/blocks удаляется — страница больше не ходит на сервер
  • Роут /info в client/src/app/routes/index.tsx остаётся как есть
  • Ссылка «О покупке» в футере MainLayout.tsx остаётся как есть

Новая структура страницы

client/src/pages/info/
  ui/
    InfoPage.tsx                    -- контейнер: заголовок + секции
    sections/
      HowToOrderSection.tsx         -- Stepper: 5 шагов покупки
      DeliverySection.tsx           -- Grid-карточки: самовывоз, курьер, почта
      PaymentSection.tsx            -- List со способами оплаты
      ReturnsSection.tsx            -- Paper-блоки: возврат, гарантия
  index.ts                          -- export { InfoPage }

Дизайн секций

InfoPage (контейнер)

  • Typography variant="h4": «Информация для покупателей»
  • Typography color="text.secondary" с текущим подзаголовком
  • Секции рендерятся последовательно с Stack spacing={4}

HowToOrderSection

  • MUI Stepper вертикальный, activeStep=-1 (все шаги видны, не активные)
  • 5 шагов с StepLabel, каждый содержит:
    • Заголовок шага
    • Пояснительный текст
    • Иконку через StepIconComponent или проп icon в Step

Шаги:

  1. «Выберите товары» (ShoppingCart) — Найдите нужное в каталоге, добавьте в корзину
  2. «Проверьте корзину» (ClipboardList) — Проверьте состав заказа, количество и итоговую сумму
  3. «Укажите контакты и адрес» (Mail) — Заполните имя, телефон, email и адрес доставки
  4. «Выберите доставку и оплату» (Truck) — Выберите удобный способ получения и оплаты
  5. «Подтвердите заказ» (CheckCircle) — Проверьте всё ещё раз и нажмите «Оформить заказ»

DeliverySection

  • Три карточки в Grid container spacing={2} с Paper variant="outlined":
    • Самовывоз (Store) — Бесплатно. Адрес. Перед визитом согласуем время.
    • Курьер по городу (Truck) — Доставка в пределах города. Сроки и стоимость уточняются.
    • Почта / СДЭК (Package) — Отправка с трек-номером. Стоимость по тарифу перевозчика.

PaymentSection

  • MUI List с ListItem элементами, каждый с ListItemIcon:
    • Банковская карта онлайн (CreditCard)
    • Оплата при получении (Banknote)
  • Текст: «Оплата происходит после подтверждения заказа мастером.»

ReturnsSection

  • Два Paper variant="outlined" блока:
    • «Возврат» — Если товар не соответствует описанию или есть дефект, свяжитесь с нами. Мы заменим изделие или вернём деньги.
    • «Гарантия» — Мы отвечаем за качество каждого изделия. Все дефекты, возникшие не по вине покупателя, устраняем или меняем изделие.

Константы

Использовать существующие:

  • PICKUP_ADDRESS_FULL, PICKUP_COORDINATES из @/shared/constants/pickup-point
  • STORE_EMAIL из @/shared/constants/store
  • Для способов оплаты — текст захардкожен, т.к. payment-method из shared/constants содержит только ключи

Иконки

Все иконки из lucide-react: ShoppingCart, ClipboardList, Mail, Truck, CheckCircle, Store, Package, CreditCard, Banknote.

Что НЕ входит в scope

  • Сохранение обратной совместимости с текущей динамической страницей
  • Миграция существующих данных InfoPageBlock (они просто удаляются)
  • Автообновление контента админом (страница статическая)
  • Телефоны поддержки (если понадобятся — отдельной задачей)