Mailing address form updates - use url query strings, move edit form, adjust headings, use web component pattern, other fixes

[adamwhitlock1]

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

• No, I'm not changing any folders (skip to TeamSites 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

• Added the usage of query strings to represent section being edited and if the editing originated from the review page. Since we are using regular links, it didn't work too well to wire up additional session storage event listeners to the link clicks and set up cleanup of the session storage on page visit.
• Use the web component 'pattern' for the address form itself. This presented an interesting bug. If I used the 'depends' property to hide the form form the usual form page flow, then for some reason the state and city sections of the form broke and didn't display correctly. This resulted in me having to move the address editing page to after the new review page, that way it wouldn't be shown in the usual form flow, but could still be navigated to from the review page and would not require the 'depends' property.
  • This is somewhat of a compromise in getting the form to work, because now the 'stepper' on the top of the page does not match the design, but I will see if the VFF team may be able to address the bug and then we could move it back if possible, otherwise we may just have to live with the difference.
• Used the Schema form component to render the form and related schema/uiSchema from the form config, and that way we could pass in the submit and cancel buttons.
• Fixed some heading levels
• Adjusted depends logic for contact info page to display using location check
• Added dev links to localhost version, so that it is easier to navigate the form while working through code changes

Related issue(s)

• Add Update mailing address edit subtask page tmf-auth-exp-design-patterns#175

Testing done

• Updated e2e test for orange pattern

Screenshots

What areas of the site does it impact?

Auth patterns mock form

Acceptance criteria

• Edit address form works from review page, updates address and shows success alert

Quality Assurance & Testing

To test, spool up the mock server and frontend locally

• You should be able to navigate through the 2 pages of the form and then edit the address from the review page. The success alert should be shown on saving address, and the page should be scrolling to the address section on the review page.

• 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)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

[bellepx0]

approved!