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

src/applications/_mock-form-ae-design-patterns/mocks/endpoints/in-progress-forms/22-1990.js

@@ -20,6 +20,7 @@ const responses = {
           state: 'CO',
           country: 'USA',
           postalCode: '80521',
+          isMilitary: false,
         },
         toursOfDuty: [
           {

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/SaveInProgressInfo.jsx

@@ -64,9 +64,9 @@ const SaveInProgressInfo = ({ formConfig, pageList }) => {
         data-testid="ezr-login-alert"
         uswds
       >
-        <h3 slot="headline">
+        <h2 className="vads-u-font-size--h3" slot="headline">
           Sign in now to save time and save your work in progress
-        </h3>
+        </h2>
         <p>Here&rsquo;s how signing in now helps you:</p>
         <ul>
           <li>

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

@@ -8,17 +8,18 @@
 import { scrollAndFocusTarget } from 'applications/_mock-form-ae-design-patterns/utils/focus';
 import { blankSchema } from 'platform/forms-system/src/js/utilities/data/profile';
 import {
+  addressSchema,
+  addressUI,
   descriptionUI,
   emailSchema,
   emailUI,
   phoneSchema,
   phoneUI,
   titleUI,
 } from 'platform/forms-system/src/js/web-component-patterns';
-import * as addressFormDefinition from 'platform/forms-system/src/js/definitions/address';
 import { PrefillAlert } from 'applications/_mock-form-ae-design-patterns/shared/components/alerts/PrefillAlert';
 import PreSubmitInfo from '../pages/PreSubmitInfo';
 import contactInformationPage from '../pages/contactInformation';
 import GetFormHelp from '../components/GetFormHelp';
 import ErrorText from '../components/ErrorText';
 
@@ -34,8 +35,9 @@
   ApplicantInformation,
   ApplicantInformationInfoSection,
 } from '../pages/ApplicantInformation';
 import ReviewPage from '../pages/ReviewPage';
 import { EditNavigationWithRouter } from '../components/EditNavigation';
+import { MailingAddressEdit } from '../pages/MailingAddressEdit';
 
 const {
   date,
@@ -70,6 +72,9 @@
     noAuth:
       'Please sign in again to resume your application for education benefits.',
   },
+  dev: {
+    showNavLinks: environment?.isLocalhost(),
+  },
   prefillEnabled: true,
   prefillTransformer,
   transformForSubmit: transform,
@@ -132,7 +137,7 @@
       },
     },
     personalInformation: {
-      title: 'Personal information',
+      title: 'Contact information',
       pages: {
         otherContactInfo: {
           hideNavButtons: true,
@@ -173,7 +178,6 @@
                 hideOnReview: true, // We're using the `ReveiwDescription`, so don't show this page
                 forceDivWrapper: true, // It's all info and links, so we don't need a fieldset or legend
               },
-              'ui:reviewId': 'other-contact-information',
               'ui:title': '',
               'ui:description': '',
               'ui:widget': props => {
@@ -208,53 +212,6 @@
           review: null,
         },
         contactInformation: merge({}, contactInformationPage(fullSchema1990)),
-        contactInformationEdit: {
-          hideNavButtons: true,
-          title: 'Edit mailing address',
-          taskListHide: true,
-          path: 'personal-information/edit-mailing-address',
-          uiSchema: {
-            ...descriptionUI(PrefillAlert, { hideOnReview: true }),
-            veteranAddress: addressFormDefinition.uiSchema(
-              'Edit mailing address',
-            ),
-            'view:editNavigation': {
-              'ui:options': {
-                hideOnReview: true, // We're using the `ReveiwDescription`, so don't show this page
-                forceDivWrapper: true, // It's all info and links, so we don't need a fieldset or legend
-              },
-              'ui:reviewId': 'veteranAddress',
-              'ui:title': '',
-              'ui:description': '',
-              'ui:widget': props => {
-                return (
-                  <EditNavigationWithRouter
-                    {...props}
-                    fields={['email', 'homePhone', 'mobilePhone']}
-                    returnPath="/personal-information"
-                  />
-                );
-              },
-            },
-          },
-          schema: {
-            type: 'object',
-            properties: {
-              'view:pageTitle': blankSchema,
-              veteranAddress: addressFormDefinition.schema(
-                fullSchema1990,
-                true,
-              ),
-              'view:editNavigation': {
-                type: 'string',
-              },
-            },
-            required: ['email'],
-          },
-          scrollAndFocusTarget,
-          depends: () => false,
-          review: null,
-        },
       },
     },
     review: {
@@ -274,6 +231,22 @@
           },
           scrollAndFocusTarget,
         },
