@copart/ops-tool-kit 1.12.4-alpha.0 → 1.12.4-alpha.1

package/dist/ops-tool-kit.js

@@ -47,7 +47,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$8 = "1.12.4-alpha.0";
+const version$8 = "1.12.4-alpha.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -1263,17 +1263,17 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 var ReactPropTypesSecret$2 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 var ReactPropTypesSecret_1 = ReactPropTypesSecret$2;
 
-var has$4 = Function.call.bind(Object.prototype.hasOwnProperty);
+var has$6 = Function.call.bind(Object.prototype.hasOwnProperty);
 
 var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
 
-var has$3 = has$4;
+var has$5 = has$6;
 
 var printWarning$3 = function () {};
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret = ReactPropTypesSecret$1;
   var loggedTypeFailures = {};
-  var has$2 = has$3;
+  var has$4 = has$5;
   printWarning$3 = function (text) {
     var message = 'Warning: ' + text;
     if (typeof console !== 'undefined') {
@@ -1302,7 +1302,7 @@ if (process.env.NODE_ENV !== 'production') {
 function checkPropTypes$1(typeSpecs, values, location, componentName, getStack) {
   if (process.env.NODE_ENV !== 'production') {
     for (var typeSpecName in typeSpecs) {
-      if (has$2(typeSpecs, typeSpecName)) {
+      if (has$4(typeSpecs, typeSpecName)) {
         var error;
         // Prop type validation may throw. In case they do, we don't want to
         // fail the render phase where it didn't fail before. So we log it.
@@ -1652,7 +1652,7 @@ var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
       }
       for (var key in propValue) {
-        if (has$3(propValue, key)) {
+        if (has$5(propValue, key)) {
           var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
           if (error instanceof Error) {
             return error;
@@ -1683,7 +1683,7 @@ var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
         if (checkerResult == null) {
           return null;
         }
-        if (checkerResult.data && has$3(checkerResult.data, 'expectedType')) {
+        if (checkerResult.data && has$5(checkerResult.data, 'expectedType')) {
           expectedTypes.push(checkerResult.data.expectedType);
         }
       }
@@ -1736,7 +1736,7 @@ var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
       var allKeys = objectAssign({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
-        if (has$3(shapeTypes, key) && typeof checker !== 'function') {
+        if (has$5(shapeTypes, key) && typeof checker !== 'function') {
           return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
         }
         if (!checker) {
@@ -5302,6 +5302,9 @@ var handleHeaders = function handleHeaders(config) {
   if (accessToken && headers) {
     headers.Authorization = "bearer ".concat(accessToken);
     if (headers.country) headers.country || (headers.country = countryCodeFromStorage);
+    if (headers.gStackCountry) {
+      headers.country = headers.gStackCountry;
+    }
     if (stack !== 'g') {
       headers['Content-Type'] = 'application/json';
       headers.countryCode || (headers.countryCode = config.imageRequest ? 'US' : countryCode);
@@ -6043,7 +6046,7 @@ var oktaLogin = /*#__PURE__*/function () {
   };
 }();
 
-var has$1 = Object.prototype.hasOwnProperty,
+var has$3 = Object.prototype.hasOwnProperty,
   undef;
 
 /**
@@ -6124,7 +6127,7 @@ function querystringify(obj, prefix) {
   //
   if ('string' !== typeof prefix) prefix = '?';
   for (key in obj) {
-    if (has$1.call(obj, key)) {
+    if (has$3.call(obj, key)) {
       value = obj[key];
 
       //
@@ -7201,6 +7204,38 @@ var prop = /*#__PURE__*/_curry2(function prop(p, obj) {
 });
 var prop$1 = prop;
 
+/**
+ * Returns a new list by plucking the same named property off all objects in
+ * the list supplied.
+ *
+ * `pluck` will work on
+ * any [functor](https://github.com/fantasyland/fantasy-land#functor) in
+ * addition to arrays, as it is equivalent to `R.map(R.prop(k), f)`.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category List
+ * @sig Functor f => k -> f {k: v} -> f v
+ * @param {Number|String} key The key name to pluck off of each object.
+ * @param {Array} f The array or functor to consider.
+ * @return {Array} The list of values for the given key.
+ * @see R.props
+ * @example
+ *
+ *      var getAges = R.pluck('age');
+ *      getAges([{name: 'fred', age: 29}, {name: 'wilma', age: 27}]); //=> [29, 27]
+ *
+ *      R.pluck(0, [[1, 2], [3, 4]]);               //=> [1, 3]
+ *      R.pluck('val', {a: {val: 3}, b: {val: 5}}); //=> {a: 3, b: 5}
+ * @symb R.pluck('x', [{x: 1, y: 2}, {x: 3, y: 4}, {x: 5, y: 6}]) = [1, 3, 5]
+ * @symb R.pluck(0, [[1, 2], [3, 4], [5, 6]]) = [1, 3, 5]
+ */
+var pluck = /*#__PURE__*/_curry2(function pluck(p, list) {
+  return map$3(prop$1(p), list);
+});
+var pluck$1 = pluck;
+
 /**
  * Returns a single item by iterating through the list, successively calling
  * the iterator function and passing it an accumulator value and the current
@@ -8920,6 +8955,74 @@ var forEachObjIndexed = /*#__PURE__*/_curry2(function forEachObjIndexed(fn, obj)
 });
 var forEachObjIndexed$1 = forEachObjIndexed;
 
+/**
+ * Returns whether or not a path exists in an object. Only the object's
+ * own properties are checked.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.26.0
+ * @category Object
+ * @typedefn Idx = String | Int
+ * @sig [Idx] -> {a} -> Boolean
+ * @param {Array} path The path to use.
+ * @param {Object} obj The object to check the path in.
+ * @return {Boolean} Whether the path exists.
+ * @see R.has
+ * @example
+ *
+ *      R.hasPath(['a', 'b'], {a: {b: 2}});         // => true
+ *      R.hasPath(['a', 'b'], {a: {b: undefined}}); // => true
+ *      R.hasPath(['a', 'b'], {a: {c: 2}});         // => false
+ *      R.hasPath(['a', 'b'], {});                  // => false
+ */
+var hasPath$1 = /*#__PURE__*/_curry2(function hasPath(_path, obj) {
+  if (_path.length === 0) {
+    return false;
+  }
+  var val = obj;
+  var idx = 0;
+  while (idx < _path.length) {
+    if (_has(_path[idx], val)) {
+      val = val[_path[idx]];
+      idx += 1;
+    } else {
+      return false;
+    }
+  }
+  return true;
+});
+var hasPath$2 = hasPath$1;
+
+/**
+ * Returns whether or not an object has an own property with the specified name
+ *
+ * @func
+ * @memberOf R
+ * @since v0.7.0
+ * @category Object
+ * @sig s -> {s: x} -> Boolean
+ * @param {String} prop The name of the property to check for.
+ * @param {Object} obj The object to query.
+ * @return {Boolean} Whether the property exists.
+ * @example
+ *
+ *      const hasName = R.has('name');
+ *      hasName({name: 'alice'});   //=> true
+ *      hasName({name: 'bob'});     //=> true
+ *      hasName({});                //=> false
+ *
+ *      const point = {x: 0, y: 0};
+ *      const pointHas = R.has(R.__, point);
+ *      pointHas('x');  //=> true
+ *      pointHas('y');  //=> true
+ *      pointHas('z');  //=> false
+ */
+var has$1 = /*#__PURE__*/_curry2(function has(prop, obj) {
+  return hasPath$2([prop], obj);
+});
+var has$2 = has$1;
+
 /**
  * Returns `true` if the specified value is equal, in [`R.equals`](#equals)
  * terms, to at least one element of the given list; `false` otherwise.
@@ -9485,6 +9588,85 @@ var getUserScopes = /*#__PURE__*/function () {
   };
 }();
 
+var getCobaltUserFacilities = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(country, role) {
+    var url, headers, response, facilitiesData, yardObject;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          url = frontEndUtils.string.substitute(storage$1.coreConfig.endpoints.allFacilitiesNew, {
+            country: country.toLowerCase()
+          });
+          headers = _objectSpread2({
+            gStackCountry: country,
+            AUTHORIZATIONROLE: role
+          }, storage$1.activeLanguage === 'fi' ? {
+            language: 'en',
+            LANGUAGECODE: 'en'
+          } : {});
+          _context.next = 5;
+          return fetcher.get(url, {
+            headers: headers
+          });
+        case 5:
+          response = _context.sent;
+          facilitiesData = response.data.data;
+          yardObject = map$3(function (val) {
+            return {
+              yard_number: val.yard_number,
+              yard_name: val.yard_name
+            };
+          }, facilitiesData);
+          return _context.abrupt("return", yardObject);
+        case 11:
+          _context.prev = 11;
+          _context.t0 = _context["catch"](0);
+          return _context.abrupt("return", Promise.reject('Unable to fetch Facilities'));
+        case 14:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 11]]);
+  }));
+  return function getCobaltUserFacilities(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+var getCobaltUserRoles = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(country) {
+    var url, _yield$fetcher$get, data;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          url = storage$1.coreConfig.endpoints.getRoles;
+          _context.next = 4;
+          return fetcher.get(url, {
+            headers: _objectSpread2(_objectSpread2({}, fetcher.defaults.headers.common), {}, {
+              gStackCountry: country
+            })
+          });
+        case 4:
+          _yield$fetcher$get = _context.sent;
+          data = _yield$fetcher$get.data;
+          return _context.abrupt("return", data);
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](0);
+          return _context.abrupt("return", Promise.reject('Unable to fetch Roles'));
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+  return function getCobaltUserRoles(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
 fetcher.login = login;
 fetcher.oktaLogin = oktaLogin;
 fetcher.getConfig = getConfig;
@@ -9501,6 +9683,8 @@ fetcher.getPermissions = getPermissions;
 fetcher.getCoreAppPermissions = getCoreAppPermissions;
 fetcher.getInnovationHubToken = getInnovationHubToken;
 fetcher.getUserScopes = getUserScopes;
+fetcher.getCobaltUserFacilities = getCobaltUserFacilities;
+fetcher.getCobaltUserRoles = getCobaltUserRoles;
 
 var getRouteName = function getRouteName() {
   return window.location.pathname.split('/').splice(1)[0];
@@ -23380,6 +23564,10 @@ var spanish = {
   code: 'es',
   description: 'Spanish'
 };
+var finnish = {
+  code: 'fi',
+  description: 'Finnish'
+};
 var getLanguages = function getLanguages() {
   var selectedCountry = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
   var stack = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'c';
@@ -23421,6 +23609,10 @@ var getLanguages = function getLanguages() {
       en: english,
       es: spanish
     },
+    FI: {
+      en: english,
+      fi: finnish
+    },
     IN: {
       en: english
     },
@@ -23453,7 +23645,7 @@ var LanguageMenu = function LanguageMenu(props) {
     className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Select, {
     label: locale('Language'),
-    options: formatOptions(Object.values(languageOptions)),
+    options: formatOptions(Object.values(languageOptions || {})),
     selectedOption: props.value,
     onChange: function onChange(e, option) {
       return props.handleChange(option.key);
@@ -23465,7 +23657,7 @@ var LanguageMenu = function LanguageMenu(props) {
   }));
 };
 
-var unique = function unique(roles) {
+var unique$1 = function unique(roles) {
   return roles.reduce(function (final, role) {
     var found = final.find(function (r) {
       return role.roleName === r.roleName;
@@ -23477,14 +23669,14 @@ var unique = function unique(roles) {
 };
 
 // Sort roles based on session country
-var filterRoles$4 = function filterRoles(roles) {
-  var filtered = unique(roles).filter(function (role) {
+var filterRoles$3 = function filterRoles(roles) {
+  var filtered = unique$1(roles).filter(function (role) {
     return role.roleName;
   });
   var byCountry = descend$1(prop$1('countryCode'));
   return sort$1(byCountry, filtered);
 };
-var RoleSelector$1 = function RoleSelector(_ref) {
+var RoleSelector$2 = function RoleSelector(_ref) {
   var handleChange = _ref.handleChange,
     value = _ref.value,
     roles = _ref.roles,
@@ -23497,7 +23689,7 @@ var RoleSelector$1 = function RoleSelector(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
-    options: filterRoles$4(roles),
+    options: filterRoles$3(roles),
     onChange: function onChange(value) {
       var selectedValue = _typeof$1(value) === 'object' ? frontEndUtils.regex.beautifyRoleText(value.roleName) : value;
       var option = _typeof$1(value) === 'object' ? value : null;
@@ -23528,7 +23720,7 @@ var optionStyleProps = {
   rowHeight: 40,
   optionsMinHeight: 200
 };
-var YardNumberMenu$1 = function YardNumberMenu(_ref) {
+var YardNumberMenu$2 = function YardNumberMenu(_ref) {
   var selectedYard = _ref.selectedYard,
     name = _ref.name,
     handleChange = _ref.handleChange,
@@ -23634,7 +23826,7 @@ var YardNumberContainer = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var props = this.props,
         state = this.state;
-      return /*#__PURE__*/React__namespace.createElement(YardNumberMenu$1, {
+      return /*#__PURE__*/React__namespace.createElement(YardNumberMenu$2, {
         required: true,
         name: "selectedYard",
         label: "Yard",
@@ -23726,7 +23918,7 @@ var formatPhoneNumber = function formatPhoneNumber() {
   return "".concat(formattedNumber, " * ").concat(extension);
 };
 
-var EMPTY_PRINTERS$3 = {
+var EMPTY_PRINTERS$2 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -23755,7 +23947,7 @@ var sessionOrDefault = function sessionOrDefault(label) {
   return function () {
     var printer_name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     var sessionDashboard = storage$1.getSessionItem('dashboard');
-    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$3;
+    sessionDashboard.printers = sessionDashboard.printers || EMPTY_PRINTERS$2;
     var printerName = sessionDashboard.printers[label];
     return !isEmpty$2(printerName) ? printerName : printer_name;
   };
@@ -23784,14 +23976,14 @@ var getActivePrinters = (function (printersData) {
 var css_248z$9 = ".utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--title {\r\n  font-weight: 500;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: flex-end;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow .ms-TextField-errorMessage {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--textField {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: flex-end;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix {\r\n  margin: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--testCallButton {\r\n  margin-left: 12px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix8 {\r\n  margin: auto 2px auto 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings input {\r\n  margin-right: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--smallInfo {\r\n  margin-top: 2px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings small {\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator {\r\n  position: absolute;\r\n  right: 5px;\r\n  height: 30px;\r\n  display: flex;\r\n  bottom: 1px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator .ms-Spinner-circle {\r\n  max-width: 20px !important;\r\n  max-height: 20px !important;\r\n  right: 5px;\r\n}\r\n\r\nmaterial-icon[name='check'] {\r\n  color: rgb(100, 181, 10);\r\n  font-size: 12px;\r\n}\r\n\r\nmaterial-icon[name='error_outline'] {\r\n  color: #a80000;\r\n  font-size: 12px;\r\n}\r\n";
 styleInject(css_248z$9);
 
-var EMPTY_PRINTERS$2 = {
+var EMPTY_PRINTERS$1 = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
   windshield_label_printers: '',
   text_printers: ''
 };
-var getHierarchyLevel$1 = function getHierarchyLevel(levelId) {
+var getHierarchyLevel = function getHierarchyLevel(levelId) {
   switch (levelId) {
     case 0:
       return 'country';
@@ -23801,8 +23993,8 @@ var getHierarchyLevel$1 = function getHierarchyLevel(levelId) {
       return '';
   }
 };
-var isInvalid$1 = either$1(isNil$1, isEmpty$2);
-var keysToBeDeleted$1 = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
+var isInvalid = either$1(isNil$1, isEmpty$2);
+var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
 
 // Handles changes to all inputs.
 var handleInputChange$2 = function handleInputChange(self) {
@@ -23812,14 +24004,14 @@ var handleInputChange$2 = 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');
-        self.updatePhoneNumber(activePhoneNumber$2());
+        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;
@@ -23832,7 +24024,7 @@ var handleInputChange$2 = function handleInputChange(self) {
           });
           if (value !== oldSelectedYard && Boolean(value)) {
             self.setState({
-              printersData: EMPTY_PRINTERS$2
+              printersData: EMPTY_PRINTERS$1
             });
             self.getActivePrinters(value, false, yardCountryCode);
           }
@@ -23854,12 +24046,12 @@ var handleInputChange$2 = function handleInputChange(self) {
     return final;
   }, {});
 };
-var getSelectedYard$1 = function getSelectedYard(selectedNumber) {
+var getSelectedYard = function getSelectedYard(selectedNumber) {
   return storage$1.getLocalItem('login').yardList.find(function (yard) {
     return yard.number == selectedNumber;
   });
 };
-var pickUserSecurityLevel$1 = function pickUserSecurityLevel() {
+var pickUserSecurityLevel = function pickUserSecurityLevel() {
   var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return obj.userSecurityLevel || '0';
 };
@@ -23885,7 +24077,7 @@ var saveSettings$2 = function saveSettings(self) {
             };
             dashboardState = storage$1.getLocalItem('dashboard');
             cleanedDashboardState = pickBy$1(function (val, key) {
-              return !keysToBeDeleted$1.includes(key);
+              return !keysToBeDeleted.includes(key);
             }, dashboardState);
             storage$1.setLocalItem('dashboard', cleanedDashboardState);
             toPairs$1(self.state).forEach(function (_ref4) {
@@ -23911,11 +24103,11 @@ var saveSettings$2 = function saveSettings(self) {
             if (roleOptionFromState) {
               _roleOptionFromState$ = roleOptionFromState.levelId, levelId = _roleOptionFromState$ === void 0 ? -1 : _roleOptionFromState$, _roleOptionFromState$2 = roleOptionFromState.hierarchyId, hierarchyId = _roleOptionFromState$2 === void 0 ? -1 : _roleOptionFromState$2;
               storage$1.setLocalItem('settings', {
-                level: getHierarchyLevel$1(levelId),
+                level: getHierarchyLevel(levelId),
                 id: hierarchyId
               }, 'selectedHierarchy');
             }
-            if (!(isInvalid$1(selectedYard) || isInvalid$1(selectedLanguage) || isInvalid$1(selectedCurrency))) {
+            if (!(isInvalid(selectedYard) || isInvalid(selectedLanguage) || isInvalid(selectedCurrency))) {
               _context.next = 13;
               break;
             }
@@ -23938,7 +24130,7 @@ var saveSettings$2 = function saveSettings(self) {
             storage$1.setLocalItem('settings', roleName, 'selectedRole');
             storage$1.setLocalItem('lastSelectedYard', yard);
             storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
-            securityLevel = pickUserSecurityLevel$1(getSelectedYard$1(selectedYard));
+            securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
             storage$1.setSessionItem('securityLevel', Number(securityLevel));
             _context.next = 24;
             return fetcher.getUserScopes();
@@ -23992,7 +24184,7 @@ var selectedLanguage$1 = function selectedLanguage() {
   var _storage$getSessionIt3;
   return ((_storage$getSessionIt3 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt3 === void 0 ? void 0 : _storage$getSessionIt3.language) || 'en';
 };
-var selectedCurrency$1 = function selectedCurrency() {
+var selectedCurrency = function selectedCurrency() {
   var _storage$getSessionIt4;
   return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCurrency) || 'USD';
 };
@@ -24000,28 +24192,28 @@ var selectedCountryA3code$2 = function selectedCountryA3code() {
   var _storage$getSessionIt5;
   return ((_storage$getSessionIt5 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt5 === void 0 ? void 0 : _storage$getSessionIt5.selectedCountryA3code) || 'USA';
 };
-var activePrinters$2 = function activePrinters() {
+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$2 = function activePhoneNumber() {
+var activePhoneNumber$1 = function activePhoneNumber() {
   var _storage$getLocalItem2;
   return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
 };
-var ringCentralEnabled$2 = function ringCentralEnabled() {
+var ringCentralEnabled$1 = function ringCentralEnabled() {
   var _storage$getLocalItem3;
   return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
 };
-var filterRoles$3 = function filterRoles(roles, countryCode) {
+var filterRoles$2 = function filterRoles(roles, countryCode) {
   return compose(uniqBy$1(prop$1('roleName')), filter$1(propEq$1('countryCode', countryCode)))(roles);
 };
 var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
@@ -24035,22 +24227,22 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$2(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber$2(),
-      ringCentralEnabled: ringCentralEnabled$2(),
+      phoneNumber: activePhoneNumber$1(),
+      ringCentralEnabled: ringCentralEnabled$1(),
       selectedYardNumber: selectedYardNumber$2(),
       selectedCountry: selectedCountry$1(),
       selectedCountryA3code: selectedCountryA3code$2(),
       selectedLanguage: selectedLanguage$1(),
-      selectedCurrency: selectedCurrency$1(),
+      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$2(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
       fetcher.getUserRoles(countryCode).then(function (_roles) {
-        var roles = filterRoles$3(_roles, countryCode);
+        var roles = filterRoles$2(_roles, countryCode);
         var selectedRole = _this.state.selectedRole;
         _this.setState({
           roles: roles
@@ -24094,12 +24286,12 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
                 showLoading: false
               });
               if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$2()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$2()) : _this.state.oldActivePrinters
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$1()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
                 }));
               } else {
                 response = getActivePrinters(printersData);
-                fromatted = formatActivePrintersForState$2(response);
+                fromatted = formatActivePrintersForState$1(response);
                 _this.setState(_objectSpread2({
                   oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
                 }, fromatted));
@@ -24137,8 +24329,8 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
       getRCExtensionStatus().then(function (response) {
         response && resetPhoneSettingsBasedOnRCStatus(response);
         _this2.setState({
-          ringCentralEnabled: ringCentralEnabled$2(),
-          phoneNumber: activePhoneNumber$2()
+          ringCentralEnabled: ringCentralEnabled$1(),
+          phoneNumber: activePhoneNumber$1()
         });
       });
       this.getActivePrinters(this.state.selectedYardNumber, true, this.state.selectedCountryA3code);
@@ -24178,7 +24370,7 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
         selectedYard: this.state.selectedYardNumber,
         handleChange: this.handleInputChange.selectedYardNumber,
         selectedCountry: this.state.selectedCountry
-      }), /*#__PURE__*/React__default["default"].createElement(RoleSelector$1, {
+      }), /*#__PURE__*/React__default["default"].createElement(RoleSelector$2, {
         roles: this.state.roles,
         value: this.state.selectedRole,
         handleChange: this.handleInputChange.selectedRole,
@@ -24214,12 +24406,12 @@ var SettingsView$2 = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var filterRoles$2 = function filterRoles(roles) {
+var filterRoles$1 = function filterRoles(roles) {
   return roles.filter(function (role) {
     return role.roleName;
   });
 };
-var RoleSelector = function RoleSelector(_ref) {
+var RoleSelector$1 = function RoleSelector(_ref) {
   var handleChange = _ref.handleChange,
     value = _ref.value,
     roles = _ref.roles,
@@ -24231,7 +24423,7 @@ var RoleSelector = function RoleSelector(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
-    options: filterRoles$2(roles),
+    options: filterRoles$1(roles),
     onChange: function onChange(value) {
       var selectedValue = _typeof$1(value) === 'object' ? frontEndUtils.regex.beautifyRoleText(value.roleName) : value;
       var option = _typeof$1(value) === 'object' ? value : null;
@@ -24353,7 +24545,7 @@ var HierarchyMenu = function HierarchyMenu(props) {
 };
 
 var _excluded$2 = ["value", "handleChange", "yardOptions", "label", "disabled"];
-var YardNumberMenu = function YardNumberMenu(_ref) {
+var YardNumberMenu$1 = function YardNumberMenu(_ref) {
   var value = _ref.value,
     handleChange = _ref.handleChange,
     yardOptions = _ref.yardOptions;
@@ -24382,7 +24574,7 @@ var YardNumberMenu = function YardNumberMenu(_ref) {
   })));
 };
 
-var EMPTY_PRINTERS$1 = {
+var EMPTY_PRINTERS = {
   barcode_label_printers: '',
   check_printers: '',
   standard_printers: '',
@@ -24404,7 +24596,7 @@ var handleInputChange$1 = function handleInputChange(self) {
                 break;
               }
               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) {
                 return role.roleName === roleName;
@@ -24421,8 +24613,8 @@ var handleInputChange$1 = 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({
                 selectedRoleOption: option,
@@ -24433,7 +24625,7 @@ var handleInputChange$1 = function handleInputChange(self) {
                 _context.next = 32;
                 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];
               if (!countryId) {
@@ -24466,8 +24658,8 @@ var handleInputChange$1 = 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;
               break;
@@ -24476,7 +24668,7 @@ var handleInputChange$1 = function handleInputChange(self) {
                 _context.next = 43;
                 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;
                 break;
@@ -24496,8 +24688,8 @@ var handleInputChange$1 = 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:
               self.setState(function (state) {
@@ -24651,23 +24843,23 @@ var selectedCountryA3code$1 = function selectedCountryA3code() {
   var _storage$getSessionIt2;
   return ((_storage$getSessionIt2 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt2 === void 0 ? void 0 : _storage$getSessionIt2.selectedCountryA3code) || 'GBR';
 };
-var activePrinters$1 = function activePrinters() {
-  return storage$1.getLocalItem('dashboard', 'printers') || EMPTY_PRINTERS$1;
+var activePrinters = function activePrinters() {
+  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$1 = function activePhoneNumber() {
+var activePhoneNumber = function activePhoneNumber() {
   var _storage$getLocalItem2;
   return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
 };
-var ringCentralEnabled$1 = function ringCentralEnabled() {
+var ringCentralEnabled = function ringCentralEnabled() {
   var _storage$getLocalItem3;
   return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
 };
@@ -24704,7 +24896,7 @@ var getYardOptions = /*#__PURE__*/function () {
     return _ref7.apply(this, arguments);
   };
 }();
-var filterRoles$1 = function filterRoles(roles, invalidCodes) {
+var filterRoles = function filterRoles(roles, invalidCodes) {
   return compose(uniqBy$1(prop$1('roleName')), filter$1(compose(not$1, flip$3(includes$1)(invalidCodes), prop$1('countryCode'))))(roles);
 };
 var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
@@ -24718,8 +24910,8 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$2(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber$1(),
-      ringCentralEnabled: ringCentralEnabled$1(),
+      phoneNumber: activePhoneNumber(),
+      ringCentralEnabled: ringCentralEnabled(),
       selectedYardNumber: selectedYardNumber$1(),
       selectedCountryA3code: selectedCountryA3code$1(),
       selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
@@ -24727,9 +24919,9 @@ var SettingsView$1 = /*#__PURE__*/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$2(_assertThisInitialized(_this), "getRCAvailability", /*#__PURE__*/_asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
       var response;
       return _regeneratorRuntime().wrap(function _callee4$(_context4) {
@@ -24741,8 +24933,8 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
             response = _context4.sent;
             resetPhoneSettingsBasedOnRCStatus(response);
             _this.setState({
-              ringCentralEnabled: ringCentralEnabled$1(),
-              phoneNumber: activePhoneNumber$1()
+              ringCentralEnabled: ringCentralEnabled(),
+              phoneNumber: activePhoneNumber()
             });
           case 5:
           case "end":
@@ -24775,12 +24967,12 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
                 showLoading: false
               });
               if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters$1()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters$1()) : _this.state.oldActivePrinters
+                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters()), {}, {
+                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
                 }));
               } else {
                 _activePrinters = getActivePrinters(printersData);
-                update = formatActivePrintersForState$1(_activePrinters);
+                update = formatActivePrintersForState(_activePrinters);
                 _this.setState(_objectSpread2({
                   oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, update) : _this.state.oldActivePrinters
                 }, update));
@@ -24822,7 +25014,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
             case 2:
               _roles = _context6.sent;
               // MEA and UK are both valid in UK portal so filter out the rest
-              roles = filterRoles$1(_roles, ['CAN', 'BRA', 'USA', 'IND']);
+              roles = filterRoles(_roles, ['CAN', 'BRA', 'USA', 'IND']);
               _context6.next = 6;
               return fetcher.getHierarchyOptions(storage$1.userRole);
             case 6:
@@ -24894,7 +25086,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React__default["default"].createElement("p", null, "Settings")), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow",
         "data-e2e": "LocationAndLanguageRow"
-      }, /*#__PURE__*/React__default["default"].createElement(RoleSelector, {
+      }, /*#__PURE__*/React__default["default"].createElement(RoleSelector$1, {
         roles: roles,
         value: selectedRole,
         selectedCountryA3code: this.state.selectedCountryA3code,
@@ -24903,7 +25095,7 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
         hierarchies: hierarchies,
         value: this.state.selectedHierarchyOption,
         handleChange: this.handleInputChange.selectedHierarchyOption
-      }), /*#__PURE__*/React__default["default"].createElement(YardNumberMenu, {
+      }), /*#__PURE__*/React__default["default"].createElement(YardNumberMenu$1, {
         yardOptions: yardOptions,
         disabled: disableYardDropDown,
         value: this.state.selectedYardNumber,
@@ -24933,64 +25125,195 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var EMPTY_PRINTERS = {
-  barcode_label_printers: '',
-  check_printers: '',
-  standard_printers: '',
-  windshield_label_printers: '',
-  text_printers: ''
+var unique = function unique(roles) {
+  return roles.reduce(function (final, role) {
+    var found = final.find(function (r) {
+      return role.roleName === r.roleName;
+    });
+    if (found) return final;
+    final.push(role);
+    return final;
+  }, []);
 };
-var getHierarchyLevel = function getHierarchyLevel(levelId) {
-  switch (levelId) {
-    case 0:
-      return 'country';
-    case 100:
-      return 'yard';
-    default:
-      return '';
+var RoleSelector = function RoleSelector(_ref) {
+  var handleChange = _ref.handleChange,
+    value = _ref.value,
+    roles = _ref.roles;
+  return /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
+    name: "role",
+    options: unique(roles),
+    onChange: function onChange(value) {
+      var selectedValue = value && value.roleName ? value.roleName : value;
+      handleChange({
+        selectedValue: selectedValue
+      });
+    },
+    displayOption: function displayOption(o) {
+      return o.roleName && locale(frontEndUtils.regex.capitalizeFirstLetter(frontEndUtils.regex.beautifyRoleText(o.roleName)));
+    },
+    serializeOption: function serializeOption(o) {
+      return o.roleName;
+    },
+    value: value && locale(frontEndUtils.regex.capitalizeFirstLetter(frontEndUtils.regex.beautifyRoleText(value))),
+    placeholder: "Role",
+    label: locale('Role'),
+    required: true
+  });
+};
+
+var YardNumberMenu = function YardNumberMenu(_ref) {
+  var handleChange = _ref.handleChange,
+    value = _ref.value,
+    yardOptions = _ref.yardOptions;
+  return /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
+    name: "facility",
+    options: yardOptions,
+    onChange: handleChange,
+    displayOption: function displayOption(yard) {
+      return "".concat(yard.yard_number, " - ").concat(yard.yard_name);
+    },
+    value: value,
+    placeholder: "Facility",
+    label: locale('Facility'),
+    required: true
+  });
+};
+
+var COUNTRIES$1 = {
+  DE: {
+    name: 'Germany',
+    code: 'DEU'
+  },
+  ES: {
+    name: 'Spain',
+    code: 'ESP'
+  },
+  FI: {
+    name: 'Finland',
+    code: 'FIN'
   }
 };
-var isInvalid = either$1(isNil$1, isEmpty$2);
-var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
+var validCountry = function validCountry(value) {
+  return value && includes$1(value, keys$3(COUNTRIES$1)) ? locale(COUNTRIES$1[value].name) : value || '';
+};
+var CountrySelector = function CountrySelector(_ref) {
+  var handleChange = _ref.handleChange,
+    value = _ref.value,
+    countries = _ref.countries;
+  return /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
+    name: "country",
+    options: countries,
+    onChange: handleChange,
+    displayOption: function displayOption(country) {
+      if (!country || !COUNTRIES$1[country]) return country || '';
+      return locale(COUNTRIES$1[country].name);
+    },
+    value: validCountry(value),
+    placeholder: "Country",
+    label: locale('Country'),
+    required: true
+  });
+};
+
+var COUNTRIES = {
+  DE: {
+    name: 'Germany',
+    code: 'DEU'
+  },
+  ES: {
+    name: 'Spain',
+    code: 'ESP'
+  },
+  FI: {
+    name: 'Finland',
+    code: 'FIN'
+  }
+};
+var getRolesMap = function getRolesMap(userRoles) {
+  var rolesMap = {};
+  userRoles.map(function (obj) {
+    if (has$2(obj.roleName, rolesMap)) rolesMap[obj.roleName] = [].concat(_toConsumableArray(rolesMap[obj.roleName]), [obj.hierarchyId]);else rolesMap[obj.roleName] = [obj.hierarchyId];
+  });
+  storage$1.setLocalItem('settings', rolesMap, 'rolesMap');
+  return rolesMap;
+};
+var getUserRolesFromFetcher = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var promises, userRoles, result;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          promises = keys$3(COUNTRIES).map(function (country) {
+            return fetcher.getCobaltUserRoles(COUNTRIES[country].code);
+          });
+          _context.next = 3;
+          return Promise.all(promises);
+        case 3:
+          userRoles = _context.sent;
+          result = keys$3(COUNTRIES).map(function (country, index) {
+            return {
+              country: country,
+              roles: userRoles[index]
+            };
+          }).filter(function (roleByCountry) {
+            return !isEmpty$2(roleByCountry.roles);
+          });
+          return _context.abrupt("return", result);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getUserRolesFromFetcher() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getSelectedYardNumberAndName = function getSelectedYardNumberAndName() {
+  var _storage$getLocalItem = storage$1.getLocalItem('dashboard'),
+    selectedYard = _storage$getLocalItem.selectedYard,
+    yardList = _storage$getLocalItem.yardList;
+  var selectedYardObject = head$1(filter$1(function (yard) {
+    return yard.yard_number === selectedYard;
+  }, yardList)) || {};
+  return !isEmpty$2(selectedYardObject) ? "".concat(selectedYardObject.yard_number, " - ").concat(selectedYardObject.yard_name) : null;
+};
+var getAccessCountries = function getAccessCountries(userRoles) {
+  return userRoles.map(function (rolesByCountry) {
+    return rolesByCountry.country;
+  });
+};
+var getActiveCountryObjByCountry = function getActiveCountryObjByCountry(userRoles, selectedCountry) {
+  return userRoles.find(function (rolesByCountry) {
+    return rolesByCountry.country === selectedCountry;
+  });
+};
 
 // Handles changes to all inputs.
 var handleInputChange = function handleInputChange(self) {
-  var yardCountryCode = self.state.selectedCountryA3code;
+  self.state.selectedCountryA3code;
   var handleChange = function handleChange(name) {
     return function (value) {
-      if (name === 'selectedRole') {
+      if (name === 'selectedCountry') {
+        return self.setState({
+          selectedCountry: value
+        });
+      } else if (name === 'selectedRole') {
         var selectedValue = value.selectedValue,
           option = value.option;
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
         return self.setState({
           selectedRoleOption: option,
           selectedRole: selectedValue
         });
       } else if (name === 'selectedYardNumber') {
-        storage$1.setSessionItem('dashboard', EMPTY_PRINTERS, 'printers');
-        self.updatePhoneNumber(activePhoneNumber());
-
-        // Ensure we fetch the proper roles per the entered yard
-        var oldSelectedYard = self.state.selectedYardNumber;
-        fetcher.getYardNumbers(value).then(function (yards) {
-          var currentYard = find$1(propEq$1('yard_number', parseInt(value)), yards);
-          if (currentYard) yardCountryCode = currentYard.yard_country_code;
-          self.fetchRoles(yardCountryCode);
-          self.setState({
-            selectedCountryA3code: yardCountryCode
-          });
-          if (value !== oldSelectedYard && Boolean(value)) {
-            self.setState({
-              printersData: EMPTY_PRINTERS
-            });
-            self.getActivePrinters(value, false, yardCountryCode);
-          }
+        return self.setState({
+          selectedYardNumber: value
         });
-        return self.setState(function (state) {
-          return {
-            selectedRole: '',
-            selectedYardNumber: value
-          };
+      } else if (name === 'selectedYardNumberAndName') {
+        var yardNumber = value.yard_number;
+        return self.setState({
+          selectedYardNumber: yardNumber,
+          selectedYardNumberAndName: value
         });
       }
       self.setState(function (state) {
@@ -25003,131 +25326,39 @@ var handleInputChange = function handleInputChange(self) {
     return final;
   }, {});
 };
-var getSelectedYard = function getSelectedYard(selectedNumber) {
-  return storage$1.getLocalItem('login').yardList.find(function (yard) {
-    return yard.number == selectedNumber;
-  });
-};
-var pickUserSecurityLevel = function pickUserSecurityLevel() {
-  var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return obj.userSecurityLevel || '0';
-};
 var saveSettings = function saveSettings(self) {
-  return /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-      var _yard$yard_country_co, _yard$yard_country_co2;
-      var printers, dashboardSessionState, oldSettings, dashboardState, cleanedDashboardState, _self$state, selectedYard, selectedRole, selectedLanguage, selectedCurrency, roles, roleOptionFromState, roleName, _roleOptionFromState$, levelId, _roleOptionFromState$2, hierarchyId, yard, securityLevel, userScopes, newSettings;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            printers = {}; // ******* Hack to be remved ******* create date July 12, 2019 *******
-            // Just a hack to ensure yard gets changed to avoid issue caused by proquote app which is using old toolkit
-            // remove this hack once pro quote app update its tool kit version to latest
-            dashboardSessionState = storage$1.getSessionItem('dashboard');
-            oldSettings = {
-              selectedCurrency: dashboardSessionState.selectedCurrency,
-              selectedYard: dashboardSessionState.selectedYard,
-              selectedCountry: dashboardSessionState.selectedCountry,
-              language: dashboardSessionState.language,
-              selectedRole: storage$1.getLocalItem('settings').selectedRole,
-              activePrinters: self.state.oldActivePrinters
-            };
-            dashboardState = storage$1.getLocalItem('dashboard');
-            cleanedDashboardState = pickBy$1(function (val, key) {
-              return !keysToBeDeleted.includes(key);
-            }, dashboardState);
-            storage$1.setLocalItem('dashboard', cleanedDashboardState);
-            toPairs$1(self.state).forEach(function (_ref4) {
-              var _ref5 = _slicedToArray(_ref4, 2),
-                key = _ref5[0],
-                value = _ref5[1];
-              if (key.endsWith('_printers')) {
-                printers[key] = (value || '').toUpperCase();
-              } else {
-                if (key === 'printersData') {
-                  value = JSON.stringify(value);
-                }
-                if (key === 'phoneNumber') {
-                  storage$1.setLocalItem('dashboard', value, 'phoneNumber');
-                }
-              }
-            });
-            _self$state = self.state, selectedYard = _self$state.selectedYardNumber, selectedRole = _self$state.selectedRole, selectedLanguage = _self$state.selectedLanguage, selectedCurrency = _self$state.selectedCurrency, roles = _self$state.roles, _self$state.selectedRoleOption;
-            roleOptionFromState = roles.find(function (roleOption) {
-              return frontEndUtils.regex.beautifyRoleText(roleOption.roleName) === selectedRole;
-            }) || head$1(roles);
-            roleName = propOr$1('', 'roleName', roleOptionFromState); // Update hierarchy on local storage when role changes
-            if (roleOptionFromState) {
-              _roleOptionFromState$ = roleOptionFromState.levelId, levelId = _roleOptionFromState$ === void 0 ? -1 : _roleOptionFromState$, _roleOptionFromState$2 = roleOptionFromState.hierarchyId, hierarchyId = _roleOptionFromState$2 === void 0 ? -1 : _roleOptionFromState$2;
-              storage$1.setLocalItem('settings', {
-                level: getHierarchyLevel(levelId),
-                id: hierarchyId
-              }, 'selectedHierarchy');
-            }
-            if (!(isInvalid(selectedYard) || isInvalid(selectedLanguage) || isInvalid(selectedCurrency))) {
-              _context.next = 13;
-              break;
-            }
-            return _context.abrupt("return");
-          case 13:
-            yard = self.yardsHistory.get(selectedYard)[selectedYard];
-            storage$1.setSessionItem('dashboard', _objectSpread2(_objectSpread2({}, storage$1.getSessionItem('dashboard')), {}, {
-              selectedCurrency: selectedCurrency || yard.yard_currency,
-              selectedCountry: (_yard$yard_country_co = yard.yard_country_code) === null || _yard$yard_country_co === void 0 ? void 0 : _yard$yard_country_co.slice(0, 2),
-              selectedCountryA3code: yard.yard_country_code,
-              selectedYard: yard.yard_number,
-              selectedTimeZone: yard.time_zone,
-              language: selectedLanguage || 'en',
-              selectedRole: roleName,
-              printers: printers,
-              yard: yard
-            }));
-            storage$1.setLocalItem('dashboard', printers, 'printers');
-            storage$1.setLocalItem('dashboard', selectedLanguage || 'en', 'language');
-            storage$1.setLocalItem('settings', roleName, 'selectedRole');
-            storage$1.setLocalItem('lastSelectedYard', yard);
-            storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
-            securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
-            storage$1.setSessionItem('securityLevel', Number(securityLevel));
-            _context.next = 24;
-            return fetcher.getUserScopes();
-          case 24:
-            userScopes = _context.sent;
-            storage$1.setLocalItem('login', userScopes, 'userAppScopes');
-            // persist user preferences
-            _context.next = 28;
-            return fetcher.setUserPreferences('oph', {
-              selectedCurrency: selectedCurrency || yard.yard_currency,
-              language: selectedLanguage || 'en',
-              // TODO Remove this after remove role selection
-              selectedRole: roleName,
-              printers: printers,
-              yard: yard,
-              securityLevel: securityLevel
-            }, 'USA');
-          case 28:
-            self.setState({
-              oldActivePrinters: printers
-            });
-            newSettings = {
-              selectedCurrency: selectedCurrency || yard.yard_currency,
-              selectedYard: yard.yard_number,
-              selectedCountry: (_yard$yard_country_co2 = yard.yard_country_code) === null || _yard$yard_country_co2 === void 0 ? void 0 : _yard$yard_country_co2.slice(0, 2),
-              language: selectedLanguage || 'en',
-              selectedRole: roleName,
-              activePrinters: self.activePrinters
-            };
-            self.props.onSave(oldSettings, newSettings);
-          case 31:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref3.apply(this, arguments);
+  return function () {
+    var _self$state = self.state,
+      selectedCountry = _self$state.selectedCountry,
+      selectedRole = _self$state.selectedRole,
+      selectedYard = _self$state.selectedYardNumber,
+      language = _self$state.selectedLanguage,
+      yardOptions = _self$state.yardOptions;
+    if (!selectedCountry || !language || !selectedYard || !selectedRole) {
+      return;
+    }
+    var selectedCountryA3code = COUNTRIES[selectedCountry].code;
+    var dashboard = {
+      language: language,
+      selectedCountry: selectedCountry,
+      selectedCountryA3code: selectedCountryA3code,
+      selectedYard: selectedYard
     };
-  }();
+    localStorage.setItem('dashboard', JSON.stringify(dashboard));
+    sessionStorage.setItem('dashboard', JSON.stringify(dashboard));
+    storage$1.setLocalItem('dashboard', {
+      yard_number: selectedYard
+    }, 'yard');
+    storage$1.setSessionItem('dashboard', {
+      yard_number: selectedYard
+    }, 'yard');
+    storage$1.setLocalItem('dashboard', yardOptions, 'yardList');
+    storage$1.setSessionItem('dashboard', yardOptions, 'yardList');
+    storage$1.setLocalItem('settings', selectedRole, 'selectedRole');
+    if (self.props.onSave) {
+      self.props.onSave();
+    }
+  };
 };
 var selectedYardNumber = function selectedYardNumber() {
   var _storage$getSessionIt;
@@ -25141,37 +25372,9 @@ var selectedLanguage = function selectedLanguage() {
   var _storage$getSessionIt3;
   return ((_storage$getSessionIt3 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt3 === void 0 ? void 0 : _storage$getSessionIt3.language) || 'en';
 };
-var selectedCurrency = function selectedCurrency() {
-  var _storage$getSessionIt4;
-  return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCurrency) || 'USD';
-};
 var selectedCountryA3code = function selectedCountryA3code() {
-  var _storage$getSessionIt5;
-  return ((_storage$getSessionIt5 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt5 === void 0 ? void 0 : _storage$getSessionIt5.selectedCountryA3code) || 'USA';
-};
-var activePrinters = function activePrinters() {
-  var _storage$getLocalItem;
-  return ((_storage$getLocalItem = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.printers) || EMPTY_PRINTERS;
-};
-var makeKeyValue = function makeKeyValue(final, target) {
-  final[target.label] = target.printer_name;
-  return final;
-};
-var formatActivePrintersForState = function formatActivePrintersForState() {
-  var activePrinters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var printers = Array.isArray(activePrinters) ? activePrinters : [];
-  return printers.reduce(makeKeyValue, {});
-};
-var activePhoneNumber = function activePhoneNumber() {
-  var _storage$getLocalItem2;
-  return ((_storage$getLocalItem2 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.phoneNumber) || '';
-};
-var ringCentralEnabled = function ringCentralEnabled() {
-  var _storage$getLocalItem3;
-  return ((_storage$getLocalItem3 = storage$1.getLocalItem('dashboard')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.ringCentralEnabled) || false;
-};
-var filterRoles = function filterRoles(roles, countryCode) {
-  return compose(uniqBy$1(prop$1('roleName')), filter$1(propEq$1('countryCode', countryCode)))(roles);
+  var _storage$getSessionIt4;
+  return ((_storage$getSessionIt4 = storage$1.getSessionItem('dashboard')) === null || _storage$getSessionIt4 === void 0 ? void 0 : _storage$getSessionIt4.selectedCountryA3code) || 'USA';
 };
 var SettingsView = /*#__PURE__*/function (_React$Component) {
   _inherits$2(SettingsView, _React$Component);
@@ -25183,126 +25386,215 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty$2(_assertThisInitialized(_this), "state", _objectSpread2({
-      phoneNumber: activePhoneNumber(),
-      ringCentralEnabled: ringCentralEnabled(),
+    _defineProperty$2(_assertThisInitialized(_this), "state", {
       selectedYardNumber: selectedYardNumber(),
       selectedCountry: selectedCountry(),
       selectedCountryA3code: selectedCountryA3code(),
       selectedLanguage: selectedLanguage(),
-      selectedCurrency: selectedCurrency(),
       roles: [],
-      selectedRole: frontEndUtils.regex.beautifyRoleText(storage$1.userRole),
-      printersData: EMPTY_PRINTERS,
-      loadingPrinters: false,
-      oldActivePrinters: null
-    }, EMPTY_PRINTERS));
-    _defineProperty$2(_assertThisInitialized(_this), "fetchRoles", function (countryCode) {
-      fetcher.getUserRoles(countryCode).then(function (_roles) {
-        var roles = filterRoles(_roles, countryCode);
-        var selectedRole = _this.state.selectedRole;
-        _this.setState({
-          roles: roles
-        });
-        if (selectedRole && !find$1(compose(equals$1(selectedRole), frontEndUtils.regex.beautifyRoleText, prop$1('roleName')), roles)) {
-          _this.setState({
-            selectedRole: ''
-          });
-        }
-      }).catch(function (err) {
-        _this.setState({
-          roles: [],
-          selectedRole: ''
-        });
-      });
+      countries: [],
+      userRoles: [],
+      yardOptions: [],
+      selectedYardNumberAndName: getSelectedYardNumberAndName() || null,
+      selectedRole: storage$1.getLocalItem('settings').selectedRole || '',
+      showLoading: false
     });
-    _defineProperty$2(_assertThisInitialized(_this), "getActivePrinters", /*#__PURE__*/function () {
-      var _ref6 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(yardNumber) {
-        var firstTime,
-          countryA3code,
-          printersData,
-          response,
-          fromatted,
-          _args2 = arguments;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+    _defineProperty$2(_assertThisInitialized(_this), "fetchFacilititesForRole", /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(roleName, activeCountryObj) {
+        var _activeCountryObj$rol;
+        var allFacilities, rolesMap, yardOptions;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
             case 0:
-              firstTime = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : false;
-              countryA3code = _args2.length > 2 ? _args2[2] : undefined;
+              if (!(!roleName || !(activeCountryObj !== null && activeCountryObj !== void 0 && (_activeCountryObj$rol = activeCountryObj.roles) !== null && _activeCountryObj$rol !== void 0 && _activeCountryObj$rol.length))) {
+                _context.next = 3;
+                break;
+              }
               _this.setState({
-                loadingPrinters: true,
-                showLoading: true
+                yardOptions: []
               });
-              _context2.next = 5;
-              return fetcher.getPrintersForYard(yardNumber, countryA3code);
-            case 5:
-              printersData = _context2.sent;
+              return _context.abrupt("return");
+            case 3:
+              if (!includes$1(roleName, pluck$1('roleName', (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || []))) {
+                _context.next = 22;
+                break;
+              }
+              _context.prev = 4;
+              if (COUNTRIES[_this.state.selectedCountry]) {
+                _context.next = 8;
+                break;
+              }
               _this.setState({
-                printersData: printersData,
-                loadingPrinters: false,
-                showLoading: false
+                yardOptions: []
               });
-              if (firstTime && storage$1.getLocalItem('dashboard', 'printers')) {
-                _this.setState(_objectSpread2(_objectSpread2({}, activePrinters()), {}, {
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, activePrinters()) : _this.state.oldActivePrinters
-                }));
-              } else {
-                response = getActivePrinters(printersData);
-                fromatted = formatActivePrintersForState(response);
-                _this.setState(_objectSpread2({
-                  oldActivePrinters: !_this.state.oldActivePrinters ? _objectSpread2({}, fromatted) : _this.state.oldActivePrinters
-                }, fromatted));
-              }
+              return _context.abrupt("return");
             case 8:
+              _context.next = 10;
+              return fetcher.getCobaltUserFacilities(COUNTRIES[_this.state.selectedCountry].code, roleName);
+            case 10:
+              allFacilities = _context.sent;
+              rolesMap = getRolesMap((activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || []);
+              if (!includes$1(_this.state.selectedYardNumber, rolesMap[roleName])) {
+                _this.setState({
+                  selectedYardNumber: '',
+                  selectedYardNumberAndName: ''
+                });
+              }
+              yardOptions = filter$1(function (yard) {
+                return includes$1(yard.yard_number, rolesMap[roleName]);
+              }, allFacilities);
+              _this.setState({
+                yardOptions: yardOptions
+              });
+              _context.next = 20;
+              break;
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](4);
+              _this.setState({
+                yardOptions: []
+              });
+            case 20:
+              _context.next = 23;
+              break;
+            case 22:
+              _this.setState({
+                selectedRole: '',
+                yardOptions: []
+              });
+            case 23:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
-        }, _callee2);
+        }, _callee, null, [[4, 17]]);
       }));
-      return function (_x2) {
-        return _ref6.apply(this, arguments);
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
       };
     }());
-    _defineProperty$2(_assertThisInitialized(_this), "updatePhoneNumber", function (phoneNumber) {
-      _this.setState({
-        phoneNumber: phoneNumber
-      });
-    });
     _defineProperty$2(_assertThisInitialized(_this), "handleInputChange", handleInputChange(_assertThisInitialized(_this)));
     _defineProperty$2(_assertThisInitialized(_this), "saveSettings", saveSettings(_assertThisInitialized(_this)));
     _defineProperty$2(_assertThisInitialized(_this), "yardsHistory", new Map());
-    _defineProperty$2(_assertThisInitialized(_this), "setPrinterData", function (name) {
-      return function (value) {
-        _this.setState(_defineProperty$2({}, name, value));
-      };
-    });
     return _this;
-  } // componentWillMount() {
-  //   this.fetchRoles(this.state.selectedCountryA3code)
-  //   getRCExtensionStatus().then((response) => {
-  //     response && resetPhoneSettingsBasedOnRCStatus(response)
-  //     this.setState({
-  //       ringCentralEnabled: ringCentralEnabled(),
-  //       phoneNumber: activePhoneNumber(),
-  //     })
-  //   })
-  //   this.getActivePrinters(
-  //     this.state.selectedYardNumber,
-  //     true,
-  //     this.state.selectedCountryA3code,
-  //   )
-  // }
+  }
   _createClass$2(SettingsView, [{
-    key: "activePrinters",
-    get: function get() {
-      return {
-        barcode_label_printers: this.state.barcode_label_printers,
-        check_printers: this.state.check_printers,
-        standard_printers: this.state.standard_printers,
-        windshield_label_printers: this.state.windshield_label_printers,
-        text_printers: this.state.text_printers
-      };
-    }
+    key: "componentWillMount",
+    value: function () {
+      var _componentWillMount = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var _activeCountryObj$rol2;
+        var userRoles, countries, _this$state, selectedCountry, selectedRole, activeCountryObj, firstRole;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return getUserRolesFromFetcher();
+            case 2:
+              userRoles = _context2.sent;
+              countries = getAccessCountries(userRoles);
+              _this$state = this.state, selectedCountry = _this$state.selectedCountry, selectedRole = _this$state.selectedRole;
+              if (!selectedCountry) {
+                selectedCountry = head$1(countries) || '';
+              }
+              activeCountryObj = getActiveCountryObjByCountry(userRoles, selectedCountry);
+              this.setState({
+                selectedCountry: (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.country) || selectedCountry,
+                countries: countries,
+                roles: (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || [],
+                userRoles: userRoles
+              });
+              if (!(selectedRole && activeCountryObj)) {
+                _context2.next = 13;
+                break;
+              }
+              _context2.next = 11;
+              return this.fetchFacilititesForRole(selectedRole, activeCountryObj);
+            case 11:
+              _context2.next = 19;
+              break;
+            case 13:
+              if (!((activeCountryObj === null || activeCountryObj === void 0 ? void 0 : (_activeCountryObj$rol2 = activeCountryObj.roles) === null || _activeCountryObj$rol2 === void 0 ? void 0 : _activeCountryObj$rol2.length) > 0)) {
+                _context2.next = 19;
+                break;
+              }
+              firstRole = activeCountryObj.roles[0];
+              if (!firstRole) {
+                _context2.next = 19;
+                break;
+              }
+              this.setState({
+                selectedRole: firstRole.roleName
+              });
+              _context2.next = 19;
+              return this.fetchFacilititesForRole(firstRole.roleName, activeCountryObj);
+            case 19:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function componentWillMount() {
+        return _componentWillMount.apply(this, arguments);
+      }
+      return componentWillMount;
+    }()
+  }, {
+    key: "componentWillUpdate",
+    value: function () {
+      var _componentWillUpdate = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(nextProps, nextState) {
+        var activeCountryObj, _activeCountryObj;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(nextState.selectedCountry !== this.state.selectedCountry)) {
+                _context3.next = 5;
+                break;
+              }
+              this.setState({
+                selectedRole: null,
+                selectedYardNumber: null,
+                selectedYardNumberAndName: null,
+                yardOptions: [],
+                selectedLanguage: null
+              });
+              if (nextState.selectedCountry) {
+                activeCountryObj = getActiveCountryObjByCountry(this.state.userRoles, nextState.selectedCountry);
+                this.setState({
+                  roles: (activeCountryObj === null || activeCountryObj === void 0 ? void 0 : activeCountryObj.roles) || []
+                });
+              } else {
+                this.setState({
+                  roles: []
+                });
+              }
+              _context3.next = 11;
+              break;
+            case 5:
+              if (!(nextState.selectedRole !== this.state.selectedRole)) {
+                _context3.next = 11;
+                break;
+              }
+              this.setState({
+                selectedYardNumber: null,
+                selectedYardNumberAndName: null
+              });
+              if (!nextState.selectedRole) {
+                _context3.next = 11;
+                break;
+              }
+              _activeCountryObj = getActiveCountryObjByCountry(this.state.userRoles, nextState.selectedCountry);
+              _context3.next = 11;
+              return this.fetchFacilititesForRole(nextState.selectedRole, _activeCountryObj);
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function componentWillUpdate(_x3, _x4) {
+        return _componentWillUpdate.apply(this, arguments);
+      }
+      return componentWillUpdate;
+    }()
   }, {
     key: "render",
     value: function render() {
@@ -25310,7 +25602,50 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm"
       }, this.props.width > 760 && /*#__PURE__*/React__default["default"].createElement(ProfileDetails, {
         logout: this.props.onLogoutItemClicked
-      }));
+      }), /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "gear",
+        variant: "solid"
+      }), /*#__PURE__*/React__default["default"].createElement("p", null, "Settings")), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow",
+        "data-e2e": "LocationAndLanguageRow"
+      }, /*#__PURE__*/React__default["default"].createElement(CountrySelector, {
+        countries: this.state.countries || [],
+        value: this.state.selectedCountry,
+        handleChange: this.handleInputChange.selectedCountry
+      }), /*#__PURE__*/React__default["default"].createElement(RoleSelector, {
+        roles: this.state.roles,
+        value: this.state.selectedRole,
+        handleChange: this.handleInputChange.selectedRole
+      }), /*#__PURE__*/React__default["default"].createElement(YardNumberMenu, {
+        handleChange: this.handleInputChange.selectedYardNumberAndName,
+        value: this.state.selectedYardNumberAndName,
+        yardOptions: this.state.yardOptions
+      }), /*#__PURE__*/React__default["default"].createElement(LanguageMenu, {
+        value: this.state.selectedLanguage,
+        handleChange: this.handleInputChange.selectedLanguage,
+        selectedCountry: this.state.selectedCountry,
+        stack: "c"
+      }))), /*#__PURE__*/React__default["default"].createElement("hr", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox",
+        "data-e2e": "saveButton"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
+        primary: true,
+        type: "submit",
+        onClick: this.saveSettings
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "floppy-disk",
+        variant: "regular"
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--saveTxt"
+      }, "Save"))), this.state.showLoading && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--spinner"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
+        size: "60px"
+      })));
     }
   }]);
   return SettingsView;