@copart/ops-tool-kit 1.12.0-alpha.31 → 1.12.0-alpha.33

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.31";
+const version$7 = "1.12.0-alpha.33";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -21528,11 +21528,12 @@ var MobileMenu = function MobileMenu(props) {
   var closeSidebar = props.closeSidebar,
     logout = props.logout,
     items = props.items,
-    notifications = props.notifications;
+    notifications = props.notifications,
+    sideBarTopValue = props.sideBarTopValue;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_MobileMenu_MobileMenu--mobileMenuSidebarWrapper",
     style: {
-      top: notifications !== null && notifications !== void 0 && notifications.length ? '113px' : '48px'
+      top: notifications !== null && notifications !== void 0 && notifications.length ? "".concat(sideBarTopValue, "px") : '48px'
     },
     onClick: closeSidebar
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23452,7 +23453,7 @@ var unique = function unique(roles) {
 };
 
 // Sort roles based on session country
-var filterRoles$3 = function filterRoles(roles) {
+var filterRoles$4 = function filterRoles(roles) {
   var filtered = unique(roles).filter(function (role) {
     return role.roleName;
   });
@@ -23472,7 +23473,7 @@ var RoleSelector$1 = function RoleSelector(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
-    options: filterRoles$3(roles),
+    options: filterRoles$4(roles),
     onChange: function onChange(value) {
       var selectedValue = _typeof(value) === 'object' ? frontEndUtils.regex.beautifyRoleText(value.roleName) : value;
       var option = _typeof(value) === 'object' ? value : null;
@@ -23701,7 +23702,7 @@ var formatPhoneNumber = function formatPhoneNumber() {
   return "".concat(formattedNumber, " * ").concat(extension);
 };
 
-var EMPTY_PRINTERS$2 = {
+var EMPTY_PRINTERS$3 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -23730,7 +23731,7 @@ var sessionOrDefault = function sessionOrDefault(label) {
   return function () {
     var printer_name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var sessionDashboard = storage$1.getSessionItem('dashboard');
-    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$2;
+    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$3;
     var printerName = sessionDashboard.printers[label];
     return !isEmpty$2(printerName) ? printerName : printer_name;
   };
@@ -23759,14 +23760,14 @@ var getActivePrinters = (function (printersData) {
 var css_248z$9 = ".utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--title {\r\n  font-weight: 500;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: flex-end;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow .ms-TextField-errorMessage {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--textField {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: flex-end;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix {\r\n  margin: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--testCallButton {\r\n  margin-left: 12px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix8 {\r\n  margin: auto 2px auto 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings input {\r\n  margin-right: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--smallInfo {\r\n  margin-top: 2px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings small {\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator {\r\n  position: absolute;\r\n  right: 5px;\r\n  height: 30px;\r\n  display: flex;\r\n  bottom: 1px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator .ms-Spinner-circle {\r\n  max-width: 20px !important;\r\n  max-height: 20px !important;\r\n  right: 5px;\r\n}\r\n\r\nmaterial-icon[name='check'] {\r\n  color: rgb(100, 181, 10);\r\n  font-size: 12px;\r\n}\r\n\r\nmaterial-icon[name='error_outline'] {\r\n  color: #a80000;\r\n  font-size: 12px;\r\n}\r\n";
 styleInject(css_248z$9);
 
-var EMPTY_PRINTERS$1 = {
+var EMPTY_PRINTERS$2 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
   windshield_label_printers: '',
   text_printers: ''
 };
-var getHierarchyLevel = function getHierarchyLevel(levelId) {
+var getHierarchyLevel$1 = function getHierarchyLevel(levelId) {
   switch (levelId) {
     case 0:
       return 'country';
@@ -23776,25 +23777,25 @@ var getHierarchyLevel = function getHierarchyLevel(levelId) {
       return '';
   }
 };
-var isInvalid = either$1(isNil$1, isEmpty$2);
-var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
+var isInvalid$1 = either$1(isNil$1, isEmpty$2);
+var keysToBeDeleted$1 = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
 
 // Handles changes to all inputs.
-var handleInputChange$1 = function handleInputChange(self) {
+var handleInputChange$2 = function handleInputChange(self) {
   var yardCountryCode = self.state.selectedCountryA3code;
   var handleChange = function handleChange(name) {
     return function (value) {
       if (name === 'selectedRole') {
         var selectedValue = value.selectedValue,
           option = value.option;
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$2, 'printers');
         return self.setState({
           selectedRoleOption: option,
           selectedRole: selectedValue
         });
       } else if (name === 'selectedYardNumber') {
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
-        self.updatePhoneNumber(activePhoneNumber$1());
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$2, 'printers');
+        self.updatePhoneNumber(activePhoneNumber$2());
 
         // Ensure we fetch the proper roles per the entered yard
         var oldSelectedYard = self.state.selectedYardNumber;
@@ -23807,7 +23808,7 @@ var handleInputChange$1 = function handleInputChange(self) {
           });
           if (value !== oldSelectedYard && Boolean(value)) {
             self.setState({
-              printersData: EMPTY_PRINTERS$1
+              printersData: EMPTY_PRINTERS$2
             });
             self.getActivePrinters(value, false, yardCountryCode);
           }
@@ -23829,16 +23830,16 @@ var handleInputChange$1 = function handleInputChange(self) {
     return final;
   }, {});
 };
-var getSelectedYard = function getSelectedYard(selectedNumber) {
+var getSelectedYard$1 = function getSelectedYard(selectedNumber) {
   return storage$1.getLocalItem('login').yardList.find(function (yard) {
     return yard.number == selectedNumber;
   });
 };
-var pickUserSecurityLevel = function pickUserSecurityLevel() {
+var pickUserSecurityLevel$1 = function pickUserSecurityLevel() {
   var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return obj.userSecurityLevel || '0';
 };
-var saveSettings$1 = function saveSettings(self) {
+var saveSettings$2 = function saveSettings(self) {
   return /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var _yard$yard_country_co, _yard$yard_country_co2;
@@ -23860,7 +23861,7 @@ var saveSettings$1 = function saveSettings(self) {
             };
             dashboardState = storage$1.getLocalItem('dashboard');
             cleanedDashboardState = pickBy$1(function (val, key) {
-              return !keysToBeDeleted.includes(key);
+              return !keysToBeDeleted$1.includes(key);
             }, dashboardState);
             storage$1.setLocalItem('dashboard', cleanedDashboardState);
             toPairs$1(self.state).forEach(function (_ref4) {
@@ -23886,11 +23887,11 @@ var saveSettings$1 = function saveSettings(self) {
             if (roleOptionFromState) {
               _roleOptionFromState$ = roleOptionFromState.levelId, levelId = _roleOptionFromState$ === void 0 ? -1 : _roleOptionFromState$, _roleOptionFromState$2 = roleOptionFromState.hierarchyId, hierarchyId = _roleOptionFromState$2 === void 0 ? -1 : _roleOptionFromState$2;
               storage$1.setLocalItem('settings', {
-                level: getHierarchyLevel(levelId),
+                level: getHierarchyLevel$1(levelId),
                 id: hierarchyId
               }, 'selectedHierarchy');
             }
-            if (!(isInvalid(selectedYard) || isInvalid(selectedLanguage) || isInvalid(selectedCurrency))) {
+            if (!(isInvalid$1(selectedYard) || isInvalid$1(selectedLanguage) || isInvalid$1(selectedCurrency))) {
               _context.next = 13;
               break;
             }
@@ -23913,7 +23914,7 @@ var saveSettings$1 = function saveSettings(self) {
             storage$1.setLocalItem('settings', roleName, 'selectedRole');
             storage$1.setLocalItem('lastSelectedYard', yard);
             storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
-            securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
+            securityLevel = pickUserSecurityLevel$1(getSelectedYard$1(selectedYard));
             storage$1.setSessionItem('securityLevel', Number(securityLevel));
             _context.next = 24;
             return fetcher.getUserScopes();
@@ -23955,51 +23956,51 @@ var saveSettings$1 = function saveSettings(self) {
     };
   }();
 };
-var selectedYardNumber$1 = function selectedYardNumber() {
+var selectedYardNumber$2 = function selectedYardNumber() {
   var _storage$getSessionIt;
   return (_storage$getSessionIt = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt === void 0 ? void 0 : _storage$getSessionIt.selectedYard;
 };
-var selectedCountry = function selectedCountry() {
+var selectedCountry$1 = function selectedCountry() {
   var _storage$getSessionIt2;
   return ((_storage$getSessionIt2 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt2 === void 0 ? void 0 : _storage$getSessionIt2.selectedCountry) || 'US';
 };
-var selectedLanguage = function selectedLanguage() {
+var selectedLanguage$1 = function selectedLanguage() {
   var _storage$getSessionIt3;
   return ((_storage$getSessionIt3 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt3 === void 0 ? void 0 : _storage$getSessionIt3.language) || 'en';
 };
-var selectedCurrency = function selectedCurrency() {
+var selectedCurrency$1 = function selectedCurrency() {
   var _storage$getSessionIt4;
   return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCurrency) || 'USD';
 };
-var selectedCountryA3code$1 = function selectedCountryA3code() {
+var selectedCountryA3code$2 = function selectedCountryA3code() {
   var _storage$getSessionIt5;
   return ((_storage$getSessionIt5 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt5 === void 0 ? void 0 : _storage$getSessionIt5.selectedCountryA3code) || 'USA';
 };
-var activePrinters$1 = function activePrinters() {
+var activePrinters$2 = function activePrinters() {
   var _storage$getLocalItem;
-  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS$1;
+  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS$2;
 };
-var makeKeyValue$1 = function makeKeyValue(final, target) {
+var makeKeyValue$2 = function makeKeyValue(final, target) {
   final[target.label] = target.printer_name;
   return final;
 };
-var formatActivePrintersForState$1 = function formatActivePrintersForState() {
+var formatActivePrintersForState$2 = function formatActivePrintersForState() {
   var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var printers = Array.isArray(activePrinters) ? activePrinters : [];
-  return printers.reduce(makeKeyValue$1, {});
+  return printers.reduce(makeKeyValue$2, {});
 };
-var activePhoneNumber$1 = function activePhoneNumber() {
+var activePhoneNumber$2 = function activePhoneNumber() {
   var _storage$getLocalItem2;
   return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
 };
-var ringCentralEnabled$1 = function ringCentralEnabled() {
+var ringCentralEnabled$2 = function ringCentralEnabled() {
   var _storage$getLocalItem3;
   return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
 };
-var filterRoles$2 = function filterRoles(roles, countryCode) {
+var filterRoles$3 = function filterRoles(roles, countryCode) {
   return compose(uniqBy$1(prop$1('roleName')), filter$1(propEq$1('countryCode', countryCode)))(roles);
 };
-var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
+var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
   _inherits$2(SettingsView, _React$Component);
   var _super = _createSuper(SettingsView);
   function SettingsView() {
@@ -24010,22 +24011,22 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$1(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber$1(),
-      ringCentralEnabled: ringCentralEnabled$1(),
-      selectedYardNumber: selectedYardNumber$1(),
-      selectedCountry: selectedCountry(),
-      selectedCountryA3code: selectedCountryA3code$1(),
-      selectedLanguage: selectedLanguage(),
-      selectedCurrency: selectedCurrency(),
+      phoneNumber: activePhoneNumber$2(),
+      ringCentralEnabled: ringCentralEnabled$2(),
+      selectedYardNumber: selectedYardNumber$2(),
+      selectedCountry: selectedCountry$1(),
+      selectedCountryA3code: selectedCountryA3code$2(),
+      selectedLanguage: selectedLanguage$1(),
+      selectedCurrency: selectedCurrency$1(),
       roles: [],
       selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
-      printersData: EMPTY_PRINTERS$1,
+      printersData: EMPTY_PRINTERS$2,
       loadingPrinters: false,
       oldActivePrinters: null
-    }, EMPTY_PRINTERS$1));
+    }, EMPTY_PRINTERS$2));
     _defineProperty$1(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
       fetcher.getUserRoles(countryCode).then(function (_roles) {
-        var roles = filterRoles$2(_roles, countryCode);
+        var roles = filterRoles$3(_roles, countryCode);
         var selectedRole = _this.state.selectedRole;
         _this.setState({
           roles: roles
@@ -24069,12 +24070,12 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
                 showLoading: false
               });
               if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$1()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$2()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$2()) : _this.state.oldActivePrinters
                 }));
               } else {
                 response = getActivePrinters(printersData);
-                fromatted = formatActivePrintersForState$1(response);
+                fromatted = formatActivePrintersForState$2(response);
                 _this.setState(_objectSpread2({
                   oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
                 }, fromatted));
@@ -24094,8 +24095,8 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
         phoneNumber: phoneNumber
       });
     });
-    _defineProperty$1(_assertThisInitialized(_this), "handleInputChange", handleInputChange$1(_assertThisInitialized(_this)));
-    _defineProperty$1(_assertThisInitialized(_this), "saveSettings", saveSettings$1(_assertThisInitialized(_this)));
+    _defineProperty$1(_assertThisInitialized(_this), "handleInputChange", handleInputChange$2(_assertThisInitialized(_this)));
+    _defineProperty$1(_assertThisInitialized(_this), "saveSettings", saveSettings$2(_assertThisInitialized(_this)));
     _defineProperty$1(_assertThisInitialized(_this), "yardsHistory", new Map());
     _defineProperty$1(_assertThisInitialized(_this), "setPrinterData", function (name) {
       return function (value) {
@@ -24112,8 +24113,8 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
       getRCExtensionStatus().then(function (response) {
         response && resetPhoneSettingsBasedOnRCStatus(response);
         _this2.setState({
-          ringCentralEnabled: ringCentralEnabled$1(),
-          phoneNumber: activePhoneNumber$1()
+          ringCentralEnabled: ringCentralEnabled$2(),
+          phoneNumber: activePhoneNumber$2()
         });
       });
       this.getActivePrinters(this.state.selectedYardNumber, true, this.state.selectedCountryA3code);
@@ -24189,7 +24190,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var filterRoles$1 = function filterRoles(roles) {
+var filterRoles$2 = function filterRoles(roles) {
   return roles.filter(function (role) {
     return role.roleName;
   });
@@ -24206,7 +24207,7 @@ var RoleSelector = function RoleSelector(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
-    options: filterRoles$1(roles),
+    options: filterRoles$2(roles),
     onChange: function onChange(value) {
       var selectedValue = _typeof(value) === 'object' ? frontEndUtils.regex.beautifyRoleText(value.roleName) : value;
       var option = _typeof(value) === 'object' ? value : null;
@@ -24357,7 +24358,7 @@ var YardNumberMenu = function YardNumberMenu(_ref) {
   })));
 };
 
-var EMPTY_PRINTERS = {
+var EMPTY_PRINTERS$1 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -24366,7 +24367,7 @@ var EMPTY_PRINTERS = {
 };
 
 // Handles changes to all inputs.
-var handleInputChange = function handleInputChange(self) {
+var handleInputChange$1 = function handleInputChange(self) {
   var handleChange = function handleChange(name) {
     return /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {
@@ -24379,7 +24380,7 @@ var handleInputChange = function handleInputChange(self) {
                 break;
               }
               selectedValue = value.selectedValue, option = value.option;
-              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
+              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
               roleName = option && option.roleName || ''; //pathOr('', ['selectedRoleOption', 'roleName'], nextState)
               isValidRole = self.state.roles.find(function (role) {
                 return role.roleName === roleName;
@@ -24396,8 +24397,8 @@ var handleInputChange = function handleInputChange(self) {
                 hierarchies: hierarchies,
                 selectedHierarchyOption: null,
                 selectedYardNumber: null,
-                printersData: EMPTY_PRINTERS
-              }, EMPTY_PRINTERS));
+                printersData: EMPTY_PRINTERS$1
+              }, EMPTY_PRINTERS$1));
             case 10:
               return _context.abrupt("return", self.setState({
                 selectedRoleOption: option,
@@ -24408,7 +24409,7 @@ var handleInputChange = function handleInputChange(self) {
                 _context.next = 32;
                 break;
               }
-              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
+              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
               country = value.country, _value$yard = value.yard, yard = _value$yard === void 0 ? null : _value$yard;
               countryId = country && country.split('-')[0];
               if (!countryId) {
@@ -24441,8 +24442,8 @@ var handleInputChange = function handleInputChange(self) {
                   level: yard ? 'yard' : 'country'
                 },
                 selectedYardNumber: yard,
-                printersData: EMPTY_PRINTERS
-              }, EMPTY_PRINTERS));
+                printersData: EMPTY_PRINTERS$1
+              }, EMPTY_PRINTERS$1));
             case 30:
               _context.next = 43;
               break;
@@ -24451,7 +24452,7 @@ var handleInputChange = function handleInputChange(self) {
                 _context.next = 43;
                 break;
               }
-              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
+              storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
               if (!(value !== self.state.selectedYardNumber && Boolean(value))) {
                 _context.next = 42;
                 break;
@@ -24471,8 +24472,8 @@ var handleInputChange = function handleInputChange(self) {
               return _context.abrupt("return", self.setState(function (state) {
                 return _objectSpread2({
                   selectedYardNumber: value,
-                  printersData: EMPTY_PRINTERS
-                }, EMPTY_PRINTERS);
+                  printersData: EMPTY_PRINTERS$1
+                }, EMPTY_PRINTERS$1);
               }));
             case 43:
               self.setState(function (state) {
@@ -24494,7 +24495,7 @@ var handleInputChange = function handleInputChange(self) {
     return final;
   }, {});
 };
-var saveSettings = function saveSettings(self) {
+var saveSettings$1 = function saveSettings(self) {
   return /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
       var _yard$yard_country_co, _storage$getLocalItem, _yard$yard_country_co2;
@@ -24619,30 +24620,30 @@ var saveSettings = function saveSettings(self) {
     };
   }();
 };
-var selectedYardNumber = function selectedYardNumber() {
+var selectedYardNumber$1 = function selectedYardNumber() {
   return storage$1.activeYardNumber;
 };
-var selectedCountryA3code = function selectedCountryA3code() {
+var selectedCountryA3code$1 = function selectedCountryA3code() {
   var _storage$getSessionIt2;
   return ((_storage$getSessionIt2 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt2 === void 0 ? void 0 : _storage$getSessionIt2.selectedCountryA3code) || 'GBR';
 };
-var activePrinters = function activePrinters() {
-  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS;
+var activePrinters$1 = function activePrinters() {
+  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS$1;
 };
-var makeKeyValue = function makeKeyValue(final, target) {
+var makeKeyValue$1 = function makeKeyValue(final, target) {
   final[target.label] = target.printer_name;
   return final;
 };
-var formatActivePrintersForState = function formatActivePrintersForState() {
+var formatActivePrintersForState$1 = function formatActivePrintersForState() {
   var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var printers = Array.isArray(activePrinters) ? activePrinters : [];
-  return printers.reduce(makeKeyValue, {});
+  return printers.reduce(makeKeyValue$1, {});
 };
-var activePhoneNumber = function activePhoneNumber() {
+var activePhoneNumber$1 = function activePhoneNumber() {
   var _storage$getLocalItem2;
   return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
 };
-var ringCentralEnabled = function ringCentralEnabled() {
+var ringCentralEnabled$1 = function ringCentralEnabled() {
   var _storage$getLocalItem3;
   return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
 };
@@ -24679,10 +24680,10 @@ var getYardOptions = /*#__PURE__*/function () {
     return _ref7.apply(this, arguments);
   };
 }();
-var filterRoles = function filterRoles(roles, invalidCodes) {
+var filterRoles$1 = function filterRoles(roles, invalidCodes) {
   return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$3(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
 };
-var SettingsView = /*#__PURE__*/function (_React$Component) {
+var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
   _inherits$2(SettingsView, _React$Component);
   var _super = _createSuper(SettingsView);
   function SettingsView() {
@@ -24693,18 +24694,18 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$1(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber(),
-      ringCentralEnabled: ringCentralEnabled(),
-      selectedYardNumber: selectedYardNumber(),
-      selectedCountryA3code: selectedCountryA3code(),
+      phoneNumber: activePhoneNumber$1(),
+      ringCentralEnabled: ringCentralEnabled$1(),
+      selectedYardNumber: selectedYardNumber$1(),
+      selectedCountryA3code: selectedCountryA3code$1(),
       selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
       selectedHierarchy: storage$1.getLocalItem('settings', 'selectedHierarchy') || null,
       selectedHierarchyOption: storage$1.getLocalItem('settings', 'selectedHierarchyOption'),
       roles: [],
       hierarchies: [],
-      printersData: EMPTY_PRINTERS,
+      printersData: EMPTY_PRINTERS$1,
       oldActivePrinters: null
-    }, EMPTY_PRINTERS));
+    }, EMPTY_PRINTERS$1));
     _defineProperty$1(_assertThisInitialized(_this), "getRCAvailability", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var response;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
@@ -24716,8 +24717,8 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
             response = _context4.sent;
             resetPhoneSettingsBasedOnRCStatus(response);
             _this.setState({
-              ringCentralEnabled: ringCentralEnabled(),
-              phoneNumber: activePhoneNumber()
+              ringCentralEnabled: ringCentralEnabled$1(),
+              phoneNumber: activePhoneNumber$1()
             });
           case 5:
           case "end":
@@ -24750,12 +24751,12 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
                 showLoading: false
               });
               if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$1()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
                 }));
               } else {
                 _activePrinters = getActivePrinters(printersData);
-                update = formatActivePrintersForState(_activePrinters);
+                update = formatActivePrintersForState$1(_activePrinters);
                 _this.setState(_objectSpread2({
                   oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, update) : _this.state.oldActivePrinters
                 }, update));
@@ -24775,8 +24776,8 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
         phoneNumber: phoneNumber
       });
     });
-    _defineProperty$1(_assertThisInitialized(_this), "handleInputChange", handleInputChange(_assertThisInitialized(_this)));
-    _defineProperty$1(_assertThisInitialized(_this), "saveSettings", saveSettings(_assertThisInitialized(_this)));
+    _defineProperty$1(_assertThisInitialized(_this), "handleInputChange", handleInputChange$1(_assertThisInitialized(_this)));
+    _defineProperty$1(_assertThisInitialized(_this), "saveSettings", saveSettings$1(_assertThisInitialized(_this)));
     _defineProperty$1(_assertThisInitialized(_this), "setPrinterData", function (name) {
       return function (value) {
         _this.setState(_defineProperty$1({}, name, value));
@@ -24797,7 +24798,7 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
             case 2:
               _roles = _context6.sent;
               // MEA and UK are both valid in UK portal so filter out the rest
-              roles = filterRoles(_roles, ['CAN', 'BRA', 'USA', 'IND']);
+              roles = filterRoles$1(_roles, ['CAN', 'BRA', 'USA', 'IND']);
               _context6.next = 6;
               return fetcher.getHierarchyOptions(storage$1.userRole);
             case 6:
@@ -24908,7 +24909,390 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var css_248z$8 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 10px 10px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 20px;\r\n  gap: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  color: white;\r\n  width: 26px;\r\n  min-height: 26px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201f1e;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox * {\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a {\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  padding: 5px 5px;\r\n  min-height: 20px;\r\n  padding: 4px 5px 3px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i {\r\n  font-size: 20px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n  font-size: 12px;\r\n  align-items: center;\r\n  padding: 0px 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i {\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationCountContainer {\r\n  width: 50px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar.utilities_ops-announcements_Banner--notificationContainer {\r\n  padding: 8px 6px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  color: white;\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationInfoBox {\r\n  color: white;\r\n  width: 47px;\r\n  height: 47px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n.utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: auto;\r\n  min-height: auto;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer i {\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 0px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar i {\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-right: 10px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n  margin-top: 5px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  margin-left: 15px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n\r\n@media (max-width: 1760px) {\r\n  .utilities_ops-announcements_Banner--notificationBarContent input {\r\n    width: 331px !important;\r\n  }\r\n}\r\n";
+var EMPTY_PRINTERS = {
+  barcode_label_printers: '',
+  check_printers: '',
+  standard_printers: '',
+  windshield_label_printers: '',
+  text_printers: ''
+};
+var getHierarchyLevel = function getHierarchyLevel(levelId) {
+  switch (levelId) {
+    case 0:
+      return 'country';
+    case 100:
+      return 'yard';
+    default:
+      return '';
+  }
+};
+var isInvalid = either$1(isNil$1, isEmpty$2);
+var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
+
+// Handles changes to all inputs.
+var handleInputChange = function handleInputChange(self) {
+  var yardCountryCode = self.state.selectedCountryA3code;
+  var handleChange = function handleChange(name) {
+    return function (value) {
+      if (name === 'selectedRole') {
+        var selectedValue = value.selectedValue,
+          option = value.option;
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
+        return self.setState({
+          selectedRoleOption: option,
+          selectedRole: selectedValue
+        });
+      } else if (name === 'selectedYardNumber') {
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
+        self.updatePhoneNumber(activePhoneNumber());
+
+        // Ensure we fetch the proper roles per the entered yard
+        var oldSelectedYard = self.state.selectedYardNumber;
+        fetcher.getYardNumbers(value).then(function (yards) {
+          var currentYard = find$1(propEq$1('yard_number', parseInt(value)), yards);
+          if (currentYard) yardCountryCode = currentYard.yard_country_code;
+          self.fetchRoles(yardCountryCode);
+          self.setState({
+            selectedCountryA3code: yardCountryCode
+          });
+          if (value !== oldSelectedYard && Boolean(value)) {
+            self.setState({
+              printersData: EMPTY_PRINTERS
+            });
+            self.getActivePrinters(value, false, yardCountryCode);
+          }
+        });
+        return self.setState(function (state) {
+          return {
+            selectedRole: '',
+            selectedYardNumber: value
+          };
+        });
+      }
+      self.setState(function (state) {
+        return _defineProperty$1({}, name, value);
+      });
+    };
+  };
+  return Object.keys(self.state).reduce(function (final, key) {
+    final[key] = handleChange(key);
+    return final;
+  }, {});
+};
+var getSelectedYard = function getSelectedYard(selectedNumber) {
+  return storage$1.getLocalItem('login').yardList.find(function (yard) {
+    return yard.number == selectedNumber;
+  });
+};
+var pickUserSecurityLevel = function pickUserSecurityLevel() {
+  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return obj.userSecurityLevel || '0';
+};
+var saveSettings = function saveSettings(self) {
+  return /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var _yard$yard_country_co, _yard$yard_country_co2;
+      var printers, dashboardSessionState, oldSettings, dashboardState, cleanedDashboardState, _self$state, selectedYard, selectedRole, selectedLanguage, selectedCurrency, roles, roleOptionFromState, roleName, _roleOptionFromState$, levelId, _roleOptionFromState$2, hierarchyId, yard, securityLevel, userScopes, newSettings;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            printers = {}; // ******* Hack to be remved ******* create date July 12, 2019 *******
+            // Just a hack to ensure yard gets changed to avoid issue caused by proquote app which is using old toolkit
+            // remove this hack once pro quote app update its tool kit version to latest
+            dashboardSessionState = storage$1.getSessionItem('dashboard');
+            oldSettings = {
+              selectedCurrency: dashboardSessionState.selectedCurrency,
+              selectedYard: dashboardSessionState.selectedYard,
+              selectedCountry: dashboardSessionState.selectedCountry,
+              language: dashboardSessionState.language,
+              selectedRole: storage$1.getLocalItem('settings').selectedRole,
+              activePrinters: self.state.oldActivePrinters
+            };
+            dashboardState = storage$1.getLocalItem('dashboard');
+            cleanedDashboardState = pickBy$1(function (val, key) {
+              return !keysToBeDeleted.includes(key);
+            }, dashboardState);
+            storage$1.setLocalItem('dashboard', cleanedDashboardState);
+            toPairs$1(self.state).forEach(function (_ref4) {
+              var _ref5 = _slicedToArray(_ref4, 2),
+                key = _ref5[0],
+                value = _ref5[1];
+              if (key.endsWith('_printers')) {
+                printers[key] = (value || '').toUpperCase();
+              } else {
+                if (key === 'printersData') {
+                  value = JSON.stringify(value);
+                }
+                if (key === 'phoneNumber') {
+                  storage$1.setLocalItem('dashboard', value, 'phoneNumber');
+                }
+              }
+            });
+            _self$state = self.state, selectedYard = _self$state.selectedYardNumber, selectedRole = _self$state.selectedRole, selectedLanguage = _self$state.selectedLanguage, selectedCurrency = _self$state.selectedCurrency, roles = _self$state.roles, _self$state.selectedRoleOption;
+            roleOptionFromState = roles.find(function (roleOption) {
+              return frontEndUtils.regex.beautifyRoleText(roleOption.roleName) === selectedRole;
+            }) || head$1(roles);
+            roleName = propOr$1('', 'roleName', roleOptionFromState); // Update hierarchy on local storage when role changes
+            if (roleOptionFromState) {
+              _roleOptionFromState$ = roleOptionFromState.levelId, levelId = _roleOptionFromState$ === void 0 ? -1 : _roleOptionFromState$, _roleOptionFromState$2 = roleOptionFromState.hierarchyId, hierarchyId = _roleOptionFromState$2 === void 0 ? -1 : _roleOptionFromState$2;
+              storage$1.setLocalItem('settings', {
+                level: getHierarchyLevel(levelId),
+                id: hierarchyId
+              }, 'selectedHierarchy');
+            }
+            if (!(isInvalid(selectedYard) || isInvalid(selectedLanguage) || isInvalid(selectedCurrency))) {
+              _context.next = 13;
+              break;
+            }
+            return _context.abrupt("return");
+          case 13:
+            yard = self.yardsHistory.get(selectedYard)[selectedYard];
+            storage$1.setSessionItem('dashboard', _objectSpread2(_objectSpread2({}, storage$1.getSessionItem('dashboard')), {}, {
+              selectedCurrency: selectedCurrency || yard.yard_currency,
+              selectedCountry: (_yard$yard_country_co = yard.yard_country_code) === null || _yard$yard_country_co === void 0 ? void 0 : _yard$yard_country_co.slice(0, 2),
+              selectedCountryA3code: yard.yard_country_code,
+              selectedYard: yard.yard_number,
+              selectedTimeZone: yard.time_zone,
+              language: selectedLanguage || 'en',
+              selectedRole: roleName,
+              printers: printers,
+              yard: yard
+            }));
+            storage$1.setLocalItem('dashboard', printers, 'printers');
+            storage$1.setLocalItem('dashboard', selectedLanguage || 'en', 'language');
+            storage$1.setLocalItem('settings', roleName, 'selectedRole');
+            storage$1.setLocalItem('lastSelectedYard', yard);
+            storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
+            securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
+            storage$1.setSessionItem('securityLevel', Number(securityLevel));
+            _context.next = 24;
+            return fetcher.getUserScopes();
+          case 24:
+            userScopes = _context.sent;
+            storage$1.setLocalItem('login', userScopes, 'userAppScopes');
+            // persist user preferences
+            _context.next = 28;
+            return fetcher.setUserPreferences('oph', {
+              selectedCurrency: selectedCurrency || yard.yard_currency,
+              language: selectedLanguage || 'en',
+              // TODO Remove this after remove role selection
+              selectedRole: roleName,
+              printers: printers,
+              yard: yard,
+              securityLevel: securityLevel
+            }, 'USA');
+          case 28:
+            self.setState({
+              oldActivePrinters: printers
+            });
+            newSettings = {
+              selectedCurrency: selectedCurrency || yard.yard_currency,
+              selectedYard: yard.yard_number,
+              selectedCountry: (_yard$yard_country_co2 = yard.yard_country_code) === null || _yard$yard_country_co2 === void 0 ? void 0 : _yard$yard_country_co2.slice(0, 2),
+              language: selectedLanguage || 'en',
+              selectedRole: roleName,
+              activePrinters: self.activePrinters
+            };
+            self.props.onSave(oldSettings, newSettings);
+          case 31:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+};
+var selectedYardNumber = function selectedYardNumber() {
+  var _storage$getSessionIt;
+  return (_storage$getSessionIt = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt === void 0 ? void 0 : _storage$getSessionIt.selectedYard;
+};
+var selectedCountry = function selectedCountry() {
+  var _storage$getSessionIt2;
+  return ((_storage$getSessionIt2 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt2 === void 0 ? void 0 : _storage$getSessionIt2.selectedCountry) || 'US';
+};
+var selectedLanguage = function selectedLanguage() {
+  var _storage$getSessionIt3;
+  return ((_storage$getSessionIt3 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt3 === void 0 ? void 0 : _storage$getSessionIt3.language) || 'en';
+};
+var selectedCurrency = function selectedCurrency() {
+  var _storage$getSessionIt4;
+  return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCurrency) || 'USD';
+};
+var selectedCountryA3code = function selectedCountryA3code() {
+  var _storage$getSessionIt5;
+  return ((_storage$getSessionIt5 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt5 === void 0 ? void 0 : _storage$getSessionIt5.selectedCountryA3code) || 'USA';
+};
+var activePrinters = function activePrinters() {
+  var _storage$getLocalItem;
+  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS;
+};
+var makeKeyValue = function makeKeyValue(final, target) {
+  final[target.label] = target.printer_name;
+  return final;
+};
+var formatActivePrintersForState = function formatActivePrintersForState() {
+  var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var printers = Array.isArray(activePrinters) ? activePrinters : [];
+  return printers.reduce(makeKeyValue, {});
+};
+var activePhoneNumber = function activePhoneNumber() {
+  var _storage$getLocalItem2;
+  return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
+};
+var ringCentralEnabled = function ringCentralEnabled() {
+  var _storage$getLocalItem3;
+  return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
+};
+var filterRoles = function filterRoles(roles, countryCode) {
+  return compose(uniqBy$1(prop$1('roleName')), filter$1(propEq$1('countryCode', countryCode)))(roles);
+};
+var SettingsView = /*#__PURE__*/function (_React$Component) {
+  _inherits$2(SettingsView, _React$Component);
+  var _super = _createSuper(SettingsView);
+  function SettingsView() {
+    var _this;
+    _classCallCheck$2(this, SettingsView);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty$1(_assertThisInitialized(_this), "state", _objectSpread2({
+      phoneNumber: activePhoneNumber(),
+      ringCentralEnabled: ringCentralEnabled(),
+      selectedYardNumber: selectedYardNumber(),
+      selectedCountry: selectedCountry(),
+      selectedCountryA3code: selectedCountryA3code(),
+      selectedLanguage: selectedLanguage(),
+      selectedCurrency: selectedCurrency(),
+      roles: [],
+      selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
+      printersData: EMPTY_PRINTERS,
+      loadingPrinters: false,
+      oldActivePrinters: null
+    }, EMPTY_PRINTERS));
+    _defineProperty$1(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
+      fetcher.getUserRoles(countryCode).then(function (_roles) {
+        var roles = filterRoles(_roles, countryCode);
+        var selectedRole = _this.state.selectedRole;
+        _this.setState({
+          roles: roles
+        });
+        if (selectedRole && !find$1(compose(equals$1(selectedRole), frontEndUtils.regex.beautifyRoleText, prop$1('roleName')), roles)) {
+          _this.setState({
+            selectedRole: ''
+          });
+        }
+      }).catch(function (err) {
+        _this.setState({
+          roles: [],
+          selectedRole: ''
+        });
+      });
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "getActivePrinters", /*#__PURE__*/function () {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(yardNumber) {
+        var firstTime,
+          countryA3code,
+          printersData,
+          response,
+          fromatted,
+          _args2 = arguments;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              firstTime = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false;
+              countryA3code = _args2.length > 2 ? _args2[2] : undefined;
+              _this.setState({
+                loadingPrinters: true,
+                showLoading: true
+              });
+              _context2.next = 5;
+              return fetcher.getPrintersForYard(yardNumber, countryA3code);
+            case 5:
+              printersData = _context2.sent;
+              _this.setState({
+                printersData: printersData,
+                loadingPrinters: false,
+                showLoading: false
+              });
+              if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
+                }));
+              } else {
+                response = getActivePrinters(printersData);
+                fromatted = formatActivePrintersForState(response);
+                _this.setState(_objectSpread2({
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
+                }, fromatted));
+              }
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x2) {
+        return _ref6.apply(this, arguments);
+      };
+    }());
+    _defineProperty$1(_assertThisInitialized(_this), "updatePhoneNumber", function (phoneNumber) {
+      _this.setState({
+        phoneNumber: phoneNumber
+      });
+    });
+    _defineProperty$1(_assertThisInitialized(_this), "handleInputChange", handleInputChange(_assertThisInitialized(_this)));
+    _defineProperty$1(_assertThisInitialized(_this), "saveSettings", saveSettings(_assertThisInitialized(_this)));
+    _defineProperty$1(_assertThisInitialized(_this), "yardsHistory", new Map());
+    _defineProperty$1(_assertThisInitialized(_this), "setPrinterData", function (name) {
+      return function (value) {
+        _this.setState(_defineProperty$1({}, name, value));
+      };
+    });
+    return _this;
+  } // componentWillMount() {
+  //   this.fetchRoles(this.state.selectedCountryA3code)
+  //   getRCExtensionStatus().then((response) => {
+  //     response && resetPhoneSettingsBasedOnRCStatus(response)
+  //     this.setState({
+  //       ringCentralEnabled: ringCentralEnabled(),
+  //       phoneNumber: activePhoneNumber(),
+  //     })
+  //   })
+  //   this.getActivePrinters(
+  //     this.state.selectedYardNumber,
+  //     true,
+  //     this.state.selectedCountryA3code,
+  //   )
+  // }
+  _createClass$2(SettingsView, [{
+    key: "activePrinters",
+    get: function get() {
+      return {
+        barcode_label_printers: this.state.barcode_label_printers,
+        check_printers: this.state.check_printers,
+        standard_printers: this.state.standard_printers,
+        windshield_label_printers: this.state.windshield_label_printers,
+        text_printers: this.state.text_printers
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm"
+      }, this.props.width > 760 && /*#__PURE__*/React__default["default"].createElement(ProfileDetails, {
+        logout: this.props.onLogoutItemClicked
+      }));
+    }
+  }]);
+  return SettingsView;
+}(React__default["default"].Component);
+
+var css_248z$8 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 10px 10px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 20px;\r\n  gap: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  color: white;\r\n  width: 26px;\r\n  min-height: 26px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201f1e;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox * {\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a {\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  padding: 5px 5px;\r\n  min-height: 20px;\r\n  padding: 4px 5px 3px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i {\r\n  font-size: 20px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n  font-size: 12px;\r\n  align-items: center;\r\n  padding: 0px 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i {\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationCountContainer {\r\n  width: 50px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar.utilities_ops-announcements_Banner--notificationContainer {\r\n  padding: 8px 6px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  color: white;\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideNotificationInfoBox {\r\n  color: white;\r\n  width: 20px;\r\n  height: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-right: 6px;\r\n}\r\n.utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: auto;\r\n  min-height: auto;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer i {\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--notificationBarBtn i {\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 0px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar i {\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-right: 10px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n  margin-top: 5px;\r\n  max-width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--sideBar .utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding-left: 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b {\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n\r\n@media (max-width: 1760px) {\r\n  .utilities_ops-announcements_Banner--notificationBarContent input {\r\n    width: 331px !important;\r\n  }\r\n}\r\n";
 styleInject(css_248z$8);
 
 var _nodeResolve_empty = {};
@@ -31276,6 +31660,13 @@ var alertInfoColorMapping = {
   information: 'var(--blue)',
   success: 'rgb(50 179 55)'
 };
+// const alertInfoColorMapping = {
+//   alert: '#C50F1F',
+//   warning: '#FFAA44',
+//   information: '#0F4CAB',
+//   success: '#067E3C',
+// }
+
 var alertToIconMapping = {
   alert: 'circle-exclamation',
   warning: 'triangle-exclamation',
@@ -31447,6 +31838,15 @@ var Banner = function Banner(props) {
       style: {
         backgroundColor: alertBackgroundColorMapping[categoryDescription.toLowerCase()]
       }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--appBarContentWrapper",
+      style: {
+        borderLeft: "2px solid ".concat(alertInfoColorMapping[categoryDescription.toLowerCase()])
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        display: 'flex'
+      }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--sideNotificationInfoBox",
       style: {
@@ -31455,11 +31855,9 @@ var Banner = function Banner(props) {
     }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
       name: alertToIconMapping[categoryDescription.toLowerCase()],
       style: {
-        fontSize: '19px'
+        fontSize: '12px'
       }
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "utilities_ops-announcements_Banner--appBarContentWrapper"
-    }, /*#__PURE__*/React__default["default"].createElement("div", null, sourceApplication && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff), /*#__PURE__*/React__default["default"].createElement("div", {
+    })), sourceApplication && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--appBarContentBox"
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       dangerouslySetInnerHTML: {
@@ -31489,7 +31887,8 @@ var Banner = function Banner(props) {
     }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
       style: {
         cursor: 'pointer',
-        color: '#8A8886'
+        color: '#8A8886',
+        fontSize: '20px'
       },
       name: "close",
       variant: "material"
@@ -31546,7 +31945,7 @@ var Banner = function Banner(props) {
       name: "xmark"
     }))), /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
-        minHeight: '39px'
+        minHeight: '25px'
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--tabNotificationBarContentBox",
@@ -31571,7 +31970,7 @@ var Banner = function Banner(props) {
       variant: "material"
     }))), action && ActionComponent && /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
-        marginTop: '8px'
+        padding: '5px'
       }
     }, /*#__PURE__*/React__default["default"].createElement(ActionComponent, {
       notification: notification,
@@ -32656,11 +33055,15 @@ var AppBar$1 = function AppBar(props) {
     style: {
       height: "calc(100vh - ".concat(notifications !== null && notifications !== void 0 && notifications.length ? sideBarTopValue : 48, "px)")
     }
-  }, !stack || stack === 'c' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$1, {
+  }, !stack || stack === 'c' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$2, {
     onSave: onSave,
     onLogoutItemClicked: onLogoutItemClicked,
     width: width
-  }) : null, stack === 'uk' ? /*#__PURE__*/React__default["default"].createElement(SettingsView, {
+  }) : null, stack === 'uk' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$1, {
+    onSave: onSave,
+    onLogoutItemClicked: onLogoutItemClicked,
+    width: width
+  }) : null, stack === 'g' ? /*#__PURE__*/React__default["default"].createElement(SettingsView, {
     onSave: onSave,
     onLogoutItemClicked: onLogoutItemClicked,
     width: width
@@ -32668,7 +33071,8 @@ var AppBar$1 = function AppBar(props) {
     closeSidebar: closeSidebar,
     logout: onLogoutItemClicked,
     items: mobileMenuItems,
-    notifications: notifications
+    notifications: notifications,
+    sideBarTopValue: sideBarTopValue
   }));
 };
 AppBar$1.defaultProps = {
@@ -46280,6 +46684,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     getCounts = _ref2.getCounts,
     activeSubmenu = _ref2.activeSubmenu,
     setActiveSubmenu = _ref2.setActiveSubmenu,
+    allowMultipleNavItemsOpen = _ref2.allowMultipleNavItemsOpen,
     setShowNavigationCounts = _ref2.setShowNavigationCounts,
     countsRef = _ref2.countsRef;
   // const withCounts = getCounts && typeof getCounts === 'function'
@@ -46320,7 +46725,10 @@ var NavigationBar = function NavigationBar(_ref2) {
         setConfigValid(true);
         setNavItemsModified(updatedNavItems);
         setSelected(selectedItem);
-        setActiveSubmenu(activeMenuItem);
+        if (activeMenuItem) setActiveSubmenu(function (menuItems) {
+          return allowMultipleNavItemsOpen ? [].concat(_toConsumableArray(menuItems), [activeMenuItem]) : [activeMenuItem];
+        });
+        // setActiveSubmenu(activeMenuItem)
         setConfigDepth(depth);
       } else {
         setConfigValid(false);
@@ -46339,7 +46747,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     onMouseLeave: function onMouseLeave() {
       return setHover(false);
     },
-    className: _getClassName("NavBarContainer ".concat(activeSubmenu && withCounts ? 'withCounts' : '', " ").concat(getCounts && typeof getCounts === 'function' ? 'countsAvailable' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavBarContainer ".concat(activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && withCounts ? 'withCounts' : '', " ").concat(getCounts && typeof getCounts === 'function' ? 'countsAvailable' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, isConfigValid ? /*#__PURE__*/React__default["default"].createElement(NavigationMenu, {
@@ -46349,6 +46757,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     configDepth: configDepth,
     activeSubmenu: activeSubmenu,
     setActiveSubmenu: setActiveSubmenu,
+    allowMultipleNavItemsOpen: allowMultipleNavItemsOpen,
     selected: selected,
     setSelected: setSelected,
     getCounts: getCounts,
@@ -46364,6 +46773,7 @@ var NavigationMenu = function NavigationMenu(_ref3) {
     configDepth = _ref3.configDepth,
     activeSubmenu = _ref3.activeSubmenu,
     setActiveSubmenu = _ref3.setActiveSubmenu,
+    allowMultipleNavItemsOpen = _ref3.allowMultipleNavItemsOpen,
     selected = _ref3.selected,
     setSelected = _ref3.setSelected,
     getCounts = _ref3.getCounts,
@@ -46380,16 +46790,29 @@ var NavigationMenu = function NavigationMenu(_ref3) {
       // if (splitUrl.length - 1 === configDepth) {
       if (splitUrl.length - 1) {
         if (configDepth === 3) {
-          setActiveSubmenu('/' + splitUrl[1] + '/' + splitUrl[2]);
-          setSelected('/' + splitUrl[1] + '/' + splitUrl[2] + '/' + splitUrl[3]);
+          setActiveSubmenu(function (menuItems) {
+            return allowMultipleNavItemsOpen ? [].concat(_toConsumableArray(menuItems), ["/".concat(splitUrl[1], "/").concat(splitUrl[2])]) : ["/".concat(splitUrl[1], "/").concat(splitUrl[2])];
+          });
+          // setActiveSubmenu('/' + splitUrl[1] + '/' + splitUrl[2])
+          var newSelectedUrl = splitUrl.slice(1).join('/');
+          // setSelected('/' + splitUrl[1] + '/' + splitUrl[2] + '/' + splitUrl[3])
+          setSelected("/".concat(newSelectedUrl));
         } else if (configDepth === 2) {
-          setActiveSubmenu('/' + splitUrl[1]);
-          setSelected('/' + splitUrl[1] + '/' + splitUrl[2]);
+          // setActiveSubmenu('/' + splitUrl[1])
+          setActiveSubmenu(function (menuItems) {
+            return allowMultipleNavItemsOpen ? [].concat(_toConsumableArray(menuItems), ["/".concat(splitUrl[1])]) : ["/".concat(splitUrl[1])];
+          });
+          var _newSelectedUrl = splitUrl.slice(1).join('/');
+          // setSelected('/' + splitUrl[1] + '/' + splitUrl[2])
+          setSelected("/".concat(_newSelectedUrl));
         } else {
-          setSelected('/' + splitUrl[1]);
+          var _newSelectedUrl2 = splitUrl.slice(1).join('/');
+          setSelected("/".concat(_newSelectedUrl2));
+          // setSelected('/' + splitUrl[1])
         }
       } else {
-        setActiveSubmenu(null);
+        // setActiveSubmenu(null)
+        if (!allowMultipleNavItemsOpen) setActiveSubmenu([]);
         setSelected(null);
       }
     }
@@ -46409,6 +46832,7 @@ var NavigationMenu = function NavigationMenu(_ref3) {
       activeSubmenu: activeSubmenu,
       navigateFunction: navigateFunction,
       setActiveSubmenu: setActiveSubmenu,
+      allowMultipleNavItemsOpen: allowMultipleNavItemsOpen,
       selected: selected,
       setSelected: setSelected,
       redirectUrl: redirectUrl,
@@ -46425,6 +46849,7 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     isHover = _ref4.isHover,
     activeSubmenu = _ref4.activeSubmenu,
     setActiveSubmenu = _ref4.setActiveSubmenu,
+    allowMultipleNavItemsOpen = _ref4.allowMultipleNavItemsOpen,
     navigateFunction = _ref4.navigateFunction,
     selected = _ref4.selected,
     setSelected = _ref4.setSelected,
@@ -46458,6 +46883,7 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
       setSelected: setSelected,
       activeSubmenu: activeSubmenu,
       setActiveSubmenu: setActiveSubmenu,
+      allowMultipleNavItemsOpen: allowMultipleNavItemsOpen,
       navigateFunction: navigateFunction,
       getCounts: getCounts,
       setWithCounts: setWithCounts,
@@ -46473,12 +46899,14 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
     setSelected = _ref5.setSelected,
     activeSubmenu = _ref5.activeSubmenu,
     setActiveSubmenu = _ref5.setActiveSubmenu,
+    allowMultipleNavItemsOpen = _ref5.allowMultipleNavItemsOpen,
     navigateFunction = _ref5.navigateFunction,
     getCounts = _ref5.getCounts,
     setWithCounts = _ref5.setWithCounts,
     withCounts = _ref5.withCounts,
     countsRef = _ref5.countsRef;
-  var isMenuExpanded = activeSubmenu === navItem.fullRoute;
+  // const isMenuExpanded = activeSubmenu === navItem.fullRoute
+  var isMenuExpanded = activeSubmenu.includes(navItem.fullRoute);
   var showCounts = isMenuExpanded && getCounts && typeof getCounts === 'function';
   var _useState13 = React.useState(null),
     _useState14 = _slicedToArray(_useState13, 2),
@@ -46521,20 +46949,42 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
   var handleItemClick = function handleItemClick() {
     if (isDisabled) return;
     if (hasSubMenuItems) {
-      setActiveSubmenu(isMenuExpanded ? null : navItem.fullRoute);
+      if (!isMenuExpanded) {
+        setActiveSubmenu(function (menuItems) {
+          return allowMultipleNavItemsOpen ? [].concat(_toConsumableArray(menuItems), [navItem.fullRoute]) : [navItem.fullRoute];
+        });
+      } else {
+        setActiveSubmenu(function (menuItems) {
+          return _toConsumableArray(menuItems).filter(function (item) {
+            return item !== navItem.fullRoute;
+          });
+        });
+      }
+      // setActiveSubmenu(isMenuExpanded ? null : navItem.fullRoute)
       if (!isMenuExpanded && showCounts) {
         reloadCounts();
       }
     } else {
       navigateToItem(navItem);
+      var pathSplit = window.location.pathname.split('/');
+      var path = "/".concat(pathSplit[pathSplit.length - 1]);
+      if (path === navItem.fullRoute && !allowMultipleNavItemsOpen) {
+        setActiveSubmenu([navItem.fullRoute]);
+      }
     }
   };
+  var highlight;
+  if (navItem !== null && navItem !== void 0 && navItem.subMenuItems || !allowMultipleNavItemsOpen) {
+    highlight = isMenuExpanded;
+  } else if (allowMultipleNavItemsOpen) {
+    highlight = selected === navItem.fullRoute;
+  }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2",
     animate: isMenuExpanded ? 'open' : 'closed'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleItemClick,
-    className: _getClassName("NavItem ".concat(isMenuExpanded ? 'expandedMenu' : '', " ").concat(selected === navItem.fullRoute ? 'NavItemSelected' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavItem ".concat(highlight ? 'expandedMenu' : '', " ").concat(selected === navItem.fullRoute && navItem !== null && navItem !== void 0 && navItem.subMenuItems ? 'NavItemSelected' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -46544,7 +46994,7 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName"
   }, navItem.name), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("expandButton ".concat(activeSubmenu && withCounts ? 'showExpandIcons' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("expandButton ".concat(activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && withCounts ? 'showExpandIcons' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, hasSubMenuItems && /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
@@ -46661,7 +47111,8 @@ var AppFrame = function AppFrame(props) {
     _useState2 = _slicedToArray(_useState, 2),
     appBarMounted = _useState2[0],
     setAppBarMounted = _useState2[1];
-  var _useState3 = React.useState(null),
+  // const [activeSubmenu, setActiveSubmenu] = useState(null)
+  var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     activeSubmenu = _useState4[0],
     setActiveSubmenu = _useState4[1];
@@ -46690,7 +47141,7 @@ var AppFrame = function AppFrame(props) {
   });
 
   // const showNavigationCounts = props.getCounts && typeof props.getCounts === 'function'
-  var navigationWidth = activeSubmenu && showNavigationCounts ? '100px' : '50px';
+  var navigationWidth = activeSubmenu !== null && activeSubmenu !== void 0 && activeSubmenu.length && showNavigationCounts ? '100px' : '50px';
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppFrame",
     style: props.handleScrolling ? SCROLL : NO_SCROLL
@@ -46721,6 +47172,7 @@ var AppFrame = function AppFrame(props) {
     getCounts: props.getCounts,
     activeSubmenu: activeSubmenu,
     setActiveSubmenu: setActiveSubmenu,
+    allowMultipleNavItemsOpen: props.allowMultipleNavItemsOpen,
     setShowNavigationCounts: setShowNavigationCounts,
     countsRef: props.countsRef
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {