qpp-style 9.9.2 → 9.11.0

package/components/SideNav/Content/LevelOneContent.jsx

@@ -5,6 +5,7 @@ import jwtDecode from 'jwt-decode';
 
 import { NavLinkContainer, NavLinkInline, NavLinkDrawer } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
+import defaultContent from '../UI/default-content';
 import {
   AccountHomeIcon,
   DashboardIcon,
@@ -18,6 +19,7 @@ import {
   PhysicianCompareIcon,
   StarIcon,
   TargetIcon,
+  IndividualReporting,
 } from '../../../lib/SvgComponents';
 import {
   dashboardUrl,
@@ -45,6 +47,10 @@ const getIcon = (url) =>
     '/user/exception/#/landing': HardshipIcon,
     '/user/targeted-review/#/landing': TargetIcon,
     '/user/test-data': MyTestDataIcon,
+    '/user/self-nomination/#/landing': IndividualReporting,
+    '/reviewer/exception': HardshipIcon,
+    '/reviewer/targeted-review': TargetIcon,
+    '/reviewer/self-nomination': IndividualReporting,
   }[url] || null);
 
 const LevelOneContent = ({
@@ -59,6 +65,7 @@ const LevelOneContent = ({
     qpp_ehr_authorized,
     qpp_has_non_registry_authorizations,
     qpp_auth_token,
+    qpp_cms_internal_authorized,
     qpp_can_impersonate,
   } = cookie.parse(document.cookie);
 
@@ -72,12 +79,25 @@ const LevelOneContent = ({
   const hasAuthorizations = qpp_has_authorizations === 'true';
   const hasApmPayments = user_has_apm_payments === 'true';
   const isDevPre = qpp_is_dev_pre === 'true';
+  const internalReviewerNames = JSON.parse(
+    qpp_cms_internal_authorized || 'null'
+  );
   const ehrAuthorized = qpp_ehr_authorized === 'true';
   const hasNonRegistryAuthorizations =
     qpp_has_non_registry_authorizations === 'true';
 
   const linkClass = isExpanded ? 'link-inline' : 'link-collapsed';
-  const content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
+  let content = isDevPre ? levelOneContent?.devPre : levelOneContent?.default;
+  if (
+    (internalReviewerNames || []).some(
+      (name) =>
+        name === 'QPP Self-Nomination' ||
+        name === 'QPP Targeted Review & Exceptions'
+    )
+  ) {
+    content =
+      levelOneContent?.internalReviewers || defaultContent.internalReviewers;
+  }
 
   // Mapping side nav link urls to the conditions that determine their inclusion in the side nav
   const urlConditionMap = {
@@ -89,6 +109,16 @@ const LevelOneContent = ({
     [facilityBasedPreviewBaseUrl]: hasAuthorizations,
     '/user/impersonate': canImpersonate,
 
+    '/reviewer/exception': (internalReviewerNames || []).includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/reviewer/targeted-review': (internalReviewerNames || []).includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/reviewer/self-nomination': (internalReviewerNames || []).includes(
+      'QPP Self-Nomination'
+    ),
+
     // dev pre
     '/user/applications': ehrAuthorized,
     '/user/test-data': ehrAuthorized,
@@ -170,6 +200,7 @@ LevelOneContent.propTypes = {
     default: PropTypes.arrayOf(PropTypes.object),
     devPre: PropTypes.arrayOf(PropTypes.object),
     viewer: PropTypes.arrayOf(PropTypes.object),
+    internalReviewers: PropTypes.arrayOf(PropTypes.object),
   }),
 };
 

package/components/SideNav/UI/SideNavUI.jsx

@@ -297,6 +297,7 @@ SideNavUI.propTypes = {
     content: PropTypes.shape({
       default: PropTypes.arrayOf(PropTypes.object),
       devPre: PropTypes.arrayOf(PropTypes.object),
+      internalReviewers: PropTypes.arrayOf(PropTypes.object),
       viewer: PropTypes.arrayOf(PropTypes.object),
     }),
   }),
@@ -318,6 +319,7 @@ SideNavUI.defaultProps = {
     content: {
       default: [],
       devPre: [],
+      internalReviewers: [],
       viewer: [],
     },
   },

package/components/SideNav/UI/default-content.json

@@ -76,5 +76,24 @@
       "label": "Developer Tools"
     }
   ],
+  "internalReviewers": [
+    {
+      "url": "/user/submissions",
+      "label": "Dashboard Home"
+    },
+    {
+      "url": "/reviewer/exception",
+      "label": "Exceptions Application"
+    },
+    {
+      "className": "stroke-based-icon",
+      "url": "/reviewer/targeted-review",
+      "label": "Targeted Review"
+    },
+    {
+      "url": "/reviewer/self-nomination",
+      "label": "Self Nomination"
+    }
+  ],
   "viewer": []
 }

package/components/Tabs/index.js

@@ -1,56 +1,55 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import MuiTabs from '@material-ui/core/Tabs';
-
+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 getPanelChildren = (children) => {
-  return React.Children.toArray(children).filter(isTabPanel);
+  return React.Children.toArray(children).filter(isTabPanel)
 };
 
 const Tabs = ({ children, onChange, selected, defaultSelectedId, ariaLabel }) => {
-  const [tabList, setTabList] = useState([]);
-  const [value, setValue] = useState(defaultSelectedId || selected);
+  const [value, setValue] = useState(defaultSelectedId || selected)
+  
+  useEffect(() => {
+    if (selected) {
+      setValue(selected)
+    }
+  }, [selected])
+
+  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 child;
-    });
-  };
+      return child
+    })
+  }  
 
-  useEffect(() => {
-    const panels = getPanelChildren(children);
-    const tabs = panels.map(
-      (panel) => {
-        const { id, tab, tabHref, disabled } = panel?.props || {};
-        return { tab, tabHref, disabled, id };
-      },
-    );
-    setTabList(tabs);
-  }, []);
+  const panels = getPanelChildren(children)
+  
+  const tabList = panels.map(
+    (panel) => {
+      const { id, tab, tabHref, disabled } = panel?.props || {}
+      return { tab, tabHref, disabled, id }
+    },
+  )
 
-  useEffect(() => {
-    if (selected) {
-      setValue(selected);
-    }
-  }, [selected]);
-
-  const foundIndex = tabList.findIndex(({ id }) => id === value);
+  const foundIndex = tabList.findIndex(({ id }) => id === value)
+  
   const tabIndex = foundIndex >= 0 ? foundIndex : 0
 
   return (
@@ -71,16 +70,19 @@ 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.node,
-};
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.array,
+  ])
+}
 
 Tabs.defaultProps = {
   ariaLabel: 'qpp tabs',
@@ -88,6 +90,6 @@ Tabs.defaultProps = {
   defaultSelectedId: null,
   onChange: null,
   children: null,
-};
+}
 
-export default Tabs;
+export default Tabs