qpp-style 0.0.8 → 0.0.10

package/components/Header/HeaderAccountMenu.jsx

@@ -1,265 +1,94 @@
 import React from 'react';
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
-import SessionDialogUI from '../SessionDialogUI';
-import { LogoutSession } from '../../session';
 import PropTypes from 'prop-types';
-import {
-  performanceFeedbackUrl,
-  physicianCompareUrl,
-  dashboardUrl,
-  manageUrl,
-  submissionsUrl,
-  facilityBasedPreviewUrl,
-} from '../SideNav/helpers';
-
-/**
- * Renders the Account Menu portion of the QPP Header content
- */
+import { useHeaderState } from './hooks';
+import { setUtagLink } from './utag-helpers';
+import SessionDialogUI from '../SessionDialogUI';
+import HeaderMenuItem from './HeaderMenuItem';
 
-const LinksWithAuthorizations = ({
-  hasAuthorizations,
-  hasNonRegistryAuthorizations,
-  isDevPre,
-  feedbackPerformanceYear,
-  showPhysicianCompareLink,
-  showFacilityBasedPreviewLink,
-  performanceYear,
-  fbpPerformanceYear,
-}) => {
-  if (!hasAuthorizations || isDevPre) {
-    return '';
-  }
-  let links = [];
-  links.push(
-    <li key={links.length}>
-      <a
-        className="user-dashboard"
-        href={dashboardUrl}
-        data-track-category="TopNav"
-        data-track-action="click"
-        data-track-label="Eligibility & Reporting"
-      >
-        Eligibility & Reporting
-      </a>
-    </li>
-  );
+const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
+  const { closeMenus, RouterLink, headerContent } = useHeaderState();
+  const { isLoggedIn, firstName, devPreMenuLinks, accountMenuLinks } =
+    headerContent;
 
-  links.push(
-    <li key={links.length}>
-      <a
-        className="submissions-feedback"
-        href={performanceFeedbackUrl(
-          feedbackPerformanceYear || performanceYear
-        )}
-        data-track-category="TopNav"
-        data-track-action="click"
-        data-track-label="Performance Feedback"
-      >
-        Performance Feedback
-      </a>
-    </li>
-  );
+  const isDevPreAndNotAuthenticated = !isLoggedIn && isDevPre;
 
-  // should only display for users that are not registry only users
-  if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
-    links.push(
-      <li key={links.length}>
-        <a
-          className="physician-compare"
-          href={physicianCompareUrl}
-          data-track-category="TopNav"
-          data-track-action="click"
-          data-track-label="Doctors & Clinicians Preview"
-        >
-          Doctors & Clinicians Preview
-        </a>
-      </li>
-    );
+  if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
+    return null;
   }
 
