Receipt Attachment Indicator
Component Detail
Description
Compact inline widget shown on the expense form step to indicate whether a receipt is attached, required, or optional based on the configured threshold. Uses color and icon cues alongside semantic text for accessibility. Tapping it opens the receipt camera sheet.
receipt-attachment-indicator
Summaries
The Receipt Attachment Indicator directly reduces compliance risk by making receipt requirements immediately visible to employees before they submit expense claims. By surfacing mandatory versus optional attachment status in real time — based on configurable monetary thresholds — the organization reduces the volume of incomplete submissions that require back-and-forth follow-up. This translates to lower administrative overhead for finance teams and faster reimbursement cycles for employees, improving satisfaction and trust in the expense process. The widget is fully accessible, ensuring the product meets inclusion standards without additional development cost.
This is a low-complexity UI widget with a narrow, well-defined scope, making it a safe early-sprint deliverable. It depends on the Receipt Camera Sheet and Receipt Threshold Validator, so those components must be available before integration testing can begin. Accessibility requirements — specifically the live region announcement on threshold state changes — add a small but important testing surface that should be included in QA checklists. No backend dependencies exist, limiting deployment risk.
Estimate 1–2 days of implementation and 0.5 days of accessibility verification. Risk is low provided upstream components are stable.
The Receipt Attachment Indicator is a stateless-leaning mobile widget that receives `isRequired`, `isAttached`, and `uploadState` as inputs via `build()` and delegates navigation to the Receipt Camera Sheet via `onTap()`. State changes flow in through `updateThresholdState(bool)` and `updateAttachmentState(AttachmentState)`, making it straightforward to drive from a parent form controller. Accessibility is handled via a semantic live region that announces requirement changes — ensure platform-specific a11y APIs are used correctly for both iOS and Android. Dependencies on `receipt-camera-sheet` and `receipt-threshold-validator` are shallow (event dispatch only), so mocking them in unit tests is trivial.
Keep rendering logic pure and side-effect-free.
Responsibilities
- Show required vs optional attachment status based on threshold
- Display attached, pending, or missing state with icon and label
- Trigger receipt camera sheet on tap
- Announce requirement changes via accessibility live region
Interfaces
build(isRequired, isAttached, uploadState)
onTap()
updateThresholdState(bool isRequired)
updateAttachmentState(AttachmentState state)
Relationships
Dependencies (2)
Components this component depends on