qpp-style 2.1.13 → 2.2.0-sm.0

package/components/SideNav/Content/SelectRole/utils.js

@@ -0,0 +1,149 @@
+/**
+ * Extract values from cookies, return parsed values in an array
+ * @param {array} cookies
+ * @returns {array}
+ */
+const extractCookieValues = (cookies) => {
+  const [hasAuthorizations, cmsInternalRoleValues] = cookies;
+  const cmsInternalRoles = cmsInternalRoleValues
+    ? JSON.parse(cmsInternalRoleValues)
+    : null;
+  return [hasAuthorizations, cmsInternalRoles];
+};
+
+const reviewerRoles = [
+  "QPP Self-Nomination",
+  "QPP Targeted Review & Exceptions",
+  "QPP Case Management - PIMMS Reviewer",
+  "QPP Case Management - ACO PAC Reviewer",
+  "QPP Case Management - CMS Reviewer",
+];
+
+const cmsRoles = [
+  "QPP Content Management - Author",
+  "QPP Content Management - Approver",
+  "QPP Content Management - Admin",
+  "QPP Front-end - Author",
+];
+
+/**
+ * Check if internal cms role is a Reviewer role
+ * @param {string} cmsInternalRole
+ * @returns {boolean}
+ */
+export const isReviewerRole = (cmsInternalRole) => {
+  return reviewerRoles.includes(cmsInternalRole);
+};
+
+// Check if internal cms role in a Content Mgr role
+// @param {string} cmsInternalRole
+// @returns {boolean}
+export const isContentMgmtRole = (cmsInternalRole) => {
+  return cmsRoles.includes(cmsInternalRole);
+};
+
+/**
+ * Check if internal cms roles has Reviewer role
+ * @param {array} cmsInternalRoles array of values
+ * @returns {boolean}
+ */
+const hasReviewerRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  return cmsInternalRoles.some(isReviewerRole);
+};
+
+/**
+ * Check if internal cms roles includes Helpdek role
+ * @param {array} cmsInternalRoles array of values
+ * @returns {boolean}
+ */
+const hasHelpdeskRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  return cmsInternalRoles.includes("QPP Helpdesk");
+};
+
+const hasContentMgmtRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  return cmsInternalRoles.some((role) => cmsRoles.includes(role));
+};
+
+/**
+ * Transforms cookie values into optios format for use in role seelction dropdown
+ * @param {array} values extracted & parsed vookie values
+ * @returns {array}
+ */
+const transformCookieValues = (values) => {
+  const optionValues = [];
+  const [hasAuthorizations, cmsInternalRoles] = values;
+
+  if (hasAuthorizations === "true") {
+    optionValues.push({ name: "QPP User", value: "QPP User" });
+  }
+  if (hasReviewerRole(cmsInternalRoles)) {
+    optionValues.push({ name: "Reviewer", value: "Reviewer" });
+  }
+  if (hasHelpdeskRole(cmsInternalRoles)) {
+    optionValues.push({ name: "Helpdesk Viewer", value: "Helpdesk Viewer" });
+  }
+  if (hasContentMgmtRole(cmsInternalRoles)) {
+    optionValues.push({ name: "Content Manager", value: "Content Manager" });
+  }
+  return optionValues;
+};
+
+/**
+ *
+ * @param {array} cookies authz & cms_internal_authz values parsed from cookies
+ * @returns {array} of objects for use in role dropdown
+ */
+export const loadRoleOptions = (cookies) => {
+  const cookieValues = extractCookieValues(cookies);
+  return transformCookieValues(cookieValues);
+};
+
+const defaultPageByRole = {
+  "QPP User": "/user/submissions",
+  "Helpdesk Viewer": "/user/helpdesk-viewing-tool",
+  Reviewer: "/user/reviewers",
+  "Content Manager": "/user/content-management",
+};
+
+/**
+ * Get redirect url/page by role
+ * @param {string} role
+ * @returns {string}
+ */
+export const redirectPage = (role) => {
+  const defaultPage = defaultPageByRole[role];
+  const { pathname } = window.location;
+  if (pathname === defaultPage) return;
+  else window.location.assign(defaultPage);
+};
+
+/**
+ * Get localStorage values related to user role
+ * @returns {object}
+ */
+export const getLocalStorageRoleState = () => ({
+  selectedUserRole: localStorage.getItem("selectedUserRole"),
+});
+
+/**
+ * Initialize role values in localStorage
+ * @param {string} roleValue selector role value from dropdown
+ * @returns {void}
+ */
+export const initializeLocalStorageRoleState = (roleValue) => {
+  const localStorageValues = getLocalStorageRoleState();
+
+  if (!localStorageValues.selectedUserRole) {
+    localStorage.setItem("selectedUserRole", roleValue);
+  }
+};
+
+/**
+ * Update role values in localStorage
+ * @param {string} updatedRole new user role selected from dropdown
+ */
+export const updateLocalStorageRoleState = (updatedRole) =>
+  localStorage.setItem("selectedUserRole", updatedRole);

