Problem:
- User wants to use the provided n8n Code node structure for generating confirmation form HTML
- Current implementation doesn't match the expected structure
Solution:
1. Created separate file generateConfirmationFormHTML.ts:
- Implements data normalization from propertyName format
- Uses provided HTML template structure
- Includes field creation functions (createField, createDateField, etc.)
- Implements form rendering with editable inline fields
- Handles form data binding and submission via postMessage
2. Updated StepClaimConfirmation component:
- Imports generateConfirmationFormHTML from separate file
- Removed old inline HTML generation function
- Uses new structure-based generation
3. Data normalization:
- Transforms propertyName structure to form structure
- Maps applicant fields: first_name -> firstname
- Maps contract_or_service fields to project
- Maps claim fields to project (description, reason)
- Handles attachments and offenders arrays
4. Form features:
- Inline editable fields in statement text
- Date fields with calendar picker
- Money fields with рублей suffix
- Readonly fields for phone and category
- Form data collection and submission
Files:
- frontend/src/components/form/generateConfirmationFormHTML.ts: New file with form generation logic
- frontend/src/components/form/StepClaimConfirmation.tsx: Updated to use new generator