Notifications

The full, filterable feed of updates on your case.

<!-- GENERATED FILE. Do not edit by hand. Source: components/help/content/. Run npm run gen:docs. -->

Purpose & Business Context

The Notifications screen is the complete record of everything the platform has flagged for the patient: an action needed on the visa, a payment released, a medical opinion shared. The top-bar bell shows a quick preview; this page is the full, filterable list.

Commercially it is a re-engagement surface. A clear, prioritised feed pulls the patient back to the exact next action, reducing the chance that a stalled document or payment quietly derails the trip.

Screen Overview

A single card with a header bar holding All / Unread filter chips and a Mark all read button, followed by the notification list. Each row has a toned icon, the message text, a relative time, and an unread dot. A Back to journey button sits below the card.

Seeded items include an action-needed visa upload, a released deposit, and a shared medical opinion.

Controls & Components

• Filter chips: All and Unread; Unread shows a live count when there are unread items.
• Mark all read button: clears every unread item at once; disabled when nothing is unread.
• Notification rows: a toned icon, the message, a relative time, and a rose unread dot; clicking a row marks just that item read.
• Back to journey button: returns to the Journey dashboard.

Field Definitions

• Tone: The colour of a notification's icon, signalling its nature: amber (action needed), green (a positive event like a release), teal (informational).
• Text: The notification message, e.g. 'Action needed: upload bank statement for e-Visa'.
• Time: A relative timestamp such as 2h, 1d or 2d.
• Unread: Whether you have seen the item; unread rows are tinted and carry a rose dot.
• Filter: All shows everything; Unread shows only items you have not read.

User Actions & Workflows

1. Open Notifications from the top-bar bell preview or directly.
2. Switch between All and Unread to focus the list.
3. Click a notification to mark it read (the tint and dot clear).
4. Press Mark all read to clear everything at once.
5. Use Back to journey to return to your dashboard and act on what you saw.

Navigation & Relationships

Reached from: the top-bar notifications bell (whose popover previews the same feed).

Leads to: the Journey dashboard (/portal) via Back to journey.

Reflects: events from across the portal, such as visa actions, payment releases and care updates, that originate on the Visa, Payments and Care Plan screens.

Business Rules & Constraints

• Clicking a row marks only that item read; Mark all read clears the whole feed.
• Mark all read is disabled when there are no unread items.
• Read state is tracked per session in this prototype and is not yet persisted.
• The Unread filter shows an empty 'You are all caught up' state when nothing is unread.
• Patient-only screen within the portal.

Data Dependencies

Reads the notifications array from lib/data for the feed, and tracks read state in local component state. The top-bar bell renders a preview of the same notifications source.

• notifications: the feed (icon, text, time, tone)
• local read state: per-item read flags
• local filter state: All vs Unread

Error Handling & Edge Cases

• Nothing unread: the Unread filter shows 'You are all caught up.' and Mark all read is disabled.
• Marking all read confirms with an 'All caught up' toast.
• Read state resets between sessions in the prototype (no persistence yet).
• Mobile: the header chips and button wrap; rows remain full width.

User Roles & Permissions

• Patient: Can view, filter and mark notifications read, and navigate back to the journey.
• System / other screens (out of scope here): Generate notifications from events; the patient consumes them here.

Related Features & Functionalities

The top-bar notifications bell (preview), Settings (the channels that govern delivery), and the Visa, Payments and Care Plan screens that generate the underlying events. Back to journey ties the feed to the dashboard.

Flow & Screenshots

flowchart LR
  Bell[Top-bar bell preview] --> Notif[Notifications]
  Notif --> Filter[All / Unread filter]
  Notif --> List[Notification list]
  List -->|click row| Read[Item marked read]
  Notif -->|Mark all read| AllRead[All caught up]
  Notif -->|Back to journey| Journey[Journey dashboard]

Guided Walkthrough Steps

The in-app walkthrough for this screen has 4 steps (auto-advances every 5 seconds; Prev / Pause / Next; click outside to exit):

1. The notifications bell ([data-tour="topbar.notifications"])

This bell previews your latest updates. Opening the full page brings you here.

1. Filter your feed ([data-tour="notif.filters"])

Switch between All and Unread. The Unread chip shows a live count so you can focus on what is new.

1. Clear them all ([data-tour="notif.markall"])

Press Mark all read to clear every unread item at once. It is disabled when you are already caught up.

1. Your updates ([data-tour="notif.list"])

Each row shows a colour-coded icon, the message and how long ago it arrived. Click any row to mark just that one read.