Updating the existing Prefill alert content component

[msbtterswrth]

User Story

As a member of the AEDP team I want to update the existing content component so that it follows our updated pattern.

Steps

In the PrefillMessage.jsx component:

1. Replace div with usa-alert classes.
2. Update the language of the PrefillMessage component to match the updated wording in our pattern documentation.

Deliverables

• A PR to update the prefill alert content component in vets-website.
• A PR to update the prefill alert page on VADS docs site

Acceptance Criteria

• PRs are opened
• and reviewed by internal team members

Questions & Considerations

The current prefill alert content in our pattern docs is:

"We've prefilled some of your information from your account. If you need to correct anything, you can select edit below. All updates will be made only to this form."

However, this text may not fit every use case. The main issues are:

1. "All updates will be made only to this form"
   This may not always be true if the application is using the update functionality that pushes back to the profile.

2. "You can select edit below"
   This statement assumes the use of cards (as per our pattern), but some forms just prefill fields directly without using cards. In these cases, the language around "select edit below" may not be applicable.

Proposed Solution

1. Language Variants Based on Props

We could create language variants based on a specific prop to ensure the correct message is displayed depending on the use case. For ex: if the form is prefilled with fields rather than cards, the language should reflect that. The existing language could be the default unless a specific prop value triggers an alternate message.

2. Clear Messaging for Different Scenarios

We need to appropriate language thats covers the following scenarios:

• Editable Cards
• Filled-in Form Fields --> forms where fields are prefilled but without cards.
• Custom Messages --> we should still support the custom message prop to maintain backward compatibility with existing implementations

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.

[adamwhitlock1]

Also for reference the existing content that is shown now in production is

'We’ve prefilled some of your information from your account. If you need to correct anything, you can edit the form fields below.'

[msbtterswrth]

The new language should match what we've updated on the engagement messages page I believe which I've included below.

Scenario	Message title	Message content	Actions	Component	State	Location
Prefill - Intro variation (for authenticated users)	We’ve prefilled some of your information	Since you’re signed in, we’ve prefilled part of your application based on your profile details. You can also save your application in progress and come back later to finish filling it out.	None	Alert box	Informational	After h1 on Form Introduction page
Prefill - Step variation (for authenticated users) - If saving to form and Profile	None	Any changes you make will also be reflected on your VA.gov profile.	None	Alert box	Informational	After Progress bar - Segmented on a Form Step page

However reviewing the usage of the prefill content component I believe this is the one that often shows on the step page NOT the intro page, and we have updated our guidance to REMOVE the step page alert afaik, is that correct @kristen101606?

[msbtterswrth]

We're going to investigate the usage of prefill alert component on intro pages, and suggest deprecation for step-page prefill alert.

---

Also we will need to update the prefill alert page specifically:

• Update this screenshots section to include our updated intro page alert
• Remove the step page alert screenshot

We should also update the content considerations section to the following:

When to use

When prefilling information from the user’s profile. These messages communicate to the user that their profile information has been leveraged to pre-populate the form that they are filling out and informs the user that their progress will be saved as they complete the form.

When to consider something else

Unauthenticated users. Users who are unauthenticated should not see this message as we cannot use their profile data to prefill the form.

How this component works

Uses Alert - Informational. This component is an instance of the Alert - Informational component, with specific per-determined content.

Placement

This component appears after the subtitle of the form and before the action link to start the form process on the authenticated variation of the Form - Introduction page.

[bellepx0]

Apps that are using SaveInProgressIntro component

1. Accredited-representative-portal
2. Appeals
3. Ask-a-question
4. Ask-va
5. Burials-ez
6. Disability-benefits --> including: 2346, all-claims, 686c-674, 686c-674-v2
7. Edu-benefits --> including: 0994, 10203, 10215, 10216, 1919, 1990, 1995, 5490, 8794, feedback tool
8. Financial-status-report
9. Fry-dea
10. HCA
11. Healthcare-supply-reordering
12. Income-and-asset-statement
13. Ivc-champva --> including: 10-10D, 10-7959a, 10-7959c, 10-7959f-1, 10-7959f-2
14. Lgy/coe
15. Mock-sip-form
16. Mock-form
17. My-education-benefits
18. Pensions
19. Pre-need
20. Pre-need-integration
21. Representative-appoint
22. Sah
23. Simple-forms —> including: 21-0845, 21-0966, 40-0247, form-upload, mock-simple-forms-patterns
24. Simple-forms-form-engine
25. Survivor-dependent-education-benefit --> including: 22-5490
26. Toe
27. Travel-pay
28. User-testing
29. Vre —> including: 28-1900, 25-8832

Within the SaveInProgressIntro component, there is a verifiedPrefillAlert prop that is used to pass a custom prefill signed-in alert component with a message tailored to the app. If a form provides its own verifiedPrefillAlert component, the default signed-in prefill alert from SaveInProgressIntro will be replaced by the form's custom verifiedPrefillAlert component.

<SaveInProgressIntro
            headingLevel={3}
            prefillEnabled={route.formConfig.prefillEnabled}
            messages={route.formConfig.savedFormMessages}
            pageList={route.pageList}
            startText="Start a new order"
            formConfig={route.formConfig}
            verifiedPrefillAlert={VerifiedPrefillAlert}
          />

For example: in mhv-supply-reordering

const VerifiedPrefillAlert = (
  <va-alert status="info" class="vads-u-margin-bottom--2">
    <div className="usa-alert-body">
      Since you’re signed in to your account, you can save your order in
      progress and come back later to finish filling it out.
    </div>
  </va-alert>
);

Apps that have their own verifiedPrefillAlert component

1. disability-benefits -> including: 686c-674, 686c-674-v2
2. ezr
3. mhv-supply-reordering
4. simple-forms --> including: 21-0845, 21-0966, 21-10210

[bellepx0]

I created a new ticket to address updating the prefill page in VADS #273

[msbtterswrth]

Let's pivot this task to more of a discovery/spike task and use the new one for implementation. I'll close this one out.