Problem:
- Form didn't handle data in propertyName format from n8n
- Missing normalization logic from n8n Code node
Solution:
1. Added normalizeData function in TypeScript:
- Handles propertyName format (new format from n8n)
- Handles old format (applicant, case, contract_or_service)
- Handles case format (current structure)
- Converts field names (first_name -> firstname, etc.)
- Normalizes money values
- Extracts attachments_names
2. Added normalizeData function in JavaScript:
- Same logic as TypeScript version
- Handles data extraction from multiple sources:
* propertyName (object or string)
* value
* data
* output
* case
- Supports array format (takes first element)
3. Enhanced data extraction logic:
- Checks multiple data sources
- Handles both array and object formats
- Merges SMS meta data from injected
- Ensures base structures exist
Files:
- frontend/src/components/form/generateConfirmationFormHTML.ts: Added normalization logic
Problem:
- Form was simplified and didn't match n8n implementation
- Missing validation, button state updates, checkbox handling
- Missing full statement text with consent checkbox
Solution:
1. Added complete renderStatement function:
- Возмещение section with SBP phone display
- Full ЗАЯВЛЕНИЕ text with all fields inline
- Period fields (startdate/finishdate)
- Full offender fields (email, phone, website)
- Consent checkbox for privacy policy
- Attachments list display
2. Added validation functions:
- validateAllFields - checks all required fields
- updateSubmitButton - updates button state based on consent and validation
- Field validation helpers (isValidPhone, isValidEmail, isValidINN, etc.)
3. Enhanced attachBindings:
- Date field conversion (YYYY-MM-DD <-> DD.MM.YYYY)
- Money field comma to dot replacement
- INN field filtering (numeric only, length limits)
- Checkbox handling for privacy consent
- Phone display update in SBP section
4. Added checkbox styles and createCheckbox function:
- Custom checkbox styling matching n8n
- Required checkbox error states
- Proper label and link styling
5. Improved initialization:
- Better error handling
- Field validation on load
- Delegated INN filtering
- Proper state initialization
Files:
- frontend/src/components/form/generateConfirmationFormHTML.ts: Complete form implementation
Problem:
- Function was trying to normalize already normalized data
- Used undefined 'raw' variable after refactoring
- Data structure mismatch causing form not to render
Solution:
1. Removed redundant normalization logic:
- Data is already normalized in StepClaimConfirmation component
- Use caseObj directly from data.case
- Only ensure base structures exist (user, project, offenders, meta, attachments)
2. Fixed undefined variable:
- Changed raw.token to data.token
- Removed unused normalization code
3. Simplified data flow:
- Input: data.case (already normalized)
- Output: caseJson with same structure
- JavaScript in HTML uses injected.case directly
Files:
- frontend/src/components/form/generateConfirmationFormHTML.ts: Simplified normalization
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
