Attach Receipt Photo to Expense Claim
For expenses above the configured threshold (100 NOK per HLF policy), a receipt image must be attached. The app should allow the peer mentor to take a photo with the device camera or select from the gallery, display a thumbnail preview for confirmation, compress the image before upload to reduce storage costs, and clearly indicate on the expense form whether a receipt is required and whether one has been attached. The receipt attachment status must persist through draft saves and be visible in the claim status view.
User Story
Audience Summaries
Receipt attachment is a non-negotiable compliance requirement under both HLF's internal reimbursement policy and Norwegian accounting regulations, making this a high-priority story with direct risk implications. By enabling peer mentors to capture and attach receipts inline during expense entry — rather than scanning and emailing them separately — the organization removes a significant friction point that has historically led to underreporting of legitimate expenses. Lower friction means more complete documentation, which protects HLF during audits and strengthens the accuracy of financial reporting. Image compression reduces cloud storage costs at scale.
The clear UI indicators (required vs. optional status) reduce support burden and submission errors, and the threshold-based logic (100 NOK) ensures the policy is applied consistently across all submissions, reducing coordinator review time and improving claim throughput.
This story has a well-scoped but technically specific delivery profile. The primary complexity lies in mobile camera/gallery integration, image compression, and ensuring receipt state persists correctly across draft saves and claim status views. Coordination is needed with the mobile platform team to confirm camera and media library permission handling across iOS and Android. The 100 NOK threshold is currently HLF-specific but the acceptance criteria imply it should be configurable — clarify with stakeholders whether configurability is in scope for this iteration.
Testing must cover: threshold boundary conditions, devices with restricted camera permissions, low-storage scenarios, and the full draft → submit → coordinator review flow to confirm receipt attachment visibility. The dependency on `story-travel-expense-registration-peer-mentor-001` means this story cannot be started until the base expense form exists. Plan a demo with HLF coordinators to validate the receipt visibility in the claim status view meets their review workflow.
Implementation spans the mobile UI, file handling pipeline, and persistence layer. For camera/gallery access, use the platform's standard media picker API (e.g., `expo-image-picker` on React Native or equivalent) and request permissions gracefully with fallback messaging if denied. Image compression should target a configurable max size (e.g., 800KB) using a library like `expo-image-manipulator` or `sharp`, applied before upload to minimize storage and bandwidth costs. Store the compressed image as a base64 string or blob reference in the draft claim state.
The expense form component must read the configured receipt threshold (fetched from org settings) and conditionally render the receipt section as required or optional, updating validation rules accordingly. Submission validation must block if `amount > threshold && receipt === null`. Ensure the receipt attachment reference is included in the draft save payload and is surfaced in the claim status view by joining the receipt record to the claim in the API response. Write unit tests for threshold logic and integration tests for the full upload → draft save → submit flow.
Acceptance Criteria
- Given my expense amount exceeds the receipt threshold, when I view the expense form, then a receipt attachment section is displayed with a 'Required' indicator
- Given I tap 'Add Receipt', when the camera sheet opens, then I can take a new photo or select an existing image from my gallery
- Given I capture a photo, when the image is processed, then it is compressed to reduce file size and a thumbnail preview is shown for confirmation
- Given a receipt is attached, when I view the expense form, then the attachment indicator shows a thumbnail and the claim can be submitted
- Given my expense amount is below the receipt threshold, when I view the expense form, then the receipt section is displayed as optional rather than required
- Given I submit a claim with a required receipt but none attached, when I attempt to submit, then validation blocks submission and shows a clear error message
Business Value
Receipt attachment is required for compliance with HLF reimbursement policy and Norwegian accounting regulations. Enabling in-app photo capture removes a significant friction point — previously mentors had to scan and email receipts separately — which directly reduces underreporting of legitimate expenses and protects the organization from audit risks by maintaining complete documentation.
Components
- Receipt Capture Widget ui
- Receipt Camera Sheet ui
- Receipt Thumbnail Preview Widget ui
- Receipt Attachment Indicator ui
- Receipt Attachment Service service
- Receipt Threshold Validator service
- Receipt Image Compressor service
- Receipt Storage Repository data
- Claim Receipt Repository data
- Receipt Image Picker Integration infrastructure
- Receipt Storage Adapter data
- Expense Form BLoC service
- Expense Validation Service service