[#179] Update Task Blue (10182 form) to match new designs (#32775)

* Updated prefill alert, save to profile question

* Fixed padding left of save your application message on edit mailing address page

* Updated cypress e2e and unit tests

* Fixed linting errors

* Updated gray box to show last 4 digits of ssn

* Deleted commented out code in ContactInfo.jsx

---------

Co-authored-by: Belle P <belle@Belle-Poopongpanit.local>

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/ContactInfo.jsx

@@ -34,7 +34,6 @@ import {
   convertNullishObjectValuesToEmptyString,
   contactInfoPropTypes,
 } from '../../../utils/data/task-purple/profile';
-import { PrefillAlert } from '../../../shared/components/alerts/PrefillAlert';
 
 /**
  * Render contact info page
@@ -237,40 +236,6 @@ const ContactInfo = ({
   // Loop to separate pages when editing
   // Each Link includes an ID for focus management on the review & submit page
   const contactSection = [
-    keys.homePhone ? (
-      <va-card
-        show-shadow
-        data-testid="mini-summary-card"
-        class="vads-u-margin-y--3 contact-info-card"
-        key="home"
-        uswds
-      >
-        <Headers className={`${headerClassNames} vads-u-margin-top--0p5`}>
-          {content.homePhone}
-        </Headers>
-        <span className="dd-privacy-hidden" data-dd-action-name="home phone">
-          {renderTelephone(dataWrap[keys.homePhone])}
-        </span>
-        <div className="vads-l-row vads-u-justify-content--space-between vads-u-align-items--center vads-u-margin-top--1 vads-u-margin-bottom--neg1">
-          <Link
-            id="edit-home-phone"
-            to="2/task-blue/veteran-information/edit-home-phone"
-            aria-label={content.editHomePhone}
-            className="vads-u-padding--0p25 vads-u-padding-x--0p5 vads-u-margin-left--neg0p5"
-          >
-            <span>
-              <strong>{editText}</strong>
-              <va-icon
-                icon="navigate_next"
-                size={3}
-                className="vads-u-padding-left--0p5"
-              />
-            </span>
-          </Link>
-        </div>
-      </va-card>
-    ) : null,
-
     keys.mobilePhone ? (
       <va-card
         show-shadow
@@ -382,15 +347,14 @@ const ContactInfo = ({
   return (
     <>
       {editState !== 'address,updated' ? (
-        <PrefillAlert>
+        <va-alert>
           <h3 className="vads-u-margin-top--0">
             We’ve prefilled some of your information
           </h3>
-          <strong>Note:</strong> We’ve prefilled some of your information from
-          your account. If you need to correct anything, you can select edit
-          below. Unless you choose otherwise, all updates will be made to this
-          this form and your VA.gov profile.
-        </PrefillAlert>
+          If you need to make changes, you can click edit below. You can choose
+          later if you also want to save this information to your VA.gov
+          profile.
+        </va-alert>
       ) : null}
       <div className="vads-u-margin-y--2">
         <Element name={`${contactInfoPageKey}ScrollElement`} />

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/EditContactInfo.jsx

@@ -10,7 +10,6 @@ import { focusElement } from '@department-of-veterans-affairs/platform-utilities
 import { usePrevious } from 'platform/utilities/react-hooks';
 import { setReturnState } from 'platform/forms-system/src/js/utilities/data/profile';
 import ProfileInformationFieldController from './ProfileInformationFieldController';
-import { PrefillAlert } from '../../../shared/components/alerts/PrefillAlert';
 
 export const BuildPage = props => {
   const { title, field, id, goToPath, subTitle } = props;
@@ -65,15 +64,19 @@ export const BuildPage = props => {
 
   return (
     <>
-      <PrefillAlert>
+      <va-alert>
         <h3 className="vads-u-margin-top--0">
           We’ve prefilled some of your information
         </h3>
-        <strong>Note:</strong> We’ve prefilled some of your information from
-        your account. If you need to correct anything, you can edit the form
-        fields below. Unless you choose otherwise, all updates will be made to
-        this form and your VA.gov profile.
-      </PrefillAlert>
+        If you need to make changes, you can edit on this screen. Then you can
+        choose where to save your changes:
+        <ul>
+          <li>
+            Only in this form, <strong>or</strong>
+          </li>
+          <li>In this form and also in your VA.gov profile</li>
+        </ul>
+      </va-alert>
       <h3
         ref={headerRef}
         className="vads-u-margin-top--3 vads-u-margin-bottom--3"

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/GetFormHelp.jsx

@@ -5,10 +5,10 @@ export const GetFormHelp = () => {
   return (
     <>
       <p>
-        If you have questions or need help filling out this form, call us at{' '}
-        <va-telephone contact={CONTACTS.VA_BENEFITS} /> (
-        <va-telephone contact={CONTACTS['711']} tty />
-        ). We’re here Monday through Friday, 8:00 a.m. to 9:00 p.m. ET.
+        Call us at <va-telephone contact={CONTACTS.VA_BENEFITS} /> . We’re here
+        Monday through Friday, 8:00 a.m. to 9:00 p.m. ET. If you have hearing
+        loss, call (<va-telephone contact={CONTACTS['711']} tty />
+        ).
       </p>
     </>
   );

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/SaveInProgressIntro.jsx

@@ -176,10 +176,10 @@ class SaveInProgressIntro extends React.Component {
                 <h3 className="vads-u-margin-top--0">
                   We can prefill some of your information
                 </h3>
-                <strong>Note:</strong> Since you’re signed in to your account,
-                we can prefill part of your {appType} based on your account
-                details. You can also save your {appType} in progress and come
-                back later to finish filling it out.
+                Since you’re signed in, we can prefill 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.
               </div>
             </va-alert>
             <br />
@@ -461,6 +461,7 @@ SaveInProgressIntro.propTypes = {
   ariaLabel: PropTypes.string,
   buttonOnly: PropTypes.bool,
   children: PropTypes.any,
+  continueMsg: PropTypes.string,
   customLink: PropTypes.any,
   devOnly: PropTypes.shape({
     forceShowFormControls: PropTypes.bool,

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/SchemaForm.jsx

@@ -48,7 +48,7 @@ class SchemaForm extends React.Component {
     };
     this.state = {
       ...this.getEmptyState(props),
-      saveToProfile: true,
+      saveToProfile: null,
     };
 
     this.onChangeProfile = this.onChangeProfile.bind(this);
@@ -62,25 +62,25 @@ class SchemaForm extends React.Component {
     };
   }
 
-  componentDidMount() {
-    this.onChangeProfile(this.state.saveToProfile);
-  }
+  // componentDidMount() {
+  //   this.onChangeProfile(this.state.saveToProfile);
+  // }
 
   /* eslint-disable-next-line camelcase */
   UNSAFE_componentWillReceiveProps(newProps) {
     if (
       newProps.name !== this.props.name ||
       newProps.pagePerItemIndex !== this.props.pagePerItemIndex
     ) {
-      this.setState(this.getEmptyState(newProps));
+      this.setState(this.getEmptyState(newProps)); // No need for prevState here
     } else if (newProps.title !== this.props.title) {
-      this.setState({
-        formContext: set('pageTitle', newProps.title, this.state.formContext),
-      });
+      this.setState(prevState => ({
+        formContext: set('pageTitle', newProps.title, prevState.formContext),
+      }));
     } else if (!!newProps.reviewMode !== !!this.state.formContext.reviewMode) {
-      this.setState(this.getEmptyState(newProps));
+      this.setState(this.getEmptyState(newProps)); // No need for prevState here
     } else if (newProps.formContext !== this.props.formContext) {
-      this.setState(this.getEmptyState(newProps));
+      this.setState(this.getEmptyState(newProps)); // No need for prevState here
     }
   }
 
@@ -121,27 +121,35 @@ class SchemaForm extends React.Component {
   };
 
   onError(hasSubmitted = true) {
-    const formContext = set(
-      'submitted',
-      !!hasSubmitted,
-      this.state.formContext,
+    this.setState(
+      prevState => {
+        const formContext = set(
+          'submitted',
+          !!hasSubmitted,
+          prevState.formContext,
+        );
+        return { formContext };
+      },
+      () => {
+        scrollToFirstError();
+      },
     );
-    this.setState({ formContext });
-    scrollToFirstError();
   }
 
   onBlur(id) {
     if (!this.state.formContext.touched[id]) {
       const data = getFormDataFromSchemaId(id, this.props.data);
       const isEmpty = data === undefined || data === null || data === '';
-      // - Prefer to only set as touched if the field is NOT empty,
-      //   so that we won't show an error message prematurely.
-      // - If data is not found for some reason (e.g. schema uses snake case
-      //   properties which can't be parsed in a 'root_' string) then go
-      //   ahead and mark as touched which will show a potential error message.
+      // Prefer to only set as touched if the field is NOT empty,
+      // so that we won't show an error message prematurely.
+      // If data is not found for some reason (e.g. schema uses snake case
+      // properties which can't be parsed in a 'root_' string) then go
+      // ahead and mark as touched which will show a potential error message.
       if (!isEmpty || data === 'FORM_DATA_NOT_FOUND') {
-        const formContext = set(['touched', id], true, this.state.formContext);
-        this.setState({ formContext });
+        this.setState(prevState => {
+          const formContext = set(['touched', id], true, prevState.formContext);
+          return { formContext };
+        });
       }
     }
   }
@@ -257,8 +265,7 @@ class SchemaForm extends React.Component {
             'usa-input-error-label': this.state.error,
           })}
         >
