PDF cert warning added to find-form search

src/applications/find-forms/components/FindVaForms.jsx

@@ -1,10 +1,17 @@
 /* eslint-disable jsx-a11y/no-redundant-roles */
 // Node modules.
 import React from 'react';
+
 // Relative imports.
+import { connect } from 'react-redux';
+import { toggleValues } from 'platform/site-wide/feature-toggles/selectors';
+import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames';
+
+import recordEvent from 'platform/monitoring/record-event';
+import PropTypes from 'prop-types';
 import SearchForm from '../containers/SearchForm';
 import SearchResults from '../containers/SearchResults';
-import recordEvent from 'platform/monitoring/record-event';
+import PdfAlert from './PdfAlert';
 
 const onFeaturedContentClick = header => () => {
   recordEvent({
@@ -13,111 +20,130 @@ const onFeaturedContentClick = header => () => {
   });
 };
 
-export default () => (
-  <>
-    <SearchForm />
-    <SearchResults />
-    <h2>Frequently used VA forms</h2>
-    <p>
-      You can now do many form-based tasks online, like filing a disability
-      claim and applying for the GI Bill or VA health care. We&apos;ll walk you
-      through the process step-by-step.
-    </p>
-    {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
-    <ul
-      className="usa-grid usa-grid-full vads-u-margin-top--3 vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row"
-      role="list"
-    >
-      <li className="featured-content-list-item vads-u-background-color--primary-alt-lightest  vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
-        <h3 className="vads-u-font-size--base vads-u-margin--0">
-          File a VA disability claim
-        </h3>
-        <hr
-          aria-hidden="true"
-          role="presentation"
-          className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
-        />
-        <p className="va-nav-linkslist-description">
-          Equal to VA Form 21-526EZ
-        </p>
-        <a
-          className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
-          href="/disability/file-disability-claim-form-21-526ez/"
-          onClick={onFeaturedContentClick('File a VA disability claim')}
-        >
-          <span>
-            Apply online
-            <span className="vads-u-visibility--screen-reader">
-              about filing a VA disability claim
+export const FindVaForms = ({ showPdfWarningBanner = false }) => {
+  return (
+    <>
+      {showPdfWarningBanner && <PdfAlert />}
+      <SearchForm />
+      <SearchResults />
+      <h2>Frequently used VA forms</h2>
+      <p>
+        You can now do many form-based tasks online, like filing a disability
+        claim and applying for the GI Bill or VA health care. We’ll walk you
+        through the process step-by-step.
+      </p>
+      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+      <ul
+        className="usa-grid usa-grid-full vads-u-margin-top--3 vads-u-margin-bottom--4 vads-u-display--flex vads-u-flex-direction--column medium-screen:vads-u-flex-direction--row"
+        role="list"
+      >
+        <li className="featured-content-list-item vads-u-background-color--primary-alt-lightest  vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
+          <h3 className="vads-u-font-size--base vads-u-margin--0">
+            File a VA disability claim
+          </h3>
+          <hr
+            aria-hidden="true"
+            role="presentation"
+            className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
+          />
+          <p className="va-nav-linkslist-description">
+            Equal to VA Form 21-526EZ
+          </p>
+          <a
+            className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
+            href="/disability/file-disability-claim-form-21-526ez/"
+            onClick={onFeaturedContentClick('File a VA disability claim')}
+          >
+            <span>
+              Apply online
+              <span className="vads-u-visibility--screen-reader">
+                about filing a VA disability claim
+              </span>
+              <i
+                aria-hidden="true"
+                className="fa fa-chevron-right vads-facility-hub-cta-arrow"
+                role="presentation"
+              />
             </span>
-            <i
-              aria-hidden="true"
-              className="fa fa-chevron-right vads-facility-hub-cta-arrow"
-              role="presentation"
-            />
-          </span>
-        </a>
-      </li>
-      <li className="featured-content-list-item vads-u-background-color--primary-alt-lightest  vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
-        <h3 className="vads-u-font-size--base vads-u-margin--0">
-          Apply for the GI Bill and other education benefits
-        </h3>
-        <hr
-          aria-hidden="true"
-          role="presentation"
-          className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
-        />
-        <p className="va-nav-linkslist-description">
-          Includes VA Forms 22-1990 and 22-1995
-        </p>
-        <a
-          className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
-          href="/education/how-to-apply/"
-          onClick={onFeaturedContentClick(
-            'Apply for the GI Bill and other education benefits',
-          )}
-        >
-          <span>
-            Learn how to apply online
-            <span className="vads-u-visibility--screen-reader">
-              about applying for the GI Bill and other education benefits
+          </a>
+        </li>
+        <li className="featured-content-list-item vads-u-background-color--primary-alt-lightest  vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
+          <h3 className="vads-u-font-size--base vads-u-margin--0">
+            Apply for the GI Bill and other education benefits
+          </h3>
+          <hr
+            aria-hidden="true"
+            role="presentation"
+            className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
+          />
+          <p className="va-nav-linkslist-description">
+            Includes VA Forms 22-1990 and 22-1995
+          </p>
+          <a
+            className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
+            href="/education/how-to-apply/"
+            onClick={onFeaturedContentClick(
+              'Apply for the GI Bill and other education benefits',
+            )}
+          >
+            <span>
+              Learn how to apply online
+              <span className="vads-u-visibility--screen-reader">
+                about applying for the GI Bill and other education benefits
+              </span>
+              <i
+                aria-hidden="true"
+                className="fa fa-chevron-right vads-facility-hub-cta-arrow"
+                role="presentation"
+              />
             </span>
-            <i
-              aria-hidden="true"
-              className="fa fa-chevron-right vads-facility-hub-cta-arrow"
-              role="presentation"
-            />
-          </span>
-        </a>
-      </li>
-      <li className="featured-content-list-item vads-u-background-color--primary-alt-lightest  vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
-        <h3 className="vads-u-font-size--base vads-u-margin--0">
-          Apply for VA health care
-        </h3>
-        <hr
-          aria-hidden="true"
-          role="presentation"
-          className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
-        />
-        <p className="va-nav-linkslist-description">Equal to VA Form 10-10EZ</p>
-        <a
-          className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
-          href="/health-care/apply/application/"
-          onClick={onFeaturedContentClick('Apply for VA health care benefits')}
-        >
-          <span>
-            Apply online
-            <span className="vads-u-visibility--screen-reader">
-              about applying for VA health care benefits
+          </a>
+        </li>
+        <li className="featured-content-list-item vads-u-background-color--primary-alt-lightest  vads-u-padding-y--1p5 vads-u-padding-x--1p5 vads-u-margin-bottom--2 medium-screen:vads-u-margin-bottom--0 vads-u-display--flex vads-u-flex-direction--column">
+          <h3 className="vads-u-font-size--base vads-u-margin--0">
+            Apply for VA health care
+          </h3>
+          <hr
+            aria-hidden="true"
+            role="presentation"
+            className="featured-content-hr vads-u-margin-y--1p5 vads-u-border-color--primary"
+          />
+          <p className="va-nav-linkslist-description">
+            Equal to VA Form 10-10EZ
+          </p>
+          <a
+            className="vads-u-display--block vads-u-padding-top--1 vads-u-text-decoration--none"
+            href="/health-care/apply/application/"
+            onClick={onFeaturedContentClick(
+              'Apply for VA health care benefits',
+            )}
+          >
+            <span>
+              Apply online
+              <span className="vads-u-visibility--screen-reader">
+                about applying for VA health care benefits
+              </span>
+              <i
+                aria-hidden="true"
+                className="fa fa-chevron-right vads-facility-hub-cta-arrow"
+                role="presentation"
+              />
             </span>
-            <i
-              aria-hidden="true"
-              className="fa fa-chevron-right vads-facility-hub-cta-arrow"
-              role="presentation"
-            />
-          </span>
-        </a>
-      </li>
-    </ul>
-  </>
-);
+          </a>
+        </li>
+      </ul>
+    </>
+  );
+};
+
+FindVaForms.propTypes = {
+  showPdfWarningBanner: PropTypes.bool,
+};
+
+const mapStateToProps = state => ({
+  showPdfWarningBanner: toggleValues(state)[
+    FEATURE_FLAG_NAMES.pdfWarningBanner
+  ],
+});
+
+export default connect(mapStateToProps)(FindVaForms);

src/applications/find-forms/components/PdfAlert.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+const PdfAlert = () => {
+  const pdfCertWarningId = 'pdf-cert-warning';
+  const pdfCertWarningElement = document.getElementById(pdfCertWarningId);
+  const [
+    pdfCertWarningElementCreated,
+    setPdfCertWarningElementCreated,
+  ] = useState(false);
+
+  useEffect(() => {
+    const domNode = document.createElement('div');
+    domNode.setAttribute('id', pdfCertWarningId);
+
+    const introTextNode = document.getElementsByClassName('va-introtext')[0];
+    const introTextParentNode = introTextNode?.parentNode;
+    if (introTextNode && introTextParentNode) {
+      introTextParentNode.insertBefore(domNode, introTextNode);
+      setPdfCertWarningElementCreated(true);
+    }
+  }, []);
+
+  if (!pdfCertWarningElementCreated || !pdfCertWarningElement) {
+    return <></>;
+  }
+
+  return ReactDOM.createPortal(
+    <va-alert>
+      <h2 slot="headline" className="vads-u-font-size--h3">
+        We’re updating our forms
+      </h2>
+      <p>
+        After January 7, 2023, you won’t be able to use VA forms that have a
+        “last updated” date before March 2022. If you downloaded any of these
+        older VA forms, you may need to download new copies in January.
+      </p>
+    </va-alert>,
+    pdfCertWarningElement,
+  );
+};
+
+export default PdfAlert;

src/applications/find-forms/tests/components/FindVaForms.unit.spec.jsx

@@ -2,12 +2,43 @@
 import React from 'react';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
+import { Provider } from 'react-redux';
 // Relative imports.
 import FindVaForms from '../../components/FindVaForms';
 
+const getData = ({
+  showNod = true,
+  isLoading = false,
+  loggedIn = true,
+} = {}) => ({
+  props: {
+    isLoading,
+    loggedIn,
+  },
+  mockStore: {
+    getState: () => ({
+      featureToggles: {
+        form10182: showNod,
+      },
+      user: {
+        login: {
+          currentlyLoggedIn: loggedIn,
+        },
+      },
+    }),
+    subscribe: () => {},
+    dispatch: () => {},
+  },
+});
+
 describe('Find VA Forms <FindVaForms>', () => {
   it('should render', () => {
-    const tree = shallow(<FindVaForms />);
+    const { mockStore } = getData();
+    const tree = shallow(
+      <Provider store={mockStore}>
+        <FindVaForms />
+      </Provider>,
+    );
 
     expect(tree.find('SearchForm')).to.exist;
     tree.unmount();