VACMS-18974 DUW v2 flow update #31562

chriskim2311 · 2024-08-23T15:40:17Z

Are you removing, renaming or moving a folder in this PR?

No, I'm not changing any folders (skip to Summary and delete the rest of this section)
Yes, I'm removing, renaming or moving a folder

Did you change site-wide styles, platform utilities or other infrastructure?

No
Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

This PR updates the flow and button functionality of DUW v2. We made changes to the continue/back and edit logic throughout the entire flow.

Branching Questions: Discharge Year, Reason, Previous Application, Previous Application Type, Previous Application Year

Related issue(s)

department-of-veterans-affairs/va.gov-cms#18974

Testing done

Tested flows and all AC functionality throughout the flow and the review page.

Testing URL: /discharge-upgrade-instructions/introduction/
Mural for testing: https://app.mural.co/t/departmentofveteransaffairs9999/m/departmentofveteransaffairs9999/1696352911500/80253b1c7200212cbcbcfb940d2cf4a29fed8417?sender=ua4eca0cc168eff677bd03940

Screenshots

What areas of the site does it impact?

DUW v2

Acceptance criteria

Quality Assurance & Testing

I fixed|updated|added unit tests and integration tests for each feature (if applicable).
No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
Linting warnings have been addressed
Documentation has been updated (link to documentation *if necessary)
Screenshot of the developed feature is added
Accessibility testing has been performed

Error Handling

Browser console contains no warnings or errors.
Events are being sent to the appropriate logging solution
Feature/bug has a monitor built into Datadog or Grafana (if applicable)

src/applications/discharge-wizard/components/v2/ReviewPage.jsx

laflannery · 2024-08-27T18:03:08Z

@chriskim2311, could you make sure everything in the new form matches the mural before we continue reviewing and if there are deviations for specific reasons we call these out? I think I'm specifically looking at the edit logic. So far I've found at least one scenario that doesn't look to match the mural:

I tested the last flow in the mural as my example flow.
- The last question (Previous application type) does not impact the flow at all in this case, it has no branching logic.
- Because of that, we should be following the Edit flow guidelines for no branching logic

chriskim2311 · 2024-08-27T18:14:30Z

@laflannery Thanks for the call out! The questions that branch are the following: Discharge Year, Reason, Previous Application, Previous Application Type, Previous Application Year. There are scenarios where the Previous Application Type answer can change the flow to Prior Service or Failure to Exhaust.

laflannery · 2024-08-27T18:36:23Z

This was just confusion/misunderstanding on my part. Chris explained it to me in slack

eselkin · 2024-08-27T19:48:04Z

Was it expected that the styles would not be the same when reviewing the answers
on va.gov

vs how it appears on RI:

eselkin

LGTM. Tested on the flow mentioned. Back and continue seem to retain information and flow seems correct re:Mural

laflannery · 2024-08-27T21:07:20Z

@chriskim2311 @thejordanwood and I ended up reviewing together because it was helpful, we have a few additional notes:

We found that some questions, while not technically branching questions were impacting the flow and adding new questions. That being said, and with approval from Amanda, we would like to make a change the the alert display:
- Can we show the "Changing your answer..." alert on every question when the user hits edit, regardless of if it's a branching question?
- And can we show the "Your information..." alert on the review screen always when they get back to here?
There is something not quite right with the edit flow on the Year/Month questions:
- Review screen > Edit Year > Change from any other year to 2009 > Hit Back > Go to Service Branch question > Either change or don’t change answer here (doesn’t matter) > Click Continue > You will be taken to the review screen
- You will see that the year is correctly updated to 2009, and branch is updated (if you chose to change this)
- However, the issue is that I have skipped the month question which is required
- When I hit “Back” on the branching question, that should have reset the flow so that “Continue” on the Service Branch question went through the flow instead of to the review screen
We are also finding issues when testing some of the more complex flows in the mural with the edit logic. For example:
- I am finding instances where the Back and Continue buttons simple stop working during the edit process. I keep trying to click on them but they aren't doing anything any more. This seems very inconsistent though.
- Jordan and I both have experienced issues where the back button is not working as noted in the edit flow for branching questions:
  - I am on the review screen > Click edit on a branching question > Change my answer > Click Continue > I am correctly taken to the next new question in the flow > Click back > I should be taken back to the branching question that I was on but instead I have skipped that question and I am taken to the question before that in the flow