-  if (showFacilityBasedPreviewLink) {
-    links.push(
-      <li key={links.length}>
+  // login link
+  if (!isLoggedIn) {
+    if (RouterLink) {
+      return (
+        <li onClick={handleClick} className="header-item-login login">
+          <RouterLink
+            className="menu-link"
+            to="/login"
+            onClick={() => {
+              closeMenus();
+              setUtagLink('main navbar', 'click', '/login');
+            }}
+            data-track-category="TopNav"
+            data-track-action="click"
+            data-track-label="Sign In"
+          >
+            <div className="nav-title">Sign In</div>
+            <div className="nav-description">
+              Manage Account <br />
+              and Register
+            </div>
+          </RouterLink>
+        </li>
+      );
+    }
+    return (
+      <li className="header-item-login login">
         <a
-          className="submissions-feedback"
-          href={facilityBasedPreviewUrl(fbpPerformanceYear || performanceYear)}
+          className="menu-link"
+          href="/login"
           data-track-category="TopNav"
           data-track-action="click"
-          data-track-label="Facility Based Preview"
+          data-track-label="Sign In"
+          onClick={() => {
+            setUtagLink('main navbar', 'click', '/login');
+          }}
         >
-          Facility Based Preview
+          <div className="nav-title">Sign In</div>
+          <div className="nav-description">
+            Manage Account <br />
+            and Register
+          </div>
         </a>
       </li>
     );
   }
 
-  return links;
-};
-
-const HeaderAccountMenu = ({
-  isDevPre,
-  visibility,
-  performanceYear,
-  showFacilityBasedPreviewLink,
-  showPhysicianCompareLink,
-  handleDropdownClick,
-  dropdownClicked,
-}) => {
-  const cookies = cookie.parse(document.cookie);
-  const hasAuthToken = cookies.hasOwnProperty('qpp_auth_token');
-  let firstName = '';
-  let hasAuthorizations = false;
-  let hasNonRegistryAuthorizations = false;
-
-  if (hasAuthToken) {
-    const { data } = jwtDecode(cookies.qpp_auth_token);
-    firstName = data.firstName;
-  }
-
-  if (cookies.hasOwnProperty('qpp_has_authorizations')) {
-    hasAuthorizations = cookies.qpp_has_authorizations === 'true';
-  }
-
-  if (cookies.hasOwnProperty('qpp_has_non_registry_authorizations')) {
-    hasNonRegistryAuthorizations =
-      cookies.qpp_has_non_registry_authorizations === 'true';
-  }
-
-  const showLogoutWarning = () => {
-    LogoutSession(window);
-  };
-
-  // not authenticated
-  if (!hasAuthToken) {
+  if (isLoggedIn) {
     return (
       <>
-        {!isDevPre && (
-          <li className="login">
-            <a
-              href="/login"
-              data-track-category="TopNav"
-              data-track-action="click"
-              data-track-label="Sign In"
-            >
-              <div className="content-wrapper">
-                <div className="nav-title">Sign In</div>
-                <div className="nav-description">
-                  Manage Account
-                  <span className="lg-menu-break">and Register</span>
-                </div>
-              </div>
-            </a>
-          </li>
-        )}
+        <SessionDialogUI />
+        <HeaderMenuItem
+          hasMenu
+          menuName="Login"
+          name={firstName}
+          subtitle="My Account"
+          className="account-menu-item"
+          columns={isDevPre ? devPreMenuLinks : accountMenuLinks}
+          rows={isDevPre ? devPreMenuLinks : accountMenuLinks}
+        />
       </>
     );
   }
-
-  // authenticated
-  return (
-    <li
-      className={
-        dropdownClicked == 'account'
-          ? `dropdown account open ${visibility}`
-          : `dropdown account ${visibility}`
-      }
-      onClick={(e) => handleDropdownClick(e, 'account')}
-    >
-      <a
-        className="dropdown-toggle"
-        href="#"
-        data-toggle="dropdown"
-        role="button"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >
-        <div className="content-wrapper">
-          <div className="dropdown-title">{firstName}</div>
-          <div className="dropdown-description">
-            My Account
-            <span className="lg-menu-break">&nbsp;</span>
-          </div>
-        </div>
-      </a>
-      <SessionDialogUI />
-      <div className="dropdown-menu single-column">
-        <div className="row">
-          <div className="col-sm-12">
-            <ul>
-              {!isDevPre && (
-                <>
-                  <li>
-                    <a
-                      className="user-submissions"
-                      href={submissionsUrl}
-                      data-track-category="TopNav"
-                      data-track-action="click"
-                      data-track-label="Account Home"
-                    >
-                      Account Home
-                    </a>
-                  </li>
-                  <LinksWithAuthorizations
-                    hasAuthorizations={hasAuthorizations}
-                    isDevPre={isDevPre}
-                    performanceYear={performanceYear}
-                    showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-                    hasNonRegistryAuthorizations={hasNonRegistryAuthorizations}
-                    showPhysicianCompareLink={showPhysicianCompareLink}
-                  />
-                  <li>
-                    <a
-                      className="manage-user-access"
-                      href={manageUrl}
-                      data-track-category="TopNav"
-                      data-track-action="click"
-                      data-track-label="Manage Access"
-                    >
-                      Manage Access
-                    </a>
-                  </li>
-                </>
-              )}
-              <li>
-                <button
-                  className="logout"
-                  onClick={showLogoutWarning}
-                  data-track-category="TopNav"
-                  data-track-action="click"
-                  data-track-label="Sign Out"
-                >
-                  Sign Out
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </li>
-  );
 };
 
 HeaderAccountMenu.propTypes = {
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  performanceYear: PropTypes.number,
-  feedbackPerformanceYear: PropTypes.string,
-  fbpPerformanceYear: PropTypes.string,
-  visibility: PropTypes.string,
+  isLoginEnabled: PropTypes.bool.isRequired,
   isDevPre: PropTypes.bool,
-  handleDropdownClick: PropTypes.func.isRequired,
-  dropdownClicked: PropTypes.string.isRequired,
+  handleClick: PropTypes.func.isRequired,
 };
 
 HeaderAccountMenu.defaultProps = {
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  performanceYear: 2017,
-  feedbackPerformanceYear: null,
-  fbpPerformanceYear: null,
-  visibility: '',
-  isDevPre: PropTypes.bool,
+  isDevPre: false,
 };
 
 export default HeaderAccountMenu;

package/components/Header/HeaderCancel.jsx

@@ -1,21 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// eslint-disable-next-line react/display-name
-const HeaderCancel = (props) => {
+const HeaderCancel = ({ handleCancel }) => {
   return (
-    <li>
-      <div className="nav-cancel-container">
-        <button id="connect-practice-nav-cancel" onClick={props.handleClick}>
-          Cancel
-        </button>
-      </div>
-    </li>
+    <button className="header-cancel" onClick={handleCancel}>
+      Cancel
+    </button>
   );
 };
 
 HeaderCancel.propTypes = {
-  handleClick: PropTypes.func,
+  handleCancel: PropTypes.func,
 };
 
 export default HeaderCancel;

package/components/Header/HeaderContainer.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HeaderLogo from './HeaderLogo';
+import NotificationBanner from '../NotificationBanner';
+import GovBanner from '../GovBanner';
+import { useHeaderState } from './hooks';
+/**
+ * Accessibility enhancement that moves focus to an element for "Skip" links
+ * @param {Object} e - The native JS event
+ * @param {String} id - The HTML ID of the element to be focused
+ */
+function jumpToLink(e, id) {
+  e.preventDefault();
+  document.getElementById(id).focus();
+}
+
+const HeaderContainer = ({
+  children,
+  includeSkipToSidebar,
+  showCancelButton,
+  skipToContentId,
+  isIESupportPage,
+}) => {
+  const { currentOpenMenu } = useHeaderState();
+  const cssCancelBtn = showCancelButton ? 'show-cancel-button' : '';
+  const cssMenuDropdownStatus =
+    currentOpenMenu === ''
+      ? 'header-dropdown--closed'
+      : 'header-dropdown--open';
+
+  return (
+    <>
+      <a
+        className="skip"
+        onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
+        href={`#${skipToContentId || 'mainContent'}`}
+      >
+        Skip to content
+      </a>
+      {includeSkipToSidebar && (
+        <a
+          className="skip"
+          onClick={(e) => jumpToLink(e, 'qppSidebar')}
+          href="#qppSidebar"
+        >
+          Skip to sidebar
+        </a>
+      )}
+      <GovBanner />
+      {!isIESupportPage && <NotificationBanner />}
+      <header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
+        <HeaderLogo />
+        {children}
+      </header>
+    </>
+  );
+};
+
+HeaderContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  includeSkipToSidebar: PropTypes.bool,
+  showCancelButton: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  isIESupportPage: PropTypes.bool,
+};
+HeaderContainer.defaultProps = {
+  includeSkipToSidebar: false,
+  showCancelButton: false,
+  skipToContentId: null,
+  isIESupportPage: false,
+};
+
+export default HeaderContainer;

package/components/Header/HeaderLogo.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { useHeaderState } from './hooks';
+
+const HeaderLogo = () => {
+  const { closeMenus, RouterLink } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="header-logo"
+        to="/"
+        onClick={closeMenus}
+        data-track-category="HeaderNav"
+        data-track-action="OpenQPPHome"
+        data-track-label="Quality Payment Program"
+      >
+        <img
+          className="qpp-logo"
+          src="/images/qpp_logo_rgb_color.png"
+          alt="QPP logo"
+        />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="header-logo"
+      href="/"
+      data-track-category="HeaderNav"
+      data-track-action="OpenQPPHome"
+      data-track-label="Quality Payment Program"
+    >
+      <img
+        className="qpp-logo"
+        src="/images/qpp_logo_rgb_color.png"
+        alt="QPP logo"
+      />
+    </a>
+  );
+};
+
+export default HeaderLogo;

package/components/Header/HeaderMenuButton.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useHeaderState } from './hooks';
+import NavigationButtonIcon from './NavigationButtonIcon';
+import { setUtagLink } from './utag-helpers';
+
+const HeaderMenuButton = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink) {
+    return (
+      <RouterLink
+        className="btn btn-navigation inverse-hover header-menu-btn"
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink('main navbar', 'click', href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+        <NavigationButtonIcon />
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      className="btn btn-navigation inverse-hover header-menu-btn"
+      href={href}
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onClick={() => {
+        setUtagLink('main navbar', 'click', href);
+      }}
+    >
+      {name}
+      <NavigationButtonIcon />
+    </a>
+  );
+};
+
+HeaderMenuButton.propTypes = {
+  href: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuButton;