qpp-style 0.0.8 → 0.0.10

package/components/SideNav/Content/LevelTwoContent.jsx

@@ -30,7 +30,6 @@ const LevelTwoContent = ({
   isExpanded,
   chartData,
   showReportingLinks,
-  style,
   config: {
     chartActive = true,
     openDrawersByDefault,
@@ -48,6 +47,7 @@ const LevelTwoContent = ({
     isApmPaymentDetailsPage,
     useTooltips,
     cpcPlusId,
+    pcfId,
   } = {},
 }) => {
   const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
@@ -166,18 +166,21 @@ const LevelTwoContent = ({
           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 style={style} className="level-two-nav animation-flat">
+      <div className="level-two-nav animation-flat">
         <NavLinkContainer listOfLinks={links} />
-        <AnimationGroup display={isExpanded && chartActive}>
+        <AnimationGroup display={isExpanded && chartActive} className="chart">
           <div>
             <hr />
             <div className="chart-title">
@@ -208,7 +211,6 @@ LevelTwoContent.propTypes = {
   config: PropTypes.object,
   chartData: PropTypes.object,
   showReportingLinks: PropTypes.bool,
-  style: PropTypes.object,
 };
 
 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;

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;