BTSSS: Implement react widget

[wesrowe]

Description

User story

Describe the audience/user, enhancement or fix, and value / outcome desired.

AS A Veteran, caregiver, or beneficiary eligible for reimbursement of mileage and other travel expenses to and from approved health care appointments I WANT access to the travel reimbursement tool (BTSSS) from the travel reimbursement page to be easier and faster SO THAT I will be more likely to receive the travel reimbursement benefit to which I'm entitled.

Design

(From #12530)

Mural BTSSS board for existing flows, some screenshots of which may be helpful for user flow diagram.

UPDATE: Content added in comment below

Logged out version


Logged in version

Engineering notes / background

• See Cerner react widgets for technical implementation details, e.g.: refill prescription.
• Dynamic content in Drupal: Implementation and removal process - Sitewide Content doc relevant for CMS pages that include a React widget

Analytics considerations

GA should capture the buttons of both versions:

• Sign in button
• Go to BTSSS Action Link Design system analytics are acceptable [NOTE: Wes to look up analytics on Cerner widgets]

Quality / testing notes

This React widget will have content in the code. When built, we need to provide the React ID for the widget to the content team, to add it into the CMS node as a reference, for the widget to show.

Because this is an existing live page in prod, we cannot use the dark launch mechanism, which would publish the page only to Staging, effectively unpublishing the Production page. Because it's CMS + vets-website, there's no other mechanism to preview the changes pre-production, so we'll have to demo locally for reviewers.

When we are ready to launch, order of operations is listed in ACs.

Acceptance criteria

• [x] React widget is behind a flipper
• [x] Verified whether / how UWDS 3.0 design system upgrade will / won't impact this work (Slack thread)
• [x] Use final content from https://github.com/department-of-veterans-affairs/va.gov-team/issues/53735
• [x] If the user is not logged in,
  • [x] The "sign in" version of the widget displays on first landing on travel reimbursement page
  • [x] When the Veteran clicks the "sign in" button, the login modal appears over the current page
  • [x] If the Veteran closes that modal, they stay on the current page
  • [x] After the Veteran successfully logs in, they stay on the current page but see the authed version of the component
• [x] If the user is already logged in when they land on the travel reimbursement page, or after going through the sign-in flow on the page,
  • [x] The already-signed-in version of the widget displays
  • [x] When the Veteran clicks the link, they are deep-linked into their BTSSS dashboard
• [x] Analytics is implemented on the link of both versions
  • [x] Sign in button
  • [x] Go to BTSSS action-link
• [x] Notified Laura Willwerth and Randi Hecht of Sitewide Content team when we are ready to merge so that they can coordinate publication of in-page content at the same time.

Testing / launch

• [ ] Before merging PR(s), demo from local with a CMS instance configured to display the React widget on the existing CMS page. Demo should include: @wesrowe @jilladams @RLhecht, @thejordanwood, and @laflannery
• Launch order of operations:
  • [x] merge to vets-website
  • [x] vets-website ships to prod
  • [x] Provide the React app widget ID to Randi -- the value in Drupal for Widget Type needs to match the name of the React widget that has been created, using underscores.
  • [x] Content team: will add the React widget ID reference to CMS node & publish.
  • [ ] Content will be on prod after a daily content build + content release + nightly prod CMS mirror refresh / Staging rebuild
  • [ ] Flip the Staging flipper and ask Randi / Laura to verify
  • [ ] Flip the Prod flipper

Team

Please check the team(s) that will do this work.

• [ ] CMS Team
• [X] Public Websites
• [ ] Facilities
• [ ] User support

[jilladams]

Refinement: this ticket will be ready for Sprint 80. Content team has their ticket in next sprint (94?), which aligns with our Sprint 79.

[wesrowe]

Design System team confirmed that there are no issues with our react widget design w.r.t. Design System 3.0. Also, SW Content team confirmed that final copy will be available tomorrow, 3/16. So we're good to go on BTSSS. FYI @davidconlon @jilladams

[jilladams]

Per Wes: Randi has confirmed that content will come through shortly, so we are pulling this into sprint. Tradeoff: #10307 has been removed from sprint.

[wesrowe]

Content added in SWC ticket:

Hi @wesrowe , here's suggested content for this widget. Does a simple action link work for the auth version? That's how the existing link to AccessVA is styled on the live page.

Unauth widget content   [H3] Sign in to file a travel pay claim   Sign in with your existing Login.gov, ID.me, DS Logon, or My HealtheVet account. If you don’t have any of these accounts, you can create a free Login.gov or ID.me account now.   Sign in or create an account [button to sign in modal]   Auth widget content   Go to BTSSS to file a claim [action link]

[jtmst]

This should be able to deploy to staging once CMS has added the data attribute. This allows us to test in staging without going to prod because of our feature flag. We won't be able test that you're going to the right BTSSS place until we get to prod because our test/staging users dont work there, but we should be able to see that we are getting to the BTSSS login

[wesrowe]

Per convo in refinement meeting:

• Daniel and Josh to meet about Daniel carrying this over the line
• Testing will be possible in Staging thanks to flipper
• We won't see the BTSSS dash load in staging, as test users don't have authorization for that platform. Link should look right though.

[dsasser]

Some notes after meeting with Ryan:

• The work Josh did is functional and meets requirements (one small change was recommended, which I'll address).
• There exists a CTA react component that is used commonly in the codebase that was not used in this PR. Reasons include the design of the CTA component doesn't align exactly with the proposed BTSSS widget design, and the Google Analytics tracking isn't setup on the CTA component.
• Since the PR is functional, we can ship it as is, but we should revisit using the CTA component in a future ticket.

[jilladams]

One note for change from Randi (there may be more coming when we're live on Staging): references to auth options should be bolded, e.g. Login.gov, etc.

[dsasser]

One note for change from Randi (there may be more coming when we're live on Staging): references to auth options should be bolded, e.g. Login.gov, etc.

This has been PR'd here: https://github.com/department-of-veterans-affairs/vets-website/pull/23802