Merge branch 'main' into feature-mhv-medical-records-accelerated-vitals

.github/CODEOWNERS

@@ -155,6 +155,7 @@ src/applications/static-pages/health-care-manage-benefits/view-test-and-lab-resu
 src/applications/facility-locator @department-of-veterans-affairs/vfs-facilities-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/static-pages/facilities @department-of-veterans-affairs/vfs-facilities-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/static-pages/tests/facilities @department-of-veterans-affairs/vfs-facilities-frontend @department-of-veterans-affairs/va-platform-cop-frontend
+src/applications/static-pages/situation-updates-banner @department-of-veterans-affairs/vfs-facilities-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 
 # Caregiver
 

script/watch.js

@@ -2,7 +2,7 @@ const argv = require('minimist')(process.argv.slice(2));
 const printBuildHelp = require('./build-help');
 const { runCommand } = require('./utils');
 
-// Preset memory options 1gb -> 8gb
+// Preset memory options 1gb -> 12gb
 const memoryOptions = [1024, 2048, 3072, 4096, 5120, 6144, 7168, 8192, 12288];
 
 // Caching the input memory arg

src/applications/ivc-champva/10-10D/config/constants.js

@@ -51,5 +51,22 @@ export const OPTIONAL_FILES = {
     'Proof of Legal Separation from Marriage Or Legal Union to Other',
 };
 
+// The backend needs this list so that it can properly match the attachmentId
+// on a per applicant basis to the temporary cache files that have been uploaded
+// See: https://github.com/department-of-veterans-affairs/va.gov-team/issues/96358
+export const FILE_UPLOAD_ORDER = [
+  'applicantBirthCertOrSocialSecCard',
+  'applicantAdoptionPapers',
+  'applicantStepMarriageCert',
+  'applicantSchoolCert',
+  'applicantHelplessCert',
+  'applicantRemarriageCert',
+  'applicantMedicarePartAPartBCard',
+  'applicantMedicarePartDCard',
+  'applicantMedicareIneligibleProof',
+  'applicantOhiCard',
+  'applicantOtherInsuranceCertification',
+];
+
 export const ADDITIONAL_FILES_HINT =
   'Depending on your response, you may need to submit additional documents with this application.';

src/applications/ivc-champva/10-10D/config/submitTransformer.js

@@ -1,5 +1,5 @@
 import { transformForSubmit as formsSystemTransformForSubmit } from 'platform/forms-system/src/js/helpers';
-import { REQUIRED_FILES, OPTIONAL_FILES } from './constants';
+import { FILE_UPLOAD_ORDER } from './constants';
 import {
   adjustYearString,
   concatStreets,
@@ -53,13 +53,9 @@ function transformApplicants(applicants) {
       ),
       // Grab any file upload properties from this applicant and combine into a
       // supporting documents array:
-      applicantSupportingDocuments: Object.keys({
-        ...REQUIRED_FILES,
-        ...OPTIONAL_FILES,
-      })
-        .filter(k => k.includes('applicant')) // Ignore sponsor files
-        .map(f => app?.[f]) // Grab the upload obj from top-level in applicant
-        .filter(el => el), // Drop any undefineds/nulls
+      applicantSupportingDocuments: FILE_UPLOAD_ORDER.map(
+        property => app?.[property],
+      ).filter(el => el), // Drop any undefineds/nulls
     };
     transformedApp = adjustYearString(transformedApp);
     transformedApp.applicantAddress = concatStreets(

src/applications/ivc-champva/10-10D/tests/unit/components/File/MissingFileOverview.unit.spec.js

@@ -4,7 +4,10 @@ import { Provider } from 'react-redux';
 import { expect } from 'chai';
 import SupportingDocumentsPage from '../../../../pages/SupportingDocumentsPage';
 import { MissingFileConsentPage } from '../../../../pages/MissingFileConsentPage';
-import { REQUIRED_FILES } from '../../../../config/constants';
+import {
+  REQUIRED_FILES,
+  FILE_UPLOAD_ORDER,
+} from '../../../../config/constants';
 import {
   testComponentRender,
   getProps,
@@ -14,10 +17,52 @@ import {
   checkFlags,
 } from '../../../../../shared/components/fileUploads/MissingFileOverview';
 import MissingFileList from '../../../../../shared/components/fileUploads/MissingFileList';
+import { getAllPages } from '../../../../../shared/tests/helpers';
+import SupportingDocsVerification from '../../../../../shared/components/fileUploads/supportingDocsVerification';
 
 import formConfig from '../../../../config/form';
 import mockData from '../../../e2e/fixtures/data/test-data.json';
 
+describe('FILE_UPLOAD_ORDER constant', () => {
+  it('should match order of file upload fields present in formConfig', () => {
+    /* 
+    NOTE: FILE_UPLOAD_ORDER must be manually updated if the order
+    of file uploads in `formConfig` ever changes. This test serves to
+    make sure that happens. The backend relies on this list to properly
+    map metadata to the tmp files generated when users upload docs.
+    */
+
+    const verifier = new SupportingDocsVerification([]);
+    // We want this `FILE_UPLOAD_ORDER` to match what we pull from formConfig.
+    // This helper produces a list like:
+    //  ['applicantBirthCertOrSocialSecCard','applicantAdoptionPapers', ...]
+    const generatedArr = verifier
+      .getApplicantFileKeyNames(getAllPages(formConfig))
+      .map(el => el.name);
+
+    let orderIsSame = true;
+    generatedArr.forEach((el, idx) => {
+      if (FILE_UPLOAD_ORDER[idx] !== el) {
+        orderIsSame = false;
+      }
+    });
+
+    expect(
+      orderIsSame,
+      `Expected FILE_UPLOAD_ORDER array:
+      
+      ${FILE_UPLOAD_ORDER.join('\n\t')}
+      
+      to have same order as defined in formConfig:
+      
+      ${generatedArr.join('\n\t')}
+
+      Please verify that FILE_UPLOAD_ORDER matches the order of file upload properties defined in formConfig.
+      `,
+    ).to.be.true;
+  });
+});
+
 describe('hasReq', () => {
   const data = {
     applicants: [

src/applications/letters/components/DownloadLetterLink.jsx

@@ -30,7 +30,7 @@ export class DownloadLetterLink extends React.Component {
 
   render() {
     let buttonText;
-    let buttonDisabled;
+    let buttonDisabled; // false causes MS Voice Access to ignore buttons
     let message;
     switch (this.props.downloadStatus) {
       case DOWNLOAD_STATUSES.downloading:
@@ -39,7 +39,7 @@ export class DownloadLetterLink extends React.Component {
         break;
       case DOWNLOAD_STATUSES.success:
         buttonText = `${this.props.letterName} (PDF)`;
-        buttonDisabled = false;
+        buttonDisabled = undefined;
         message = (
           <va-alert status="success" role="alert">
             <h4 slot="headline">Your letter has successfully downloaded.</h4>
@@ -52,7 +52,7 @@ export class DownloadLetterLink extends React.Component {
         break;
       case DOWNLOAD_STATUSES.failure:
         buttonText = 'Retry download';
-        buttonDisabled = false;
+        buttonDisabled = undefined;
         message = (
           <va-alert status="error" role="alert">
             <h4 slot="headline">Your letter didn’t download.</h4>
@@ -65,7 +65,7 @@ export class DownloadLetterLink extends React.Component {
         break;
       default:
         buttonText = `${this.props.letterName} (PDF)`;
-        buttonDisabled = false;
+        buttonDisabled = undefined;
     }
 
     return (

src/applications/letters/components/NoAddressBanner.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 export default function NoAddressBanner() {
   return (
     <>
-      <va-alert status="warning" className="vads-u-margin-bottom--4">
+      <va-alert status="warning" class="vads-u-margin-bottom--4">
         <h3 slot="headline">We don’t have a valid address on file for you</h3>
         <div>
           You’ll need to{' '}

src/applications/letters/containers/AddressSection.jsx

@@ -39,8 +39,8 @@ export function AddressSection({ address }) {
         <VaButton
           data-cy="view-letters-button"
           className="vads-u-margin-y--4"
-          disabled={emptyAddress}
-          text="View Letters"
+          disabled={emptyAddress ? true : undefined} // false causes MS Voice Access to ignore buttons
+          text="View letters"
           onClick={() => navigateToLetterList(navigate)}
         />
       </div>
@@ -55,9 +55,7 @@ export function AddressSection({ address }) {
 
   return (
     <>
-      <div aria-live="polite" aria-relevant="additions">
-        {emptyAddress ? <NoAddressBanner /> : addressContent}
-      </div>
+      {emptyAddress ? <NoAddressBanner /> : addressContent}
       {viewLettersButton}
     </>
   );

src/applications/letters/containers/LetterList.jsx

@@ -95,7 +95,7 @@ export class LetterList extends React.Component {
     }
 
     return (
-      <div className="step-content" aria-live="polite">
+      <div className="step-content">
         <p>
           To see an explanation about each letter, click on the (+) to expand
           the box. After you expand the box, you’ll be given the option to

src/applications/letters/sass/letters.scss

@@ -149,6 +149,7 @@
   }
 
   .form-expanding-group {
+    margin-bottom: 1.5em;
     margin-left: initial;
     margin-top: 1.5em;
   }

src/applications/letters/tests/01-authed.cypress.spec.js

@@ -35,6 +35,11 @@ describe('Authed Letter Test', () => {
 
     cy.axeCheck();
 
+    cy.get('[data-cy="view-letters-button"]')
+      .shadow()
+      .find('button.usa-button')
+      .should('not.have.attr', 'aria-disabled'); // Check for MS Voice Access usability
+
     cy.get('[data-cy="view-letters-button"]')
       .click()
       .then(() => {

src/applications/letters/tests/containers/AddressSection.unit.spec.jsx

@@ -45,20 +45,20 @@ describe('<AddressSection>', () => {
     stub.restore();
   });
 
-  it('should enable the View Letters button with default props', () => {
+  it('should enable the View letters button with default props', () => {
     const { container } = render(
       <MemoryRouter initialEntries={[`/confirm-address`]}>
         <AddressSection address={address} />
       </MemoryRouter>,
     );
 
     expect($('va-button', container).getAttribute('text')).to.eq(
-      'View Letters',
+      'View letters',
     );
-    expect($('va-button', container).getAttribute('disabled')).to.eq('false');
+    expect($('va-button', container).getAttribute('disabled')).to.be.null;
   });
 
-  it('should render an empty address warning on the view screen and disable the View Letters button', () => {
+  it('should render an empty address warning on the view screen and disable the View letters button', () => {
     const { container, getByText } = render(
       <MemoryRouter initialEntries={[`/confirm-address`]}>
         <AddressSection address={emptyAddress} />
@@ -67,7 +67,7 @@ describe('<AddressSection>', () => {
 
     expect(getByText('We don’t have a valid address on file for you').exist);
     expect($('va-button', container).getAttribute('text')).to.eq(
-      'View Letters',
+      'View letters',
     );
     expect($('va-button', container).getAttribute('disabled')).to.eq('true');
   });

src/applications/static-pages/situation-updates-banner/createSituationUpdatesBanner.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { useFeatureToggle } from '~/platform/utilities/feature-toggles';
+import SituationUpdateBanner from './situationUpdateBanner';
+
+export const BannerContainer = () => {
+  const {
+    TOGGLE_NAMES,
+    useToggleValue,
+    useToggleLoadingValue,
+  } = useFeatureToggle();
+
+  const alternativeBannersEnabled = useToggleValue(
+    TOGGLE_NAMES.bannerUseAlternativeBanners,
+  );
+  const isLoadingFeatureFlags = useToggleLoadingValue();
+
+  if (isLoadingFeatureFlags || !alternativeBannersEnabled) {
+    return null;
+  }
+
+  const defaultProps = {
+    id: '1',
+    bundle: 'situation-updates',
+    headline: 'Situation update',
+    alertType: 'warning',
+    content:
+      "We're having issues at this location. Please avoid this facility until further notice.",
+    context: 'global',
+    showClose: true,
+    operatingStatusCTA: false,
+    emailUpdatesButton: false,
+    findFacilitiesCTA: false,
+    limitSubpageInheritance: false,
+  };
+
+  return <SituationUpdateBanner {...defaultProps} />;
+};
+
+export default async function createSituationUpdatesBanner(store, widgetType) {
+  const bannerWidget = document.querySelector(
+    `[data-widget-type="${widgetType}"]`,
+  );
+
+  if (bannerWidget) {
+    ReactDOM.render(
+      <Provider store={store}>
+        <BannerContainer />
+      </Provider>,
+      bannerWidget,
+    );
+  }
+}

src/applications/static-pages/situation-updates-banner/situationUpdateBanner.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function SituationUpdateBanner({
+  id,
+  alertType,
+  headline,
+  showClose,
+  content,
+}) {
+  return (
+    <va-banner
+      banner-id={id}
+      type={alertType}
+      headline={headline}
+      show-close={showClose}
+    >
+      <p>{content}</p>
+    </va-banner>
+  );
+}
+
+SituationUpdateBanner.propTypes = {
+  alertType: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  headline: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  showClose: PropTypes.bool,
+};