Displaying proper error when user doesn't have Rx or SM access

[ayaleloehr]

Alright, taking this from Github (https://github.com/department-of-veterans-affairs/kudos-team/issues/271). Will restate the problem here first:

• Currently a Veteran needs an MHV account to use Rx on vets.gov.
• Right now, when a user without an MHV account goes to Rx, the error says "We couldn't retrieve your prescriptions. Please refresh this page or try again later." This error statement is false, as retrying later won't work either.
• Instead, when a user goes to Rx, we should check their profile object to see if they have access to Rx. If they do, we let them through normally, if they don't, we put up a message saying:

"To refill prescriptions, you need to be registered as a VA patient through MyHealtheVet.
To register, visit MyHealtheVet. If you're registered but you don't see your prescriptions here, please call the Vets.gov Help Desk at 1-855-574-7286, Monday‒Friday, 8:00 a.m.‒8:00 p.m. (ET)."

The "visit MyHealtheVet" section should link to: https://www.myhealth.va.gov/web/myhealthevet/user-registration

(note, all the above applies to SM as well, I'm just using Rx as the first example as I assume once we do it for Rx it will be trivial to add it for SM as well)

Jeff Balboni [3:13 PM]
@ayaleloehr Yep. The RequiredLoginView component passes a prop down to its child component called isDataAvailable if a user fails the serviceRequired check.

[3:13]
We handle that here: https://github.com/department-of-veterans-affairs/vets-website/blob/master/src/js/disability-benefits/containers/DisabilityBenefitsApp.jsx

[3:14]
It's a little odd because you have to make the child of RequiredLoginView a React component, not an element, and the prop is only passed when it's false.

[ayaleloehr]

Comment above updated with new copy from @AnitraAppa here

[AnitraAppa]

@ayaleloehr Thanks!

[gnakm]

Tagging @melwoodard and @emilyville for awareness because today we talked about adding similar alert for users who haven't signed in LOA1 and for profile page.

[AnitraAppa]

For Secure Messaging:
"To use Secure Messaging, you need to be registered as a VA patient with a premium MyHealtheVet account. To register, visit MyHealtheVet. If you're registered, but you still can't access Secure Messaging, please call the Vets.gov Help Desk at 1-855-574-7286, Monday‒Friday, 8:00 a.m.‒8:00 p.m. (ET)."

Link "visit MyHealtheVet" to: https://www.myhealth.va.gov/web/myhealthevet/user-registration

[webinista]

I think what needs to happen is this:

1. Augment apiRequest to function more like makeAuthRequest.
   • At the very least, catch HTTP errors (status codes ≥ 400) and return an action that indicates that refreshing the page won't help. (Probably an UNAUTHORIZED action or some such.)
2. Handle the UNAUTHORIZED action in a reducer that updates state to return available, authorized props
3. Passed those props toRequiredLoginView and the subsequent AppContent component.

I'm sure I'm not explaining this well, but I think that's what needs to happen.

Update: This is close, but not it. I'm also too lazy to type what the correct way to do this is. But I think I'm closing in on a fix.

[U-DON]

^ I see you've already updated on your findings, but I think the minimum necessary change for this to work is to match Disability Benefits' usage of the isDataAvailable prop.