qpp-style 2.0.1 → 2.0.2-sm.2

package/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScoreChart component should match snapshot 1`] = `
+<div>
+  <div
+    class="chart"
+  >
+    <svg
+      class="score-chart"
+      focusable="false"
+      height="210"
+      width="210"
+    >
+      <title
+        id="titleID"
+      >
+        Your submission score
+      </title>
+      <desc
+        id="descID"
+      >
+        50 out of 100
+      </desc>
+      <g
+        class="arcs"
+        role="presentation"
+      >
+        <g
+          class="arc quality filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Quality Measures 30 out of 60
+          </desc>
+          <path
+            d="M0,-103.5A103.5,103.5,0,0,1,101.778,18.799L78.669,14.531A80,80,0,0,0,0,-80Z"
+          />
+        </g>
+        <g
+          class="arc quality empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M101.778,18.799A103.5,103.5,0,0,1,-36.973,96.671L-28.578,74.721A80,80,0,0,0,78.669,14.531Z"
+          />
+        </g>
+        <g
+          class="arc quality transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-36.973,96.671A103.5,103.5,0,0,1,-50.655,90.257L-39.153,69.764A80,80,0,0,0,-28.578,74.721Z"
+          />
+        </g>
+        <g
+          class="arc aci filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Advancing Care Info 15 out of 30
+          </desc>
+          <path
+            d="M-50.655,90.257A103.5,103.5,0,0,1,-101.778,18.799L-78.669,14.531A80,80,0,0,0,-39.153,69.764Z"
+          />
+        </g>
+        <g
+          class="arc aci empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-101.778,18.799A103.5,103.5,0,0,1,-79.555,-66.206L-61.492,-51.174A80,80,0,0,0,-78.669,14.531Z"
+          />
+        </g>
+        <g
+          class="arc aci transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-79.555,-66.206A103.5,103.5,0,0,1,-69.067,-77.084L-53.386,-59.582A80,80,0,0,0,-61.492,-51.174Z"
+          />
+        </g>
+        <g
+          class="arc ia filled"
+          focusable="true"
+          tabindex="0"
+          transform="translate(105, 105)"
+        >
+          <desc>
+            Improvement Activities 5 out of 10
+          </desc>
+          <path
+            d="M-69.067,-77.084A103.5,103.5,0,0,1,-43.931,-93.714L-33.957,-72.436A80,80,0,0,0,-53.386,-59.582Z"
+          />
+        </g>
+        <g
+          class="arc ia empty"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-43.931,-93.714A103.5,103.5,0,0,1,-15.07,-102.397L-11.648,-79.147A80,80,0,0,0,-33.957,-72.436Z"
+          />
+        </g>
+        <g
+          class="arc ia transparent"
+          tabindex="-1"
+          transform="translate(105, 105)"
+        >
+          <desc />
+          <path
+            d="M-15.07,-102.397A103.5,103.5,0,0,1,0,-103.5L0,-80A80,80,0,0,0,-11.648,-79.147Z"
+          />
+        </g>
+      </g>
+      <g
+        text-anchor="middle"
+        transform="translate(105, 105)"
+      >
+        <text
+          class="chart-title"
+          y="4"
+        >
+          50
+        </text>
+        <text
+          class="chart-subtitle"
+          y="24"
+        >
+          OUT OF 100
+        </text>
+      </g>
+    </svg>
+    <div
+      class="chart-tooltip off"
+    />
+    <div
+      class="chart-legend-toggler"
+    >
+      <button
+        aria-pressed="false"
+        type="button"
+      >
+        Show Legend
+        <svg
+          aria-hidden="true"
+          class="right-icon"
+          focusable="false"
+        >
+          <use
+            xlink:href="#chevron-down"
+          />
+        </svg>
+      </button>
+    </div>
+    <ul
+      class="chart-legend"
+    />
+  </div>
+</div>
+`;

package/components/SideNav/Chart/index.js

@@ -0,0 +1,3 @@
+import ScoreChart from './ScoreChart';
+
+export default ScoreChart;

package/components/SideNav/Content/LevelOneContent.jsx

@@ -0,0 +1,199 @@
+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 defaultContent from '../UI/default-content';
+import {
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
+  loadSideNavContent,
+} from '../helpers';
+import SelectRole from './SelectRole';
+
+const LevelOneContent = ({
+  isExpanded,
+  config: { linkCallback, useTooltips } = {},
+  levelOneContent,
+}) => {
+  let { qpp_is_dev_pre, qpp_auth_token } = cookie.parse(document.cookie);
+
+  const [selectedRole, setSelectedRole] = useState('');
+
+  let name = '';
+  if (qpp_auth_token) {
+    const { firstName, lastName } = jwtDecode(qpp_auth_token);
+    name = `${firstName} ${lastName}`;
+  }
+
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
+
+  const permissions = loadUserPermissions(document.cookie, selectedRole);
+  const { internalReviewerNames } = permissions;
+
+  const hasMultipleRoles = isMultiRoleUser(document.cookie);
+  const isDevPre = qpp_is_dev_pre === 'true';
+  let content;
+
+  if (isDevPre) {
+    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
+      );
+    }
+  }
+
+  // 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'
+        );
+      }
+
+      // 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 (!contentMgrCanManageDocs) {
+        return link.label !== 'Manage Documents';
+      }
+      if (!contentMgrFrontendAuthor) {
+        return link.label !== 'Author Content';
+      }
+
+      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;
+      }
+
+      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`;
+      }
+
+      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
+            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}
+          />
+        );
+      }
+      return acc;
+    }, []);
+
+  return (
+    <div className="sidebar-content">
+      <AnimationGroup display={isExpanded}>
+        <h1 className="label">{name}</h1>
+      </AnimationGroup>
+      <div className="level-one-nav animation-flat">
+        {hasMultipleRoles && (
+          <SelectRole
+            selectedRole={selectedRole}
+            setSelectedRole={setSelectedRole}
+          />
+        )}
+        <NavLinkContainer listOfLinks={navLinks} />
+      </div>
+    </div>
+  );
+};
+
+LevelOneContent.propTypes = {
+  isExpanded: PropTypes.bool,
+  config: PropTypes.object,
+  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

@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  NavLinkContainer,
+  NavLinkInline,
+  NavLinkDrawer,
+  NavItemInline,
+} from '../Links';
+import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import { PracticeDetails } from '../Details';
+import { ScoreChart } from '../Chart';
+import PropTypes from 'prop-types';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  StarIcon,
+  CliniciansIcon,
+  ScoreIncrease,
+  TooltipIcon,
+} from '../../../lib/SvgComponents.jsx';
+import {
+  submissionsUrl,
+  manageUrl,
+  dashboardUrl,
+  performanceFeedbackUrl,
+} from '../helpers';
+
+const PAST_REPORTING_YEARS = ['2017', '2018'];
+
+const LevelTwoContent = ({
+  isExpanded,
+  chartData,
+  showReportingLinks,
+  config: {
+    chartActive = true,
+    openDrawersByDefault,
+    linkCallback,
+    updateTime,
+    practiceId,
+    practiceName,
+    practiceTin,
+    apmEntityId,
+    isConnectedUsersPage,
+    vgId,
+    roleAbbr,
+    performanceYear,
+    finalFeedbackOpen,
+    isApmPaymentDetailsPage,
+    useTooltips,
+    cpcPlusId,
+    pcfId,
+  } = {},
+}) => {
+  const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
+  let links = [];
+
+  if (isApmPaymentDetailsPage) {
+    const apmDetailsUrl = '/user/apm-incentive-payments/(.*)/practice-details';
+    links.push(
+      <NavItemInline
+        icon={<CliniciansIcon />}
+        className={linkClass}
+        label="Payment Details"
+        urlExpressionToMatch={apmDetailsUrl}
+        showLabel={isExpanded}
+      />
+    );
+  } else {
+    const linkLabel = isConnectedUsersPage
+      ? 'Connected Users'
+      : 'Eligibility & Reporting';
+    let items = [];
+
+    const practiceUrlSegment =
+      performanceYear === '2017' || performanceYear === '2018' || !roleAbbr
+        ? practiceId
+        : practiceId + '_' + roleAbbr;
+
+    if (showReportingLinks && !apmEntityId) {
+      items = [
+        {
+          url: `${submissionsUrl}/reporting/${practiceUrlSegment}/overview`,
+          label: vgId ? 'Virtual Group Reporting' : 'Group Reporting Overview',
+          items: [
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/quality`,
+              label: 'Quality Measures',
+            },
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/aci`,
+              label: 'Promoting Interoperability',
+            },
+            {
+              url: `${submissionsUrl}/reporting/${practiceUrlSegment}/ia`,
+              label: 'Improvement Activities',
+            },
+          ],
+        },
+      ];
+    }
+    links.push(
+      <NavLinkDrawer
+        key="connected-clinicians-link"
+        isAlwaysOpen
+        url={
+          !isConnectedUsersPage
+            ? `${dashboardUrl}`
+            : `${manageUrl}/${practiceId}/connected-users`
+        }
+        isExpanded={isExpanded}
+        openByDefault={openDrawersByDefault}
+        leftIcon={<DashboardIcon />}
+        className={linkClass}
+        label={linkLabel}
+        linkCallback={linkCallback}
+        listOfLinks={
+          !isConnectedUsersPage && [
+            {
+              label: vgId
+                ? 'Virtual Group Details & Participants'
+                : apmEntityId
+                ? 'APM Entity Details & Participants'
+                : 'Practice Details & Clinicians',
+              items: items,
+            },
+          ]
+        }
+        disabled={isConnectedUsersPage ? true : false}
+      />
+    );
+    if (
+      (apmEntityId && performanceYear === '2018' && finalFeedbackOpen) ||
+      (!apmEntityId &&
+        !vgId &&
+        !isConnectedUsersPage &&
+        PAST_REPORTING_YEARS.indexOf(performanceYear) >= 0)
+    ) {
+      links.push(
+        <NavLinkInline
+          key="performance-feedback-link"
+          icon={<StarIcon />}
+          className={linkClass}
+          url={performanceFeedbackUrl(
+            finalFeedbackOpen && performanceYear === '2018'
+              ? performanceYear
+              : '2017'
+          )}
+          label="Performance Feedback"
+          linkCallback={linkCallback}
+          showLabel={isExpanded}
+          useTooltips={useTooltips}
+        />
+      );
+    }
+  }
+
+  return (
+    <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 />
+      </AnimationGroup>
+      <AnimationGroup display={isExpanded} className={'details'}>
+        <PracticeDetails
+          practiceName={practiceName}
+          {...(!practiceTin ? {} : { practiceTin })}
+          {...(!apmEntityId ? {} : { apmEntityId })}
+          {...(!vgId ? {} : { vgId })}
+          {...(!cpcPlusId ? {} : { cpcPlusId })}
+          {...(!pcfId ? {} : { pcfId })}
+        />
+        <hr />
+      </AnimationGroup>
+      <div className="level-two-nav animation-flat">
+        <NavLinkContainer listOfLinks={links} />
+        <AnimationGroup display={isExpanded && chartActive} className="chart">
+          <div>
+            <hr />
+            <div className="chart-title">
+              <p className="title">Final Group Score</p>
+              <p className="disclaimer">
+                <svg className="left-icon" aria-hidden="true">
+                  <ScoreIncrease />
+                </svg>
+                Score may increase
+                <svg className="right-icon" aria-hidden="true">
+                  <TooltipIcon />
+                </svg>
+              </p>
+              {updateTime && (
+                <p className="timestamp">Last update at {updateTime}</p>
+              )}
+            </div>
+            <ScoreChart chartData={chartData} linkCallback={linkCallback} />
+          </div>
+        </AnimationGroup>
+      </div>
+    </div>
+  );
+};
+
+LevelTwoContent.propTypes = {
+  isExpanded: PropTypes.bool,
+  config: PropTypes.object,
+  chartData: PropTypes.object,
+  showReportingLinks: PropTypes.bool,
+};
+
+export default LevelTwoContent;

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;