Update content layout for Reg Only pages in Health Care Application (#…

…32172)

src/applications/hca/components/FormAlerts/RegistrationOnlyAlert.jsx

@@ -32,17 +32,18 @@ const RegistrationOnlyAlert = ({ headingLevel = 3 }) => {
         You selected that you want to register for health care for your
         service-connected conditions only.
       </p>
-      <p>
-        We recommend calling our Health Eligibility Center to register. Or you
-        can register by mail or in person.
-      </p>
+      <p>You can register by mail or in person.</p>
 
-      <SH className="vads-u-font-size--h4">By phone</SH>
       <p>
-        Call our Health Eligibility Center at{' '}
+        <strong>Note:</strong> If you need help or have any questions call our
+        Health Eligibility Center at{' '}
         <va-telephone contact={CONTACTS['222_VETS']} /> (
-        <va-telephone contact={CONTACTS['711']} tty />) to register for care for
-        your service-connected condition.
+        <va-telephone contact={CONTACTS['711']} tty />
+        ). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m.{' '}
+        <dfn>
+          <abbr title="Eastern Time">ET</abbr>
+        </dfn>
+        .
       </p>
 
       <SH className="vads-u-font-size--h4">By mail</SH>

src/applications/hca/components/FormDescriptions/HealthEnrollmentDescription.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 const HealthEnrollmentDescription = () => (
   <va-additional-info
     trigger="What to know about enrollment in the full medical benefits package"
-    class="vads-u-margin-top--3"
+    class="vads-u-margin-y--3"
   >
     <div>
       <p className="vads-u-margin-top--0">

src/applications/hca/components/FormDescriptions/RegistrationOnlyNote.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
+
+const RegistrationOnlyNote = (
+  <p>
+    <strong>Note:</strong> If you’re not sure which option to select, we
+    recommend calling our Health Eligibility Center at{' '}
+    <va-telephone contact={CONTACTS['222_VETS']} /> (
+    <va-telephone contact={CONTACTS['711']} tty />
+    ). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m.{' '}
+    <dfn>
+      <abbr title="Eastern Time">ET</abbr>
+    </dfn>
+    .
+  </p>
+);
+
+export default RegistrationOnlyNote;

src/applications/hca/config/chapters/vaBenefits/benefitsPackage.js

@@ -2,17 +2,18 @@ import {
   titleUI,
   descriptionUI,
 } from 'platform/forms-system/src/js/web-component-patterns';
-import RegistrationOnlyDescription from '../../../components/FormDescriptions/RegistrationOnlyDescription';
 import HealthEnrollmentDescription from '../../../components/FormDescriptions/HealthEnrollmentDescription';
+import RegistrationOnlyNote from '../../../components/FormDescriptions/RegistrationOnlyNote';
 import { emptyObjectSchema } from '../../../definitions';
 import content from '../../../locales/en/content.json';
 
 export default {
   uiSchema: {
     ...titleUI(
       content['benefits--reg-only-title'],
-      RegistrationOnlyDescription,
+      content['benefits--reg-only-description'],
     ),
+    ...descriptionUI(HealthEnrollmentDescription),
     'view:vaBenefitsPackage': {
       'ui:title': content['benefits--reg-only-label'],
       'ui:widget': 'radio',
@@ -23,8 +24,8 @@ export default {
         },
       },
     },
-    'view:healthEnrollmentDescription': {
-      ...descriptionUI(HealthEnrollmentDescription),
+    'view:registrationOnlyNote': {
+      ...descriptionUI(RegistrationOnlyNote),
     },
   },
   schema: {
@@ -35,7 +36,7 @@ export default {
         type: 'string',
         enum: ['fullPackage', 'regOnly'],
       },
-      'view:healthEnrollmentDescription': emptyObjectSchema,
+      'view:registrationOnlyNote': emptyObjectSchema,
     },
   },
 };

src/applications/hca/containers/AuthBenefitsPackagePage.jsx

@@ -12,7 +12,6 @@ import FormNavButtons from 'platform/forms-system/src/js/components/FormNavButto
 import SchemaForm from 'platform/forms-system/src/js/components/SchemaForm';
 import FormTitle from 'platform/forms-system/src/js/components/FormTitle';
 import definition from '../config/chapters/vaBenefits/benefitsPackage';
-import RegistrationOnlyDescription from '../components/FormDescriptions/RegistrationOnlyDescription';
 import FormFooter from '../components/FormFooter';
 import content from '../locales/en/content.json';
 
@@ -25,7 +24,7 @@ const AuthBenefitsPackagePage = props => {
     ...definition.uiSchema,
     ...titleUI({
       title: content['benefits--reg-only-title'],
-      description: RegistrationOnlyDescription,
+      description: content['benefits--reg-only-description'],
       headerLevel: 2,
       headerStyleLevel: 3,
     }),
@@ -35,19 +34,19 @@ const AuthBenefitsPackagePage = props => {
   const [localData, setLocalData] = useState({});
   const dispatch = useDispatch();
 
+  const setFormData = dataToSet => dispatch(setData(dataToSet));
+
   const handlers = {
     goBack: () => {
       const prevPagePath = getPreviousPagePath(pageList, formData, pathname);
       router.push(prevPagePath);
     },
     onChange: data => {
       setLocalData(data);
-      dispatch(
-        setData({
-          ...formData,
-          'view:vaBenefitsPackage': data['view:vaBenefitsPackage'],
-        }),
-      );
+      setFormData({
+        ...formData,
+        'view:vaBenefitsPackage': data['view:vaBenefitsPackage'],
+      });
     },
     onSubmit: () => {
       const nextPagePath = getNextPagePath(pageList, formData, pathname);

src/applications/hca/locales/en/content.json

@@ -1,5 +1,6 @@
 {
   "benefits--reg-only-title": "Health care for your service-connected conditions",
+  "benefits--reg-only-description": "You have the option to register for health care for your service-connected conditions only without enrolling in our full medical benefits package.",
   "benefits--reg-only-label" : "What type of health care do you want to apply for?",
   "benefits--reg-only-full-package-label": "I want to apply to enroll in the full medical benefits package",
   "benefits--reg-only-service-connected-label": "I want to register for care for my service-connected conditions only",