@copart/ops-tool-kit 1.12.0-alpha.14 → 1.12.0-alpha.15

package/dist/ops-tool-kit.js

@@ -32,7 +32,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$7 = "1.12.0-alpha.14";
+const version$7 = "1.12.0-alpha.15";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -23088,6 +23088,37 @@ var FeedbackButton = function FeedbackButton(props) {
   }));
 };
 
+var FLAG_URL_PREFIX = '/images/flag_icons/flag_';
+var HEIGHT_22PX = {
+  height: '22px'
+};
+var HEIGHT_30PX = {
+  height: '30px'
+};
+var COUNTRY_CODES = {
+  ca: 'canada'
+};
+
+var code = function code(countryCode) {
+  return COUNTRY_CODES[countryCode] || countryCode;
+};
+var flagUrl = function flagUrl(countryCode) {
+  return "".concat(FLAG_URL_PREFIX).concat((code(countryCode) || 'us').toLowerCase(), ".png");
+};
+var heightStyle = function heightStyle(type) {
+  return type !== 'cas' ? HEIGHT_22PX : HEIGHT_30PX;
+};
+
+var Flag$1 = function Flag(props) {
+  return /*#__PURE__*/React__namespace.createElement("img", {
+    "data-testid": "flag",
+    alt: "Flag",
+    src: flagUrl(props.countryCode),
+    style: heightStyle(props.type),
+    "data-e2e": "cc-Flag"
+  });
+};
+
 var onRenderItem = function onRenderItem(item) {
   return item.render();
 };
@@ -31543,6 +31574,18 @@ var Notifications = function Notifications(_ref) {
   }) : null);
 };
 
+var capitalizeAndReplaceUnderscores = function capitalizeAndReplaceUnderscores(role) {
+  return role.split('_').filter(Boolean).map(function (word) {
+    return word[0].toUpperCase() + word.substr(1);
+  }).join(' ');
+};
+var formatUK = function formatUK(role) {
+  return role.startsWith('uk') ? "UK".concat(role.substr(2)) : role;
+};
+var formatRole = function formatRole(role) {
+  return capitalizeAndReplaceUnderscores(formatUK(role));
+};
+
 var _styleModuleImportMap$2 = {
   "./AppBar.css": {
     "root": "utilities_ops-app-frame_AppBarComponent_AppBar--root",
@@ -31667,15 +31710,15 @@ var overflowIconStyles = {
 };
 var generateAppBarElements = function generateAppBarElements(props, showCallout) {
   var _window$toolkitEnv2;
-  props.countryCode;
-    props.role;
-    var yardNumber = props.yardNumber;
+  var countryCode = props.countryCode,
+    role = props.role,
+    yardNumber = props.yardNumber;
     props.phoneNumber;
     props.phoneStatusObject;
     props.togglePhoneAvailability;
-    var handleHelpClick = props.handleHelpClick;
-    props.type;
-    var config = props.config,
+    var handleHelpClick = props.handleHelpClick,
+    type = props.type,
+    config = props.config,
     _props$navigateTo = props.navigateTo,
     navigateTo = _props$navigateTo === void 0 ? function (url) {} : _props$navigateTo;
     props.isMihelpEnabled;
@@ -31910,6 +31953,37 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         variant: "regular"
       }), ' ', /*#__PURE__*/React__default["default"].createElement("span", null, getLanguage(storage$1.activeLanguage)));
     }
+  }, {
+    key: 'roleAndFlag',
+    name: formatRole(role),
+    onRender: function onRender(_, dismissMenu) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+        onClick: function onClick() {
+          navigateTo('/settings');
+          dismissMenu();
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(OverFlowIcon, {
+        name: "supervised_user_circle"
+      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
+        text: formatRole(role)
+      })));
+    },
+    renderIf: config.includes('role') || config.includes('flag'),
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        id: "roleItem",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--item utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag",
+        onClick: showSettingsInAppbar ? function () {
+          return handleIconClick(ICONS.SETTINGS);
+        } : navigateTo('/settings')
+      }, config.includes('flag') ? /*#__PURE__*/React__default["default"].createElement(Flag$1, {
+        countryCode: countryCode,
+        type: type
+      }) : null, config.includes('role') ? /*#__PURE__*/React__default["default"].createElement("div", {
+        "data-testid": "role"
+      }, formatRole(role)) : null);
+    }
   }, {
     key: 'facility',
     name: yardNumber,