+        contactInformationEdit: {
+          title: 'Edit contact information',
+          path: 'personal-information/edit-veteran-address',
+          CustomPage: MailingAddressEdit,
+          CustomPageReview: null,
+          uiSchema: {
+            veteranAddress: addressUI({ omit: ['street3'] }),
+          },
+          schema: {
+            type: 'object',
+            properties: {
+              'view:pageTitle': blankSchema,
+              veteranAddress: addressSchema({ omit: ['street3'] }),
+            },
+          },
+        },
       },
     },
   },

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/containers/IntroductionPage.jsx

@@ -5,26 +5,13 @@ import FormTitle from 'platform/forms-system/src/js/components/FormTitle';
 import { connect } from 'react-redux';
 import { toggleValues } from 'platform/site-wide/feature-toggles/selectors';
 import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames';
-import {
-  WIZARD_STATUS,
-  WIZARD_STATUS_NOT_STARTED,
-} from 'applications/static-pages/wizard';
 import SaveInProgressInfo from '../components/SaveInProgressInfo';
 
 export class IntroductionPage extends React.Component {
-  state = {
-    status: sessionStorage.getItem(WIZARD_STATUS) || WIZARD_STATUS_NOT_STARTED,
-  };
-
   componentDidMount() {
     focusElement('.va-nav-breadcrumbs-list');
   }
 
-  setWizardStatus = value => {
-    sessionStorage.setItem(WIZARD_STATUS, value);
-    this.setState({ status: value });
-  };
-
   render() {
     const { route, showWizard } = this.props;
     const { formConfig, pageList } = route;
@@ -37,15 +24,15 @@ export class IntroductionPage extends React.Component {
         <p>Equal to VA Form 22-1990 (Application for VA Education Benefits).</p>
         <div className="subway-map">
           <SaveInProgressInfo {...sipProps} route={route} />
-          <h4>Follow the steps below to apply for education benefits.</h4>
+          <h3>Follow the steps below to apply for education benefits.</h3>
           <div className="process schemaform-process">
             <ol>
               <li className="process-step list-one">
                 <div>
-                  <h5>Prepare</h5>
+                  <h4>Prepare</h4>
                 </div>
                 <div>
-                  <h6>To fill out this application, you’ll need your:</h6>
+                  <h5>To fill out this application, you’ll need your:</h5>
                 </div>
                 <ul>
                   <li>Social Security number (required)</li>
@@ -68,7 +55,7 @@ export class IntroductionPage extends React.Component {
                   </a>
                   .
                 </p>
-                <h6>Learn about educational programs</h6>
+                <h5>Learn about educational programs</h5>
                 <p>
                   See what benefits you’ll get at the school you want to attend.{' '}
                   <a href="/education/gi-bill-comparison-tool/">
@@ -79,7 +66,7 @@ export class IntroductionPage extends React.Component {
               </li>
               <li className="process-step list-two">
                 <div>
-                  <h5>Apply</h5>
+                  <h4>Apply</h4>
                 </div>
                 <p>Complete this education benefits form.</p>
                 <p>
@@ -89,7 +76,7 @@ export class IntroductionPage extends React.Component {
               </li>
               <li className="process-step list-three">
                 <div>
-                  <h5>VA review</h5>
+                  <h4>VA review</h4>
                 </div>
                 <p>
                   We usually process claims within 30 days. We’ll let you know
@@ -105,7 +92,7 @@ export class IntroductionPage extends React.Component {
               </li>
               <li className="process-step list-four">
                 <div>
-                  <h5>Decision</h5>
+                  <h4>Decision</h4>
                 </div>
                 <p>
                   You’ll get a Certificate of Eligibility (COE), or award

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/ApplicantInformation.jsx

@@ -5,10 +5,28 @@ import { withRouter } from 'react-router';
 import PropTypes from 'prop-types';
 import { InfoSection } from '../../../../shared/components/InfoSection';
 import { maskSSN } from '../../../../utils/helpers/general';
-import { APP_URLS } from '../../../../utils/constants';
 import { genderLabels } from '../utils/labels';
 import { isOnReviewPage } from '../utils/reviewPage';
 
+const AdditionalInfoContent = () => {
+  return (
+    <div>
+      <p className="vads-u-margin-top--0">
+        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, call Veterans Benefits Assistance at{' '}
+        <va-telephone contact="8008271000" />. We’re here Monday through Friday,
+        between 8:00 a.m. and 9:00 p.m. ET.
+      </p>
+
+      <va-link
+        text="Find instructions for how to change your legal name"
+        href="/resources/how-to-change-your-legal-name-on-file-with-va/"
+      />
+    </div>
+  );
+};
+
 export const ApplicantInformationBase = ({
   veteranFullName,
   veteranSocialSecurityNumber,
@@ -22,6 +40,14 @@ export const ApplicantInformationBase = ({
     veteranDateOfBirth && format(parseISO(veteranDateOfBirth), 'MMMM dd, yyyy');
   return (
     <InfoSection title={title} titleLevel={3}>
+      {isReviewPage && (
+        <va-additional-info
+          trigger="Why isn't this information editable here?"
+          class="vads-u-margin-y--2"
+        >
+          <AdditionalInfoContent />
+        </va-additional-info>
+      )}
       <InfoSection.InfoBlock
         label="First name"
         value={veteranFullName?.first}
@@ -81,23 +107,13 @@ export const ApplicantInformation = ({
         gender={gender}
       />
 
-      <p>
-        <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.{' '}
-        <va-link
-          href={APP_URLS.facilities}
-          text="Find your VA health facility"
-        />
-      </p>
-      <p>
-        If you want to update your contact information for other VA benefits,
-        you can do that from your profile.{' '}
-      </p>
-      <div className="vads-u-margin-bottom--3">
-        <va-link href="/profile" text="Go to your profile" external />
-      </div>
+      <va-additional-info
+        trigger="How to change this information"
+        class="vads-u-margin-bottom--5"
+      >
+        <AdditionalInfoContent />
+      </va-additional-info>
+
       {contentBeforeButtons}
       <FormNavButtons goBack={goBack} goForward={goForward} />
       {contentAfterButtons}

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/MailingAddressEdit.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { SchemaForm, setData } from 'platform/forms-system/exportsFile';
+import { useDispatch } from 'react-redux';
+import { VaButton } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types';
+
+export const MailingAddressEditBase = props => {
+  const dispatch = useDispatch();
+
+  const { location } = props;
+  const fromReviewPage = location?.query?.review;
+
+  const setFormData = data => {
+    dispatch(setData(data));
+  };
+
+  const { schema, uiSchema, data, goBack, goToPath } = props;
+  const handlers = {
+    onInput: inputData => {
+      setFormData(inputData);
+    },
+    onSubmit: () => {
+      if (fromReviewPage) {
+        goToPath(
+          '/2/task-orange/review-then-submit?updatedSection=veteranAddress&success=true',
+        );
+        return;
+      }
+      goBack();
+    },
+    onCancel: () => {
+      goBack();
+    },
+  };
+  return (
+    <>
+      <va-alert status="info" slim class="vads-u-margin-y--3">
+        <p className="vads-u-margin--0">
+          <strong>Note:</strong> We’ve prefilled some of your information. If
+          you need to make changes, you can edit on this screen. Your changes
+          won’t affect your VA.gov profile.
+        </p>
+      </va-alert>
+      <h3 className="vads-u-margin-bottom--4">Edit mailing address</h3>
+      <SchemaForm
+        addNameAttribute
+        // `name` and `title` are required by SchemaForm, but are only used
+        // internally by the SchemaForm component
+        name="Contact Info Form"
+        title="Contact Info Form"
+        schema={schema}
+        data={data}
+        uiSchema={uiSchema}
+        onChange={handlers.onInput}
+        onSubmit={handlers.onSubmit}
+      >
+        <VaButton text="Save" submit="prevent" />
+        <VaButton text="Cancel" onClick={handlers.onCancel} secondary />
+      </SchemaForm>
+      <div className="vads-u-margin-y--4">
+        <va-link
+          text="Finish this application later"
+          href="/mock-form-ae-design-patterns/2/task-orange"
+        />
+      </div>
+    </>
+  );
+};
+
+MailingAddressEditBase.propTypes = {
+  data: PropTypes.object.isRequired,
+  goBack: PropTypes.func.isRequired,
+  goToPath: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired,
+  uiSchema: PropTypes.object.isRequired,
+  location: PropTypes.object,
+};
+
+export const MailingAddressEdit = withRouter(MailingAddressEditBase);