qpp-style 0.0.9 → 0.0.10

package/components/SideNav/helpers.js

@@ -1,9 +1,34 @@
+import cookie from 'cookie';
+import {
+  AccountHomeIcon,
+  DashboardIcon,
+  FacilityBasedPreviewIcon,
+  HardshipIcon,
+  HelpSupportIcon,
+  ManageUsersIcon,
+  MyApplicationsIcon,
+  MyTestDataIcon,
+  PaymentIcon,
+  PhysicianCompareIcon,
+  StarIcon,
+  TargetIcon,
+  IndividualReporting,
+  ManageDocumentsIcon,
+  AuthorContentIcon,
+  RegistrationIcon,
+} from '../../lib/SvgComponents';
+import { isReviewerRole } from './Content/SelectRole/utils';
+
 const submissionsUrl = '/user/submissions';
 const dashboardUrl = '/user/dashboard';
 const manageUrl = '/user/manage-access';
-const feedbackUrl = `/user/submissions/feedback`;
-const physicianCompareUrl = `${submissionsUrl}/physician-compare`;
+const feedbackUrl = `${submissionsUrl}/feedback`;
+const physicianCompareUrl = `${submissionsUrl}/doctors-clinicians-preview`;
 const reportsPortalUrl = `${submissionsUrl}/reports`;
