qpp-style 2.0.1 → 2.0.2-sm.2

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

@@ -0,0 +1,140 @@
+/**
+ * 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];
+};
+
+/**
+ * Check if internal cms role is a Reviewer role
+ * @param {string} cmsInternalRole
+ * @returns {boolean}
+ */
+export const isReviewerRole = (cmsInternalRole) => {
+  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',
+  ];
+  return reviewerRoles.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;
+  const cmsRoles = [
+    'QPP Content Management - Author',
+    'QPP Content Management - Approver',
+    'QPP Content Management - Admin',
+    'QPP Front-end - Author',
+  ];
+  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,4 @@
+import LevelOneContent from './LevelOneContent';
+import LevelTwoContent from './LevelTwoContent';
+
+export { LevelOneContent, LevelTwoContent };

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,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const PracticeDetails = ({
+  practiceName,
+  practiceTin,
+  apmEntityId,
+  vgId,
+  cpcPlusId,
+  pcfId,
+}) => {
+  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 {
+      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,
+  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,276 @@
+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 toggleDrawer = () => {
+    if (!isExpanded && typeof sidebarExpand === 'function') {
+      sidebarExpand();
+      setIsOpen(true);
+      return;
+    }
+
+    if (!isAlwaysOpen && !disabled) {
+      setIsOpen(!isOpen);
+    }
+
+    reRouteHandler();
+  };
+
+  const reRouteHandler = () => {
+    if (url === MANAGE_ACCESS) {
+      return (window.location.href = MANAGE_ACCESS);
+    }
+  };
+
+  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'}>
+      <button
+        onClick={toggleDrawer}
+        {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
+        tabIndex="0"
+        aria-label={label}
+        {...((url !== MANAGE_ACCESS && 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;