# Лог диалога: Интеграция React формы в WordPress

**Дата:** 16 января 2025  
**Тема:** Обсуждение интеграции сложной React формы из Docker в WordPress

---

## Контекст

У пользователя есть сложная форма обращений на React, которая:
- Развёрнута в Docker контейнере (`ticket_form_frontend_prod`)
- Находится по адресу: `https://aiform.clientright.ru/`
- Использует Vite, React, TypeScript, Ant Design
- Имеет множество шагов, запросов и ответов
- Текущая интеграция в WordPress через iframe в `page-form.php`

---

## Обсуждённые темы

### 1. Использование taxonomy для кейсов

- Поле `case_taxonomy` используется для фильтрации кейсов в архиве
- Добавлено отображение `case_taxonomy` вместо "Разобрались" на странице отдельного кейса
- Изменён файл: `wp-content/themes/clientprav-theme/single.php`

**Изменения:**
```php
// Для кейсов используем case_taxonomy вместо названия категории
if (has_category('cases')) {
    $case_taxonomy = clientprav_get_case_taxonomy(get_the_ID());
    if (!empty($case_taxonomy)) {
        $category_name = $case_taxonomy;
    }
}
```

### 2. Обсуждение форм в WordPress

**Варианты интеграции форм:**
1. **REST API WordPress** - форма отправляет данные на WordPress API
2. **Отправка на внешний сервер/API** - форма отправляет на n8n webhook
3. **Встроенный React-компонент** - форма собирается в JS файл и встраивается в WordPress

**Текущее решение:** iframe с формой на `aiform.clientright.ru`

### 3. Интеграция React формы из Docker

**Найденная структура:**
- Путь к форме: `/var/www/fastuser/data/www/crm.clientright.ru/ticket_form/frontend/`
- Сборщик: Vite
- Технологии: React 18.3.1, TypeScript, Ant Design 5.21.6
- Контейнер: `ticket_form_frontend_prod` (порт 5176)

**План перехода на встроенный компонент:**
1. Создать точку входа `src/wordpress-entry.tsx`
2. Настроить Vite для сборки библиотеки
3. Собрать форму: `npm run build`
4. Скопировать в WordPress: `dist/ticket-form.js` → `wp-content/themes/clientprav-theme/assets/js/`
5. Подключить через `functions.php` с шорткодом `[ticket_form]`
6. Настроить API-прокси через WordPress REST API

**Важные моменты:**
- Размер файла может быть 2-5 MB (с Ant Design)
- Нужен CSS Ant Design через CDN
- Backend API на порту 8200
- Зависимости: React, ReactDOM, Ant Design

**Рекомендация:** Для сложной формы лучше оставить iframe (проще поддерживать, изоляция)

---

## Изменённые файлы

### 1. `wp-content/themes/clientprav-theme/single.php`
- Добавлено отображение `case_taxonomy` для кейсов вместо названия категории

### 2. `wp-content/themes/clientprav-theme/page-form.php`
- Улучшена интеграция iframe с обработкой событий:
  - Автоматическая высота iframe
  - Обработка успешной отправки формы
  - Обработка ошибок
  - Отслеживание прогресса

### 3. Создан пример React формы
- `react-form-example/` - пример простой формы для WordPress
- Включает: структуру проекта, webpack.config.js, пример компонента

---

## Следующие шаги

1. **Решение по форме:**
   - Оставить iframe (текущее решение)
   - Или перейти на встроенный React компонент

2. **Если переходить на встроенный компонент:**
   - Настроить сборку Vite для библиотеки
   - Создать точку входа для WordPress
   - Настроить API-прокси
   - Протестировать интеграцию

3. **Улучшения iframe (если оставляем):**
   - Добавить уведомления после отправки
   - Интеграция с Google Analytics
   - Сохранение данных в WordPress

---

## Полезные ссылки

- Форма: https://aiform.clientright.ru/
- Docker контейнер: `ticket_form_frontend_prod`
- Путь к коду: `/var/www/fastuser/data/www/crm.clientright.ru/ticket_form/frontend/`
- Docker compose: `/var/www/fastuser/data/www/crm.clientright.ru/ticket_form/docker-compose.yml`

---

## Технические детали

**Структура формы:**
```
frontend/
├── src/
│   ├── pages/
│   │   └── ClaimForm.tsx    # Основной компонент формы
│   ├── components/
│   │   └── form/             # Компоненты шагов формы
│   ├── api/                  # API запросы
│   └── utils/                # Утилиты
├── vite.config.ts            # Конфигурация Vite
└── package.json             # Зависимости
```

**Зависимости формы:**
- react: ^18.3.1
- react-dom: ^18.3.1
- antd: ^5.21.6
- @ant-design/icons: ^5.5.1
- axios: ^1.7.7
- @tanstack/react-query: ^5.59.16
- zustand: ^5.0.1
- socket.io-client: ^4.8.1

---

**Конец лога**