Let me know if there are any technical limitations to the issues we are seeing with the buttons. I do know this is complex and if there needs to be a discussion about a different solution let us know.

thejordanwood · 2024-08-27T21:26:16Z

That being said, and with approval from Amanda, we would like to make a change the the alert display:

Can we show the "Changing your answer..." alert on every question when the user hits edit, regardless of if it's a branching question?

And can we show the "Your information..." alert on the review screen always when they get back to here?

@chriskim2311 I'm going to update the Mural tomorrow to reflect this change if this is something you can do.

chriskim2311 · 2024-08-28T04:06:26Z

@laflannery @thejordanwood Thanks for reviewing! I have some comments below.

Can we show the "Changing your answer..." alert on every question when the user hits edit, regardless of if it's a branching question?

I have added this to all questions when a user clicks edit, if Amanda does not approve it I can revert the change.

There is something not quite right with the edit flow on the Year/Month questions

I did make some changes for this to work as well.

When I hit “Back” on the branching question, that should have reset the flow so that “Continue” on the Service Branch question went through the flow instead of to the review screen

Completing the wizard then editing and clicking back to the home screen do we not want to save any answers?

Also from my understanding we want to only show empty questions in the new flow and skip any answered questions. This was based on Dave's original logic.

We are also finding issues when testing some of the more complex flows in the mural with the edit logic.

I did find a bug that I believed resolved this issue. If you hit a scenario where the buttons aren't working can you open the console and send me a screenshot, there should be an error shown, so I can debug further.

laflannery · 2024-08-28T15:25:30Z

@chriskim2311 I'm not done with functionality testing but I needed a break so I switched to accessibility testing. Only one note:

The expandable alerts need the content in the expanded section to be wrapped in a semantic tag, without a <p> the font will not resize properly and it is being ignored by screen readers because it's just floating out there without meaning.

thejordanwood · 2024-08-28T16:04:33Z

@chriskim2311 I've updated the Mural to show:

That alerts should show on every question when the user hits edit
That the alert on the Review page should show after editing any question
I also created a Edit Year Discharge flow to show how that should work

Let me know if something is unclear!

chriskim2311 · 2024-08-28T18:15:38Z

@laflannery Thanks I have updated the alert mark up.
@thejordanwood Thanks I have updated all edit flows to have the alert and if a question is changed then the review shows the review page alert as well.

laflannery · 2024-09-05T12:29:30Z

@chriskim2311 Jordan and I put the edge cases we were finding in this google doc because it was easier to format and make sense than in a comment. Can you take a look and then let the group know if you feel these are highlighting larger issues and we maybe should go with a simpler option as MVP or if we might be able to sort this out, thanks!

Word doc for other folks:
Discharge upgrade Flows PR testing.docx

…veterans-affairs/vets-website into 18974-flow-update

randimays · 2024-09-06T15:19:50Z

(From Slack DMs) I reviewed against Laura's doc.

I used the answers from Laura's screenshot on #2 and saw that the red text is still happening. I saw that she mentioned Jordan couldn't reproduce but I tested twice with those answers and it happened both times.

Random thing I noticed: while clicking Edit on the review screen, you can see two focus boxes (yellow squares)

Question: should the review screen show the Your information was updated info box if the answer wasn't changed when editing? My suspicion is yes (to keep logic simpler) but I wanted to double check.

I didn't see any other issues; logic looks good!

randimays

Chris and I discussed #2 (above) in DMs; this is intentional behavior. All is good! Great work, Chris

chriskim2311 · 2024-09-06T18:03:18Z

Going to add a span and remove padding on the edit link to only show one focus box

randimays

Some non-blocking comments for consideration

randimays · 2024-09-09T16:17:02Z

src/applications/discharge-wizard/components/v2/questions/shared/Dropdown.jsx