package/components/SideNav/Content/index.js

@@ -0,0 +1,3 @@
+import LevelOneContent from "./LevelOneContent";
+
+export { LevelOneContent };

package/components/SideNav/Details/IndividualDetails.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const IndividualDetails = ({ individualName, individualNpi }) => {
+  return (
+    <div className="individual-container">
+      <h3 className="individual-name">{individualName}</h3>
+      <p className="individual-npi">NPI: {individualNpi}</p>
+    </div>
+  );
+};
+
+IndividualDetails.propTypes = {
+  individualName: PropTypes.string,
+  individualNpi: PropTypes.string,
+};
+
+export default IndividualDetails;

package/components/SideNav/Details/PracticeDetails.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const PracticeDetails = ({
+  practiceName,
+  practiceTin,
+  apmEntityId,
+  vgId,
+  cpcPlusId,
+  pcfId,
+  subgroupId,
+}) => {
+  function renderId() {
+    if (cpcPlusId) {
+      return <p className="practice-tin">CPC+ ID: {cpcPlusId}</p>;
+    } else if (pcfId) {
+      return <p className="practice-tin">PCF ID: {pcfId}</p>;
+    } else if (apmEntityId) {
+      return <p className="practice-tin">APM Entity ID: {apmEntityId}</p>;
+    } else if (vgId) {
+      return <p className="practice-tin">VG ID: {vgId}</p>;
+    } else if (practiceTin) {
+      return <p className="practice-tin">TIN: {practiceTin}</p>;
+    } else if (subgroupId) {
+      return (
+        <p className="practice-tin subgroup-id">Subgroup ID: {subgroupId}</p>
+      );
+    } else {
+      return;
+    }
+  }
+
+  return (
+    <div className="practice-container">
+      <h2 className="practice-name">{practiceName || "No name on record"}</h2>
+      {renderId()}
+    </div>
+  );
+};
+
+PracticeDetails.propTypes = {
+  practiceName: PropTypes.string,
+  practiceTin: PropTypes.string,
+  subgroupId: PropTypes.string,
+  apmEntityId: PropTypes.string,
+  vgId: PropTypes.string,
+  cpcPlusId: PropTypes.string,
+  pcfId: PropTypes.string,
+};
+
+export default PracticeDetails;

package/components/SideNav/Details/index.js

@@ -0,0 +1,4 @@
+import IndividualDetails from "./IndividualDetails";
+import PracticeDetails from "./PracticeDetails";
+
+export { IndividualDetails, PracticeDetails };

package/components/SideNav/Links/CmsSwitchLink.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { handleNavigation } from "../helpers";
+import { SwitchPractice, ChevronRight } from "../../../lib/SvgComponents.jsx";
+
+const CmsSwitchLink = ({ linkCallback, url, label }) => {
+  return (
+    <div className="switch-container">
+      <a
+        href={url}
+        onClick={(e) => handleNavigation(e, linkCallback, label)}
+        className="switch-link"
+      >
+        <div className="button-partition">
+          <svg className="icon">
+            <SwitchPractice />
+            <title>Switch Practice Icon</title>
+          </svg>
+          <span>{label}</span>
+        </div>
+        <div className="button-partition">
+          <svg
+            className="icon right-icon rotated"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <ChevronRight />
+          </svg>
+        </div>
+      </a>
+    </div>
+  );
+};
+
+CmsSwitchLink.propTypes = {
+  linkCallback: PropTypes.func,
+  url: PropTypes.string,
+  label: PropTypes.string,
+};
+
+export default CmsSwitchLink;

package/components/SideNav/Links/NavItemInline.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+import PropTypes from "prop-types";
+
+const NavItemInline = (props) => {
+  const {
+    url,
+    urlExpressionToMatch,
+    className,
+    icon,
+    label,
+    isActive,
+    showLabel,
+    disabled,
+  } = props;
+
+  const localUrl = urlExpressionToMatch || url;
+  const urlRegExp = new RegExp(`${localUrl}/?$`);
+  const path = window.location.href && window.location.href.split("?")[0];
+  const currentPage = path && path.match(urlRegExp);
+
+  return (
+    <div
+      className={`${className} ${isActive || currentPage ? "active" : ""} ${
+        disabled ? "disabled" : ""
+      }`}
+      aria-label={label}
+    >
+      <svg
+        className={`left-icon ${disabled ? "disabled" : ""}`}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {icon}
+      </svg>
+      <AnimationGroup display={showLabel}>
+        <span tabIndex="-1">{label}</span>
+      </AnimationGroup>
+    </div>
+  );
+};
+
+NavItemInline.propTypes = {
+  urlExpressionToMatch: PropTypes.string,
+  url: PropTypes.string,
+  className: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.string,
+  isActive: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+export default NavItemInline;

package/components/SideNav/Links/NavLinkContainer.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+const NavLinkContainer = ({ listOfLinks, linkActiveFunc }) => {
+  const [activeLink, setActiveLink] = useState(null);
+
+  const toggleActive = (idx, disabled) => {
+    if (disabled || linkActiveFunc) return;
+    setActiveLink(idx);
+  };
+
+  return (
+    <nav>
+      <ul>
+        {(listOfLinks || []).map((link, idx) => (
+          <li
+            key={idx.toString()}
+            onClick={() => toggleActive(idx, link.props.disabled)}
+          >
+            {React.cloneElement(link, { isActive: activeLink === idx })}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+NavLinkContainer.propTypes = {
+  listOfLinks: PropTypes.array,
+  linkActiveFunc: PropTypes.func,
+};
+
+NavLinkContainer.defaultProps = {
+  listOfLinks: null,
+  linkActiveFunc: null,
+};
+
+export default NavLinkContainer;

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -0,0 +1,295 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import { handleNavigation } from "../helpers";
+import AnimationGroup from "../AnimationGroup/AnimationGroup";
+
+const NavLinkDrawer = ({
+  className,
+  disabled,
+  isAlwaysOpen,
+  isExpanded,
+  items,
+  label,
+  leftIcon,
+  linkActiveFunc,
+  linkCallback,
+  listOfLinks,
+  openByDefault,
+  rightIcon,
+  sidebarExpand,
+  staticDrawer,
+  url,
+  isHighlighted,
+  darkerBackground,
+  leftBorderHighlightDisabled,
+  hideLabelSection,
+  largerDrawerBottomPadding,
+}) => {
+  const [isOpen, setIsOpen] = useState(openByDefault);
+  const MANAGE_ACCESS = "/user/manage-access";
+  const ELIGIBILITY_REPORTING = "/user/dashboard";
+  const REGISTRATION = "/user/registration";
+  const SUBMISSION_FEEDBACK = "/user/submissions/feedback";
+
+  const toggleDrawer = () => {
+    if (!isExpanded && typeof sidebarExpand === "function") {
+      sidebarExpand();
+      setIsOpen(true);
+      return;
+    }
+
+    if (!isAlwaysOpen && !disabled) {
+      setIsOpen(!isOpen);
+    }
+
+    reRouteHandler();
+  };
+
+  const reRouteHandler = () => {
+    if (url) {
+      window.location.href = url;
+    }
+  };
+
+  const parentRerouteUrls = [
+    MANAGE_ACCESS,
+    ELIGIBILITY_REPORTING,
+    REGISTRATION,
+    SUBMISSION_FEEDBACK,
+  ];
+
+  const parentReroute = (url) => {
+    if (parentRerouteUrls.includes(url)) {
+      return false;
+    }
+    return true;
+  };
+
+  const isLinkActive = (link, func) => {
+    if (typeof func === "function") {
+      return func(link);
+    }
+    return window.location.href.indexOf(link.url) > 0;
+  };
+
+  const isCurrentPage = (link, linkActiveFunc) => {
+    const targetItems = link.items || link.listOfLinks;
+    if (link.url && isLinkActive(link, linkActiveFunc)) {
+      return true;
+    }
+    return (
+      targetItems &&
+      targetItems.some((item) => isCurrentPage(item, linkActiveFunc))
+    );
+  };
+
+  const buildLeftIconClasses = () => {
+    let leftIcon = `left-icon`;
+
+    if (isAlwaysOpen) {
+      leftIcon += ` always-open`;
+    }
+
+    if (isHighlighted) {
+      leftIcon += " fill-white";
+    }
+
+    return leftIcon;
+  };
+
+  // Classes for the link drawer button
+  const currentPage = isCurrentPage(
+    { items, listOfLinks, url },
+    linkActiveFunc
+  );
+  const expandedClass = currentPage ? "expanded" : "";
+
+  const renderLeftIcon = (leftIcon) => {
+    if (leftIcon) {
+      return (
+        <svg
+          className={`${buildLeftIconClasses()}`}
+          aria-hidden="true"
+          focusable="false"
+        >
+          {leftIcon}
+        </svg>
+      );
+    }
+  };
+
+  const hasDarkerBackground = (darkerBackground) => {
+    return darkerBackground ? "background-highlight" : "";
+  };
+
+  const hasDarkerTitle = (darkerBackground) => {
+    return darkerBackground ? "expanded currentPage" : "";
+  };
+
+  const isLeftBorderHighlightDisabled = (leftBorderHighlightDisabled) => {
+    return leftBorderHighlightDisabled ? "left-border-disabled" : "";
+  };
+
+  const isLabelSectionHidden = (hideLabelSection) => {
+    return hideLabelSection ? "hidden-label-section" : "";
+  };
+
+  const isHiddenWhileCollapsed = (isLeftBorderDisabled, isExpanded) => {
+    return isLeftBorderDisabled && !isExpanded ? "hidden-nav-link-item" : "";
+  };
+
+  const highlightTitle = (isHighlighted) => {
+    return isHighlighted && isExpanded ? "highlight" : "";
+  };
+
+  const hasLargerDrawBottomPadding = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? "larger-drawer-bottom-padding" : "";
+  };
+
+  const adjustItemSpacing = (largerDrawerBottomPadding) => {
+    return largerDrawerBottomPadding ? "larger-item-spacing" : "";
+  };
+
+  useEffect(() => {
+    if (disabled) {
+      setIsOpen(false);
+    }
+    if (isAlwaysOpen) {
+      setIsOpen(isAlwaysOpen);
+    }
+  }, []);
+
+  // Render the links recursively.  This will theoretically allow for an infinite number of nested link items.
+  // className will either be empty, parent-link - top most node, or child-link.
+  const renderDrawerLinksRecursively = (navLinks, className = "") => {
+    return (
+      navLinks &&
+      navLinks.map((link, index) => {
+        if (link.type === "divider") {
+          return (
+            <AnimationGroup display={true} key={index}>
+              <hr />
+            </AnimationGroup>
+          );
+        }
+
+        return (
+          <li
+            key={link.label}
+            className={
+              isLinkActive(link, linkActiveFunc)
+                ? `active-link ${className}`
+                : className
+            }
+          >
+            {link.url ? (
+              <a
+                href={link.url}
+                onClick={(e) => handleNavigation(e, linkCallback, link.label)}
+                tabIndex={isOpen ? "0" : "-1"}
+                data-track-category="SidebarNav"
+                data-track-action={`GoTo${
+                  link.label ? link.label.split(" ").join("") : ""
+                }`}
+                data-track-label={link.label}
+                target="_self"
+              >
+                {link.label}
+              </a>
+            ) : (
+              <div>{link.label}</div>
+            )}
+            {link.items && link.items.length > 0 && (
+              <ul aria-hidden={!isOpen}>
+                {renderDrawerLinksRecursively(link.items, "child-link")}
+              </ul>
+            )}
+          </li>
+        );
+      })
+    );
+  };
+
+  return (
+    <div className={staticDrawer ? "static-drawer link-drawer" : "link-drawer"}>
+      {label && (
+        <button
+          onClick={toggleDrawer}
+          {...(!isAlwaysOpen ? { "aria-pressed": isOpen } : {})}
+          tabIndex="0"
+          aria-label={label}
+          {...((parentReroute(url) && isAlwaysOpen) || disabled
+            ? { disabled: isAlwaysOpen || disabled }
+            : {})}
+          className={`${className} ${expandedClass} ${highlightTitle(
+            isHighlighted
+          )} ${hasDarkerTitle(darkerBackground)}
+          ${currentPage ? "currentPage" : ""} ${isLeftBorderHighlightDisabled(
+            leftBorderHighlightDisabled
+          )}
+          ${isLabelSectionHidden(hideLabelSection)}
+          ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
+        >
+          <div className={isExpanded ? "link-body" : "link-body collapsed"}>
+            {renderLeftIcon(leftIcon)}
+            <AnimationGroup display={isExpanded}>
+              <span className="sidebar-inline-link-label">{label}</span>
+            </AnimationGroup>
+          </div>
+          {isExpanded && !isAlwaysOpen && (
+            <svg
+              className={`${isOpen ? "right-icon rotated" : "right-icon"}`}
+              focusable="false"
+              aria-hidden="true"
+            >
+              {rightIcon}
+            </svg>
+          )}
+        </button>
+      )}
+      <AnimationGroup display={isExpanded}>
+        <div
+          className={`${currentPage ? "currentPage" : ""} ${
+            isOpen && !disabled ? "drawer open" : "drawer"
+          } ${hasDarkerBackground(
+            darkerBackground
+          )} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
+        >
+          <ul aria-hidden={!isOpen}>
+            {listOfLinks &&
+              renderDrawerLinksRecursively(
+                listOfLinks,
+                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`
+              )}
+          </ul>
+        </div>
+      </AnimationGroup>
+    </div>
+  );
+};
+
+NavLinkDrawer.propTypes = {
+  isExpanded: PropTypes.bool,
+  isAlwaysOpen: PropTypes.bool,
+  openByDefault: PropTypes.bool,
+  className: PropTypes.string,
+  rightIcon: PropTypes.element,
+  leftIcon: PropTypes.element,
+  label: PropTypes.string,
+  linkActiveFunc: PropTypes.func,
+  linkCallback: PropTypes.func,
+  listOfLinks: PropTypes.array,
+  disabled: PropTypes.bool,
+  sidebarExpand: PropTypes.func,
+  staticDrawer: PropTypes.bool,
+  items: PropTypes.object,
+  url: PropTypes.string,
+  isHighlighted: PropTypes.bool,
+  darkerBackground: PropTypes.bool,
+  leftBorderHighlightDisabled: PropTypes.bool,
+  hideLabelSection: PropTypes.bool,
+  largerDrawerBottomPadding: PropTypes.bool,
+};
+
+export default NavLinkDrawer;