6bf5cfad26
Changes: 1. Added green border styling for filled form fields (.filled class) - Green border (#10b981) and light green background (#f0fdf4) - Applied automatically when field has value - Works for inputs, textareas, and checkboxes 2. Updated document display to use field_label instead of filename - Changed ClaimForm.tsx to include field_label in attachments - Updated normalizeData to use full attachments array with field_label - Display shows field_label if available, falls back to filename 3. Added updateFieldStyle function - Updates field styling on input, blur, and change events - Automatically applies filled class when field has value Files: - frontend/src/pages/ClaimForm.tsx: Added field_label to attachments - frontend/src/components/form/generateConfirmationFormHTML.ts: - Added .filled CSS class with green border - Added updateFieldStyle function - Updated document display to use field_label - Updated normalizeData to use attachments array
1258 lines
56 KiB
TypeScript
1258 lines
56 KiB
TypeScript
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
|
||
import { Steps, Card, message, Row, Col, Space } from 'antd';
|
||
import Step1Phone from '../components/form/Step1Phone';
|
||
import StepDescription from '../components/form/StepDescription';
|
||
import Step1Policy from '../components/form/Step1Policy';
|
||
import StepDraftSelection from '../components/form/StepDraftSelection';
|
||
import StepWizardPlan from '../components/form/StepWizardPlan';
|
||
import StepClaimConfirmation from '../components/form/StepClaimConfirmation';
|
||
import Step2EventType from '../components/form/Step2EventType';
|
||
import StepDocumentUpload from '../components/form/StepDocumentUpload';
|
||
import Step3Payment from '../components/form/Step3Payment';
|
||
import DebugPanel from '../components/DebugPanel';
|
||
import { getDocumentsForEventType } from '../constants/documentConfigs';
|
||
import './ClaimForm.css';
|
||
|
||
// Используем относительные пути - Vite proxy перенаправит на backend
|
||
|
||
const { Step } = Steps;
|
||
|
||
interface FormData {
|
||
// Шаг 1: Phone
|
||
phone?: string;
|
||
contact_id?: string;
|
||
unified_id?: string; // ✅ Unified ID пользователя из PostgreSQL
|
||
is_new_contact?: boolean;
|
||
smsCode?: string;
|
||
clientIp?: string;
|
||
smsDebugCode?: string;
|
||
|
||
// Шаг 2: Policy
|
||
voucher: string;
|
||
claim_id?: string;
|
||
session_id?: string;
|
||
project_id?: string; // ✅ ID проекта в vTiger (полис)
|
||
is_new_project?: boolean; // ✅ Флаг: создан новый проект
|
||
problemDescription?: string;
|
||
wizardPlan?: any;
|
||
wizardPlanStatus?: 'pending' | 'ready' | 'answered';
|
||
wizardAnswers?: Record<string, any>;
|
||
wizardPrefill?: Record<string, any>;
|
||
wizardPrefillArray?: Array<{ name: string; value: any }>;
|
||
wizardCoverageReport?: any;
|
||
wizardUploads?: Record<string, any>;
|
||
wizardSkippedDocuments?: string[];
|
||
|
||
// Подтверждение заявления (после получения данных из claim:plan)
|
||
showClaimConfirmation?: boolean;
|
||
claimPlanData?: any; // Данные заявления от n8n из канала claim:plan
|
||
|
||
// Шаг 3: Event Type
|
||
eventType?: string;
|
||
ticket_id?: string; // ✅ ID заявки в vTiger (HelpDesk)
|
||
ticket_number?: string; // ✅ Номер заявки (HD001234)
|
||
|
||
// Шаги 4+: Documents
|
||
documents?: Record<string, {
|
||
uploaded: boolean;
|
||
data: any;
|
||
file_type: string;
|
||
skipped?: boolean;
|
||
}>;
|
||
|
||
// Последний шаг: Payment
|
||
fullName?: string;
|
||
email?: string;
|
||
paymentMethod?: string;
|
||
bankName?: string;
|
||
cardNumber?: string;
|
||
accountNumber?: string;
|
||
}
|
||
|
||
export default function ClaimForm() {
|
||
// ✅ claim_id будет создан n8n в Step1Phone после SMS верификации
|
||
// Не генерируем его локально!
|
||
|
||
// session_id будет получен от n8n при создании контакта
|
||
// Используем useRef чтобы sessionId не вызывал перерендер и был стабильным
|
||
const sessionIdRef = useRef(`sess-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
|
||
const claimPlanEventSourceRef = useRef<EventSource | null>(null);
|
||
const claimPlanTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||
|
||
const [currentStep, setCurrentStep] = useState(0);
|
||
const [sessionRestored, setSessionRestored] = useState(false); // Флаг: пытались восстановить сессию
|
||
const [formData, setFormData] = useState<FormData>({
|
||
voucher: '',
|
||
claim_id: undefined, // ✅ Будет заполнен n8n в Step1Phone
|
||
session_id: sessionIdRef.current,
|
||
paymentMethod: 'sbp',
|
||
});
|
||
const [isPhoneVerified, setIsPhoneVerified] = useState(false);
|
||
const [debugEvents, setDebugEvents] = useState<any[]>([]);
|
||
const [isSubmitted, setIsSubmitted] = useState(false);
|
||
const [showDraftSelection, setShowDraftSelection] = useState(false);
|
||
const [selectedDraftId, setSelectedDraftId] = useState<string | null>(null);
|
||
const [hasDrafts, setHasDrafts] = useState(false);
|
||
|
||
useEffect(() => {
|
||
// 🔥 VERSION CHECK: Если видишь это в консоли - фронт обновился!
|
||
console.log('🔥 ClaimForm v3.8 - 2025-11-20 15:10 - Fix session_id priority in loadDraft');
|
||
}, []);
|
||
|
||
// ✅ Восстановление сессии при загрузке страницы
|
||
useEffect(() => {
|
||
const restoreSession = async () => {
|
||
console.log('🔑 🔑 🔑 НАЧАЛО ВОССТАНОВЛЕНИЯ СЕССИИ 🔑 🔑 🔑');
|
||
console.log('🔑 Все ключи в localStorage:', Object.keys(localStorage));
|
||
console.log('🔑 Значения всех ключей:', JSON.stringify(localStorage));
|
||
|
||
const savedSessionToken = localStorage.getItem('session_token');
|
||
|
||
if (!savedSessionToken) {
|
||
console.log('❌ Session token NOT found in localStorage');
|
||
setSessionRestored(true);
|
||
return;
|
||
}
|
||
|
||
console.log('✅ Found session_token in localStorage, verifying:', savedSessionToken);
|
||
addDebugEvent('session', 'info', '🔑 Проверка сохранённой сессии');
|
||
|
||
try {
|
||
const response = await fetch('/api/v1/session/verify', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ session_token: savedSessionToken })
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP ${response.status}`);
|
||
}
|
||
|
||
const data = await response.json();
|
||
console.log('🔑 Session verify response:', data);
|
||
|
||
if (data.success && data.valid) {
|
||
// Сессия валидна! Восстанавливаем состояние
|
||
console.log('✅ Session valid! Restoring user data:', {
|
||
unified_id: data.unified_id,
|
||
phone: data.phone,
|
||
expires_in: data.expires_in_seconds
|
||
});
|
||
|
||
// Обновляем formData с данными сессии
|
||
updateFormData({
|
||
unified_id: data.unified_id,
|
||
phone: data.phone,
|
||
contact_id: data.contact_id,
|
||
session_id: savedSessionToken
|
||
});
|
||
|
||
// Устанавливаем session_id в ref
|
||
sessionIdRef.current = savedSessionToken;
|
||
|
||
// Помечаем телефон как верифицированный
|
||
setIsPhoneVerified(true);
|
||
|
||
// Проверяем черновики
|
||
const hasDraftsResult = await checkDrafts(data.unified_id, data.phone, savedSessionToken);
|
||
|
||
if (hasDraftsResult) {
|
||
// Есть черновики - показываем список
|
||
setShowDraftSelection(true);
|
||
setHasDrafts(true);
|
||
|
||
// Переходим к шагу выбора черновика
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
setCurrentStep(0);
|
||
});
|
||
});
|
||
|
||
message.success(`Добро пожаловать! Сессия восстановлена (${data.phone})`);
|
||
addDebugEvent('session', 'success', '✅ Сессия восстановлена, найдены черновики');
|
||
} else {
|
||
// Нет черновиков - переходим к описанию
|
||
setCurrentStep(1);
|
||
message.success(`Добро пожаловать! Сессия восстановлена (${data.phone})`);
|
||
addDebugEvent('session', 'success', '✅ Сессия восстановлена');
|
||
}
|
||
} else {
|
||
// Сессия невалидна - удаляем из localStorage
|
||
console.log('❌ Session invalid or expired, removing from localStorage');
|
||
localStorage.removeItem('session_token');
|
||
addDebugEvent('session', 'warning', '⚠️ Сессия истекла');
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ Error verifying session:', error);
|
||
localStorage.removeItem('session_token');
|
||
addDebugEvent('session', 'error', '❌ Ошибка проверки сессии');
|
||
} finally {
|
||
setSessionRestored(true);
|
||
}
|
||
};
|
||
|
||
restoreSession();
|
||
}, []); // Запускаем только при загрузке
|
||
|
||
// Получаем IP клиента один раз при монтировании
|
||
useEffect(() => {
|
||
const fetchClientIp = async () => {
|
||
try {
|
||
const response = await fetch('/api/v1/utils/client-ip');
|
||
if (!response.ok) return;
|
||
const data = await response.json();
|
||
if (data?.ip) {
|
||
setFormData((prev) => ({ ...prev, clientIp: data.ip }));
|
||
}
|
||
} catch {
|
||
// Тихо игнорируем, IP всегда можно взять на бэке из request
|
||
}
|
||
};
|
||
fetchClientIp();
|
||
}, []);
|
||
|
||
// Автоматический переход к шагу подтверждения, когда данные готовы
|
||
useEffect(() => {
|
||
if (formData.showClaimConfirmation && formData.claimPlanData) {
|
||
// Вычисляем индекс шага подтверждения динамически
|
||
// Шаг подтверждения добавляется после StepWizardPlan
|
||
// После выбора черновика showDraftSelection = false, поэтому:
|
||
// - Шаг 0 = Step1Phone
|
||
// - Шаг 1 = StepDescription
|
||
// - Шаг 2 = StepWizardPlan
|
||
// - Шаг 3 = StepClaimConfirmation (если showClaimConfirmation=true)
|
||
const confirmationStepIndex = 3; // Фиксированный индекс для шага подтверждения
|
||
|
||
console.log('✅ Данные заявления готовы, переходим к шагу подтверждения:', confirmationStepIndex);
|
||
setTimeout(() => {
|
||
setCurrentStep(confirmationStepIndex);
|
||
}, 100);
|
||
}
|
||
}, [formData.showClaimConfirmation, formData.claimPlanData]);
|
||
|
||
|
||
// Динамически определяем список шагов на основе выбранного eventType
|
||
const documentConfigs = formData.eventType ? getDocumentsForEventType(formData.eventType) : [];
|
||
const totalDocumentSteps = documentConfigs.length;
|
||
|
||
const addDebugEvent = (type: string, status: string, message: string, data?: any) => {
|
||
const event = {
|
||
timestamp: new Date().toLocaleTimeString('ru-RU'),
|
||
type,
|
||
status,
|
||
message,
|
||
data: {
|
||
...data,
|
||
claim_id: formData.claim_id // ✅ Используем claim_id из formData (от n8n)
|
||
}
|
||
};
|
||
setDebugEvents(prev => [event, ...prev]);
|
||
};
|
||
|
||
// ✅ claim_id будет залогирован в Step1Phone после получения от n8n
|
||
|
||
const updateFormData = useCallback((data: Partial<FormData>) => {
|
||
setFormData((prev) => ({ ...prev, ...data }));
|
||
}, []);
|
||
|
||
const nextStep = useCallback(() => {
|
||
console.log('⏩ nextStep called');
|
||
setCurrentStep((prev) => {
|
||
console.log('📍 Current step:', prev, '→ Next:', prev + 1);
|
||
return prev + 1;
|
||
});
|
||
}, []);
|
||
|
||
const prevStep = useCallback(() => {
|
||
console.log('⏪ prevStep called');
|
||
setCurrentStep((prev) => {
|
||
console.log('📍 Current step:', prev, '→ Prev:', prev - 1);
|
||
return prev - 1;
|
||
});
|
||
}, []);
|
||
|
||
// Преобразование данных черновика в формат propertyName для формы подтверждения
|
||
const transformDraftToClaimPlanFormat = useCallback((data: {
|
||
claim: any;
|
||
payload: any;
|
||
body: any;
|
||
isTelegramFormat: boolean;
|
||
finalClaimId: string;
|
||
actualSessionId: string;
|
||
currentFormData: FormData;
|
||
}) => {
|
||
const { claim, payload, body, finalClaimId, actualSessionId, currentFormData } = data;
|
||
|
||
console.log('🔄 transformDraftToClaimPlanFormat: входные данные:', {
|
||
claimId: finalClaimId,
|
||
claimUnifiedId: claim.unified_id,
|
||
formDataUnifiedId: currentFormData.unified_id,
|
||
claimKeys: Object.keys(claim),
|
||
});
|
||
|
||
console.log('🔄 Данные из БД:', {
|
||
hasApplicantData: !!(body.applicant || payload.applicant),
|
||
hasCaseData: !!(body.case || payload.case),
|
||
hasContractData: !!(body.contract_or_service || payload.contract_or_service),
|
||
hasWizardAnswers: !!(body.answers || payload.answers || body.wizard_answers || payload.wizard_answers),
|
||
hasSendToFormApprove: !!(payload.send_to_form_approve && payload.send_to_form_approve.draft),
|
||
payloadKeys: Object.keys(payload),
|
||
bodyKeys: Object.keys(body),
|
||
});
|
||
|
||
// ✅ ПРИОРИТЕТ 1: Если есть данные в payload.send_to_form_approve.draft - используем их напрямую!
|
||
const sendToFormApproveDraft = payload.send_to_form_approve?.draft;
|
||
if (sendToFormApproveDraft) {
|
||
console.log('✅ Найдены данные в payload.send_to_form_approve.draft, используем их напрямую!');
|
||
console.log('✅ send_to_form_approve.draft:', sendToFormApproveDraft);
|
||
|
||
// Используем данные из send_to_form_approve.draft напрямую
|
||
const draftData = sendToFormApproveDraft;
|
||
|
||
// Формируем propertyName из draft данных
|
||
const propertyName = {
|
||
applicant: draftData.applicant || {},
|
||
case: draftData.case || {},
|
||
contract_or_service: draftData.contract_or_service || {},
|
||
offenders: draftData.offenders || [],
|
||
claim: draftData.claim || {},
|
||
meta: {
|
||
...(draftData.meta || {}),
|
||
claim_id: finalClaimId,
|
||
unified_id: draftData.meta?.unified_id || claim.unified_id || currentFormData.unified_id || null,
|
||
},
|
||
attachments: draftData.attachments || [],
|
||
attachments_count: draftData.attachments_count || 0,
|
||
attachments_names: draftData.attachments_names || [],
|
||
};
|
||
|
||
// Возвращаем данные в формате объекта (для компонента StepClaimConfirmation)
|
||
const result = {
|
||
propertyName: propertyName,
|
||
session_token: actualSessionId,
|
||
prefix: '',
|
||
telegram_id: null,
|
||
claim_id: finalClaimId,
|
||
unified_id: propertyName.meta.unified_id,
|
||
user_id: propertyName.meta.user_id || null,
|
||
};
|
||
|
||
console.log('🔄 transformDraftToClaimPlanFormat: результат из send_to_form_approve:', {
|
||
claim_id: result.claim_id,
|
||
unified_id: result.unified_id,
|
||
hasPropertyName: !!result.propertyName,
|
||
hasMeta: !!result.propertyName?.meta,
|
||
});
|
||
|
||
return result;
|
||
}
|
||
|
||
// ✅ ПРИОРИТЕТ 2: Если данных нет в send_to_form_approve, извлекаем из body/payload
|
||
// Извлекаем данные из body (telegram) или напрямую из payload (web_form)
|
||
const applicantData = body.applicant || payload.applicant || {};
|
||
const caseData = body.case || payload.case || {};
|
||
const contractData = body.contract_or_service || payload.contract_or_service || {};
|
||
const offendersData = body.offenders || payload.offenders || [];
|
||
const claimData = body.claim || payload.claim || {};
|
||
const metaData = body.meta || payload.meta || {};
|
||
const documentsMeta = body.documents_meta || payload.documents_meta || [];
|
||
|
||
// Извлекаем ответы на вопросы из wizard_answers
|
||
const wizardAnswers = body.answers || payload.answers || body.wizard_answers || payload.wizard_answers || {};
|
||
let answersParsed = wizardAnswers;
|
||
if (typeof wizardAnswers === 'string') {
|
||
try {
|
||
answersParsed = JSON.parse(wizardAnswers);
|
||
} catch (e) {
|
||
console.warn('⚠️ Не удалось распарсить answers:', e);
|
||
answersParsed = {};
|
||
}
|
||
}
|
||
|
||
console.log('🔄 wizard_answers parsed:', answersParsed);
|
||
|
||
// Преобразуем wizard_answers в формат propertyName, если данных нет в propertyName формате
|
||
// Маппинг полей из wizard_answers в propertyName структуру
|
||
const hasPropertyNameData = !!(applicantData.first_name || applicantData.last_name || caseData.category || contractData.subject);
|
||
|
||
if (!hasPropertyNameData && answersParsed && Object.keys(answersParsed).length > 0) {
|
||
console.log('🔄 Преобразуем wizard_answers в propertyName формат');
|
||
console.log('🔄 wizard_answers keys:', Object.keys(answersParsed));
|
||
|
||
// Маппинг полей из wizard_answers в contract_or_service
|
||
if (answersParsed.item && !contractData.subject) {
|
||
contractData.subject = answersParsed.item;
|
||
}
|
||
if (answersParsed.price && !contractData.amount_paid) {
|
||
// Нормализуем цену (убираем "рублей", пробелы и т.д.)
|
||
const priceStr = String(answersParsed.price).replace(/\s+/g, '').replace(/руб(лей|ль|\.)?/gi, '').replace(/₽|р\.|р$/gi, '');
|
||
contractData.amount_paid = priceStr;
|
||
contractData.amount_paid_fmt = priceStr;
|
||
}
|
||
if (answersParsed.place_date && !contractData.agreement_date) {
|
||
contractData.agreement_date = answersParsed.place_date;
|
||
contractData.agreement_date_fmt = answersParsed.place_date;
|
||
}
|
||
if (answersParsed.cancel_date && !contractData.period_start) {
|
||
contractData.period_start = answersParsed.cancel_date;
|
||
contractData.period_start_fmt = answersParsed.cancel_date;
|
||
}
|
||
|
||
// Маппинг полей из wizard_answers в claim
|
||
if (answersParsed.steps_taken && !claimData.description) {
|
||
claimData.description = answersParsed.steps_taken;
|
||
}
|
||
if (answersParsed.expectation && !claimData.reason) {
|
||
// expectation может быть "refund", "replacement", "compensation", "other"
|
||
claimData.reason = answersParsed.expectation === 'refund' ? 'consumer' : 'consumer';
|
||
}
|
||
|
||
// Маппинг в case
|
||
if (!caseData.category) {
|
||
caseData.category = 'consumer'; // По умолчанию consumer
|
||
}
|
||
if (!caseData.direction) {
|
||
caseData.direction = 'web_form';
|
||
}
|
||
|
||
// Если есть problem_description, используем его для claim.description
|
||
const problemDesc = payload.problem_description || body.problem_description;
|
||
if (problemDesc && !claimData.description) {
|
||
claimData.description = problemDesc;
|
||
}
|
||
if (problemDesc && !contractData.subject) {
|
||
contractData.subject = problemDesc;
|
||
}
|
||
}
|
||
|
||
// Данные заявителя берутся из других источников (phone, email из claim или formData)
|
||
// ФИО, дата рождения, ИНН будут заполняться в форме подтверждения
|
||
const applicantPhone = claim.phone || payload.phone || body.phone || currentFormData.phone || null;
|
||
const applicantEmail = claim.email || payload.email || body.email || currentFormData.email || null;
|
||
|
||
// Если есть данные заявителя в applicantData, используем их
|
||
if (!applicantData.phone && applicantPhone) {
|
||
applicantData.phone = applicantPhone;
|
||
}
|
||
if (!applicantData.email && applicantEmail) {
|
||
applicantData.email = applicantEmail;
|
||
}
|
||
|
||
// Формируем attachments_names из documents_meta
|
||
const attachmentsNames = documentsMeta.map((doc: any) => {
|
||
return doc.original_file_name || doc.file_name || doc.field_name || 'Документ';
|
||
});
|
||
|
||
// Формируем attachments с полной информацией
|
||
const attachments = documentsMeta.map((doc: any) => ({
|
||
label: doc.field_label || doc.original_file_name || doc.file_name || doc.field_name || 'Документ', // ✅ Используем field_label
|
||
field_label: doc.field_label || doc.field_name || doc.original_file_name || doc.file_name || 'Документ', // ✅ Добавляем field_label отдельно
|
||
url: doc.file_id ? `https://s3.twcstorage.ru${doc.file_id}` : '',
|
||
file_id: doc.file_id || '',
|
||
stored_file_name: doc.file_name || '',
|
||
original_file_name: doc.original_file_name || doc.file_name || '',
|
||
field_name: doc.field_name || '',
|
||
uploaded_at: doc.uploaded_at || new Date().toISOString(),
|
||
}));
|
||
|
||
// Формируем propertyName в нужном формате
|
||
const propertyName = {
|
||
applicant: {
|
||
first_name: applicantData.first_name || null,
|
||
middle_name: applicantData.middle_name || null,
|
||
last_name: applicantData.last_name || null,
|
||
full_name: applicantData.full_name || null,
|
||
birth_date: applicantData.birth_date || null,
|
||
birth_date_fmt: applicantData.birth_date_fmt || null,
|
||
birth_place: applicantData.birth_place || null,
|
||
inn: applicantData.inn || null,
|
||
address: applicantData.address || null,
|
||
phone: claim.phone || payload.phone || body.phone || currentFormData.phone || null,
|
||
email: claim.email || payload.email || body.email || currentFormData.email || null,
|
||
},
|
||
case: {
|
||
category: caseData.category || payload.case_type || 'consumer',
|
||
direction: caseData.direction || 'web_form',
|
||
country: caseData.country || null,
|
||
},
|
||
contract_or_service: {
|
||
agreement_date: contractData.agreement_date || null,
|
||
agreement_date_fmt: contractData.agreement_date_fmt || null,
|
||
amount_paid: contractData.amount_paid || null,
|
||
amount_paid_fmt: contractData.amount_paid_fmt || null,
|
||
subject: contractData.subject || payload.problem_description || body.problem_description || null,
|
||
period_start: contractData.period_start || null,
|
||
period_start_fmt: contractData.period_start_fmt || null,
|
||
period_end: contractData.period_end || null,
|
||
period_end_fmt: contractData.period_end_fmt || null,
|
||
period_text: contractData.period_text || null,
|
||
},
|
||
offenders: offendersData.length > 0 ? offendersData : [],
|
||
claim: {
|
||
reason: claimData.reason || caseData.category || 'consumer',
|
||
description: claimData.description || payload.problem_description || body.problem_description || null,
|
||
},
|
||
meta: {
|
||
claim_id: finalClaimId,
|
||
unified_id: claim.unified_id || currentFormData.unified_id || null,
|
||
status: claim.status_code || 'draft',
|
||
created_at: claim.created_at || new Date().toISOString(),
|
||
updated_at: claim.updated_at || new Date().toISOString(),
|
||
user_id: metaData.user_id || null,
|
||
},
|
||
attachments: attachments,
|
||
attachments_count: attachments.length,
|
||
attachments_names: attachmentsNames,
|
||
};
|
||
|
||
// Возвращаем данные в формате объекта (для компонента StepClaimConfirmation)
|
||
const result = {
|
||
propertyName: propertyName,
|
||
session_token: actualSessionId,
|
||
prefix: '',
|
||
telegram_id: null,
|
||
claim_id: finalClaimId,
|
||
unified_id: claim.unified_id || currentFormData.unified_id || null,
|
||
user_id: metaData.user_id || null,
|
||
};
|
||
|
||
console.log('🔄 transformDraftToClaimPlanFormat: результат:', {
|
||
claim_id: result.claim_id,
|
||
unified_id: result.unified_id,
|
||
hasPropertyName: !!result.propertyName,
|
||
hasMeta: !!result.propertyName?.meta,
|
||
});
|
||
|
||
return result;
|
||
}, []);
|
||
|
||
// Загрузка черновика
|
||
const loadDraft = useCallback(async (claimId: string) => {
|
||
try {
|
||
console.log('🔍 Загрузка черновика с ID:', claimId);
|
||
const url = `/api/v1/claims/drafts/${claimId}`;
|
||
console.log('🔍 URL запроса:', url);
|
||
|
||
const response = await fetch(url);
|
||
console.log('🔍 Статус ответа:', response.status, response.statusText);
|
||
|
||
if (!response.ok) {
|
||
const errorText = await response.text();
|
||
console.error('❌ Ошибка загрузки черновика:', response.status, errorText);
|
||
throw new Error(`Не удалось загрузить черновик: ${response.status} ${errorText}`);
|
||
}
|
||
|
||
const data = await response.json();
|
||
console.log('🔍 Данные черновика загружены:', data);
|
||
const claim = data.claim;
|
||
const payload = claim.payload || {};
|
||
|
||
// ✅ Для telegram черновиков данные могут быть в payload.body
|
||
const body = payload.body || {};
|
||
const isTelegramFormat = !!payload.body;
|
||
|
||
console.log('🔍 Claim объект:', claim);
|
||
console.log('🔍 claim.claim_id:', claim.claim_id);
|
||
console.log('🔍 claim.id:', claim.id);
|
||
console.log('🔍 claim.unified_id:', claim.unified_id);
|
||
console.log('🔍 Payload черновика:', payload);
|
||
console.log('🔍 payload.body:', body);
|
||
console.log('🔍 Формат:', isTelegramFormat ? 'telegram (body)' : 'web_form (прямой)');
|
||
|
||
// ✅ Извлекаем данные из body (telegram) или напрямую из payload (web_form)
|
||
const wizardPlanRaw = body.wizard_plan || payload.wizard_plan;
|
||
const answersRaw = body.answers || payload.answers;
|
||
// Ищем problem_description в разных местах (может быть в разных форматах)
|
||
const problemDescription =
|
||
body.problem_description ||
|
||
payload.problem_description ||
|
||
body.description ||
|
||
payload.description ||
|
||
payload.body?.problem_description || // Для вложенных структур
|
||
payload.body?.description ||
|
||
null;
|
||
const documentsMeta = body.documents_meta || payload.documents_meta || [];
|
||
|
||
// ✅ Парсим wizard_plan и answers, если они строки (JSON)
|
||
let wizardPlan = wizardPlanRaw;
|
||
if (typeof wizardPlanRaw === 'string') {
|
||
try {
|
||
wizardPlan = JSON.parse(wizardPlanRaw);
|
||
} catch (e) {
|
||
console.warn('⚠️ Не удалось распарсить wizard_plan:', e);
|
||
}
|
||
}
|
||
|
||
let answers = answersRaw;
|
||
if (typeof answersRaw === 'string') {
|
||
try {
|
||
answers = JSON.parse(answersRaw);
|
||
} catch (e) {
|
||
console.warn('⚠️ Не удалось распарсить answers:', e);
|
||
}
|
||
}
|
||
|
||
// ✅ Проверяем, заполнены ли все шаги
|
||
// Для problem_description: если его нет в payload, но есть wizard_plan и answers,
|
||
// значит описание уже было введено ранее (wizard_plan генерируется на основе описания)
|
||
const hasDescription = !!problemDescription || (!!wizardPlan && !!answers); // Если есть план и ответы - описание было
|
||
const hasWizardPlan = !!wizardPlan;
|
||
const hasAnswers = !!answers && Object.keys(answers).length > 0;
|
||
const hasDocuments = Array.isArray(documentsMeta) && documentsMeta.length > 0;
|
||
const isDraft = claim.status_code === 'draft';
|
||
|
||
const allStepsFilled = hasDescription && hasWizardPlan && hasAnswers && hasDocuments;
|
||
const isReadyForConfirmation = allStepsFilled && isDraft;
|
||
|
||
console.log('🔍 Проверка полноты черновика:', {
|
||
hasDescription,
|
||
hasWizardPlan,
|
||
hasAnswers,
|
||
hasDocuments,
|
||
isDraft,
|
||
allStepsFilled,
|
||
isReadyForConfirmation,
|
||
problemDescriptionFound: !!problemDescription,
|
||
inferredFromPlan: !problemDescription && !!wizardPlan && !!answers,
|
||
});
|
||
|
||
console.log('🔍 problem_description:', problemDescription ? 'есть' : (wizardPlan && answers ? 'выведено из наличия плана и ответов' : 'нет'));
|
||
console.log('🔍 wizard_plan:', wizardPlan ? 'есть' : 'нет');
|
||
console.log('🔍 answers:', answers ? 'есть' : 'нет');
|
||
console.log('🔍 documents_meta:', documentsMeta.length, 'документов');
|
||
console.log('🔍 Все ключи payload:', Object.keys(payload));
|
||
if (isTelegramFormat) {
|
||
console.log('🔍 Все ключи body:', Object.keys(body));
|
||
}
|
||
|
||
// ✅ Извлекаем claim_id из разных возможных мест
|
||
const finalClaimId = claim.claim_id || payload.claim_id || body.claim_id || claim.id || formData.claim_id || claimId;
|
||
console.log('🔍 Извлечённый claim_id:', finalClaimId);
|
||
|
||
// Восстанавливаем данные формы из черновика
|
||
console.log('🔄 Загрузка черновика: session_id из черновика:', claim.session_token);
|
||
console.log('🔄 Загрузка черновика: текущий sessionIdRef.current:', sessionIdRef.current);
|
||
console.log('🔄 Загрузка черновика: текущий formData.session_id:', formData.session_id);
|
||
const actualSessionId = sessionIdRef.current || formData.session_id;
|
||
console.log('🔄 Загрузка черновика: ИСПОЛЬЗУЕМ session_id:', actualSessionId);
|
||
|
||
updateFormData({
|
||
claim_id: finalClaimId, // ✅ Используем извлечённый claim_id
|
||
session_id: actualSessionId, // ✅ Используем ТЕКУЩИЙ session_id, а не старый из черновика
|
||
phone: body.phone || payload.phone || formData.phone,
|
||
email: body.email || payload.email || formData.email,
|
||
problemDescription: problemDescription || formData.problemDescription,
|
||
wizardPlan: wizardPlan || formData.wizardPlan,
|
||
wizardPlanStatus: wizardPlan ? (answers ? 'answered' : 'ready') : 'pending', // ✅ Устанавливаем статус
|
||
wizardAnswers: answers || formData.wizardAnswers,
|
||
wizardPrefill: (body.answers_prefill || payload.answers_prefill) ?
|
||
(body.answers_prefill || payload.answers_prefill).reduce((acc: any, item: any) => {
|
||
acc[item.name] = item.value;
|
||
return acc;
|
||
}, {}) : formData.wizardPrefill,
|
||
wizardPrefillArray: body.answers_prefill || payload.answers_prefill || formData.wizardPrefillArray,
|
||
wizardCoverageReport: body.coverage_report || payload.coverage_report || formData.wizardCoverageReport,
|
||
wizardUploads: {
|
||
documents: (body.documents_meta || payload.documents_meta) ? {} : formData.wizardUploads?.documents,
|
||
custom: formData.wizardUploads?.custom || [],
|
||
},
|
||
wizardSkippedDocuments: body.wizard_skipped_documents || payload.wizard_skipped_documents || formData.wizardSkippedDocuments,
|
||
eventType: body.event_type || payload.event_type || formData.eventType,
|
||
contact_id: body.contact_id || payload.contact_id || formData.contact_id,
|
||
project_id: body.project_id || payload.project_id || formData.project_id,
|
||
unified_id: formData.unified_id, // ✅ Сохраняем unified_id
|
||
});
|
||
|
||
setSelectedDraftId(finalClaimId);
|
||
setShowDraftSelection(false);
|
||
|
||
// ✅ Если все шаги заполнены и статус = draft → переходим к форме подтверждения
|
||
if (isReadyForConfirmation) {
|
||
console.log('✅ Все шаги заполнены, преобразуем данные для формы подтверждения');
|
||
|
||
setIsPhoneVerified(true);
|
||
|
||
// Преобразуем данные из БД в формат propertyName для формы подтверждения
|
||
const claimPlanData = transformDraftToClaimPlanFormat({
|
||
claim,
|
||
payload,
|
||
body,
|
||
isTelegramFormat,
|
||
finalClaimId,
|
||
actualSessionId,
|
||
currentFormData: formData,
|
||
});
|
||
|
||
// Сохраняем данные заявления в formData
|
||
updateFormData({
|
||
claimPlanData: claimPlanData,
|
||
showClaimConfirmation: true,
|
||
});
|
||
|
||
// Переход к шагу подтверждения произойдёт автоматически через useEffect
|
||
setCurrentStep(2); // StepWizardPlan (временно, useEffect переключит на подтверждение)
|
||
return;
|
||
}
|
||
|
||
// ✅ Определяем шаг для перехода на основе данных черновика
|
||
// Приоритет: если есть wizard_plan → переходим к визарду (даже если нет problem_description)
|
||
// После выбора черновика showDraftSelection = false, поэтому:
|
||
// - Шаг 0 = Step1Phone (но мы его пропускаем, т.к. телефон уже верифицирован)
|
||
// - Шаг 1 = StepDescription
|
||
// - Шаг 2 = StepWizardPlan
|
||
|
||
let targetStep = 1; // По умолчанию - описание (шаг 1)
|
||
|
||
if (wizardPlan) {
|
||
// ✅ Если есть wizard_plan - переходим к визарду (шаг 2)
|
||
// Пользователь уже описывал проблему, и есть план вопросов
|
||
targetStep = 2;
|
||
console.log('✅ Переходим к StepWizardPlan (шаг 2) - есть wizard_plan');
|
||
console.log('✅ answers в черновике:', answers ? 'есть (показываем заполненную форму)' : 'нет (показываем пустую форму)');
|
||
} else if (problemDescription) {
|
||
// Если есть описание, но нет плана - переходим к визарду (шаг 2), чтобы получить план
|
||
targetStep = 2;
|
||
console.log('✅ Переходим к StepWizardPlan (шаг 2) - есть описание, план будет получен через SSE');
|
||
} else {
|
||
// Если нет ничего - переходим к описанию (шаг 1)
|
||
targetStep = 1;
|
||
console.log('✅ Переходим к StepDescription (шаг 1) - нет описания и плана');
|
||
}
|
||
|
||
console.log('🔍 Устанавливаем currentStep:', targetStep);
|
||
// ✅ Устанавливаем isPhoneVerified = true, чтобы пропустить шаг телефона
|
||
setIsPhoneVerified(true);
|
||
setCurrentStep(targetStep);
|
||
} catch (error) {
|
||
console.error('Ошибка загрузки черновика:', error);
|
||
message.error('Не удалось загрузить черновик');
|
||
}
|
||
}, [formData, updateFormData]);
|
||
|
||
// Обработчик выбора черновика
|
||
const handleSelectDraft = useCallback((claimId: string) => {
|
||
loadDraft(claimId);
|
||
}, [loadDraft]);
|
||
|
||
// Проверка наличия черновиков
|
||
const checkDrafts = useCallback(async (unified_id?: string, phone?: string, sessionId?: string) => {
|
||
try {
|
||
console.log('🔍 ========== checkDrafts вызван ==========');
|
||
console.log('🔍 Параметры:', { unified_id, phone, sessionId });
|
||
|
||
const params = new URLSearchParams();
|
||
// Приоритет: unified_id > phone > session_id
|
||
if (unified_id) {
|
||
params.append('unified_id', unified_id);
|
||
console.log('🔍 Используем unified_id:', unified_id);
|
||
} else if (phone) {
|
||
params.append('phone', phone);
|
||
console.log('🔍 Используем phone:', phone);
|
||
} else if (sessionId) {
|
||
params.append('session_id', sessionId);
|
||
console.log('🔍 Используем session_id:', sessionId);
|
||
} else {
|
||
console.warn('⚠️ Нет параметров для поиска черновиков');
|
||
return false;
|
||
}
|
||
|
||
const url = `/api/v1/claims/drafts/list?${params.toString()}`;
|
||
console.log('🔍 Запрос черновиков:', url);
|
||
|
||
const response = await fetch(url);
|
||
console.log('🔍 Статус ответа:', response.status, response.statusText);
|
||
|
||
if (!response.ok) {
|
||
const errorText = await response.text();
|
||
console.error('❌ Ошибка запроса черновиков:', response.status, response.statusText, errorText);
|
||
return false;
|
||
}
|
||
|
||
const data = await response.json();
|
||
console.log('🔍 Полный ответ API черновиков:', JSON.stringify(data, null, 2));
|
||
console.log('🔍 Debug info от backend:', data.debug_info || data.debug);
|
||
const count = data.count || 0;
|
||
console.log('🔍 Количество черновиков:', count);
|
||
console.log('🔍 Список черновиков:', data.drafts);
|
||
|
||
setHasDrafts(count > 0);
|
||
setShowDraftSelection(count > 0);
|
||
console.log('🔍 Установлены флаги: hasDrafts=', count > 0, 'showDraftSelection=', count > 0);
|
||
console.log('🔍 ========== checkDrafts завершён ==========');
|
||
return count > 0;
|
||
} catch (error) {
|
||
console.error('❌ Ошибка проверки черновиков:', error);
|
||
console.error('❌ Stack trace:', (error as Error).stack);
|
||
return false;
|
||
}
|
||
}, []);
|
||
|
||
// Обработчик создания новой заявки
|
||
const handleNewClaim = useCallback(() => {
|
||
console.log('🆕 Начинаем новое обращение');
|
||
console.log('🆕 Текущий currentStep:', currentStep);
|
||
console.log('🆕 isPhoneVerified:', isPhoneVerified);
|
||
|
||
setShowDraftSelection(false);
|
||
setSelectedDraftId(null);
|
||
setHasDrafts(false); // ✅ Сбрасываем флаг наличия черновиков
|
||
|
||
// Очищаем данные формы, кроме телефона и session_id
|
||
updateFormData({
|
||
claim_id: undefined,
|
||
problemDescription: undefined,
|
||
wizardPlan: undefined,
|
||
wizardAnswers: undefined,
|
||
wizardPrefill: undefined,
|
||
wizardPrefillArray: undefined,
|
||
wizardCoverageReport: undefined,
|
||
wizardUploads: undefined,
|
||
wizardSkippedDocuments: undefined,
|
||
eventType: undefined,
|
||
});
|
||
|
||
console.log('🆕 Переходим к шагу описания проблемы (пропускаем Phone и DraftSelection)');
|
||
|
||
// ✅ Переходим к шагу описания проблемы
|
||
// После сброса флагов черновиков, steps будут:
|
||
// Шаг 0 - Phone (уже верифицирован, но в массиве есть)
|
||
// Шаг 1 - Description (сюда переходим)
|
||
// Шаг 2 - WizardPlan
|
||
setCurrentStep(1); // ✅ Переходим к описанию (индекс 1)
|
||
}, [updateFormData, currentStep, isPhoneVerified]);
|
||
|
||
const handleSubmit = useCallback(async () => {
|
||
try {
|
||
addDebugEvent('form', 'info', '📤 Отправка заявки в n8n через backend');
|
||
|
||
const payload = {
|
||
stage: 'final',
|
||
form_id: 'ticket_form',
|
||
session_id: formData.session_id ?? sessionIdRef.current,
|
||
client_ip: formData.clientIp,
|
||
sms_code: formData.smsCode,
|
||
|
||
// Базовые идентификаторы
|
||
claim_id: formData.claim_id,
|
||
contact_id: formData.contact_id,
|
||
project_id: formData.project_id,
|
||
ticket_id: formData.ticket_id,
|
||
is_new_contact: formData.is_new_contact,
|
||
is_new_project: formData.is_new_project,
|
||
|
||
// Основные поля формы (для удобства в n8n)
|
||
voucher: formData.voucher,
|
||
phone: formData.phone,
|
||
email: formData.email,
|
||
event_type: formData.eventType,
|
||
payment_method: formData.paymentMethod,
|
||
bank_name: formData.bankName,
|
||
card_number: formData.cardNumber,
|
||
account_number: formData.accountNumber,
|
||
|
||
// Старый блок документов + новые загрузки визарда (пока как есть)
|
||
documents: formData.documents || {},
|
||
wizard_uploads: formData.wizardUploads || {},
|
||
|
||
// Всё состояние формы целиком — на всякий случай
|
||
form: formData,
|
||
};
|
||
|
||
const response = await fetch('/api/v1/claims/create', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(payload),
|
||
});
|
||
|
||
const text = await response.text();
|
||
let parsed: any = null;
|
||
try {
|
||
parsed = text ? JSON.parse(text) : null;
|
||
} catch {
|
||
parsed = null;
|
||
}
|
||
|
||
if (!response.ok) {
|
||
message.error('Ошибка при создании заявки (n8n)');
|
||
addDebugEvent('form', 'error', '❌ Ошибка создания заявки в n8n', {
|
||
status: response.status,
|
||
body: text,
|
||
});
|
||
return;
|
||
}
|
||
|
||
addDebugEvent('form', 'success', '✅ Финальный webhook в n8n отработал', {
|
||
response: parsed ?? text,
|
||
});
|
||
// Помечаем, что заявка отправлена, и показываем заглушку.
|
||
setIsSubmitted(true);
|
||
message.success('Данные отправлены, заявка принята в обработку.');
|
||
} catch (error) {
|
||
message.error('Ошибка соединения с сервером');
|
||
addDebugEvent('form', 'error', '❌ Ошибка соединения', { error: String(error) });
|
||
console.error(error);
|
||
}
|
||
}, [formData, addDebugEvent]);
|
||
|
||
// Динамически генерируем шаги на основе выбранного eventType
|
||
const steps = useMemo(() => {
|
||
const stepsArray: any[] = [];
|
||
|
||
// Шаг 0: Выбор черновика (показывается только если есть черновики)
|
||
// ✅ unified_id уже означает, что телефон верифицирован
|
||
// Показываем шаг, если showDraftSelection=true ИЛИ если есть unified_id и hasDrafts
|
||
if ((showDraftSelection || (formData.unified_id && hasDrafts)) && !selectedDraftId) {
|
||
stepsArray.push({
|
||
title: 'Черновики',
|
||
description: 'Выбор заявки',
|
||
content: (
|
||
<StepDraftSelection
|
||
phone={formData.phone || ''}
|
||
session_id={sessionIdRef.current}
|
||
unified_id={formData.unified_id} // ✅ Передаём unified_id
|
||
onSelectDraft={handleSelectDraft}
|
||
onNewClaim={handleNewClaim}
|
||
/>
|
||
),
|
||
});
|
||
}
|
||
|
||
// Шаг 1: Phone (телефон + SMS верификация)
|
||
stepsArray.push({
|
||
title: 'Телефон',
|
||
description: 'Подтверждение по SMS',
|
||
content: (
|
||
<Step1Phone
|
||
formData={{ ...formData, session_id: formData.session_id || sessionIdRef.current }} // ✅ Используем session_id из formData (от n8n) или временный
|
||
updateFormData={(data: any) => {
|
||
updateFormData(data);
|
||
// ✅ Если n8n вернул session_id, обновляем ref
|
||
if (data.session_id && data.session_id !== sessionIdRef.current) {
|
||
console.log('🔄 Обновляем sessionIdRef на значение от n8n:', data.session_id);
|
||
sessionIdRef.current = data.session_id;
|
||
}
|
||
// ❌ Убрано: проверка черновиков здесь избыточна, т.к. она уже есть в onNext
|
||
}}
|
||
onNext={async (unified_id?: string) => {
|
||
console.log('🔥 onNext вызван с unified_id:', unified_id);
|
||
console.log('🔥 formData.unified_id:', formData.unified_id);
|
||
console.log('🔥 isPhoneVerified:', isPhoneVerified);
|
||
console.log('🔥 selectedDraftId:', selectedDraftId);
|
||
|
||
// После верификации проверяем черновики
|
||
// Используем unified_id из параметра (если передан) или из formData
|
||
const finalUnifiedId = unified_id || formData.unified_id;
|
||
console.log('🔥 finalUnifiedId:', finalUnifiedId);
|
||
|
||
// ✅ Если передан unified_id, значит телефон уже верифицирован (даже если isPhoneVerified ещё false)
|
||
// Проверяем черновики, если есть unified_id или телефон верифицирован
|
||
const shouldCheckDrafts = finalUnifiedId || (formData.phone && isPhoneVerified);
|
||
|
||
if (shouldCheckDrafts && !selectedDraftId) {
|
||
console.log('🔍 Проверка черновиков с unified_id:', finalUnifiedId, 'phone:', formData.phone, 'sessionId:', sessionIdRef.current);
|
||
const hasDraftsResult = await checkDrafts(finalUnifiedId, formData.phone, sessionIdRef.current);
|
||
console.log('🔍 Результат checkDrafts:', hasDraftsResult);
|
||
console.log('🔍 Текущие флаги после checkDrafts: hasDrafts=', hasDrafts, 'showDraftSelection=', showDraftSelection);
|
||
|
||
if (hasDraftsResult) {
|
||
console.log('✅ Есть черновики, переходим к шагу 0');
|
||
// ✅ ВАЖНО: Сначала устанавливаем флаги, потом переходим на шаг 0
|
||
setShowDraftSelection(true);
|
||
setHasDrafts(true);
|
||
// ✅ Используем setTimeout для гарантии, что React обновил состояние
|
||
setTimeout(() => {
|
||
console.log('🔄 Переходим на шаг 0 после установки флагов');
|
||
setCurrentStep(0); // Переходим к шагу выбора черновика
|
||
}, 100);
|
||
console.log('🛑 Остановка выполнения onNext - есть черновики');
|
||
return; // ✅ ВАЖНО: Не идём дальше, если есть черновики
|
||
} else {
|
||
console.log('❌ Нет черновиков, идем дальше к описанию проблемы');
|
||
// Нет черновиков - идём дальше
|
||
nextStep();
|
||
return;
|
||
}
|
||
} else {
|
||
console.log('⚠️ Условие не выполнено для проверки черновиков:', {
|
||
shouldCheckDrafts,
|
||
selectedDraftId,
|
||
finalUnifiedId,
|
||
phone: formData.phone,
|
||
isPhoneVerified
|
||
});
|
||
// Условие не выполнено - идём дальше
|
||
nextStep();
|
||
return;
|
||
}
|
||
|
||
// ❌ ЭТОТ КОД НЕ ДОЛЖЕН ВЫПОЛНЯТЬСЯ, если есть return выше
|
||
console.error('❌❌❌ КРИТИЧЕСКАЯ ОШИБКА: nextStep() вызван после return!');
|
||
nextStep();
|
||
}}
|
||
onPrev={prevStep}
|
||
isPhoneVerified={isPhoneVerified}
|
||
setIsPhoneVerified={(verified: boolean) => {
|
||
setIsPhoneVerified(verified);
|
||
// ❌ Убрано: проверка черновиков делается только в onNext
|
||
// onNext вызывается после успешной верификации и содержит unified_id
|
||
}}
|
||
addDebugEvent={addDebugEvent}
|
||
/>
|
||
),
|
||
});
|
||
|
||
// Шаг 2: свободное описание
|
||
stepsArray.push({
|
||
title: 'Описание',
|
||
description: 'Что случилось?',
|
||
content: (
|
||
<StepDescription
|
||
formData={formData}
|
||
updateFormData={updateFormData}
|
||
onPrev={prevStep}
|
||
onNext={nextStep}
|
||
/>
|
||
),
|
||
});
|
||
|
||
// Шаг 3: AI Рекомендации
|
||
stepsArray.push({
|
||
title: 'Рекомендации',
|
||
description: 'AI ассистент',
|
||
content: (
|
||
<StepWizardPlan
|
||
formData={formData}
|
||
updateFormData={updateFormData}
|
||
onPrev={prevStep}
|
||
onNext={nextStep}
|
||
addDebugEvent={addDebugEvent}
|
||
/>
|
||
),
|
||
});
|
||
|
||
// Шаг подтверждения заявления (показывается после получения данных из claim:plan)
|
||
if (formData.showClaimConfirmation && formData.claimPlanData) {
|
||
stepsArray.push({
|
||
title: 'Подтверждение',
|
||
description: 'Проверка данных',
|
||
content: (
|
||
<StepClaimConfirmation
|
||
claimPlanData={formData.claimPlanData}
|
||
onPrev={prevStep}
|
||
onNext={nextStep}
|
||
/>
|
||
),
|
||
});
|
||
}
|
||
|
||
// Шаг 3: Policy (всегда)
|
||
stepsArray.push({
|
||
title: 'Проверка полиса',
|
||
description: 'Полис ERV',
|
||
content: (
|
||
<Step1Policy
|
||
formData={{ ...formData, session_id: sessionIdRef.current }} // ✅ claim_id уже в formData от n8n
|
||
updateFormData={updateFormData}
|
||
onNext={nextStep}
|
||
addDebugEvent={addDebugEvent}
|
||
/>
|
||
),
|
||
});
|
||
|
||
// Шаг 4: Event Type Selection (всегда)
|
||
stepsArray.push({
|
||
title: 'Тип события',
|
||
description: 'Выбор случая',
|
||
content: (
|
||
<Step2EventType
|
||
formData={formData}
|
||
updateFormData={updateFormData}
|
||
onNext={nextStep}
|
||
onPrev={prevStep}
|
||
addDebugEvent={addDebugEvent}
|
||
/>
|
||
),
|
||
});
|
||
|
||
// Шаги 3+: Document Upload (динамически, если выбран eventType)
|
||
if (formData.eventType && documentConfigs.length > 0) {
|
||
documentConfigs.forEach((docConfig, index) => {
|
||
stepsArray.push({
|
||
title: `Документ ${index + 1}`,
|
||
description: docConfig.name,
|
||
content: (
|
||
<StepDocumentUpload
|
||
key={`doc-${docConfig.file_type}`}
|
||
documentConfig={docConfig}
|
||
formData={formData}
|
||
updateFormData={updateFormData}
|
||
onNext={nextStep}
|
||
onPrev={prevStep}
|
||
isLastDocument={index === documentConfigs.length - 1}
|
||
currentDocNumber={index + 1}
|
||
totalDocs={documentConfigs.length}
|
||
/>
|
||
),
|
||
});
|
||
});
|
||
}
|
||
|
||
// Последний шаг: Payment (всегда)
|
||
stepsArray.push({
|
||
title: 'Оплата',
|
||
description: 'Контакты и выплата',
|
||
content: (
|
||
<Step3Payment
|
||
formData={formData} // ✅ claim_id уже в formData
|
||
updateFormData={updateFormData}
|
||
onPrev={prevStep}
|
||
onSubmit={handleSubmit}
|
||
isPhoneVerified={isPhoneVerified}
|
||
setIsPhoneVerified={setIsPhoneVerified}
|
||
addDebugEvent={addDebugEvent}
|
||
/>
|
||
),
|
||
});
|
||
|
||
return stepsArray;
|
||
}, [formData, documentConfigs, isPhoneVerified, nextStep, prevStep, updateFormData, handleSubmit, setIsPhoneVerified, addDebugEvent, showDraftSelection, selectedDraftId, hasDrafts, handleSelectDraft, handleNewClaim, checkDrafts]);
|
||
|
||
const handleReset = () => {
|
||
setIsSubmitted(false);
|
||
setFormData({
|
||
voucher: '',
|
||
claim_id: undefined, // ✅ Очищаем для новой заявки
|
||
session_id: sessionIdRef.current,
|
||
paymentMethod: 'sbp',
|
||
});
|
||
setCurrentStep(0);
|
||
setIsPhoneVerified(false);
|
||
message.info('Форма сброшена');
|
||
addDebugEvent('system', 'info', '🔄 Форма сброшена');
|
||
};
|
||
|
||
// Обработчик кнопки "Выход" - завершить сессию и вернуться к Step1Phone
|
||
const handleExitToList = useCallback(async () => {
|
||
console.log('🚪 Выход из системы');
|
||
addDebugEvent('system', 'info', '🚪 Выход из системы');
|
||
|
||
// Получаем session_token из localStorage
|
||
const sessionToken = localStorage.getItem('session_token') || formData.session_id;
|
||
|
||
if (sessionToken) {
|
||
try {
|
||
// Вызываем API logout для удаления сессии из Redis
|
||
const response = await fetch('/api/v1/session/logout', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ session_token: sessionToken })
|
||
});
|
||
|
||
if (response.ok) {
|
||
console.log('✅ Сессия удалена из Redis');
|
||
addDebugEvent('session', 'success', '✅ Сессия завершена');
|
||
}
|
||
} catch (error) {
|
||
console.warn('⚠️ Ошибка при завершении сессии:', error);
|
||
}
|
||
}
|
||
|
||
// Удаляем session_token из localStorage
|
||
localStorage.removeItem('session_token');
|
||
|
||
// Сбрасываем форму
|
||
handleReset();
|
||
|
||
message.info('Сессия завершена. До свидания!');
|
||
}, [formData.session_id, addDebugEvent]);
|
||
|
||
return (
|
||
<div className="claim-form-container" style={{ padding: '20px', background: '#ffffff' }}>
|
||
<Row gutter={16}>
|
||
{/* Левая часть - Форма */}
|
||
<Col xs={24} lg={14}>
|
||
<Card
|
||
title="Подать заявку на выплату"
|
||
className="claim-form-card"
|
||
extra={
|
||
!isSubmitted && (
|
||
<Space>
|
||
{/* Кнопка "Выход" - показываем если телефон верифицирован */}
|
||
{isPhoneVerified && (
|
||
<button
|
||
onClick={handleExitToList}
|
||
style={{
|
||
padding: '4px 12px',
|
||
background: '#fff',
|
||
border: '1px solid #ff4d4f',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
color: '#ff4d4f'
|
||
}}
|
||
>
|
||
🚪 Выход
|
||
</button>
|
||
)}
|
||
{/* Кнопка "Начать заново" - показываем только после шага телефона */}
|
||
{currentStep > 0 && (
|
||
<button
|
||
onClick={handleReset}
|
||
style={{
|
||
padding: '4px 12px',
|
||
background: '#fff',
|
||
border: '1px solid #d9d9d9',
|
||
borderRadius: '4px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px'
|
||
}}
|
||
>
|
||
🔄 Начать заново
|
||
</button>
|
||
)}
|
||
</Space>
|
||
)
|
||
}
|
||
>
|
||
{isSubmitted ? (
|
||
<div style={{ padding: '40px 0', textAlign: 'center' }}>
|
||
<h3 style={{ fontSize: 22, marginBottom: 8 }}>Мы изучаем ваш вопрос и документы</h3>
|
||
<p style={{ color: '#666666', maxWidth: 480, margin: '0 auto 24px' }}>
|
||
Заявка отправлена в работу. Юристы проверят информацию и свяжутся с вами по указанным контактам.
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<Steps current={currentStep} className="steps">
|
||
{steps.map((item, index) => (
|
||
<Step
|
||
key={`step-${index}`}
|
||
title={item.title}
|
||
description={item.description}
|
||
/>
|
||
))}
|
||
</Steps>
|
||
<div className="steps-content">
|
||
{steps[currentStep] ? steps[currentStep].content : (
|
||
<div style={{ padding: '40px 0', textAlign: 'center' }}>
|
||
<p>Загрузка шага...</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</Card>
|
||
</Col>
|
||
|
||
{/* Правая часть - Debug консоль */}
|
||
<Col xs={24} lg={10}>
|
||
<DebugPanel events={debugEvents} formData={formData} />
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
);
|
||
}
|
||
|