qpp-style 2.1.13 → 2.2.0-sm.0

package/components/SideNav/helpers.js

@@ -0,0 +1,399 @@
+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, isContentMgmtRole } from "./Content/SelectRole/utils";
+
+const submissionsUrl = "/user/submissions";
+const dashboardUrl = "/user/dashboard";
+const manageUrl = "/user/manage-access";
+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) {
+    return `${feedbackUrl}/${performanceYear}`;
+  } else {
+    return feedbackUrl;
+  }
+};
+
+const facilityBasedPreviewUrl = (performanceYear) => {
+  return `${facilityBasedPreviewBaseUrl}/${performanceYear}`;
+};
+
+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,
+    qpp_has_authorizations,
+    qpp_is_dev_pre,
+  } = 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");
+    }
+    if (isContentMgmtRole(element)) {
+      return activeRoles.add("content manager");
+    }
+    return activeRoles.add(element);
+  });
+
+  if (qpp_has_authorizations === "true") {
+    activeRoles.add("qpp user");
+  }
+
+  if (qpp_is_dev_pre === "true") {
+    activeRoles.clear(); // reset roles since there is no dropdown in devpre
+    activeRoles.add("devpre user");
+  }
+
+  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);
+};
+
+/**
+ * Sets the qpp_side_nav_expanded cookie value
+ * @param {Document} document object
+ * @param {string} value
+ * @returns {void}
+ */
+const setSideNavExpanded = (_document, value) => {
+  const secure = _document.location.protocol === "https:";
+  _document.cookie = cookie.serialize("qpp_side_nav_expanded", value, {
+    path: "/",
+    secure,
+  });
+};
+
+/**
+ * Check if sidenav is expanded
+ * @param {Document} document object
+ * @returns {boolean}
+ */
+const isSideNavExpanded = (_document) => {
+  const parsedCookies = cookie.parse(_document.cookie);
+  if (parsedCookies.qpp_side_nav_expanded === undefined) {
+    setSideNavExpanded(_document, "true");
+    return true;
+  }
+  return parsedCookies.qpp_side_nav_expanded === "true";
+};
+
+module.exports = {
+  submissionsUrl,
+  dashboardUrl,
+  feedbackUrl,
+  manageUrl,
+  physicianCompareUrl,
+  registrationUrl,
+  performanceFeedbackUrl,
+  facilityBasedPreviewUrl,
+  handleNavigation,
+  reportsPortalUrl,
+  facilityBasedPreviewBaseUrl,
+  viewingToolUrl,
+  loadUserPermissions,
+  getUrlConditionMap,
+  isMultiRoleUser,
+  getIcon,
+  isImpersonating,
+  isImpersonationLink,
+  loadSideNavContent,
+  setSideNavExpanded,
+  isSideNavExpanded,
+};

package/components/SideNav/index.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "react-dom";
+import { SideNavUI } from "./UI";
+
+const SideNav = (options = {}) => {
+  const {
+    config,
+    isAltStyle,
+    isExpanded,
+    items,
+    onCollapsed,
+    onExpanded,
+    rootElement,
+  } = options;
+
+  return render(
+    <SideNavUI
+      onExpanded={onExpanded}
+      onCollapsed={onCollapsed}
+      isExpanded={isExpanded}
+      config={config}
+      items={items}
+      isAltStyle={isAltStyle}
+    />,
+    rootElement
+  );
+};
+
+export default SideNav;

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;