Add performance warning to Health Care Application for TERA rollout (#…

…28317)

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
+
+const PerformanceWarning = () => (
+  <va-alert status="warning" uswds>
+    <h3 slot="headline">This application may not be working right now</h3>
+    <div>
+      <p className="vads-u-margin-top--0">
+        You may have trouble using this application at this time. We’re working
+        to fix the problem. If you have trouble, you can try again or check back
+        later.
+      </p>
+      <p>
+        <strong>
+          If you’re trying to apply based on our expansion of health care
+          benefits starting on March 5, 2024
+        </strong>
+        , you can also apply in other ways:
+      </p>
+      <ul>
+        <li>
+          Call us at <va-telephone contact={CONTACTS['222_VETS']} />, Monday
+          through Friday, 8:00 a.m. to 8:00 p.m.{' '}
+          <dfn>
+            <abbr title="Eastern Time">ET</abbr>
+          </dfn>
+        </li>
+        <li>Mail us an application.</li>
+        <li>
+          Or bring your application in person to your nearest VA health
+          facility.
+        </li>
+      </ul>
+      <p>
+        <va-link
+          href="/health-care/how-to-apply/#you-can-also-apply-in-any-of-t"
+          text="Learn more about how to apply by phone, mail, or in person"
+        />
+      </p>
+    </div>
+  </va-alert>
+);
+
+export default PerformanceWarning;

src/applications/hca/containers/IntroductionPage.jsx

@@ -14,6 +14,7 @@ import recordEvent from 'platform/monitoring/record-event';
 import EnrollmentStatus from '../components/IntroductionPage/EnrollmentStatus';
 import GetStartedContent from '../components/IntroductionPage/GetStarted';
 import IdentityVerificationAlert from '../components/FormAlerts/IdentityVerificationAlert';
+import PerformanceWarning from '../components/FormAlerts/PerformanceWarning';
 
 import {
   isLoading,
@@ -32,7 +33,7 @@ const IntroductionPage = props => {
     showLOA3Content,
     showGetStartedContent,
   } = displayConditions;
-  const { enrollmentOverrideEnabled } = features;
+  const { enrollmentOverrideEnabled, performanceAlertEnabled } = features;
 
   const onVerifyEvent = recordEvent({ event: AUTH_EVENTS.VERIFY });
 
@@ -55,6 +56,8 @@ const IntroductionPage = props => {
         appTitle="Application for VA health care"
         dependencies={[externalServices.es]}
       >
+        {performanceAlertEnabled && <PerformanceWarning />}
+
         {!showLoader &&
           !showLOA3Content && (
             <p data-testid="hca-loa1-description">
@@ -67,8 +70,9 @@ const IntroductionPage = props => {
 
         {showLoader && (
           <va-loading-indicator
-            label="Loading"
             message="Loading your application..."
+            class="vads-u-margin-y--4"
+            set-focus
           />
         )}
 
@@ -104,6 +108,7 @@ const mapStateToProps = state => ({
   features: {
     enrollmentOverrideEnabled:
       state.featureToggles.hcaEnrollmentStatusOverrideEnabled,
+    performanceAlertEnabled: state.featureToggles.hcaPerformanceAlertEnabled,
   },
 });
 

src/applications/hca/tests/unit/components/FormAlerts/PerformanceWarning.unit.spec.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { expect } from 'chai';
+
+import PerformanceWarning from '../../../../components/FormAlerts/PerformanceWarning';
+
+describe('hca <PerformanceWarning>', () => {
+  context('when the component renders', () => {
+    it('should render `va-alert` with status of `warning`', () => {
+      const { container } = render(<PerformanceWarning />);
+      const selector = container.querySelector('va-alert');
+      expect(selector).to.exist;
+      expect(selector).to.have.attr('status', 'warning');
+    });
+  });
+});