uchill/front_material/docs/ONBOARDING.md

Онбординг-туры для платформы

Контекстные подсказки при первом посещении страниц для менторов, студентов и родителей. Используется библиотека Driver.js.

Архитектура

Backend

• Поле User.onboarding_tours_seen (JSONField): {"mentor-dashboard": true, "mentor-schedule": false, ...} — какие туры уже просмотрены.
• API:
  • GET /profile/settings/ — возвращает onboarding_tours_seen в ответе.
  • PATCH /profile/update_settings/ — принимает onboarding_tours_seen и сливает с текущим состоянием.

Frontend

• OnboardingProvider (contexts/OnboardingContext.tsx): при смене страницы проверяет, нужен ли тур для текущей роли. Если тур ещё не просмотрен — запускает Driver.js.
• Шаги (lib/onboarding-steps.ts): определения шагов по страницам и ролям (MENTOR_ONBOARDING, CLIENT_ONBOARDING, PARENT_ONBOARDING).
• data-tour атрибуты: элементы с data-tour="..." используются как цели для подсветки (например, mentor-income, schedule-calendar, client-lessons).

Страницы и шаги

Ментор

• dashboard — Динамика доходов, Ближайшие занятия, Недавние сдачи, Навигация
• schedule — Календарь, форма создания занятия
• students, materials, homework, feedback, analytics, payment, profile

Студент (client)

• dashboard — Ближайшие занятия, Навигация
• schedule, materials, homework, my-progress, request-mentor, profile

Родитель

• dashboard — Выбор ребёнка, Занятия ребёнка, Навигация
• homework, my-progress, profile

Добавление новых шагов

1. Добавить шаги в lib/onboarding-steps.ts в нужный объект (MENTOR_ONBOARDING, CLIENT_ONBOARDING, PARENT_ONBOARDING).
2. Добавить data-tour="уникальный-id" на целевой элемент в компоненте.
3. Шаги без element или с несуществующим селектором отображаются как overlay по центру.

Ручной запуск тура

const { runTourManually } = useOnboarding();
runTourManually('dashboard'); // для текущей роли