-          Do you also want to save this updated mailing address to your VA.gov
-          profile?
+          Do you also want to update this information in your VA.gov profile?
           <span className="schemaform-required-span">
             {content['validation-required-label']}
           </span>
@@ -286,11 +293,17 @@ SchemaForm.propTypes = {
   uiSchema: PropTypes.object.isRequired,
   addNameAttribute: PropTypes.bool,
   appStateData: PropTypes.object,
+  children: PropTypes.array,
   data: PropTypes.any,
+  dispatch: PropTypes.func,
   editModeOnReviewPage: PropTypes.bool,
+  formContext: PropTypes.object,
   hideTitle: PropTypes.bool,
+  idSchema: PropTypes.object,
+  pagePerItemIndex: PropTypes.number,
   profile: PropTypes.object,
   reviewMode: PropTypes.bool,
+  safeRenderCompletion: PropTypes.bool,
   saveToProfile: PropTypes.bool,
   onChange: PropTypes.func,
   onSubmit: PropTypes.func,

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/VeteranInformation.jsx

@@ -6,8 +6,7 @@ import { isValid, format } from 'date-fns';
 import { genderLabels } from '~/platform/static-data/labels';
 import { selectProfile } from '~/platform/user/selectors';
 
-import { srSubstitute } from '~/platform/forms-system/src/js/utilities/ui/mask-string';
-
+import { CONTACTS } from '@department-of-veterans-affairs/component-library';
 import { FORMAT_YMD_DATE_FNS, FORMAT_READABLE_DATE_FNS } from './constants';
 
 import { parseDateToDateObj } from '../../../utils/dates';
@@ -16,13 +15,6 @@ import { APP_URLS } from '../../../utils/constants';
 
 // separate each number so the screenreader reads "number ending with 1 2 3 4"
 // instead of "number ending with 1,234"
-const mask = value => {
-  const number = (value || '').toString().slice(-4);
-  return srSubstitute(
-    `●●●–●●–${number}`,
-    `ending with ${number.split('').join(' ')}`,
-  );
-};
 
 const VeteranInformation = ({ formData }) => {
   const { veteranSocialSecurityNumber } = formData || {};
@@ -46,12 +38,9 @@ const VeteranInformation = ({ formData }) => {
         </strong>
         {veteranSocialSecurityNumber ? (
           <p className="ssn">
-            <strong>Social Security number: </strong>
-            <span
-              className="dd-privacy-mask"
-              data-dd-action-name="Veteran's SSN"
-            >
-              {mask(veteranSocialSecurityNumber)}
+            <strong>Last 4 digits of Social Security number: </strong>
+            <span data-dd-action-name="Veteran's SSN">
+              {veteranSocialSecurityNumber.slice(-4)}
             </span>
           </p>
         ) : null}
@@ -90,14 +79,15 @@ const VeteranInformation = ({ formData }) => {
 
       <br role="presentation" />
 
-      <p>
+      <p className="vads-u-margin-bottom--4">
         <strong>Note:</strong> To protect your personal information, we don’t
         allow online changes to your name, date of birth, or Social Security
-        number. If you need to change this information for your health benefits,
-        call your VA health facility.{' '}
+        number. If you need to change this information, call us at Veterans
+        Benefits Assistance at <va-telephone contact={CONTACTS.VA_BENEFITS} />.
+        We’re here Monday through Friday, between 8:00 a.m. and 9:00 p.m. ET.{' '}
         <va-link
           href={APP_URLS.facilities}
-          text="Find your VA health facility"
+          text="Find instructions for how to change your legal name"
         />
       </p>
     </>

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/YesNoWidget.jsx

@@ -60,7 +60,9 @@ export default function YesNoWidget({
         onChange={_ => onChangeEvent('Y')}
         {...getProps('Y')}
       />
-      <label htmlFor={`${id}Yes`}>{labels.Y || 'Yes'}</label>
+      <label htmlFor={`${id}Yes`}>
+        {labels.Y || 'Yes, also update my profile'}
+      </label>
       <input
         type="radio"
         checked={value === values.N}
@@ -72,7 +74,9 @@ export default function YesNoWidget({
         onChange={_ => onChangeEvent('N')}
         {...getProps('N')}
       />
-      <label htmlFor={`${id}No`}>{labels.N || 'No'}</label>
+      <label htmlFor={`${id}No`}>
+        {labels.N || 'No, only update this form'}
+      </label>
     </div>
   );
 }

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/config/form.js

@@ -1,6 +1,5 @@
 import { VA_FORM_IDS } from 'platform/forms/constants';
 import profileContactInfo from './profileContactInfo';
-import { customText } from '../content/saveInProgress';
 
 import manifest from '../../../../manifest.json';
 
@@ -48,7 +47,10 @@ const formConfig = {
     noAuth:
       'Please sign in again to continue your application for mock form ae design patterns benefits.',
   },
-  customText,
+  customText: {
+    appType: 'application',
+    finishAppLaterMessage: 'Finish this request later',
+  },
   title: 'Request a Board Appeal',
   subTitle: 'VA Form 10182 (Notice of Disagreement)',
   defaultDefinitions: {},

src/applications/_mock-form-ae-design-patterns/sass/custom.scss

@@ -1,7 +1,7 @@
 // hacky fix for address save button sizing
 [data-action="save-edit"] {
-  line-height: 0.9;
-  padding: 0.75rem 1.25rem;
+  line-height: .9;
+  padding: 0.75rem 1.25rem !important;
 }
 
 // form panel is only 32em wide, so we need to override the default width
@@ -20,10 +20,16 @@
   }
 }
 
+[data-location="2/task-blue/veteran-details"], [data-location="2/task-blue/veteran-information"], [data-location="2/task-blue/veteran-information/edit-mailing-address"]{
+.schemaform-chapter-progress {
+padding-left: 0;
+}
+}
+
 .contact-info-card {
   @include media($medium-screen) {
     width: 18.8rem;
-    height: 8.8rem;
+    // height: 8.8rem;
 
     &.gray-task {
       height: unset;