Certificate Expiry Notification Banner
Component Detail
Description
Persistent in-app banner displayed in the Notifications tab for peer mentors with an expiring or expired certificate. The banner remains visible until the certificate is renewed or a coordinator acknowledges the lapse, ensuring the mentor is always aware of their certification status.
expiry-notification-banner
Summaries
The Certificate Expiry Notification Banner directly protects program credibility and compliance by ensuring peer mentors never overlook an expiring or expired certification. By keeping a persistent, visible alert active in the app until the certificate is renewed or formally acknowledged by a coordinator, the organization reduces the risk of unqualified mentors operating in the field. This reduces liability exposure, protects participant safety, and maintains program integrity — all without requiring additional administrative overhead or manual follow-up from coordinators. The clear call-to-action linking directly to the renewal flow shortens the time-to-renewal window, keeping mentor availability high and reducing the frequency of unplanned certification lapses that disrupt program scheduling.
This low-complexity mobile UI component is deliverable within a single sprint. It has one upstream dependency — the expiry-status-indicator widget — which must be completed before development begins. The primary delivery risk centers on design sign-off for the two distinct visual states (expiring-soon vs expired), which require separate color treatments per the design token system and must be reviewed before implementation to avoid rework. Testing must verify persistence behavior: the banner must remain visible across app restarts and navigation events until a qualifying dismissal event occurs, specifically certificate renewal or explicit coordinator acknowledgment.
Integration testing with the coordinator acknowledgment flow and the notification state management layer is required before this component can be accepted as complete.
Renders a persistent in-app banner in the Notifications tab via `renderExpiryBanner(daysRemaining: int, status: CertificateStatus)`, consuming CertificateStatus data from the `expiry-status-indicator` dependency for color resolution and label text. Visual differentiation between expiring-soon and expired states is driven by design tokens. Visibility is controlled via `isVisible()` and state transitions handled by `updateBannerState(newStatus: CertificateStatus)`. The `onRenewPressed()` handler triggers navigation to course administration; `onDismissPressed()` must be gated on coordinator acknowledgment business logic rather than allowing free user-triggered dismissal.
The component must maintain its visible state across widget rebuilds and app lifecycle events, requiring integration with a persistent local notification state store or backend-driven status polling on app resume. Operates exclusively in the mobile execution context. Data model dependencies: peer_mentor_profile and certificate.
Responsibilities
- Display persistent expiry warning with days remaining
- Show renewal call-to-action linking to course administration
- Remain visible until certificate renewed or coordinator acknowledges
- Differentiate visual state for expiring vs expired certificates
Interfaces
renderExpiryBanner(daysRemaining: int, status: CertificateStatus)
onRenewPressed()
onDismissPressed()
updateBannerState(newStatus: CertificateStatus)
isVisible() -> bool
Relationships
Dependents (1)
Components that depend on this component