qpp-style 9.16.9 → 9.17.0

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

@@ -0,0 +1,79 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import cookie from 'cookie';
+import Dropdown from '../../../Dropdown';
+import {
+  loadRoleOptions,
+  redirectPage,
+  getLocalStorageRoleState,
+  initializeLocalStorageRoleState,
+  updateLocalStorageRoleState,
+} from './utils';
+
+const SelectRole = ({ selectedRole, setSelectedRole }) => {
+  const {
+    qpp_has_authorizations: hasAuthorizations,
+    qpp_cms_internal_authorized: cmsInternalRoleValues,
+    qpp_impersonated_user: isHelpdeskRoleAndImpersonating,
+  } = cookie.parse(document.cookie);
+
+  const ROLE_OPTIONS = loadRoleOptions([
+    hasAuthorizations,
+    cmsInternalRoleValues,
+  ]);
+
+  const handleSelection = (e) => {
+    e.preventDefault();
+    const dropdownValue = e.target.value;
+    const newRoleSelected = ROLE_OPTIONS.filter(
+      (opt) => opt.value === dropdownValue
+    )[0].value;
+    // Update localStorage with the current selected role in state & the new role selected
+    updateLocalStorageRoleState(selectedRole, newRoleSelected);
+    setSelectedRole(newRoleSelected);
+    redirectPage(newRoleSelected);
+  };
+
+  // Set role on init render
+  // below is executed on every page refresh including on side nav link navigation & on role selection
+  useEffect(() => {
+    // Check localstorage & set initial selected role
+    const { selectedRole, previousSelectedRole } = getLocalStorageRoleState();
+    const roleValue = selectedRole || ROLE_OPTIONS[0].value;
+
+    // Set localStorage values if not set
+    initializeLocalStorageRoleState(roleValue);
+
+    // Update state
+    setSelectedRole(roleValue);
+
+    // No previous role set && current role is QPP User in localStorage values indicates
+    // initial render, where a user has NOT used the dropdown to change the user role.
+    // If the above condition is not met, redirect to default page of selected role
+    if (!previousSelectedRole && selectedRole !== 'QPP User') {
+      redirectPage(roleValue);
+    }
+  }, []);
+
+  return (
+    <div className="SelectRole__Container">
+      <p className="SelectRole__Text">You are viewing as a</p>
+      <Dropdown
+        value={selectedRole}
+        name="user-role-selection"
+        ariaLabel="Select User Role"
+        className="qpp-u-width--100 SelectRole__Dropdown"
+        options={ROLE_OPTIONS}
+        onChange={handleSelection}
+        disabled={isHelpdeskRoleAndImpersonating}
+      />
+    </div>
+  );
+};
+
+SelectRole.propTypes = {
+  selectedRole: PropTypes.string,
+  setSelectedRole: PropTypes.func,
+};
+
+export default SelectRole;

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

@@ -0,0 +1,120 @@
+/**
+ * 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 roles has Reviewer role
+ * @param {array} cmsInternalRoles array of values
+ * @returns {boolean}
+ */
+const hasReviewerRole = (cmsInternalRoles) => {
+  if (!cmsInternalRoles) return false;
+  return cmsInternalRoles.some(
+    (name) =>
+      name === 'QPP Self-Nomination' ||
+      name === 'QPP Targeted Review & Exceptions'
+  );
+};
+
+/**
+ * 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');
+};
+
+/**
+ * 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' });
+  }
+  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',
+};
+
+/**
+ * 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 = () => ({
+  selectedRole: localStorage.getItem('selectedRole'),
+  previousSelectedRole: localStorage.getItem('previousSelectedRole'),
+});
+
+/**
+ * Initialize role values in localStorage
+ * @param {string} roleValue selector role value from dropdown
+ * @returns {void}
+ */
+export const initializeLocalStorageRoleState = (roleValue) => {
+  const localStorageValues = getLocalStorageRoleState();
+
+  if (!localStorageValues.selectedRole) {
+    localStorage.setItem('selectedRole', roleValue);
+  }
+  if (!localStorageValues.previousSelectedRole) {
+    localStorage.setItem('previousSelectedRole', '');
+  }
+};
+
+/**
+ * Update role values in localStorage
+ * @param {string} currentRole current/existing user role
+ * @param {string} updatedRole new user role selected from dropdown
+ */
+export const updateLocalStorageRoleState = (currentRole, updatedRole) => {
+  localStorage.setItem('previousSelectedRole', currentRole);
+  localStorage.setItem('selectedRole', updatedRole);
+};

