132 Add pop up message to CPE about outdated data

[horatiorosa]

Description

New modal with advisory copy added to 3 CPE map pages

• landing page
  
• capital project map page
  
• capital projects table data page
  

Tickets

Closes #132

[netlify]

✅ Deploy Preview for cp-platform ready!

Name	Link
🔨 Latest commit	9be475a
🔍 Latest deploy log	https://app.netlify.com/sites/cp-platform/deploys/67097501856c6400085d7d00
😎 Deploy Preview	https://deploy-preview-131--cp-platform.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[TangoYankee]

From the original ticket:

Users should be able to dismiss the message and continue to use the app as normal.

My interpretation of "normal" means that once users click "close" on the modal, then they can navigate to other pages without the modal returning. Under the current changes, navigating to another page reopens the modal.

[dhochbaum-dcp]

From the original ticket:

Users should be able to dismiss the message and continue to use the app as normal.

My interpretation of "normal" means that once users click "close" on the modal, then they can navigate to other pages without the modal returning. Under the current changes, navigating to another page reopens the modal.

I agree. I also think there should be a "don't show this again" checkbox. You can check out how it was implemented in ZoLa: NYCPlanning/labs-zola#1197

[TangoYankee]

We have a few options on how to approach this:

1. If we want to make it go away semi-permanently, then we can copy the local storage approach from ZoLa (as suggested earlier). This will preserve the user's choice when they reload the application and also when they reopen their browser.

2. If we want a softer dismissal, we can move the 'modal' state from the component to the store. This will make the modal go away as the user navigates the application. However, it will return when reloading the application or reopening their browser.

3. A third option is to use a cookie. Though, that has other complications.

Regardless of the chosen approach, it would involve moving the state from the components to something more permanent.

[horatiorosa]

The ticket also states

The message should appear when a user visits any of the three following pages:
https://capitalplanning.nyc.gov/capitalprojects
https://capitalplanning.nyc.gov/capitalprojects/table
https://capitalplanning.nyc.gov/map/capitalprojects

Dismissing and not showing the modal again isn't mentioned in the requirements. It may be unwanted behavior. What if someone navigates away from the root page to /capitalprojects. They see and dismiss the modal and proceed to either of the/capitalprojects/table or /map/capitalprojects pages. Would they associate the warning on the previous page with the current one? What if the user comes back 3 days later and doesn't remember the warning and relies on outdated data?

We would need more info as to the desired behavior before working expanding the scope of the ticket. Maybe @TylerMatteo can chime in or has more information.

If a dismiss and don't show the modal gain during the current session, perhaps a cookie lasting a few hours might be a good approach. Perhaps even the store approach but I would need help with that.

[horatiorosa]

@TangoYankee @TangoYankee and @TylerMatteo
I added some logic for remembering the modal dismissal state on the LandingPage (the modal won't re-render navigating back to it from elsewhere) but by design, it will always render on the map and table pages unless we resort to more rigorous measures using localstorage or cookies.