import { useEffect, useRef, useState } from 'react'; import { Card, Spin, message } from 'antd'; interface Props { claimPlanData: any; // Данные заявления от n8n onNext: () => void; onPrev: () => void; } export default function StepClaimConfirmation({ claimPlanData, onNext, onPrev, }: Props) { const [loading, setLoading] = useState(true); const iframeRef = useRef(null); const [htmlContent, setHtmlContent] = useState(''); useEffect(() => { if (!claimPlanData) { message.error('Данные заявления не получены'); return; } console.log('📋 StepClaimConfirmation: получены данные claimPlanData:', claimPlanData); console.log('📋 claimPlanData.claim_id:', claimPlanData?.claim_id); console.log('📋 claimPlanData.unified_id:', claimPlanData?.unified_id); console.log('📋 claimPlanData.propertyName?.meta?.claim_id:', claimPlanData?.propertyName?.meta?.claim_id); console.log('📋 claimPlanData.propertyName?.meta?.unified_id:', claimPlanData?.propertyName?.meta?.unified_id); // Формируем данные для формы подтверждения // Формат должен соответствовать тому, что ожидает HTML форма const claimId = claimPlanData?.claim_id || claimPlanData?.propertyName?.meta?.claim_id || ''; const unifiedId = claimPlanData?.unified_id || claimPlanData?.propertyName?.meta?.unified_id || ''; console.log('📋 Извлечённые ID:', { claimId, unifiedId }); const formData = { case: { user: claimPlanData?.propertyName?.applicant || {}, project: claimPlanData?.propertyName?.case || {}, offenders: claimPlanData?.propertyName?.offenders || [], attachments: claimPlanData?.propertyName?.attachments_names || [], meta: { ...claimPlanData?.propertyName?.meta, session_token: claimPlanData?.session_token || '', prefix: claimPlanData?.prefix || '', telegram_id: claimPlanData?.telegram_id || '', claim_id: claimId, unified_id: unifiedId, user_id: claimPlanData?.user_id || claimPlanData?.propertyName?.meta?.user_id || '', }, }, session_token: claimPlanData?.session_token || '', telegram_id: claimPlanData?.telegram_id || '', token: claimPlanData?.token || '', sms_meta: { session_token: claimPlanData?.session_token || '', prefix: claimPlanData?.prefix || '', telegram_id: claimPlanData?.telegram_id || '', claim_id: claimId, unified_id: unifiedId, user_id: claimPlanData?.user_id || claimPlanData?.propertyName?.meta?.user_id || '', }, }; console.log('📋 Сформированные formData.meta:', formData.case.meta); // Здесь нужно будет получить HTML форму от n8n или использовать готовый шаблон // Пока используем заглушку - в реальности нужно будет вызывать n8n workflow для генерации HTML const html = generateConfirmationFormHTML(formData); setHtmlContent(html); setLoading(false); }, [claimPlanData]); // Функция генерации HTML формы (временная заглушка) // В реальности это должен делать n8n workflow const generateConfirmationFormHTML = (data: any): string => { // Экранируем данные для безопасной вставки в HTML const caseJson = JSON.stringify(data) .replace(//g, '\\u003e'); return ` Подтверждение данных

📋 Подтверждение данных заявления

Статус: Данные заявления получены

Claim ID: ${data.case?.meta?.claim_id || 'не указан'}

Unified ID: ${data.case?.meta?.unified_id || 'не указан'}

`; }; useEffect(() => { // Слушаем сообщения от iframe const handleMessage = (event: MessageEvent) => { console.log('📨 Message from iframe:', event.data); if (event.data.type === 'claim_confirmed') { message.success('Заявление подтверждено!'); onNext(); } else if (event.data.type === 'claim_cancelled') { message.info('Подтверждение отменено'); onPrev(); } else if (event.data.type === 'claim_form_loaded') { setLoading(false); } }; window.addEventListener('message', handleMessage); return () => { window.removeEventListener('message', handleMessage); }; }, [onNext, onPrev]); if (loading) { return (

Загрузка формы подтверждения...

); } return (