Epic Feature: Announcement / Alert bar (for holidays, emergencies, etc.)

[fancyham]

Overview

We need to create an announcement bar that allows admins to display important notification to all public visitors for temporary updates such as holidays, emergencies.

How is it now?

The LA Palisades fires just happened, so we've hard-coded an announcement into the header, but it's clumsy and doesn't great. It is also very limited in text length.

So we want to build something that's more robust, user-friendly, and can handle more text.

Details

Announcement Dialog Example

• ⚠️Due to fires, some information may be out-of-date
• 🎁Holiday hours may be different from usual. Please contact organizations for their specific holiday schedule.
• ⚠️If you have been affected by the fires, please also visit someurlat.la.gov for more information. Other sites have a dismissible announcement dialog or bar or other notification for these situations, so we are doing something similar.

We want to display a notification bar across the top when the user first visits the site, no matter what screen they enter on.

Design of the announcement bar

General Behavior on how the announcement bar to work

• Notification bar appears at the top of the user's first screen (including deep links, for example to an org's listing screen). This bar appears once per-session. New sessions will see the bar again.
• Notification bar does not appear on the volunteer portion of the site (deep linking into the volunteer portion should also not display this dialog)
• Once dismissed, it doesn't appear again until the user starts a new session
• User needs to tap/Click OK (or a X dismiss button) to dismiss the notification
• Admin control panel to edit the announcement text
• Announcement text can have emojis, HTML links, styling that should show up correctly as the dialog text (let us know if that's not possible) This could be done using Markdown or by entering actual HTML code (Markdown would be ideal)
• Settings are per-tenant (e.g. LA might have an announcement active but Hawaii does not)
• Alert bar’s dismissal: bar should stay dismissed on a per-session basis (or per-day if that’s not possible).

Design of the Announcement Bar Control Panel

• We want scheduled announcement with start and/or end date. Announcement displays based on the server's date/time, if possible.

• Note: If there's a URL in the text, display it as a clickable link, or allow us to put html into the announcement text field.

• If possible, support Material UI Icons for the icon on the left. (not MVP, if difficult to build or UI is too complex)

• For now, we need just one announcement. In the future, we might consider having multiple, and they'd stack.

  • [ ] Feature: support multiple announcements

Action items

• [x] Developers: Is this design possible? how difficult? if not possible, what do you suggest? If necessary, we can revise design to something that is. : Yes, possible.
• [x] Designs complete
• [x] Implement front end
• [x] Implement control panel

Discussion

We originally designed this as a pop-up modal dialog, but so many people automatically dismiss/close those without reading that we wanted something that was unobtrusive but sticks around until you actually read it.

History

Issue history log:

Update 2025-04 - Devs can do bar after all 👍 - Indicated the MVP control panel with separate icon field and a 'active' checkbox (rather than erasing contents) - Added a separate icon field on the control panel

Update 2025-03-10 - Devs can't do bar easily — suggest persistent toasts at top of screen, something like this: