qpp-style 0.0.9 → 0.0.10

package/components/SideNav/Content/LevelOneContent.jsx

@@ -1,292 +1,184 @@
-import React from 'react';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import cookie from 'cookie';
 import jwtDecode from 'jwt-decode';
+import { EyeIcon } from '../../../lib/SvgComponents';
 import { NavLinkContainer, NavLinkInline, NavLinkDrawer } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
-import * as SVG from '../../../lib/SvgComponents';
+import defaultContent from '../UI/default-content';
 import {
-  physicianCompareUrl,
-  facilityBasedPreviewUrl,
-  feedbackUrl,
-  reportsPortalUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
+  loadSideNavContent,
 } from '../helpers';
-import PropTypes from 'prop-types';
+import SelectRole from './SelectRole';
 
 const LevelOneContent = ({
   isExpanded,
-  showDevPreDfpLink,
-  showPhysicianCompareLink,
-  showFacilityBasedPreviewLink,
-  showApmIncentivePaymentLink,
-  performanceYear,
-  fbpPerformanceYear,
-  showSelfNomination,
   config: { linkCallback, useTooltips } = {},
-  showReportsPortal,
-  showTargetedReviewLink,
+  levelOneContent,
 }) => {
-  let name = '';
-  let hasAuthorizations = true;
-  let isDevPre = false;
-  let ehrAuthorized = false;
-  let hasApmPayments = false;
-  let hasNonRegistryAuthorizations = false;
-  let cookies = cookie.parse(document.cookie);
-
-  if (cookies.hasOwnProperty('qpp_auth_token')) {
-    const { data } = jwtDecode(cookies.qpp_auth_token);
-    name = `${data.firstName} ${data.lastName}`;
-  }
-
-  if (cookies.hasOwnProperty('qpp_has_authorizations')) {
-    hasAuthorizations = cookies.qpp_has_authorizations === 'true';
-  }
+  let { qpp_is_dev_pre, qpp_auth_token } = cookie.parse(document.cookie);
 
-  if (cookies.hasOwnProperty('user_has_apm_payments')) {
-    hasApmPayments = cookies.user_has_apm_payments === 'true';
-  }
+  const [selectedRole, setSelectedRole] = useState('');
 
-  if (cookies.hasOwnProperty('qpp_is_dev_pre')) {
-    isDevPre = cookies.qpp_is_dev_pre === 'true';
+  let name = '';
+  if (qpp_auth_token) {
+    const { firstName, lastName } = jwtDecode(qpp_auth_token);
+    name = `${firstName} ${lastName}`;
   }
 
-  if (cookies.hasOwnProperty('qpp_ehr_authorized')) {
-    ehrAuthorized = cookies.qpp_ehr_authorized === 'true';
-  }
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
 
-  if (cookies.hasOwnProperty('qpp_has_non_registry_authorizations')) {
-    hasNonRegistryAuthorizations =
-      cookies.qpp_has_non_registry_authorizations === 'true';
-  }
+  const permissions = loadUserPermissions(document.cookie, selectedRole);
+  const { internalReviewerNames } = permissions;
 
-  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-  const listOfLinks = [];
+  const hasMultipleRoles = isMultiRoleUser(document.cookie);
+  const isDevPre = qpp_is_dev_pre === 'true';
+  let content;
 
   if (isDevPre) {
-    if (ehrAuthorized) {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.MyApplicationsIcon />}
-          className={linkClass}
-          url="/user/applications"
-          label="My Applications"
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
+    content = levelOneContent?.devPre || defaultContent.devPre;
+  } else {
+    if (!hasMultipleRoles) {
+      // internalReviewerNames has 1 value b/c !hasMultipleRoles
+      const reviewerRoleName = internalReviewerNames[0];
+      content = loadSideNavContent(reviewerRoleName, {
+        levelOneContent,
+        defaultContent,
+      });
+    } else {
+      content = loadSideNavContent(
+        selectedRole,
+        { levelOneContent, defaultContent },
+        true
       );
-      if (showDevPreDfpLink) {
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.MyTestDataIcon />}
-            className={linkClass}
-            url="/user/test-data"
-            label="My Test Data"
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
+    }
+  }
+
+  // Mapping side nav link urls to the conditions that determine their inclusion in the side nav
+  const urlConditionMap = getUrlConditionMap(permissions);
+
+  const navLinks = content
+    .filter((link) => {
+      // Filter out Exception & Targeted Review links for Helpdesk Viewer when not impersonating
+      const isHelpdeskRoleNotImpersonating =
+        selectedRole === 'Helpdesk Viewer' && !isImpersonating(document.cookie);
+      if (isHelpdeskRoleNotImpersonating) {
+        return (
+          link.url !== '/user/exception/#/landing' &&
+          link.url !== '/user/targeted-review/#/landing'
         );
       }
-    }
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.ManageUsersIcon />}
-        className={linkClass}
-        url="/user/manage-access"
-        label="Manage Access"
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.HelpSupportIcon />}
-        className={linkClass}
-        url="/developers"
-        label="Developer Tools"
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-  } else {
-    listOfLinks.push(
-      <NavLinkInline
-        key="account-dashboard-link"
-        icon={<SVG.AccountHomeIcon />}
-        className={linkClass}
-        url="/user/submissions"
-        label="Account Home"
-        linkCallback={linkCallback}
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
 
-    if (hasAuthorizations) {
-      listOfLinks.push(
-        <NavLinkInline
-          key="eligibility-link"
-          icon={<SVG.DashboardIcon />}
-          className={linkClass}
-          url="/user/dashboard"
-          label="Eligibility & Reporting"
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
+      // Filter Content Manager links
+      // Check if user has content mgmt. admin || frontend author roles
+      const contentMgrCanManageDocs = internalReviewerNames.some((name) =>
+        name.includes('QPP Content Management')
+      );
+      const contentMgrFrontendAuthor = internalReviewerNames.includes(
+        'QPP Front-end - Author'
       );
 
-      if (showFacilityBasedPreviewLink) {
-        const facilityBasedPreviewUrlYear =
-          fbpPerformanceYear || performanceYear;
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.FacilityBasedPreviewIcon />}
-            className={linkClass}
-            url={facilityBasedPreviewUrl(facilityBasedPreviewUrlYear)}
-            label="Facility Based Preview"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
-        );
+      if (!contentMgrCanManageDocs) {
+        return link.label !== 'Manage Documents';
+      }
+      if (!contentMgrFrontendAuthor) {
+        return link.label !== 'Author Content';
       }
 
-      if (performanceYear) {
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.StarIcon />}
-            className={linkClass}
-            urlExpressionToMatch={`${feedbackUrl}/[0-9][0-9][0-9][0-9]`}
-            url={feedbackUrl}
-            label="Performance Feedback"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
-        );
+      return link;
+    })
+    .reduce((acc, link) => {
+      const { url, label, className, listOfLinks, ...rest } = link;
+
+      // Any links failing the corresponding condition in the urlConditionMap are skipped
+      if (url in urlConditionMap && !urlConditionMap[url]) {
+        return acc;
       }
 
-      if (showApmIncentivePaymentLink && hasApmPayments) {
-        listOfLinks.push(
-          <NavLinkInline
-            icon={<SVG.PaymentIcon />}
-            className={linkClass}
-            url="/user/apm-incentive-payments"
-            label="APM Incentive Payments"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
-            useTooltips={useTooltips}
-          />
-        );
+      const isContentMgrLink =
+        label === 'Manage Documents' || label === 'Author Content';
+      const IconComponent = isContentMgrLink
+        ? getIcon(null, label)
+        : getIcon(url);
+      const Icon = IconComponent ? <IconComponent /> : null;
+      const sharedProps = {
+        url,
+        label,
+        linkCallback,
+        className: className ? `${linkClass} ${className}` : linkClass,
+      };
+
+      if (isImpersonating(document.cookie)) {
+        sharedProps.className = `${sharedProps.className} includes-read-only`;
       }
 
-      if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
-        listOfLinks.push(
+      const { pathname, hash } = window.location;
+      const filteredListOfLinks = (listOfLinks || []).filter((sublink) => {
+        return !(
+          sublink.url in urlConditionMap && !urlConditionMap[sublink.url]
+        );
+      });
+      if (
+        filteredListOfLinks?.length > 0 &&
+        (pathname === url ||
+          filteredListOfLinks.some(
+            (sublink) =>
+              pathname === sublink.url || `${pathname}${hash}` === sublink.url
+          ))
+      ) {
+        acc.push(
+          <NavLinkDrawer
+            key={`nav-drawer-${url}-${label}`}
+            leftIcon={Icon}
+            listOfLinks={filteredListOfLinks}
+            isExpanded={isExpanded}
+            staticDrawer={false}
+            openByDefault
+            isAlwaysOpen
+            {...sharedProps}
+            {...rest}
+          />
+        );
+      } else {
+        // Check if link is associated with the impersonated user not the Helpdesk Viewer user
+        const impersonationLink = isImpersonationLink(document.cookie, label);
+        acc.push(
           <NavLinkInline
-            icon={<SVG.PhysicianCompareIcon />}
-            className={linkClass}
-            url={physicianCompareUrl}
-            label="Doctors & Clinicians Preview"
-            linkCallback={linkCallback}
-            showLabel={isExpanded}
+            key={`nav-link-${url}-${label}`}
+            icon={Icon}
+            className={impersonationLink ? 'read-only-link' : ''}
+            {...(impersonationLink
+              ? { rightIcon: <EyeIcon classes="read-only-icon" /> }
+              : null)}
             useTooltips={useTooltips}
+            showLabel={isExpanded}
+            {...sharedProps}
+            {...rest}
           />
         );
       }
-    }
-
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.HardshipIcon />}
-        className={linkClass}
-        url="/user/exception/#/landing"
-        label="Exceptions Application"
-        linkCallback={linkCallback}
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-
-    if (showTargetedReviewLink) {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.TargetIcon />}
-          className={linkClass + ' stroke-based-icon'}
-          url="/user/targeted-review/#/landing"
-          label="Targeted Review"
-          linkCallback={linkCallback}
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
-      );
-    }
-
-    if (showReportsPortal) {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.HardshipIcon />}
-          className={linkClass}
-          url={reportsPortalUrl}
-          label="Reports"
-          linkCallback={linkCallback}
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
-      );
-    }
+      return acc;
+    }, []);
 
-    if (showSelfNomination) {
-      listOfLinks.push(
-        <NavLinkDrawer
-          key="connected-clinicians-link"
-          isAlwaysOpen
-          url="/user/manage-access"
-          isExpanded={isExpanded}
-          openByDefault={true}
-          leftIcon={<SVG.ManageUsersIcon />}
-          className={linkClass}
-          label="Manage Access"
-          linkCallback={linkCallback}
-          listOfLinks={[
-            {
-              url: '/user/self-nomination/#/landing',
-              label: 'Registry/QCDR Self-Nomination',
-              items: [],
-            },
-          ]}
-          staticDrawer={false}
-        />
-      );
-    } else {
-      listOfLinks.push(
-        <NavLinkInline
-          icon={<SVG.ManageUsersIcon />}
-          className={linkClass}
-          url="/user/manage-access"
-          label="Manage Access"
-          showLabel={isExpanded}
-          useTooltips={useTooltips}
-        />
-      );
-    }
-
-    listOfLinks.push(
-      <NavLinkInline
-        icon={<SVG.HelpSupportIcon />}
-        className={linkClass}
-        url="/resources/help-and-support"
-        label="Help and Support"
-        showLabel={isExpanded}
-        useTooltips={useTooltips}
-      />
-    );
-  }
   return (
     <div className="sidebar-content">
       <AnimationGroup display={isExpanded}>
         <h1 className="label">{name}</h1>
       </AnimationGroup>
       <div className="level-one-nav animation-flat">
-        <NavLinkContainer listOfLinks={listOfLinks} />
+        {hasMultipleRoles && (
+          <SelectRole
+            selectedRole={selectedRole}
+            setSelectedRole={setSelectedRole}
+          />
+        )}
+        <NavLinkContainer listOfLinks={navLinks} />
       </div>
     </div>
   );
