Epic - Prefill Pattern Forms System Integration - ContactInformation component

[adamwhitlock1]

User Story

As an engineer I want to have a fully functioning ContactInformation component with a forms-system integration that adheres to the prefill and update prefill patterns.

Background

After creating the initial pass on the ContactInfo component updates, we have a basic contact info flow established and main styling changes made, but there are several issues with the updates that should be addressed through work on this epic.

Remaining work and unresolved issues

• What happens if someone updates a missing piece of info, gets to the review page, and then hits the back button on the form to update the last field? We aren't really handling that correctly because then it would check for the preview The check would fire and not provide any route to go to, since the field isn't missing, or what should happen?
• Focus issues on the ContactInfo page. The design meeting brought up a good point on the focus tracking on this page. I do believe that the focus was set to the edit link of the previously updated section and it was scrolled to automatically after updating a field. Now the new behavior would be to focus on the alert at the top of the page instead of the field, and that may go against accessibility guidance.
• The alert does not show a single fields name when just one field was updated, but instead it will always show 'We’ve updated your contact information.'
  • There is the ability to refactor the session storage utility that tracks updated fields, but that work requires some additional discovery into the best way to standardize this data.
  • The current session storage is stored as a single string with a comma delineated key and state, so email,updated is what is stored in the session storage location of onReviewPageContactInfoEdit (which isn't the greatest name especially in the context of the new pattern, but will have to be worked around regardless)
  • An alternative approach would be to either store the data as stringified json, or to store the additional updates in the same key but add additional formatting to allow multiple pieces of data to be stored like email,updated|mobilePhone,updated|mailingAddress|errored etc and that could be parsed and used accordingly.
• The existing navigation is 'Update' button on the left and 'Cancel' on the right. The Cancel behavior would go back to the summary page or? Also it seems like the order of the buttons should be reversed and probably follow the form navigation buttons on other form pages with Back and Continue.
• Showing errors is an issue. We don't have a fallback to the forms-system without updating the profile, and so errors would halt the progress of the form at this point.
• prefill alert needs to be added on individual form field edit pages to match mockup.
• summary page needs to have conditional logic to show Add / Edit / Optional link text because right now it is just Edit
• Configuration changes need to be noted around the recommended page title, removing description, and any other custom content or deviations from the existing content used in the ContactInfo component
• The home address is shown as an available field for this page, but is not currently supported on the ContactInfo component, so would need to be added.
• If the field is missing, then the edit page for a field should have 'Add' in the heading instead of 'Edit'
• the 'Finish this form later' link should be added to the field editing pages
• Testing. Still very alpha in code status and full coverage with tests is needed as the remaining items are firmed up.

Acceptance Criteria

• all related tickets have been created for this work and completed. Work is ready to be reviewed by forms team and other stakeholders

Review needed by

• VA Product Owner
• Product Manager
• UX Research Team
• Engineering Team

Definition of Done

• Documentation has been updated, if applicable.
• Acceptance Criteria in related issue are met.
• Reviewers have approved.