@bigbinary/neeto-team-members-frontend 2.5.7 → 2.5.9

package/dist/index.cjs.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var e$1 = require('react');
+var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var reactQuery = require('react-query');
 var devtools = require('react-query/devtools');
 var axios = require('axios');
@@ -14,7 +15,7 @@ var neetoIcons = require('@bigbinary/neeto-icons');
 var layouts = require('@bigbinary/neetoui/layouts');
 var formik = require('formik');
 var formik$1 = require('@bigbinary/neetoui/formik');
-var Ee = require('yup');
+var yup = require('yup');
 var ie = require('classnames');
 var require$$0 = require('util');
 var reactRouterDom = require('react-router-dom');
@@ -42,7 +43,7 @@ function _interopNamespace(e) {
 
 var e__default = /*#__PURE__*/_interopDefaultLegacy(e$1);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var Ee__namespace = /*#__PURE__*/_interopNamespace(Ee);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var ie__default = /*#__PURE__*/_interopDefaultLegacy(ie);
 var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
 var Se__default = /*#__PURE__*/_interopDefaultLegacy(Se);
@@ -2137,8 +2138,8 @@ function transformOptions(options) {
   return options;
 }
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function noop() {}
@@ -2198,9 +2199,9 @@ var I18n = function (_EventEmitter) {
         }
       }
       var defOpts = get();
