98360 (#33713)

* 98360 landing page renders different alerts for user actionable errors and all other errors

* 98360 adding e2e tests

* 98360 mhvAccountStatusErrorsSorted selector isn't clear

* 98360 When multiple api errors occurr, alert and cards should agree on which to show

* 98360 fix error caused by merge conflict

* 98360 linter

src/applications/mhv-landing-page/components/alerts/AlertAccountApiAlert.jsx

@@ -0,0 +1,104 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+// eslint-disable-next-line import/no-named-default
+import { default as recordEventFn } from '~/platform/monitoring/record-event';
+import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+
+const AlertAccountApiAlert = ({
+  errorCode,
+  testId,
+  recordEvent,
+  userActionable = false,
+}) => {
+  const headline = userActionable
+    ? `Error code ${errorCode}: Contact the My HealtheVet help desk`
+    : `You can't access messages, medications, or medical records right now`;
+  useEffect(
+    () => {
+      recordEvent({
+        event: 'nav-alert-box-load',
+        action: 'load',
+        'alert-box-headline': headline,
+        'alert-box-status': 'warning',
+      });
+    },
+    [headline, recordEvent],
+  );
+
+  return (
+    <VaAlert
+      className="vads-u-margin-bottom--3"
+      data-testid={testId}
+      status="error"
+      visible
+    >
+      <h2 className="vads-u-margin-top--0 vads-u-margin-bottom--1">
+        {headline}
+      </h2>
+      {userActionable ? (
+        <div className="mhv-u-reg-alert-body" role="presentation">
+          <p className="vads-u-margin-y--0">
+            We’re having trouble giving you access to your messages,
+            medications, and medical records.
+          </p>
+
+          <p>
+            To get access to these My HealtheVet tools, call us at 877-327-0022
+            (TTY: 711). We’re here Monday through Friday, 8:00 a.m. to 8 p.m.
+            ET. Tell the representative that you received{' '}
+            <b>error code {errorCode}</b>
+          </p>
+
+          <p>
+            If you need to contact your care team now, call your VA health
+            facility.
+          </p>
+
+          <a href="/find-locations/?page=1&facilityType=health">
+            Find your VA health facility
+          </a>
+        </div>
+      ) : (
+        <div className="mhv-u-reg-alert-body" role="presentation">
+          <p className="vads-u-margin-y--0">
+            We’re sorry. There’s a problem with our system. Try refreshing this
+            page. Or check back later.
+          </p>
+
+          <p>
+            If the problem persists, call the My HealtheVet helpdesk at
+            877-327-0022 (TTY: 711). We’re here Monday through Friday, 8:00 a.m.
+            to 8 p.m. ET. Tell the representative that you received{' '}
+            <b>error code {errorCode}</b>.
+          </p>
+
+          <p>
+            If you need to contact your care team now, call your VA health
+            facility.
+          </p>
+
+          <a href="/find-locations/?page=1&facilityType=health">
+            Find your VA health facility
+          </a>
+        </div>
+      )}
+    </VaAlert>
+  );
+};
+
+AlertAccountApiAlert.defaultProps = {
+  title: 'Error code 000: Contact the My HealtheVet help desk',
+  errorCode: 'unknown',
+  recordEvent: recordEventFn,
+  testId: 'mhv-alert--mhv-registration',
+};
+
+AlertAccountApiAlert.propTypes = {
+  errorCode: PropTypes.string,
+  title: PropTypes.string,
+  headline: PropTypes.string,
+  recordEvent: PropTypes.func,
+  testId: PropTypes.string,
+};
+
+export default AlertAccountApiAlert;

src/applications/mhv-landing-page/components/alerts/index.js

@@ -5,6 +5,7 @@ import AlertUnregistered from './AlertUnregistered';
 import AlertVerifyAndRegister from './AlertVerifyAndRegister';
 import AlertMhvUserAction from './AlertMhvUserAction';
 import AlertMhvNoAction from './AlertMhvNoAction';
+import AlertAccountApiAlert from './AlertAccountApiAlert';
 
 export {
   AlertMhvBasicAccount,
@@ -14,4 +15,5 @@ export {
   AlertVerifyAndRegister,
   AlertMhvUserAction,
   AlertMhvNoAction,
+  AlertAccountApiAlert,
 };

src/applications/mhv-landing-page/containers/Alerts.jsx

@@ -6,8 +6,7 @@ import {
   AlertMhvRegistration,
   AlertUnregistered,
   AlertVerifyAndRegister,
-  AlertMhvUserAction,
-  AlertMhvNoAction,
+  AlertAccountApiAlert,
 } from '../components/alerts';
 
 import {
@@ -20,7 +19,7 @@ import {
   mhvAccountStatusLoading,
   mhvAccountStatusUserError,
   mhvAccountStatusUsersuccess,
-  mhvAccountStatusNonUserError,
+  mhvAccountStatusErrorsSorted,
   showVerifyAndRegisterAlert,
   signInServiceName,
 } from '../selectors';
@@ -35,12 +34,13 @@ const Alerts = () => {
   const renderVerifyAndRegisterAlert = useSelector(showVerifyAndRegisterAlert);
   const cspId = useSelector(signInServiceName);
   const ssoe = useSelector(isAuthenticatedWithSSOe);
-  const mhvAccountStatusNonUserErrors = useSelector(
-    mhvAccountStatusNonUserError,
-  );
+
   const mhvAccountStatusUserErrors = useSelector(mhvAccountStatusUserError);
   const mhvAccountStatusSuccess = useSelector(mhvAccountStatusUsersuccess);
   const mhvAccountStatusIsLoading = useSelector(mhvAccountStatusLoading);
+  const mhvAccountStatusSortedErrors = useSelector(
+    mhvAccountStatusErrorsSorted,
+  );
 
   if (userHasMhvBasicAccount) {
     return <AlertMhvBasicAccount />;
@@ -54,17 +54,15 @@ const Alerts = () => {
     return <AlertUnregistered />;
   }
 
-  if (mhvAccountStatusNonUserErrors.length > 0 && isAccountStatusApiEnabled) {
+  if (mhvAccountStatusSortedErrors.length > 0 && isAccountStatusApiEnabled) {
     return (
-      <AlertMhvNoAction errorCode={mhvAccountStatusNonUserErrors[0].code} />
+      <AlertAccountApiAlert
+        userActionable={mhvAccountStatusUserErrors.length > 0}
+        errorCode={mhvAccountStatusSortedErrors[0].code}
+      />
     );
   }
 
-  if (mhvAccountStatusUserErrors.length > 0 && isAccountStatusApiEnabled) {
-    return (
-      <AlertMhvUserAction errorCode={mhvAccountStatusUserErrors[0].code} />
-    );
-  }
   if (
     userRegistered &&
     !userHasMhvAccount &&

src/applications/mhv-landing-page/mocks/api/index.js

@@ -18,7 +18,8 @@ const responses = (userMock = USER_MOCKS.DEFAULT) => ({
   // 'GET /v0/user/mhv_user_account': MHVAccountStatus.accountSuccess,
   // 'GET /v0/user/mhv_user_account': MHVAccountStatus.eightZeroOne,
   // 'GET /v0/user/mhv_user_account': MHVAccountStatus.eightZeroFive,
-  'GET /v0/user/mhv_user_account': MHVAccountStatus.fiveZeroZero,
+  // 'GET /v0/user/mhv_user_account': MHVAccountStatus.fiveZeroZero,
+  'GET /v0/user/mhv_user_account': MHVAccountStatus.multiError,
 });
 
 module.exports = responses(USER_MOCKS.DEFAULT);

src/applications/mhv-landing-page/mocks/api/user/mhvAccountStatus.js

@@ -63,6 +63,33 @@ const fiveZeroZero = (req, res) => {
   });
 };
 
+const multiError = (req, res) => {
+  return res.status(422).json({
+    errors: [
+      {
+        title: 'The server responded with status 422',
+        detail: 'things fall apart',
+        code: '802',
+      },
+      {
+        title: 'The server responded with status 500',
+        detail: 'things fall apart',
+        code: '500',
+      },
+      {
+        title: 'The server responded with status 422',
+        detail: 'things fall apart',
+        code: '805',
+      },
+      {
+        title: 'The server responded with status 422',
+        detail: 'things fall apart',
+        code: '801',
+      },
+    ],
+  });
+};
+
 const accountStatusSuccessResponse = {
   data: {
     id: '12345678',
@@ -98,13 +125,40 @@ const accountStatusFiveZeroZero = {
   ],
 };
 
+const accountStatusMultiError = {
+  errors: [
+    {
+      title: 'The server responded with status 422',
+      detail: 'things fall apart',
+      code: '802',
+    },
+    {
+      title: 'The server responded with status 500',
+      detail: 'things fall apart',
+      code: '500',
+    },
+    {
+      title: 'The server responded with status 422',
+      detail: 'things fall apart',
+      code: '805',
+    },
+    {
+      title: 'The server responded with status 422',
+      detail: 'things fall apart',
+      code: '801',
+    },
+  ],
+};
+
 module.exports = {
   accountSuccess,
   eightZeroOne,
   eightZeroFive,
   eightZeroSix,
   fiveZeroZero,
+  multiError,
   accountStatusSuccessResponse,
   accountStatusEightZeroOne,
   accountStatusFiveZeroZero,
+  accountStatusMultiError,
 };

src/applications/mhv-landing-page/tests/e2e/alerts/no-mhv-account.cypress.spec.js

@@ -89,6 +89,22 @@ describe(`${appName} - MHV Registration Alert - `, () => {
     });
   });
 
+  context('for multiple user and non-user api errors', () => {
+    beforeEach(() => {
+      ApiInitializer.initializeAccountStatus.withMultipleErrors();
+      LandingPage.visit({ mhvAccountState: 'NONE' });
+    });
+    it('refers to the same error in the alert and the card', () => {
+      cy.findByText('Error code 805: Contact the My HealtheVet help desk', {
+        exact: false,
+      }).should.exist;
+
+      cy.findByText('Error 805: We can’t give you access to messages', {
+        exact: false,
+      }).should.exist;
+    });
+  });
+
   it(`alert not shown for user with MHV account`, () => {
     LandingPage.visit({ mhvAccountState: 'OK' });
     cy.injectAxeThenAxeCheck();

src/applications/mhv-landing-page/tests/e2e/utilities/ApiInitializer.js

@@ -8,6 +8,7 @@ import {
   accountStatusSuccessResponse,
   accountStatusEightZeroOne,
   accountStatusFiveZeroZero,
+  accountStatusMultiError,
 } from '../../../mocks/api/user/mhvAccountStatus';
 
 class ApiInitializer {
@@ -86,6 +87,9 @@ class ApiInitializer {
         accountStatusFiveZeroZero,
       );
     },
+    withMultipleErrors: () => {
+      cy.intercept('GET', '/v0/user/mhv_user_account', accountStatusMultiError);
+    },
   };
 }