From b7583d3d97371dd774156f365637f371cedd0833 Mon Sep 17 00:00:00 2001
From: jtmst <josh.troy.mills@gmail.com>
Date: Tue, 6 Dec 2022 10:17:03 -0500
Subject: [PATCH] refactor alert to use react portal

---
 .../find-forms/components/FindVaForms.jsx     | 22 ++--------
 .../find-forms/components/PdfAlert.jsx        | 43 +++++++++++++++++++
 2 files changed, 46 insertions(+), 19 deletions(-)
 create mode 100644 src/applications/find-forms/components/PdfAlert.jsx

diff --git a/src/applications/find-forms/components/FindVaForms.jsx b/src/applications/find-forms/components/FindVaForms.jsx
index 15d3033f4d51..6b98bfa19cca 100644
--- a/src/applications/find-forms/components/FindVaForms.jsx
+++ b/src/applications/find-forms/components/FindVaForms.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-redundant-roles */
 // Node modules.
-import React, { useEffect } from 'react';
+import React from 'react';
 
 // Relative imports.
 import { connect } from 'react-redux';
@@ -11,6 +11,7 @@ import recordEvent from 'platform/monitoring/record-event';
 import PropTypes from 'prop-types';
 import SearchForm from '../containers/SearchForm';
 import SearchResults from '../containers/SearchResults';
+import PdfAlert from './PdfAlert';
 
 const onFeaturedContentClick = header => () => {
   recordEvent({
@@ -20,26 +21,9 @@ const onFeaturedContentClick = header => () => {
 };
 
 export const FindVaForms = ({ showPdfWarningBanner }) => {
-  useEffect(
-    () => {
-      if (showPdfWarningBanner) {
-        const PDFAlertContent = `<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>`;
-
-        document
-          .getElementsByClassName('va-introtext')[0]
-          .insertAdjacentHTML('beforebegin', `${PDFAlertContent}`);
-      }
-    },
-    [showPdfWarningBanner],
-  );
-
   return (
     <>
+      {showPdfWarningBanner && <PdfAlert />}
       <SearchForm />
       <SearchResults />
       <h2>Frequently used VA forms</h2>
diff --git a/src/applications/find-forms/components/PdfAlert.jsx b/src/applications/find-forms/components/PdfAlert.jsx
new file mode 100644
index 000000000000..57380fc720fb
--- /dev/null
+++ b/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;