52465 VA Request Flow - Alerts for invalid input/selection (#28456)

* update date selection error message

* update reason for appointment error messages

* update type of visit error message

* update contact info error messages

src/applications/vaos/new-appointment/components/ContactInfoPage.jsx

@@ -62,7 +62,7 @@ function validateLength(errors, email) {
 
   if (email && email?.length > MAX_LENGTH) {
     errors.addError(
-      `We do not support email addresses that exceeds ${MAX_LENGTH} characters`,
+      `We don’t support email addresses that exceeds ${MAX_LENGTH} characters`,
     );
   }
 }
@@ -148,8 +148,8 @@ export default function ContactInfoPage({ changeCrumb }) {
       ...phoneConfig,
       'ui:errorMessages': {
         ...phoneConfig['ui:errorMessages'],
-        pattern:
-          'Please enter a valid 10-digit phone number (with or without dashes)',
+        required: 'Enter a phone number',
+        pattern: 'Enter a valid 10-digit phone number (with or without dashes)',
       },
     },
     bestTimeToCall: {
@@ -186,7 +186,8 @@ export default function ContactInfoPage({ changeCrumb }) {
     email: {
       'ui:title': 'Your email address',
       'ui:errorMessages': {
-        required: 'Please enter an email address',
+        format: 'Enter a valid email address',
+        required: 'Enter an email address',
       },
       'ui:validations': [validateLength],
     },

src/applications/vaos/new-appointment/components/DateTimeRequestPage/VA.jsx

@@ -105,7 +105,7 @@ export default function VARequest({ changeCrumb }) {
         renderOptions={props => <DateTimeRequestOptions {...props} />}
         renderSelectedLabel={getSelectedLabel}
         required
-        requiredMessage="Please select at least one preferred date for your appointment. You can select up to three dates."
+        requiredMessage="Select at least 1 preferred timeframe for your appointment."
         showValidation={submitted && !userSelectedSlot(selectedDates)}
       />
       <FormButtons

src/applications/vaos/new-appointment/components/ReasonForAppointmentPage.jsx

@@ -71,13 +71,20 @@ const uiSchema = {
     reasonForAppointment: {
       'ui:widget': 'radio',
       'ui:title': 'Let us know why you’re making this appointment.',
+      'ui:errorMessages': {
+        required: 'Select a reason for your appointment',
+      },
     },
     reasonAdditionalInfo: {
       'ui:widget': TextareaWidget,
       'ui:options': {
         rows: 5,
       },
       'ui:validations': [validComment],
+      'ui:errorMessages': {
+        required:
+          'Provide more details about why you are requesting this appointment',
+      },
     },
   },
   cc: {

src/applications/vaos/new-appointment/components/TypeOfVisitPage.jsx

@@ -32,6 +32,9 @@ const uiSchema = {
     'ui:widget': 'radio',
     'ui:title':
       'Please let us know how you would like to be seen for this appointment.',
+    'ui:errorMessages': {
+      required: 'Select an option',
+    },
   },
 };
 

src/applications/vaos/tests/new-appointment/components/ContactInfoPage.unit.spec.js

@@ -211,7 +211,7 @@ describe('VAOS Page: ContactInfoPage', () => {
     expect(screen.history.push.called).to.be.false;
 
     expect(await screen.findByRole('alert')).to.contain.text(
-      'We do not support email addresses that exceeds 50 characters',
+      'We don’t support email addresses that exceeds 50 characters',
     );
   });
 });

src/applications/vaos/tests/new-appointment/components/ReasonForAppointmentPage.unit.spec.js

@@ -90,7 +90,7 @@ describe('VAOS Page: ReasonForAppointmentPage', () => {
     fireEvent.click(screen.getByText(/Continue/));
 
     const alerts = await screen.findAllByRole('alert');
-    expect(alerts[0]).to.contain.text('Please provide a response');
+    expect(alerts[0]).to.contain.text('Select a reason for your appointment');
   });
 
   it('should show error msg when enter all spaces for VA medical request', async () => {

src/applications/vaos/tests/new-appointment/components/TypeOfVisitPage.unit.spec.js

@@ -43,7 +43,7 @@ describe('VAOS Page: TypeOfVisitPage ', () => {
 
     fireEvent.click(screen.getByText(/Continue/));
 
-    expect(await screen.findByText('Please provide a response')).to.exist;
+    expect(await screen.findByText('Select an option')).to.exist;
     expect(screen.history.push.called).to.not.be.true;
   });