package/components/SideNav/Details/PracticeDetails.jsx

@@ -7,7 +7,7 @@ const PracticeDetails = ({
   apmEntityId,
   vgId,
   cpcPlusId,
-  pcfId
+  pcfId,
 }) => {
   function renderId() {
     if (cpcPlusId) {

package/components/SideNav/Links/NavLinkDrawer.jsx

@@ -216,7 +216,7 @@ const NavLinkDrawer = ({
         <div className={isExpanded ? 'link-body' : 'link-body collapsed'}>
           {renderLeftIcon(leftIcon)}
           <AnimationGroup display={isExpanded}>
-            <span>{label}</span>
+            <span className="sidebar-inline-link-label">{label}</span>
           </AnimationGroup>
         </div>
         {isExpanded && !isAlwaysOpen && (

package/components/SideNav/Links/NavLinkInline.jsx

@@ -8,6 +8,7 @@ const NavLinkInline = ({
   urlExpressionToMatch,
   className,
   icon,
+  rightIcon,
   label,
   isActive,
   showLabel,
@@ -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/UI/SideNavUI.jsx

@@ -91,15 +91,19 @@ const SideNavUI = ({
 
     const hasDarkerBackground = (darkerBackground) => {
       return darkerBackground ? 'hr-smaller-vertical-spacing' : '';
-    }
+    };
 
     const itemsMarkup = (contentItems || []).map((item, index) => {
       const key = `${JSON.stringify(item)}-${index}-${containerRecursionId}`;
       return (
         {
           divider: (
-            <AnimationGroup display={isExpandedState} key={key} darkerBackground={item.darkerBackground}>
-              <hr className={`${hasDarkerBackground(item.darkerBackground)}`}/>
+            <AnimationGroup
+              display={isExpandedState}
+              key={key}
+              darkerBackground={item.darkerBackground}
+            >
+              <hr className={`${hasDarkerBackground(item.darkerBackground)}`} />
             </AnimationGroup>
           ),
           container: getDynamicContent(

package/components/SideNav/helpers.js

@@ -1,3 +1,20 @@
+import cookie from 'cookie';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  FacilityBasedPreviewIcon,
+  HardshipIcon,
+  HelpSupportIcon,
+  ManageUsersIcon,
+  MyApplicationsIcon,
+  MyTestDataIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  StarIcon,
+  TargetIcon,
+  IndividualReporting,
+} from '../../lib/SvgComponents';
+
 const submissionsUrl = '/user/submissions';
 const dashboardUrl = '/user/dashboard';
 const manageUrl = '/user/manage-access';
@@ -36,6 +53,195 @@ const handleNavigation = (e, linkCallbackFunction, label) => {
   });
 };
 
+/**
+ * Load icon by url
+ * @param {string} url
+ * @returns svg icon
+ */
+const getIcon = (url) => {
+  const icons = {
+    [dashboardUrl]: DashboardIcon,
+    [feedbackUrl]: StarIcon,
+    [manageUrl]: ManageUsersIcon,
+    [physicianCompareUrl]: PhysicianCompareIcon,
+    [reportsPortalUrl]: HardshipIcon,
+    [submissionsUrl]: AccountHomeIcon,
+    [facilityBasedPreviewBaseUrl]: FacilityBasedPreviewIcon,
+    '/developers': HelpSupportIcon,
+    '/resources/help-and-support': HelpSupportIcon,
+    '/user/apm-incentive-payments': PaymentIcon,
+    '/user/applications': MyApplicationsIcon,
+    '/user/exception/#/landing': HardshipIcon,
+    '/user/targeted-review/#/landing': TargetIcon,
+    '/user/test-data': MyTestDataIcon,
+    '/user/self-nomination/#/landing': IndividualReporting,
+    '/user/reviewers': AccountHomeIcon,
+    '/reviewer/exception': HardshipIcon,
+    '/reviewer/targeted-review': TargetIcon,
+    '/self-nomination': IndividualReporting,
+  };
+  return icons[url];
+};
+
+/**
+ * Check if Reviewer or Self-Nom role
+ * @param {string} name
+ * @returns {boolean}
+ */
+const isReviewerOrSelfNomRole = (name) =>
+  name === 'QPP Self-Nomination' || name === 'QPP Targeted Review & Exceptions';
+
+/**
+ * Check if user is currently impersonating
+ * @param {string} docCookie document cookie
+ * @returns {boolean}
+ */
+const isImpersonating = (docCookie) => {
+  const parsedCookies = cookie.parse(docCookie);
+  return (
+    parsedCookies.qpp_can_impersonate && parsedCookies.qpp_impersonated_user
+  );
+};
+
+/**
+ * Check if user has multiple roles, used to display Select Role dropdown
+ * @param {string} docCookie document cookie
+ * @returns {boolean}
+ */
+const isMultiRoleUser = (docCookie) => {
+  const { qpp_cms_internal_authorized } = cookie.parse(docCookie);
+  let internalAuthz = [];
+  if (qpp_cms_internal_authorized) {
+    internalAuthz = JSON.parse(qpp_cms_internal_authorized);
+  }
+  // Filter out test internalCms authz
+  const filteredInternalAuthz = internalAuthz.filter((internalAuth) => {
+    return (
+      internalAuth !== 'Test internalCms Resource' &&
+      internalAuth !== 'Test internalCms Resource 2'
+    );
+  });
+  return filteredInternalAuthz.length > 1;
+};
+
+/**
+ * Transform cookie values to permissions object
+ * @param {object} cookies parsed document.cookie values
+ * @returns {object}
+ */
+const transformCookieValues = (cookies) => {
+  const {
+    qpp_can_impersonate,
+    qpp_has_authorizations,
+    user_has_apm_payments,
+    qpp_cms_internal_authorized,
+    qpp_ehr_authorized,
+    qpp_has_non_registry_authorizations,
+  } = cookies;
+  return {
+    canImpersonate: qpp_can_impersonate === 'true',
+    hasAuthorizations: qpp_has_authorizations === 'true',
+    hasApmPayments: user_has_apm_payments === 'true',
+    internalReviewerNames: qpp_cms_internal_authorized
+      ? JSON.parse(qpp_cms_internal_authorized)
+      : [],
+    ehrAuthorized: qpp_ehr_authorized === 'true',
+    hasNonRegistryAuthorizations:
+      qpp_has_non_registry_authorizations === 'true',
+  };
+};
+
+const permissionsByRole = {
+  'QPP User': {
+    canImpersonate: false,
+    hasAuthorizations: true,
+    hasApmPayments: true,
+  },
+  Reviewer: {
+    hasAuthorizations: false,
+    hasApmPaymentss: false,
+  },
+  'Helpdesk Viewer': {
+    hasAuthorizations: false,
+    hasApmPayments: false,
+    hasNonRegistryAuthorizations: false,
+    internalReviewerNames: ['QPP Helpdesk'],
+  },
+  // Helpdesk role && impersonating (use impersonated user authz values)
+  Impersonation: {
+    internalReviewerNames: ['QPP Helpdesk'],
+  },
+};
+
+/**
+ * Return permissions by role
+ * @param {string} selectedRole selected user role
+ * @param {object} permissionValues default permission values from transformed parsed cookie
+ * @returns {object}
+ */
+const loadUserPermissionsByRole = (selectedRole, permissionValues) => {
+  return {
+    ...permissionValues,
+    ...permissionsByRole[selectedRole],
+  };
+};
+
+/**
+ * Helper fn to return user permissions/properties from cookies set on login
+ * @param {string} docCookie cookie values set on login
+ * @param {string} selectedRole string of selected role if user has multiple roles
+ * @returns {object}
+ */
+const loadUserPermissions = (docCookie, selectedRole) => {
+  const parsedCookies = cookie.parse(docCookie);
+  const permissionValues = transformCookieValues(parsedCookies);
+  const impersonating = isImpersonating(docCookie);
+  const role = impersonating ? 'Impersonation' : selectedRole;
+
+  if (role) {
+    return loadUserPermissionsByRole(role, permissionValues);
+  }
+
+  return permissionValues;
+};
+
+/**
+ * Return map of link conditionals based on user cookies for side nav
+ * @param {object} userPermissions user permissions/properties derived from cookies set on login
+ * @returns {object}
+ */
+const getUrlConditionMap = (userPermissions) => {
+  return {
+    [dashboardUrl]: userPermissions.hasAuthorizations,
+    [feedbackUrl]: userPermissions.hasAuthorizations,
+    '/user/apm-incentive-payments': userPermissions.hasApmPayments,
+    [physicianCompareUrl]: userPermissions.hasNonRegistryAuthorizations,
+    [reportsPortalUrl]: userPermissions.hasAuthorizations,
+    [facilityBasedPreviewBaseUrl]: userPermissions.hasAuthorizations,
+    '/user/helpdesk-viewing-tool': userPermissions.canImpersonate,
+    '/reviewer/exception': userPermissions.internalReviewerNames?.includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/reviewer/targeted-review':
+      userPermissions.internalReviewerNames?.includes(
+        'QPP Targeted Review & Exceptions'
+      ),
+    '/self-nomination': userPermissions.internalReviewerNames?.includes(
+      'QPP Self-Nomination'
+    ),
+
+    // dev pre
+    '/user/applications': userPermissions.ehrAuthorized,
+    '/user/test-data': userPermissions.ehrAuthorized,
+  };
+};
+
+const isImpersonationLink = (docCookie, linkLabel) => {
+  if (!isImpersonating(docCookie)) return;
+  const helpdeskLinks = ['Account Home', 'Manage Access', 'Help and Support'];
+  return !helpdeskLinks.includes(linkLabel);
+};
+
 module.exports = {
   submissionsUrl,
   dashboardUrl,
@@ -48,4 +254,11 @@ module.exports = {
   reportsPortalUrl,
   facilityBasedPreviewBaseUrl,
   viewingToolUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  isReviewerOrSelfNomRole,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
 };

package/components/Tabs/Tab.js

@@ -23,4 +23,4 @@ Tab.propTypes = {
   href: PropTypes.string,
 };
 
-export default Tab
+export default Tab;

package/components/Tabs/TabPanel.js

@@ -1,7 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const TabPanel = ({ children, value, id, index, className, disabled }) => {
+export const TabPanel = ({
+  children,
+  value,
+  id,
+  index,
+  className,
+  disabled,
+}) => {
   const classes = ['qpp-c-tabs__panel', className].filter(Boolean).join(' ');
   return (
     <div

package/components/Tabs/index.js

@@ -1,61 +1,69 @@
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import MuiTabs from '@material-ui/core/Tabs'
-import TabPanel from './TabPanel'
-import LinkTab from './Tab'
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import MuiTabs from '@material-ui/core/Tabs';
+import TabPanel from './TabPanel';
+import LinkTab from './Tab';
 
-const isTabPanel = (child) => child?.type === TabPanel
+const isTabPanel = (child) => child?.type === TabPanel;
 
 const getPanelChildren = (children) => {
-  return React.Children.toArray(children).filter(isTabPanel)
+  return React.Children.toArray(children).filter(isTabPanel);
 };
 
-const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
-  const [value, setValue] = useState(defaultSelectedId || selected)
-  
+const Tabs = ({
+  children,
+  onChange,
+  selected,
+  defaultSelectedId,
+  ariaLabel,
+}) => {
+  const [value, setValue] = useState(defaultSelectedId || selected);
+
   useEffect(() => {
     if (selected) {
-      setValue(selected)
+      setValue(selected);
     }
-  }, [selected])
+  }, [selected]);
 
-  if (!children) return null
+  if (!children) return null;
 
   const handleChange = (event, newValue) => {
     if (onChange) {
-      onChange(tabList[newValue]?.id, event)
+      onChange(tabList[newValue]?.id, event);
     }
     if (setValue) {
-      setValue(tabList[newValue]?.id)
+      setValue(tabList[newValue]?.id);
     }
-  }
+  };
 
   const renderChildren = () => {
     return React.Children.map(children, (child, index) => {
       if (isTabPanel(child)) {
-        return React.cloneElement(child, { index, value: tabIndex })
+        return React.cloneElement(child, { index, value: tabIndex });
       }
-      return child
-    })
-  }  
+      return child;
+    });
+  };
+
+  const panels = getPanelChildren(children);
+
+  const tabList = panels.map((panel) => {
+    const { id, tab, tabHref, disabled } = panel?.props || {};
+    return { tab, tabHref, disabled, id };
+  });
 
-  const panels = getPanelChildren(children)
-  
-  const tabList = panels.map(
-    (panel) => {
-      const { id, tab, tabHref, disabled } = panel?.props || {}
-      return { tab, tabHref, disabled, id }
-    },
-  )
+  const foundIndex = tabList.findIndex(({ id }) => id === value);
 
-  const foundIndex = tabList.findIndex(({ id }) => id === value)
-  
-  const tabIndex = foundIndex >= 0 ? foundIndex : 0
+  const tabIndex = foundIndex >= 0 ? foundIndex : 0;
 
   return (
     <>
       <div className="qpp-c-tabs qpp-c-tabs--mui">
-        <MuiTabs value={tabIndex} onChange={handleChange} aria-label={ariaLabel}>
+        <MuiTabs
+          value={tabIndex}
+          onChange={handleChange}
+          aria-label={ariaLabel}
+        >
           {tabList.map(({ tab, tabHref, disabled, id }, index) => (
             <LinkTab
               index={index}
@@ -70,19 +78,16 @@ const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) =>
       </div>
       {renderChildren()}
     </>
-  )
-}
+  );
+};
 
 Tabs.propTypes = {
   ariaLabel: PropTypes.string,
   selected: PropTypes.string,
   defaultSelectedId: PropTypes.string,
   onChange: PropTypes.func,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ])
-}
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+};
 
 Tabs.defaultProps = {
   ariaLabel: 'qpp tabs',
@@ -90,6 +95,6 @@ Tabs.defaultProps = {
   defaultSelectedId: null,
   onChange: null,
   children: null,
-}
+};
 
-export default Tabs
+export default Tabs;

package/components/TextInput/index.js

@@ -105,7 +105,7 @@ TextInput.propTypes = {
   variant: PropTypes.oneOf(['success']),
   parentElement: PropTypes.string,
   label: PropTypes.string,
-  size: PropTypes.oneOf(['big'])
+  size: PropTypes.oneOf(['big']),
 };
 
 TextInput.defaultProps = {

package/components/hooks/useGetConfig.js

@@ -36,6 +36,7 @@ const useGetConfig = ({
           const storageItem = {
             expiration,
           };
+
           if (
             data?.content &&
             storageContent?.content &&