@@ -74,6 +77,9 @@ const Dropdown = ({

        if (forkableQuestions.includes(shortName) && editMode) {
          toggleQuestionsFlowChanged(true);
+          toggleAnswerChanged(true);


Consider: I've noticed in a few files in this PR that we're duplicating toggleAnswerChanged(true) on both sides of an if statement. Is this for readability / clarity? Perhaps we could consolidate and place it once above the if statement.

Thanks! I'll clean this up it needs to be in the if statement only. But I can rewrite it to only write it once.

randimays · 2024-09-09T16:20:04Z

src/applications/discharge-wizard/utilities/page-navigation.js

@@ -93,31 +93,53 @@ export const navigateForward = (
          !formResponses[nextShortName] &&
          editMode
        ) {
-          updateRouteMap([...routeMap, ROUTES?.[nextShortName]]);
+          if (routeMap[routeMap.length - 1] !== ROUTES?.[nextShortName]) {


I think we could benefit from a comment(s) explaining what's going on here briefly, and/or smaller utility functions that navigateForward uses to help keep things more readable.

randimays · 2024-09-09T16:23:14Z

src/applications/discharge-wizard/utilities/page-navigation.js

          pushToRoute(nextShortName, router);
          return;
        }

+        // This handles the edge case of the edit question not being skipped


Consider: don't be afraid of longer variable names or more detailed comments to explain complex behavior. For instance, "edit question" may not be clear to a stranger to this code; maybe "question being edited." (Same with variable editQuestion; this could be questionSelectedToEdit) Not sure if my suggestions make it more clear; just offering some perspective

That makes sense I can make these changes

laflannery · 2024-09-09T18:34:46Z

Approved...finally!

thejordanwood · 2024-09-09T18:46:16Z

Approved!

…veterans-affairs/vets-website into 18974-flow-update

Chris Kim added 5 commits August 21, 2024 23:54

init

faccf23

updates

91157c6

update for question logic

cd89439

update state logic

0bfd101

updates to tests

833a77a

va-vfs-bot temporarily deployed to master/18974-flow-update/main August 23, 2024 18:10 Inactive

chriskim2311 marked this pull request as ready for review August 26, 2024 23:03

chriskim2311 requested review from a team as code owners August 26, 2024 23:03

chriskim2311 commented Aug 27, 2024

View reviewed changes

src/applications/discharge-wizard/components/v2/ReviewPage.jsx Outdated Show resolved Hide resolved

eselkin previously approved these changes Aug 27, 2024

View reviewed changes

updates based on PR comments

0cf1046

chriskim2311 dismissed eselkin’s stale review via 0cf1046 August 27, 2024 23:47

va-vfs-bot temporarily deployed to master/18974-flow-update/main August 28, 2024 00:09 Inactive

updates

ff8e54f

va-vfs-bot temporarily deployed to master/18974-flow-update/main August 28, 2024 05:44 Inactive

update semantic html for alert

77014ae

va-vfs-bot had a problem deploying to master/18974-flow-update/main August 28, 2024 15:44 Error

updates to review alerts

e885324

Merge branch 'main' into 18974-flow-update

942b501

va-vfs-bot temporarily deployed to master/18974-flow-update/main September 5, 2024 02:08 Inactive

Chris Kim added 2 commits September 5, 2024 10:42

comment

fb6aa8a

Merge branch '18974-flow-update' of https://github.com/department-of-…

344fe0c

…veterans-affairs/vets-website into 18974-flow-update

va-vfs-bot temporarily deployed to master/18974-flow-update/main September 5, 2024 17:55 Inactive

updates to accomodate edge cases

6c007c4

va-vfs-bot temporarily deployed to master/18974-flow-update/main September 5, 2024 22:21 Inactive

props update

c4b3deb

va-vfs-bot temporarily deployed to master/18974-flow-update/main September 5, 2024 23:46 Inactive

randimays previously approved these changes Sep 6, 2024

View reviewed changes

Chris Kim added 2 commits September 6, 2024 12:53

fix semantic edit focus

6b0184e

updates from comments

492e6c6

chriskim2311 dismissed randimays’s stale review via 492e6c6 September 6, 2024 22:42

va-vfs-bot temporarily deployed to master/18974-flow-update/main September 6, 2024 22:43 Inactive

va-vfs-bot temporarily deployed to master/18974-flow-update/main September 9, 2024 14:04 Inactive

Merge branch 'main' into 18974-flow-update

3c6c619

va-vfs-bot deployed to master/18974-flow-update/main September 9, 2024 16:10 View deployment

randimays reviewed Sep 9, 2024

View reviewed changes

randimays previously approved these changes Sep 9, 2024

View reviewed changes

Chris Kim added 2 commits September 9, 2024 11:49

updates from PR comments

ab6ac62

Merge branch '18974-flow-update' of https://github.com/department-of-…

4900eed

…veterans-affairs/vets-website into 18974-flow-update

chriskim2311 dismissed randimays’s stale review via 4900eed September 9, 2024 18:50

randimays approved these changes Sep 9, 2024

View reviewed changes

chriskim2311 merged commit 6076936 into main Sep 9, 2024
79 of 80 checks passed

chriskim2311 deleted the 18974-flow-update branch September 9, 2024 19:46

thejordanwood mentioned this pull request Sep 9, 2024

[Discharge Upgrade Wizard] Update Mural board flow and content department-of-veterans-affairs/va.gov-cms#18987

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VACMS-18974 DUW v2 flow update #31562

VACMS-18974 DUW v2 flow update #31562

chriskim2311 commented Aug 23, 2024 •

edited

Loading

laflannery commented Aug 27, 2024 •

edited

Loading

chriskim2311 commented Aug 27, 2024 •

edited

Loading

laflannery commented Aug 27, 2024

eselkin commented Aug 27, 2024

eselkin left a comment

laflannery commented Aug 27, 2024

thejordanwood commented Aug 27, 2024

chriskim2311 commented Aug 28, 2024

laflannery commented Aug 28, 2024

thejordanwood commented Aug 28, 2024

chriskim2311 commented Aug 28, 2024

laflannery commented Sep 5, 2024

randimays commented Sep 6, 2024

randimays left a comment •

edited

Loading

chriskim2311 commented Sep 6, 2024

randimays left a comment

randimays Sep 9, 2024

chriskim2311 Sep 9, 2024

randimays Sep 9, 2024

randimays Sep 9, 2024

chriskim2311 Sep 9, 2024

laflannery commented Sep 9, 2024

thejordanwood commented Sep 9, 2024

VACMS-18974 DUW v2 flow update #31562

VACMS-18974 DUW v2 flow update #31562

Conversation

chriskim2311 commented Aug 23, 2024 • edited Loading

Are you removing, renaming or moving a folder in this PR?

Summary

Related issue(s)

Testing done

Screenshots

What areas of the site does it impact?

Acceptance criteria

Quality Assurance & Testing

Error Handling

laflannery commented Aug 27, 2024 • edited Loading

chriskim2311 commented Aug 27, 2024 • edited Loading

laflannery commented Aug 27, 2024

eselkin commented Aug 27, 2024

eselkin left a comment

Choose a reason for hiding this comment

laflannery commented Aug 27, 2024

thejordanwood commented Aug 27, 2024

chriskim2311 commented Aug 28, 2024

laflannery commented Aug 28, 2024

thejordanwood commented Aug 28, 2024

chriskim2311 commented Aug 28, 2024

laflannery commented Sep 5, 2024

randimays commented Sep 6, 2024

randimays left a comment • edited Loading

Choose a reason for hiding this comment

chriskim2311 commented Sep 6, 2024

randimays left a comment

Choose a reason for hiding this comment

randimays Sep 9, 2024

Choose a reason for hiding this comment

chriskim2311 Sep 9, 2024

Choose a reason for hiding this comment

randimays Sep 9, 2024

Choose a reason for hiding this comment

randimays Sep 9, 2024

Choose a reason for hiding this comment

chriskim2311 Sep 9, 2024

Choose a reason for hiding this comment

laflannery commented Sep 9, 2024

thejordanwood commented Sep 9, 2024

chriskim2311 commented Aug 23, 2024 •

edited

Loading

laflannery commented Aug 27, 2024 •

edited

Loading

chriskim2311 commented Aug 27, 2024 •

edited

Loading

randimays left a comment •

edited

Loading