Fix nested <form> in FinalizePreview.tsx

[eunicode]

Overview

Running products/statement-generator/src/__tests__/routing.test.tsx logs the warning:

<form> cannot appear as a descendant of <form>

This triggers at line 199 (fireEvent.click(screen.getByText(/next/i))) because the component tree for that route renders a <form> inside another <form>.

Specifically, FinalizePreview.tsx renders Download inside FormFlowContainer; both components render a <form>, so the tree ends up with a <form> nested inside another <form>.

Current structure

FinalizeStep
  └─ FormFlowContainer   // renders <form>
       └─ Download       // also renders <form>  ← nested

Action Items

• Consider ways to refactor code to prevent nested forms.
• Choose best way to refactor code. Simple solutions are preferable to make it easy to understand for other devs and for code review. But it should be reasonably robust and aligned with best practices, as well as clean and maintainable.
• Implement refactoring
• Add/update tests
• Run npm run lint:fix, and npm test.

Resources/Notes

• First noted in PR fix(modal): smooth transitions and delay routing until after close animation #1815.
• Affected files:
  • products/statement-generator/src/pages-form/FinalizePreview.tsx
  • products/statement-generator/src/components-layout/FormFlowContainer.tsx
  • products/statement-generator/src/pages-form/Download.tsx