qpp-style 0.0.8 → 0.0.10

package/components/Header/HeaderUI.jsx

@@ -1,398 +1,167 @@
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-
-import HeaderCancel from './HeaderCancel.jsx';
+import axios from 'axios';
 import HeaderAccountMenu from './HeaderAccountMenu.jsx';
-import NotificationBannerUI from '../NotificationBanner/NotificationBannerUI';
-import NavigationButtonIcon from './NavigationButtonIcon';
-
-import defaultConfig from './default-content';
-
-const menuSizes = {
-  ['single-column']: 315,
-  ['double-column']: 650,
-  ['triple-column']: 890,
-  ['quad-column']: 1200,
-};
-
-function useWindowWidth() {
-  const [windowSize, setWindowSize] = useState({
-    width: undefined,
-  });
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-      });
-    }
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return windowSize;
-}
-
-function getDropdownColClass(colNum, fullWidthMenu) {
-  let str = 'dropdown-menu';
-  if (colNum === 12) {
-    str = str.concat(' single-column');
-  } else if (colNum === 6) {
-    str = str.concat(' double-column');
-  } else if (colNum === 4) {
-    str = str.concat(' triple-column');
-  } else if (colNum === 3) {
-    str = str.concat(' quad-column');
-  }
-  if (fullWidthMenu) {
-    str = str.concat(' full-width-menu');
-  }
-  return str;
-}
-
-function getHeaderSpaceClass(colIndex, itemCatIndex) {
-  if (colIndex > 0 && itemCatIndex === 0) {
-    return 'dropdown-header dropdown-header-space-mobile';
-  }
-  if (itemCatIndex !== 0) {
-    return 'dropdown-header dropdown-header-space';
-  }
-  return 'dropdown-header';
-}
+import HeaderCancel from './HeaderCancel.jsx';
+import HeaderContainer from './HeaderContainer';
+import HeaderMenuItem from './HeaderMenuItem';
+import HeaderMobileButton from './HeaderMobileButton';
+import ImpersonatorBanner from './ImpersonatorBanner';
+import HelpIcon from './HelpIcon';
+import { HeaderStateProvider } from './hooks';
+import defaultContent from './default-content.json';
 
 const HeaderUI = ({
-  content,
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
   handleCancel,
   includeSkipToSidebar,
   isDevPre,
   isLoginEnabled,
-  performanceYear,
   showCancelButton,
-  showFacilityBasedPreviewLink,
-  showPhysicianCompareLink,
   skipToContentId,
+  RouterLink,
+  isIESupportPage,
 }) => {
-  const [dropdownClicked, setDropdownClicked] = useState('');
-  const [mobileExpanded, setMobileExpanded] = useState(false);
-  const [fullWidthMenu, setFullWidthMenu] = useState(false);
-  const windowWidth = useWindowWidth();
-
-  const handleDropdownClick = (e, name) => {
-    if (!e.target.href) {
-      e.preventDefault();
-    }
-
-    if (name === dropdownClicked) {
-      setDropdownClicked('');
-    } else {
-      setDropdownClicked(name);
-      document.addEventListener('click', function (e) {
-        const link = e.target.closest('a');
-        const isClickingMenuItem =
-          link && link.classList.contains('dropdown-toggle');
-        if (!isClickingMenuItem) {
-          setDropdownClicked('');
-        }
-      });
-    }
+  const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
+  const [headerContent, setHeaderContent] = useState({});
+
+  const mapContentToRows = (config) => {
+    // Append transposed array to content
+    return config?.map((section) => {
+      // Only header items with multiple columns need to be transposed
+      // Single column menus' tab order will remain the same
+      if (section.columns?.length > 1) {
+        const { columns } = section;
+        return {
+          ...section,
+          rows: columns[0].map((_, colIndex) =>
+            columns.map((row) => row[colIndex])
+          ),
+        };
+      }
+      return { ...section, rows: section.columns };
+    });
   };
 
-  /**
-   * 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();
-  }
-
+  // execute on init render
   useEffect(() => {
-    const openMenuButton = document.querySelector('.dropdown.open');
-    if (openMenuButton) {
-      const menuColumns = openMenuButton.querySelector('.dropdown-menu')
-        .classList[1];
-      if (
-        menuSizes[menuColumns] > openMenuButton.getBoundingClientRect().right
-      ) {
-        setFullWidthMenu(true);
-      } else {
-        setFullWidthMenu(false);
+    let cancelRequest = false;
+    const { origin } = window.location;
+    let navMenuItems;
+    async function getHeaderConfig() {
+      try {
+        const { data } = await axios.get(`${origin}/config/header`);
+        navMenuItems = data.data;
+      } catch (error) {
+        navMenuItems = { content: defaultContent };
       }
+      if (!cancelRequest) setHeaderContent(navMenuItems);
     }
-  }, [dropdownClicked, windowWidth]);
+    getHeaderConfig();
+    return () => {
+      cancelRequest = true;
+    };
+  }, []);
 
-  return (
-    <div>
-      <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>
-      )}
-      <header id="top">
-        <NotificationBannerUI fromStorage={true} name="header-notification" />
-        <nav className="navbar navbar-default">
-          <div className="navbar-header">
-            <div className="header-mobile-brand">
-              <a
-                className="header-brand"
-                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>
-              {showCancelButton && (
-                <ul className="nav navbar-nav navbar-right mobile-cancel">
-                  <HeaderCancel handleClick={handleCancel} />
-                </ul>
-              )}
-              {!isDevPre && !showCancelButton && (
-                <a
-                  className="help"
-                  href="tel:1-866-288-8292"
-                  data-track-category="MainContent"
-                  data-track-action="CallQPPServiceCenter"
-                  data-track-label="QPP Service Center Phone"
-                >
-                  <div className="help-icon" />
-                  <span>Help</span>
-                </a>
-              )}
-            </div>
-            {!showCancelButton && (
-              <button
-                className={
-                  mobileExpanded
-                    ? 'header-mobile-btn navbar-toggle'
-                    : 'header-mobile-btn navbar-toggle collapsed'
-                }
-                type="button"
-                data-toggle="collapse"
-                data-target="#nav-mobile"
-                aria-expanded={mobileExpanded ? 'true' : 'false'}
-                aria-controls="nav-mobile"
-                onClick={() => setMobileExpanded(!mobileExpanded)}
-              >
-                <div className="icon">
-                  <span className="icon-bar" />
-                  <span className="icon-bar" />
-                  <span className="icon-bar" />
-                </div>
-                <div className="toggle-text">Menu</div>
-              </button>
-            )}
-          </div>
-          <div
-            className={
-              mobileExpanded
-                ? 'navbar-collapse collapse in'
-                : 'navbar-collapse collapse'
-            }
-            id="nav-mobile"
-            aria-expanded={mobileExpanded ? 'true' : 'false'}
-          >
-            <ul className="nav navbar-nav navbar-right">
-              {showCancelButton && <HeaderCancel handleClick={handleCancel} />}
-              {content.map((header) => {
-                const { name, subtitle, columns } = header;
+  const content = mapContentToRows(headerContent?.content);
 
-                const hasMenu = columns && columns.length > 0;
+  const displayCancelContent = () => (
+    <HeaderContainer
+      showCancelButton
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <HeaderCancel handleCancel={handleCancel} />
+    </HeaderContainer>
+  );
 
-                let headerItemProps = {
-                  href: header.href,
-                  ['data-track-action']: 'click',
-                  ['data-track-category']: 'TopNav',
-                  ['data-track-label']: name,
-                  className: 'nav-btn',
-                };
+  const displayDevPreContent = () => (
+    <HeaderContainer
+      isIESupportPage={isIESupportPage}
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+        <ul className="navigation-menu">
+          <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
+        </ul>
+      </nav>
+    </HeaderContainer>
+  );
 
-                if (hasMenu) {
-                  headerItemProps = {
-                    className: 'dropdown-toggle',
-                    href: '#',
-                    ['data-toggle']: 'dropdown',
-                    role: 'button',
-                    ['aria-haspopup']: 'true',
-                    ['aria-expanded']: 'false',
-                  };
-                }
-                if (!isDevPre && !showCancelButton) {
-                  const gridCol = 12 / (columns || []).length;
-                  return (
-                    <li
-                      className={
-                        hasMenu && dropdownClicked == name
-                          ? `dropdown open ${
-                              fullWidthMenu ? 'full-width-menu' : ''
-                            }`
-                          : ''
-                      }
-                      key={`header-item-${name}`}
-                      onClick={(e) => handleDropdownClick(e, name)}
-                    >
-                      <a {...headerItemProps}>
-                        <div className="content-wrapper">
-                          <div
-                            className={`${hasMenu ? 'dropdown' : 'nav'}-title`}
-                          >
-                            {name}
-                          </div>
-                          <div
-                            className={`${
-                              hasMenu ? 'dropdown' : 'nav'
-                            }-description`}
-                          >
-                            {subtitle}
-                          </div>
-                        </div>
-                      </a>
-                      {columns && columns.length > 0 && (
-                        <div
-                          className={getDropdownColClass(
-                            gridCol,
-                            fullWidthMenu
-                          )}
-                        >
-                          <div className="row">
-                            {columns.map((col, index) => {
-                              return (
-                                <Fragment key={`${name}-${index}-column`}>
-                                  <div className={`col-sm-${gridCol}`}>
-                                    <ul>
-                                      {col.map((itemCategory, itemCatIndex) => {
-                                        return (
-                                          <Fragment
-                                            key={`${name}-${index}-item-category-${itemCatIndex}`}
-                                          >
-                                            {itemCategory.heading && (
-                                              <li
-                                                className={getHeaderSpaceClass(
-                                                  index,
-                                                  itemCatIndex
-                                                )}
-                                              >
-                                                {itemCategory.heading}
-                                              </li>
-                                            )}
-                                            {itemCategory.items.map((item) => {
-                                              if (item.type === 'button') {
-                                                return (
-                                                  <a
-                                                    key={`item-link-${item.name}`}
-                                                    className="btn btn-navigation inverse-hover"
-                                                    href={item.href}
-                                                    data-track-category="TopNav"
-                                                    data-track-action="click"
-                                                    data-track-label={item.name}
-                                                  >
-                                                    {item.name}
-                                                    <NavigationButtonIcon />
-                                                  </a>
-                                                );
-                                              }
-                                              return (
-                                                <li
-                                                  key={`item-link-${item.name}`}
-                                                  className={
-                                                    item.type === 'sublink'
-                                                      ? 'reporting-list-item'
-                                                      : ''
-                                                  }
-                                                >
-                                                  <a
-                                                    href={item.href}
-                                                    data-track-category="TopNav"
-                                                    data-track-action="click"
-                                                    data-track-label={item.name}
-                                                  >
-                                                    {item.name}
-                                                  </a>
-                                                </li>
-                                              );
-                                            })}
-                                          </Fragment>
-                                        );
-                                      })}
-                                    </ul>
-                                  </div>
-                                </Fragment>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      )}
-                    </li>
-                  );
-                }
-                return null;
-              })}
-              {isLoginEnabled && (
-                <HeaderAccountMenu
-                  visibility={showCancelButton ? 'hide' : ''}
-                  showPhysicianCompareLink={showPhysicianCompareLink}
-                  showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-                  performanceYear={performanceYear}
-                  feedbackPerformanceYear={feedbackPerformanceYear}
-                  fbpPerformanceYear={fbpPerformanceYear}
-                  isDevPre={isDevPre}
-                  handleDropdownClick={handleDropdownClick}
-                  dropdownClicked={dropdownClicked}
-                />
-              )}
-            </ul>
-          </div>
+  const displayHeaderContent = () => (
+    <>
+      <HeaderContainer
+        isIESupportPage={isIESupportPage}
+        skipToContentId={skipToContentId}
+        includeSkipToSidebar={includeSkipToSidebar}
+      >
+        <HelpIcon />
+        <HeaderMobileButton
+          handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
+          isMobileMenuExpanded={isMobileMenuExpanded}
+        />
+        <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+          <ul className="navigation-menu navigation-new-style">
+            {content.map((header) => (
+              <HeaderMenuItem
+                handleClick={() => {
+                  setIsMobileMenuExpanded(!isMobileMenuExpanded);
+                }}
+                isMobileMenuExpanded={isMobileMenuExpanded}
+                key={header.name}
+                {...header}
+              />
+            ))}
+            <HeaderAccountMenu
+              handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
+              isLoginEnabled={isLoginEnabled}
+            />
+          </ul>
         </nav>
-      </header>
-    </div>
+      </HeaderContainer>
+      <ImpersonatorBanner />
+    </>
+  );
+
+  const displayContent = () => {
+    if (showCancelButton) return displayCancelContent();
+    if (isDevPre) return displayDevPreContent();
+    if (content?.length) return displayHeaderContent();
+    return null;
+  };
+
+  return (
+    <HeaderStateProvider RouterLink={RouterLink} headerContent={headerContent}>
+      {displayContent()}
+    </HeaderStateProvider>
   );
 };
 
 HeaderUI.propTypes = {
-  isLoginEnabled: PropTypes.bool,
-  skipToContentId: PropTypes.string,
+  handleCancel: PropTypes.func,
   includeSkipToSidebar: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
+  isDevPre: PropTypes.bool,
+  isLoginEnabled: PropTypes.bool,
+  performanceYear: PropTypes.number,
   showCancelButton: PropTypes.bool,
-  handleCancel: PropTypes.func,
   showPhysicianCompareLink: PropTypes.bool,
-  performanceYear: PropTypes.number,
-  feedbackPerformanceYear: PropTypes.string,
-  fbpPerformanceYear: PropTypes.string,
-  isDevPre: PropTypes.bool,
-  content: PropTypes.arrayOf(PropTypes.shape()),
+  showFacilityBasedPreviewLink: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  RouterLink: PropTypes.func,
+  isIESupportPage: PropTypes.bool,
 };
-
 HeaderUI.defaultProps = {
-  isLoginEnabled: false,
-  skipToContentId: null,
+  handleCancel: Function.prototype,
   includeSkipToSidebar: false,
+  isDevPre: false,
+  isLoginEnabled: true,
+  performanceYear: 2017,
   showCancelButton: false,
-  handleCancel: null,
   showPhysicianCompareLink: false,
   showFacilityBasedPreviewLink: false,
-  performanceYear: 2017,
-  feedbackPerformanceYear: null,
-  fbpPerformanceYear: null,
-  isDevPre: false,
-  content: defaultConfig,
+  skipToContentId: null,
+  RouterLink: null,
+  isIESupportPage: false,
 };
 
 export default HeaderUI;

package/components/Header/HelpIcon.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const HelpIcon = () => (
+  <a
+    className="header-help"
+    href="tel:1-866-288-8292"
+    data-track-category="MainContent"
+    data-track-action="CallQPPServiceCenter"
+    data-track-label="QPP Service Center Phone"
+  >
+    <svg viewBox="0 0 28 28" className="header-help-icon">
+      <path
+        d="M23.9,5.9c0-0.6-0.2-1.1-0.6-1.5c-2.5-2.5-5.7-3.8-9.2-3.8S7.2,1.9,4.8,4.4c-0.4,0.4-0.6,1-0.6,1.5
+        c0,0.4,0.1,0.8,0.3,1.1c-1.3,1.9-2,4.1-2,6.6v2.9c0,2.1,1.1,4,2.9,5.1c0,1.2,1,2.1,2.2,2.1c1.2,0,2.2-1,2.2-2.2v-6.5
+        c0-1.2-1-2.2-2.2-2.2c-1.1,0-2,0.8-2.1,1.8H3.8v-1.1c0-2.1,0.6-4,1.7-5.6C5.8,8.1,6,8.1,6.3,8.1c0.6,0,1.1-0.2,1.5-0.6
+        c1.6-1.6,3.8-2.5,6.2-2.5s4.5,0.9,6.2,2.5c0.4,0.4,1,0.6,1.5,0.6c0.3,0,0.5,0,0.7-0.1c1.1,1.6,1.7,3.6,1.7,5.6v1.1h-1.5
+        c-0.2-1-1.1-1.8-2.1-1.8c-1.2,0-2.2,1-2.2,2.2v6.5c0,1.2,1,2.2,2.2,2.2c1.2,0,2.1-0.9,2.2-2.1c0.5-0.3,1-0.7,1.4-1.1
+        c-0.1,1.2-0.4,2.4-0.9,3.5c-0.1,0.3-0.4,0.4-0.7,0.4h-4.3c-0.3-0.8-1.1-1.5-2-1.5h-1.5c-1.2,0-2.2,1-2.2,2.2s1,2.2,2.2,2.2h1.5
+        c0.9,0,1.7-0.6,2-1.5h4.3c0.9,0,1.7-0.5,2-1.3c0.7-1.8,1.1-3.6,1.1-5.5v-5.5c0-2.4-0.8-4.7-2-6.6C23.8,6.7,23.9,6.3,23.9,5.9z
+        M8.2,15.1v6.5c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-6.5c0-0.4,0.3-0.7,0.7-0.7C7.9,14.4,8.2,14.7,8.2,15.1z M5.3,19.9
+        c-0.9-0.8-1.5-2-1.5-3.3v-0.4h1.5V19.9z M16.9,25.2c0,0.4-0.3,0.7-0.7,0.7h-1.5c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7h1.5
+        C16.6,24.5,16.9,24.8,16.9,25.2z M19.8,21.6v-6.5c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7v6.5c0,0.4-0.3,0.7-0.7,0.7
+        S19.8,22,19.8,21.6z M22.7,16.2h1.5v0.4c0,1.3-0.5,2.5-1.5,3.3V16.2z M21.2,6.5c-1.9-1.9-4.5-3-7.2-3s-5.3,1.1-7.2,3
+        c-0.3,0.3-0.8,0.3-1,0C5.7,6.3,5.6,6.1,5.6,5.9s0.1-0.4,0.2-0.5C8,3.2,10.9,2,14,2s6,1.2,8.2,3.4l0,0c0.1,0.1,0.2,0.3,0.2,0.5
+        s-0.1,0.4-0.2,0.5C21.9,6.7,21.5,6.7,21.2,6.5z"
+      />
+    </svg>
+    <span>Help</span>
+  </a>
+);
+
+export default HelpIcon;

package/components/Header/ImpersonatorBanner.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import cookie from 'cookie';
+import axios from 'axios';
+import { CloseIcon } from '../../lib/SvgComponents';
+import { TextButton } from '../Button';
+import {
+  deleteImpersonatedUser,
+  revertQppHasAuthsCookie,
+  revertApmPaymentCookie,
+} from '../../session/logout';
+import { viewingToolUrl } from '../SideNav/helpers';
+
+const getViewType = (viewType) =>
+  ({
+    username: 'HARP ID',
+    npi: 'NPI',
+    tin: 'TIN',
+    apm_id: 'APM Entity',
+    cms_id: 'Registry',
+    vg_id: 'Virtual Group',
+  }[viewType]);
+
+const ImpersonatorBanner = () => {
+  const {
+    qpp_auth_token: token = null,
+    qpp_impersonated_user: user = null,
+    qpp_impersonated_type: viewType = null,
+  } = cookie.parse(document.cookie);
+
+  const className = [
+    'qpp-u-display--flex',
+    'qpp-u-justify-content--between',
+    'qpp-u-fill--gold-20',
+    'qpp-u-padding-x--40',
+    'qpp-u-padding-y--24',
+    'qpp-u-font-size--14',
+    'qpp-u-color--gray-80',
+  ].join(' ');
+
+  const onClick = () => {
+    const fn = () => {
+      deleteImpersonatedUser({
+        qpp_impersonated_user: user,
+        qpp_impersonated_type: viewType,
+      });
+
+      // Set user_has_apm_payments cookie back to impersonator's value
+      revertApmPaymentCookie();
+
+      // Set qpp_has_authorizations cookie back to impersonator's value
+      revertQppHasAuthsCookie();
+      window.location.href = viewingToolUrl;
+    };
+    return axios
+      .delete('/api/auth/helpdesk/view', {
+        headers: {
+          Accept: 'application/vnd.qpp.cms.gov.v1+json',
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then(fn, fn);
+  };
+
+  return (
+    token &&
+    user && (
+      <div className={className}>
+        <div>
+          VIEW ONLY | You are currently viewing {getViewType(viewType)}:{' '}
+          <strong>{user}</strong>
+        </div>
+        <TextButton onClick={onClick} className="qpp-u-color--gray-80">
+          Exit View Mode
+          <CloseIcon />
+        </TextButton>
+      </div>
+    )
+  );
+};
+
+export default ImpersonatorBanner;