+const facilityBasedPreviewBaseUrl = `${submissionsUrl}/facility-based-preview`;
+const viewingToolUrl = '/user/helpdesk-viewing-tool';
+const contentMgrDashboardUrl = '/user/content-management';
+const registrationUrl = '/user/registration/';
 
 const performanceFeedbackUrl = (performanceYear) => {
   if (performanceYear) {
@@ -14,16 +39,293 @@ const performanceFeedbackUrl = (performanceYear) => {
 };
 
 const facilityBasedPreviewUrl = (performanceYear) => {
-  return `/user/submissions/facility-based-preview/${performanceYear}`;
+  return `${facilityBasedPreviewBaseUrl}/${performanceYear}`;
 };
 
-const handleNavigation = (e, linkCallbackFunction) => {
+const handleNavigation = (e, linkCallbackFunction, label) => {
   if (linkCallbackFunction) {
     const { pathname, hash, search } = e.currentTarget;
     e.preventDefault();
     e.stopPropagation();
     linkCallbackFunction(`${pathname}${hash}${search}`);
   }
+  window?.utag?.link({
+    ga_event_category: 'side navbar',
+    ga_event_action: 'click',
+    ga_event_label: label,
+    page_title: `${window.document.title}`,
+    page_url: `${window.location.pathname}`,
+    event: 'trackEvent',
+  });
+};
+
+/**
+ * Load icon by url
+ * @param {string} url
+ * @returns svg icon
+ */
+const getIcon = (url, linkLabel) => {
+  const icons = {
+    [dashboardUrl]: DashboardIcon,
+    [feedbackUrl]: StarIcon,
+    [manageUrl]: ManageUsersIcon,
+    [physicianCompareUrl]: PhysicianCompareIcon,
+    [reportsPortalUrl]: HardshipIcon,
+    [submissionsUrl]: AccountHomeIcon,
+    [facilityBasedPreviewBaseUrl]: FacilityBasedPreviewIcon,
+    [registrationUrl]: RegistrationIcon,
+    '/developers': HelpSupportIcon,
+    '/resources/help-and-support': HelpSupportIcon,
+    '/user/apm-incentive-payments': PaymentIcon,
+    '/user/applications': MyApplicationsIcon,
+    '/user/exception/#/landing': HardshipIcon,
+    '/user/targeted-review/#/landing': TargetIcon,
+    '/user/test-data': MyTestDataIcon,
+    '/user/self-nomination/#/landing': IndividualReporting,
+    '/user/reviewers': AccountHomeIcon,
+    '/reviewer/exception': HardshipIcon,
+    '/reviewer/targeted-review': TargetIcon,
+    '/self-nomination': IndividualReporting,
+    '/case-management': FacilityBasedPreviewIcon,
+    [contentMgrDashboardUrl]: AccountHomeIcon,
+    'Manage Documents': ManageDocumentsIcon,
+    'Author Content': AuthorContentIcon,
+  };
+
+  if (linkLabel) return icons[linkLabel];
+  return icons[url];
+};
+
+const singleRoleContentMap = {
+  'QPP Content Management - Author': 'contentManager',
+  'QPP Content Management - Approver': 'contentManager',
+  'QPP Content Management - Admin': 'contentManager',
+  'QPP Front-end - Author': 'contentManager',
+  'QPP Self-Nomination': 'internalReviewers',
+  'QPP Targeted Review & Exceptions': 'internalReviewers',
+  'QPP Case Management - PIMMS Reviewer': 'internalReviewers',
+  'QPP Case Management - ACO PAC Reviewer': 'internalReviewers',
+  'QPP Case Management - CMS Reviewer': 'internalReviewers',
+};
+
+const multiRoleContentMap = {
+  Reviewer: 'internalReviewers',
+  'Content Manager': 'contentManager',
+};
+
+const replaceDefaultContentMgrLinks = (defaultContent) => {
+  const host = window.location.host;
+  const updatedDefaultContent = {
+    ...defaultContent,
+    contentManager: [
+      defaultContent.contentManager.find(
+        (obj) => obj.label === 'Dashboard Home'
+      ),
+      {
+        url: `${host}.qpp.cms.gov/cm/`,
+        label: 'Manage Documents',
+      },
+      {
+        url: `${host}.qpp.cms.gov/content-management/`,
+        label: 'Author Content',
+      },
+    ],
+  };
+  return updatedDefaultContent;
+};
+
+/**
+ * Load the side nav content for the given role
+ * @param {string} roleName role of given user from internalReviewerNames
+ * @param {object} navContent object of side nav links by role (levelOneContent & defaultContent)
+ * @returns {array} returns an array of objects (side nav menu links) from levelOneContent
+ * || defaultContent
+ */
+const loadSideNavContent = (roleName, navContent, isMultiRoleUser = false) => {
+  const { levelOneContent, defaultContent } = navContent;
+  const updatedDefaultContent = replaceDefaultContentMgrLinks(defaultContent);
+  const roleContentMap = isMultiRoleUser
+    ? multiRoleContentMap
+    : singleRoleContentMap;
+  const contentByRole = roleContentMap[roleName];
+  if (levelOneContent) {
+    return levelOneContent[contentByRole] || levelOneContent.default;
+  }
+  return updatedDefaultContent[contentByRole] || updatedDefaultContent.default;
+};
+
+/**
+ * Check if user is currently impersonating
+ * @param {string} docCookie document cookie
+ * @returns {boolean}
+ */
+const isImpersonating = (docCookie) => {
+  const parsedCookies = cookie.parse(docCookie);
+  return (
+    parsedCookies.qpp_can_impersonate && parsedCookies.qpp_impersonated_user
+  );
+};
+
+/**
+ * Check if user has multiple roles, used to display Select Role dropdown
+ * @param {string} docCookie document cookie
+ * @returns {boolean}
+ */
+const isMultiRoleUser = (docCookie) => {
+  const activeRoles = new Set();
+  const { qpp_cms_internal_authorized } = cookie.parse(docCookie);
+  let internalAuthz = [];
+  if (qpp_cms_internal_authorized) {
+    internalAuthz = JSON.parse(qpp_cms_internal_authorized);
+  }
+  // Filter out test internalCms authz
+  const filteredInternalAuthz = internalAuthz.filter((internalAuth) => {
+    return (
+      internalAuth !== 'Test internalCms Resource' &&
+      internalAuth !== 'Test internalCms Resource 2'
+    );
+  });
+
+  filteredInternalAuthz.forEach((element) => {
+    if (isReviewerRole(element)) {
+      return activeRoles.add('reviewer');
+    }
+    return activeRoles.add(element);
+  });
+
+  return activeRoles.size > 1;
+};
+
+/**
+ * Transform cookie values to permissions object
+ * @param {object} cookies parsed document.cookie values
+ * @returns {object}
+ */
+const transformCookieValues = (cookies) => {
+  const {
+    qpp_can_impersonate,
+    qpp_has_authorizations,
+    user_has_apm_payments,
+    qpp_cms_internal_authorized,
+    qpp_ehr_authorized,
+    qpp_has_non_registry_authorizations,
+  } = cookies;
+  return {
+    canImpersonate: qpp_can_impersonate === 'true',
+    hasAuthorizations: qpp_has_authorizations === 'true',
+    hasApmPayments: user_has_apm_payments === 'true',
+    internalReviewerNames: qpp_cms_internal_authorized
+      ? JSON.parse(qpp_cms_internal_authorized)
+      : [],
+    ehrAuthorized: qpp_ehr_authorized === 'true',
+    hasNonRegistryAuthorizations:
+      qpp_has_non_registry_authorizations === 'true',
+  };
+};
+
+const permissionsByRole = {
+  'QPP User': {
+    canImpersonate: false,
+    hasAuthorizations: true,
+    hasApmPayments: true,
+  },
+  Reviewer: {
+    hasAuthorizations: false,
+    hasApmPaymentss: false,
+  },
+  'Helpdesk Viewer': {
+    hasAuthorizations: false,
+    hasApmPayments: false,
+    hasNonRegistryAuthorizations: false,
+    internalReviewerNames: ['QPP Helpdesk'],
+  },
+  // Helpdesk role && impersonating (use impersonated user authz values)
+  Impersonation: {
+    internalReviewerNames: ['QPP Helpdesk'],
+  },
+  'Content Manager': {
+    hasAuthorizations: false,
+    hasApmPaymentss: false,
+    hasNonRegistryAuthorizations: false,
+  },
+};
+
+/**
+ * Return permissions by role
+ * @param {string} selectedRole selected user role
+ * @param {object} permissionValues default permission values from transformed parsed cookie
+ * @returns {object}
+ */
+const loadUserPermissionsByRole = (selectedRole, permissionValues) => {
+  return {
+    ...permissionValues,
+    ...permissionsByRole[selectedRole],
+  };
+};
+
+/**
+ * Helper fn to return user permissions/properties from cookies set on login
+ * @param {string} docCookie cookie values set on login
+ * @param {string} selectedRole string of selected role if user has multiple roles
+ * @returns {object}
+ */
+const loadUserPermissions = (docCookie, selectedRole) => {
+  const parsedCookies = cookie.parse(docCookie);
+  const permissionValues = transformCookieValues(parsedCookies);
+  const impersonating = isImpersonating(docCookie);
+  const role = impersonating ? 'Impersonation' : selectedRole;
+
+  if (role) {
+    return loadUserPermissionsByRole(role, permissionValues);
+  }
+
+  return permissionValues;
+};
+
+/**
+ * Return map of link conditionals based on user cookies for side nav
+ * @param {object} userPermissions user permissions/properties derived from cookies set on login
+ * @returns {object}
+ */
+const getUrlConditionMap = (userPermissions) => {
+  return {
+    [dashboardUrl]: userPermissions.hasAuthorizations,
+    [feedbackUrl]: userPermissions.hasAuthorizations,
+    '/user/apm-incentive-payments': userPermissions.hasApmPayments,
+    [physicianCompareUrl]: userPermissions.hasNonRegistryAuthorizations,
+    [registrationUrl]: userPermissions.hasAuthorizations,
+    [reportsPortalUrl]: userPermissions.hasAuthorizations,
+    [facilityBasedPreviewBaseUrl]: userPermissions.hasAuthorizations,
+    '/user/helpdesk-viewing-tool': userPermissions.canImpersonate,
+    '/reviewer/exception': userPermissions.internalReviewerNames?.includes(
+      'QPP Targeted Review & Exceptions'
+    ),
+    '/reviewer/targeted-review':
+      userPermissions.internalReviewerNames?.includes(
+        'QPP Targeted Review & Exceptions'
+      ),
+    '/self-nomination': userPermissions.internalReviewerNames?.includes(
+      'QPP Self-Nomination'
+    ),
+
+    '/case-management': userPermissions.internalReviewerNames?.some((val) =>
+      [
+        'QPP Case Management - PIMMS Reviewer',
+        'QPP Case Management - ACO PAC Reviewer',
+        'QPP Case Management - CMS Reviewer',
+      ].includes(val)
+    ),
+
+    // dev pre
+    '/user/applications': userPermissions.ehrAuthorized,
+    '/user/test-data': userPermissions.ehrAuthorized,
+  };
+};
+
+const isImpersonationLink = (docCookie, linkLabel) => {
+  if (!isImpersonating(docCookie)) return;
+  const helpdeskLinks = ['Account Home', 'Manage Access', 'Help and Support'];
+  return !helpdeskLinks.includes(linkLabel);
 };
 
 module.exports = {
@@ -32,8 +334,18 @@ module.exports = {
   feedbackUrl,
   manageUrl,
   physicianCompareUrl,
+  registrationUrl,
   performanceFeedbackUrl,
   facilityBasedPreviewUrl,
   handleNavigation,
   reportsPortalUrl,
+  facilityBasedPreviewBaseUrl,
+  viewingToolUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
+  loadSideNavContent,
 };

package/components/Tabs/TabPanel.js

@@ -0,0 +1,5 @@
+const TabPanel = ({ children }) => {
+  return children;
+};
+
+export default TabPanel;

package/components/Tabs/Tabs.js

@@ -0,0 +1,73 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import { TabList, Tab, TabPanel, useTabState } from 'ariakit/tab';
+
+function Tabs({ defaultSelectedId, children, onChange, selected }) {
+  const tab = useTabState({
+    defaultSelectedId: selected ?? defaultSelectedId,
+    selectOnMove: false,
+  });
+
+  const onTabClick = (tabHref, id) => {
+    if (tabHref) {
+      const currentUrl = new URL(window.location.href);
+      const newParams = new URLSearchParams(tabHref);
+      newParams.forEach((value, key) => {
+        currentUrl.searchParams.set(key, value);
+      });
+      window.history.replaceState(null, '', currentUrl);
+    }
+
+    if (onChange) {
+      onChange(id);
+    }
+  };
+
+  return (
+    <>
+      <div className="qpp-c-tabs qpp-c-tabs--mui">
+        <TabList state={tab} aria-label="qpp tabs">
+          {Children.map(children, (child) => (
+            <Tab
+              key={child.props.id}
+              id={child.props.id}
+              className="qpp-c-tabs__item"
+              disabled={child.props.disabled}
+              onClick={() => onTabClick(child.props.tabHref, child.props.id)}
+            >
+              {child.props.tab}
+            </Tab>
+          ))}
+        </TabList>
+      </div>
+      <div className="qpp-c-tabs__panel">
+        {Children.map(children, (child) => (
+          <TabPanel
+            key={child.props.id}
+            state={tab}
+            tabId={child.props.id}
+            className={child.props.className}
+            disabled={child.props.disabled}
+          >
+            {child.props.children}
+          </TabPanel>
+        ))}
+      </div>
+    </>
+  );
+}
+
+Tabs.propTypes = {
+  defaultSelectedId: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  onChange: PropTypes.func,
+  selected: PropTypes.string,
+};
+
+Tabs.defaultProps = {
+  defaultSelectedId: undefined,
+  onChange: undefined,
+  selected: undefined,
+};
+
+export default Tabs;

package/components/TextInput/index.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const TextInput = ({
+  id,
+  name,
+  placeholder,
+  disabled,
+  required,
+  size,
+  className,
+  label,
+  minLength,
+  maxLength,
+  hint,
+  errorLabel,
+  error,
+  autoComplete,
+  onChange,
+  onKeyPress,
+  style,
+  dataTestId,
+  type,
+  innerRef,
+  number,
+  variant,
+  parentElement,
+  ...props
+}) => {
+  const ContainerElement = parentElement || 'span';
+  const numberProps = {
+    pattern: '[0-9]*',
+  };
+
+  const textInputClass = [
+    'qpp-c-text-input',
+    variant === 'success' && !error && 'qpp-c-text-input--success',
+    error && 'qpp-c-text-input--error',
+    size === 'big' && 'qpp-c-text-input--big',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <ContainerElement className="qppds ds-text-input-container">
+      {label && (
+        <label className="qpp-u-margin-bottom--8" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      <input
+        {...(number ? numberProps : {})}
+        style={style}
+        data-testid={dataTestId}
+        type={type}
+        className={textInputClass || ''}
+        id={id}
+        name={name}
+        placeholder={placeholder}
+        disabled={disabled}
+        minLength={minLength}
+        maxLength={maxLength}
+        required={required}
+        autoComplete={autoComplete}
+        onChange={onChange}
+        onKeyPress={onKeyPress}
+        ref={innerRef}
+        {...props}
+      />
+      {hint && <span className="qpp-hint-message">{hint}</span>}
+      {error && (
+        <span
+          aria-label={errorLabel}
+          role="alert"
+          className="qpp-error-message"
+        >
+          {error}
+        </span>
+      )}
+    </ContainerElement>
+  );
+};
+
+TextInput.propTypes = {
+  id: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  required: PropTypes.bool,
+  className: PropTypes.string,
+  minLength: PropTypes.string,
+  maxLength: PropTypes.string,
+  hint: PropTypes.string,
+  errorLabel: PropTypes.string,
+  error: PropTypes.string,
+  autoComplete: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  style: PropTypes.object,
+  dataTestId: PropTypes.string,
+  type: PropTypes.string,
+  innerRef: PropTypes.string,
+  number: PropTypes.bool,
+  variant: PropTypes.oneOf(['success']),
+  parentElement: PropTypes.string,
+  label: PropTypes.string,
+  size: PropTypes.oneOf(['big']),
+};
+
+TextInput.defaultProps = {
+  id: '',
+  name: '',
+  placeholder: null,
+  disabled: false,
+  required: false,
+  className: '',
+  minLength: '',
+  maxLength: '',
+  error: null,
+  errorLabel: null,
+  hint: null,
+  autoComplete: 'on',
+  onChange: () => null,
+  onKeyPress: () => null,
+  style: null,
+  dataTestId: '',
+  type: 'text',
+  innerRef: null,
+  number: false,
+  variant: null,
+  parentElement: 'span',
+  label: null,
+  size: null,
+};
+
+export default TextInput;

package/components/hooks/useGetConfig.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import axios from 'axios';
+import { useState, useEffect } from 'react';
+
+// The content is populated with the following priority order:
+// 1. Use the content in localStorage if it's there
+// 2. If not, make a call to get it from a QPPFE endpoint.
+//    Hydrate the localStorage item with the response if localStorage item doesn't match call content.
+// 3. If the call fails, use the default content
+const useGetConfig = ({
+  url = '',
+  localStorageName = '',
+  equalityCheckExclude = [],
+  timeout = 30,
+  defaultContent,
+}) => {
+  const [result, setResult] = useState();
+
+  if (!url || !localStorageName) {
+    throw new Error('Arguments for url and localStorageName are required');
+  }
+
+  useEffect(() => {
+    const storageContent = JSON.parse(localStorage.getItem(localStorageName));
+    if (
+      storageContent?.content &&
+      new Date().valueOf() < storageContent.expiration
+    ) {
+      setResult(storageContent);
+    } else {
+      const origin = window.location.origin;
+      axios
+        .get(`${origin}${url}`)
+        .then(({ data: { data = {} } }) => {
+          const expiration = new Date().valueOf() + timeout * 60 * 1000;
+          const storageItem = {
+            expiration,
+          };
+
+          if (
+            data?.content &&
+            storageContent?.content &&
+            Object.keys(data.content).every((key) => {
+              if (equalityCheckExclude.includes(key)) {
+                return true;
+              }
+              return data.content[key] === storageContent.content[key];
+            })
+          ) {
+            storageItem.content = storageContent.content;
+          } else {
+            storageItem.content = data.content;
+          }
+
+          localStorage.setItem(localStorageName, JSON.stringify(storageItem));
+          setResult(storageItem);
+        })
+        .catch((e) => {
+          setResult({ content: defaultContent, expiration: 0 });
+        });
+    }
+  }, []);
+
+  return result;
+};
+
+export const withGetConfig = (Component, options) => {
+  function WrappedComponent(props) {
+    const result = useGetConfig(options);
+    return <Component result={result} {...props} />;
+  }
+  return WrappedComponent;
+};
+
+export default useGetConfig;