qpp-style 0.0.9 → 0.0.10

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/Details/PracticeDetails.jsx

@@ -7,10 +7,13 @@ const PracticeDetails = ({
   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) {
@@ -36,6 +39,7 @@ PracticeDetails.propTypes = {
   apmEntityId: PropTypes.string,
   vgId: PropTypes.string,
   cpcPlusId: PropTypes.string,
+  pcfId: PropTypes.string,
 };
 
 export default PracticeDetails;

package/components/SideNav/Links/CmsSwitchLink.jsx

@@ -8,7 +8,7 @@ const CmsSwitchLink = ({ linkCallback, url, label }) => {
     <div className="switch-container">
       <a
         href={url}
-        onClick={(e) => handleNavigation(e, linkCallback)}
+        onClick={(e) => handleNavigation(e, linkCallback, label)}
         className="switch-link"
       >
         <div className="button-partition">

package/components/SideNav/Links/NavLinkContainer.jsx

@@ -1,43 +1,38 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-export default class NavLinkContainer extends Component {
-  constructor(props) {
-    super(props);
-    this._toggleActive = this.toggleActive.bind(this);
-    this.state = {
-      activeLink: null,
-    };
-  }
+const NavLinkContainer = ({ listOfLinks, linkActiveFunc }) => {
+  const [activeLink, setActiveLink] = useState(null);
 
-  toggleActive(idx, disabled) {
-    if (disabled || this.props.linkActiveFunc) return;
-    this.setState((state) => ({ activeLink: idx }));
-  }
+  const toggleActive = (idx, disabled) => {
+    if (disabled || linkActiveFunc) return;
+    setActiveLink(idx);
+  };
 
-  render() {
-    const { activeLink } = this.state;
-    const { listOfLinks } = this.props;
-
-    return (
-      <nav>
-        <ul>
-          {listOfLinks &&
-            listOfLinks.map((link, idx) => (
-              <li
-                key={idx.toString()}
-                onClick={() => this._toggleActive(idx, link.props.disabled)}
-              >
-                {React.cloneElement(link, { isActive: activeLink === idx })}
-              </li>
-            ))}
-        </ul>
-      </nav>
-    );
-  }
-}
+  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

@@ -20,8 +20,14 @@ const NavLinkDrawer = ({
   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') {
@@ -33,6 +39,14 @@ const NavLinkDrawer = ({
     if (!isAlwaysOpen && !disabled) {
       setIsOpen(!isOpen);
     }
+
+    reRouteHandler();
+  };
+
+  const reRouteHandler = () => {
+    if (url === MANAGE_ACCESS) {
+      return (window.location.href = MANAGE_ACCESS);
+    }
   };
 
   const isLinkActive = (link, func) => {
@@ -53,6 +67,20 @@ const NavLinkDrawer = ({
     );
   };
 
+  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 },
@@ -60,6 +88,52 @@ const NavLinkDrawer = ({
   );
   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);
@@ -74,10 +148,10 @@ const NavLinkDrawer = ({
   const renderDrawerLinksRecursively = (navLinks, className = '') => {
     return (
       navLinks &&
-      navLinks.map((link) => {
+      navLinks.map((link, index) => {
         if (link.type === 'divider') {
           return (
-            <AnimationGroup display={true}>
+            <AnimationGroup display={true} key={index}>
               <hr />
             </AnimationGroup>
           );
@@ -95,7 +169,7 @@ const NavLinkDrawer = ({
             {link.url ? (
               <a
                 href={link.url}
-                onClick={(e) => handleNavigation(e, linkCallback)}
+                onClick={(e) => handleNavigation(e, linkCallback, link.label)}
                 tabIndex={isOpen ? '0' : '-1'}
                 data-track-category="SidebarNav"
                 data-track-action={`GoTo${
@@ -127,23 +201,22 @@ const NavLinkDrawer = ({
         {...(!isAlwaysOpen ? { 'aria-pressed': isOpen } : {})}
         tabIndex="0"
         aria-label={label}
-        {...(isAlwaysOpen || disabled
+        {...((url !== MANAGE_ACCESS && isAlwaysOpen) || disabled
           ? { disabled: isAlwaysOpen || disabled }
           : {})}
-        className={`${className} ${expandedClass} ${
-          currentPage ? 'currentPage' : ''
-        }`}
+        className={`${className} ${expandedClass} ${highlightTitle(
+          isHighlighted
+        )} ${hasDarkerTitle(darkerBackground)}
+         ${currentPage ? 'currentPage' : ''} ${isLeftBorderHighlightDisabled(
+          leftBorderHighlightDisabled
+        )}
+         ${isLabelSectionHidden(hideLabelSection)}
+         ${isHiddenWhileCollapsed(leftBorderHighlightDisabled, isExpanded)}`}
       >
         <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
-          <svg
-            className={`left-icon${isAlwaysOpen ? ' always-open' : ''}`}
-            aria-hidden="true"
-            focusable="false"
-          >
-            {leftIcon}
-          </svg>
+          {renderLeftIcon(leftIcon)}
           <AnimationGroup display={isExpanded}>
-            <span>{label}</span>
+            <span className="sidebar-inline-link-label">{label}</span>
           </AnimationGroup>
         </div>
         {isExpanded && !isAlwaysOpen && (
@@ -160,11 +233,16 @@ const NavLinkDrawer = ({
         <div
           className={`${currentPage ? 'currentPage' : ''} ${
             isOpen && !disabled ? 'drawer open' : 'drawer'
-          }`}
+          } ${hasDarkerBackground(
+            darkerBackground
+          )} ${hasLargerDrawBottomPadding(largerDrawerBottomPadding)}`}
         >
           <ul aria-hidden={!isOpen}>
             {listOfLinks &&
-              renderDrawerLinksRecursively(listOfLinks, 'parent-link')}
+              renderDrawerLinksRecursively(
+                listOfLinks,
+                `parent-link ${adjustItemSpacing(largerDrawerBottomPadding)}`
+              )}
           </ul>
         </div>
       </AnimationGroup>
@@ -188,6 +266,11 @@ NavLinkDrawer.propTypes = {
   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;

package/components/SideNav/Links/NavLinkInline.jsx

@@ -8,6 +8,7 @@ const NavLinkInline = ({
   urlExpressionToMatch,
   className,
   icon,
+  rightIcon,
   label,
   isActive,
   showLabel,
@@ -59,7 +60,7 @@ const NavLinkInline = ({
     <React.Fragment>
       <a
         href={disabled ? undefined : url}
-        onClick={(e) => handleNavigation(e, linkCallback)}
+        onClick={(e) => handleNavigation(e, linkCallback, label)}
         className={`${className} ${currentPage || isActive ? 'active' : ''} ${
           disabled ? 'disabled' : ''
         }`}
@@ -78,7 +79,10 @@ const NavLinkInline = ({
           {icon}
         </svg>
         <AnimationGroup display={showLabel}>
-          <span tabIndex="-1">{label}</span>
+          <span tabIndex="-1" className="sidebar-inline-link-label">
+            {label}
+            {rightIcon}
+          </span>
         </AnimationGroup>
       </a>
       {showTooltip && (
@@ -95,6 +99,7 @@ NavLinkInline.propTypes = {
   url: PropTypes.string,
   className: PropTypes.string,
   icon: PropTypes.element,
+  rightIcon: PropTypes.element,
   label: PropTypes.string,
   isActive: PropTypes.bool,
   showLabel: PropTypes.bool,

package/components/SideNav/SideNav.md

@@ -4,30 +4,31 @@
 
 When a user succesfully logs into QPP the user will receive the following
 cookies.
-| Cookie | Description |
-|-------------------------------------|-----------------------------------------|
-| qpp_auth_token | auth token |
-| qpp_has_authorizations | user has authorizations |
-| qpp_has_non_registry_authorizations | user has non registry authorizations |
-| user_has_apm_payments | user has at least one APM Payment |
-| qpp_is_dev_pre | user is in Dev Pre environment |
-| qpp_ehr_authorized | user is authorized for at least one EHR |
+
+| Cookie                              | Description                             |
+| ----------------------------------- | --------------------------------------- |
+| qpp_auth_token                      | auth token                              |
+| qpp_has_authorizations              | user has authorizations                 |
+| qpp_has_non_registry_authorizations | user has non registry authorizations    |
+| user_has_apm_payments               | user has at least one APM Payment       |
+| qpp_is_dev_pre                      | user is in Dev Pre environment          |
+| qpp_ehr_authorized                  | user is authorized for at least one EHR |
 
 ## Links for authenticated users
 
-| Link                         | Cookie                                   | Property                          |
-| ---------------------------- | ---------------------------------------- | --------------------------------- |
-| Account Home                 | Always visible                           |                                   |
-| Eligibility & Reporting      | qpp_has_authorizations=true              |                                   |
-| Facility Based Preview       | qpp_has_authorizations=true              | showFacilityBasedPreviewLink=true |
-| Performance Feedback         | qpp_has_authorizations=true              | performanceYear                   |
-| APM Incentive Payments       | user_has_apm_payments=true               | showApmIncentivePaymentLink=true  |
-| Doctors & Clinicians Preview | qpp_has_non_registry_authorizations=true | showPhysicianCompareLink=true     |
-| Exceptions Applications      | Always visible                           |                                   |
-| Targeted Review              |                                          | showTargetedReviewLink            |
-| Reports                      |                                          | showReportsPortal                 |
-| Manage Access                | Always visible                           |                                   |
-| Help and Support             | Always visible                           |                                   |
+| Link                         | Cookie                                   |
+| ---------------------------- | ---------------------------------------- |
+| Account Home                 | Always visible                           |
+| Eligibility & Reporting      | qpp_has_authorizations=true              |
+| Facility Based Preview       | qpp_has_authorizations=true              |
+| Performance Feedback         | qpp_has_authorizations=true              |
+| APM Incentive Payments       | user_has_apm_payments=true               |
+| Doctors & Clinicians Preview | qpp_has_non_registry_authorizations=true |
+| Exceptions Applications      | Always visible                           |
+| Targeted Review              |                                          |
+| Reports                      |                                          |
+| Manage Access                | Always visible                           |
+| Help and Support             | Always visible                           |
 
 ## Manage Access - Registry/QCDR Self-Nomination
 
@@ -41,9 +42,9 @@ Review Claims-based Submission link has been deleted
 
 When the application is in Dev Pre mode the sidenav links are as follows.
 
-| Link            | Cookie                  | Property               |
-| --------------- | ----------------------- | ---------------------- |
-| My Applications | qpp_ehr_authorized=true |                        |
-| My Test Data    | qpp_ehr_authorized=true | showDevPreDfpLink=true |
-| Manage Access   | qpp_is_dev_pre=true     |                        |
-| Developer Tools | qpp_is_dev_pre=true     |                        |
+| Link            | Cookie                  |
+| --------------- | ----------------------- |
+| My Applications | qpp_ehr_authorized=true |
+| My Test Data    | qpp_ehr_authorized=true |
+| Manage Access   | qpp_is_dev_pre=true     |
+| Developer Tools | qpp_is_dev_pre=true     |