qpp-style 2.1.13 → 2.2.0-sm.0

package/components/Header/HeaderMenuItem.jsx

@@ -0,0 +1,239 @@
+import React, { Fragment, useRef, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+import { useWindowWidth, useHeaderState } from "./hooks";
+import HeaderMenuLink from "./HeaderMenuLink";
+import HeaderMenuButton from "./HeaderMenuButton";
+import HeaderMenuSignOutButton from "./HeaderMenuSignOutButton";
+import Accordion from "../Accordion";
+import { Chevron } from "../../lib/Chevron.jsx";
+
+const menuSizes = {
+  1: 315,
+  2: 650,
+  3: 890,
+  4: 1200,
+};
+
+const excludedClickOutClasses = [
+  "menu-dropdown-toggle",
+  "nav-link",
+  "nav-link-li",
+  "dropdown-description",
+  "dropdown-title",
+  "dropdown-title-chevron-container",
+  "signout-button",
+  "submenu-section",
+  "accordion",
+  "accordion-title",
+  "accordion-left-title",
+  "header-menu-btn",
+  "btn-navigation-icon",
+];
+
+const HeaderMenuItem = ({
+  handleClick,
+  isMobileMenuExpanded,
+  columns,
+  menuName,
+  rows,
+  name,
+  subtitle,
+  className,
+}) => {
+  const [isSubMenuFullWidth, setSubMenuFullWidth] = useState(false);
+  const [openMobileSubMenu, setOpenMobileSubMenu] = useState("");
+
+  const windowWidth = useWindowWidth();
+  const menuButtonRef = useRef(null);
+  const menuRef = useRef(null);
+  const { RouterLink, handleToggleMenu, currentOpenMenu, closeMenus } =
+    useHeaderState();
+  const numColumns = (columns || []).length;
+
+  const menuIdentifier = menuName || name;
+  const isOpen = menuIdentifier === currentOpenMenu;
+
+  useEffect(() => {
+    const isMobile = windowWidth < 768;
+    if (isOpen) {
+      const shouldSetFullWidth =
+        isMobile ||
+        menuSizes[numColumns] >
+          menuButtonRef.current.getBoundingClientRect().right;
+      setSubMenuFullWidth(shouldSetFullWidth);
+    }
+  }, [windowWidth, isOpen]);
+
+  useEffect(() => {
+    const listener = (event) => {
+      if (
+        !menuRef ||
+        !menuRef.current ||
+        menuRef.current.contains(event.target) ||
+        excludedClickOutClasses.some((className) =>
+          event?.target?.classList.contains(className)
+        )
+      ) {
+        return;
+      }
+      setOpenMobileSubMenu("");
+      closeMenus();
+    };
+    document.addEventListener("mousedown", listener);
+    return () => document.removeEventListener("mousedown", listener);
+  }, [menuRef]);
+
+  useEffect(() => {
+    if (!isMobileMenuExpanded || !isOpen) {
+      setOpenMobileSubMenu("");
+    }
+  }, [isMobileMenuExpanded, isOpen]);
+
+  return (
+    <li
+      key={`header-item-${menuIdentifier}`}
+      className={`header-item-${menuIdentifier}${
+        isSubMenuFullWidth ? " full-width-menu" : ""
+      }${className ? ` ${className}` : ""}`}
+      ref={menuRef}
+    >
+      <button
+        ref={menuButtonRef}
+        className="menu-dropdown-toggle"
+        aria-label={`${name} navigation dropdown`}
+        aria-expanded={isOpen}
+        aria-controls={`nav-section-${menuIdentifier}`}
+        data-toggle="dropdown"
+        onClick={() => handleToggleMenu(menuIdentifier)}
+      >
+        <div className="dropdown-title-chevron-container">
+          <span className="dropdown-title">{name}</span>
+          <div className="chevron-container">
+            <Chevron focusable="false" />
+          </div>
+        </div>
+
+        <span className={`dropdown-description ${isOpen ? "active" : ""}`}>
+          {subtitle}
+        </span>
+      </button>
+      <div
+        className={`nav-section${isOpen ? " open" : ""}`}
+        id={`nav-section-${menuIdentifier}`}
+        hidden={!isOpen}
+        data-columns={numColumns}
+      >
+        {rows.map((columnContent, index) => {
+          return (
+            <ul key={`${menuIdentifier}-${index}`} className="nav-column">
+              {columnContent.map((c, cIndex) => {
+                return (
+                  <Fragment key={`${menuIdentifier}-${index}-${cIndex}`}>
+                    <li className="submenu-section">
+                      {c.heading && (
+                        <h3 className="submenu-heading">{c.heading}</h3>
+                      )}
+                      <ul>
+                        {c.items.map((item) => {
+                          const isSubLink = item.type === "sublink";
+                          const componentsByType = {
+                            button: HeaderMenuButton,
+                            signout: HeaderMenuSignOutButton,
+                            link: HeaderMenuLink,
+                            sublink: HeaderMenuLink,
+                          };
+                          const SubMenuComponent = componentsByType[item.type];
+                          return (
+                            <li
+                              onClick={handleClick}
+                              key={`item-link-${item.name}`}
+                              className={
+                                isSubLink
+                                  ? "nav-link-li sublink"
+                                  : "nav-link-li"
+                              }
+                            >
+                              <SubMenuComponent
+                                href={item.href}
+                                name={item.name}
+                                RouterLink={RouterLink}
+                              />
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </li>
+                    {name === "MIPS" && (
+                      <li
+                        key={`${menuIdentifier}-mobile-${index}-${cIndex}`}
+                        className="submenu-section-mips-mobile"
+                        onClick={() => {
+                          setOpenMobileSubMenu(c.heading);
+                        }}
+                      >
+                        <Accordion
+                          title={c.heading}
+                          isOpen={
+                            isMobileMenuExpanded &&
+                            openMobileSubMenu === c.heading
+                          }
+                        >
+                          <ul>
+                            {c.items.map((item) => {
+                              const isSubLink = item.type === "sublink";
+                              const componentsByType = {
+                                button: HeaderMenuButton,
+                                signout: HeaderMenuSignOutButton,
+                                link: HeaderMenuLink,
+                                sublink: HeaderMenuLink,
+                              };
+                              const SubMenuComponent =
+                                componentsByType[item.type];
+                              return (
+                                <li
+                                  onClick={handleClick}
+                                  key={`item-link-${item.name}`}
+                                  className={isSubLink ? "sublink" : ""}
+                                >
+                                  <SubMenuComponent
+                                    href={item.href}
+                                    name={item.name}
+                                    RouterLink={RouterLink}
+                                  />
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        </Accordion>
+                      </li>
+                    )}
+                  </Fragment>
+                );
+              })}
+            </ul>
+          );
+        })}
+      </div>
+    </li>
+  );
+};
+
+HeaderMenuItem.propTypes = {
+  columns: PropTypes.array,
+  menuName: PropTypes.string,
+  rows: PropTypes.array,
+  name: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  handleClick: PropTypes.func.isRequired,
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
+};
+HeaderMenuItem.defaultProps = {
+  menuName: "",
+  columns: [],
+  rows: [],
+  className: null,
+};
+
+export default HeaderMenuItem;

package/components/Header/HeaderMenuLink.js

@@ -0,0 +1,56 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { submissionsUrl } from "../SideNav/helpers";
+import { useHeaderState } from "./hooks";
+import { setUtagLink } from "./utag-helpers";
+
+// exclude submissions urls
+const isNotExcluded = (href) => !href.includes(submissionsUrl);
+
+const HeaderMenuLink = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink && isNotExcluded(href)) {
+    return (
+      <RouterLink
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink("main navbar", "click", href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+        className="nav-link"
+      >
+        {name}
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      href={href}
+      className="nav-link"
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onKeyDown={(e) => {
+        if (e.key === " " || e.code === "Space") {
+          window.location.href = window.location.origin + href;
+          setUtagLink("main navbar", "keydown", href);
+        }
+      }}
+      onClick={() => {
+        setUtagLink("main navbar", "click", href);
+      }}
+    >
+      {name}
+    </a>
+  );
+};
+
+HeaderMenuLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuLink;

package/components/Header/HeaderMenuSignOutButton.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import { LogoutSession } from "../../session";
+import { setUtagLink } from "./utag-helpers";
+import Modal from "../Modal/index";
+
+const useModal = () => {
+  const [open, setOpen] = useState(false);
+  const openModal = () => setOpen(true);
+  const closeModal = () => setOpen(false);
+  return [open, openModal, closeModal];
+};
+
+const HeaderMenuSignOutButton = ({ name }) => {
+  const [open, openModal, closeModal] = useModal();
+  const showLogoutWarning = () => {
+    LogoutSession(window);
+  };
+  return (
+    <>
+      <button
+        className="signout-button"
+        aria-label="Sign out"
+        onClick={openModal}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+      </button>
+      <Modal
+        useDesignSystem
+        isOpen={open}
+        title="Sign out"
+        onRequestClose={closeModal}
+        primary={{
+          title: "Sign me out now",
+          onClick: () => {
+            showLogoutWarning();
+            setUtagLink("button", "click", "Sign me out now");
+          },
+        }}
+        secondary={{
+          title: "Keep me signed in",
+          onClick: () => {
+            closeModal();
+            setUtagLink("button", "click", "Keep me signed in");
+          },
+        }}
+      >
+        <p>Are you sure you want to sign out?</p>
+      </Modal>
+    </>
+  );
+};
+
+HeaderMenuSignOutButton.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuSignOutButton;

package/components/Header/HeaderMobileButton.js

@@ -0,0 +1,37 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { CloseXIcon } from "../../lib/SvgComponents.jsx";
+
+const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
+  <button
+    className="mobile-menu-btn-new"
+    type="button"
+    data-toggle="collapse"
+    data-target="#nav-mobile"
+    aria-label="Navigation menu"
+    aria-expanded={isMobileMenuExpanded ? "true" : "false"}
+    aria-controls="nav-mobile"
+    onClick={handleClick}
+  >
+    {!isMobileMenuExpanded && (
+      <div className="icon">
+        <span className="icon-bar" />
+        <span className="icon-bar" />
+        <span className="icon-bar" />
+      </div>
+    )}
+    {isMobileMenuExpanded && (
+      <svg className="close-icon" aria-hidden="true">
+        <CloseXIcon />
+      </svg>
+    )}
+    <div className="toggle-text">Menu</div>
+  </button>
+);
+
+HeaderMobileButton.propTypes = {
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
+  handleClick: PropTypes.func.isRequired,
+};
+
+export default HeaderMobileButton;

package/components/Header/HeaderUI.jsx

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import HeaderAccountMenu from "./HeaderAccountMenu.jsx";
+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 = ({
+  handleCancel,
+  includeSkipToSidebar,
+  isDevPre,
+  isLoginEnabled,
+  showCancelButton,
+  skipToContentId,
+  RouterLink,
+  isIESupportPage,
+}) => {
+  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 };
+    });
+  };
+
+  // execute on init render
+  useEffect(() => {
+    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);
+    }
+    getHeaderConfig();
+    return () => {
+      cancelRequest = true;
+    };
+  }, []);
+
+  const content = mapContentToRows(headerContent?.content);
+
+  const displayCancelContent = () => (
+    <HeaderContainer
+      showCancelButton
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <HeaderCancel handleCancel={handleCancel} />
+    </HeaderContainer>
+  );
+
+  const displayDevPreContent = () => (
+    <HeaderContainer
+      isIESupportPage={isIESupportPage}
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+      isDevPre={isDevPre}
+    >
+      <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+        <ul className="navigation-menu">
+          <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
+        </ul>
+      </nav>
+    </HeaderContainer>
+  );
+
+  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>
+      </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 = {
+  handleCancel: PropTypes.func,
+  includeSkipToSidebar: PropTypes.bool,
+  isDevPre: PropTypes.bool,
+  isLoginEnabled: PropTypes.bool,
+  performanceYear: PropTypes.number,
+  showCancelButton: PropTypes.bool,
+  showPhysicianCompareLink: PropTypes.bool,
+  showFacilityBasedPreviewLink: PropTypes.bool,
+  skipToContentId: PropTypes.string,
+  RouterLink: PropTypes.func,
+  isIESupportPage: PropTypes.bool,
+};
+HeaderUI.defaultProps = {
+  handleCancel: Function.prototype,
+  includeSkipToSidebar: false,
+  isDevPre: false,
+  isLoginEnabled: true,
+  performanceYear: 2017,
+  showCancelButton: false,
+  showPhysicianCompareLink: false,
+  showFacilityBasedPreviewLink: false,
+  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.v2+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;