diff --git a/src/applications/ask-va/components/PrefillAlertAndTitle.jsx b/src/applications/ask-va/components/PrefillAlertAndTitle.jsx
new file mode 100644
index 000000000000..88531e010d45
--- /dev/null
+++ b/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 = () => (
+ <>
+
+ >
+);
+
+const PrefillAlertAndTitle = ({ loggedIn }) => {
+ return loggedIn ? (
+ <>
+
+
+ We’ve prefilled some of your information from your account. If you
+ need to correct anything, you can edit the form fields below.
+
+
+
+ >
+ ) : (
+
+ );
+};
+
+PrefillAlertAndTitle.propTypes = {
+ loggedIn: PropTypes.bool,
+};
+
+function mapStateToProps(state) {
+ return {
+ loggedIn: isLoggedIn(state),
+ };
+}
+
+export default connect(mapStateToProps)(PrefillAlertAndTitle);
diff --git a/src/applications/ask-va/config/chapters/personalInformation/yourContactInformation.js b/src/applications/ask-va/config/chapters/personalInformation/yourContactInformation.js
new file mode 100644
index 000000000000..ea56df7699c9
--- /dev/null
+++ b/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;
diff --git a/src/applications/ask-va/config/chapters/personalInformation/yourPhoneAndEmail.js b/src/applications/ask-va/config/chapters/personalInformation/yourPhoneAndEmail.js
deleted file mode 100644
index e88d2f8974a1..000000000000
--- a/src/applications/ask-va/config/chapters/personalInformation/yourPhoneAndEmail.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import merge from 'lodash/merge';
-import emailUI from '@department-of-veterans-affairs/platform-forms-system/email';
-import phoneUI from '@department-of-veterans-affairs/platform-forms-system/phone';
-import ProfileLink from '../../../components/ProfileLink';
-import { CHAPTER_3 } from '../../../constants';
-
-const question = {CHAPTER_3.PHONE_EMAIL.TITLE}
;
-
-const yourPhoneAndEmailPage = {
- uiSchema: {
- 'ui:title': question,
- 'ui:description': ProfileLink,
- phone: merge(phoneUI(), { 'ui:options': { widgetClassNames: null } }),
- emailAddress: emailUI(),
- },
- schema: {
- type: 'object',
- required: ['phone', 'emailAddress'],
- properties: {
- phone: {
- type: 'string',
- pattern: '^[0-9]{10}$',
- },
- emailAddress: {
- type: 'string',
- maxLength: 256,
- format: 'email',
- },
- },
- },
-};
-
-export default yourPhoneAndEmailPage;
diff --git a/src/applications/ask-va/config/schema-helpers/formFlowHelper.js b/src/applications/ask-va/config/schema-helpers/formFlowHelper.js
index c31edea76b3b..db6abfc3329e 100644
--- a/src/applications/ask-va/config/schema-helpers/formFlowHelper.js
+++ b/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',
diff --git a/src/applications/ask-va/constants.js b/src/applications/ask-va/constants.js
index eb12d9d86b2d..90bf93306c9a 100644
--- a/src/applications/ask-va/constants.js
+++ b/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?',
},
diff --git a/src/applications/ask-va/containers/IntroductionPage.jsx b/src/applications/ask-va/containers/IntroductionPage.jsx
index e6e295468ded..0a78f4177270 100644
--- a/src/applications/ask-va/containers/IntroductionPage.jsx
+++ b/src/applications/ask-va/containers/IntroductionPage.jsx
@@ -148,6 +148,18 @@ const IntroductionPage = props => {
buttonOnly
headingLevel={2}
prefillEnabled={formConfig.prefillEnabled}
+ verifiedPrefillAlert={
+
+
+
+ We’ve prefilled some of your information from your
+ account. If you need to correct anything, you can edit the
+ form fields below.
+
+
+
+
+ }
messages={formConfig.savedFormMessages}
pageList={pageList}
startText="Start the Application"
diff --git a/src/applications/ask-va/tests/config/personalInformation/howToContact.unit.spec.js b/src/applications/ask-va/tests/config/personalInformation/howToContact.unit.spec.js
index 39d1b02eda89..97d9f8a57e4d 100644
--- a/src/applications/ask-va/tests/config/personalInformation/howToContact.unit.spec.js
+++ b/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,
);
diff --git a/src/applications/ask-va/tests/config/personalInformation/yourPhoneAndEmail.unit.spec.js b/src/applications/ask-va/tests/config/personalInformation/yourContactInformation.unit.spec.js
similarity index 80%
rename from src/applications/ask-va/tests/config/personalInformation/yourPhoneAndEmail.unit.spec.js
rename to src/applications/ask-va/tests/config/personalInformation/yourContactInformation.unit.spec.js
index da9703fc715c..69a9f5390654 100644
--- a/src/applications/ask-va/tests/config/personalInformation/yourPhoneAndEmail.unit.spec.js
+++ b/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(
@@ -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 =>