@@ -295,15 +187,13 @@ const LevelOneContent = ({
 LevelOneContent.propTypes = {
   isExpanded: PropTypes.bool,
   config: PropTypes.object,
-  showDevPreDfpLink: PropTypes.bool,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  showApmIncentivePaymentLink: PropTypes.bool,
-  performanceYear: PropTypes.string,
-  fbpPerformanceYear: PropTypes.string,
-  showSelfNomination: PropTypes.bool,
-  showReportsPortal: PropTypes.bool,
-  showTargetedReviewLink: PropTypes.bool,
+  levelOneContent: PropTypes.shape({
+    default: PropTypes.arrayOf(PropTypes.object),
+    devPre: PropTypes.arrayOf(PropTypes.object),
+    viewer: PropTypes.arrayOf(PropTypes.object),
+    internalReviewers: PropTypes.arrayOf(PropTypes.object),
+    contentManager: PropTypes.arrayOf(PropTypes.object),
+  }),
 };
 
 export default LevelOneContent;

package/components/SideNav/Content/LevelTwoContent.jsx

@@ -47,6 +47,7 @@ const LevelTwoContent = ({
     isApmPaymentDetailsPage,
     useTooltips,
     cpcPlusId,
+    pcfId,
   } = {},
 }) => {
   const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
@@ -156,23 +157,24 @@ const LevelTwoContent = ({
     <div className="sidebar-content">
       <AnimationGroup display={isExpanded}>
         <NavLinkInline
-            icon={<AccountHomeIcon />}
-            url={submissionsUrl}
-            label="Account Home"
-            showLabel={isExpanded}
-            className="account-home-link"
-            linkCallback={linkCallback}
-            useTooltips={useTooltips}
-          />
-          <hr />
+          icon={<AccountHomeIcon />}
+          url={submissionsUrl}
+          label="Account Home"
+          showLabel={isExpanded}
+          className="account-home-link"
+          linkCallback={linkCallback}
+          useTooltips={useTooltips}
+        />
+        <hr />
       </AnimationGroup>
-      <AnimationGroup display={isExpanded} className={"details"}>
+      <AnimationGroup display={isExpanded} className={'details'}>
         <PracticeDetails
           practiceName={practiceName}
           {...(!practiceTin ? {} : { practiceTin })}
           {...(!apmEntityId ? {} : { apmEntityId })}
           {...(!vgId ? {} : { vgId })}
           {...(!cpcPlusId ? {} : { cpcPlusId })}
+          {...(!pcfId ? {} : { pcfId })}
         />
         <hr />
       </AnimationGroup>

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

@@ -0,0 +1,77 @@
+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 new role selected
+    updateLocalStorageRoleState(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 { selectedUserRole } = getLocalStorageRoleState();
+    const roleValue = selectedUserRole || ROLE_OPTIONS[0].value;
+
+    // Set localStorage values if not set
+    initializeLocalStorageRoleState(roleValue);
+
+    // Update state
+    setSelectedRole(roleValue);
+
+    //Redirect to role default page IF localStorage was not set (indicates initial login)
+    if (!selectedUserRole) {
+      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;