Merge pull request #6077 from department-of-veterans-affairs/6076-prefill-update-mailing-address

Update updating prefill guidance

Author: humancompanion-usds

src/_patterns/help-users-to/update-prefilled-information.md

@@ -46,33 +46,35 @@ Refer to the related ["Help users to... Know when their information is prefilled
 
 #### Prefilled information the user can't update
 Here's how to communicate that users can't update certain information online:
-* **Omit the edit link in cards with uneditable information.**  
-* **Include instructions for how to update uneditable information.** Under the card with the uneditable information, display a note starting with the bolded word “Note:” followed by directions to help users find out how to update this information by phone or another way. These directions will vary by form or type of information. You’ll need to confirm that the directions are accurate for updating that specific type of information. See the Content considerations section for more guidance.
+* **Omit the edit link in the [Card component]({{ site.baseurl }}/components/card) with uneditable information.**
+* **Include instructions for how to update uneditable information.** Under the [Card]({{ site.baseurl }}/components/card) with the uneditable information, display a note starting with the bolded word "Note:" followed by directions to help users find out how to update this information by phone or another way. These directions will vary by form or type of information. You'll need to confirm that the directions are accurate for updating that specific type of information. See the [Content considerations section](#content-considerations) on this page for more guidance.
 
 #### Prefilled information the user can update
 Here's how to communicate that users can update certain information online:
 
-**Display editable prefilled information in a card with an edit link.** Display prefilled information in a card component with a link to edit the information. This information may include contact information, such as phone number, email address, or mailing address.
+**Display editable prefilled information in a Card - status with an edit link.** Display prefilled information in a [Card - status]({{ site.baseurl }}/components/card/card-status) with a link to edit the information. This information may include contact information, such as phone number, email address, or mailing address.
 
 {% include component-example.html class="x2" alt="Cards that show contact info with links to edit if needed." file="/images/patterns/help-users-to/update-prefilled-information/editable-prefill-contact-info.png" %}
 
 When the user updates this information, there are two potential pathways.
 
 ##### If we automatically save changes to the user's profile
 
-**In most cases, when users update information that can be edited in their profile**, we should save the changes should be saved to both the form or tool and the profile. An informational alert will indicate where we'll save the changes.
+**In most cases, when users update information that can be edited in their profile**, the changes should be saved to both the form or tool and the profile. An [Alert - informational]({{ site.baseurl }}/components/alert) will indicate where we'll save the changes.
 
 For developer documentation on saving information changes to the profile, consult [How to create the contact info Array Data](https://depo-platform-documentation.scrollhelp.site/developer-docs/va-forms-library-how-to-create-the-contact-info-ar).
 
 {% include component-example.html class="x2" alt="A page for users to update their mailing address. Above the fields is an informational alert stating, 'Any changes you make will also be reflected on your profile.'" file="/images/patterns/help-users-to/update-prefilled-information/edit-save-to-profile.png" %}
 
-##### If we let the user choose whether to save changes to their profile
+##### If we let the user choose whether to save changes to their mailing address
 
-**In certain cases, users may need more control over where we save the changes.** Instead of displaying an informational alert at the top of the page, display a question with radio button response options asking the user where they want to save their changes. Learn more about these cases in the “communicate where changes will save” section below.
+**For mailing addresses only, users may need more control over where we save the changes.** Instead of displaying an informational alert at the top of the page, display a question at the bottom of the page asking the user where they want to save their changes. Learn more about these cases in the [communicate where changes will save section](#communicate-when-and-where-well-save-updates-to-prefilled-information) on this page.
 
-Consider using this variation for information that may change frequently. For example, when reordering medical supplies, users may want to provide a temporary mailing address. But they may not want to save this temporary mailing address to save to their profile. 
+**Note:** Phone number and email address updates always save to both the form and the user's profile. Only mailing address updates can be saved to the form only.
 
-After the form fields the person is updating, include this question:
+Consider using this variation for mailing addresses that may change frequently. For example, when reordering medical supplies, users may want to provide a temporary mailing address. But they may not want this temporary mailing address to save to their profile.
+
+After the mailing address fields the person is updating, include this question:
 
 >Do you want to update this information in your profile? (*Required)
 >
@@ -86,30 +88,29 @@ The radio options should be:
 
 ##### If we let the user choose which piece of information they want to use for the form
 
-In certain cases, users may need to choose which piece of information they want to use on the form. An example of this is if you prefill the user’s mobile and home telephone numbers, but the form only asks for a primary phone number. In these instances, after the user confirms their prefilled information, display a question with radio button response options asking the user which option they want to use on the form. 
+In certain cases, users may need to choose which piece of information they want to use on the form. An example of this is if you prefill the user’s mobile and home telephone numbers, but the form only asks for a primary phone number. In these instances, after the user confirms their prefilled information, display a question asking the user which information they want to use on the form. 
 
 {% include component-example.html class="x2" alt="A page for users to choose their primary phone number.'" file="/images/patterns/help-users-to/update-prefilled-information/primary-phone.png" %}
 
 #### Prefilled information that is missing and required
 
-There may be instances where some information that would usually be prefilled is missing from the database, but is also required by the form itself. In those instances, we show a status card that uses a colored tag to indicate that the information is missing. The card will also have the word "(\*Required)" next to the field heading text to indicate the user needs to provide that information. The link secondary action link for this card would say "Add [item]" rather than "Edit [item]".
+There may be instances where some information that would usually be prefilled is missing from the database, but is also required by the form itself. In those instances, we show a [Card - status]({{ site.baseurl }}/components/card/card-status) that uses a Status tag to indicate that the information is missing. The card will also have the word "(\*Required)" next to the field heading text to indicate the user needs to provide that information. The secondary action link for this card would say "Add [item]" rather than "Edit [item]".
 
 {% include component-example.html class="x2" alt="A page showing users they have missing and required information they will need to add." file="/images/patterns/help-users-to/update-prefilled-information/missing-prefilled-info.png" %}
 
-If the user does not provide the required missing information and selects the "Continue" button to try and move forward, they'll get the same page with that status card in an error state and red error text telling them what information they need to provide. Once they select "Add" and provide the information on an edit page, they will be redirected back to this screen and can continue through the form.
+If the user does not provide the required missing information and selects the "Continue" button to try and move forward, they'll get the same page with that [Card - status]({{ site.baseurl }}/components/card/card-status) in an error state and red error text telling them what information they need to provide. Once they select "Add" and provide the information on an edit page, they will be redirected back to this screen and can continue through the form.
 
 {% include component-example.html class="x2" alt="A page with a status card in an error state for missing required information the user must add." file="/images/patterns/help-users-to/update-prefilled-information/card-with-missing-info-error-state.png" %}
 
 #### Communicate when and where we'll save updates to prefilled information
 
-**Inform users where we saved the changes.** Display a success alert informing the user “We’ve saved these changes to this form and your profile.” or “We’ve saved these changes to this form only.” Place this alert at the top of the page, below the stepper. Use a standard alert if the user made the changes on a form step page. Use a slim alert if the user made the changes on the final review page.
+**Inform users where we saved the changes.** Display an [Alert - success]({{ site.baseurl }}/components/alert) informing the user "We've saved these changes to this form and your profile." or "We've saved these changes to this form only." Place this alert at the top of the page, below the stepper. Use an [Alert]({{ site.baseurl }}/components/alert) if the user made the changes on a form step page. Use an [Alert - success - slim]({{ site.baseurl }}/components/alert) if the user made the changes on the final review page.
 
 ### Components used in this pattern
 
-* [Details]({{ site.baseurl }}/components/details)
 * [Alert]({{ site.baseurl }}/components/alert)
 * [Card]({{ site.baseurl }}/components/card)
-* [Card - Status]({{ site.baseurl }}/components/card/card-status)
+* [Card - status]({{ site.baseurl }}/components/card/card-status)
 * [Link]({{ site.baseurl }}/components/link) 
 * [Radio button]({{ site.baseurl }}/components/form/radio-button)
 
@@ -123,23 +124,23 @@ Explain the steps the user needs to take to update this information. These instr
 
 ### Alert informing the user we'll save changes to their profile
 
-Inform the user that their changes will save to their profile before they make the changes. If your form does not save changes to their profile, use a radio button question instead (example in the Radio button section).
+Inform the user that their changes will save to their profile before they make the changes. If your form does not save changes to their profile, use a [Radio button]({{ site.baseurl }}/components/form/radio-button) to ask a question instead ([example in the Radio button section](#radio-button)).
 
 {% include component-example.html class="x2" alt="An informational alert with a bolded header saying 'Any changes you make will also be reflected on your profile.'" file="/images/patterns/help-users-to/update-prefilled-information/alert-about-where-information-will-save.png" %}
 
 ### Success alert
 
-Inform users that we saved their change to the form and their their profile. If we only saved the change to the form, the alert should read "We saved these changes to this form only."
+Inform users that we saved their change to the form and their profile. If we only saved the change to the form, the alert should read "We saved these changes to this form only."
 
 {% include component-example.html class="x2" alt="A success alert with the header 'We've updated your mailing address' and the body text 'We've made these changes to this form and your profile.'" file="/images/patterns/help-users-to/update-prefilled-information/success-alert.png" %}
 
-If the user made the change on the final review page, display the slim success alert on the review page, immediately after the header of the section where they made the change.
+If the user made the change on the final review page, display the [Alert - success - slim]({{ site.baseurl }}/components/alert) on the review page, immediately after the header of the section where they made the change.
 
 {% include component-example.html class="x2" alt="A slim success alert with the text 'Address successfully updated on this form.'" file="/images/patterns/help-users-to/update-prefilled-information/slim-success-alert.png" %}
 
 ### Radio button
 
-In cases where the information might change frequently (like a temporary mailing address), ask the user if they want to save their changes to their profile. Inform the user of the implications of this decision.
+In cases where the mailing address might change frequently (like a temporary mailing address), ask the user if they want to save their changes to their profile. Inform the user of the implications of this decision.
 
 {% include component-example.html class="x2" alt="A required radio button field asking the user if they also want to update this information in their profile." file="/images/patterns/help-users-to/update-prefilled-information/radio-button.png" %}
 
@@ -165,7 +166,7 @@ Here's an example that tells people to call the VA benefits hotline:
 ### Error messages
 If the information can’t be saved onto profile, but can be used for the form
 
->Warning alert: We can’t update your information in your profile. But you can continuing filling out this [form/application] and update your profile information later.
+>Warning alert: We can't update your information in your profile. But you can continue filling out this [form/application] and update your profile information later.
 
 
 If the information can’t be saved for profile or for the form