rap-react/dist1/components/common/header/index.js

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Header = void 0;
var _react = _interopRequireWildcard(require("react"));
var _userContext = require("../../../context/user/userContext");
var _entityService = require("../../../services/entityService");
var _dialog = require("../dialog");
var _permissionService = require("../../../services/permissionService");
var _enums = require("../../../constants/enums");
var _jquery = _interopRequireDefault(require("jquery"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const Header = _ref => {
  let {
    brandCode
  } = _ref;
  const dialogRef = (0, _react.useRef)(null);
  const {
    state,
    logout
  } = (0, _react.useContext)(_userContext.UserContext);
  const [show, SetShow] = (0, _react.useState)(false);
  const [showOAMenu, SetShowOAMenu] = (0, _react.useState)(false);
  const [showSSRMenu, SetShowSSRMenu] = (0, _react.useState)(false);
  const [showRRMenu, SetShowRRMenu] = (0, _react.useState)(false);
  const [showRolesUsersMenu, SetShowRolesUsersMenu] = (0, _react.useState)(false);
  const [showLocationsMenu, SetShowLocationsMenu] = (0, _react.useState)(false);
  const dashboardUrl = (0, _entityService.getEntityUrl)("Dashboard");
  let distinctModules = state.user.distinctModules;
  const moduleNames = {
    OrderAheadStatusModule: "OrderAheadStatus",
    ManageRolesAndUsersModule: "ManageRolesAndUsers",
    SmartSellReportingModule: "SmartSellReporting",
    RevenueManagement: "RevenueManagement",
    Locations: "Locations"
  };
  const handleLogout = e => {
    logout();
  };
  const handleToggle = () => {
    // SetShow(current => !current);
    SetShow(!show);
    SetShowOAMenu(false);
    SetShowSSRMenu(false);
    SetShowRolesUsersMenu(false);
    SetShowLocationsMenu(false);
  };
  const ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    let handler = e => {
      if (!ref.current.contains(e.target)) {
        SetShow(false);
      }
    };
    document.addEventListener("mousedown", handler);
    return () => {
      document.removeEventListener("mousedown", handler);
    };
  }, []);
  const handleOAmenu = () => {
    SetShowOAMenu(!showOAMenu);
  };
  const handleSSRMenu = () => {
    SetShowSSRMenu(!showSSRMenu);
  };
  const handleRRMenu = () => {
    SetShowRRMenu(!showRRMenu);
  };
  const handleRolesUsersMenu = () => {
    SetShowRolesUsersMenu(!showRolesUsersMenu);
  };
  const handleLocationsMenu = () => {
    SetShowLocationsMenu(!showLocationsMenu);
  };
  const canResetPassword = () => {
    var _state$user;
    const loginUserType = state === null || state === void 0 || (_state$user = state.user) === null || _state$user === void 0 || (_state$user = _state$user.userProfile) === null || _state$user === void 0 || (_state$user = _state$user.loginUserType) === null || _state$user === void 0 ? void 0 : _state$user.toUpperCase();
    if (loginUserType === "BREAKGLASS" || loginUserType === "FRMUSER") {
      var _state$user$userProfi, _state$user2;
      return (_state$user$userProfi = state === null || state === void 0 || (_state$user2 = state.user) === null || _state$user2 === void 0 || (_state$user2 = _state$user2.userProfile) === null || _state$user2 === void 0 ? void 0 : _state$user2.isPrimaryBrand) !== null && _state$user$userProfi !== void 0 ? _state$user$userProfi : false;
    }
    return false;
  };
  const canSwitchBrand = () => {
    var _state$user3;
    const hasMultipleBrands = state === null || state === void 0 || (_state$user3 = state.user) === null || _state$user3 === void 0 || (_state$user3 = _state$user3.userProfile) === null || _state$user3 === void 0 ? void 0 : _state$user3.hasMultipleBrands;
    if (hasMultipleBrands !== undefined && hasMultipleBrands === true) {
      return true;
    }
    return false;
  };
  const getDashboard = () => {
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "menu-accordian",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "menu-acc-head",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
              href: dashboardUrl,
              children: "Home"
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "menu-any-body"
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "dd-link-seperator"
      })]
    });
  };
  const getModuleEntities = mName => {
    const privileges = state.user.privileges;
    let values = privileges.filter(x => x.moduleName === mName && x.showInMenu === true);
    values = values.sort((a, b) => a.order - b.order);
    return values;
  };
  const getEntityName = (eName, eDescription) => {
    switch (eName) {
      case _enums.entityNames.ROLEMANAGEMENT:
        return "Roles";
      case _enums.entityNames.USERMANAGEMENT:
        return "Users";
      case _enums.entityNames.GROUPMANAGEMENT:
        return "Groups";
      default:
        return eDescription;
    }
  };
  const getModuleEntity = (entity, i) => {
    var _state$user4;
    const entityName = entity.entityName;
    const displayName = getEntityName(entity.entityName, entity.entityDescription);
    const url = (0, _entityService.getEntityUrl)(entityName);
    const showEntity = (0, _permissionService.hasAccess)(state === null || state === void 0 || (_state$user4 = state.user) === null || _state$user4 === void 0 ? void 0 : _state$user4.privileges, entityName, _enums.accessTypes.READ);
    if (showEntity) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
          href: url,
          "data-value": entityName,
          className: "menu-link-block w-inline-block",
          tabIndex: "0",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            children: displayName
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "dd-link-seperator"
        })]
      }, i);
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {});
  };
  const getClassHandler = mName => {
    if (mName === moduleNames.OrderAheadStatusModule) {
      handleOAmenu();
    }
    if (mName === moduleNames.ManageRolesAndUsersModule) {
      handleRolesUsersMenu();
    }
    if (mName === moduleNames.SmartSellReportingModule) {
      handleSSRMenu();
    }
    if (mName === moduleNames.RevenueManagement) {
      handleRRMenu();
    }
    if (mName === moduleNames.Locations) {
      handleLocationsMenu();
    }
  };
  const getClassVariable = (mName, mainClsName, trueClsName, falseClsName) => {
    let bValue = false;
    switch (mName) {
      case moduleNames.ManageRolesAndUsersModule:
        {
          bValue = showRolesUsersMenu;
          break;
        }
      case moduleNames.Locations:
        {
          bValue = showLocationsMenu;
          break;
        }
      case moduleNames.SmartSellReportingModule:
        {
          bValue = showSSRMenu;
          break;
        }
      case moduleNames.RevenueManagement:
        {
          bValue = showRRMenu;
          break;
        }
      case moduleNames.OrderAheadStatusModule:
      default:
        {
          bValue = showOAMenu;
          break;
        }
    }
    return mainClsName + " " + (bValue === true ? trueClsName : falseClsName);
  };
  const hasAtleastTwoModuleAccess = () => {
    const privileges = state.user.privileges;
    let modules = privileges.filter(x => x.showInMenu === true && x.canRead === true);
    let moduleNames = [];
    for (let c = 0; c < modules.length; c++) {
      let m = modules[c];
      if (moduleNames.indexOf(m.moduleName) === -1) {
        moduleNames.push(m.moduleName);
      }
    }
    return moduleNames.length > 1;
  };
  const getModule = (obj, k) => {
    let module = obj;
    let moduleName = obj.moduleName;
    let moduleDisplayName = module.moduleDescription;
    let moduleEntities = getModuleEntities(moduleName);
    let accessibleEntities = moduleEntities.filter(x => x.showInMenu === true && x.canRead === true);
    if (accessibleEntities.length > 0) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "menu-accordian",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "menu-acc-head",
          onClick: () => {
            getClassHandler(moduleName);
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            children: moduleDisplayName
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
            loading: "lazy",
            alt: "",
            className: getClassVariable(moduleName, "menu-acc-icon", "expand", "")
          })]
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: getClassVariable(moduleName, "menu-acc-body", "", "collapse"),
          children: moduleEntities.map((entity, i) => {
            return getModuleEntity(entity, i);
          })
        })]
      })
    }, k);
  };
  const getName = () => {
    var _state$user5, _userProfile$firstNam, _userProfile$lastName;
    let userProfile = state === null || state === void 0 || (_state$user5 = state.user) === null || _state$user5 === void 0 ? void 0 : _state$user5.userProfile;
    let firstName = (_userProfile$firstNam = userProfile === null || userProfile === void 0 ? void 0 : userProfile.firstName) !== null && _userProfile$firstNam !== void 0 ? _userProfile$firstNam : "";
    let lastName = (_userProfile$lastName = userProfile === null || userProfile === void 0 ? void 0 : userProfile.lastName) !== null && _userProfile$lastName !== void 0 ? _userProfile$lastName : "";
    let name = firstName + (lastName.length > 0 ? " " + lastName : "");
    return name;
  };
  const getInitials = () => {
    var _state$user6, _userProfile$firstNam2, _userProfile$lastName2;
    let userProfile = state === null || state === void 0 || (_state$user6 = state.user) === null || _state$user6 === void 0 ? void 0 : _state$user6.userProfile;
    let firstName = (_userProfile$firstNam2 = userProfile === null || userProfile === void 0 ? void 0 : userProfile.firstName) !== null && _userProfile$firstNam2 !== void 0 ? _userProfile$firstNam2 : "";
    let lastName = (_userProfile$lastName2 = userProfile === null || userProfile === void 0 ? void 0 : userProfile.lastName) !== null && _userProfile$lastName2 !== void 0 ? _userProfile$lastName2 : "";
    let initials = (firstName === null || firstName === void 0 ? void 0 : firstName.slice(0, 1)) + lastName.slice(0, 1);
    return initials;
  };
  const getDisplayRoleName = () => {
    var _state$user7;
    let userProfile = state === null || state === void 0 || (_state$user7 = state.user) === null || _state$user7 === void 0 ? void 0 : _state$user7.userProfile;
    return userProfile === null || userProfile === void 0 ? void 0 : userProfile.userRoleType;
  };
  const onResetPassword = () => {
    SetShow(false);
    dialogRef.current.handleResetPassword();
  };
  const onSwitchBrand = () => {
    var _state$user8, _state$user9;
    const completeApplicationUrl = "".concat(process.env.REACT_APP_GENERIC_APP_URL, "ExternalBrandSelection");
    const token = state === null || state === void 0 ? void 0 : state.token;
    const brandAPIUrl = process.env.REACT_APP_AUTH_API_PRIVATE_URL;
    const isCorporateUser = (state === null || state === void 0 || (_state$user8 = state.user) === null || _state$user8 === void 0 || (_state$user8 = _state$user8.userProfile) === null || _state$user8 === void 0 || (_state$user8 = _state$user8.loginUserType) === null || _state$user8 === void 0 ? void 0 : _state$user8.toUpperCase()) === "OKTACORPORATE";
    const corpBrandCode = state === null || state === void 0 || (_state$user9 = state.user) === null || _state$user9 === void 0 || (_state$user9 = _state$user9.userProfile) === null || _state$user9 === void 0 ? void 0 : _state$user9.corpBrandCode;
    const frm = (0, _jquery.default)("form[data-name=form-hidden");
    const getHiddenElement = name => {
      return (0, _jquery.default)(frm).find("input[type=hidden][name=" + name + "]");
    };
    const setHiddenElementValue = (name, value) => {
      let hiddenElement = getHiddenElement(name);
      hiddenElement.val(value);
    };
    const fnSubmitToSinglePageApp = () => {
      setHiddenElementValue("hdnToken", token);
      setHiddenElementValue("hdnIsCorporateUser", isCorporateUser);
      setHiddenElementValue("hdnBrandAPIUrl", brandAPIUrl);
      setHiddenElementValue("hdnCorpBrandCode", corpBrandCode);
      frm.attr("action", completeApplicationUrl);
      frm.attr("method", "post");
      frm[0].submit();
    };
    fnSubmitToSinglePageApp();
  };
  const onSendFeedback = () => {
    SetShow(false);
    dialogRef.current.handleSendFeedback();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dialog.DialogBox, {
      ref: dialogRef
    }), canSwitchBrand() ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "blank-container",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
        "data-name": "form-hidden",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          type: "hidden",
          name: "hdnToken",
          value: ""
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          type: "hidden",
          name: "hdnBrandAPIUrl",
          value: ""
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          type: "hidden",
          name: "hdnIsCorporateUser",
          value: ""
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
          type: "hidden",
          name: "hdnCorpBrandCode",
          value: ""
        })]
      })
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "blank-container"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "dashboard-header",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "container menu",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "dashboard-header",
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
            className: "container menu",
            children: [hasAtleastTwoModuleAccess() && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
              href: dashboardUrl,
              className: "main-logo-wrapper w-inline-block",
              children: " "
            }), hasAtleastTwoModuleAccess() === false && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "main-logo-wrapper w-inline-block"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "menu-link-wrapper",
              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                ref: ref,
                "data-hover": "false",
                "data-delay": "0",
                className: "menu-dropdown w-dropdown",
                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                  className: "menu-dd-toggle w-dropdown-toggle",
                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                    className: "hamburger-menu",
                    onClick: event => {
                      handleToggle(event);
                    },
                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                      className: "ham-line"
                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                      className: "ham-line"
                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                      className: "ham-line"
                    })]
                  })
                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
                  className: "menu-dd-list w-dropdown-list ".concat(show ? "w--open" : "w-close"),
                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                    className: "dd-triangle"
                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                    className: "dd-link-wrapper",
                    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                      className: "menu-profile-header",
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        className: "user-profile-icon",
                        children: getInitials()
                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                        className: "user-profile-title",
                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                          className: "user-title",
                          children: getName()
                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                          className: "user-role",
                          children: getDisplayRoleName()
                        })]
                      })]
                    }), hasAtleastTwoModuleAccess() && getDashboard(), distinctModules.length > 0 && distinctModules.map((obj, k) => {
                      return getModule(obj, k);
                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                      className: "dd-link-seperator"
                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                      onClick: onSendFeedback,
                      className: "menu-link-block w-inline-block",
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        className: "dd-link-icon feedback"
                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        children: "Feedback/Support"
                      })]
                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                      className: "dd-link-seperator"
                    }), canResetPassword() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                        onClick: onResetPassword,
                        className: "menu-link-block w-inline-block",
                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                          className: "dd-link-icon"
                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                          children: "Reset Password"
                        })]
                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        className: "dd-link-seperator"
                      })]
                    }), canSwitchBrand() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                        onClick: onSwitchBrand,
                        className: "menu-link-block w-inline-block",
                        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                          className: "dd-link-icon dd-link-switchbrand"
                        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                          children: "Switch Brand"
                        })]
                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        className: "dd-link-seperator"
                      })]
                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                      onClick: handleLogout,
                      className: "menu-link-block w-inline-block",
                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        className: "dd-link-icon logout"
                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                        children: "Logout"
                      })]
                    })]
                  })]
                })]
              })
            })]
          })
        })
      })
    })]
  });
};
exports.Header = Header;
var _default = exports.default = Header;