View and Replace Attached Receipt Before Submission
After attaching a receipt, the peer mentor can tap the thumbnail to open a full-screen preview modal. From the preview, they can choose to retake the photo, select a different image from the gallery, or remove the attachment entirely. If the expense threshold requires a receipt, removing it triggers a validation warning. The BLoC state correctly reflects the attachment status and the form submission button is disabled if a required receipt is missing. This ensures data quality at point of entry rather than requiring coordinator follow-up.
User Story
Acceptance Criteria
- Given a receipt is attached to my expense, When I tap the thumbnail preview, Then a full-screen preview modal opens showing the receipt image
- Given the preview modal is open, When I tap 'Replace', Then the camera sheet reopens and I can capture a new image that replaces the previous one
- Given the preview modal is open, When I tap 'Remove', Then the attachment is cleared and the thumbnail indicator is removed from the form
- Given I remove a receipt from a claim that requires one, When the form is validated, Then a visible inline error message informs me that a receipt is required for this amount
- Given a receipt is removed when required, When I attempt to submit, Then the submit button remains disabled and the validation error is announced to screen readers via live region
- Given I replace a receipt, When the new image is confirmed, Then the old image is discarded from local state and the new thumbnail is shown
Business Value
Allowing review and replacement before submission prevents claim rejections caused by unreadable receipts, which would otherwise create a back-and-forth approval loop costing coordinator and peer mentor time. Clean data at submission means higher auto-approval rates and faster reimbursement for the peer mentor, directly improving volunteer satisfaction.
Components
- Receipt Camera Sheet ui
- Receipt Thumbnail Preview Widget ui
- Receipt Attachment Indicator ui
- Receipt Attachment Service service
- Receipt Image Compressor service
- Receipt Image Picker Integration infrastructure
- Expense Form BLoC service
- Expense Validation Service service
- Plain Language Error Display ui