qpp-style 0.0.9 → 0.0.10

package/components/SideNav/UI/SideNavUI.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import SVGInline from 'react-svg-inline';
 
+import { withGetConfig } from '../../hooks/useGetConfig';
 import { LevelOneContent, LevelTwoContent } from '../Content';
 import {
   NavLinkContainer,
@@ -11,34 +11,24 @@ import {
 } from '../Links';
 import AnimationGroup from '../AnimationGroup/AnimationGroup';
 import { PracticeDetails, IndividualDetails } from '../Details';
-import { ScoreChart } from '../Chart';
+import ScoreChart from '../Chart';
 import SanitizedContent from '../../SanitizedContent';
 import * as SvgComponents from '../../../lib/SvgComponents.jsx';
-import SVGIcons from '../../../lib/svg-definitions.svg';
 import CmsSwitchLink from '../Links/CmsSwitchLink';
+import defaultContent from './default-content';
 
 const SideNavUI = ({
   chartData,
   config,
   currentLevel,
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
   isAltStyle,
   isExpanded,
   items,
   onCollapsed,
   onExpanded,
   performanceYear,
-  showApmIncentivePaymentLink,
-  showDevPreDfpLink,
-  showExceptionsApplicationLink,
-  showFacilityBasedPreviewLink,
-  showPhysicianCompareLink,
   showReportingLinks,
-  showReportsPortal,
-  showSelfNomination,
-  showTargetedReviewLink,
-  svgIcons,
+  result,
 }) => {
   const [isExpandedState, setIsExpandedState] = useState(isExpanded);
   const [itemsState, setItemsState] = useState(items);
@@ -65,65 +55,61 @@ const SideNavUI = ({
   };
 
   const getLevelContent = () => {
-    switch (currentLevelState) {
-      default:
-      case 1: // Home
-        return (
-          <LevelOneContent
-            performanceYear={performanceYear}
-            feedbackPerformanceYear={feedbackPerformanceYear}
-            fbpPerformanceYear={fbpPerformanceYear}
-            isExpanded={isExpandedState}
-            config={config}
-            showDevPreDfpLink={showDevPreDfpLink}
-            showPhysicianCompareLink={showPhysicianCompareLink}
-            showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
-            showApmIncentivePaymentLink={showApmIncentivePaymentLink}
-            showSelfNomination={showSelfNomination}
-            showReportsPortal={showReportsPortal}
-            showExceptionsApplicationLink={showExceptionsApplicationLink}
-            showTargetedReviewLink={showTargetedReviewLink}
-          />
-        );
-      case 2: // Group Submission
-        return (
+    return (
+      {
+        2: (
           <LevelTwoContent
             showReportingLinks={showReportingLinks}
             isExpanded={isExpandedState}
             chartData={chartData}
             config={config}
           />
-        );
-    }
+        ),
+      }[currentLevelState] || (
+        <LevelOneContent
+          levelOneContent={result?.content}
+          isExpanded={isExpandedState}
+          config={config}
+        />
+      )
+    );
   };
 
-  const getDynamicContent = (contentItems, className) => {
-    const {
-      openDrawersByDefault,
-      linkActiveFunc,
-      linkCallback,
-      useTooltips,
-    } = config;
-    const linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
+  const getDynamicContent = (contentItems, className, recursionId) => {
+    const { openDrawersByDefault, linkActiveFunc, linkCallback, useTooltips } =
+      config;
+    let linkClass = isExpandedState ? 'link-inline' : 'link-collapsed';
+    const containerRecursionId = recursionId || 0;
 
     const getDynamicIcon = (icon) => {
       const Component = SvgComponents[icon];
-      return <Component />;
+      return Component ? <Component /> : null;
+    };
+
+    const hasDarkerBackground = (darkerBackground) => {
+      return darkerBackground ? 'hr-smaller-vertical-spacing' : '';
     };
 
-    const itemsMarkup = contentItems.map((item) => {
-      switch (item.type) {
-        case 'divider':
-          return (
-            <AnimationGroup display={isExpandedState}>
-              <hr />
+    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>
-          );
-        case 'container':
-          return getDynamicContent(item.items, item.className);
-        case 'linkBack':
-          return (
-            <AnimationGroup display={isExpandedState}>
+          ),
+          container: getDynamicContent(
+            item.items,
+            item.className,
+            containerRecursionId + 1
+          ),
+          linkBack: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <NavLinkInline
                 className="link-back"
                 icon={getDynamicIcon('ChevronLeft')}
@@ -134,13 +120,12 @@ const SideNavUI = ({
                 useTooltips={useTooltips}
               />
             </AnimationGroup>
-          );
-        case 'linkHome':
-          return (
-            <AnimationGroup display={isExpandedState}>
+          ),
+          linkHome: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <NavLinkInline
                 className="account-home-link"
-                icon={getDynamicIcon(item.icon)}
+                icon={getDynamicIcon(item?.icon)}
                 url={item.url}
                 label={item.label}
                 linkCallback={linkCallback}
@@ -148,10 +133,13 @@ const SideNavUI = ({
                 useTooltips={useTooltips}
               />
             </AnimationGroup>
-          );
-        case 'practiceDetails':
-          return (
-            <AnimationGroup display={isExpandedState} className={'details'}>
+          ),
+          practiceDetails: (
+            <AnimationGroup
+              display={isExpandedState}
+              className={'details'}
+              key={key}
+            >
               <PracticeDetails
                 practiceName={item.practiceName}
                 {...(!item.practiceTin
@@ -162,26 +150,26 @@ const SideNavUI = ({
                   : { apmEntityId: item.apmEntityId })}
                 {...(!item.vgId ? {} : { vgId: item.vgId })}
                 {...(!item.cpcPlusId ? {} : { cpcPlusId: item.cpcPlusId })}
+                {...(!item.pcfId ? {} : { pcfId: item.pcfId })}
               />
             </AnimationGroup>
-          );
-        case 'individualDetails':
-          return (
-            <AnimationGroup display={isExpandedState}>
+          ),
+          individualDetails: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <IndividualDetails
                 individualName={item.individualName}
                 individualNpi={item.individualNpi}
               />
             </AnimationGroup>
-          );
-        case 'linkDrawer':
-          return (
+          ),
+          linkDrawer: (
             <NavLinkDrawer
+              key={key}
               isExpanded={isExpandedState}
               isAlwaysOpen={item.isAlwaysOpen}
               openByDefault={openDrawersByDefault}
               rightIcon="chevron-down"
-              leftIcon={getDynamicIcon(item.icon)}
+              leftIcon={getDynamicIcon(item?.icon)}
               className={linkClass}
               label={item.label}
               linkActiveFunc={linkActiveFunc}
@@ -189,57 +177,62 @@ const SideNavUI = ({
               listOfLinks={item.items}
               url={item.url}
               sidebarExpand={expand}
+              isHighlighted={item.isHighlighted}
+              darkerBackground={item.darkerBackground}
+              leftBorderHighlightDisabled={item.leftBorderHighlightDisabled}
+              hideLabelSection={item.hideLabelSection}
+              largerDrawerBottomPadding={item.largerDrawerBottomPadding}
             />
-          );
-        case 'custom':
-          return (
-            <AnimationGroup display={isExpandedState}>
+          ),
+          custom: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <SanitizedContent
                 html={item.content}
                 customClassName={item.customClassName}
               />
             </AnimationGroup>
-          );
-        case 'chart':
-          return (
-            <AnimationGroup display={isExpandedState}>
+          ),
+          chart: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <ScoreChart
                 chartData={item.chartData}
                 linkCallback={linkCallback}
                 performanceYear={performanceYear}
               />
             </AnimationGroup>
-          );
-        case 'switchLink':
-          return (
-            <AnimationGroup display={isExpandedState}>
+          ),
+          switchLink: (
+            <AnimationGroup display={isExpandedState} key={key}>
               <CmsSwitchLink
                 linkCallback={linkCallback}
                 label={item.label}
                 url={item.url}
               />
             </AnimationGroup>
-          );
-        default:
-          return (
-            <NavLinkInline
-              icon={getDynamicIcon(item.icon)}
-              className={item.className ? item.className : linkClass}
-              url={item.url}
-              label={item.label}
-              linkCallback={linkCallback}
-              showLabel={isExpandedState}
-              disabled={item.disabled}
-              useTooltips={useTooltips}
-              target={item.target}
-            />
-          );
-      }
+          ),
+        }[item.type] || (
+          <NavLinkInline
+            key={key}
+            icon={getDynamicIcon(item?.icon)}
+            className={item.className ? item.className : linkClass}
+            url={item.url}
+            label={item.label}
+            linkCallback={linkCallback}
+            showLabel={isExpandedState}
+            disabled={item.disabled}
+            useTooltips={useTooltips}
+            target={item.target}
+          />
+        )
+      );
     });
 
     if (className === 'link-container') {
       return (
-        <div className="animation-flat">
+        <div
+          className="animation-flat"
+          key={`nav-link-container-${recursionId}`}
+        >
           <NavLinkContainer
             listOfLinks={itemsMarkup}
             linkActiveFunc={linkActiveFunc}
@@ -278,7 +271,6 @@ const SideNavUI = ({
         config.navClassName
       }`}
     >
-      <SVGInline svg={svgIcons} />
       {content}
       <NavLinkToggle
         isAltStyle={isAltStyle}
@@ -297,21 +289,19 @@ SideNavUI.propTypes = {
   onCollapsed: PropTypes.func,
   chartData: PropTypes.object,
   config: PropTypes.object,
-  showDevPreDfpLink: PropTypes.bool,
   items: PropTypes.object,
   isAltStyle: PropTypes.bool,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
   showReportingLinks: PropTypes.bool,
-  showApmIncentivePaymentLink: PropTypes.bool,
   performanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
-  fbpPerformanceYear: PropTypes.string,
-  showSelfNomination: PropTypes.bool,
-  showReportsPortal: PropTypes.bool,
-  showExceptionsApplicationLink: PropTypes.bool,
-  showTargetedReviewLink: PropTypes.bool,
-  svgIcons: PropTypes.string,
+  result: PropTypes.shape({
+    content: PropTypes.shape({
+      default: PropTypes.arrayOf(PropTypes.object),
+      devPre: PropTypes.arrayOf(PropTypes.object),
+      internalReviewers: PropTypes.arrayOf(PropTypes.object),
+      viewer: PropTypes.arrayOf(PropTypes.object),
+      contentManager: PropTypes.arrayOf(PropTypes.object),
+    }),
+  }),
 };
 
 SideNavUI.defaultProps = {
@@ -321,21 +311,24 @@ SideNavUI.defaultProps = {
   onCollapsed: () => {},
   chartData: {},
   config: {},
-  showDevPreDfpLink: false,
   items: null,
   isAltStyle: false,
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  showApmIncentivePaymentLink: false,
   showReportingLinks: false,
   performanceYear: '2017',
-  feedbackPerformanceYear: null,
-  fbpPerformanceYear: null,
-  showSelfNomination: false,
-  showReportsPortal: false,
-  showExceptionsApplicationLink: false,
-  showTargetedReviewLink: false,
-  svgIcons: SVGIcons,
+  result: {
+    content: {
+      default: [],
+      devPre: [],
+      internalReviewers: [],
+      viewer: [],
+      contentManager: [],
+    },
+  },
 };
 
-export default SideNavUI;
+export default withGetConfig(SideNavUI, {
+  timeout: 5,
+  url: '/config/side-navigation',
+  localStorageName: 'qpp_side_navigation',
+  defaultContent,
+});

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

@@ -0,0 +1,117 @@
+{
+  "default": [
+    {
+      "url": "/user/submissions",
+      "label": "Account Home"
+    },
+    {
+      "url": "/user/dashboard",
+      "label": "Eligibility & Reporting"
+    },
+    {
+      "url": "/user/submissions/facility-based-preview",
+      "label": "Facility Based Preview"
+    },
+    {
+      "urlExpressionToMatch": "/user/submissions/feedback/[0-9][0-9][0-9][0-9]",
+      "url": "/user/submissions/feedback",
+      "label": "Performance Feedback"
+    },
+    {
+      "url": "/user/apm-incentive-payments",
+      "label": "APM Incentive Payments"
+    },
+    {
+      "url": "/user/submissions/doctors-clinicians-preview",
+      "label": "Doctors & Clinicians Preview"
+    },
+    {
+      "url": "/user/exception/#/landing",
+      "label": "Exceptions Application"
+    },
+    {
+      "className": "stroke-based-icon",
+      "url": "/user/targeted-review/#/landing",
+      "label": "Targeted Review"
+    },
+    {
+      "url": "/user/submissions/reports",
+      "label": "Reports"
+    },
+    {
+      "url": "/user/manage-access",
+      "label": "Manage Access",
+      "listOfLinks": [
+        {
+          "url": "/user/helpdesk-viewing-tool",
+          "label": "Viewing Tool"
+        },
+        {
+          "url": "/user/self-nomination/#/landing",
+          "label": "Registry/QCDR Self-Nomination",
+          "items": []
+        }
+      ]
+    },
+    {
+      "url": "/resources/help-and-support",
+      "label": "Help and Support"
+    }
+  ],
+  "devPre": [
+    {
+      "url": "/user/applications",
+      "label": "My Applications"
+    },
+    {
+      "url": "/user/test-data",
+      "label": "My Test Data"
+    },
+    {
+      "url": "/user/manage-access",
+      "label": "Manage Access"
+    },
+    {
+      "url": "/developers",
+      "label": "Developer Tools"
+    }
+  ],
+  "internalReviewers": [
+    {
+      "url": "/user/reviewers",
+      "label": "Dashboard Home"
+    },
+    {
+      "url": "/reviewer/exception",
+      "label": "Exceptions Application"
+    },
+    {
+      "className": "stroke-based-icon",
+      "url": "/reviewer/targeted-review",
+      "label": "Targeted Review"
+    },
+    {
+      "url": "/self-nomination",
+      "label": "Self Nomination"
+    },
+    {
+      "url": "/case-management",
+      "label": "Review Skip Requests"
+    }
+  ],
+  "viewer": [],
+  "contentManager": [
+    {
+      "url": "/user/content-management",
+      "label": "Dashboard Home"
+    },
+    {
+      "url": "#",
+      "label": "Manage Documents"
+    },
+    {
+      "url": "#",
+      "label": "Author Content"
+    }
+  ]
+}