Build a mock 26-1880 form

[msbtterswrth]

Background

As a member of the AEDP team, I want to have a mock 26-1880 form so that i can test a variety of scenarios with users.

There exists a new proposed version of the review page styling as seen below. We believe that using this new version, both at the end of the form and during the editing step, will help users to have a more seamless user experience and use less energy to complete tasks.

Moving to replace the 'address' component with this new component will also help to reduce design debt and improper component usage.

ACs

• [x] The 26-1880 form has been recreated in staging

[adamwhitlock1]

Assigning to myself to even the load a bit for this sprint, and assigning #105 to Belle. That way we each have a spike task and larger task to work on this sprint.

[adamwhitlock1]

Status update:

Worked through the main pieces of integrating this form into our mock app

• added the form as the pattern 2 - blue task for now
• updated mock server to add routes for the prefill for this form, autosave updates, and updated the user endpoint for this form to work
• refactored routes to load different App entry components when needed
• created some compatibility layers and hooks for the needed changes to our app foundation
  • React context called PatternConfigContext this moves the configuration loading for a form/task into a context provider, and this provider can then be accessed with useContext to get the current config. This was needed to dynamically load a config and pass to the app on 'boot'
  • useMockedLogin hook is a reusable hook where we can call the auth state mocking declaratively and inside of any react component.

Now that Belle has merged her work for the 1010ezr foundational work, I will resolve any merge conflicts with main and get my branch prepped for PR. The WIP branch is https://github.com/department-of-veterans-affairs/vets-website/tree/authed-patterns/aw/103/26-1880-form-prototype

[adamwhitlock1]

I went through the experimental designs for the review page work and talked with Jeana about the current state of the review page prototypes.

This new review page has not been coded out yet, and the current state of the design will be going through midpoint review and then usability research. Estimate is 6 weeks before any of that gets started and then engineering will work on some tech debt on the 20-10206 so that they can fork it to work on as an example form that covers most of the use cases.

@msbtterswrth should we just close this out then since there is no current version of the new review page in the code yet?

The 26-1880 form is current up in staging at the url: https://staging.va.gov/mock-form-ae-design-patterns/2/task-red

[msbtterswrth]

@adamwhitlock1 could you let me know a good staging user to test with?

Also was Jeanna saying we can't also test out the new design? I know it's not been fully tested yet but I was hoping we could use it and do our own testing on it as well. I don't really want to be building a pattern based on something we know is about to change soon.

For the purposes of this task however, I think we can call it done and then move the review page/step ACs into #115 for next sprint.

[adamwhitlock1]

@msbtterswrth You should be able to test in staging with basically any user, but I was able to see the form with vets.gov.user+226@gmail.com

Maybe we can discuss the review page more during sprint planning today and come up with a good way forward.

I think there is the possibility of it changing, but also it is not available to use in the code at all yet, so we would be building the UI and implementing it within the form system ourselves from scratch first before being able to use it for testing.

[msbtterswrth]

I've moved the following two ACs into the next sprint, as they were blocked by design:

• [ ] The review step has been updated to use the proposed design
• [ ] The prefill review has been changed from the address component to the proposed design

Rest of this looks great, we'll demo it to everyone today!