npm - @copart/ops-tool-kit - Versions diffs - 1.8.1-alpha.10 → 1.8.1-alpha.12 - Mend

@copart/ops-tool-kit 1.8.1-alpha.10 → 1.8.1-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/ops-tool-kit.js CHANGED Viewed

@@ -29,11 +29,11 @@ function _interopNamespace(e) {
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 const name$f = "@copart/ops-tool-kit";
-const version$5 = "1.8.1-alpha.10";
+const version$5 = "1.8.1-alpha.12";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -182,9 +182,10 @@ var setup = (function (_ref) {
   global.setUpInstana = function () {
     var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var isCoreApp = arguments.length > 1 ? arguments[1] : undefined;
     //devOnly.log('Instana setting up.')
-    if (key && !(process.env.NODE_ENV !== "production") && process.env.IS_CORE_APP) {
+    if (key && !(process.env.NODE_ENV !== "production") && isCoreApp) {
       (function (i, s, o, g, r, a, m) {
         i['InstanaEumObject'] = r;
@@ -288,7 +289,7 @@ function _asyncToGenerator(fn) {
   };
 }
-function _classCallCheck$2(instance, Constructor) {
+function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
     throw new TypeError("Cannot call a class as a function");
   }
@@ -304,7 +305,7 @@ function _defineProperties(target, props) {
   }
 }
-function _createClass$2(Constructor, protoProps, staticProps) {
+function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
   return Constructor;
@@ -377,7 +378,7 @@ function _objectSpread2(target) {
   return target;
 }
-function _inherits$2(subClass, superClass) {
+function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
     throw new TypeError("Super expression must either be null or a function");
   }
@@ -452,7 +453,7 @@ function _assertThisInitialized(self) {
   return self;
 }
-function _possibleConstructorReturn$2(self, call) {
+function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
   }
@@ -2755,17 +2756,22 @@ var clearStorage = function clearStorage() {
 };
 var createOpsStorage = function createOpsStorage() {
-  var APP_NAME = process.env.APP_NAME;
   return {
     getLocalItem: getLocalItem,
     setLocalItem: setLocalItem,
     getSessionItem: getSessionItem,
     setSessionItem: setSessionItem,
     setItem: function setItem(key, value) {
+      var _window;
+      var APP_NAME = ((_window = window) === null || _window === void 0 ? void 0 : _window.APP_NAME) ? window.APP_NAME : process.env.APP_NAME;
       setLocalItem("".concat(APP_NAME, ":").concat(key), value);
       return value;
     },
     getItem: function getItem(key) {
+      var _window2;
+      var APP_NAME = ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.APP_NAME) ? window.APP_NAME : process.env.APP_NAME;
       var value = getLocalItem("".concat(APP_NAME, ":").concat(key));
       return value;
     },
@@ -2791,15 +2797,18 @@ var createOpsStorage = function createOpsStorage() {
     },
     get currentAppPermissions() {
+      var _window3, _window4;
       var appTiles = storage$1.getLocalItem('opsportal-core:config').tiles || [];
+      var appName = ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.APP_NAME) ? window.APP_NAME : process.env.APP_NAME;
       var appData = appTiles.find(function (tile) {
         if (tile.appName) {
-          return tile.appName === process.env.APP_NAME;
+          return tile.appName === appName;
         } else {
-          return tile.path === "/".concat(process.env.APP_NAME);
+          return tile.path === "/".concat(appName);
         }
       });
-      var appAuthName = appData ? appData.appAuthName : process.env.APP_AUTH_NAME;
+      var appAuthName = appData ? appData.appAuthName : ((_window4 = window) === null || _window4 === void 0 ? void 0 : _window4.APP_AUTH_NAME) ? window.APP_AUTH_NAME : process.env.APP_AUTH_NAME;
       return appAuthName ? storage$1.getLocalItem("".concat(appAuthName, ":permissions")) : [];
     },
@@ -2970,15 +2979,15 @@ var withBreadcrumbs = function withBreadcrumbs(Comp) {
   return (
     /*#__PURE__*/
     function (_React$Component) {
-      _inherits$2(_class, _React$Component);
+      _inherits(_class, _React$Component);
       function _class() {
-        _classCallCheck$2(this, _class);
+        _classCallCheck(this, _class);
-        return _possibleConstructorReturn$2(this, _getPrototypeOf(_class).apply(this, arguments));
+        return _possibleConstructorReturn(this, _getPrototypeOf(_class).apply(this, arguments));
       }
-      _createClass$2(_class, [{
+      _createClass(_class, [{
         key: "render",
         value: function render() {
           var _this = this;
@@ -2997,7 +3006,10 @@ var withBreadcrumbs = function withBreadcrumbs(Comp) {
 };
 var goHome = function goHome(props) {
-  return process.env.IS_CORE_APP ? function () {
+  var _window$toolkitEnv;
+  var isCoreApp = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.IS_CORE_APP) ? window.toolkitEnv.IS_CORE_APP : process.env.IS_CORE_APP;
+  return isCoreApp ? function () {
     return props.history.push('/');
   } : function () {
     return window.location.assign('/');
@@ -3056,14 +3068,14 @@ var nonSecure = function (size) {
 var BreadcrumbsProvider =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(BreadcrumbsProvider, _React$Component);
+  _inherits(BreadcrumbsProvider, _React$Component);
   function BreadcrumbsProvider(props) {
     var _this;
-    _classCallCheck$2(this, BreadcrumbsProvider);
+    _classCallCheck(this, BreadcrumbsProvider);
-    _this = _possibleConstructorReturn$2(this, _getPrototypeOf(BreadcrumbsProvider).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(BreadcrumbsProvider).call(this, props));
     _defineProperty(_assertThisInitialized(_this), "crumbIds", new Set());
@@ -3101,7 +3113,7 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(BreadcrumbsProvider, [{
+  _createClass(BreadcrumbsProvider, [{
     key: "render",
     value: function render() {
       return React__namespace.createElement(Context.Provider, {
@@ -3125,27 +3137,27 @@ var getCrumbProps = function getCrumbProps(props) {
 var Crumb = withBreadcrumbs(_class =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(Crumb, _React$Component);
+  _inherits(Crumb, _React$Component);
   function Crumb() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, Crumb);
+    _classCallCheck(this, Crumb);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(Crumb)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Crumb)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "crumbId", nonSecure());
     return _this;
   }
-  _createClass$2(Crumb, [{
+  _createClass(Crumb, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var crumbProps = getCrumbProps(this.props);
@@ -6214,11 +6226,14 @@ var countryCodeMapper = {
   uk: 'UK',
   g: 'DE'
 };
-var countryCode = countryCodeMapper[process.env.STACK];
 var clientName = 'OPS'; // TODO use from config
 var handleHeaderVersion = function handleHeaderVersion(config) {
-  if (config.url.indexOf('referencedata-ws') !== -1 || process.env.STACK === 'g') {
+  var _window$toolkitEnv;
+  var stack = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
+  if (config.url.indexOf('referencedata-ws') !== -1 || stack === 'g') {
     config.headers.Version = '2.0';
   }
 };
@@ -6230,8 +6245,11 @@ var handleRole = function handleRole(config) {
 };
 var handleHeaders = function handleHeaders(config) {
+  var _window$toolkitEnv2;
+  var stack = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
+  var countryCode = countryCodeMapper[stack];
   handleHeaderVersion(config);
-  var stack = process.env.STACK;
   var countryCodeFromStorage = storage$1.activeCountry || countryCode;
   var headers = config.headers;
   var accessToken = storage$1.accessToken;
@@ -6307,15 +6325,13 @@ function () {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            process.env.NODE_ENV !== "production" && console.error('fetcher request error: ', error);
             if (!((error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401)) {
-              _context.next = 15;
+              _context.next = 14;
               break;
             }
             if (!('refreshTokenExpired' in error.response.data)) {
-              _context.next = 5;
+              _context.next = 4;
               break;
             }
@@ -6323,30 +6339,30 @@ function () {
             storage$1.setSessionItem('redirectUrl', window.location.href);
             return _context.abrupt("return", storage$1.logout());
-          case 5:
+          case 4:
             if (store.isRefreshing) {
-              _context.next = 15;
+              _context.next = 14;
               break;
             }
             store.isRefreshing = true;
-            _context.next = 9;
+            _context.next = 8;
             return refreshToken();
-          case 9:
+          case 8:
             _context.sent;
-            _context.next = 12;
+            _context.next = 11;
             return fetcher.request(error.response.config);
-          case 12:
+          case 11:
             final = _context.sent;
             store.isRefreshing = false;
             return _context.abrupt("return", final);
-          case 15:
+          case 14:
             return _context.abrupt("return", Promise.reject(error));
-          case 16:
+          case 15:
           case "end":
             return _context.stop();
         }
@@ -6458,11 +6474,14 @@ function () {
   };
 }();
 var findAppData = function findAppData(tiles) {
+  var _window$toolkitEnv;
+  var appName = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.APP_NAME) ? window.toolkitEnv.APP_NAME : process.env.APP_NAME;
   var matchingTiles = tiles.filter(function (tile) {
     if (tile.appName) {
-      return tile.appName === process.env.APP_NAME;
+      return tile.appName === appName;
     } else {
-      return tile.path === "/".concat(process.env.APP_NAME);
+      return tile.path === "/".concat(appName);
     }
   });
@@ -6481,20 +6500,24 @@ function () {
   var _ref2 = _asyncToGenerator(
   /*#__PURE__*/
   regenerator.mark(function _callee2() {
-    var config;
+    var _window$toolkitEnv2;
+    var coreConfigUri, config;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _context2.next = 2;
-            return getConfig(process.env.CORE_CONFIG_URI);
+            coreConfigUri = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.CORE_CONFIG_URI) ? window.toolkitEnv.CORE_CONFIG_URI : process.env.CORE_CONFIG_URI; // This is for fetching core app configs only
-          case 2:
+            _context2.next = 3;
+            return getConfig(coreConfigUri);
+          case 3:
             config = _context2.sent;
             storage.setLocalItem('opsportal-core:config', config);
             return _context2.abrupt("return", findAppData(config.tiles || []));
-          case 5:
+          case 6:
           case "end":
             return _context2.stop();
         }
@@ -6659,10 +6682,12 @@ exports.all = function () {
 };
 });
-var stack$1 = process.env.STACK;
 var getDefaultYard = function getDefaultYard(country) {
-  if (stack$1 === 'uk') {
+  var _window$toolkitEnv;
+  var stack = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
+  if (stack === 'uk') {
     return {
       name: "COPART UK",
       number: 400,
@@ -6782,19 +6807,22 @@ function () {
   var _ref = _asyncToGenerator(
   /*#__PURE__*/
   regenerator.mark(function _callee() {
-    var config;
+    var _window$toolkitEnv2;
+    var configUri, config;
     return regenerator.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
-            return fetcher.getConfig(process.env.CONFIG_URI);
+            configUri = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.CONFIG_URI) ? window.toolkitEnv.CONFIG_URI : process.env.CONFIG_URI;
+            _context.next = 3;
+            return fetcher.getConfig(configUri);
-          case 2:
+          case 3:
             config = _context.sent;
             storage$1.setItem('config', config);
-          case 4:
+          case 5:
           case "end":
             return _context.stop();
         }
@@ -6839,7 +6867,9 @@ function () {
   var _ref2 = _asyncToGenerator(
   /*#__PURE__*/
   regenerator.mark(function _callee2(loginData) {
-    var hasCasAccess, yardList, entitySamID, entityID, entityCasID, userDetails, noCasAccess, userCountryCode, defaultYard;
+    var _window$toolkitEnv3;
+    var stack, hasCasAccess, yardList, entitySamID, entityID, entityCasID, userDetails, noCasAccess, userCountryCode, defaultYard;
     return regenerator.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
@@ -6875,8 +6905,10 @@ function () {
             return getAndStoreConfig();
           case 10:
-            if (!(process.env.STACK !== 'g')) {
-              _context2.next = 43;
+            stack = ((_window$toolkitEnv3 = window.toolkitEnv) === null || _window$toolkitEnv3 === void 0 ? void 0 : _window$toolkitEnv3.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
+            if (!(stack !== 'g')) {
+              _context2.next = 44;
               break;
             }
@@ -6888,54 +6920,54 @@ function () {
             entityCasID = ''; // cas ID (only applies to cas users)
-            _context2.prev = 16;
-            _context2.next = 19;
+            _context2.prev = 17;
+            _context2.next = 20;
             return fetcher.getUserDetails();
-          case 19:
+          case 20:
             userDetails = _context2.sent;
             entityID = userDetails.userId.trim().toUpperCase();
             entityCasID = userDetails.userId;
             yardList = userDetails.yardList;
             hasCasAccess = true;
-            _context2.next = 38;
+            _context2.next = 39;
             break;
-          case 26:
-            _context2.prev = 26;
-            _context2.t0 = _context2["catch"](16);
+          case 27:
+            _context2.prev = 27;
+            _context2.t0 = _context2["catch"](17);
             noCasAccess = hasNoCASAccess(_context2.t0) || inactiveCAS(_context2.t0);
             if (!(!noCasAccess && hasNoYardAccess(_context2.t0))) {
-              _context2.next = 34;
+              _context2.next = 35;
               break;
             }
             console.log('no yard error: ', _context2.t0);
             return _context2.abrupt("return", Promise.reject(hasNoYardAccess));
-          case 34:
+          case 35:
             userCountryCode = loginData.entity_country;
             defaultYard = getDefaultYard(userCountryCode);
             yardList = [defaultYard];
             hasCasAccess = false;
-          case 38:
+          case 39:
             if (entityCasID) loginData.entity_cas_id = entityCasID;
             loginData.entity_id = entityID;
             loginData.entity_sam_id = entitySamID;
             loginData.yardList = yardList;
             loginData.hasCasAccess = hasCasAccess;
-          case 43:
+          case 44:
             storeLoginData(loginData);
-          case 44:
+          case 45:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2, null, [[16, 26]]);
+    }, _callee2, null, [[17, 27]]);
   }));
   return function setupLogin(_x) {
@@ -7149,9 +7181,10 @@ var querystringify_1 = {
 	parse: parse
 };
-var stack = process.env.STACK.toLowerCase() || 'c';
 var getCompanyCode = function getCompanyCode() {
+  var _window$toolkitEnv;
+  var stack = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
   if (stack === 'c') return 'COPART';
   if (stack === 'uk') return 'COPARTUK';
   if (stack === 'g') return storage$1.getSessionItem('dashboard', 'selectedCountryA3code');
@@ -11184,20 +11217,20 @@ styleInject(css_248z$g);
 var ConfigFetcher =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(ConfigFetcher, _React$Component);
+  _inherits(ConfigFetcher, _React$Component);
   function ConfigFetcher() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, ConfigFetcher);
+    _classCallCheck(this, ConfigFetcher);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(ConfigFetcher)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ConfigFetcher)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", {
       gotConfig: false
@@ -11206,19 +11239,25 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(ConfigFetcher, [{
+  _createClass(ConfigFetcher, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator(
       /*#__PURE__*/
       regenerator.mark(function _callee() {
-        var config;
+        var _window$toolkitEnv, _window$toolkitEnv2;
+        var isCoreApp, configUri, config;
         return regenerator.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                if (!(global.IS_CORE_APP && (isCoreRoute || isAuthRoute) && !storage$1.isAuthenticated)) {
-                  _context.next = 2;
+                // If it is the core app and we are on a core route or auth route
+                // and the user is not authenticated, don't fetch config.
+                isCoreApp = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.IS_CORE_APP) ? window.toolkitEnv.IS_CORE_APP : process.env.IS_CORE_APP;
+                if (!(isCoreApp && (isCoreRoute || isAuthRoute) && !storage$1.isAuthenticated)) {
+                  _context.next = 3;
                   break;
                 }
@@ -11228,16 +11267,17 @@ function (_React$Component) {
                   };
                 }));
-              case 2:
-                _context.next = 4;
-                return fetcher.getConfig(process.env.CONFIG_URI);
+              case 3:
+                configUri = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.CONFIG_URI) ? window.toolkitEnv.CONFIG_URI : process.env.CONFIG_URI;
+                _context.next = 6;
+                return fetcher.getConfig(configUri);
-              case 4:
+              case 6:
                 config = _context.sent;
                 storage$1.setItem('config', config);
                 if (config.instanaKey) {
-                  window.setUpInstana(config.instanaKey);
+                  window.setUpInstana(config.instanaKey, isCoreApp);
                 }
                 this.setState(function (state) {
@@ -11246,7 +11286,7 @@ function (_React$Component) {
                   };
                 });
-              case 8:
+              case 10:
               case "end":
                 return _context.stop();
             }
@@ -11277,220 +11317,6 @@ function (_React$Component) {
   return ConfigFetcher;
 }(React__namespace.Component);
-var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-var _createClass$1 = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-function _classCallCheck$1(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-function _possibleConstructorReturn$1(self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-}
-function _inherits$1(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-}
-var Portal$4 = function (_React$Component) {
-  _inherits$1(Portal, _React$Component);
-  function Portal() {
-    _classCallCheck$1(this, Portal);
-    return _possibleConstructorReturn$1(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
-  }
-  _createClass$1(Portal, [{
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      if (this.defaultNode) {
-        document.body.removeChild(this.defaultNode);
-      }
-      this.defaultNode = null;
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      if (!canUseDOM) {
-        return null;
-      }
-      if (!this.props.node && !this.defaultNode) {
-        this.defaultNode = document.createElement('div');
-        document.body.appendChild(this.defaultNode);
-      }
-      return ReactDOM__default["default"].createPortal(this.props.children, this.props.node || this.defaultNode);
-    }
-  }]);
-  return Portal;
-}(React__default["default"].Component);
-Portal$4.propTypes = {
-  children: propTypes$1.node.isRequired,
-  node: propTypes$1.any
-};
-var Portalv4 = Portal$4;
-var _createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-function _possibleConstructorReturn(self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-}
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
-  }
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-} // This file is a fallback for a consumer who is not yet on React 16
-var Portal$3 = function (_React$Component) {
-  _inherits(Portal, _React$Component);
-  function Portal() {
-    _classCallCheck(this, Portal);
-    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
-  }
-  _createClass(Portal, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.renderPortal();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate(props) {
-      this.renderPortal();
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      ReactDOM__default["default"].unmountComponentAtNode(this.defaultNode || this.props.node);
-      if (this.defaultNode) {
-        document.body.removeChild(this.defaultNode);
-      }
-      this.defaultNode = null;
-      this.portal = null;
-    }
-  }, {
-    key: 'renderPortal',
-    value: function renderPortal(props) {
-      if (!this.props.node && !this.defaultNode) {
-        this.defaultNode = document.createElement('div');
-        document.body.appendChild(this.defaultNode);
-      }
-      var children = this.props.children; // https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b
-      if (typeof this.props.children.type === 'function') {
-        children = React__default["default"].cloneElement(this.props.children);
-      }
-      this.portal = ReactDOM__default["default"].unstable_renderSubtreeIntoContainer(this, children, this.props.node || this.defaultNode);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      return null;
-    }
-  }]);
-  return Portal;
-}(React__default["default"].Component);
-var LegacyPortal = Portal$3;
-Portal$3.propTypes = {
-  children: propTypes$1.node.isRequired,
-  node: propTypes$1.any
-};
-var Portal$1 = void 0;
-if (ReactDOM__default["default"].createPortal) {
-  Portal$1 = Portalv4;
-} else {
-  Portal$1 = LegacyPortal;
-}
-var Portal$2 = Portal$1;
 var getClassName = createCommonjsModule(function (module, exports) {
 Object.defineProperty(exports, "__esModule", {
@@ -21923,20 +21749,20 @@ var initialState = {
 var FeedbackDialog =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  _inherits$2(FeedbackDialog, _React$PureComponent);
+  _inherits(FeedbackDialog, _React$PureComponent);
   function FeedbackDialog() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, FeedbackDialog);
+    _classCallCheck(this, FeedbackDialog);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(FeedbackDialog)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(FeedbackDialog)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", _objectSpread2({}, initialState));
@@ -22039,7 +21865,7 @@ function (_React$PureComponent) {
     return _this;
   }
-  _createClass$2(FeedbackDialog, [{
+  _createClass(FeedbackDialog, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       // NOTE: To clear out previous state.
@@ -22181,7 +22007,7 @@ var LogOutMenu = function LogOutMenu(_ref) {
 var css_248z$b = ".utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogo {\r\n  max-width: 80px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogoNew {\r\n  max-width: 120px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--logoLink {\r\n  line-height: 0;\r\n}\r\n";
 styleInject(css_248z$b);
-var _styleModuleImportMap$6 = {
+var _styleModuleImportMap$2 = {
   "./CopartLogo.css": {
     "CopartLogo": "utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogo",
     "CopartLogoNew": "utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogoNew",
@@ -22197,7 +22023,7 @@ var CopartLogo = function CopartLogo() {
     href: "/"
   }, React__namespace.createElement("img", {
     src: imageSrc,
-    className: _getClassName(enableNewToolkitFeatures ? "CopartLogoNew" : "CopartLogo", _styleModuleImportMap$6, {
+    className: _getClassName(enableNewToolkitFeatures ? "CopartLogoNew" : "CopartLogo", _styleModuleImportMap$2, {
       "handleMissingStyleName": "warn"
     })
   }));
@@ -22233,7 +22059,7 @@ var FeedbackButton = function FeedbackButton(props) {
   }));
 };
-var _styleModuleImportMap$5 = {
+var _styleModuleImportMap$1 = {
   "../AppBar.css": {
     "root": "utilities_ops-app-frame_AppBarComponent_AppBar--root",
     "leftItems": "utilities_ops-app-frame_AppBarComponent_AppBar--leftItems",
@@ -22364,7 +22190,7 @@ var PhoneStatus = function PhoneStatus(_ref3) {
     onClick: function onClick() {
       if (!phoneStatusProcessing) togglePhoneAvailability();
     },
-    className: _getClassName(getPhoneStatusStyle(phoneStatus, theme), _styleModuleImportMap$5, {
+    className: _getClassName(getPhoneStatusStyle(phoneStatus, theme), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, phoneStatus === PHONE_STATUS.Available ? React__default["default"].createElement(PhoneAvailableIcon, {
@@ -22486,7 +22312,7 @@ var defaultAutoSelectProps$1 = {
   },
   width: 200
 };
-var printerFields$1 = [_objectSpread2({}, defaultAutoSelectProps$1, {
+var printerFields = [_objectSpread2({}, defaultAutoSelectProps$1, {
   name: 'barcode_label_printers',
   label: 'Bar Code Printer'
 }), _objectSpread2({}, defaultAutoSelectProps$1, {
@@ -22507,11 +22333,11 @@ var css_248z$9 = ".utilities_ops-app-frame_AppBarComponent_Settings_PrinterSetti
 styleInject(css_248z$9);
 // Properly populate printer options before feeding to autoselect
-var getPrinterOptions$1 = function getPrinterOptions(printers) {
+var getPrinterOptions = function getPrinterOptions(printers) {
   return Array.isArray(printers) ? printers : [];
 };
-var AUTO_SELECT_STYLE$1 = {
+var AUTO_SELECT_STYLE = {
   rowHeight: 40,
   optionsMinHeight: 200
 };
@@ -22519,20 +22345,20 @@ var AUTO_SELECT_STYLE$1 = {
 var PrinterSettings =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(PrinterSettings, _React$Component);
+  _inherits(PrinterSettings, _React$Component);
   function PrinterSettings() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, PrinterSettings);
+    _classCallCheck(this, PrinterSettings);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(PrinterSettings)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(PrinterSettings)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "setPrinter", function (name) {
       return function (value) {
@@ -22543,7 +22369,7 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(PrinterSettings, [{
+  _createClass(PrinterSettings, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -22554,9 +22380,9 @@ function (_React$Component) {
       if (!printersData) return null;
       return React__namespace.createElement("div", {
         className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--PrinterSettings"
-      }, printerFields$1.map(function (printer) {
+      }, printerFields.map(function (printer) {
         var name = printer.name || '';
-        var printers = getPrinterOptions$1(printersData[name]);
+        var printers = getPrinterOptions(printersData[name]);
         return React__namespace.createElement("div", {
           key: name,
           className: "utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-5"
@@ -22566,7 +22392,7 @@ function (_React$Component) {
           name: name,
           value: _this2.props.activePrinters[name],
           onChange: _this2.props.setPrinterData(name),
-          optionStyleProps: AUTO_SELECT_STYLE$1,
+          optionStyleProps: AUTO_SELECT_STYLE,
           options: printers.map(function (data) {
             return data.printer_name;
           }),
@@ -22840,20 +22666,20 @@ var setYardOptions = function setYardOptions(self) {
 var YardNumberContainer =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(YardNumberContainer, _React$Component);
+  _inherits(YardNumberContainer, _React$Component);
   function YardNumberContainer() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, YardNumberContainer);
+    _classCallCheck(this, YardNumberContainer);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(YardNumberContainer)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(YardNumberContainer)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", {
       yardOptions: {}
@@ -22866,7 +22692,7 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(YardNumberContainer, [{
+  _createClass(YardNumberContainer, [{
     key: "componentWillMount",
     value: function componentWillMount() {
       var _this$props = this.props,
@@ -23048,20 +22874,20 @@ var formatPhoneNumber = function formatPhoneNumber() {
   return "".concat(formattedNumber, " * ").concat(extension);
 };
-var EMPTY_PRINTERS$3 = {
+var EMPTY_PRINTERS$2 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
   windshield_label_printers: '',
   text_printers: ''
 };
-var isDefault$1 = propEq$1('is_default', true);
+var isDefault = propEq$1('is_default', true);
-var findFirstDefault$1 = function findFirstDefault(printers) {
-  return nth$1(0, filter$1(isDefault$1, printers));
+var findFirstDefault = function findFirstDefault(printers) {
+  return nth$1(0, filter$1(isDefault, printers));
 };
-var getValuesArray$1 = function getValuesArray(final, _ref) {
+var getValuesArray = function getValuesArray(final, _ref) {
   var _ref2 = _slicedToArray(_ref, 2),
       label = _ref2[0],
       printers = _ref2[1];
@@ -23070,66 +22896,66 @@ var getValuesArray$1 = function getValuesArray(final, _ref) {
   return final;
 };
-var pluckDefault$1 = function pluckDefault(final, _ref3) {
+var pluckDefault = function pluckDefault(final, _ref3) {
   var _ref4 = _slicedToArray(_ref3, 2),
       label = _ref4[0],
       printers = _ref4[1];
-  final[label] = propOr$1('', 'printer_name')(findFirstDefault$1(printers));
+  final[label] = propOr$1('', 'printer_name')(findFirstDefault(printers));
   return final;
 };
-var sessionOrDefault$1 = function sessionOrDefault(label) {
+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$3;
+    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$2;
     var printerName = sessionDashboard.printers[label];
     return !isEmpty$2(printerName) ? printerName : printer_name;
   };
 };
-var chooseActive$1 = function chooseActive(final, _ref5) {
+var chooseActive = function chooseActive(final, _ref5) {
   var _ref6 = _slicedToArray(_ref5, 2),
       label = _ref6[0],
       printer_name = _ref6[1];
   return append$1({
-    printer_name: sessionOrDefault$1(label)(printer_name),
+    printer_name: sessionOrDefault(label)(printer_name),
     label: label
   }, final);
 };
-var reduceToObject$1 = function reduceToObject(reducer) {
+var reduceToObject = function reduceToObject(reducer) {
   return function (target) {
     return reduce$1(reducer, {}, target);
   };
 };
-var getActivePrinters$1 = (function (printersData) {
+var getActivePrinters = (function (printersData) {
   if (typeof printersData === 'string') return {};
-  var printers = reduceToObject$1(getValuesArray$1)(toPairs$1(printersData));
-  var defaultPrinters = reduceToObject$1(pluckDefault$1)(toPairs$1(printers));
-  return reduceToObject$1(chooseActive$1)(toPairs$1(defaultPrinters));
+  var printers = reduceToObject(getValuesArray)(toPairs$1(printersData));
+  var defaultPrinters = reduceToObject(pluckDefault)(toPairs$1(printers));
+  return reduceToObject(chooseActive)(toPairs$1(defaultPrinters));
 });
 var Container =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(Container, _React$Component);
+  _inherits(Container, _React$Component);
   function Container() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, Container);
+    _classCallCheck(this, Container);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(Container)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Container)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", {
       number: _this.props.phoneNumber.substr(1),
@@ -23241,7 +23067,7 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(Container, [{
+  _createClass(Container, [{
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(newProps) {
       this.setStatus('idle');
@@ -23339,7 +23165,7 @@ var validator = function validator(value) {
   return /^\d{8}$/.test(value) ? 'Maximum digits reached.' : '';
 };
-var EMPTY_PRINTERS$2 = {
+var EMPTY_PRINTERS$1 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -23391,13 +23217,13 @@ var handleInputChange$1 = function handleInputChange(self) {
       if (name === 'selectedRole') {
         var selectedValue = value.selectedValue,
             option = value.option;
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$2, 'printers');
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
         return self.setState({
           selectedRoleOption: option,
           selectedRole: selectedValue
         });
       } else if (name === 'selectedYardNumber') {
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$2, 'printers');
+        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
         self.updatePhoneNumber(activePhoneNumber$1()); // Ensure we fetch the proper roles per the entered yard
         var oldSelectedYard = self.state.selectedYardNumber;
@@ -23411,7 +23237,7 @@ var handleInputChange$1 = function handleInputChange(self) {
           if (value !== oldSelectedYard && Boolean(value)) {
             self.setState({
-              printersData: EMPTY_PRINTERS$2
+              printersData: EMPTY_PRINTERS$1
             });
             self.getActivePrinters(value, false, yardCountryCode);
           }
@@ -23612,18 +23438,18 @@ var selectedCountryA3code$1 = function selectedCountryA3code() {
 var activePrinters$1 = function activePrinters() {
   var _storage$getLocalItem;
-  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS$2;
+  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS$1;
 };
-var makeKeyValue$2 = function makeKeyValue(final, target) {
+var makeKeyValue$1 = function makeKeyValue(final, target) {
   final[target.label] = target.printer_name;
   return final;
 };
-var formatActivePrintersForState$2 = 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$2, {});
+  return printers.reduce(makeKeyValue$1, {});
 };
 var activePhoneNumber$1 = function activePhoneNumber() {
@@ -23645,20 +23471,20 @@ var filterRoles$2 = function filterRoles(roles, countryCode) {
 var SettingsView$1 =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(SettingsView, _React$Component);
+  _inherits(SettingsView, _React$Component);
   function SettingsView() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, SettingsView);
+    _classCallCheck(this, SettingsView);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(SettingsView)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SettingsView)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", _objectSpread2({
       phoneNumber: activePhoneNumber$1(),
@@ -23670,10 +23496,10 @@ function (_React$Component) {
       selectedCurrency: selectedCurrency(),
       roles: [],
       selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
-      printersData: EMPTY_PRINTERS$2,
+      printersData: EMPTY_PRINTERS$1,
       loadingPrinters: false,
       oldActivePrinters: null
-    }, EMPTY_PRINTERS$2));
+    }, EMPTY_PRINTERS$1));
     _defineProperty(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
       fetcher.getUserRoles(countryCode).then(function (_roles) {
@@ -23738,8 +23564,8 @@ function (_React$Component) {
                     oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
                   }));
                 } else {
-                  response = getActivePrinters$1(printersData);
-                  fromatted = formatActivePrintersForState$2(response);
+                  response = getActivePrinters(printersData);
+                  fromatted = formatActivePrintersForState$1(response);
                   _this.setState(_objectSpread2({
                     oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
@@ -23780,7 +23606,7 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(SettingsView, [{
+  _createClass(SettingsView, [{
     key: "componentWillMount",
     value: function componentWillMount() {
       var _this2 = this;
@@ -24048,7 +23874,7 @@ var YardNumberMenu = function YardNumberMenu(_ref) {
   })));
 };
-var EMPTY_PRINTERS$1 = {
+var EMPTY_PRINTERS = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -24098,7 +23924,7 @@ var handleInputChange = function handleInputChange(self) {
                   }
                   selectedValue = value.selectedValue, option = value.option;
-                  storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+                  storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
                   roleName = option && option.roleName || ''; //pathOr('', ['selectedRoleOption', 'roleName'], nextState)
                   isValidRole = self.state.roles.find(function (role) {
@@ -24119,8 +23945,8 @@ var handleInputChange = function handleInputChange(self) {
                     hierarchies: hierarchies,
                     selectedHierarchyOption: null,
                     selectedYardNumber: null,
-                    printersData: EMPTY_PRINTERS$1
-                  }, EMPTY_PRINTERS$1));
+                    printersData: EMPTY_PRINTERS
+                  }, EMPTY_PRINTERS));
                 case 10:
                   return _context.abrupt("return", self.setState({
@@ -24134,7 +23960,7 @@ var handleInputChange = function handleInputChange(self) {
                     break;
                   }
-                  storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+                  storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
                   country = value.country, _value$yard = value.yard, yard = _value$yard === void 0 ? null : _value$yard;
                   countryId = country && country.split('-')[0];
@@ -24176,8 +24002,8 @@ var handleInputChange = function handleInputChange(self) {
                       level: yard ? 'yard' : 'country'
                     },
                     selectedYardNumber: yard,
-                    printersData: EMPTY_PRINTERS$1
-                  }, EMPTY_PRINTERS$1));
+                    printersData: EMPTY_PRINTERS
+                  }, EMPTY_PRINTERS));
                 case 30:
                   _context.next = 43;
@@ -24189,7 +24015,7 @@ var handleInputChange = function handleInputChange(self) {
                     break;
                   }
-                  storage$1.setSessionItem('dashboard', EMPTY_PRINTERS$1, 'printers');
+                  storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
                   if (!(value !== self.state.selectedYardNumber && Boolean(value))) {
                     _context.next = 42;
@@ -24215,8 +24041,8 @@ var handleInputChange = function handleInputChange(self) {
                   return _context.abrupt("return", self.setState(function (state) {
                     return _objectSpread2({
                       selectedYardNumber: value,
-                      printersData: EMPTY_PRINTERS$1
-                    }, EMPTY_PRINTERS$1);
+                      printersData: EMPTY_PRINTERS
+                    }, EMPTY_PRINTERS);
                   }));
                 case 43:
@@ -24398,18 +24224,18 @@ var selectedCountryA3code = function selectedCountryA3code() {
 };
 var activePrinters = function activePrinters() {
-  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS$1;
+  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS;
 };
-var makeKeyValue$1 = function makeKeyValue(final, target) {
+var makeKeyValue = function makeKeyValue(final, target) {
   final[target.label] = target.printer_name;
   return final;
 };
-var formatActivePrintersForState$1 = function formatActivePrintersForState() {
+var formatActivePrintersForState = 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, {});
 };
 var activePhoneNumber = function activePhoneNumber() {
@@ -24478,20 +24304,20 @@ var filterRoles = function filterRoles(roles, invalidCodes) {
 var SettingsView =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits$2(SettingsView, _React$Component);
+  _inherits(SettingsView, _React$Component);
   function SettingsView() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, SettingsView);
+    _classCallCheck(this, SettingsView);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(SettingsView)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SettingsView)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", _objectSpread2({
       phoneNumber: activePhoneNumber(),
@@ -24503,9 +24329,9 @@ function (_React$Component) {
       selectedHierarchyOption: storage$1.getLocalItem('settings', 'selectedHierarchyOption'),
       roles: [],
       hierarchies: [],
-      printersData: EMPTY_PRINTERS$1,
+      printersData: EMPTY_PRINTERS,
       oldActivePrinters: null
-    }, EMPTY_PRINTERS$1));
+    }, EMPTY_PRINTERS));
     _defineProperty(_assertThisInitialized(_this), "getRCAvailability",
     /*#__PURE__*/
@@ -24577,8 +24403,8 @@ function (_React$Component) {
                     oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
                   }));
                 } else {
-                  _activePrinters = getActivePrinters$1(printersData);
-                  update = formatActivePrintersForState$1(_activePrinters);
+                  _activePrinters = getActivePrinters(printersData);
+                  update = formatActivePrintersForState(_activePrinters);
                   _this.setState(_objectSpread2({
                     oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, update) : _this.state.oldActivePrinters
@@ -24617,7 +24443,7 @@ function (_React$Component) {
     return _this;
   }
-  _createClass$2(SettingsView, [{
+  _createClass(SettingsView, [{
     key: "componentWillMount",
     value: function () {
       var _componentWillMount = _asyncToGenerator(
@@ -24767,7 +24593,7 @@ function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
-var css_248z$6 = ".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: 0px 5px;\r\n  font-size: 13px;\r\n  /* display: flex;\r\n  gap: 8px; */\r\n  width: 95%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\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}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox b{\r\n  color: #171717;\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}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\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}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  margin-bottom: 5px;\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: 16px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i{\r\n  position: relative;\r\n  right: -4px;\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--notificationContainer i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer i{\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\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: 0px 5px;\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}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b{\r\n  color: #171717;\r\n}";
+var css_248z$6 = ".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: 0px 5px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: end;\r\n  grid-gap: 20px;\r\n  gap: 20px\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\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}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox b{\r\n  color: #171717;\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}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\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}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  margin-bottom: 5px;\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: 16px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i{\r\n  position: relative;\r\n  right: -4px;\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--notificationContainer i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer i{\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\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: 0px 5px;\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}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b{\r\n  color: #171717;\r\n}";
 styleInject(css_248z$6);
 var moment = createCommonjsModule(function (module, exports) {
@@ -35781,7 +35607,7 @@ var alertToIconMapping = {
   success: 'Accept'
 };
-var Actions$1 = function Actions(_ref) {
+var Actions = function Actions(_ref) {
   var onLeftButtonClick = _ref.onLeftButtonClick,
       count = _ref.count,
       current = _ref.current,
@@ -35817,21 +35643,25 @@ var Actions$1 = function Actions(_ref) {
   }))));
 };
-var Banner = function Banner(_ref2) {
-  var content = _ref2.content,
-      sourceApplication = _ref2.sourceApplication,
-      categoryDescription = _ref2.categoryDescription,
-      count = _ref2.count,
-      current = _ref2.current,
-      showNavButtons = _ref2.showNavButtons,
-      onLeftButtonClick = _ref2.onLeftButtonClick,
-      onRightButtonClick = _ref2.onRightButtonClick,
-      dismissibleFlag = _ref2.dismissibleFlag,
-      onDismiss = _ref2.onDismiss,
-      startsAt = _ref2.startsAt;
-      _ref2.absStartsAt;
-      var timeZoneType = _ref2.timeZoneType,
-      showSideBar = _ref2.showSideBar;
+var Banner = function Banner(props) {
+  var count = props.count,
+      current = props.current,
+      showNavButtons = props.showNavButtons,
+      onLeftButtonClick = props.onLeftButtonClick,
+      onRightButtonClick = props.onRightButtonClick,
+      saveActionComponentState = props.saveActionComponentState,
+      ActionComponent = props.ActionComponent,
+      notification = _objectWithoutProperties(props, ["count", "current", "showNavButtons", "onLeftButtonClick", "onRightButtonClick", "saveActionComponentState", "ActionComponent"]);
+  var dismissibleFlag = notification.dismissibleFlag,
+      onDismiss = notification.onDismiss,
+      startsAt = notification.startsAt,
+      timeZoneType = notification.timeZoneType,
+      showSideBar = notification.showSideBar,
+      action = notification.action,
+      content = notification.content,
+      sourceApplication = notification.sourceApplication,
+      categoryDescription = notification.categoryDescription;
   var contentBarRef = React__default["default"].useRef(null);
   var _React$useState = React__default["default"].useState('false'),
@@ -35862,14 +35692,20 @@ var Banner = function Banner(_ref2) {
       style: {
         backgroundColor: alertBackgroundColorMapping[categoryDescription.toLowerCase()]
       }
-    }, showNavButtons && React__default["default"].createElement(Actions$1, {
+    }, showNavButtons && React__default["default"].createElement(Actions, {
       onLeftButtonClick: onLeftButtonClick,
       count: count,
       current: current,
       onRightButtonClick: onRightButtonClick
     }), React__default["default"].createElement("div", {
-      className: "utilities_ops-announcements_Banner--notificationBarContent"
-    }, React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--notificationBarContent",
+      style: expanded ? {
+        flexDirection: 'column',
+        alignItems: 'flex-start'
+      } : {
+        flexDirection: 'row'
+      }
+    }, React__default["default"].createElement("div", null, React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--notificationInfoBox"
     }, React__default["default"].createElement("div", null, React__default["default"].createElement(coreComponents.Icon, {
       name: alertToIconMapping[categoryDescription.toLowerCase()],
@@ -35886,7 +35722,14 @@ var Banner = function Banner(_ref2) {
       style: _objectSpread2({}, expanded && {
         WebkitLineClamp: 'unset'
       })
-    })), isContentOverFlow && React__default["default"].createElement("div", {
+    })), action && ActionComponent && React__default["default"].createElement("div", {
+      style: {
+        minWidth: '20%'
+      }
+    }, React__default["default"].createElement(ActionComponent, {
+      notification: notification,
+      saveActionComponentState: saveActionComponentState
+    }))), isContentOverFlow && React__default["default"].createElement("div", {
       style: {
         cursor: 'pointer'
       },
@@ -35935,7 +35778,10 @@ var Banner = function Banner(_ref2) {
       dangerouslySetInnerHTML: {
         __html: content
       }
-    })), dismissibleFlag && React__default["default"].createElement("div", {
+    }), action && ActionComponent && React__default["default"].createElement("div", null, React__default["default"].createElement(ActionComponent, {
+      notification: notification,
+      saveActionComponentState: saveActionComponentState
+    }))), dismissibleFlag && React__default["default"].createElement("div", {
       style: {
         cursor: 'pointer',
         marginLeft: 'auto',
@@ -35971,7 +35817,7 @@ var Banner = function Banner(_ref2) {
         fontSize: '16px',
         color: alertInfoColorMapping[categoryDescription.toLowerCase()]
       }
-    })), React__default["default"].createElement("div", null, sourceApplication && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff)), React__default["default"].createElement("div", null, showNavButtons && React__default["default"].createElement(Actions$1, {
+    })), React__default["default"].createElement("div", null, sourceApplication && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff)), React__default["default"].createElement("div", null, showNavButtons && React__default["default"].createElement(Actions, {
       onLeftButtonClick: onLeftButtonClick,
       count: count,
       current: current,
@@ -36016,7 +35862,14 @@ var Banner = function Banner(_ref2) {
       style: _objectSpread2({}, expanded && {
         WebkitLineClamp: 'unset'
       })
-    })));
+    }), action && ActionComponent && React__default["default"].createElement("div", {
+      style: {
+        marginTop: '8px'
+      }
+    }, React__default["default"].createElement(ActionComponent, {
+      notification: notification,
+      saveActionComponentState: saveActionComponentState
+    }))));
   };
   var mainNotificationBar = function mainNotificationBar() {
@@ -36030,7 +35883,8 @@ var Notifications$1 = function Notifications(_ref) {
   var notifications = _ref.notifications,
       _onDismiss = _ref.onDismiss;
       _ref.children;
-      var showSideBar = _ref.showSideBar;
+      var showSideBar = _ref.showSideBar,
+      ActionComponent = _ref.ActionComponent;
   var _useState = React.useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -36069,7 +35923,9 @@ var Notifications$1 = function Notifications(_ref) {
       i === last && setI(i - 1);
     }
-  }, notification)) : null, notifications.length > 0 && showSideBar ? notifications.map(function (notification) {
+  }, notification, {
+    ActionComponent: ActionComponent
+  })) : null, notifications.length > 0 && showSideBar ? notifications.map(function (notification) {
     return React__default["default"].createElement(Banner, _extends({
       key: notification.notificationId,
       current: i + 1,
@@ -36079,7 +35935,8 @@ var Notifications$1 = function Notifications(_ref) {
         return _onDismiss(notification);
       }
     }, notification, {
-      showSideBar: showSideBar
+      showSideBar: showSideBar,
+      ActionComponent: ActionComponent
     }));
   }) : null);
 };
@@ -36118,7 +35975,7 @@ var formatRole = function formatRole(role) {
   return capitalizeAndReplaceUnderscores(formatUK(role));
 };
-var _styleModuleImportMap$4 = {
+var _styleModuleImportMap = {
   "./AppBar.css": {
     "root": "utilities_ops-app-frame_AppBarComponent_AppBar--root",
     "leftItems": "utilities_ops-app-frame_AppBarComponent_AppBar--leftItems",
@@ -36256,12 +36113,15 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     showSettingsInAppbar = enableNewToolkitFeatures;
   } else if (!isAuthRoute) {
     if (enableNewToolkitFeatures && showSettingsMenuByTileConfig) {
+      var _window$toolkitEnv;
       var appTiles = coreAppConfig.tiles || [];
+      var appName = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.APP_NAME) ? window.toolkitEnv.APP_NAME : process.env.APP_NAME;
       var appTile = appTiles.find(function (tile) {
         if (tile.appName) {
-          return tile.appName === process.env.APP_NAME;
+          return tile.appName === appName;
         } else {
-          return tile.path === "/".concat(process.env.APP_NAME);
+          return tile.path === "/".concat(appName);
         }
       }) || {};
       showSettingsInAppbar = appTile.showSettingsMenuInAppBar;
@@ -36555,6 +36415,8 @@ var notificationIconComp = function notificationIconComp(_ref3) {
 };
 var AppBar$1 = function AppBar(props) {
+  var _window$toolkitEnv4;
   var coreAppConfig = storage.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
       ideaNoteUri = coreAppConfig.ideaNoteUri;
@@ -36597,7 +36459,9 @@ var AppBar$1 = function AppBar(props) {
       title = props.title,
       getInnovationHubToken = props.getInnovationHubToken,
       notifications = props.notifications,
-      onDismiss = props.onDismiss;
+      onDismiss = props.onDismiss,
+      ActionComponent = props.ActionComponent,
+      saveActionComponentState = props.saveActionComponentState;
   var _useWindowSize = useWindowSize(),
       width = _useWindowSize.width;
@@ -36666,13 +36530,16 @@ var AppBar$1 = function AppBar(props) {
   };
   var getTitle = function getTitle() {
+    var _window$toolkitEnv2, _window$toolkitEnv3;
     var appTiles = coreAppConfig.tiles || [];
     var appTile;
+    var appName = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.APP_NAME) ? window.toolkitEnv.APP_NAME : process.env.APP_NAME;
     var matchingTiles = appTiles.filter(function (tile) {
       if (tile.appName) {
-        return tile.appName === process.env.APP_NAME;
+        return tile.appName === appName;
       } else {
-        return tile.path === "/".concat(process.env.APP_NAME);
+        return tile.path === "/".concat(appName);
       }
     });
@@ -36686,7 +36553,8 @@ var AppBar$1 = function AppBar(props) {
     }
     appTile = appTile || {};
-    return title || appTile.title || process.env.APP_TITLE;
+    var appTitle = ((_window$toolkitEnv3 = window.toolkitEnv) === null || _window$toolkitEnv3 === void 0 ? void 0 : _window$toolkitEnv3.APP_TITLE) ? window.toolkitEnv.APP_TITLE : process.env.APP_TITLE;
+    return title || appTile.title || appTitle;
   };
   var getNotificationWrapperWidth = function getNotificationWrapperWidth() {
@@ -36699,13 +36567,14 @@ var AppBar$1 = function AppBar(props) {
     }
   };
+  var stack = ((_window$toolkitEnv4 = window.toolkitEnv) === null || _window$toolkitEnv4 === void 0 ? void 0 : _window$toolkitEnv4.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
   return React__default["default"].createElement("div", {
     "data-e2e": "cc-AppBar",
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--root"
   }, React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--leftItems"
   }, React__default["default"].createElement("div", {
-    className: _getClassName(enableNewToolkitFeatures ? "copartLogoNew" : "copartLogo", _styleModuleImportMap$4, {
+    className: _getClassName(enableNewToolkitFeatures ? "copartLogoNew" : "copartLogo", _styleModuleImportMap, {
       "handleMissingStyleName": "warn"
     })
   }, React__default["default"].createElement(CopartLogo, null), !enableNewToolkitFeatures && !isAuthRoute ? React__default["default"].createElement("div", {
@@ -36760,9 +36629,9 @@ var AppBar$1 = function AppBar(props) {
       return setCalloutVisible(false);
     },
     isBeakVisible: false
-  }, React__default["default"].createElement("div", null, !process.env.STACK || process.env.STACK === 'c' ? React__default["default"].createElement(SettingsView$1, {
+  }, React__default["default"].createElement("div", null, !stack || stack === 'c' ? React__default["default"].createElement(SettingsView$1, {
     onSave: onSave
-  }) : null, process.env.STACK === 'uk' ? React__default["default"].createElement(SettingsView, {
+  }) : null, stack === 'uk' ? React__default["default"].createElement(SettingsView, {
     onSave: onSave
   }) : null)) : null, ideaNoteVisible && React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer"
@@ -36818,7 +36687,9 @@ var AppBar$1 = function AppBar(props) {
   }, React__default["default"].createElement(Notifications, {
     notifications: notifications || [],
     onDismiss: onDismiss,
-    showSideBar: true
+    showSideBar: true,
+    ActionComponent: ActionComponent,
+    saveActionComponentState: saveActionComponentState
   })))));
 };
 AppBar$1.defaultProps = {
@@ -36847,569 +36718,9 @@ var Flag = function Flag(props) {
   });
 };
-var payload = {
-  headers: {
-    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
-  }
-};
-var changeActivityService = function changeActivityService(workerSid, itemSid) {
-  var _storage$getLocalItem, _storage$getLocalItem2;
-  var url = (_storage$getLocalItem = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem === void 0 ? void 0 : (_storage$getLocalItem2 = _storage$getLocalItem.endpoints) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.changeActivity;
-  return axios.post(frontEndUtils.string.substitute(url, {
-    workerSid: workerSid,
-    itemSid: itemSid
-  }), payload);
-};
-var outboundCallService = function outboundCallService(workerSid, phoneNumber) {
-  var _storage$getLocalItem5, _storage$getLocalItem6;
-  var url = (_storage$getLocalItem5 = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem5 === void 0 ? void 0 : (_storage$getLocalItem6 = _storage$getLocalItem5.endpoints) === null || _storage$getLocalItem6 === void 0 ? void 0 : _storage$getLocalItem6.twilioClickToDial;
-  return fetcher.post(frontEndUtils.string.substitute(url, {
-    phoneNumber: phoneNumber
-  }));
-};
-var noCallInfo = 'No Active Call';
-var IN_CALL = 'InCall';
-var WRAPUP = 'Wrapup';
-var RINGING = 'Ringing';
-var notLoggedInMsg = ' Not Logged in! Click here and wait';
-var loadingMsg = 'Loading...';
-var errorMessage = 'You Cannot Change Status While On Active Call';
-var activeTabWarning = '*Active MiPhone - Please do not close this tab';
-var warningMsg = 'Error occurred. Please check MiPhone status';
-var enableRejectButton = ['admin']; // TO DO: Need to change logic for UK + countries
-var getFormattedPhoneNumber = function getFormattedPhoneNumber() {
-  var number = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  if (startsWith$1('+1', number)) {
-    return number.replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, '$1 ($2) $3-$4');
-  }
-  return number.replace(/(\d{2})(\d{3})(\d{3})(\d{4})/, '$1 ($2) $3-$4');
-};
-var colorMapper = {
-  Offline: '#606471',
-  Available: '#62c158',
-  Unavailable: '#dd392b',
-  Break: '#FFFF00',
-  'Lunch Break': '#FF66FF',
-  'Outbound Only': '#f27b0e'
-};
-var dispatchTwilioStatus = function dispatchTwilioStatus(status) {
-  var isTask = storage$1.twilioVoiceTask;
-  if (!isEmpty$2(isTask) && !includes$1(status, [IN_CALL, WRAPUP, RINGING])) {
-    return false;
-  } else {
-    storage$1.setLocalItem('twilio', status, 'userStatus');
-    var event = new Event('changeBusyLightStatus');
-    window.dispatchEvent(event);
-  }
-};
-var setFavicon = function setFavicon(url) {
-  var nodeList = document.getElementsByTagName('link');
-  for (var i = 0; i < nodeList.length; i++) {
-    if (nodeList[i].getAttribute('rel') == 'shortcut icon') {
-      nodeList[i].setAttribute('href', url);
-    }
-  }
-};
-var getWarningMsg = function getWarningMsg(error) {
-  return pathOr$1(warningMsg, ['data', 'message', 0], error);
-};
-var getFlexUrl = function getFlexUrl() {
-  var _storage$getLocalItem, _storage$getLocalItem2;
-  return ((_storage$getLocalItem = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem === void 0 ? void 0 : (_storage$getLocalItem2 = _storage$getLocalItem.endpoints) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.twilioUrl) || 'https://flex.twilio.com/agent-desktop/';
-};
-var getFlexDomain = function getFlexDomain() {
-  var _storage$getLocalItem3, _storage$getLocalItem4;
-  return ((_storage$getLocalItem3 = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem3 === void 0 ? void 0 : (_storage$getLocalItem4 = _storage$getLocalItem3.endpoints) === null || _storage$getLocalItem4 === void 0 ? void 0 : _storage$getLocalItem4.flexDomain) || 'https://flex.twilio.com';
-};
 var css_248z$4 = "#utilities_ops-app-frame_CallCapsule_style--flex-iframe {\r\n  width: '100%';\r\n   height: '100%';\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--flex-bar {\r\n  position: relative;\r\n  z-index: 9999;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iframeSection {\r\n  border: 1px solid #233659;\r\n  border-radius: 8px !important;\r\n  overflow: hidden;\r\n  width: 560px;\r\n  height: 610px;\r\n  position: absolute;\r\n  top: 53px;\r\n  z-index: 100;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--fullScreen{\r\n  border: 1px solid #233659;\r\n  border-radius: 20px !important;\r\n  overflow: hidden;\r\n  width: 98vw;\r\n  height: 610px;\r\n  position: absolute;\r\n  top: 53px;\r\n  left: -8.7em;\r\n  z-index: 100;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--CallerPillCon {\r\n  display: flex;\r\n  background-color: #8eacdc;\r\n  border-radius: 30px;\r\n  justify-content: center;\r\n  padding: 2px 10px;\r\n  min-width: 300px;\r\n  min-height: 37px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--leftPillCon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n  min-width: 125px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading1 {\r\n  font-size: 12px;\r\n  font-weight: bold;\r\n  color: #3c4656;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iframePopUp {\r\n  display: block;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading6 {\r\n  font-size: 10px;\r\n  color: #3c4656;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading7{\r\n  font-size: 12px;\r\n  background: yellow;\r\n  border-radius: 20px;\r\n  padding: 0 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--centerPillCon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 6px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--rightPillCon{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 6px;\r\n  min-width: 152px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--statusIndicator {\r\n  padding: 0 3px 5px 0;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialpadCon {\r\n  position: absolute;\r\n  top: 55px;\r\n  width: 100%;\r\n  left: 5em;\r\n  max-width: 202px;\r\n  padding: 15px;\r\n  background: #263238;\r\n  border-radius: 22.5px;\r\n  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);\r\n  z-index: 10;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon {\r\n  width: 100%;\r\n  margin-bottom: 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon input {\r\n  background: #37474f;\r\n  color: #cfd8dc;\r\n  padding: 5px;\r\n  border: none;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon input:focus {\r\n  outline: none;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--btn {\r\n  display: inline-block;\r\n  width: calc(33.33% - 10px);\r\n  font-size: 14px;\r\n  background: transparent;\r\n  border: none;\r\n  color: #cfd8dc;\r\n  padding: 10px 0;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--btn:hover {\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_CallCapsule_style--btn:nth-child(3n - 1) {\r\n  margin: 0 15px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--visible {\r\n  visibility: visible;\r\n  overflow: hidden;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--hidden {\r\n  visibility: hidden;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--callActionCon {\r\n  display: flex;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--marginLeft {\r\n  margin-left: 40px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--CallerPillCon hr {\r\n  width: 100%;\r\n  margin: 0;\r\n  outline: none;\r\n  border: none;\r\n  border-right: 1px solid #ddd;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_CallCapsule_style--shake {\r\n  0% {\r\n    -webkit-transform: translate(2px, 1px) rotate(0deg);\r\n  }\r\n  10% {\r\n    -webkit-transform: translate(-1px, -2px) rotate(-1deg);\r\n  }\r\n  20% {\r\n    -webkit-transform: translate(-3px, 0px) rotate(1deg);\r\n  }\r\n  30% {\r\n    -webkit-transform: translate(0px, 2px) rotate(0deg);\r\n  }\r\n  40% {\r\n    -webkit-transform: translate(1px, -1px) rotate(1deg);\r\n  }\r\n  50% {\r\n    -webkit-transform: translate(-1px, 2px) rotate(-1deg);\r\n  }\r\n  60% {\r\n    -webkit-transform: translate(-3px, 1px) rotate(0deg);\r\n  }\r\n  70% {\r\n    -webkit-transform: translate(2px, 1px) rotate(-1deg);\r\n  }\r\n  80% {\r\n    -webkit-transform: translate(-1px, -1px) rotate(1deg);\r\n  }\r\n  90% {\r\n    -webkit-transform: translate(2px, 2px) rotate(0deg);\r\n  }\r\n  100% {\r\n    -webkit-transform: translate(1px, -2px) rotate(-1deg);\r\n  }\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--shake {\r\n  -webkit-animation-name: utilities_ops-app-frame_CallCapsule_style--shake;\r\n  -webkit-animation-duration: 1.3s;\r\n  -webkit-transform-origin: 50% 50%;\r\n  -webkit-animation-iteration-count: infinite;\r\n  -webkit-animation-timing-function: linear;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--actionIcon {\r\n  position: relative;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--wrapText {\r\n  font-size: 9px;\r\n  position: absolute;\r\n  top: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_CallCapsule_style--container {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  position: relative;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--numberCircle {\r\n  border-radius: 40%;\r\n  cursor: pointer;\r\n  width: 28px;\r\n  height: 18px;\r\n  padding: 0px 11px;\r\n  background: #fff;\r\n  color: #666;\r\n  text-align: center;\r\n  font-size: 12px;\r\n  margin-bottom: 9px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--unreadCircle{\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  width: 16px;\r\n  height: 16px;\r\n  padding: 2px 2px 3px;\r\n  background: #e81010;\r\n  color: #fff;\r\n  text-align: center;\r\n  font-size: 8px;\r\n  position: absolute;\r\n  left: 18px;\r\n  top: -3px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iconBtn{\r\n  margin: 0 5px;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iconBtn:focus{\r\n  outline: none !important\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--icon{\r\n  color: #000;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--disabledIcon svg{\r\n opacity:0.4;\r\n  cursor: not-allowed;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialog{\r\nwidth: 420px;\r\nheight: 115px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogCon{\r\n  position: absolute;\r\n    top: 35%;\r\n    left: 36%;\r\n    border: 1px solid rgb(204, 204, 204);\r\n    background: rgb(255, 255, 255);\r\n    overflow: auto;\r\n    border-radius: 4px;\r\n    outline: none;\r\n    padding: 0px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogHeading{\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 10px 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogInfo{\r\n padding: 20px 10px;\r\n text-align: center;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogBtn{\r\n  margin: 5px;\r\n  text-align:right;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--warningMsg {\r\n  color: #fff;\r\n  display: flex;\r\n  background-color: #dd392b;\r\n  border-radius: 7px;\r\n  justify-content: center;\r\n  min-width: 300px;\r\n  font-size: 12px;\r\n  margin: 0 25px -1px 25px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--capsuleSpinner{\r\n  position: absolute;\r\n  left:47%;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--opacity{\r\n  opacity: 0.5;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--closeFlexIcon {\r\n  position: absolute;\r\n  right: 2px;\r\n  top: 14px;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--callIndicator{\r\n  margin-top: 7px;\r\n}";
 styleInject(css_248z$4);
-var _styleModuleImportMap$3 = {
-  "./style.css": {
-    "flex-iframe": "utilities_ops-app-frame_CallCapsule_style--flex-iframe",
-    "flex-bar": "utilities_ops-app-frame_CallCapsule_style--flex-bar",
-    "iframeSection": "utilities_ops-app-frame_CallCapsule_style--iframeSection",
-    "fullScreen": "utilities_ops-app-frame_CallCapsule_style--fullScreen",
-    "CallerPillCon": "utilities_ops-app-frame_CallCapsule_style--CallerPillCon",
-    "leftPillCon": "utilities_ops-app-frame_CallCapsule_style--leftPillCon",
-    "heading1": "utilities_ops-app-frame_CallCapsule_style--heading1",
-    "iframePopUp": "utilities_ops-app-frame_CallCapsule_style--iframePopUp",
-    "heading6": "utilities_ops-app-frame_CallCapsule_style--heading6",
-    "heading7": "utilities_ops-app-frame_CallCapsule_style--heading7",
-    "centerPillCon": "utilities_ops-app-frame_CallCapsule_style--centerPillCon",
-    "rightPillCon": "utilities_ops-app-frame_CallCapsule_style--rightPillCon",
-    "statusIndicator": "utilities_ops-app-frame_CallCapsule_style--statusIndicator",
-    "dialpadCon": "utilities_ops-app-frame_CallCapsule_style--dialpadCon",
-    "inputCon": "utilities_ops-app-frame_CallCapsule_style--inputCon",
-    "btn": "utilities_ops-app-frame_CallCapsule_style--btn",
-    "visible": "utilities_ops-app-frame_CallCapsule_style--visible",
-    "hidden": "utilities_ops-app-frame_CallCapsule_style--hidden",
-    "callActionCon": "utilities_ops-app-frame_CallCapsule_style--callActionCon",
-    "marginLeft": "utilities_ops-app-frame_CallCapsule_style--marginLeft",
-    "shake": "utilities_ops-app-frame_CallCapsule_style--shake",
-    "actionIcon": "utilities_ops-app-frame_CallCapsule_style--actionIcon",
-    "wrapText": "utilities_ops-app-frame_CallCapsule_style--wrapText",
-    "container": "utilities_ops-app-frame_CallCapsule_style--container",
-    "numberCircle": "utilities_ops-app-frame_CallCapsule_style--numberCircle",
-    "unreadCircle": "utilities_ops-app-frame_CallCapsule_style--unreadCircle",
-    "iconBtn": "utilities_ops-app-frame_CallCapsule_style--iconBtn",
-    "icon": "utilities_ops-app-frame_CallCapsule_style--icon",
-    "disabledIcon": "utilities_ops-app-frame_CallCapsule_style--disabledIcon",
-    "dialog": "utilities_ops-app-frame_CallCapsule_style--dialog",
-    "dialogCon": "utilities_ops-app-frame_CallCapsule_style--dialogCon",
-    "dialogHeading": "utilities_ops-app-frame_CallCapsule_style--dialogHeading",
-    "dialogInfo": "utilities_ops-app-frame_CallCapsule_style--dialogInfo",
-    "dialogBtn": "utilities_ops-app-frame_CallCapsule_style--dialogBtn",
-    "warningMsg": "utilities_ops-app-frame_CallCapsule_style--warningMsg",
-    "capsuleSpinner": "utilities_ops-app-frame_CallCapsule_style--capsuleSpinner",
-    "opacity": "utilities_ops-app-frame_CallCapsule_style--opacity",
-    "closeFlexIcon": "utilities_ops-app-frame_CallCapsule_style--closeFlexIcon",
-    "callIndicator": "utilities_ops-app-frame_CallCapsule_style--callIndicator"
-  }
-};
-var IconComponent = function IconComponent(_ref) {
-  var name = _ref.name,
-      _ref$customStyle = _ref.customStyle,
-      customStyle = _ref$customStyle === void 0 ? '' : _ref$customStyle,
-      _ref$tooltipContent = _ref.tooltipContent,
-      tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent,
-      onClick = _ref.onClick;
-  var fieldDisplay = null;
-  switch (name) {
-    case 'dialpad':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "16px",
-        height: "18px",
-        viewBox: "0 0 16 22",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("defs", null, React__default["default"].createElement("path", {
-        d: "M12,19 C10.9,19 10,19.9 10,21 C10,22.1 10.9,23 12,23 C13.1,23 14,22.1 14,21 C14,19.9 13.1,19 12,19 L12,19 Z M6,1 C4.9,1 4,1.9 4,3 C4,4.1 4.9,5 6,5 C7.1,5 8,4.1 8,3 C8,1.9 7.1,1 6,1 L6,1 Z M6,7 C4.9,7 4,7.9 4,9 C4,10.1 4.9,11 6,11 C7.1,11 8,10.1 8,9 C8,7.9 7.1,7 6,7 L6,7 Z M6,13 C4.9,13 4,13.9 4,15 C4,16.1 4.9,17 6,17 C7.1,17 8,16.1 8,15 C8,13.9 7.1,13 6,13 L6,13 Z M18,5 C19.1,5 20,4.1 20,3 C20,1.9 19.1,1 18,1 C16.9,1 16,1.9 16,3 C16,4.1 16.9,5 18,5 L18,5 Z M12,13 C10.9,13 10,13.9 10,15 C10,16.1 10.9,17 12,17 C13.1,17 14,16.1 14,15 C14,13.9 13.1,13 12,13 L12,13 Z M18,13 C16.9,13 16,13.9 16,15 C16,16.1 16.9,17 18,17 C19.1,17 20,16.1 20,15 C20,13.9 19.1,13 18,13 L18,13 Z M18,7 C16.9,7 16,7.9 16,9 C16,10.1 16.9,11 18,11 C19.1,11 20,10.1 20,9 C20,7.9 19.1,7 18,7 L18,7 Z M12,7 C10.9,7 10,7.9 10,9 C10,10.1 10.9,11 12,11 C13.1,11 14,10.1 14,9 C14,7.9 13.1,7 12,7 L12,7 Z M12,1 C10.9,1 10,1.9 10,3 C10,4.1 10.9,5 12,5 C13.1,5 14,4.1 14,3 C14,1.9 13.1,1 12,1 L12,1 Z",
-        id: "path-dialpad"
-      })), React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard",
-        transform: "translate(-361.000000, -48.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "Group",
-        transform: "translate(357.000000, 47.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "Bounds",
-        points: "0 0 24 0 24 24 0 24"
-      }), React__default["default"].createElement("mask", {
-        id: "mask-dialpad",
-        fill: "white"
-      }, React__default["default"].createElement("use", {
-        xlinkHref: "#path-dialpad"
-      })), React__default["default"].createElement("use", {
-        id: "Mask",
-        fill: "#000000",
-        xlinkHref: "#path-dialpad"
-      }), React__default["default"].createElement("g", {
-        mask: "url(#mask-dialpad)",
-        fill: "#000000",
-        id: "Color-1"
-      }, React__default["default"].createElement("g", null, React__default["default"].createElement("rect", {
-        id: "Color-1",
-        x: "0",
-        y: "0",
-        width: "24",
-        height: "24"
-      })))))));
-      break;
-    case 'reload':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "18px",
-        height: "20px",
-        viewBox: "0 0 20 20",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-138.000000, -36.000000)",
-        fill: "#171717",
-        fillRule: "nonzero"
-      }, React__default["default"].createElement("path", {
-        d: "M148,56 C148.917969,56 149.803385,55.8811849 150.65625,55.6435547 C151.509115,55.4059245 152.306641,55.070638 153.048828,54.6376953 C153.791016,54.2047526 154.466471,53.6839193 155.075195,53.0751953 C155.683919,52.4664714 156.204753,51.7910156 156.637695,51.0488281 C157.070638,50.3066406 157.405924,49.5091146 157.643555,48.65625 C157.881185,47.8033854 158,46.9179688 158,46 C158,44.8802083 157.820964,43.804362 157.462891,42.7724609 C157.104818,41.7405599 156.601888,40.7998047 155.954102,39.9501953 C155.306315,39.1005859 154.533203,38.3649089 153.634766,37.7431641 C152.736328,37.1214193 151.746745,36.6640625 150.666016,36.3710938 L150.666016,36.3710938 L150.333984,37.5722656 C151.277995,37.8326823 152.142253,38.2347005 152.926758,38.7783203 C153.711263,39.3219401 154.386719,39.9648438 154.953125,40.7070312 C155.519531,41.4492188 155.960612,42.2727865 156.276367,43.1777344 C156.592122,44.0826823 156.75,45.0234375 156.75,46 C156.75,46.8072917 156.645833,47.5820312 156.4375,48.3242188 C156.229167,49.0664062 155.93457,49.7613932 155.553711,50.4091797 C155.172852,51.0569661 154.715495,51.6477865 154.181641,52.1816406 C153.647786,52.7154948 153.056966,53.1728516 152.40918,53.5537109 C151.761393,53.9345703 151.064779,54.2291667 150.319336,54.4375 C149.573893,54.6458333 148.800781,54.75 148,54.75 C147.192708,54.75 146.417969,54.6458333 145.675781,54.4375 C144.933594,54.2291667 144.238607,53.9345703 143.59082,53.5537109 C142.943034,53.1728516 142.352214,52.7154948 141.818359,52.1816406 C141.284505,51.6477865 140.827148,51.0569661 140.446289,50.4091797 C140.06543,49.7613932 139.770833,49.0647786 139.5625,48.3193359 C139.354167,47.5738932 139.25,46.8007812 139.25,46 C139.25,45.1601562 139.367188,44.343099 139.601562,43.5488281 C139.835938,42.7545573 140.171224,42.0139974 140.607422,41.3271484 C141.04362,40.6402995 141.569336,40.0218099 142.18457,39.4716797 C142.799805,38.9215495 143.488281,38.4641927 144.25,38.0996094 L144.25,38.0996094 L144.25,41 L145.5,41 L145.5,36 L140.5,36 L140.5,37.25 L143.175781,37.25 C142.375,37.6927083 141.655599,38.2249349 141.017578,38.8466797 C140.379557,39.4684245 139.837565,40.1585286 139.391602,40.9169922 C138.945638,41.6754557 138.602214,42.484375 138.361328,43.34375 C138.120443,44.203125 138,45.0885417 138,46 C138,46.9244792 138.118815,47.8115234 138.356445,48.6611328 C138.594076,49.5107422 138.929362,50.3066406 139.362305,51.0488281 C139.795247,51.7910156 140.316081,52.4664714 140.924805,53.0751953 C141.533529,53.6839193 142.208984,54.2047526 142.951172,54.6376953 C143.693359,55.070638 144.490885,55.4059245 145.34375,55.6435547 C146.196615,55.8811849 147.082031,56 148,56 Z",
-        id: "icon_reload"
-      }))));
-      break;
-    case 'accept':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "36px",
-        height: "25px",
-        viewBox: "0 0 36 25",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("defs", null, React__default["default"].createElement("polygon", {
-        id: "path-2",
-        points: "7.5 13.475 4.025 10 2.84166667 11.175 7.5 15.8333333 17.5 5.83333333 16.325 4.65833333"
-      })), React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-234.000000, -33.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "icon_accept",
-        transform: "translate(234.000000, 33.500000)"
-      }, React__default["default"].createElement("rect", {
-        id: "Rectangle",
-        fill: "#4B9D4F",
-        x: "0",
-        y: "0",
-        width: "36",
-        height: "24",
-        rx: "12"
-      }), React__default["default"].createElement("g", {
-        id: "icon_accept",
-        transform: "translate(8.000000, 2.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "Bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("mask", {
-        id: "mask-3",
-        fill: "white"
-      }, React__default["default"].createElement("use", {
-        xlinkHref: "#path-2"
-      })), React__default["default"].createElement("use", {
-        id: "Mask",
-        fill: "#000000",
-        xlinkHref: "#path-2"
-      }), React__default["default"].createElement("g", {
-        id: "Group",
-        mask: "url(#mask-3)",
-        fill: "#FFFFFF"
-      }, React__default["default"].createElement("g", {
-        id: "Color-2"
-      }, React__default["default"].createElement("rect", {
-        id: "color-2",
-        x: "0",
-        y: "0",
-        width: "20",
-        height: "20"
-      }))))))));
-      break;
-    case 'reject':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "36px",
-        height: "25px",
-        viewBox: "0 0 36 25",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("defs", null, React__default["default"].createElement("polygon", {
-        id: "path-3",
-        points: "15.8333333 5.34166667 14.6583333 4.16666667 10 8.825 5.34166667 4.16666667 4.16666667 5.34166667 8.825 10 4.16666667 14.6583333 5.34166667 15.8333333 10 11.175 14.6583333 15.8333333 15.8333333 14.6583333 11.175 10"
-      })), React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-290.000000, -33.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "icon_reject",
-        transform: "translate(290.000000, 33.500000)"
-      }, React__default["default"].createElement("rect", {
-        id: "Rectangle",
-        fill: "#E53935",
-        x: "0",
-        y: "0",
-        width: "36",
-        height: "24",
-        rx: "12"
-      }), React__default["default"].createElement("g", {
-        id: "Icon_reject",
-        transform: "translate(8.000000, 2.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "Bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("mask", {
-        id: "mask-4",
-        fill: "white"
-      }, React__default["default"].createElement("use", {
-        xlinkHref: "#path-3"
-      })), React__default["default"].createElement("use", {
-        id: "Mask",
-        fill: "#000000",
-        xlinkHref: "#path-3"
-      }), React__default["default"].createElement("g", {
-        id: "Group",
-        mask: "url(#mask-4)",
-        fill: "#FFFFFF"
-      }, React__default["default"].createElement("g", {
-        id: "Color-3"
-      }, React__default["default"].createElement("rect", {
-        id: "color-3",
-        x: "0",
-        y: "0",
-        width: "20",
-        height: "20"
-      }))))))));
-      break;
-    case 'wrapup':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "36px",
-        height: "24px",
-        viewBox: "0 0 36 24",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("defs", null, React__default["default"].createElement("path", {
-        d: "M10,7.5 C8.66666667,7.5 7.375,7.70833333 6.16666667,8.1 L6.16666667,10.6833333 C6.16666667,11.0083333 5.975,11.3 5.7,11.4333333 C4.88333333,11.8416667 4.14166667,12.3666667 3.48333333,12.975 C3.33333333,13.125 3.125,13.2083333 2.9,13.2083333 C2.66666667,13.2083333 2.45833333,13.1166667 2.30833333,12.9666667 L0.241666667,10.9 C0.0916666667,10.7583333 0,10.55 0,10.3166667 C0,10.0833333 0.0916666667,9.875 0.241666667,9.725 C2.78333333,7.31666667 6.21666667,5.83333333 10,5.83333333 C13.7833333,5.83333333 17.2166667,7.31666667 19.7583333,9.725 C19.9083333,9.875 20,10.0833333 20,10.3166667 C20,10.55 19.9083333,10.7583333 19.7583333,10.9083333 L17.6916667,12.975 C17.5416667,13.125 17.3333333,13.2166667 17.1,13.2166667 C16.875,13.2166667 16.6666667,13.125 16.5166667,12.9833333 C15.8583333,12.3666667 15.1083333,11.85 14.2916667,11.4416667 C14.0166667,11.3083333 13.825,11.025 13.825,10.6916667 L13.825,8.10833333 C12.625,7.70833333 11.3333333,7.5 10,7.5 L10,7.5 Z",
-        id: "path-4"
-      })), React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-290.000000, -133.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "icon_complete_call",
-        transform: "translate(290.000000, 133.000000)"
-      }, React__default["default"].createElement("rect", {
-        id: "Rectangle",
-        fill: "#1D5AB9",
-        x: "0",
-        y: "0",
-        width: "36",
-        height: "24",
-        rx: "12"
-      }), React__default["default"].createElement("g", {
-        id: "icon_accept",
-        transform: "translate(8.000000, 2.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "Bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("mask", {
-        id: "mask-5",
-        fill: "white"
-      }, React__default["default"].createElement("use", {
-        xlinkHref: "#path-4"
-      })), React__default["default"].createElement("use", {
-        id: "Mask",
-        fill: "#000000",
-        xlinkHref: "#path-4"
-      }), React__default["default"].createElement("g", {
-        id: "Group",
-        mask: "url(#mask-5)",
-        fill: "#FFFFFF"
-      }, React__default["default"].createElement("g", {
-        id: "Color"
-      }, React__default["default"].createElement("rect", {
-        id: "color",
-        x: "0",
-        y: "0",
-        width: "20",
-        height: "20"
-      }))))))));
-      break;
-    case 'end':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "36px",
-        height: "24px",
-        viewBox: "0 0 36 24",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("defs", null, React__default["default"].createElement("path", {
-        d: "M10,7.5 C8.66666667,7.5 7.375,7.70833333 6.16666667,8.1 L6.16666667,10.6833333 C6.16666667,11.0083333 5.975,11.3 5.7,11.4333333 C4.88333333,11.8416667 4.14166667,12.3666667 3.48333333,12.975 C3.33333333,13.125 3.125,13.2083333 2.9,13.2083333 C2.66666667,13.2083333 2.45833333,13.1166667 2.30833333,12.9666667 L0.241666667,10.9 C0.0916666667,10.7583333 0,10.55 0,10.3166667 C0,10.0833333 0.0916666667,9.875 0.241666667,9.725 C2.78333333,7.31666667 6.21666667,5.83333333 10,5.83333333 C13.7833333,5.83333333 17.2166667,7.31666667 19.7583333,9.725 C19.9083333,9.875 20,10.0833333 20,10.3166667 C20,10.55 19.9083333,10.7583333 19.7583333,10.9083333 L17.6916667,12.975 C17.5416667,13.125 17.3333333,13.2166667 17.1,13.2166667 C16.875,13.2166667 16.6666667,13.125 16.5166667,12.9833333 C15.8583333,12.3666667 15.1083333,11.85 14.2916667,11.4416667 C14.0166667,11.3083333 13.825,11.025 13.825,10.6916667 L13.825,8.10833333 C12.625,7.70833333 11.3333333,7.5 10,7.5 L10,7.5 Z",
-        id: "path-5"
-      })), React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-290.000000, -70.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "icon_end_call",
-        transform: "translate(290.000000, 70.000000)"
-      }, React__default["default"].createElement("rect", {
-        id: "Rectangle",
-        fill: "#E53935",
-        x: "0",
-        y: "0",
-        width: "36",
-        height: "24",
-        rx: "12"
-      }), React__default["default"].createElement("g", {
-        id: "icon_end_call",
-        transform: "translate(8.000000, 2.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "Bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("mask", {
-        id: "mask-6",
-        fill: "white"
-      }, React__default["default"].createElement("use", {
-        xlinkHref: "#path-5"
-      })), React__default["default"].createElement("use", {
-        id: "Mask",
-        fill: "#000000",
-        xlinkHref: "#path-5"
-      }), React__default["default"].createElement("g", {
-        id: "Group",
-        mask: "url(#mask-6)",
-        fill: "#FFFFFF"
-      }, React__default["default"].createElement("g", {
-        id: "Color"
-      }, React__default["default"].createElement("rect", {
-        id: "color",
-        x: "0",
-        y: "0",
-        width: "20",
-        height: "20"
-      }))))))));
-      break;
-    case 'in_call':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "20px",
-        height: "20px",
-        viewBox: "0 0 20 20",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-266.000000, -163.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "phone-in-progress-icon",
-        transform: "translate(266.000000, 163.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("path", {
-        d: "M16.6666667,12.9166667 C15.625,12.9166667 14.625,12.75 13.6916667,12.4416667 C13.4,12.35 13.075,12.4166667 12.8416667,12.6416667 L11.0083333,14.475 C8.65,13.275 6.71666667,11.35 5.51666667,8.98333333 L7.35,7.14166667 C7.58333333,6.925 7.65,6.6 7.55833333,6.30833333 C7.25,5.375 7.08333333,4.375 7.08333333,3.33333333 C7.08333333,2.875 6.70833333,2.5 6.25,2.5 L3.33333333,2.5 C2.875,2.5 2.5,2.875 2.5,3.33333333 C2.5,11.1583333 8.84166667,17.5 16.6666667,17.5 C17.125,17.5 17.5,17.125 17.5,16.6666667 L17.5,13.75 C17.5,13.2916667 17.125,12.9166667 16.6666667,12.9166667 Z M15.8333333,10 L17.5,10 C17.5,5.85833333 14.1416667,2.5 10,2.5 L10,4.16666667 C13.225,4.16666667 15.8333333,6.775 15.8333333,10 Z M12.5,10 L14.1666667,10 C14.1666667,7.7 12.3,5.83333333 10,5.83333333 L10,7.5 C11.3833333,7.5 12.5,8.61666667 12.5,10 Z",
-        id: "in-progress-icon",
-        fill: "#1D5AB9",
-        fillRule: "nonzero"
-      })))));
-      break;
-    case 'conference':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "20px",
-        height: "20px",
-        viewBox: "0 0 20 20",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-266.000000, -114.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "phone-conference-icon",
-        transform: "translate(266.000000, 114.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("path", {
-        d: "M5.25,2.5 C5.70833333,2.5 6.08333333,2.875 6.08333333,3.33333333 C6.08333333,4.375 6.25,5.375 6.55833333,6.30833333 C6.65,6.6 6.58333333,6.925 6.35,7.14166667 L6.35,7.14166667 L4.51666667,8.98333333 C5.71666667,11.35 7.65,13.275 10.0083333,14.475 L10.0083333,14.475 L11.8416667,12.6416667 C12.075,12.4166667 12.4,12.35 12.6916667,12.4416667 C13.625,12.75 14.625,12.9166667 15.6666667,12.9166667 C16.125,12.9166667 16.5,13.2916667 16.5,13.75 L16.5,13.75 L16.5,16.6666667 C16.5,17.125 16.125,17.5 15.6666667,17.5 C7.84166667,17.5 1.5,11.1583333 1.5,3.33333333 C1.5,2.875 1.875,2.5 2.33333333,2.5 L2.33333333,2.5 Z M11.5,7 C12.665,7 15,7.585 15,8.75 L15,8.75 L15,10 L8,10 L8,8.75 C8,7.585 10.335,7 11.5,7 Z M15.5,7 C16.665,7 19,7.585 19,8.75 L19,8.75 L19,10 L16,10 L16,8.75 C16,8.01 15.595,7.445 15.015,7.025 C15.19,7.01 15.355,7 15.5,7 Z M15.5,3 C16.33,3 16.995,3.67 16.995,4.5 C16.995,5.33 16.33,6 15.5,6 C14.67,6 14,5.33 14,4.5 C14,3.67 14.67,3 15.5,3 Z M11.5,3 C12.33,3 12.995,3.67 12.995,4.5 C12.995,5.33 12.33,6 11.5,6 C10.67,6 10,5.33 10,4.5 C10,3.67 10.67,3 11.5,3 Z",
-        id: "conference-icon",
-        fill: "#1D5AB9",
-        fillRule: "nonzero"
-      })))));
-      break;
-    case 'wrapping':
-      fieldDisplay = React__default["default"].createElement("svg", {
-        width: "20px",
-        height: "20px",
-        viewBox: "0 0 20 20",
-        version: "1.1",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, React__default["default"].createElement("g", {
-        id: "Symbols",
-        stroke: "none",
-        strokeWidth: "1",
-        fill: "none",
-        fillRule: "evenodd"
-      }, React__default["default"].createElement("g", {
-        id: "Artboard-Copy",
-        transform: "translate(-266.000000, -188.000000)"
-      }, React__default["default"].createElement("g", {
-        id: "phone-wrap-up-icon",
-        transform: "translate(266.000000, 188.000000)"
-      }, React__default["default"].createElement("polygon", {
-        id: "bounds",
-        points: "0 0 20 0 20 20 0 20"
-      }), React__default["default"].createElement("path", {
-        d: "M6.25,2.5 C6.70833333,2.5 7.08333333,2.875 7.08333333,3.33333333 C7.08333333,4.375 7.25,5.375 7.55833333,6.30833333 C7.65,6.6 7.58333333,6.925 7.35,7.14166667 L7.35,7.14166667 L5.51666667,8.98333333 C6.71666667,11.35 8.65,13.275 11.0083333,14.475 L11.0083333,14.475 L12.8416667,12.6416667 C13.075,12.4166667 13.4,12.35 13.6916667,12.4416667 C14.625,12.75 15.625,12.9166667 16.6666667,12.9166667 C17.125,12.9166667 17.5,13.2916667 17.5,13.75 L17.5,13.75 L17.5,16.6666667 C17.5,17.125 17.125,17.5 16.6666667,17.5 C8.84166667,17.5 2.5,11.1583333 2.5,3.33333333 C2.5,2.875 2.875,2.5 3.33333333,2.5 L3.33333333,2.5 Z M18.1083333,3 L19.1666667,4.05833333 L13.175,10.05 L10,6.875 L11.0583333,5.81666667 L13.1833333,7.94166667 L18.1083333,3 Z",
-        id: "wrap-up-icon",
-        fill: "#1D5AB9",
-        fillRule: "nonzero"
-      })))));
-      break;
-    default:
-      fieldDisplay = null;
-  }
-  return React__default["default"].createElement(coreComponents.Tooltip, {
-    content: tooltipContent
-  }, React__default["default"].createElement("div", {
-    onClick: onClick,
-    className: "utilities_ops-app-frame_CallCapsule_style--iconBtn",
-    name: name,
-    onKeyPress: onClick,
-    role: "button",
-    tabIndex: "0"
-  }, React__default["default"].createElement("span", {
-    className: _getClassName(customStyle, _styleModuleImportMap$3, {
-      "handleMissingStyleName": "warn"
-    })
-  }, fieldDisplay)));
-};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -40297,1320 +39608,7 @@ var ReactModal = /*@__PURE__*/unwrapExports(lib);
 ReactModal.setAppElement('*');
-var ReloadDialog = function ReloadDialog(_ref) {
-  var showReload = _ref.showReload,
-      onReloadFlex = _ref.onReloadFlex;
-  return React__default["default"].createElement(ReactModal, {
-    isOpen: showReload,
-    className: "utilities_ops-app-frame_CallCapsule_style--dialogCon"
-  }, React__default["default"].createElement("h3", {
-    className: "utilities_ops-app-frame_CallCapsule_style--dialogHeading"
-  }, "Warning!"), React__default["default"].createElement("p", {
-    className: "utilities_ops-app-frame_CallCapsule_style--dialogInfo"
-  }, "You have closed active flex tab. Please reload flex"), React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--dialogBtn"
-  }, React__default["default"].createElement(coreComponents.Button, {
-    primary: true,
-    onClick: onReloadFlex
-  }, "Ok")));
-};
-var Warning = function Warning(_ref) {
-  var warning = _ref.warning,
-      setWarning = _ref.setWarning,
-      _ref$isVoiceEmpty = _ref.isVoiceEmpty,
-      isVoiceEmpty = _ref$isVoiceEmpty === void 0 ? false : _ref$isVoiceEmpty,
-      setShowFlex = _ref.setShowFlex,
-      isFlexLoaded = _ref.isFlexLoaded;
-  var warningIconClick = function warningIconClick() {
-    setShowFlex(true);
-    if (isVoiceEmpty) {
-      setWarning('false');
-    }
-  };
-  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(coreComponents.Tooltip, {
-    content: warning
-  }, React__default["default"].createElement(coreComponents.IconButton, {
-    disabled: isFlexLoaded,
-    onClick: warningIconClick
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: "warning",
-    variant: "material",
-    style: _objectSpread2({
-      color: 'red'
-    }, isFlexLoaded ? {
-      opacity: '0.3',
-      cursor: 'not-allowed'
-    } : {
-      cursor: 'pointer'
-    })
-  }))));
-};
-var _styleModuleImportMap$2 = {
-  "./style.css": {
-    "flex-iframe": "utilities_ops-app-frame_CallCapsule_style--flex-iframe",
-    "flex-bar": "utilities_ops-app-frame_CallCapsule_style--flex-bar",
-    "iframeSection": "utilities_ops-app-frame_CallCapsule_style--iframeSection",
-    "fullScreen": "utilities_ops-app-frame_CallCapsule_style--fullScreen",
-    "CallerPillCon": "utilities_ops-app-frame_CallCapsule_style--CallerPillCon",
-    "leftPillCon": "utilities_ops-app-frame_CallCapsule_style--leftPillCon",
-    "heading1": "utilities_ops-app-frame_CallCapsule_style--heading1",
-    "iframePopUp": "utilities_ops-app-frame_CallCapsule_style--iframePopUp",
-    "heading6": "utilities_ops-app-frame_CallCapsule_style--heading6",
-    "heading7": "utilities_ops-app-frame_CallCapsule_style--heading7",
-    "centerPillCon": "utilities_ops-app-frame_CallCapsule_style--centerPillCon",
-    "rightPillCon": "utilities_ops-app-frame_CallCapsule_style--rightPillCon",
-    "statusIndicator": "utilities_ops-app-frame_CallCapsule_style--statusIndicator",
-    "dialpadCon": "utilities_ops-app-frame_CallCapsule_style--dialpadCon",
-    "inputCon": "utilities_ops-app-frame_CallCapsule_style--inputCon",
-    "btn": "utilities_ops-app-frame_CallCapsule_style--btn",
-    "visible": "utilities_ops-app-frame_CallCapsule_style--visible",
-    "hidden": "utilities_ops-app-frame_CallCapsule_style--hidden",
-    "callActionCon": "utilities_ops-app-frame_CallCapsule_style--callActionCon",
-    "marginLeft": "utilities_ops-app-frame_CallCapsule_style--marginLeft",
-    "shake": "utilities_ops-app-frame_CallCapsule_style--shake",
-    "actionIcon": "utilities_ops-app-frame_CallCapsule_style--actionIcon",
-    "wrapText": "utilities_ops-app-frame_CallCapsule_style--wrapText",
-    "container": "utilities_ops-app-frame_CallCapsule_style--container",
-    "numberCircle": "utilities_ops-app-frame_CallCapsule_style--numberCircle",
-    "unreadCircle": "utilities_ops-app-frame_CallCapsule_style--unreadCircle",
-    "iconBtn": "utilities_ops-app-frame_CallCapsule_style--iconBtn",
-    "icon": "utilities_ops-app-frame_CallCapsule_style--icon",
-    "disabledIcon": "utilities_ops-app-frame_CallCapsule_style--disabledIcon",
-    "dialog": "utilities_ops-app-frame_CallCapsule_style--dialog",
-    "dialogCon": "utilities_ops-app-frame_CallCapsule_style--dialogCon",
-    "dialogHeading": "utilities_ops-app-frame_CallCapsule_style--dialogHeading",
-    "dialogInfo": "utilities_ops-app-frame_CallCapsule_style--dialogInfo",
-    "dialogBtn": "utilities_ops-app-frame_CallCapsule_style--dialogBtn",
-    "warningMsg": "utilities_ops-app-frame_CallCapsule_style--warningMsg",
-    "capsuleSpinner": "utilities_ops-app-frame_CallCapsule_style--capsuleSpinner",
-    "opacity": "utilities_ops-app-frame_CallCapsule_style--opacity",
-    "closeFlexIcon": "utilities_ops-app-frame_CallCapsule_style--closeFlexIcon",
-    "callIndicator": "utilities_ops-app-frame_CallCapsule_style--callIndicator"
-  }
-};
-var CallIndicator = function CallIndicator(_ref) {
-  var voiceTask = _ref.voiceTask;
-  var _voiceTask$event = voiceTask.event,
-      event = _voiceTask$event === void 0 ? '' : _voiceTask$event,
-      conference = voiceTask.conference;
-  return React__default["default"].createElement("span", {
-    className: "utilities_ops-app-frame_CallCapsule_style--callIndicator"
-  }, event === 'assigned' && conference !== 'true' && React__default["default"].createElement(IconComponent, {
-    name: "in_call",
-    customStyle: "icon",
-    tooltipContent: "In Call"
-  }), event === 'wrapping' && React__default["default"].createElement(IconComponent, {
-    name: "wrapping",
-    customStyle: "icon",
-    tooltipContent: "Wrapping"
-  }), conference === 'true' && event === 'assigned' && React__default["default"].createElement(IconComponent, {
-    name: "conference",
-    customStyle: "icon",
-    tooltipContent: "Conference"
-  }));
-};
-var CallerInfo = function CallerInfo(_ref2) {
-  _ref2.isVoiceEmpty;
-      var voiceTask = _ref2.voiceTask;
-  var _voiceTask$callerNumb = voiceTask.callerNumber,
-      callerNumber = _voiceTask$callerNumb === void 0 ? '' : _voiceTask$callerNumb,
-      _voiceTask$callerType = voiceTask.callerType,
-      callerType = _voiceTask$callerType === void 0 ? '' : _voiceTask$callerType,
-      _voiceTask$callType = voiceTask.callType,
-      callType = _voiceTask$callType === void 0 ? '' : _voiceTask$callType;
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--leftPillCon"
-  }, React__default["default"].createElement(coreComponents.Typography, {
-    variant: "h1",
-    className: "utilities_ops-app-frame_CallCapsule_style--heading1"
-  }, callerNumber ? getFormattedPhoneNumber(callerNumber) : noCallInfo), React__default["default"].createElement(coreComponents.Typography, {
-    variant: "h6",
-    className: "utilities_ops-app-frame_CallCapsule_style--heading6"
-  }, callType === 'callback' ? callerType ? "".concat(callerType, " - CALLBACK") : 'CALLBACK' : "".concat(callerType)));
-};
-var Voice = function Voice(_ref3) {
-  var onAccept = _ref3.onAccept,
-      onReject = _ref3.onReject,
-      onWrapup = _ref3.onWrapup,
-      onHangup = _ref3.onHangup,
-      voiceTask = _ref3.voiceTask,
-      role = _ref3.role;
-  var _voiceTask$accept = voiceTask.accept,
-      accept = _voiceTask$accept === void 0 ? '' : _voiceTask$accept,
-      _voiceTask$wrapup = voiceTask.wrapup,
-      wrapup = _voiceTask$wrapup === void 0 ? '' : _voiceTask$wrapup,
-      _voiceTask$event2 = voiceTask.event,
-      event = _voiceTask$event2 === void 0 ? '' : _voiceTask$event2;
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--centerPillCon"
-  }, accept !== 'true' && wrapup !== 'true' && React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--actionIcon"
-  }, React__default["default"].createElement(IconComponent, {
-    name: "accept",
-    customStyle: "icon",
-    tooltipContent: "Answer",
-    onClick: onAccept
-  })), accept !== 'true' && event === 'reserved' && enableRejectButton.includes(role) && React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--actionIcon"
-  }, React__default["default"].createElement(IconComponent, {
-    name: "reject",
-    customStyle: "icon",
-    tooltipContent: "Reject",
-    onClick: onReject
-  })), accept === 'true' && wrapup !== 'true' && React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--actionIcon"
-  }, React__default["default"].createElement(IconComponent, {
-    name: "end",
-    customStyle: "icon",
-    tooltipContent: "Hang Up",
-    onClick: onHangup
-  })), wrapup === 'true' && React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--actionIcon"
-  }, React__default["default"].createElement(IconComponent, {
-    name: "wrapup",
-    customStyle: "icon",
-    tooltipContent: "Wrap up",
-    onClick: onWrapup
-  })));
-};
-var Actions = function Actions(_ref4) {
-  var onDialPadIconClick = _ref4.onDialPadIconClick,
-      onIframeOpenClick = _ref4.onIframeOpenClick,
-      showFlex = _ref4.showFlex,
-      isFlexLoaded = _ref4.isFlexLoaded,
-      onReloadFlex = _ref4.onReloadFlex,
-      voiceTaskAccepted = _ref4.voiceTaskAccepted,
-      isFullScreen = _ref4.isFullScreen,
-      toggleScreen = _ref4.toggleScreen;
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--centerPillCon"
-  }, !voiceTaskAccepted && React__default["default"].createElement(IconComponent, {
-    name: "dialpad",
-    color: "#000",
-    tooltipContent: "Dialpad",
-    onClick: onDialPadIconClick
-  }), isFlexLoaded && React__default["default"].createElement(IconComponent, {
-    name: "reload",
-    customStyle: voiceTaskAccepted ? 'disabledIcon' : 'icon',
-    tooltipContent: voiceTaskAccepted ? 'Please reload when there is no active call' : 'Reload',
-    onClick: function onClick() {
-      return voiceTaskAccepted ? false : onReloadFlex();
-    }
-  }), !isFlexLoaded && React__default["default"].createElement(coreComponents.Tooltip, {
-    content: showFlex ? 'Hide' : 'Show'
-  }, React__default["default"].createElement(coreComponents.IconButton, {
-    onClick: onIframeOpenClick
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: showFlex ? 'close' : 'more_horiz',
-    variant: "material",
-    style: {
-      color: '#3c4656',
-      cursor: 'pointer',
-      fontSize: '18px'
-    }
-  }))), !isFlexLoaded && showFlex && React__default["default"].createElement(coreComponents.Tooltip, {
-    content: isFullScreen ? 'Exit Full Screen' : 'Full Screen'
-  }, React__default["default"].createElement(coreComponents.IconButton, {
-    onClick: toggleScreen
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: isFullScreen ? 'fullscreen_exit' : 'fullscreen',
-    variant: "material",
-    style: {
-      color: '#3c4656',
-      cursor: 'pointer',
-      fontSize: '18px'
-    }
-  }))));
-};
-var Activity = function Activity(_ref5) {
-  var onDropDownClick = _ref5.onDropDownClick,
-      items = _ref5.items,
-      status = _ref5.status,
-      voiceTask = _ref5.voiceTask;
-  var isDropDownOpen = !isEmpty$2(voiceTask) && (voiceTask === null || voiceTask === void 0 ? void 0 : voiceTask.wrapup) !== 'true';
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--rightPillCon"
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--statusIndicator"
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: "CircleFill",
-    style: {
-      color: colorMapper[status],
-      fontSize: '10px'
-    }
-  })), React__default["default"].createElement(coreComponents.Typography, {
-    variant: "h1",
-    className: "utilities_ops-app-frame_CallCapsule_style--heading1"
-  }, React__default["default"].createElement("span", null, status)), !isDropDownOpen ? React__default["default"].createElement(coreComponents.Tooltip, {
-    content: "Status"
-  }, React__default["default"].createElement(coreComponents.IconDropdownMenu, {
-    items: items,
-    icon: "CaretSolidDown",
-    onItemClick: function onItemClick(event, item) {
-      onDropDownClick(item);
-    },
-    position: "ChevronDown"
-  })) : React__default["default"].createElement(coreComponents.Tooltip, {
-    content: errorMessage
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: "CaretSolidDown",
-    style: {
-      cursor: 'not-allowed',
-      opacity: '0.3',
-      fontSize: '14px',
-      color: 'rgb(29, 90, 185)'
-    }
-  })));
-};
-var NotLoggedIn = function NotLoggedIn(_ref6) {
-  var onIframeOpenClick = _ref6.onIframeOpenClick,
-      showFlex = _ref6.showFlex,
-      isReload = _ref6.isReload;
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--centerPillCon"
-  }, !isReload && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(coreComponents.Typography, {
-    variant: "h3",
-    className: "utilities_ops-app-frame_CallCapsule_style--heading1"
-  }, notLoggedInMsg), React__default["default"].createElement(coreComponents.Tooltip, {
-    content: showFlex ? 'Hide' : 'Show'
-  }, React__default["default"].createElement(coreComponents.IconButton, {
-    onClick: onIframeOpenClick
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: showFlex ? 'close' : 'launch',
-    variant: "material",
-    style: {
-      color: '#3c4656',
-      cursor: 'pointer',
-      fontSize: '18px'
-    }
-  })))), isReload && React__default["default"].createElement(coreComponents.Typography, {
-    variant: "h3",
-    className: "utilities_ops-app-frame_CallCapsule_style--heading1"
-  }, loadingMsg));
-};
-var ReloadFlex = function ReloadFlex(_ref7) {
-  var onReloadFlex = _ref7.onReloadFlex,
-      showReload = _ref7.showReload;
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--centerPillCon"
-  }, React__default["default"].createElement(coreComponents.Typography, {
-    variant: "h3",
-    className: "utilities_ops-app-frame_CallCapsule_style--heading1"
-  }, "Please reload the flex"), React__default["default"].createElement(IconComponent, {
-    name: "reload",
-    customStyle: "icon",
-    tooltipContent: "Reload",
-    onClick: onReloadFlex
-  }), React__default["default"].createElement(ReloadDialog, {
-    showReload: showReload,
-    onReloadFlex: onReloadFlex
-  }));
-};
-var Divider = function Divider() {
-  return React__default["default"].createElement("hr", null);
-};
-var CallerPill = function CallerPill(_ref8) {
-  var profileData = _ref8.profileData,
-      acceptTask = _ref8.acceptTask,
-      rejectTask = _ref8.rejectTask,
-      onDropDownClick = _ref8.onDropDownClick,
-      onDialPadIconClick = _ref8.onDialPadIconClick,
-      onIframeOpenClick = _ref8.onIframeOpenClick,
-      _ref8$activities = _ref8.activities,
-      activities = _ref8$activities === void 0 ? [] : _ref8$activities,
-      showFlex = _ref8.showFlex,
-      status = _ref8.status,
-      voiceTask = _ref8.voiceTask,
-      isFlexLoaded = _ref8.isFlexLoaded,
-      onReloadFlex = _ref8.onReloadFlex,
-      showReload = _ref8.showReload,
-      hangupTask = _ref8.hangupTask,
-      wrapupTask = _ref8.wrapupTask,
-      isFullScreen = _ref8.isFullScreen,
-      toggleScreen = _ref8.toggleScreen,
-      isReload = _ref8.isReload,
-      showSpinner = _ref8.showSpinner,
-      warning = _ref8.warning,
-      setWarning = _ref8.setWarning,
-      setShowFlex = _ref8.setShowFlex;
-  return React__default["default"].createElement("div", {
-    className: _getClassName("CallerPillCon ".concat(showSpinner ? ' opacity' : ''), _styleModuleImportMap$2, {
-      "handleMissingStyleName": "warn"
-    })
-  }, !isEmpty$2(profileData) && !showReload && React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(CallIndicator, {
-    voiceTask: voiceTask
-  }), React__default["default"].createElement(CallerInfo, {
-    voiceTask: voiceTask,
-    isVoiceEmpty: isEmpty$2(voiceTask)
-  }), React__default["default"].createElement(Divider, null), !isEmpty$2(voiceTask) && React__default["default"].createElement(Voice, {
-    onAccept: acceptTask,
-    onReject: rejectTask,
-    onHangup: hangupTask,
-    voiceTask: voiceTask,
-    onWrapup: wrapupTask,
-    role: profileData === null || profileData === void 0 ? void 0 : profileData.role
-  }), React__default["default"].createElement(Actions, {
-    onDialPadIconClick: onDialPadIconClick,
-    onIframeOpenClick: onIframeOpenClick,
-    showFlex: showFlex,
-    isFlexLoaded: isFlexLoaded,
-    onReloadFlex: onReloadFlex,
-    voiceTaskAccepted: (voiceTask === null || voiceTask === void 0 ? void 0 : voiceTask.accept) === 'true',
-    isFullScreen: isFullScreen,
-    toggleScreen: toggleScreen
-  }), React__default["default"].createElement(Divider, null), React__default["default"].createElement(Activity, {
-    onDropDownClick: onDropDownClick,
-    items: activities,
-    status: status,
-    voiceTask: voiceTask
-  })), isEmpty$2(profileData) && !showReload && React__default["default"].createElement(NotLoggedIn, {
-    isReload: isReload,
-    onIframeOpenClick: onIframeOpenClick,
-    showFlex: showFlex
-  }), showReload && React__default["default"].createElement(ReloadFlex, {
-    showReload: showReload,
-    onReloadFlex: onReloadFlex
-  }), showSpinner && React__default["default"].createElement("span", {
-    className: "utilities_ops-app-frame_CallCapsule_style--capsuleSpinner"
-  }, React__default["default"].createElement(coreComponents.Spinner, {
-    size: "xs"
-  })), warning !== 'false' && React__default["default"].createElement(Warning, {
-    setWarning: setWarning,
-    setShowFlex: setShowFlex,
-    isVoiceEmpty: isEmpty$2(voiceTask),
-    isFlexLoaded: isFlexLoaded,
-    warning: warning
-  }));
-};
-var _styleModuleImportMap$1 = {
-  "./style.css": {
-    "flex-iframe": "utilities_ops-app-frame_CallCapsule_style--flex-iframe",
-    "flex-bar": "utilities_ops-app-frame_CallCapsule_style--flex-bar",
-    "iframeSection": "utilities_ops-app-frame_CallCapsule_style--iframeSection",
-    "fullScreen": "utilities_ops-app-frame_CallCapsule_style--fullScreen",
-    "CallerPillCon": "utilities_ops-app-frame_CallCapsule_style--CallerPillCon",
-    "leftPillCon": "utilities_ops-app-frame_CallCapsule_style--leftPillCon",
-    "heading1": "utilities_ops-app-frame_CallCapsule_style--heading1",
-    "iframePopUp": "utilities_ops-app-frame_CallCapsule_style--iframePopUp",
-    "heading6": "utilities_ops-app-frame_CallCapsule_style--heading6",
-    "heading7": "utilities_ops-app-frame_CallCapsule_style--heading7",
-    "centerPillCon": "utilities_ops-app-frame_CallCapsule_style--centerPillCon",
-    "rightPillCon": "utilities_ops-app-frame_CallCapsule_style--rightPillCon",
-    "statusIndicator": "utilities_ops-app-frame_CallCapsule_style--statusIndicator",
-    "dialpadCon": "utilities_ops-app-frame_CallCapsule_style--dialpadCon",
-    "inputCon": "utilities_ops-app-frame_CallCapsule_style--inputCon",
-    "btn": "utilities_ops-app-frame_CallCapsule_style--btn",
-    "visible": "utilities_ops-app-frame_CallCapsule_style--visible",
-    "hidden": "utilities_ops-app-frame_CallCapsule_style--hidden",
-    "callActionCon": "utilities_ops-app-frame_CallCapsule_style--callActionCon",
-    "marginLeft": "utilities_ops-app-frame_CallCapsule_style--marginLeft",
-    "shake": "utilities_ops-app-frame_CallCapsule_style--shake",
-    "actionIcon": "utilities_ops-app-frame_CallCapsule_style--actionIcon",
-    "wrapText": "utilities_ops-app-frame_CallCapsule_style--wrapText",
-    "container": "utilities_ops-app-frame_CallCapsule_style--container",
-    "numberCircle": "utilities_ops-app-frame_CallCapsule_style--numberCircle",
-    "unreadCircle": "utilities_ops-app-frame_CallCapsule_style--unreadCircle",
-    "iconBtn": "utilities_ops-app-frame_CallCapsule_style--iconBtn",
-    "icon": "utilities_ops-app-frame_CallCapsule_style--icon",
-    "disabledIcon": "utilities_ops-app-frame_CallCapsule_style--disabledIcon",
-    "dialog": "utilities_ops-app-frame_CallCapsule_style--dialog",
-    "dialogCon": "utilities_ops-app-frame_CallCapsule_style--dialogCon",
-    "dialogHeading": "utilities_ops-app-frame_CallCapsule_style--dialogHeading",
-    "dialogInfo": "utilities_ops-app-frame_CallCapsule_style--dialogInfo",
-    "dialogBtn": "utilities_ops-app-frame_CallCapsule_style--dialogBtn",
-    "warningMsg": "utilities_ops-app-frame_CallCapsule_style--warningMsg",
-    "capsuleSpinner": "utilities_ops-app-frame_CallCapsule_style--capsuleSpinner",
-    "opacity": "utilities_ops-app-frame_CallCapsule_style--opacity",
-    "closeFlexIcon": "utilities_ops-app-frame_CallCapsule_style--closeFlexIcon",
-    "callIndicator": "utilities_ops-app-frame_CallCapsule_style--callIndicator"
-  }
-};
-var Dialer = function Dialer(_ref) {
-  var opened = _ref.opened,
-      onOutBoundCall = _ref.onOutBoundCall;
-  var _React$useState = React__default["default"].useState(''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      number = _React$useState2[0],
-      setNumber = _React$useState2[1];
-  var buttons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
-  var inputRef = React.useRef();
-  var backspace = function backspace() {
-    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-    var selectionStart = input.selectionStart;
-    var selectionEnd = input.selectionEnd;
-    var len = input.value.length;
-    var textbefore = input.value.substring(0, selectionStart); // text in front of selected text
-    input.value.substring(selectionStart, selectionEnd); // selected text
-    var textafter = input.value.substring(selectionEnd, len); // text following selected text
-    if (selectionStart === selectionEnd) {
-      // if no text is selected
-      if (selectionStart > 0) {
-        input.value = input.value.substring(0, selectionStart - 1) + input.value.substring(selectionEnd, len);
-        input.focus();
-        input.selectionStart = selectionStart - 1;
-        input.selectionEnd = selectionStart - 1;
-      } else {
-        input.focus();
-        input.selectionStart = 0;
-        input.selectionEnd = 0;
-      }
-    } // if some text is selected
-    else {
-        input.value = textbefore + textafter;
-        input.focus();
-        input.selectionStart = selectionStart;
-        input.selectionEnd = selectionStart;
-      }
-  };
-  var AddNumber = function AddNumber(char) {
-    var input = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-    var index = input === null || input === void 0 ? void 0 : input.selectionStart;
-    input.value = input.value.substr(0, index) + char + input.value.substr(index);
-    input.focus();
-    input.selectionStart = index + 1;
-    input.selectionEnd = index + 1;
-  };
-  var onKeyPress = function onKeyPress(e) {
-    if (e.keyCode == 13) {
-      onOutBoundCall(e.target.value);
-    }
-  };
-  return React__default["default"].createElement("div", {
-    className: _getClassName("dialpadCon ".concat(opened ? 'visible' : 'hidden'), _styleModuleImportMap$1, {
-      "handleMissingStyleName": "warn"
-    })
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--inputCon"
-  }, React__default["default"].createElement("input", {
-    ref: inputRef,
-    placeholder: "",
-    value: number,
-    onKeyDown: function onKeyDown(e) {
-      return onKeyPress(e);
-    },
-    onChange: function onChange(e) {
-      return setNumber(e.target.value);
-    }
-  })), React__default["default"].createElement("section", null, buttons.map(function (char) {
-    return React__default["default"].createElement("button", {
-      className: "utilities_ops-app-frame_CallCapsule_style--btn",
-      key: char,
-      onClick: function onClick() {
-        return AddNumber(char);
-      }
-    }, char);
-  })), React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--callActionCon"
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--marginLeft"
-  }, React__default["default"].createElement(coreComponents.IconButton, {
-    onClick: function onClick() {
-      backspace();
-    }
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: "Back",
-    style: {
-      color: 'red',
-      fontSize: '18px',
-      textAlign: 'center',
-      cursor: 'pointer'
-    }
-  }))), React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--marginLeft"
-  }, React__default["default"].createElement(coreComponents.IconButton, {
-    onClick: function onClick() {
-      var _inputRef$current;
-      onOutBoundCall(inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value);
-    }
-  }, React__default["default"].createElement(coreComponents.Icon, {
-    name: "Phone",
-    style: {
-      color: 'green',
-      fontSize: '18px',
-      textAlign: 'center',
-      cursor: 'pointer'
-    }
-  })))));
-};
-var voiceReducer = function voiceReducer(state, action) {
-  var type = action.type,
-      payload = action.payload;
-  switch (type) {
-    case 'task':
-      return _objectSpread2({}, state, {}, payload);
-    case 'autoAnswerTask':
-      return _objectSpread2({}, state, {
-        accept: 'true'
-      }, payload);
-    case 'accept':
-      return _objectSpread2({}, state, {
-        accept: 'true'
-      }, payload);
-    case 'wrapup':
-      return _objectSpread2({}, state, {
-        wrapup: 'true'
-      }, payload);
-    case 'conference':
-      return _objectSpread2({}, state, {}, payload);
-    case 'complete':
-      return {};
-    default:
-      throw new Error();
-  }
-};
-var _styleModuleImportMap = {
-  "./style.css": {
-    "flex-iframe": "utilities_ops-app-frame_CallCapsule_style--flex-iframe",
-    "flex-bar": "utilities_ops-app-frame_CallCapsule_style--flex-bar",
-    "iframeSection": "utilities_ops-app-frame_CallCapsule_style--iframeSection",
-    "fullScreen": "utilities_ops-app-frame_CallCapsule_style--fullScreen",
-    "CallerPillCon": "utilities_ops-app-frame_CallCapsule_style--CallerPillCon",
-    "leftPillCon": "utilities_ops-app-frame_CallCapsule_style--leftPillCon",
-    "heading1": "utilities_ops-app-frame_CallCapsule_style--heading1",
-    "iframePopUp": "utilities_ops-app-frame_CallCapsule_style--iframePopUp",
-    "heading6": "utilities_ops-app-frame_CallCapsule_style--heading6",
-    "heading7": "utilities_ops-app-frame_CallCapsule_style--heading7",
-    "centerPillCon": "utilities_ops-app-frame_CallCapsule_style--centerPillCon",
-    "rightPillCon": "utilities_ops-app-frame_CallCapsule_style--rightPillCon",
-    "statusIndicator": "utilities_ops-app-frame_CallCapsule_style--statusIndicator",
-    "dialpadCon": "utilities_ops-app-frame_CallCapsule_style--dialpadCon",
-    "inputCon": "utilities_ops-app-frame_CallCapsule_style--inputCon",
-    "btn": "utilities_ops-app-frame_CallCapsule_style--btn",
-    "visible": "utilities_ops-app-frame_CallCapsule_style--visible",
-    "hidden": "utilities_ops-app-frame_CallCapsule_style--hidden",
-    "callActionCon": "utilities_ops-app-frame_CallCapsule_style--callActionCon",
-    "marginLeft": "utilities_ops-app-frame_CallCapsule_style--marginLeft",
-    "shake": "utilities_ops-app-frame_CallCapsule_style--shake",
-    "actionIcon": "utilities_ops-app-frame_CallCapsule_style--actionIcon",
-    "wrapText": "utilities_ops-app-frame_CallCapsule_style--wrapText",
-    "container": "utilities_ops-app-frame_CallCapsule_style--container",
-    "numberCircle": "utilities_ops-app-frame_CallCapsule_style--numberCircle",
-    "unreadCircle": "utilities_ops-app-frame_CallCapsule_style--unreadCircle",
-    "iconBtn": "utilities_ops-app-frame_CallCapsule_style--iconBtn",
-    "icon": "utilities_ops-app-frame_CallCapsule_style--icon",
-    "disabledIcon": "utilities_ops-app-frame_CallCapsule_style--disabledIcon",
-    "dialog": "utilities_ops-app-frame_CallCapsule_style--dialog",
-    "dialogCon": "utilities_ops-app-frame_CallCapsule_style--dialogCon",
-    "dialogHeading": "utilities_ops-app-frame_CallCapsule_style--dialogHeading",
-    "dialogInfo": "utilities_ops-app-frame_CallCapsule_style--dialogInfo",
-    "dialogBtn": "utilities_ops-app-frame_CallCapsule_style--dialogBtn",
-    "warningMsg": "utilities_ops-app-frame_CallCapsule_style--warningMsg",
-    "capsuleSpinner": "utilities_ops-app-frame_CallCapsule_style--capsuleSpinner",
-    "opacity": "utilities_ops-app-frame_CallCapsule_style--opacity",
-    "closeFlexIcon": "utilities_ops-app-frame_CallCapsule_style--closeFlexIcon",
-    "callIndicator": "utilities_ops-app-frame_CallCapsule_style--callIndicator"
-  }
-};
-var isFlexAvailable = storage$1.flexLoaded;
-var CallCapsule = function CallCapsule() {
-  var isVoiceTask = storage$1.twilioVoiceTask;
-  var _isVoiceTask$accept = isVoiceTask.accept,
-      accept = _isVoiceTask$accept === void 0 ? '' : _isVoiceTask$accept,
-      _isVoiceTask$event = isVoiceTask.event,
-      event = _isVoiceTask$event === void 0 ? '' : _isVoiceTask$event;
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showFlex = _useState2[0],
-      setShowFlex = _useState2[1];
-  var _useState3 = React.useState(accept !== 'true' && event === 'reserved'),
-      _useState4 = _slicedToArray(_useState3, 2),
-      shake = _useState4[0],
-      setShake = _useState4[1];
-  var _useState5 = React.useState(storage$1.workerProfileData),
-      _useState6 = _slicedToArray(_useState5, 2),
-      profileData = _useState6[0],
-      setWorkerProfileData = _useState6[1];
-  var _useState7 = React.useState(storage$1.twilioStatus),
-      _useState8 = _slicedToArray(_useState7, 2),
-      status = _useState8[0],
-      setStatus = _useState8[1];
-  var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      dialerOpen = _useState10[0],
-      setDialerOpen = _useState10[1];
-  var _useReducer = React.useReducer(voiceReducer, isVoiceTask),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      voiceTask = _useReducer2[0],
-      dispatchVoice = _useReducer2[1];
-  var _useState11 = React.useState(isFlexAvailable === 'true'),
-      _useState12 = _slicedToArray(_useState11, 2),
-      isFlexLoaded = _useState12[0],
-      setFlexLoaded = _useState12[1];
-  var _useState13 = React.useState(false),
-      _useState14 = _slicedToArray(_useState13, 2),
-      showReload = _useState14[0],
-      setShowReload = _useState14[1];
-  var _useState15 = React.useState(false),
-      _useState16 = _slicedToArray(_useState15, 2),
-      isFullScreen = _useState16[0],
-      setFullScreen = _useState16[1];
-  var _useState17 = React.useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      isReload = _useState18[0],
-      setReload = _useState18[1];
-  var _useState19 = React.useState(false),
-      _useState20 = _slicedToArray(_useState19, 2),
-      showSpinner = _useState20[0],
-      setShowSpinner = _useState20[1];
-  var _useState21 = React.useState(storage$1.twilioWarning),
-      _useState22 = _slicedToArray(_useState21, 2),
-      warning = _useState22[0],
-      setWarning = _useState22[1]; // Used to send messages across all the opened tabs.
-  var broadcast = React.useMemo(function () {
-    return new BroadcastChannel('twilioChannel');
-  }, []);
-  var onReservationCreated = function onReservationCreated(task) {
-    var taskType = task.taskType;
-    if (includes$1(taskType, ['voice', 'custom1', 'callback'])) {
-      setShake(true);
-      dispatchVoice({
-        type: 'task',
-        payload: task
-      });
-    }
-    setShowSpinner(false);
-  };
-  var onAutoAnswer = function onAutoAnswer(task) {
-    setShowSpinner(true);
-    dispatchVoice({
-      type: 'autoAnswerTask',
-      payload: task
-    });
-  };
-  var acceptedTask = function acceptedTask(task) {
-    setShake(false);
-    dispatchVoice({
-      type: 'accept',
-      payload: task
-    });
-  };
-  var reservationChanged = function reservationChanged() {
-    setShowSpinner(false);
-  };
-  var taskCompleted = function taskCompleted() {
-    dispatchVoice({
-      type: 'complete'
-    });
-    setShake(false);
-    setWarning('false');
-    setShowSpinner(false);
-    dispatchTwilioStatus(storage$1.twilioStatus);
-  };
-  var rejectedTask = function rejectedTask() {
-    dispatchVoice({
-      type: 'complete'
-    });
-  };
-  var conferenceUpdated = function conferenceUpdated(isConference) {
-    dispatchVoice({
-      type: 'conference',
-      payload: {
-        conference: isConference
-      }
-    });
-  };
-  var acceptTaskInFlex = function acceptTaskInFlex() {
-    var twilioTask = storage$1.twilioVoiceTask;
-    if (!isFlexLoaded && (twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid)) {
-      window.frames['twilioFlex'].postMessage({
-        event: 'acceptTask',
-        sid: twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid
-      }, getFlexDomain());
-    }
-  };
-  var rejectTaskInFlex = function rejectTaskInFlex() {
-    setShake(false);
-    var twilioTask = storage$1.twilioVoiceTask;
-    if ((twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid) && !isFlexLoaded) {
-      window.frames['twilioFlex'].postMessage({
-        event: 'rejectTask',
-        sid: twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid
-      }, getFlexDomain());
-      rejectedTask();
-      broadcast.postMessage({
-        event: 'rejectedTask'
-      });
-    }
-  };
-  var hangupCallInFlex = function hangupCallInFlex() {
-    var twilioTask = storage$1.twilioVoiceTask;
-    if (!isFlexLoaded && (twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid)) {
-      window.frames['twilioFlex'].postMessage({
-        event: 'hangupCall',
-        sid: twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid
-      }, getFlexDomain());
-    }
-  };
-  var wrapupTaskInFlex = function wrapupTaskInFlex() {
-    var twilioTask = storage$1.twilioVoiceTask;
-    if (!isFlexLoaded && (twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid)) {
-      window.frames['twilioFlex'].postMessage({
-        event: 'wrapupTask',
-        sid: twilioTask === null || twilioTask === void 0 ? void 0 : twilioTask.reservationSid
-      }, getFlexDomain());
-    }
-  };
-  React.useEffect(function () {
-    if (!isFlexLoaded) {
-      storage$1.setLocalItem('twilio', voiceTask, 'voiceTask');
-    }
-  }, [voiceTask, isFlexLoaded]);
-  React.useEffect(function () {
-    if (!isFlexLoaded) {
-      setFavicon('/copart_red_favicon.ico');
-    } else {
-      setFavicon('/copartFavicon.ico');
-    }
-  }, [isFlexLoaded]);
-  React.useEffect(function () {
-    broadcast.postMessage({
-      event: 'showWarning',
-      warningMsg: warning
-    });
-    storage$1.setLocalItem('twilio', warning, 'warning');
-  }, [warning]);
-  React.useEffect(function () {
-    var handleBeforeunload = function handleBeforeunload(event) {
-      if (!isFlexLoaded) {
-        // TO DO: Custom message is not working in chrome alert popup
-        var confirmationMessage = 'Active call is in progress';
-        (event || window.event).returnValue = confirmationMessage;
-        return confirmationMessage;
-      }
-    };
-    var handleUnLoad = function handleUnLoad(event) {
-      if (!isFlexLoaded) {
-        localStorage.removeItem('twilio');
-        broadcast.postMessage({
-          event: 'flexTabClosed'
-        });
-      }
-    };
-    window.addEventListener('beforeunload', handleBeforeunload);
-    window.addEventListener('unload', handleUnLoad);
-    return function clear() {
-      window.removeEventListener('beforeunload', handleBeforeunload);
-      window.removeEventListener('unload', handleUnLoad);
-    };
-  }, [isFlexLoaded]);
-  React.useEffect(function () {
-    broadcast.onmessage = function (messageEvent) {
-      var ev = pathOr$1('', ['data', 'event'], messageEvent);
-      switch (ev) {
-        case 'activity':
-          setStatus(pathOr$1('', ['data', 'activity'], messageEvent));
-          break;
-        case 'completeTask':
-          taskCompleted();
-          break;
-        case 'wrapupTask':
-          dispatchVoice({
-            type: 'wrapup',
-            payload: pathOr$1({}, ['data', 'task'], messageEvent)
-          });
-          break;
-        case 'reservationChanged':
-          reservationChanged();
-          break;
-        case 'accepted':
-          setShowSpinner(false);
-          acceptedTask(pathOr$1({}, ['data', 'task'], messageEvent));
-          break;
-        case 'acceptTask':
-          acceptTaskInFlex();
-          break;
-        case 'rejectTask':
-          rejectTaskInFlex();
-          break;
-        case 'rejectedTask':
-          setShake(false);
-          setShowSpinner(false);
-          dispatchVoice({
-            type: 'complete'
-          });
-          break;
-        case 'outboundCall':
-          {
-            setTask(pathOr$1({}, ['data', 'task'], messageEvent)); // outboundCall()
-          }
-          break;
-        case 'reservationCreated':
-          onReservationCreated(pathOr$1({}, ['data', 'task'], messageEvent));
-          break;
-        case 'autoAnswer':
-          onAutoAnswer(pathOr$1({}, ['data', 'task'], messageEvent));
-          break;
-        case 'autoWrapup':
-          dispatchVoice({
-            type: 'task',
-            payload: pathOr$1({}, ['data', 'task'], messageEvent)
-          });
-          break;
-        case 'flexLoaded':
-          setShowReload(false);
-          setReload(true);
-          setFlexLoaded(true);
-          dispatchVoice({
-            type: 'complete'
-          });
-          setWorkerProfileData({});
-          setShake(false);
-          setDialerOpen(false);
-          break;
-        case 'flexTabClosed':
-          {
-            setShowReload(true);
-            setReload(false);
-            setShake(false);
-            dispatchVoice({
-              type: 'complete'
-            });
-            storage$1.setLocalItem('twilio', 'false', 'flexLoaded');
-          }
-          break;
-        case 'workerProfile':
-          setWorkerProfileData(pathOr$1({}, ['data', 'workerProfileData'], messageEvent));
-          setReload(false);
-          break;
-        case 'showWarning':
-          setWarning(pathOr$1('false', ['data', 'warningMsg'], messageEvent));
-          break;
-        case 'conference':
-          conferenceUpdated(pathOr$1('false', ['data', 'isConference'], messageEvent));
-          break;
-        case 'hangupCall':
-          hangupCallInFlex();
-          break;
-        case 'wrapupCall':
-          wrapupTaskInFlex();
-          break;
-      }
-    };
-  }, [isFlexLoaded]);
-  React.useEffect(function () {
-    if (isFlexAvailable !== 'true') {
-      broadcast.postMessage({
-        event: 'flexLoaded'
-      });
-      storage$1.setLocalItem('twilio', 'true', 'flexLoaded');
-    }
-    var receiveMessage = function receiveMessage(ev) {
-      if (ev.origin === getFlexDomain()) {
-        var _ev$data = ev.data,
-            _event = _ev$data.event,
-            _ev$data$task = _ev$data.task,
-            task = _ev$data$task === void 0 ? {} : _ev$data$task,
-            workerProfileData = _ev$data.workerProfileData,
-            _status = _ev$data.status;
-            _ev$data.changedActivity;
-            _ev$data.reservation;
-            var isConference = _ev$data.isConference;
-        var _task$taskSid = task.taskSid,
-            taskSid = _task$taskSid === void 0 ? '' : _task$taskSid;
-        switch (_event) {
-          case 'autoAnswer':
-            {
-              dispatchTwilioStatus(RINGING);
-              onAutoAnswer(task);
-              broadcast.postMessage({
-                event: 'autoAnswer',
-                task: task
-              });
-              console.log('MIPHONE:RINGING:AUTOANSWER', taskSid);
-            }
-            break;
-          case 'reservationCreated':
-            {
-              dispatchTwilioStatus(RINGING);
-              onReservationCreated(task);
-              broadcast.postMessage({
-                event: 'reservationCreated',
-                task: task
-              });
-              console.log('MIPHONE:RINGING', taskSid);
-            }
-            break;
-          case 'reservationAccepted':
-            {
-              acceptedTask(task);
-              setShowSpinner(false);
-              broadcast.postMessage({
-                event: 'accepted',
-                task: task
-              });
-              dispatchTwilioStatus(IN_CALL);
-              console.log('MIPHONE:ACCEPTED', taskSid);
-            }
-            break;
-          case 'reservationChanged':
-            {
-              reservationChanged();
-              broadcast.postMessage({
-                event: 'reservationChanged'
-              });
-              dispatchTwilioStatus(_status);
-              console.log('MIPHONE:RESERVATION CHANGED', taskSid);
-            }
-            break;
-          case 'workerProfile':
-            {
-              setWorkerProfileData(workerProfileData);
-              setReload(false);
-              var _status2 = pathOr$1('Offline', ['activity', 'name'], workerProfileData);
-              storage$1.setLocalItem('twilio', workerProfileData, 'workerProfileData');
-              storage$1.setLocalItem('twilio', _status2, 'status');
-              dispatchTwilioStatus(_status2);
-              broadcast.postMessage({
-                event: 'activity',
-                activity: _status2
-              });
-              broadcast.postMessage({
-                event: 'workerProfile',
-                workerProfileData: workerProfileData
-              });
-              broadcast.postMessage({
-                event: 'showWarning',
-                warningMsg: 'false'
-              });
-              setStatus(_status2);
-            }
-            break;
-          case 'completeTask':
-            {
-              taskCompleted();
-              broadcast.postMessage({
-                event: 'completeTask'
-              });
-              dispatchTwilioStatus(_status);
-              console.log('MIPHONE:COMPLETED', taskSid);
-              dispatchVoice({
-                type: 'complete'
-              });
-            }
-            break;
-          case 'wrapupTask':
-            {
-              dispatchTwilioStatus(WRAPUP);
-              dispatchVoice({
-                type: 'wrapup',
-                payload: task
-              });
-              broadcast.postMessage({
-                event: 'wrapupTask',
-                task: task
-              });
-              console.log('MIPHONE:WRAPUP', taskSid);
-            }
-            break;
-          case 'autoWrapup':
-            {
-              dispatchTwilioStatus(WRAPUP);
-              dispatchVoice({
-                type: 'task',
-                payload: task
-              });
-              broadcast.postMessage({
-                event: 'autoWrapup',
-                task: task
-              });
-              console.log('MIPHONE:AUTO WRAPUP', taskSid);
-            }
-            break;
-          case 'activity':
-            {
-              setStatus(_status);
-              dispatchTwilioStatus(_status);
-              broadcast.postMessage({
-                event: 'activity',
-                activity: _status
-              });
-              storage$1.setLocalItem('twilio', _status, 'status');
-            }
-            break;
-          case 'conference':
-            {
-              console.log('conference--', isConference);
-              conferenceUpdated(isConference);
-              broadcast.postMessage({
-                event: 'conference',
-                isConference: isConference
-              });
-            }
-            break;
-        }
-      }
-    };
-    window.addEventListener('message', receiveMessage, false);
-    return function clear() {
-      window.removeEventListener('message', receiveMessage, false);
-      broadcast.close();
-    };
-  }, []);
-  var acceptTask = function acceptTask() {
-    setShake(false);
-    setShowSpinner(true);
-    if (!isFlexLoaded) {
-      acceptTaskInFlex();
-    } else {
-      broadcast.postMessage({
-        event: 'acceptTask'
-      });
-    }
-  };
-  var rejectTask = function rejectTask() {
-    setShake(false);
-    setShowSpinner(false);
-    if (!isFlexLoaded) {
-      rejectTaskInFlex();
-    } else {
-      broadcast.postMessage({
-        event: 'rejectTask'
-      });
-    }
-  };
-  var hangupTask = function hangupTask() {
-    // setShowSpinner(true)
-    if (!isFlexLoaded) {
-      hangupCallInFlex();
-    } else {
-      broadcast.postMessage({
-        event: 'hangupCall'
-      });
-    }
-  };
-  var wrapupTask = function wrapupTask() {
-    if (!isFlexLoaded) {
-      wrapupTaskInFlex();
-    } else {
-      broadcast.postMessage({
-        event: 'wrapupCall'
-      });
-    }
-  };
-  var onDialPadIconClick = function onDialPadIconClick() {
-    setDialerOpen(!dialerOpen);
-    setShowFlex(false);
-  };
-  var onIframeOpenClick = function onIframeOpenClick() {
-    setShowFlex(!showFlex);
-    setDialerOpen(false);
-  };
-  var toggleScreen = function toggleScreen() {
-    setFullScreen(!isFullScreen);
-  };
-  var onReloadFlex = function onReloadFlex() {
-    setFlexLoaded(false);
-    setShowReload(false);
-    setReload(true);
-    setWorkerProfileData({});
-    dispatchVoice({
-      type: 'complete'
-    });
-    setShake(false);
-    broadcast.postMessage({
-      event: 'flexLoaded'
-    });
-    localStorage.removeItem('twilio');
-    storage$1.setLocalItem('twilio', 'true', 'flexLoaded');
-    setDialerOpen(false);
-  };
-  var onDropDownClick = function onDropDownClick(item) {
-    setShowSpinner(true);
-    changeActivityService(profileData === null || profileData === void 0 ? void 0 : profileData.worker, item.sid).then(function (data) {
-      setStatus(item.name);
-      dispatchTwilioStatus(item.name);
-      setShowSpinner(false);
-      broadcast.postMessage({
-        event: 'activity',
-        activity: item.name
-      });
-      storage$1.setLocalItem('twilio', item.name, 'status');
-    }).catch(function (e) {
-      setShowSpinner(false);
-      setWarning(getWarningMsg(e === null || e === void 0 ? void 0 : e.response));
-      console.log('Changing Activity Error', e);
-    });
-  };
-  var onOutBoundCall = function onOutBoundCall(number) {
-    setShowSpinner(true);
-    outboundCallService(profileData === null || profileData === void 0 ? void 0 : profileData.worker, number).then(function (data) {
-      setShowSpinner(false);
-      setDialerOpen(false);
-      console.log('Outbound call intiated');
-    }).catch(function (e) {
-      console.log('error', e);
-      setWarning(getWarningMsg(e === null || e === void 0 ? void 0 : e.response));
-      setShowSpinner(false);
-    });
-  };
-  return React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--container"
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--flex-bar"
-  }, React__default["default"].createElement("div", {
-    className: _getClassName(shake ? 'shake' : '', _styleModuleImportMap, {
-      "handleMissingStyleName": "warn"
-    })
-  }, React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_CallCapsule_style--warningMsg"
-  }, !isFlexLoaded && React__default["default"].createElement("span", null, activeTabWarning)), React__default["default"].createElement(CallerPill, {
-    profileData: profileData,
-    voiceTask: voiceTask,
-    acceptTask: acceptTask,
-    rejectTask: rejectTask,
-    wrapupTask: wrapupTask,
-    hangupTask: hangupTask,
-    onDropDownClick: onDropDownClick,
-    activities: profileData === null || profileData === void 0 ? void 0 : profileData.activities,
-    showFlex: showFlex,
-    status: status,
-    onDialPadIconClick: onDialPadIconClick,
-    onIframeOpenClick: onIframeOpenClick,
-    isFlexLoaded: isFlexLoaded,
-    onReloadFlex: onReloadFlex,
-    showReload: showReload,
-    isFullScreen: isFullScreen,
-    toggleScreen: toggleScreen,
-    isReload: isReload,
-    showSpinner: showSpinner,
-    warning: warning,
-    setWarning: setWarning,
-    setShowFlex: setShowFlex
-  }))), React__default["default"].createElement(Dialer, {
-    onOutBoundCall: onOutBoundCall,
-    opened: dialerOpen
-  }), !isFlexLoaded && React__default["default"].createElement("div", {
-    className: _getClassName("".concat(showFlex ? 'visible' : 'hidden', " ").concat(isFullScreen ? 'fullScreen' : 'iframeSection'), _styleModuleImportMap, {
-      "handleMissingStyleName": "warn"
-    })
-  }, React__default["default"].createElement("iframe", {
-    style: {
-      width: '100%',
-      height: '100%',
-      borderRadius: '6px'
-    },
-    title: "flex",
-    src: getFlexUrl(),
-    id: "flex-iframe",
-    name: "twilioFlex",
-    allow: "camera;microphone;autoplay"
-  })));
-};
+storage$1.flexLoaded;
 var defaultAutoSelectProps = {
   optionStyleProps: {
@@ -41619,7 +39617,7 @@ var defaultAutoSelectProps = {
   },
   width: 200
 };
-var printerFields = [_objectSpread2({}, defaultAutoSelectProps, {
+[_objectSpread2({}, defaultAutoSelectProps, {
   name: 'barcode_label_printers',
   label: 'Bar Code Printer'
 }), _objectSpread2({}, defaultAutoSelectProps, {
@@ -41636,217 +39634,11 @@ var printerFields = [_objectSpread2({}, defaultAutoSelectProps, {
   label: 'Dot Matrix Printers'
 })];
-var EMPTY_PRINTERS = {
-  barcode_label_printers: '',
-  check_printers: '',
-  standard_printers: '',
-  windshield_label_printers: '',
-  text_printers: ''
-};
-var isDefault = propEq$1('is_default', true);
-var findFirstDefault = function findFirstDefault(printers) {
-  return nth$1(0, filter$1(isDefault, printers));
-};
-var getValuesArray = function getValuesArray(final, _ref) {
-  var _ref2 = _slicedToArray(_ref, 2),
-      label = _ref2[0],
-      printers = _ref2[1];
-  final[label] = values$1(printers);
-  return final;
-};
-var pluckDefault = function pluckDefault(final, _ref3) {
-  var _ref4 = _slicedToArray(_ref3, 2),
-      label = _ref4[0],
-      printers = _ref4[1];
-  final[label] = propOr$1('', 'printer_name')(findFirstDefault(printers));
-  return final;
-};
-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;
-    var printerName = sessionDashboard.printers[label];
-    return !isEmpty$2(printerName) ? printerName : printer_name;
-  };
-};
-var chooseActive = function chooseActive(final, _ref5) {
-  var _ref6 = _slicedToArray(_ref5, 2),
-      label = _ref6[0],
-      printer_name = _ref6[1];
-  return append$1({
-    printer_name: sessionOrDefault(label)(printer_name),
-    label: label
-  }, final);
-};
-var reduceToObject = function reduceToObject(reducer) {
-  return function (target) {
-    return reduce$1(reducer, {}, target);
-  };
-};
-var getActivePrinters = (function (printersData) {
-  if (typeof printersData === 'string') return {};
-  var printers = reduceToObject(getValuesArray)(toPairs$1(printersData));
-  var defaultPrinters = reduceToObject(pluckDefault)(toPairs$1(printers));
-  return reduceToObject(chooseActive)(toPairs$1(defaultPrinters));
-});
+propEq$1('is_default', true);
 var css_248z$3 = ".utilities_ops-app-frame_PrinterDialog_PrinterDialog--printerSettings {\r\n  width: 700px;\r\n  padding: 10px;\r\n  background: #f1f1f1;\r\n}\r\n\r\n.utilities_ops-app-frame_PrinterDialog_PrinterDialog--buttonBox {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: flex-end;\r\n  padding-top: 5px;\r\n}";
 styleInject(css_248z$3);
-var countryHeaders = {
-  c: 'USA',
-  uk: 'GBR',
-  g: 'DEU'
-}; // Properly populate printer options before feeding to autoselect
-var getPrinterOptions = function getPrinterOptions(printers) {
-  return Array.isArray(printers) ? printers : [];
-};
-var AUTO_SELECT_STYLE = {
-  rowHeight: 40,
-  optionsMinHeight: 200
-};
-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 PrinterDialog = function PrinterDialog(_ref) {
-  var isDialogOpen = _ref.isDialogOpen,
-      handleClose = _ref.handleClose;
-  var _useState = React.useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      printersData = _useState2[0],
-      setPrintersData = _useState2[1];
-  var _useState3 = React.useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      activePrinters = _useState4[0],
-      setActivePrinters = _useState4[1];
-  React.useEffect(function () {
-    fetchActivePrinters(storage$1.activeYardNumber);
-  }, []);
-  var fetchActivePrinters =
-  /*#__PURE__*/
-  function () {
-    var _ref2 = _asyncToGenerator(
-    /*#__PURE__*/
-    regenerator.mark(function _callee(yardNumber) {
-      var printers, activePrinters, update;
-      return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return fetcher.getPrintersForYard(yardNumber);
-            case 2:
-              printers = _context.sent;
-              activePrinters = getActivePrinters(printers);
-              update = formatActivePrintersForState(activePrinters);
-              console.log(update);
-              setActivePrinters(update);
-              setPrintersData(printers);
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-    return function fetchActivePrinters(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var savePrinters = function savePrinters() {
-    var selectedRole = storage$1.userRole;
-    var securityLevel = storage$1.getSessionItem('securityLevel');
-    var dashboard = storage$1.getSessionItem('dashboard');
-    var selectedCurrency = dashboard.selectedCurrency,
-        language = dashboard.language,
-        yard = dashboard.yard;
-    storage$1.setSessionItem('dashboard', _objectSpread2({}, storage$1.getSessionItem('dashboard'), {
-      printers: activePrinters
-    }));
-    storage$1.setLocalItem('dashboard', activePrinters, 'printers');
-    fetcher.setUserPreferences('oph', {
-      selectedCurrency: selectedCurrency,
-      language: language,
-      // TODO Remove this after remove role selection
-      selectedRole: selectedRole,
-      printers: activePrinters,
-      yard: yard,
-      securityLevel: securityLevel
-    }, countryHeaders[process.env.STACK] || 'USA');
-    handleClose();
-  };
-  return React__default["default"].createElement(coreComponents.Dialog, {
-    title: "Printer Selection",
-    isOpen: isDialogOpen,
-    dismiss: handleClose
-  }, printersData ? React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_PrinterDialog_PrinterDialog--printerSettings"
-  }, React__default["default"].createElement("div", {
-    className: "col-1-1"
-  }, printerFields.map(function (printer) {
-    var name = printer.name || '';
-    var printers = getPrinterOptions(printersData[name]);
-    return React__default["default"].createElement("div", {
-      key: name,
-      className: "col-1-3"
-    }, React__default["default"].createElement(coreComponents.AutoSelect, {
-      key: name,
-      label: printer.label,
-      name: name,
-      value: activePrinters[name],
-      onChange: function onChange(value) {
-        setActivePrinters(_objectSpread2({}, activePrinters, _defineProperty({}, name, value)));
-      },
-      optionStyleProps: AUTO_SELECT_STYLE,
-      options: printers.map(function (data) {
-        return data.printer_name;
-      }),
-      displayOption: function displayOption(code) {
-        return code;
-      }
-    }));
-  })), React__default["default"].createElement("hr", null), React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_PrinterDialog_PrinterDialog--buttonBox"
-  }, React__default["default"].createElement(coreComponents.Button, {
-    primary: true,
-    onClick: handleClose
-  }, "Cancel"), React__default["default"].createElement(coreComponents.Button, {
-    primary: true,
-    onClick: savePrinters
-  }, "Save"))) : null);
-};
 var global$1 = function () {
   if (this) return this; // Unexpected strict mode (may happen if e.g. bundled into ESM module), be nice
   // Thanks @mathiasbynens -> https://mathiasbynens.be/notes/globalthis
@@ -42113,6 +39905,17 @@ function fetchG2Notifications(updateNotifications, updateAllNotificationsList) {
         }] : null,
         targets: _toConsumableArray(generateTargets(notification))
       };
+      if (notification.component_name) {
+        notification.action = {
+          componentName: notification.component_name,
+          properties: notification.component_properties ? JSON.parse(notification.component_properties) : {},
+          componentState: notification.component_state ? JSON.parse(notification.component_state) : {},
+          status: notification.action_status,
+          versionNumber: notification.component_version_number
+        };
+      }
       return notification;
     });
     compose(updateNotifications, filterNotifications)(modifiedNotifications);
@@ -50047,14 +47850,15 @@ var CountryFlag = function CountryFlag() {
 };
 var AppBar = function AppBar(_ref) {
-  var _storage$getSessionIt, _storage$getSessionIt2;
+  var _storage$getSessionIt, _window$toolkitEnv2, _storage$getSessionIt2;
   var history = _ref.history,
       setAppBarMounted = _ref.setAppBarMounted,
       onSettingsSaved = _ref.onSettingsSaved,
       showTitle = _ref.showTitle,
       title = _ref.title,
-      pathname = _ref.pathname;
+      pathname = _ref.pathname,
+      ActionComponent = _ref.ActionComponent;
   SETTINGS_ITEMS[0].name = storage$1.userName; // Escape hatch for forceUpdate function
   var _useReducer = React.useReducer(function (x) {
@@ -50065,14 +47869,14 @@ var AppBar = function AppBar(_ref) {
       var forceUpdate = _useReducer2[1];
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMounted = _useState2[0],
-      setMounted = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2);
+      _useState2[0];
+      var setMounted = _useState2[1];
   var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isPrinterDialogOpen = _useState4[0],
-      setPrinterDialogOpen = _useState4[1];
+      _useState4 = _slicedToArray(_useState3, 2);
+      _useState4[0];
+      var setPrinterDialogOpen = _useState4[1];
   React.useEffect(function () {
     setMounted(true);
@@ -50109,7 +47913,10 @@ var AppBar = function AppBar(_ref) {
     }
     if (item.key === 'settings') {
-      return process.env.IS_CORE_APP ? history.push('/settings') : window.location.assign('/settings');
+      var _window$toolkitEnv;
+      var isCoreApp = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.IS_CORE_APP) ? window.toolkitEnv.IS_CORE_APP : process.env.IS_CORE_APP;
+      return isCoreApp ? history.push('/settings') : window.location.assign('/settings');
     }
     if (item.key === 'printers') {
@@ -50219,6 +48026,17 @@ var AppBar = function AppBar(_ref) {
     });
   };
+  var saveActionComponentState = function saveActionComponentState(id, componentState) {
+    var updatedNotifications = notifications.map(function (notification) {
+      if (notification.notificationId === id) {
+        notification.actionComponentState = componentState;
+      }
+      return notification;
+    });
+    setNotifications(updatedNotifications);
+  };
   var selectedYard = (_storage$getSessionIt = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt === void 0 ? void 0 : _storage$getSessionIt.selectedYard;
   React.useEffect(function () {
     setNotifications([]);
@@ -50268,7 +48086,8 @@ var AppBar = function AppBar(_ref) {
       clearInterval(expireNotificationsInterval);
     };
   }, [notifications]);
-  var STACK = process.env.STACK || 'c';
+  var STACK = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.STACK) ? window.toolkitEnv.STACK : process.env.STACK;
+  STACK = STACK || 'c';
   var modifiedSettings = SETTINGS_ITEMS;
   modifiedSettings[0]['name'] = storage$1.userName;
   var _storage$chromePlugin = storage$1.chromePluginData.ringcentral,
@@ -50276,8 +48095,6 @@ var AppBar = function AppBar(_ref) {
     phoneStatus: '',
     phoneStatusProcessing: false
   } : _storage$chromePlugin;
-  var placeholderNode = document.getElementById('AppBarPlaceholderDiv');
-  var isAppEnabledTwilio = process.env.IS_TWILIO_ENABLED || false;
   return React__default["default"].createElement("div", null, React__default["default"].createElement(AppBar$1, {
     moduleName: "OPS PORTAL",
     isLoggedOn: storage$1.isAuthenticated,
@@ -50300,7 +48117,7 @@ var AppBar = function AppBar(_ref) {
     sendFeedback: fetcher.sendFeedback,
     getInnovationHubToken: fetcher.getInnovationHubToken,
     feedbackConfig: feedbackConfig(),
-    stack: process.env.STACK,
+    stack: STACK,
     phoneStatusObject: ringcentral,
     togglePhoneAvailability: togglePhoneAvailability,
     forceUpdate: forceUpdate,
@@ -50309,17 +48126,14 @@ var AppBar = function AppBar(_ref) {
     title: title,
     history: history,
     notifications: notifications,
-    onDismiss: dismissNotification
-  }), storage$1.twilioEnabledStatus && isAppEnabledTwilio && isMounted && placeholderNode && storage$1.callCapsuleEnabledStatus && React__default["default"].createElement(Portal$2, {
-    node: placeholderNode
-  }, React__default["default"].createElement(CallCapsule, null)), isPrinterDialogOpen && React__default["default"].createElement(PrinterDialog, {
-    isDialogOpen: isPrinterDialogOpen,
-    handleClose: function handleClose() {
-      return setPrinterDialogOpen(false);
-    }
+    onDismiss: dismissNotification,
+    ActionComponent: ActionComponent,
+    saveActionComponentState: saveActionComponentState
   }), React__default["default"].createElement(Notifications, {
     notifications: notifications || [],
-    onDismiss: dismissNotification
+    onDismiss: dismissNotification,
+    ActionComponent: ActionComponent,
+    saveActionComponentState: saveActionComponentState
   }));
 };
 AppBar.defaultProps = {
@@ -50339,20 +48153,20 @@ var NO_TILE_PERMISSION = 'Could not verify user access for the tile.';
 var AuthGuard =
 /*#__PURE__*/
 function (_React$PureComponent) {
-  _inherits$2(AuthGuard, _React$PureComponent);
+  _inherits(AuthGuard, _React$PureComponent);
   function AuthGuard() {
     var _getPrototypeOf2;
     var _this;
-    _classCallCheck$2(this, AuthGuard);
+    _classCallCheck(this, AuthGuard);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _possibleConstructorReturn$2(this, (_getPrototypeOf2 = _getPrototypeOf(AuthGuard)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(AuthGuard)).call.apply(_getPrototypeOf2, [this].concat(args)));
     _defineProperty(_assertThisInitialized(_this), "state", {
       allowAccess: 'wait',
@@ -50376,13 +48190,16 @@ function (_React$PureComponent) {
     return _this;
   }
-  _createClass$2(AuthGuard, [{
+  _createClass(AuthGuard, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator(
       /*#__PURE__*/
       regenerator.mark(function _callee() {
-        var appTile, tileConfigAccess;
+        var _window$toolkitEnv;
+        var disableRestrictions, appTile, _window$toolkitEnv2, appAuthName, tileConfigAccess;
         return regenerator.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -50416,50 +48233,58 @@ function (_React$PureComponent) {
                 return _context.abrupt("return", this.allowAccess(AUTHENTICATED_AND_ON_CORE_ROUTE));
               case 5:
-                if (!process.env.DISABLE_RESTRICTIONS) {
-                  _context.next = 7;
+                // NOTE: Temporary env variable to make sure configs don't break some apps.
+                // User is authenticated and route is not login/logout, so it must
+                // be a opsportal application other than opsportal-core. We now
+                // need to compare yard and security access to determine what to do.
+                disableRestrictions = ((_window$toolkitEnv = window.toolkitEnv) === null || _window$toolkitEnv === void 0 ? void 0 : _window$toolkitEnv.DISABLE_RESTRICTIONS) ? window.toolkitEnv.DISABLE_RESTRICTIONS : process.env.DISABLE_RESTRICTIONS;
+                if (!disableRestrictions) {
+                  _context.next = 8;
                   break;
                 }
                 return _context.abrupt("return", this.allowAccess(PASS_BECAUSE_RESTRICTIONS_DISABLED));
-              case 7:
-                _context.next = 9;
+              case 8:
+                _context.next = 10;
                 return fetcher.getAppTileData();
-              case 9:
+              case 10:
                 appTile = _context.sent;
                 if (appTile) {
-                  _context.next = 15;
+                  _context.next = 17;
                   break;
                 }
-                if (!process.env.APP_AUTH_NAME) {
-                  _context.next = 14;
+                appAuthName = ((_window$toolkitEnv2 = window.toolkitEnv) === null || _window$toolkitEnv2 === void 0 ? void 0 : _window$toolkitEnv2.APP_AUTH_NAME) ? window.toolkitEnv.APP_AUTH_NAME : process.env.APP_AUTH_NAME;
+                if (!appAuthName) {
+                  _context.next = 16;
                   break;
                 }
-                _context.next = 14;
-                return fetcher.getPermissions(process.env.APP_AUTH_NAME);
+                _context.next = 16;
+                return fetcher.getPermissions(appAuthName);
-              case 14:
+              case 16:
                 return _context.abrupt("return", this.allowAccess(PATH_NOT_FOUND));
-              case 15:
-                _context.next = 17;
+              case 17:
+                _context.next = 19;
                 return fetcher.getCoreAppPermissions();
-              case 17:
+              case 19:
                 if (!appTile.appAuthName) {
-                  _context.next = 20;
+                  _context.next = 22;
                   break;
                 }
-                _context.next = 20;
+                _context.next = 22;
                 return fetcher.getPermissions(appTile.appAuthName);
-              case 20:
+              case 22:
                 // If there are rules, evaluate and act accordingly.
                 tileConfigAccess = userHasAccess(appTile);
@@ -50469,7 +48294,7 @@ function (_React$PureComponent) {
                   this.denyAccess(NO_TILE_PERMISSION);
                 }
-              case 22:
+              case 24:
               case "end":
                 return _context.stop();
             }
@@ -50508,7 +48333,7 @@ var GoHome = function GoHome(props) {
   }, props.reason));
 };
-var css_248z = ".utilities_ops-app-frame_AppFrame_AppFrame--AppFrame {\r\n  background: var(--paleGray);\r\n  background: var(--paleGray);\r\n  height: 100vh;\r\n  max-height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-basis: 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppFrame_AppFrame--header {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* Wrapper that contains the app being developed. */\r\n\r\n.utilities_ops-app-frame_AppFrame_AppFrame--AppContainer {\r\n  height: 100%;\r\n}\r\n";
+var css_248z = ".utilities_ops-app-frame_AppFrame_AppFrame--AppFrame {\r\n  background: var(--paleGray);\r\n  background: var(--paleGray);\r\n  height: 100vh;\r\n  max-height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex-basis: 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppFrame_AppFrame--header {\r\n  flex: 0 1 auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n/* Wrapper that contains the app being developed. */\r\n\r\n.utilities_ops-app-frame_AppFrame_AppFrame--AppContainer {\r\n  height: 100%;\r\n  flex: 1 1 auto;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.utilities_ops-app-frame_AppFrame_AppFrame--pageWrapper {\r\n  height: 100vh;\r\n  display: flex;\r\n  flex-flow: column;\r\n}\r\n\r\n.utilities_ops-app-frame_AppFrame_AppFrame--breadCrumbsWrapper {\r\n  flex: 0 1 auto;\r\n}\r\n";
 styleInject(css_248z);
 if (!storage$1.activeYardNumber) {
@@ -50549,17 +48374,27 @@ var AppFrame = function AppFrame(props) {
       window.dispatchEvent(event);
     }
   }, [appBarMounted]);
+  React.useEffect(function () {
+    console.log("+++env in toolkit props=", props.env);
+    if (props.env) {
+      window.toolkitEnv = props.env;
+    }
+  }, [props]);
   var authGuardProps = _objectSpread2({}, props, {
     setAppBarMounted: setAppBarMounted
   });
+  console.log('+++props in frame=', props);
   return React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppFrame",
     style: props.handleScrolling ? SCROLL : NO_SCROLL
   }, React__default["default"].createElement(BreadcrumbsProvider, {
     history: props.history
-  }, React__default["default"].createElement(AuthGuard, authGuardProps, React__default["default"].createElement(ConfigFetcher, null, React__default["default"].createElement("div", null, React__default["default"].createElement("header", {
+  }, React__default["default"].createElement(AuthGuard, authGuardProps, React__default["default"].createElement(ConfigFetcher, null, React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_AppFrame_AppFrame--pageWrapper"
+  }, React__default["default"].createElement("header", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--header"
   }, React__default["default"].createElement(AppBar, {
     searchBarProps: props.searchBarProps,
@@ -50570,11 +48405,14 @@ var AppFrame = function AppFrame(props) {
     },
     showTitle: props.showTitle || true,
     title: props.appTitle,
-    pathname: props.location.pathname
-  })), React__default["default"].createElement(Breadcrumbs, {
+    pathname: props.location.pathname,
+    ActionComponent: props === null || props === void 0 ? void 0 : props.ActionComponent
+  })), React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_AppFrame_AppFrame--breadCrumbsWrapper"
+  }, React__default["default"].createElement(Breadcrumbs, {
     history: props.history,
     pathname: window.location.pathname
-  }), React__default["default"].createElement("main", {
+  })), React__default["default"].createElement("main", {
     className: "utilities_ops-app-frame_AppFrame_AppFrame--AppContainer"
   }, props.children))))));
 };