qpp-style 9.18.2-mo-beta.0 → 9.19.0

package/components/Header/HeaderAccountMenu.jsx

@@ -1,45 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
-
 import { useHeaderState } from './hooks';
 import { setUtagLink } from './utag-helpers';
 import SessionDialogUI from '../SessionDialogUI';
-import {
-  performanceFeedbackUrl,
-  physicianCompareUrl,
-  dashboardUrl,
-  manageUrl,
-  submissionsUrl,
-  facilityBasedPreviewUrl,
-} from '../SideNav/helpers';
 import HeaderMenuItem from './HeaderMenuItem';
 
-const HeaderAccountMenu = ({
-  handleClick,
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
-  isLoginEnabled,
-  isDevPre,
-  performanceYear,
-  showFacilityBasedPreviewLink,
-  showPhysicianCompareLink,
-}) => {
-  const cookies = cookie.parse(document.cookie);
-  const hasAuthToken = cookies.hasOwnProperty('qpp_auth_token');
-  const hasAuthorizations = cookies.qpp_has_authorizations === 'true';
-  const hasNonRegistryAuthorizations =
-    cookies.qpp_has_non_registry_authorizations === 'true';
-  const isDevPreAndNotAuthenticated = !hasAuthToken && isDevPre;
-  const { closeMenus, RouterLink } = useHeaderState();
+const HeaderAccountMenu = ({ handleClick, isLoginEnabled, isDevPre }) => {
+  const { closeMenus, RouterLink, headerContent } = useHeaderState();
+  const { isLoggedIn, firstName, devPreMenuLinks, accountMenuLinks } =
+    headerContent;
+
+  const isDevPreAndNotAuthenticated = !isLoggedIn && isDevPre;
 
   if (!isLoginEnabled || isDevPreAndNotAuthenticated) {
     return null;
   }
 
   // login link
-  if (!hasAuthToken) {
+  if (!isLoggedIn) {
     if (RouterLink) {
       return (
         <li onClick={handleClick} className="header-item-login login">
@@ -85,50 +63,7 @@ const HeaderAccountMenu = ({
     );
   }
 
-  if (hasAuthToken) {
-    const { firstName } = jwtDecode(cookies.qpp_auth_token);
-    const additionalLinks = [];
-    if (hasAuthorizations) {
-      additionalLinks.push(
-        { type: 'link', href: dashboardUrl, name: 'Eligibility & Reporting' },
-        {
-          type: 'link',
-          href: performanceFeedbackUrl(
-            feedbackPerformanceYear || performanceYear
-          ),
-          name: 'Performance Feedback',
-        }
-      );
-      if (showPhysicianCompareLink && hasNonRegistryAuthorizations) {
-        additionalLinks.push({
-          type: 'link',
-          href: physicianCompareUrl,
-          name: 'Doctors & Clinicians Preview',
-        });
-      }
-      if (showFacilityBasedPreviewLink) {
-        additionalLinks.push({
-          type: 'link',
-          href: facilityBasedPreviewUrl(fbpPerformanceYear || performanceYear),
-          name: 'Facility Based Preview',
-        });
-      }
-    }
-    const columns = [
-      [
-        {
-          items: [
-            { type: 'link', href: submissionsUrl, name: 'Account Home' },
-            ...additionalLinks,
-            { type: 'link', href: manageUrl, name: 'Manage Access' },
-            { type: 'signout', name: 'Sign Out' },
-          ],
-        },
-      ],
-    ];
-    const devPreColumns = [
-      [{ items: [{ type: 'signout', name: 'Sign Out' }] }],
-    ];
+  if (isLoggedIn) {
     return (
       <>
         <SessionDialogUI />
@@ -138,8 +73,8 @@ const HeaderAccountMenu = ({
           name={firstName}
           subtitle="My Account"
           className="account-menu-item"
-          columns={isDevPre ? devPreColumns : columns}
-          rows={isDevPre ? devPreColumns : columns}
+          columns={isDevPre ? devPreMenuLinks : accountMenuLinks}
+          rows={isDevPre ? devPreMenuLinks : accountMenuLinks}
         />
       </>
     );
@@ -148,21 +83,11 @@ const HeaderAccountMenu = ({
 
 HeaderAccountMenu.propTypes = {
   isLoginEnabled: PropTypes.bool.isRequired,
-  showPhysicianCompareLink: PropTypes.bool,
-  showFacilityBasedPreviewLink: PropTypes.bool,
-  performanceYear: PropTypes.number,
-  fbpPerformanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
   isDevPre: PropTypes.bool,
   handleClick: PropTypes.func.isRequired,
 };
 
 HeaderAccountMenu.defaultProps = {
-  showPhysicianCompareLink: false,
-  showFacilityBasedPreviewLink: false,
-  performanceYear: 2017,
-  fbpPerformanceYear: null,
-  feedbackPerformanceYear: null,
   isDevPre: false,
 };
 

package/components/Header/HeaderUI.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-
+import axios from 'axios';
 import HeaderAccountMenu from './HeaderAccountMenu.jsx';
 import HeaderCancel from './HeaderCancel.jsx';
 import HeaderContainer from './HeaderContainer';
@@ -8,26 +8,20 @@ import HeaderMenuItem from './HeaderMenuItem';
 import HeaderMobileButton from './HeaderMobileButton';
 import ImpersonatorBanner from './ImpersonatorBanner';
 import HelpIcon from './HelpIcon';
-import defaultHeaderContent from './default-content.json';
 import { HeaderStateProvider } from './hooks';
-import useGetConfig from '../hooks/useGetConfig';
 
 const HeaderUI = ({
-  fbpPerformanceYear,
-  feedbackPerformanceYear,
   handleCancel,
   includeSkipToSidebar,
   isDevPre,
   isLoginEnabled,
-  performanceYear,
   showCancelButton,
-  showPhysicianCompareLink,
-  showFacilityBasedPreviewLink,
   skipToContentId,
   RouterLink,
   isIESupportPage,
 }) => {
   const [isMobileMenuExpanded, setIsMobileMenuExpanded] = useState(false);
+  const [headerContent, setHeaderContent] = useState({});
 
   const mapContentToRows = (config) => {
     // Append transposed array to content
@@ -47,53 +41,47 @@ const HeaderUI = ({
     });
   };
 
-  const result = useGetConfig({
-    localStorageName: 'qpp_top_nav_content',
-    url: '/config/header',
-    timeout: 30,
-    defaultContent: defaultHeaderContent,
-  });
-
-  const content = mapContentToRows(result?.content);
+  // execute on init render
+  useEffect(async () => {
+    let cancelRequest = false;
+    const { origin } = window.location;
+    const {
+      data: { data: navMenuItems },
+    } = await axios.get(`${origin}/config/header`);
+    if (!cancelRequest) setHeaderContent(navMenuItems);
+    return () => {
+      cancelRequest = true;
+    };
+  }, []);
 
-  if (showCancelButton) {
-    return (
-      <HeaderStateProvider RouterLink={RouterLink}>
-        <HeaderContainer
-          showCancelButton
-          skipToContentId={skipToContentId}
-          includeSkipToSidebar={includeSkipToSidebar}
-        >
-          <HeaderCancel handleCancel={handleCancel} />
-        </HeaderContainer>
-      </HeaderStateProvider>
-    );
-  }
+  const content = mapContentToRows(headerContent?.content);
 
-  if (isDevPre) {
-    return (
-      <HeaderStateProvider RouterLink={RouterLink}>
-        <HeaderContainer
-          isIESupportPage={isIESupportPage}
-          skipToContentId={skipToContentId}
-          includeSkipToSidebar={includeSkipToSidebar}
-        >
-          <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
-            <ul className="navigation-menu">
-              <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
-            </ul>
-          </nav>
-        </HeaderContainer>
-      </HeaderStateProvider>
-    );
-  }
+  const displayCancelContent = () => (
+    <HeaderContainer
+      showCancelButton
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <HeaderCancel handleCancel={handleCancel} />
+    </HeaderContainer>
+  );
 
-  if (!content) {
-    return null;
-  }
+  const displayDevPreContent = () => (
+    <HeaderContainer
+      isIESupportPage={isIESupportPage}
+      skipToContentId={skipToContentId}
+      includeSkipToSidebar={includeSkipToSidebar}
+    >
+      <nav aria-label="Primary navigation" hidden={!isMobileMenuExpanded}>
+        <ul className="navigation-menu">
+          <HeaderAccountMenu isDevPre isLoginEnabled={isLoginEnabled} />
+        </ul>
+      </nav>
+    </HeaderContainer>
+  );
 
-  return (
-    <HeaderStateProvider RouterLink={RouterLink}>
+  const displayHeaderContent = () => (
+    <>
       <HeaderContainer
         isIESupportPage={isIESupportPage}
         skipToContentId={skipToContentId}
@@ -118,24 +106,30 @@ const HeaderUI = ({
             ))}
             <HeaderAccountMenu
               handleClick={() => setIsMobileMenuExpanded(!isMobileMenuExpanded)}
-              fbpPerformanceYear={fbpPerformanceYear}
-              feedbackPerformanceYear={feedbackPerformanceYear}
               isLoginEnabled={isLoginEnabled}
-              performanceYear={performanceYear}
-              showPhysicianCompareLink={showPhysicianCompareLink}
-              showFacilityBasedPreviewLink={showFacilityBasedPreviewLink}
             />
           </ul>
         </nav>
       </HeaderContainer>
       <ImpersonatorBanner />
+    </>
+  );
+
+  const displayContent = () => {
+    if (showCancelButton) return displayCancelContent();
+    if (isDevPre) return displayDevPreContent();
+    if (content?.length) return displayHeaderContent();
+    return null;
+  };
+
+  return (
+    <HeaderStateProvider RouterLink={RouterLink} headerContent={headerContent}>
+      {displayContent()}
     </HeaderStateProvider>
   );
 };
 
 HeaderUI.propTypes = {
-  fbpPerformanceYear: PropTypes.string,
-  feedbackPerformanceYear: PropTypes.string,
   handleCancel: PropTypes.func,
   includeSkipToSidebar: PropTypes.bool,
   isDevPre: PropTypes.bool,
@@ -149,8 +143,6 @@ HeaderUI.propTypes = {
   isIESupportPage: PropTypes.bool,
 };
 HeaderUI.defaultProps = {
-  fbpPerformanceYear: null,
-  feedbackPerformanceYear: null,
   handleCancel: Function.prototype,
   includeSkipToSidebar: false,
   isDevPre: false,

package/components/Header/hooks.js

@@ -16,7 +16,11 @@ export function useWindowWidth() {
 
 export const HeaderStateContext = createContext(null);
 
-export const HeaderStateProvider = ({ children, RouterLink }) => {
+export const HeaderStateProvider = ({
+  children,
+  RouterLink,
+  headerContent, // allow header content from api request available to all child components
+}) => {
   const [currentOpenMenu, setCurrentOpenMenu] = useState('');
 
   const handleToggleMenu = (name) => {
@@ -27,18 +31,28 @@ export const HeaderStateProvider = ({ children, RouterLink }) => {
   };
 
   const closeMenus = () => setCurrentOpenMenu('');
+
   return (
     <HeaderStateContext.Provider
-      value={{ currentOpenMenu, handleToggleMenu, closeMenus, RouterLink }}
+      value={{
+        currentOpenMenu,
+        handleToggleMenu,
+        closeMenus,
+        RouterLink,
+        headerContent,
+      }}
     >
       {children}
     </HeaderStateContext.Provider>
   );
 };
+
 HeaderStateProvider.propTypes = {
   children: PropTypes.node.isRequired,
   RouterLink: PropTypes.func,
+  headerContent: PropTypes.object,
 };
+
 HeaderStateProvider.defaultProps = {
   RouterLink: null,
 };

package/components/NotificationBanner/CollapsedView.js

@@ -2,31 +2,38 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { BellOutline } from '../../lib/SvgComponents.jsx';
 
-const CollapsedView = (
-  { expandNotification, label },
-  { collapsedWrapperRef, collapsedBannerRef }
-) => {
-  return (
-    <div
-      ref={collapsedWrapperRef}
-      className={`notification-banner-wrapper collapsed-view`}
-      onClick={expandNotification}
-    >
-      <button ref={collapsedBannerRef} className={`notification-banner-label`}>
-        {label}
-        <span className="bell-icon">
-          <svg aria-hidden="true" focusable="false">
-            <BellOutline />
-          </svg>
-        </span>
-      </button>
-    </div>
-  );
-};
+const CollapsedView = forwardRef(
+  (
+    { expandNotification, label },
+    { collapsedWrapperRef, collapsedBannerRef }
+  ) => {
+    return (
+      <div
+        ref={collapsedWrapperRef}
+        className={`notification-banner-wrapper collapsed-view`}
+        onClick={expandNotification}
+      >
+        <button
+          ref={collapsedBannerRef}
+          className={`notification-banner-label`}
+        >
+          {label}
+          <span className="bell-icon">
+            <svg aria-hidden="true" focusable="false">
+              <BellOutline />
+            </svg>
+          </span>
+        </button>
+      </div>
+    );
+  }
+);
+
+CollapsedView.displayName = 'CollapsedView';
 
 CollapsedView.propTypes = {
   expandNotification: PropTypes.func,
   label: PropTypes.string,
 };
 
-export default forwardRef(CollapsedView);
+export default CollapsedView;