Your contact preference page UI, conditionals to follow in separate t…

…icket (#29431)

src/applications/ask-va/components/PrefillAlertAndTitle.jsx

@@ -0,0 +1,47 @@
+import { isLoggedIn } from '@department-of-veterans-affairs/platform-user/selectors';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+
+const Title = () => (
+  <>
+    <legend className="schemaform-block-title">
+      <h3 className="vads-u-color--gray-dark vads-u-margin-top--24">
+        Your contact information
+      </h3>
+    </legend>
+  </>
+);
+
+const PrefillAlertAndTitle = ({ loggedIn }) => {
+  return loggedIn ? (
+    <>
+      <va-alert
+        close-btn-aria-label="Close notification"
+        status="info"
+        uswds
+        visible
+      >
+        <p className="vads-u-margin-y--0">
+          We’ve prefilled some of your information from your account. If you
+          need to correct anything, you can edit the form fields below.
+        </p>
+      </va-alert>
+      <Title />
+    </>
+  ) : (
+    <Title />
+  );
+};
+
+PrefillAlertAndTitle.propTypes = {
+  loggedIn: PropTypes.bool,
+};
+
+function mapStateToProps(state) {
+  return {
+    loggedIn: isLoggedIn(state),
+  };
+}
+
+export default connect(mapStateToProps)(PrefillAlertAndTitle);

src/applications/ask-va/config/chapters/personalInformation/yourContactInformation.js

@@ -0,0 +1,36 @@
+// import emailUI from '@department-of-veterans-affairs/platform-forms-system/email';
+// import phoneUI from '@department-of-veterans-affairs/platform-forms-system/phone';
+import {
+  emailSchema,
+  emailUI,
+  phoneSchema,
+  phoneUI,
+  radioSchema,
+  radioUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+import PrefillAlertAndTitle from '../../../components/PrefillAlertAndTitle';
+import { CHAPTER_3, contactOptions } from '../../../constants';
+
+const yourContactInformationPage = {
+  uiSchema: {
+    'ui:description': PrefillAlertAndTitle,
+    phoneNumber: phoneUI(),
+    emailAddress: emailUI(),
+    contactPreference: radioUI({
+      title: CHAPTER_3.CONTACT_PREF.QUESTION_1,
+      description: '',
+      labels: contactOptions,
+    }),
+  },
+  schema: {
+    type: 'object',
+    required: ['phoneNumber', 'emailAddress', 'contactPreference'],
+    properties: {
+      phoneNumber: phoneSchema,
+      emailAddress: emailSchema,
+      contactPreference: radioSchema(Object.keys(contactOptions)),
+    },
+  },
+};
+
+export default yourContactInformationPage;

src/applications/ask-va/config/schema-helpers/formFlowHelper.js

@@ -20,8 +20,8 @@ import stateOrFacilityPage from '../chapters/personalInformation/stateOrFacility
 import useThisSchoolPage from '../chapters/personalInformation/useThisSchool';
 import veteransAddressZipPage from '../chapters/personalInformation/veteranAddressZip';
 import yourAddressPage from '../chapters/personalInformation/yourAddress';
+import yourContactInformationPage from '../chapters/personalInformation/yourContactInformation';
 import yourCountryPage from '../chapters/personalInformation/yourCountry';
-import yourPhoneAndEmailPage from '../chapters/personalInformation/yourPhoneAndEmail';
 import yourPostalCodePage from '../chapters/personalInformation/yourPostalCode';
 import yourRolePage from '../chapters/personalInformation/yourRole';
 import yourRoleEducationPage from '../chapters/personalInformation/yourRoleEducation';
@@ -114,10 +114,10 @@ const ch3Pages = {
     uiSchema: useThisSchoolPage.uiSchema,
     schema: useThisSchoolPage.schema,
   },
-  yourPhoneAndEmail: {
-    title: CHAPTER_3.PHONE_EMAIL.TITLE,
-    uiSchema: yourPhoneAndEmailPage.uiSchema,
-    schema: yourPhoneAndEmailPage.schema,
+  yourContactInformation: {
+    title: CHAPTER_3.CONTACT_INFORMATION.TITLE,
+    uiSchema: yourContactInformationPage.uiSchema,
+    schema: yourContactInformationPage.schema,
   },
   howToContact: {
     title: CHAPTER_3.CONTACT_PREF.TITLE,
@@ -193,7 +193,7 @@ const myOwnBenVet = [
   'stateOrFacility',
   'stateOfSchool',
   'useThisSchool',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',
@@ -214,7 +214,7 @@ const myOwnBenFam = [
   'veteransAddressZip',
   'aboutYourself',
   'searchVAMedicalCenter',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',
@@ -228,7 +228,7 @@ export const myOwnBenFamPages = flowPages(
 
 const someoneElseBenVet = [
   'aboutYourself',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',
@@ -254,10 +254,10 @@ const someoneElseBenFam = [
   'searchVAMedicalCenter',
   'aboutYourFamilyMember',
   'aboutYourRelationshipToFamilyMember',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'searchVAMedicalCenter',
   'aboutYourself',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',
@@ -288,7 +288,7 @@ const someoneElseBen3rdParty = [
   'veteransAddressZip',
   'searchVAMedicalCenter',
   'aboutYourself',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',
@@ -308,7 +308,7 @@ const someoneElseBen3rdPartyEducation = [
   'veteransAddressZip',
   'searchVAMedicalCenter',
   'aboutYourself',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',
@@ -323,7 +323,7 @@ export const someoneElseBen3rdPartyEducationPages = flowPages(
 const generalQuestion = [
   'aboutYourself',
   'searchVAMedicalCenter',
-  'yourPhoneAndEmail',
+  'yourContactInformation',
   'howToContact',
   'yourCountry',
   'yourAddress',

src/applications/ask-va/constants.js

@@ -93,7 +93,7 @@ export const regionOptions = {
 
 // Contact options
 export const contactOptions = {
-  PHONE: 'Phone',
+  PHONE: 'Phone call',
   EMAIL: 'Email',
   US_MAIL: 'U.S. mail',
 };
@@ -307,10 +307,10 @@ export const CHAPTER_3 = {
     PAGE_DESCRIPTION: '',
     QUESTION_1: '',
   },
-  PHONE_EMAIL: {
-    TITLE: 'Your phone number and email',
+  CONTACT_INFORMATION: {
+    TITLE: 'Your contact information',
     PAGE_DESCRIPTION: '',
-    QUESTION_1: 'Mobile phone number',
+    QUESTION_1: 'Phone number',
     QUESTION_2: 'Email address',
     QUESTION_3: 'How should we contact you?',
   },

src/applications/ask-va/containers/IntroductionPage.jsx

@@ -148,6 +148,18 @@ const IntroductionPage = props => {
               buttonOnly
               headingLevel={2}
               prefillEnabled={formConfig.prefillEnabled}
+              verifiedPrefillAlert={
+                <div>
+                  <div className="usa-alert usa-alert-info schemaform-sip-alert">
+                    <div className="usa-alert-body">
+                      We’ve prefilled some of your information from your
+                      account. If you need to correct anything, you can edit the
+                      form fields below.
+                    </div>
+                  </div>
+                  <br />
+                </div>
+              }
               messages={formConfig.savedFormMessages}
               pageList={pageList}
               startText="Start the Application"

src/applications/ask-va/tests/config/personalInformation/howToContact.unit.spec.js

@@ -33,7 +33,7 @@ describe('howToContactPage', () => {
     );
 
     const radioLabels = $$('.form-radio-buttons > label', container);
-    const radioLabelList = ['Phone', 'Email', 'U.S. mail'];
+    const radioLabelList = ['Phone call', 'Email', 'U.S. mail'];
     const radioQuestion = removeReqFromLabel(
       $('#root_contactPreference-label', container).textContent,
     );

src/applications/ask-va/tests/config/personalInformation/yourPhoneAndEmail.unit.spec.js → src/applications/ask-va/tests/config/personalInformation/yourContactInformation.unit.spec.js

@@ -1,23 +1,23 @@
-import React from 'react';
-import { expect } from 'chai';
-import { render } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { DefinitionTester } from '@department-of-veterans-affairs/platform-testing/schemaform-utils';
 import {
   $,
   $$,
 } from '@department-of-veterans-affairs/platform-forms-system/ui';
+import { DefinitionTester } from '@department-of-veterans-affairs/platform-testing/schemaform-utils';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+import React from 'react';
+import { Provider } from 'react-redux';
 
 import formConfig from '../../../config/form';
-import { removeReqFromLabel } from '../../fixtures/test-helpers/helpers';
 import { getData } from '../../fixtures/data/mock-form-data';
+import { removeReqFromLabel } from '../../fixtures/test-helpers/helpers';
 
 const {
   schema,
   uiSchema,
-} = formConfig.chapters.personalInformation.pages.yourPhoneAndEmail_generalquestion;
+} = formConfig.chapters.personalInformation.pages.yourContactInformation_generalquestion;
 
-describe('yourPhoneAndEmailPage', () => {
+describe('yourContactInformationPage', () => {
   it('should render', () => {
     const { container } = render(
       <Provider store={{ ...getData().mockStore }}>
@@ -33,9 +33,9 @@ describe('yourPhoneAndEmailPage', () => {
     );
 
     const labels = $$('.schemaform-field-template > label', container);
-    const labelList = ['Phone', 'Email address'];
+    const labelList = ['Phone number', 'Email address'];
 
-    expect($('h3', container).textContent).to.eq('Your phone number and email');
+    expect($('h3', container).textContent).to.eq('Your contact information');
 
     labels.forEach(
       label =>