Description
The payment details form lacks visual indicators to distinguish between required and optional fields. All input fields currently appear without an "(optional)" label, creating confusion about which fields must be completed versus which are supplementary.
Current Behavior
All payment form fields appear identical without any indication of their required/optional status:
- Bank Account Name
- Bank Account Number
- Currency
- Sort Code
- SWIFT
- IBAN
- Routing Number
- Account Type
- Beneficiary Name
- Bank Address
Impact:
- Users unclear which fields are mandatory
- Potential form abandonment due to uncertainty
- Poor accessibility and user experience
Expected Behavior
Optional fields should display an "(optional)" label next to the field name, making it immediately clear which information is required versus supplementary.
Example:
<!-- Current (unclear) -->
<mat-form-field>
<mat-label>SWIFT</mat-label>
<input matInput />
</mat-form-field>
<!-- Expected (clear) -->
<mat-form-field>
<mat-label>SWIFT (optional)</mat-label>
<input matInput />
</mat-form-field>
Visual Reference
Proposed Solution
Add "(optional)" suffix to non-required fields:
- Identify which fields are truly optional based on payment processing requirements
- Add "(optional)" text to field labels for optional fields
- Maintain consistent styling with Angular Material design patterns
Acceptance Criteria
Priority
Medium - Affects user experience but not blocking functionality
Estimated Complexity
Low - Template updates with potential i18n considerations
Additional Context
This improvement aligns with standard form UX practices and improves accessibility for all users, particularly those relying on assistive technologies.
Description
The payment details form lacks visual indicators to distinguish between required and optional fields. All input fields currently appear without an "(optional)" label, creating confusion about which fields must be completed versus which are supplementary.
Current Behavior
All payment form fields appear identical without any indication of their required/optional status:
Impact:
Expected Behavior
Optional fields should display an "(optional)" label next to the field name, making it immediately clear which information is required versus supplementary.
Example:
Visual Reference
Proposed Solution
Add "(optional)" suffix to non-required fields:
Acceptance Criteria
Priority
Medium - Affects user experience but not blocking functionality
Estimated Complexity
Low - Template updates with potential i18n considerations
Additional Context
This improvement aligns with standard form UX practices and improves accessibility for all users, particularly those relying on assistive technologies.