-      this.options = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, defOpts), this.options), transformOptions(options));
+      this.options = _objectSpread$f(_objectSpread$f(_objectSpread$f({}, defOpts), this.options), transformOptions(options));
       if (this.options.compatibilityAPI !== 'v1') {
-        this.options.interpolation = _objectSpread$e(_objectSpread$e({}, defOpts.interpolation), this.options.interpolation);
+        this.options.interpolation = _objectSpread$f(_objectSpread$f({}, defOpts.interpolation), this.options.interpolation);
       }
       if (options.keySeparator !== undefined) {
         this.options.userDefinedKeySeparator = options.keySeparator;
@@ -2478,7 +2479,7 @@ var I18n = function (_EventEmitter) {
           }
           options = _this5.options.overloadTranslationOptionHandler([key, opts].concat(rest));
         } else {
-          options = _objectSpread$e({}, opts);
+          options = _objectSpread$f({}, opts);
         }
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
@@ -2605,7 +2606,7 @@ var I18n = function (_EventEmitter) {
       var _this8 = this;
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
-      var mergedOptions = _objectSpread$e(_objectSpread$e(_objectSpread$e({}, this.options), options), {
+      var mergedOptions = _objectSpread$f(_objectSpread$f(_objectSpread$f({}, this.options), options), {
         isClone: true
       });
       var clone = new I18n(mergedOptions);
@@ -2616,7 +2617,7 @@ var I18n = function (_EventEmitter) {
       membersToCopy.forEach(function (m) {
         clone[m] = _this8[m];
       });
-      clone.services = _objectSpread$e({}, this.services);
+      clone.services = _objectSpread$f({}, this.services);
       clone.services.utils = {
         hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
       };
@@ -3187,9 +3188,9 @@ var unescape$1 = function unescape(text) {
   return text.replace(matchHtmlEntity, unescapeHtmlEntity);
 };
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var defaultOptions = {
   bindI18n: 'languageChanged',
   bindI18nStore: '',
@@ -3202,7 +3203,7 @@ var defaultOptions = {
 };
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  defaultOptions = _objectSpread$d(_objectSpread$d({}, defaultOptions), options);
+  defaultOptions = _objectSpread$e(_objectSpread$e({}, defaultOptions), options);
 }
 function getDefaults() {
   return defaultOptions;
@@ -3219,9 +3220,9 @@ function getI18n() {
 var _excluded$4 = ["format"],
     _excluded2$3 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function hasChildren(node, checkLength) {
   if (!node) return false;
@@ -3247,7 +3248,7 @@ function getAsArray(data) {
 }
 
 function mergeProps(source, target) {
-  var newTarget = _objectSpread$c({}, target);
+  var newTarget = _objectSpread$d({}, target);
 
   newTarget.props = Object.assign(source.props, target.props);
   return newTarget;
@@ -3317,7 +3318,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   getData(children);
   var ast = c.parse("<0>".concat(targetString, "</0>"));
 
-  var opts = _objectSpread$c(_objectSpread$c({}, data), combinedTOpts);
+  var opts = _objectSpread$d(_objectSpread$d({}, data), combinedTOpts);
 
   function renderInner(child, node, rootReactNode) {
     var childs = getChildren(child);
@@ -3327,7 +3328,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
     if (child.dummy) child.children = inner;
-    mem.push(e$1.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+    mem.push(e$1.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
       key: i
     }), isVoid ? undefined : inner));
   }
@@ -3359,7 +3360,7 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           } else if (isEmptyTransWithHTML) {
           var _inner = mapAST(reactNodes, node.children, rootReactNode);
 
-          mem.push(e$1.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+          mem.push(e$1.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
             key: i
           }), _inner));
         } else if (Number.isNaN(parseFloat(node.name))) {
@@ -3390,11 +3391,11 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
           var content = node.children[0] ? translationContent : null;
           if (content) mem.push(content);
         } else if (node.children.length === 1 && translationContent) {
-          mem.push(e$1.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+          mem.push(e$1.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
             key: i
           }), translationContent));
         } else {
-          mem.push(e$1.cloneElement(child, _objectSpread$c(_objectSpread$c({}, child.props), {}, {
+          mem.push(e$1.cloneElement(child, _objectSpread$d(_objectSpread$d({}, child.props), {}, {
             key: i
           })));
         }
@@ -3453,7 +3454,7 @@ function Trans$1(_ref) {
 
   if (context) tOptions.context = context;
 
-  var reactI18nextOptions = _objectSpread$c(_objectSpread$c({}, getDefaults()), i18n.options && i18n.options.react);
+  var reactI18nextOptions = _objectSpread$d(_objectSpread$d({}, getDefaults()), i18n.options && i18n.options.react);
 
   var namespaces = ns || t.ns || i18n.options && i18n.options.defaultNS;
   namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
@@ -3461,13 +3462,13 @@ function Trans$1(_ref) {
   var hashTransKey = reactI18nextOptions.hashTransKey;
   var key = i18nKey || (hashTransKey ? hashTransKey(defaultValue) : defaultValue);
   var interpolationOverride = values ? tOptions.interpolation : {
-    interpolation: _objectSpread$c(_objectSpread$c({}, tOptions.interpolation), {}, {
+    interpolation: _objectSpread$d(_objectSpread$d({}, tOptions.interpolation), {}, {
       prefix: '#$?',
       suffix: '?$#'
     })
   };
 
-  var combinedTOpts = _objectSpread$c(_objectSpread$c(_objectSpread$c(_objectSpread$c({}, tOptions), {}, {
+  var combinedTOpts = _objectSpread$d(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, tOptions), {}, {
     count: count
   }, values), interpolationOverride), {}, {
     defaultValue: defaultValue,
@@ -3517,9 +3518,9 @@ var ReportNamespaces = function () {
 
 var _excluded$3 = ["children", "count", "parent", "i18nKey", "context", "tOptions", "values", "defaults", "components", "ns", "i18n", "t", "shouldUnescape"];
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function Trans(_ref) {
   var children = _ref.children,
       count = _ref.count,
@@ -3543,7 +3544,7 @@ function Trans(_ref) {
 
   var i18n = i18nFromProps || i18nFromContext || getI18n();
   var t = tFromProps || i18n && i18n.t.bind(i18n);
-  return Trans$1(_objectSpread$b({
+  return Trans$1(_objectSpread$c({
     children: children,
     count: count,
     parent: parent,
@@ -3592,9 +3593,9 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var usePrevious = function usePrevious(value, ignore) {
   var ref = e$1.useRef();
@@ -3631,7 +3632,7 @@ function useTranslation(ns) {
 
   if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
 
-  var i18nOptions = _objectSpread$a(_objectSpread$a(_objectSpread$a({}, getDefaults()), i18n.options.react), props);
+  var i18nOptions = _objectSpread$b(_objectSpread$b(_objectSpread$b({}, getDefaults()), i18n.options.react), props);
 
   var useSuspense = i18nOptions.useSuspense,
       keyPrefix = i18nOptions.keyPrefix;
@@ -3714,6 +3715,7 @@ var alerts$1 = {
 var buttons$1 = {
 	cancel: "Cancel",
 	changeRole: "Change role",
+	"continue": "Continue",
 	proceed: "Proceed",
 	reset: "Reset",
 	saveChanges: "Save changes"
@@ -3730,6 +3732,7 @@ var common$1 = {
 	addNew_: "Add new {{what}}",
 	all: "All",
 	all_: "All {{what}}",
+	back: "Back",
 	column_one: "Column",
 	column_other: "Columns",
 	deactivate: "Deactivate",
@@ -3755,15 +3758,21 @@ var common$1 = {
 	takeAction: "Take action"
 };
 var helpers$1 = {
+	addMembersToNeetoProducts: "Add <strong>{{emails, list}}</strong> to the following neeto products.",
 	configPermissions: "Configure permissions for the modules.",
 	enterMultipleEmails: "Please press space, tab or enter key after entering an email address.",
 	moreInfoAboutPermissions: "More information about permissions",
 	noRolesFound: "No roles found.",
 	searchRoles: "Search roles",
 	selectedMembersCount: "{{count}} {{metaName}} selected of",
+	multipleProductInvitation: "<strong>{{emails, list}}</strong> will be invited to the following neeto products with the role given next to it.",
+	singleProductInvitation: "<strong>{{emails, list}}</strong> will be invited to <strong>{{product}}</strong> with a role of <strong>{{role}}</strong>.",
 	themeSelector: "Theme selector",
 	visitToKnowMoreAboutPermissions: "Visit to know more about permissions"
 };
+var labels = {
+	neeto_: "neeto{{product}}"
+};
 var metaNames$1 = {
 	agent_one: "Agent",
 	agent_other: "Agents",
@@ -3802,6 +3811,7 @@ var en$1 = {
 	columns: columns$1,
 	common: common$1,
 	helpers: helpers$1,
+	labels: labels,
 	metaNames: metaNames$1,
 	placeholders: placeholders$1,
 	tooltips: tooltips$1,
@@ -3925,10 +3935,10 @@ instance.use(Browser).use(initReactI18next).init({
 });
 
 const hasPermission = function () {
-  var _window$globalProps$p, _window$globalProps;
+  var _globalProps$permissi;
   let permissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
   const type = typeof permissions;
-  const userPermissions = (_window$globalProps$p = (_window$globalProps = window.globalProps) === null || _window$globalProps === void 0 ? void 0 : _window$globalProps.permissions) !== null && _window$globalProps$p !== void 0 ? _window$globalProps$p : [];
+  const userPermissions = (_globalProps$permissi = initializers.globalProps.permissions) !== null && _globalProps$permissi !== void 0 ? _globalProps$permissi : [];
   if (Object.is(type, "string")) {
     return userPermissions.includes(permissions);
   } else if (Array.isArray(permissions)) {
@@ -3984,9 +3994,9 @@ const withReactQuery = Component => {
 /* eslint-disable @bigbinary/neeto/no-dangling-constants */
 const BASE_URL = "team_members";
 
-const fetch$2 = () => axios__default["default"].get(`${BASE_URL}/permissions`);
+const fetch$3 = () => axios__default["default"].get(`${BASE_URL}/permissions`);
 const permissionsApi = {
-  fetch: fetch$2
+  fetch: fetch$3
 };
 
 const DEFAULT_STALE_TIME = 300000; // 5 minutes
@@ -3994,20 +4004,26 @@ const DEFAULT_STALE_TIME = 300000; // 5 minutes
 const QUERY_KEYS = {
   PERMISSIONS: "neeto-team-members-permissions",
   ROLES: "neeto-team-members-roles",
+  GLOBAL_ROLES: "neeto-team-members-global-roles",
   TEAMS: "neeto-team-members-teams",
   TEAMS_DEPENDENCIES: "neeto-team-members-teams-dependencies"
 };
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchPermissions = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$9({
+  return reactQuery.useQuery(QUERY_KEYS.PERMISSIONS, permissionsApi.fetch, _objectSpread$a({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.permissions || response.data.permissions
   }, options));
 };
 
+const fetch$2 = () => axios__default["default"].get(`${BASE_URL}/global_roles`);
+const globalRolesApi = {
+  fetch: fetch$2
+};
+
 const fetch$1 = () => axios__default["default"].get(`${BASE_URL}/organization_roles`);
 const create$1 = payload => axios__default["default"].post(`${BASE_URL}/organization_roles`, payload);
 const update$1 = (id, payload) => axios__default["default"].patch(`${BASE_URL}/organization_roles/${id}`, payload);
@@ -4027,19 +4043,25 @@ const _excluded$2 = ["onSuccess"],
   _excluded2$2 = ["onSuccess"],
   _excluded3$1 = ["onSuccess"],
   _excluded4 = ["onSuccess"];
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchRoles = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$8({
+  return reactQuery.useQuery(QUERY_KEYS.ROLES, organizationRolesApi.fetch, _objectSpread$9({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.organizationRoles || response.data.organizationRoles
   }, options));
 };
+const useFetchGlobalRoles = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return reactQuery.useQuery(QUERY_KEYS.GLOBAL_ROLES, globalRolesApi.fetch, _objectSpread$9({
+    staleTime: DEFAULT_STALE_TIME
+  }, options));
+};
 const useCreateRole = _ref => {
   let onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$2);
-  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$8({
+  return reactQuery.useMutation(organizationRolesApi.create, _objectSpread$9({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
       queryClient.setQueriesData(QUERY_KEYS.ROLES, cachedData => {
@@ -4060,7 +4082,7 @@ const useUpdateRole = _ref2 => {
     let id = _ref3.id,
       payload = _ref3.payload;
     return organizationRolesApi.update(id, payload);
-  }, _objectSpread$8({
+  }, _objectSpread$9({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -4083,7 +4105,7 @@ const useDestroyRole = _ref4 => {
     let id = _ref5.id,
       payload = _ref5.payload;
     return organizationRolesApi.destroy(id, payload);
-  }, _objectSpread$8({
+  }, _objectSpread$9({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -4101,7 +4123,7 @@ const useDestroyRole = _ref4 => {
 const useBulkUpdateRoles = _ref6 => {
   let onSuccess = _ref6.onSuccess,
     options = _objectWithoutProperties(_ref6, _excluded4);
-  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$8({
+  return reactQuery.useMutation(organizationRolesApi.bulkUpdate, _objectSpread$9({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -5619,12 +5641,12 @@ const ADD_ROLE_FORM_INITIAL_VALUES = {
   description: "",
   permissionIds: []
 };
-const ADD_ROLE_FORM_VALIDATION_SCHEMA = Ee.object({
-  name: Ee.string().trim().max(40, instance.t("validations.limitExceeded", {
+const ADD_ROLE_FORM_VALIDATION_SCHEMA = yup.object({
+  name: yup.string().trim().max(40, instance.t("validations.limitExceeded", {
     what: instance.t("common.name").toLocaleLowerCase(),
     limit: 40
   })).required(instance.t("validations.enterRoleName")),
-  description: Ee.string().trim().max(255, instance.t("validations.limitExceeded", {
+  description: yup.string().trim().max(255, instance.t("validations.limitExceeded", {
     what: instance.t("common.description").toLocaleLowerCase(),
     limit: 255
   }))
@@ -5691,8 +5713,8 @@ const Permissions = _ref => {
   }))));
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const New = _ref => {
   let isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -5707,7 +5729,7 @@ const New = _ref => {
     createRole = _useCreateRole.mutate,
     isSubmitting = _useCreateRole.isLoading;
   const handleFormSubmit = formValues => {
-    const modifiedFormValues = _objectSpread$7(_objectSpread$7({}, formValues), {}, {
+    const modifiedFormValues = _objectSpread$8(_objectSpread$8({}, formValues), {}, {
       description: formValues.description.trim()
     });
     createRole({
@@ -5724,7 +5746,7 @@ const New = _ref => {
   }, t("common.addNew_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
   }))), /*#__PURE__*/e__default["default"].createElement(formik$1.Form, {
-    formikProps: _objectSpread$7(_objectSpread$7({}, ROLE_FORMIK_PROPS), {}, {
+    formikProps: _objectSpread$8(_objectSpread$8({}, ROLE_FORMIK_PROPS), {}, {
       onSubmit: handleFormSubmit
     }),
     ref: formReference
@@ -5944,8 +5966,8 @@ const Delete = _ref => {
   });
 };
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const Edit = _ref => {
   let isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -5965,7 +5987,7 @@ const Edit = _ref => {
   };
   const handleFormSubmit = formValues => {
     const payload = {
-      organizationRole: _objectSpread$6(_objectSpread$6(_objectSpread$6({}, selectedRole), formValues), {}, {
+      organizationRole: _objectSpread$7(_objectSpread$7(_objectSpread$7({}, selectedRole), formValues), {}, {
         description: formValues.description.trim()
       })
     };
@@ -5984,7 +6006,7 @@ const Edit = _ref => {
   }, t("common.update_", {
     what: t("common.role", SINGULAR).toLocaleLowerCase()
   }))), /*#__PURE__*/e__default["default"].createElement(formik$1.Form, {
-    formikProps: _objectSpread$6(_objectSpread$6({}, ROLE_FORMIK_PROPS), {}, {
+    formikProps: _objectSpread$7(_objectSpread$7({}, ROLE_FORMIK_PROPS), {}, {
       initialValues,
       onSubmit: handleFormSubmit
     }),
@@ -8443,12 +8465,12 @@ const teamsApi = {
 const _excluded$1 = ["onSuccess"],
   _excluded2$1 = ["onSuccess"],
   _excluded3 = ["onSuccess"];
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const useFetchMembers = function () {
   let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return reactQuery.useQuery([QUERY_KEYS.TEAMS, params], () => teamsApi.fetch(params), _objectSpread$5({
+  return reactQuery.useQuery([QUERY_KEYS.TEAMS, params], () => teamsApi.fetch(params), _objectSpread$6({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.data || response,
     keepPreviousData: true
@@ -8457,7 +8479,7 @@ const useFetchMembers = function () {
 const useCreateMember = _ref => {
   let onSuccess = _ref.onSuccess,
     options = _objectWithoutProperties(_ref, _excluded$1);
-  return reactQuery.useMutation(teamsApi.create, _objectSpread$5({
+  return reactQuery.useMutation(teamsApi.create, _objectSpread$6({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -8473,7 +8495,7 @@ const useUpdateMember = _ref2 => {
     let id = _ref3.id,
       payload = _ref3.payload;
     return teamsApi.update(id, payload);
-  }, _objectSpread$5({
+  }, _objectSpread$6({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -8485,7 +8507,7 @@ const useUpdateMember = _ref2 => {
 const useBulkUpdateMembers = _ref4 => {
   let onSuccess = _ref4.onSuccess,
     options = _objectWithoutProperties(_ref4, _excluded3);
-  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$5({
+  return reactQuery.useMutation(teamsApi.bulkUpdate, _objectSpread$6({
     onSuccess: response => {
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS);
       queryClient.invalidateQueries(QUERY_KEYS.TEAMS_DEPENDENCIES);
@@ -8503,7 +8525,7 @@ const useFetchFilterOptions = _ref5 => {
     params = _ref5$params === void 0 ? {} : _ref5$params,
     _ref5$options = _ref5.options,
     options = _ref5$options === void 0 ? {} : _ref5$options;
-  return reactQuery.useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], () => teamsApi.fetchFilterOptions(params), _objectSpread$5({
+  return reactQuery.useQuery([QUERY_KEYS.TEAMS_DEPENDENCIES, params], () => teamsApi.fetchFilterOptions(params), _objectSpread$6({
     staleTime: DEFAULT_STALE_TIME,
     select: response => response.data || response
   }, options));
@@ -8599,6 +8621,62 @@ const Header = _ref => {
   }))));
 };
 
+var _URLSearchParams$get;
+const URL_PARAMS = new URLSearchParams(window.location.search);
+const MEMBER_FILTER = {
+  ACTIVE: {
+    label: instance.t("common.active"),
+    value: "ACTIVE",
+    defaultCount: 0
+  },
+  DEACTIVATED: {
+    label: instance.t("common.deactivated"),
+    value: "DEACTIVATED",
+    defaultCount: 0
+  },
+  ALL: {
+    label: instance.t("common.all"),
+    value: "ALL",
+    defaultCount: 0
+  }
+};
+const DEFAULT_RADIX = 10;
+const DEFAULT_MEMBER_FILTER = MEMBER_FILTER.ACTIVE.value;
+const DEFAULT_PAGE_NUMBER = 1;
+const DEFAULT_PAGE_SIZE = 50;
+const DROPDOWN_BUTTON_PROPS = {
+  "data-cy": "ntm-members-table-row-dropdown-button",
+  size: "medium"
+};
+const DEFAULT_IS_OPEN_VALUES = {
+  menuBar: false,
+  manageMember: false,
+  alert: false
+};
+const URL_CATEGORY_FILTER_VALUE = (_URLSearchParams$get = new URLSearchParams(window.location.search).get("filter")) === null || _URLSearchParams$get === void 0 ? void 0 : _URLSearchParams$get.toUpperCase();
+const DEFAULT_FILTER_VALUES = {
+  page: ramda.clamp(1, Infinity, parseInt(URL_PARAMS.get("page"))) || DEFAULT_PAGE_NUMBER,
+  results: ramda.clamp(10, 500, parseInt(URL_PARAMS.get("results"))) || DEFAULT_PAGE_SIZE,
+  category: URL_CATEGORY_FILTER_VALUE || DEFAULT_MEMBER_FILTER,
+  search: "",
+  sortBy: "",
+  sortDirection: "",
+  neetoFilters: []
+};
+const DEFAULT_SELECTED_ROWS = {
+  active: [],
+  emails: [],
+  keys: []
+};
+const DEFAULT_NEETO_FILTERS_COLUMNS = [{
+  key: "role",
+  node: "organization_role.name",
+  model: "OrganizationRole",
+  label: instance.t("common.role", SINGULAR),
+  type: "multi_option",
+  values: []
+}];
+
 const filterBySearchTerm = (searchTerm, roles) => ramda.filter(_ref => {
   let name = _ref.name;
   return ramda.includes(ramda.trim(ramda.toLower(searchTerm)), ramda.trim(ramda.toLower(name)));
@@ -8687,62 +8765,6 @@ const RolesDropdown = _ref => {
   }, instance.t("helpers.noRolesFound")))));
 };
 
-var _URLSearchParams$get;
-const URL_PARAMS = new URLSearchParams(window.location.search);
-const MEMBER_FILTER = {
-  ACTIVE: {
-    label: instance.t("common.active"),
-    value: "ACTIVE",
-    defaultCount: 0
-  },
-  DEACTIVATED: {
-    label: instance.t("common.deactivated"),
-    value: "DEACTIVATED",
-    defaultCount: 0
-  },
-  ALL: {
-    label: instance.t("common.all"),
-    value: "ALL",
-    defaultCount: 0
-  }
-};
-const DEFAULT_RADIX = 10;
-const DEFAULT_MEMBER_FILTER = MEMBER_FILTER.ACTIVE.value;
-const DEFAULT_PAGE_NUMBER = 1;
-const DEFAULT_PAGE_SIZE = 50;
-const DROPDOWN_BUTTON_PROPS = {
-  "data-cy": "ntm-members-table-row-dropdown-button",
-  size: "medium"
-};
-const DEFAULT_IS_OPEN_VALUES = {
-  menuBar: false,
-  manageMember: false,
-  alert: false
-};
-const URL_CATEGORY_FILTER_VALUE = (_URLSearchParams$get = new URLSearchParams(window.location.search).get("filter")) === null || _URLSearchParams$get === void 0 ? void 0 : _URLSearchParams$get.toUpperCase();
-const DEFAULT_FILTER_VALUES = {
-  page: ramda.clamp(1, Infinity, parseInt(URL_PARAMS.get("page"))) || DEFAULT_PAGE_NUMBER,
-  results: ramda.clamp(10, 500, parseInt(URL_PARAMS.get("results"))) || DEFAULT_PAGE_SIZE,
-  category: URL_CATEGORY_FILTER_VALUE || DEFAULT_MEMBER_FILTER,
-  search: "",
-  sortBy: "",
-  sortDirection: "",
-  neetoFilters: []
-};
-const DEFAULT_SELECTED_ROWS = {
-  active: [],
-  emails: [],
-  keys: []
-};
-const DEFAULT_NEETO_FILTERS_COLUMNS = [{
-  key: "role",
-  node: "organization_role.name",
-  model: "OrganizationRole",
-  label: instance.t("common.role", SINGULAR),
-  type: "multi_option",
-  values: []
-}];
-
 const Left = _ref => {
   var _selectedRows$keys, _selectedRows$keys2, _config$permissions$u, _config$permissions, _config$hiddenBulkAct, _config$otherBulkActi;
   let config = _ref.config,
@@ -9585,6 +9607,79 @@ const getFilteredRoles = function () {
   return ramda.filter(removeExcludedRole(config === null || config === void 0 ? void 0 : config.excludedRoles), roles);
 };
 
+const AppList = _ref => {
+  let globalRoles = _ref.globalRoles,
+    savedStateRef = _ref.savedStateRef;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const _useState = e$1.useState(savedStateRef.current.isAppListEnabled),
+    _useState2 = _slicedToArray(_useState, 2),
+    isAppListEnabled = _useState2[0],
+    setIsAppListEnabled = _useState2[1];
+  const _useFormikContext = formik.useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    emails = _useFormikContext$val.emails,
+    appRoles = _useFormikContext$val.appRoles,
+    setFieldValue = _useFormikContext.setFieldValue;
+  const selectedEmail = ramda.pluck("value", emails);
+  e$1.useEffect(() => {
+    if (savedStateRef.current.isAppListEnabled !== isAppListEnabled) {
+      appRoles.forEach((_, index) => {
+        setFieldValue(`appRoles[${index}].isEnabled`, isAppListEnabled);
+      });
+    }
+    savedStateRef.current.isAppListEnabled = isAppListEnabled;
+  }, [isAppListEnabled]);
+  const buildRoleOptions = roles => roles.map(role => pure.toLabelAndValue(role.name));
+  return /*#__PURE__*/e__default["default"].createElement("div", {
+    className: "neeto-ui-w-full"
+  }, /*#__PURE__*/e__default["default"].createElement("div", {
+    className: "neeto-ui-mb-3"
+  }, /*#__PURE__*/e__default["default"].createElement(neetoui.Checkbox, {
+    checked: isAppListEnabled,
+    label: /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
+      component: "span",
+      style: "body2"
+    }, /*#__PURE__*/e__default["default"].createElement(Trans, {
+      i18nKey: "helpers.addMembersToNeetoProducts",
+      values: {
+        emails: selectedEmail
+      }
+    })),
+    onChange: () => setIsAppListEnabled(ramda.not)
+  })), appRoles.map((_ref2, index) => {
+    let appName = _ref2.appName,
+      isEnabled = _ref2.isEnabled;
+    return /*#__PURE__*/e__default["default"].createElement("div", {
+      className: "ntm-manage-members__app-roles",
+      key: appName
+    }, /*#__PURE__*/e__default["default"].createElement(formik$1.Switch, {
+      checked: isEnabled && isAppListEnabled,
+      disabled: !isAppListEnabled,
+      label: t("labels.neeto_", {
+        product: appName
+      }),
+      name: `appsRoles[${index}].isEnabled`,
+      onChange: _ref3 => {
+        let target = _ref3.target;
+        setFieldValue(`appRoles[${index}].isEnabled`, target.checked);
+      }
+    }), /*#__PURE__*/e__default["default"].createElement("div", {
+      className: "ntm-manage-members-app-roles__select-wrapper"
+    }, /*#__PURE__*/e__default["default"].createElement(formik$1.Select, {
+      isDisabled: !isEnabled || !isAppListEnabled,
+      name: `appRoles[${index}].activeRole`,
+      options: buildRoleOptions(globalRoles[appName]),
+      size: "small",
+      strategy: "fixed",
+      onChange: _ref4 => {
+        let value = _ref4.value;
+        setFieldValue(`appRoles[${index}].activeRole`, value);
+      }
+    })));
+  }));
+};
+
 const _excluded = ["className", "children"],
   _excluded2 = ["className", "children"];
 const PageWrapper = _ref => {
@@ -9607,15 +9702,23 @@ Page.Header = PageWrapper;
 Page.Body = PageWrapper;
 Page.Footer = PageWrapper;
 
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const NEETO_AUTH_APP_NAME = "neetoAuth";
+const ADMIN_ROLE = "Admin";
 const MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA = {
-  emails: Ee__namespace.array().min(1, instance.t("validations.minOneEmail")).test("are-all-emails-valid", instance.t("validations.validEmail"), emails => emails.every(ramda.prop("valid"))).nullable()
+  emails: yup__namespace.array().min(1, instance.t("validations.minOneEmail")).test("are-all-emails-valid", instance.t("validations.validEmail"), emails => emails.every(ramda.prop("valid"))).nullable()
 };
 const ROLES_RADIO_GROUP_VALIDATION_SCHEMA = {
-  role: Ee__namespace.string().required(instance.t("validations.roleRequired"))
+  role: yup__namespace.string().required(instance.t("validations.roleRequired"))
 };
-const VALIDATION_SCHEMA$1 = Ee__namespace.object().shape(_objectSpread$4(_objectSpread$4({}, MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA));
+const VALIDATION_SCHEMA$1 = yup__namespace.object().shape(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, MULTIPLE_EMAIL_INPUT_VALIDATION_SCHEMA), ROLES_RADIO_GROUP_VALIDATION_SCHEMA), {}, {
+  appsRoles: yup__namespace.array().of(yup__namespace.object().shape({
+    appName: yup__namespace.string(),
+    isEnabled: yup__namespace.boolean(),
+    role: yup__namespace.string().required(instance.t("validations.roleRequired"))
+  }))
+}));
 const FILTER_INVALID_EMAILS = {
   label: instance.t("validations.filterInvalidEmails")
 };
@@ -9640,22 +9743,32 @@ const MEMBERS_FORM_COMPONENT_MAPPER = {
   modal: neetoui.Modal,
   page: Page
 };
+const FORM_PAGES = {
+  MAIN: "main",
+  APP_LIST: "appList",
+  CONFIRMATION: "confirmation"
+};
 const OWNER_CANT_CHANGE_USER_EMAIL_KB_ARTICLE_URL = "https://neetoauthhelp.neetokb.com/articles/owner-cant-change-other-users-email";
 
-const renderInitialValues = (selectedMember, roles) => {
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const renderInitialValues = (selectedMember, roles, globalRoles) => {
   var _roles$;
-  return {
+  return _objectSpread$4({
     emails: selectedMember ? [{
       label: selectedMember.email,
       value: selectedMember.email,
       valid: true
     }] : [],
     role: (selectedMember === null || selectedMember === void 0 ? void 0 : selectedMember.role) || ((_roles$ = roles[1]) === null || _roles$ === void 0 ? void 0 : _roles$.name) || ""
-  };
+  }, !selectedMember && {
+    appRoles: generateAppsRolesInitialValue(globalRoles)
+  });
 };
 const renderPayload = function (_ref) {
   let role = _ref.role,
-    emails = _ref.emails;
+    emails = _ref.emails,
+    appRoles = _ref.appRoles;
   let selectedMember = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return selectedMember ? {
     active: true,
@@ -9663,10 +9776,86 @@ const renderPayload = function (_ref) {
   } : {
     user: {
       emails: ramda.pluck("value", emails),
-      organizationRole: role
+      organizationRole: role,
+      appRoles: addCurrentAppRoleToList(role, appRoles)
     }
   };
 };
+const generateAppsRolesInitialValue = globalRoles => {
+  var _globalProps$appName;
+  if (!globalRoles) return [];
+  return Object.keys(globalRoles).filter(pure.notEquals((_globalProps$appName = initializers.globalProps.appName) === null || _globalProps$appName === void 0 ? void 0 : _globalProps$appName.substring(5))).map(appName => ({
+    appName,
+    activeRole: globalRoles[appName][0].name,
+    isEnabled: true
+  }));
+};
+const addCurrentAppRoleToList = (currentAppRole, appRoles) => {
+  var _globalProps$appName2;
+  if (initializers.globalProps.appName === NEETO_AUTH_APP_NAME) return appRoles;
+  return ramda.prepend({
+    appName: (_globalProps$appName2 = initializers.globalProps.appName) === null || _globalProps$appName2 === void 0 ? void 0 : _globalProps$appName2.substring(5),
+    activeRole: currentAppRole,
+    isEnabled: true
+  }, appRoles);
+};
+
+const Confirmation = () => {
+  var _globalProps$organiza, _globalProps$organiza2;
+  const _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  const _useFormikContext = formik.useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    emails = _useFormikContext$val.emails,
+    role = _useFormikContext$val.role,
+    appRoles = _useFormikContext$val.appRoles;
+  const selectedEmail = ramda.pluck("value", emails);
+  const activeAppRoles = pure.filterBy({
+    isEnabled: true
+  }, appRoles);
+  const effectiveAppRoles = addCurrentAppRoleToList(role, activeAppRoles);
+  return effectiveAppRoles.length > 1 ? /*#__PURE__*/e__default["default"].createElement("div", null, /*#__PURE__*/e__default["default"].createElement("div", {
+    className: "neeto-ui-mb-4"
+  }, /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
+    component: "span",
+    style: "body2"
+  }, /*#__PURE__*/e__default["default"].createElement(Trans, {
+    i18nKey: "helpers.multipleProductInvitation",
+    values: {
+      emails: selectedEmail,
+      orgName: (_globalProps$organiza = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name
+    }
+  }))), effectiveAppRoles.map(_ref => {
+    let appName = _ref.appName,
+      activeRole = _ref.activeRole;
+    return /*#__PURE__*/e__default["default"].createElement("div", {
+      className: "ntm-manage-members-effective-app-roles",
+      key: appName
+    }, /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
+      component: "span",
+      style: "body2",
+      weight: "semibold"
+    }, t("labels.neeto_", {
+      product: appName
+    })), /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
+      className: "ntm-manage-members-effective-app-roles__role-name",
+      component: "span",
+      style: "body2",
+      weight: "semibold"
+    }, activeRole));
+  })) : /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
+    component: "span",
+    style: "body2"
+  }, /*#__PURE__*/e__default["default"].createElement(Trans, {
+    i18nKey: "helpers.singleProductInvitation",
+    values: {
+      emails: selectedEmail,
+      product: initializers.globalProps.appName,
+      orgName: (_globalProps$organiza2 = initializers.globalProps.organization) === null || _globalProps$organiza2 === void 0 ? void 0 : _globalProps$organiza2.name,
+      role
+    }
+  }));
+};
 
 const LabelWithIcon = _ref => {
   let _ref$label = _ref.label,
@@ -9729,9 +9918,27 @@ const RolesRadioGroup = _ref => {
   let _ref$role = _ref.role,
     role = _ref$role === void 0 ? "" : _ref$role,
     _ref$roles = _ref.roles,
-    roles = _ref$roles === void 0 ? [] : _ref$roles;
+    roles = _ref$roles === void 0 ? [] : _ref$roles,
+    isEdit = _ref.isEdit,
+    globalRoles = _ref.globalRoles;
   const history = reactRouterDom.useHistory();
   const location = reactRouterDom.useLocation();
+  const _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
+  const setDefaultSelection = condition => {
+    values.appRoles.forEach((_ref2, index) => {
+      let appName = _ref2.appName,
+        activeRole = _ref2.activeRole;
+      if (condition(activeRole)) return;
+      const matchingRole = pure._findBy({
+        name: condition
+      }, globalRoles[appName]);
+      if (matchingRole) {
+        setFieldValue(`appRoles[${index}].activeRole`, matchingRole.name);
+      }
+    });
+  };
   return /*#__PURE__*/e__default["default"].createElement(formik$1.Radio, {
     stacked: true,
     className: "ntm-members-radio-group",
@@ -9745,10 +9952,17 @@ const RolesRadioGroup = _ref => {
         onClick: () => history.push(`${location.pathname}/roles`)
       }
     }),
-    name: "role"
-  }, roles.map(_ref2 => {
-    let id = _ref2.id,
-      name = _ref2.name;
+    name: "role",
+    onChange: _ref3 => {
+      let value = _ref3.target.value;
+      setFieldValue("role", value);
+      if (!isEdit) {
+        value === ADMIN_ROLE ? setDefaultSelection(ramda.equals(ADMIN_ROLE)) : setDefaultSelection(pure.notEquals(ADMIN_ROLE));
+      }
+    }
+  }, roles.map(_ref4 => {
+    let id = _ref4.id,
+      name = _ref4.name;
     return /*#__PURE__*/e__default["default"].createElement("label", {
       className: "ntm-members-form-radio-item__wrapper",
       htmlFor: pure.slugify(name),
@@ -9768,7 +9982,7 @@ const RolesRadioGroup = _ref => {
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const ManageMember = _ref => {
-  var _config$permissions$v, _config$permissions, _config$manageMember;
+  var _config$permissions$v, _config$permissions, _manageMemberComponen, _config$manageMember;
   let config = _ref.config,
     onComplete = _ref.onComplete,
     _ref$roles = _ref.roles,
@@ -9781,17 +9995,24 @@ const ManageMember = _ref => {
     _useState2 = _slicedToArray(_useState, 2),
     hasSubmitted = _useState2[0],
     setHasSubmitted = _useState2[1];
+  const _useState3 = e$1.useState(FORM_PAGES.MAIN),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
   const formReference = e$1.useRef(null);
   const emailInputReference = e$1.useRef(null);
+  const appListSavedStateReference = e$1.useRef({
+    isAppListEnabled: true
+  });
+  const shouldSkipAppListPage = e$1.useRef(false);
   const manageMemberComponentConfig = _objectSpread$3(_objectSpread$3({}, DEFAULT_COMPONENT_CONFIG), {}, {
     initialFocusRef: emailInputReference
   }, componentConfig);
   const Component = MEMBERS_FORM_COMPONENT_MAPPER[manageMemberComponentConfig.type || "pane"];
-  const handleClose = () => {
-    onComplete();
-    setHasSubmitted(false);
-  };
-  const haveToFetchRoles = ramda.isEmpty(roles) ? (_config$permissions$v = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.view) !== null && _config$permissions$v !== void 0 ? _config$permissions$v : DEFAULT_PERMISSION : false;
+  const isPermissionsGranted = (_config$permissions$v = config === null || config === void 0 ? void 0 : (_config$permissions = config.permissions) === null || _config$permissions === void 0 ? void 0 : _config$permissions.view) !== null && _config$permissions$v !== void 0 ? _config$permissions$v : DEFAULT_PERMISSION;
+  const haveToFetchRoles = ramda.isEmpty(roles) && isPermissionsGranted;
+  const isEditForm = !!selectedMember;
+  const isLastPage = currentPage === FORM_PAGES.CONFIRMATION || isEditForm;
   const _useFetchRoles = useFetchRoles({
       select: response => {
         var _ref2;
@@ -9802,14 +10023,14 @@ const ManageMember = _ref => {
     _useFetchRoles$data = _useFetchRoles.data,
     rolesList = _useFetchRoles$data === void 0 ? roles : _useFetchRoles$data,
     isRolesLoading = _useFetchRoles.isLoading;
+  const _useFetchGlobalRoles = useFetchGlobalRoles({
+      select: response => ramda.groupBy(ramda.prop("appName"), response !== null && response !== void 0 ? response : []),
+      enabled: !selectedMember && isPermissionsGranted
+    }),
+    _useFetchGlobalRoles$ = _useFetchGlobalRoles.data,
+    globalRoles = _useFetchGlobalRoles$ === void 0 ? {} : _useFetchGlobalRoles$,
+    isGlobalRolesLoading = _useFetchGlobalRoles.isLoading;
   const filteredRoles = getFilteredRoles(rolesList, config);
-  const manageMemberProps = {
-    hasSubmitted,
-    handleClose,
-    roles: rolesList,
-    selectedMember,
-    queryClient
-  };
   const _useCreateMember = useCreateMember({
       onSuccess: () => {
         var _config$createMember, _config$createMember$;
@@ -9828,13 +10049,43 @@ const ManageMember = _ref => {
     }),
     updateMember = _useUpdateMember.mutate,
     isUpdatingMember = _useUpdateMember.isLoading;
+  const handleClose = () => {
+    onComplete();
+    setHasSubmitted(false);
+    setCurrentPage(FORM_PAGES.MAIN);
+  };
+  const manageMemberProps = {
+    hasSubmitted,
+    handleClose,
+    roles: rolesList,
+    globalRoles,
+    selectedMember,
+    queryClient
+  };
+  const isSubmitting = isCreatingMember || isUpdatingMember || isRolesLoading || isGlobalRolesLoading;
   const handleAddMember = values => {
     selectedMember ? updateMember({
       id: selectedMember.id,
       payload: renderPayload(values, selectedMember)
     }) : createMember(renderPayload(values));
   };
-  const isSubmitting = isCreatingMember || isUpdatingMember || isRolesLoading;
+  const handleOnSubmit = values => {
+    shouldSkipAppListPage.current = ramda.isEmpty(values.appRoles);
+    if (isLastPage) {
+      handleAddMember(values);
+    } else if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
+      setCurrentPage(FORM_PAGES.CONFIRMATION);
+    } else if (currentPage === FORM_PAGES.MAIN) {
+      setCurrentPage(FORM_PAGES.APP_LIST);
+    }
+  };
+  const handleBackButton = () => {
+    if (currentPage === FORM_PAGES.APP_LIST || shouldSkipAppListPage.current) {
+      setCurrentPage(FORM_PAGES.MAIN);
+    } else if (currentPage === FORM_PAGES.CONFIRMATION) {
+      setCurrentPage(FORM_PAGES.APP_LIST);
+    }
+  };
   const getTitle = () => {
     const metaName = (config === null || config === void 0 ? void 0 : config.metaName) || "member";
     return selectedMember ? instance.t("common.edit_", {
@@ -9843,13 +10094,51 @@ const ManageMember = _ref => {
       what: getMetaName(metaName)(SINGULAR).toLocaleLowerCase()
     });
   };
+  const renderFormPage = (page, emails, role) => {
+    switch (page) {
+      case FORM_PAGES.MAIN:
+        return /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(MultipleEmailInput, {
+          emails: emails,
+          innerRef: emailInputReference,
+          selectedMember: selectedMember
+        }), /*#__PURE__*/e__default["default"].createElement(RolesRadioGroup, {
+          globalRoles: globalRoles,
+          isEdit: !!selectedMember,
+          role: role,
+          roles: filteredRoles
+        }));
+      case FORM_PAGES.APP_LIST:
+        return /*#__PURE__*/e__default["default"].createElement(AppList, {
+          globalRoles: globalRoles,
+          savedStateRef: appListSavedStateReference
+        });
+      case FORM_PAGES.CONFIRMATION:
+        return /*#__PURE__*/e__default["default"].createElement(Confirmation, null);
+      default:
+        return null;
+    }
+  };
   return /*#__PURE__*/e__default["default"].createElement(Component, {
+    className: manageMemberComponentConfig.className,
     "data-cy": "ntm-manage-members-pane-wrapper",
+    initialFocusRef: manageMemberComponentConfig.initialFocusRef,
     isOpen: manageMemberComponentConfig.isOpen,
-    onClose: handleClose,
-    className: manageMemberComponentConfig.className,
-    initialFocusRef: manageMemberComponentConfig.initialFocusRef
-  }, /*#__PURE__*/e__default["default"].createElement(Component.Header, manageMemberComponentConfig.headerProps, /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
+    onClose: handleClose
+  }, /*#__PURE__*/e__default["default"].createElement(Component.Header, _extends({}, manageMemberComponentConfig.headerProps, {
+    className: ie__default["default"]([{
+      "ntm-manage-members__header": currentPage !== FORM_PAGES.MAIN
+    }, (_manageMemberComponen = manageMemberComponentConfig.headerProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className])
+  }), currentPage !== FORM_PAGES.MAIN && /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
+    "aria-label": "Back",
+    icon: neetoIcons.LeftArrow,
+    size: "medium",
+    style: "text",
+    tooltipProps: {
+      content: instance.t("common.back"),
+      position: "bottom"
+    },
+    onClick: handleBackButton
+  }), /*#__PURE__*/e__default["default"].createElement(neetoui.Typography, {
     className: "ntm-members-form__header",
     "data-cy": "ntm-manage-members-pane-header",
     style: "h2",
@@ -9857,13 +10146,13 @@ const ManageMember = _ref => {
   }, getTitle())), config !== null && config !== void 0 && (_config$manageMember = config.manageMember) !== null && _config$manageMember !== void 0 && _config$manageMember.component ? config.manageMember.component(manageMemberProps) : /*#__PURE__*/e__default["default"].createElement(formik$1.Form, {
     ref: formReference,
     formikProps: _objectSpread$3(_objectSpread$3({}, MANAGE_MEMBERS_FORMIK_PROPS), {}, {
-      initialValues: renderInitialValues(selectedMember, filteredRoles),
-      onSubmit: handleAddMember,
+      initialValues: renderInitialValues(selectedMember, filteredRoles, globalRoles),
+      onSubmit: handleOnSubmit,
       validateOnBlur: hasSubmitted,
       validateOnChange: hasSubmitted
     })
   }, _ref3 => {
-    var _manageMemberComponen, _manageMemberComponen2;
+    var _manageMemberComponen2, _manageMemberComponen3;
     let values = _ref3.values,
       dirty = _ref3.dirty;
     const emails = values.emails,
@@ -9871,29 +10160,22 @@ const ManageMember = _ref => {
     return /*#__PURE__*/e__default["default"].createElement(e__default["default"].Fragment, null, /*#__PURE__*/e__default["default"].createElement(ScrollToErrorField, {
       formRef: formReference
     }), /*#__PURE__*/e__default["default"].createElement(Component.Body, _extends({}, manageMemberComponentConfig.bodyProps, {
-      className: ie__default["default"](["ntm-members-form__body", (_manageMemberComponen = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen === void 0 ? void 0 : _manageMemberComponen.className])
-    }), /*#__PURE__*/e__default["default"].createElement(MultipleEmailInput, {
-      emails: emails,
-      innerRef: emailInputReference,
-      selectedMember: selectedMember
-    }), /*#__PURE__*/e__default["default"].createElement(RolesRadioGroup, {
-      role: role,
-      roles: filteredRoles
-    })), /*#__PURE__*/e__default["default"].createElement(Component.Footer, _extends({}, manageMemberComponentConfig.footerProps, {
-      className: ie__default["default"](["ntm-members-form__footer", (_manageMemberComponen2 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className])
+      className: ie__default["default"](["ntm-members-form__body", (_manageMemberComponen2 = manageMemberComponentConfig.bodyProps) === null || _manageMemberComponen2 === void 0 ? void 0 : _manageMemberComponen2.className])
+    }), renderFormPage(currentPage, emails, role)), /*#__PURE__*/e__default["default"].createElement(Component.Footer, _extends({}, manageMemberComponentConfig.footerProps, {
+      className: ie__default["default"](["ntm-members-form__footer", (_manageMemberComponen3 = manageMemberComponentConfig.footerProps) === null || _manageMemberComponen3 === void 0 ? void 0 : _manageMemberComponen3.className])
     }), /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
-      "data-cy": "ntm-manage-member-submit-button",
       disabled: !dirty || isSubmitting,
-      label: instance.t("buttons.saveChanges"),
       loading: isSubmitting,
-      onClick: () => setHasSubmitted(true),
-      style: "primary",
-      type: "submit"
+      style: isLastPage ? "primary" : "secondary",
+      type: "submit",
+      "data-cy": isLastPage ? "ntm-manage-member-submit-button" : "ntm-manage-member-continue-button",
+      label: isLastPage ? instance.t("buttons.saveChanges") : instance.t("buttons.continue"),
+      onClick: () => setHasSubmitted(true)
     }), /*#__PURE__*/e__default["default"].createElement(neetoui.Button, {
       "data-cy": "ntm-manage-member-cancel-button",
       label: instance.t("buttons.cancel"),
-      onClick: handleClose,
-      style: "text"
+      style: "text",
+      onClick: handleClose
     })));
   }));
 };
@@ -10277,7 +10559,7 @@ const VALIDATION_SCHEMA = {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n  --ntm-roles-table-cell-height: 68px;\n  --ntm-roles-sidebar-width: 396px;\n  --ntm-roles-table-header-height: 72px;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}\n\n.ntm-empty-state {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-form__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-form__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-form__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-form__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n.ntm-members-radio-group__label {\n  padding-right: 4px;\n}\n.ntm-members-radio-group__icon {\n  cursor: pointer;\n}\n\n.ntm-members-form-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-form-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-form-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-form-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));\n  display: flex;\n  padding: 0 1.5rem;\n}\n\n.ntm-roles-table__sidebar {\n  width: var(--ntm-roles-sidebar-width);\n  min-width: var(--ntm-roles-sidebar-width);\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n  border-left: thin solid rgb(var(--neeto-ui-gray-300));\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__search {\n  padding: 20px 24px;\n  height: var(--ntm-roles-table-header-height);\n}\n\n.ntm-roles-table-sidebar__list {\n  height: calc(\n    100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(\n        --ntm-roles-table-header-height\n      ) - var(--ntm-roles-table-default-scroll)\n  );\n  overflow-y: auto;\n}\n\n.ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 24px;\n  min-height: var(--ntm-roles-table-cell-height);\n}\n.ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 24px;\n}\n.ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__columns {\n  width: calc(\n    100vw - var(--neeto-ui-sidebar-width) - var(--ntm-roles-sidebar-width) - 24px\n  );\n  overflow: hidden;\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  height: var(--ntm-roles-table-cell-height);\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n\n.ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n\n.ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__header .ntm-roles-table__cell {\n  height: var(--ntm-roles-table-header-height);\n  padding-left: 24px;\n}\n\n.ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n\n.ntm-roles-table-header__dropdown {\n  margin: 3px;\n  flex-shrink: 0;\n}\n\n.ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n    100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(\n        --ntm-roles-table-header-height\n      ) - var(--ntm-roles-table-default-scroll)\n  );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem 0;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  align-items: center;\n  border-radius: var(--neeto-ui-rounded);\n  border-width: 1px;\n  border-color: rgb(var(--neeto-ui-gray-300));\n  cursor: pointer;\n  display: flex;\n  gap: 0.75rem;\n  padding: 1rem 0.75rem;\n}\n.ntm-roles-permission__card--description {\n  flex-grow: 1;\n}\n.ntm-roles-permission__card--checkbox {\n  padding: 0 0.5rem;\n}\n\n.ntm-roles-help-url-wrapper {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 0;\n}";
+var css = ":root {\n  --ntm-roles-table-default-scroll: 15px;\n  --ntm-roles-table-cell-height: 68px;\n  --ntm-roles-sidebar-width: 396px;\n  --ntm-roles-table-header-height: 72px;\n}\n\n.ntm-scrollbar__inner {\n  width: 100%;\n  height: 200px;\n}\n.ntm-scrollbar__outer {\n  position: \"absolute\";\n  top: 0px;\n  left: 0px;\n  width: 200px;\n  height: 150px;\n  overflow: \"hidden\";\n  visibility: \"hidden\";\n}\n\ntd.ant-table-column-sort {\n  background: transparent;\n}\n\n.ntm-empty-state {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ntm-members {\n  overflow: auto;\n  width: 100%;\n}\n.ntm-members-wrapper {\n  display: flex;\n}\n.ntm-members-page-loader {\n  width: 100%;\n  height: 100vh;\n}\n.ntm-members__table-wrapper {\n  height: calc(100vh - 205px);\n  width: 100%;\n}\n.ntm-members-table__column {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.ntm-members-form__header {\n  margin-bottom: 0.5rem;\n}\n.ntm-members-form__body {\n  width: 100%;\n  padding-bottom: 1rem;\n}\n.ntm-members-form__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-members-form__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-manage-members__header {\n  display: flex;\n  align-items: start;\n}\n.ntm-manage-members__header > * + * {\n  margin-left: 0.5rem;\n}\n\n.ntm-manage-members__app-roles {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: 0.5rem 0;\n}\n\n.ntm-manage-members-app-roles__select-wrapper {\n  width: 50%;\n  max-width: 250px;\n}\n\n.ntm-manage-members-effective-app-roles {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.25rem 0;\n}\n\n.ntm-manage-members-effective-app-roles__role-name {\n  width: 67%;\n  max-width: 300px;\n}\n\n.ntm-members-radio-group {\n  width: 100%;\n}\n.ntm-members-radio-group .neeto-ui-radio__container--stacked {\n  width: 100%;\n}\n.ntm-members-radio-group__label {\n  padding-right: 4px;\n}\n.ntm-members-radio-group__icon {\n  cursor: pointer;\n}\n\n.ntm-members-form-radio-item__wrapper {\n  width: 100%;\n  cursor: pointer;\n  padding: 8px 0px !important;\n}\n.ntm-members-form-radio-item__wrapper:first-child {\n  padding-top: 0px !important;\n}\n.ntm-members-form-radio-item__label {\n  margin-bottom: 0 !important;\n}\n.ntm-members-form-radio-item__description {\n  color: rgb(var(--neeto-ui-gray-700));\n}\n\n.ntm-roles-table__wrapper {\n  width: 100%;\n  height: calc(100vh - var(--neeto-ui-main-header-with-breadcrumbs-height));\n  display: flex;\n  padding: 0 1.5rem;\n}\n\n.ntm-roles-table__sidebar {\n  width: var(--ntm-roles-sidebar-width);\n  min-width: var(--ntm-roles-sidebar-width);\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n  border-left: thin solid rgb(var(--neeto-ui-gray-300));\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__search {\n  padding: 20px 24px;\n  height: var(--ntm-roles-table-header-height);\n}\n\n.ntm-roles-table-sidebar__list {\n  height: calc(\n    100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(\n        --ntm-roles-table-header-height\n      ) - var(--ntm-roles-table-default-scroll)\n  );\n  overflow-y: auto;\n}\n\n.ntm-roles-table-sidebar__list-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 24px;\n  min-height: var(--ntm-roles-table-cell-height);\n}\n.ntm-roles-table-sidebar__list-item.ntm-roles-table-sidebar__list-item--highlighted {\n  background-color: rgb(var(--neeto-ui-primary-100));\n  padding: 12px 24px;\n}\n.ntm-roles-table-sidebar__list-item:not(.ntm-roles-table-sidebar__list-item--highlighted) {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__columns {\n  width: calc(\n    100vw - var(--neeto-ui-sidebar-width) - var(--ntm-roles-sidebar-width) - 24px\n  );\n  overflow: hidden;\n  border-top: thin solid rgb(var(--neeto-ui-gray-300));\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__cell {\n  width: 100%;\n  min-width: 200px;\n  height: var(--ntm-roles-table-cell-height);\n  padding: 12px 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-right: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-cell__checkbox-wrapper {\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  margin: auto;\n  z-index: 10;\n}\n\n.ntm-roles-table-cell__checkbox {\n  z-index: 10;\n}\n\n.ntm-roles-table__header {\n  display: flex;\n  align-items: center;\n  overflow-x: auto;\n}\n.ntm-roles-table__header .ntm-roles-table__cell {\n  height: var(--ntm-roles-table-header-height);\n  padding-left: 24px;\n}\n\n.ntm-roles-table-header-cell__container {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  gap: 1rem;\n  overflow: hidden;\n}\n\n.ntm-roles-table-header__dropdown {\n  margin: 3px;\n  flex-shrink: 0;\n}\n\n.ntm-roles-table-header__role-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ntm-roles-table__rows {\n  width: 100%;\n  height: calc(\n    100vh - var(--neeto-ui-main-header-with-breadcrumbs-height) - var(\n        --ntm-roles-table-header-height\n      ) - var(--ntm-roles-table-default-scroll)\n  );\n  overflow-y: auto;\n  scrollbar-width: none;\n}\n.ntm-roles-table__rows::-webkit-scrollbar {\n  width: 0px;\n  height: 0px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-thumb {\n  background: rgb(var(--neeto-ui-gray-300));\n  border-radius: 50px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-thumb:hover {\n  border-radius: 50px;\n}\n.ntm-roles-table__rows::-webkit-scrollbar-track {\n  background: rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table__row {\n  display: flex;\n  align-items: center;\n}\n.ntm-roles-table__row .ntm-roles-table__cell {\n  overflow: hidden;\n  position: relative;\n}\n.ntm-roles-table__row .ntm-roles-table__cell p {\n  opacity: 0;\n  width: 340px;\n  min-width: 340px;\n}\n.ntm-roles-table__row.ntm-roles-table__row--highlighted .ntm-roles-table__cell {\n  background-color: rgb(var(--neeto-ui-primary-100));\n}\n.ntm-roles-table__row:not(.ntm-roles-table__row--highlighted) .ntm-roles-table__cell {\n  border-bottom: thin solid rgb(var(--neeto-ui-gray-300));\n}\n\n.ntm-roles-table-sidebar__drop-down-button {\n  color: rgb(var(--neeto-ui-gray-600));\n  cursor: pointer;\n}\n\n.ntm-roles-modal__body > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-modal__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-pane__body {\n  width: 100%;\n  margin-bottom: 1.5rem;\n}\n.ntm-roles-pane__body-wrapper > * + * {\n  margin-top: 1rem;\n}\n.ntm-roles-pane__body > * + * {\n  margin-top: 1.5rem;\n}\n.ntm-roles-pane__footer {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.ntm-roles-permission > * + * {\n  margin: 0.5rem 0;\n}\n.ntm-roles-permission__heading {\n  color: rgb(var(--neeto-ui-gray-500));\n  text-transform: uppercase;\n}\n.ntm-roles-permission__card {\n  background-color: rgb(var(--neeto-ui-white));\n  align-items: center;\n  border-radius: var(--neeto-ui-rounded);\n  border-width: 1px;\n  border-color: rgb(var(--neeto-ui-gray-300));\n  cursor: pointer;\n  display: flex;\n  gap: 0.75rem;\n  padding: 1rem 0.75rem;\n}\n.ntm-roles-permission__card--description {\n  flex-grow: 1;\n}\n.ntm-roles-permission__card--checkbox {\n  padding: 0 0.5rem;\n}\n\n.ntm-roles-help-url-wrapper {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 0;\n}";
 n(css,{});
 
 exports.ManageMember = ManageMember;