marketing/INTEGRATION_GUIDE.md

Интеграция маркетингового анализа v4.0 в существующую архитектуру

✅ Что было сделано

1. Восстановлена старая архитектура Vue.js

• Восстановлены все файлы из origin/main
• Сохранена структура проекта (Vue 3 + PrimeVue + Vite)

2. Добавлен новый функционал v4.0

Типы и сервисы

• src/types/marketing-v3.js — все enum'ы и маппинги для UI
• src/service/MarketingV3Service.js — API сервис для работы с v4.0

Новый многошаговый опросник

• src/components/marketing/MarketingBriefWizardV3.vue — главный компонент опросника
• src/components/marketing/wizard/StepSection.vue — секция шага
• src/components/marketing/wizard/RadioGroupField.vue — радио-группа с карточками
• src/components/marketing/wizard/CheckboxCardsLimitedField.vue — чекбоксы с ограничением (max 2)
• src/components/marketing/wizard/CheckboxCardsField.vue — обычные чекбоксы
• src/components/marketing/wizard/TagArrayField.vue — поле для массивов (города)
• src/components/marketing/wizard/DynamicLinksField.vue — динамические ссылки

Дашборд результатов

• src/views/pages/marketing/MarketingAnalysisV3.vue — страница результатов с поллингом
• src/components/marketing/MetricCard.vue — карточка метрики

3. Обновлён дизайн существующих компонентов

• src/views/pages/auth/Login.vue — обновлён под новый стиль (градиенты, современные карточки)
• src/views/pages/marketing/MarketingMain.vue — добавлена ссылка на новый опросник v4.0, улучшен hover-эффект

4. Добавлены новые роуты

• /marketing-analysis/v3 — новый опросник v4.0
• /marketing-analysis/v3/:id — страница результатов анализа v4.0

---

🚀 Как запустить и протестировать

1. Установка зависимостей

npm install

2. Запуск проекта

npm run dev

Открой в браузере: http://localhost:5173 (или другой порт, который покажет Vite)

3. Тестирование нового функционала

Шаг 1: Авторизация

1. Перейди на /auth/login
2. Войди в систему (используй существующие credentials)

Шаг 2: Новый опросник v4.0

1. Перейди в раздел "Маркетинг" (/marketing-analysis)
2. Выбери "Маркетинговый анализ v4.0 (новый)" — первый пункт в меню
3. Или перейди напрямую на /marketing-analysis/v3

Шаг 3: Заполнение опросника

• Пройди все 5 шагов:
  1. Базовая информация — ниша, название, цель, этап бизнеса
  2. География и чек — города, средний чек
  3. Продукт и поведение — описание, частота покупок, приоритеты
  4. Текущая ситуация — SMM статус, заявки, ограничения
  5. Ссылки и настройки — соцсети, конкуренты, уровень детализации

Особенности:

• Ограничение выбора: некоторые поля позволяют выбрать только 1–2 варианта (карточки серые, если достигнут лимит)
• Динамические поля: города добавляются по Enter, ссылки — кнопкой "Добавить ссылку"
• Казахстанские примеры в placeholder'ах (Алматы, Астана, Шымкент и т.д.)

Шаг 4: Результаты анализа

• После отправки формы тебя перенаправит на /marketing-analysis/v3/{analysisId}
• Страница автоматически делает поллинг каждые 5 секунд
• Пока статус QUEUED или PROCESSING — показывается красивый лоадер с меняющимися сообщениями
• Когда статус COMPLETED — отображается дашборд с:
  • Hero-карточками (Executive Summary)
  • Графиками (сезонность, платформы конкурентов)
  • Таблицей конкурентов с аккордеоном
  • Выводами и стратегией

---

📋 Структура файлов

src/
├── components/
│   └── marketing/
│       ├── MarketingBriefWizardV3.vue      # Главный опросник v4.0
│       ├── MetricCard.vue                  # Карточка метрики
│       └── wizard/                         # Компоненты для опросника
│           ├── StepSection.vue
│           ├── RadioGroupField.vue
│           ├── CheckboxCardsLimitedField.vue
│           ├── CheckboxCardsField.vue
│           ├── TagArrayField.vue
│           └── DynamicLinksField.vue
├── views/
│   └── pages/
│       ├── auth/
│       │   └── Login.vue                   # Обновлённый дизайн
│       └── marketing/
│           ├── MarketingMain.vue            # Обновлённое меню
│           └── MarketingAnalysisV3.vue     # Дашборд результатов v4.0
├── service/
│   └── MarketingV3Service.js               # API для v4.0
└── types/
    └── marketing-v3.js                      # Типы и enum'ы

---

🔧 API эндпоинты

Новый функционал использует:

• POST /api/v3/marketing-analysis/start — запуск анализа v4.0
• GET /api/v3/marketing-analysis/{id} — получение статуса и результатов

Важно: Убедись, что на бэкенде эти эндпоинты реализованы и возвращают данные в формате:

• POST → { analysisId: string }
• GET → MarketingAnalysisV3Document с полями status, resultData, errorMessage

---

🎨 Особенности дизайна

Новый стиль опросника

• Премиальные карточки для выбора (Radio Cards)
• Плавные анимации переходов между шагами
• Прогресс-бар с градиентом
• Индикаторы шагов с галочками для завершённых

Обновлённый Login

• Градиентный фон
• Современная карточка с тенью
• Иконка замка в градиентном круге
• Улучшенная типографика

Дашборд результатов

• Карточки метрик с иконками
• Графики Chart.js (линейный и doughnut)
• Таблица конкурентов с аккордеоном
• Адаптивная сетка

---

⚠️ Важные замечания

1. Поллинг: Дашборд автоматически опрашивает статус каждые 5 секунд. Поллинг останавливается при статусе COMPLETED или FAILED.

2. Валидация: Форма валидируется перед отправкой. Обязательные поля и ограничения на массивы проверяются.

3. Казахстанский контекст: Все примеры адаптированы под казахстанский рынок (города, примеры ниш).

4. Совместимость: Новый функционал не ломает существующий опросник — он доступен по старому роуту /marketing-analysis/analysis.

---

🐛 Если что-то не работает

1. Ошибки компиляции:

   • Проверь, что все зависимости установлены: npm install
   • Убедись, что Vue 3 и PrimeVue установлены

2. Ошибки API:

   • Проверь, что бэкенд запущен и доступен
   • Проверь URL в src/config/api.js
   • Убедись, что эндпоинты /api/v3/marketing-analysis/* реализованы на бэкенде

3. Компоненты не отображаются:

   • Проверь консоль браузера на ошибки
   • Убедись, что все компоненты правильно импортированы

---

Готово! Теперь можно тестировать новый функционал. 🎉