50 lines
2.6 KiB
Markdown
50 lines
2.6 KiB
Markdown
# Онбординг-туры для платформы
|
||
|
||
Контекстные подсказки при первом посещении страниц для менторов, студентов и родителей. Используется библиотека **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 по центру.
|
||
|
||
## Ручной запуск тура
|
||
|
||
```ts
|
||
const { runTourManually } = useOnboarding();
|
||
runTourManually('dashboard'); // для текущей роли
|
||
```
|