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 = () => ( + <> + +

+ Your contact information +

+
+ +); + +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. +

+
+ + </> + ) : ( + <Title /> + ); +}; + +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 = <h3>{CHAPTER_3.PHONE_EMAIL.TITLE}</h3>; - -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={ + <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" 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( <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 =>