@itilite/iui-user-management 1.4.60 → 1.4.61

package/dist/index.modern.js

@@ -1,15 +1,15 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUIIconButton, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUISearch, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
-import React, { useState, useEffect, useRef, Fragment as Fragment$1 } from 'react';
+import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUISearch, IUICircularProgress, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUICard, IUIBackdrop, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIIconButton, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
+import React, { useState, useEffect, memo, useRef, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import axios from 'axios';
 import AddIcon$1 from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteIcon$1 from '@material-ui/icons/Delete';
 import { useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import moment from 'moment';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useParams, useHistory, useLocation } from 'react-router-dom';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Switch from '@material-ui/core/Switch';
@@ -18,51 +18,53 @@ import Button from '@material-ui/core/Button';
 import { Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, Box } from '@material-ui/core';
 import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
     return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
       };
     };
   }
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (e.includes(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 var _Pact = /*#__PURE__*/function () {
   function _Pact() {}
@@ -170,6 +172,17 @@ function _catch(body, recover) {
   }
   return result;
 }
+function _finallyRethrows(body, finalizer) {
+  try {
+    var result = body();
+  } catch (e) {
+    return finalizer(true, e);
+  }
+  if (result && result.then) {
+    return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+  }
+  return finalizer(false, result);
+}
 
 var styles = {"UUIUserManagementAddEdit":"_3n-WG","pageHeader":"_3qWcA","buttonWrapper":"_1IP9P","scrolled":"_m8f96","headingButtonWrapper":"_w9z7b","headingButtonWrapperProfile":"_12Wd9","hintText":"_ySdbZ","heading":"_2Y1Aw","headingLarge":"_2K1NF","headingMedium":"_RUuAz","headingSmall":"_23Dye","additionalInfoContainer":"_1Suhw","additionalInfoTitle":"_56iJF","titleContainer":"_H5nfl","expandIconAlign":"_3F4i0","detailsContainer":"_2G0LW","formWrapper":"_2fPRc","sectionWrapper":"_37Gqp","margin":"_2Sdl7","minGridWidth":"_2D7iu","firstRowMargin":"_1BozG","firstChildMargin":"_2C3Mb","paddingTop":"_DBPjV","backGrdColorOnHover":"_5oE6H","fieldMargin":"_RCWjq","productContainerGap":"_tuCbi","containerWidth":"_1oWos","productItemBroder":"_T0Hcd","headingPadding":"_2MFfQ","emptyFieldContainer":"_3VWtw","emptyFieldDescription":"_2jC5u","rowGap":"_1NJFY","formTitle":"_GAKk2","formDescription":"_3TZ6Z","themeLink":"_eJ_1B","dashedLine":"_3ZOs1","dividerColor":"_2pxEJ","errorTextCls":"_27eth","backdrop":"_Pm0Au","inputWidth":"_ajB82"};
 
@@ -422,10 +435,10 @@ var userAddEditUrl = {
     return "api/v1/onboarding/user-signup-reject/" + userId + "?action=undo";
   },
   cardsEditUserDetails: function cardsEditUserDetails(userId) {
-    return env.getCardsapiURL() + "/card/authorization/user/" + userId;
+    return env.getCardsapiURL() + "/authorization/user/" + userId;
   },
   cardsAddUsersDetails: function cardsAddUsersDetails() {
-    return env.getCardsapiURL() + "/card/authorization/company/" + IUILocalStorageService.getCompanyId() + "/roles";
+    return env.getCardsapiURL() + "/authorization/company/" + IUILocalStorageService.getCompanyId() + "/roles";
   }
 };
 var userListUrl = {
@@ -873,10 +886,10 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
       if (payload.productAccess.expense) {
         product.expense = payload.expenseRole || null;
       }
-      if (payload.productAccess.cards) {
+      if (payload.productAccess.card) {
         var splitRole = payload.cardsRole.split(":");
         var cardsUsmRole = splitRole[2];
-        product.cards = cardsUsmRole || null;
+        product.card = cardsUsmRole || null;
       }
       return product;
     }(),
@@ -979,14 +992,14 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
   };
   if (!env$1.isProfilePage()) {
     res.fields.product = function () {
-      if (payload.productAccess.travel && payload.productAccess.expense && payload.productAccess.cards) {
-        return 'expense+travel+cards';
+      if (payload.productAccess.travel && payload.productAccess.expense && payload.productAccess.card) {
+        return 'expense+travel+card';
       } else if (payload.productAccess.travel && payload.productAccess.expense) {
         return 'expense+travel';
-      } else if (payload.productAccess.expense && payload.productAccess.cards) {
-        return 'expense+cards';
-      } else if (payload.productAccess.travel && payload.productAccess.cards) {
-        return 'travel+cards';
+      } else if (payload.productAccess.expense && payload.productAccess.card) {
+        return 'expense+card';
+      } else if (payload.productAccess.travel && payload.productAccess.card) {
+        return 'travel+card';
       } else if (payload.productAccess.travel) {
         return 'travel';
       } else {
@@ -1001,10 +1014,10 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
       if (payload.productAccess.expense) {
         roles.expense = payload.expenseRole;
       }
-      if (payload.productAccess.cards) {
+      if (payload.productAccess.card) {
         var splitRole = payload.cardsRole.split(":");
         var cardsUsmRole = splitRole[2];
-        roles.cards = cardsUsmRole;
+        roles.card = cardsUsmRole;
       }
       return roles;
     }();
@@ -2256,7 +2269,7 @@ var CreditCard = function CreditCard(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleCardDelete
-  }, /*#__PURE__*/React.createElement(DeleteIcon, {
+  }, /*#__PURE__*/React.createElement(DeleteIcon$1, {
     width: "10",
     height: "10"
   }))), /*#__PURE__*/React.createElement("div", {
@@ -2327,7 +2340,7 @@ var PaymentCards = function PaymentCards(_ref3) {
       isDefaultCard: !!+card.metadata.default_card,
       pg: paymentDetails.pg
     });
-  }), (!paymentDetails.cards || paymentDetails.cards.length < 6) && paymentDetails.pg.gateway.toLowerCase() === 'stripe' && paymentDetails.pg.save_card_enable === 1 && /*#__PURE__*/React.createElement(AddCard, {
+  }), (!paymentDetails.cards || paymentDetails.cards.length < 10) && paymentDetails.pg.gateway.toLowerCase() === 'stripe' && paymentDetails.pg.save_card_enable === 1 && /*#__PURE__*/React.createElement(AddCard, {
     pg: paymentDetails.pg
   }))))));
 };
@@ -3254,8 +3267,8 @@ var products = [{
   disableText: 'Please get in touch with your administrator to change this value.'
 }, {
   id: 3,
-  label: 'Cards',
-  name: 'cards',
+  label: 'Card',
+  name: 'card',
   type: 'checkbox',
   disableText: 'Please get in touch with your administrator to change this value.'
 }];
@@ -3435,7 +3448,7 @@ var cardsConstants = {
   roles: [{
     id: 1,
     label: 'Card holder',
-    description: 'Can own and use cards that are issued to them',
+    description: 'Can view own cards and transactions.',
     value: '',
     name: '',
     type: 'radio',
@@ -3446,7 +3459,7 @@ var cardsConstants = {
   }, {
     id: 2,
     label: 'Card admin',
-    description: 'Can issue cards to others and can manage all cards and transactions across the company.',
+    description: 'Has full administrative access to the card program. Can issue cards, set card limits, add users, has visibility into all transactions, statements and balances.',
     value: '',
     name: '',
     type: 'radio',
@@ -4472,26 +4485,914 @@ var ExpandLessIcon = function ExpandLessIcon(props) {
   }));
 };
 
-var CrossIcon = function CrossIcon(props) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? '#6B7280' : _props$color;
+var styles$3 = {"loyaltymodal":"_2LnGt","membershipDeleteModal":"_2LdH8","loyaltyList":"_r0C_N","divider":"_3v2HU","selectSearchBox":"_1bAuu","chevronIcon":"_33J5X","selectWrapper":"_AJzhr","membershipList":"_u-SZq","list":"_2GyN2","memberItem":"_2d9GY","membershipDetails":"_194K1","title":"_l3kQ9","subtitle":"_33IR-","saveMembership":"_35aiF","newMembershipIcon":"_2d5UD","loading":"_1quY2","searchInput":"_1oiP4","membershipChainInfo":"_10Fx3","addNewMembership":"_3Y8Dj","savedMembership":"_2cSoW","iconWrapper":"_1Thb8","iconPar":"_O51oP","icon":"_3CdwB","number":"_1eJyq","actions":"_f_N1r"};
+
+var ChevronNext = function ChevronNext(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#9CA3AF' : _ref$color;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
-    width: props.width,
-    height: props.height,
+    width: "8",
+    height: "16",
     fill: "none",
-    viewBox: "0 0 14 14"
+    viewBox: "0 0 8 16"
   }, /*#__PURE__*/React.createElement("path", {
-    fill: color,
-    d: "M.293.292a1 1 0 011.414 0L7 5.585 12.293.292a1 1 0 111.414 1.415L8.414 7l5.293 5.292a1 1 0 01-1.414 1.415L7 8.414l-5.293 5.293a1 1 0 01-1.414-1.415L5.586 7 .293 1.707a1 1 0 010-1.415z"
+    stroke: color,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M2 4l4 4-4 4"
+  }));
+};
+
+var MembershipForm = function MembershipForm(_ref) {
+  var selectedMembershipChain = _ref.selectedMembershipChain,
+    isOtherMembership = _ref.isOtherMembership,
+    membershipName = _ref.membershipName,
+    membershipNumber = _ref.membershipNumber,
+    setMembershipName = _ref.setMembershipName,
+    setMembershipNumber = _ref.setMembershipNumber,
+    type = _ref.type,
+    isEdit = _ref.isEdit;
+  var FallbackIcon = function FallbackIcon() {
+    var url = '';
+    if (type === 'flight') {
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/flightmemfallback.png';
+    } else if (type === 'hotel') {
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/hotelmemfallback.png';
+    } else {
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/carmemfallback.png';
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon
+    }, /*#__PURE__*/React.createElement("img", {
+      src: url
+    }));
+  };
+  var placeholder = 'e.g. SkyMiles';
+  if (type === 'hotel') {
+    placeholder = 'e.g. Best Western';
+  }
+  if (type === 'rental_car') {
+    placeholder = 'e.g. Firefly Car Rental';
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$3.saveMembership
+  }, isOtherMembership ? /*#__PURE__*/React.createElement("div", {
+    className: styles$3.addNewMembership
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.membershipChainInfo
+  }, /*#__PURE__*/React.createElement(FallbackIcon, null), /*#__PURE__*/React.createElement("p", null, isEdit ? 'Edit' : 'Add new', " membership")), /*#__PURE__*/React.createElement(IUILabel, {
+    label: "Membership name",
+    required: true
+  }), /*#__PURE__*/React.createElement(IUISearch, {
+    placeholder: placeholder,
+    value: membershipName,
+    onChangeHandler: function onChangeHandler(e) {
+      var inputValue = e.target.value;
+      if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) <= 50) {
+        setMembershipName(inputValue);
+      }
+    },
+    iconComponent: null,
+    style: {
+      width: '100%',
+      paddingLeft: 0,
+      borderRadius: 6
+    }
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: styles$3.membershipChainInfo
+  }, selectedMembershipChain !== null && selectedMembershipChain !== void 0 && selectedMembershipChain.loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
+    src: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_image_url,
+    alt: selectedMembershipChain.program_name,
+    onError: function onError(e) {
+      e.target.style.display = 'none';
+      var fallbackContainer = e.target.nextElementSibling;
+      if (fallbackContainer) fallbackContainer.style.display = 'block';
+    }
+  }) : /*#__PURE__*/React.createElement(FallbackIcon, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(FallbackIcon, null)), /*#__PURE__*/React.createElement("p", null, isEdit ? 'Edit' : 'Add', ' ', (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_name) || (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name))), /*#__PURE__*/React.createElement(IUILabel, {
+    label: "Membership number",
+    required: true
+  }), /*#__PURE__*/React.createElement(IUISearch, {
+    placeholder: "e.g. ABCD1234",
+    value: membershipNumber,
+    onChangeHandler: function onChangeHandler(e) {
+      var inputValue = e.target.value;
+      if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) <= 50) {
+        setMembershipNumber(inputValue);
+      }
+    },
+    iconComponent: null,
+    style: {
+      width: '100%',
+      paddingLeft: 0,
+      borderRadius: 6
+    }
+  }));
+};
+
+var TravelModeIcon = function TravelModeIcon(_ref) {
+  var type = _ref.type;
+  var FlightIcon = memo(function () {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M3 15.7694L8.3033 21.0727L8.81769 20.5583C9.15248 20.2235 9.26938 19.7283 9.11966 19.2791L8.65685 17.8907L12.5459 14.0016L16.7886 21.0727L17.6745 20.1867C18.2231 19.6382 18.4504 18.8457 18.2759 18.0898L16.435 10.1125L20.0906 6.45695C20.2454 6.30211 20.3775 6.12609 20.4713 5.92822C20.7764 5.28463 21.4051 3.76894 20.8544 3.21824C20.3037 2.66754 18.7881 3.29628 18.1445 3.60138C17.9466 3.69518 17.7706 3.82724 17.6157 3.98208L13.9602 7.63766L5.98289 5.79675C5.22698 5.62231 4.43452 5.84959 3.88596 6.39814L3 7.28411L10.0711 11.5267L6.18198 15.4158L4.79356 14.953C4.34439 14.8033 3.84918 14.9202 3.51439 15.255L3 15.7694Z",
+      stroke: "#EC5D25",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round"
+    }));
+  });
+  var HotelIcon = memo(function () {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M2.75 5C3.16421 5 3.5 5.33579 3.5 5.75V14H11V9C11 7.89543 11.8954 7 13 7H19C20.6569 7 22 8.34315 22 10V18.25C22 18.6642 21.6642 19 21.25 19C20.8358 19 20.5 18.6642 20.5 18.25V15.5H3.5V18.25C3.5 18.6642 3.16421 19 2.75 19C2.33579 19 2 18.6642 2 18.25V5.75C2 5.33579 2.33579 5 2.75 5ZM20.5 14V10C20.5 9.17157 19.8284 8.5 19 8.5H13C12.7239 8.5 12.5 8.72386 12.5 9V14H20.5ZM7.5 9.5C6.94772 9.5 6.5 9.94772 6.5 10.5C6.5 11.0523 6.94772 11.5 7.5 11.5C8.05228 11.5 8.5 11.0523 8.5 10.5C8.5 9.94772 8.05228 9.5 7.5 9.5ZM5 10.5C5 9.11929 6.11929 8 7.5 8C8.88071 8 10 9.11929 10 10.5C10 11.8807 8.88071 13 7.5 13C6.11929 13 5 11.8807 5 10.5Z",
+      fill: "#EC5D25"
+    }));
+  });
+  var CarIcon = memo(function () {
+    return /*#__PURE__*/React.createElement("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M8 14C8 14.5523 7.55228 15 7 15C6.44772 15 6 14.5523 6 14C6 13.4477 6.44772 13 7 13C7.55228 13 8 13.4477 8 14Z",
+      fill: "#EC5D25"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M18 14C18 14.5523 17.5523 15 17 15C16.4477 15 16 14.5523 16 14C16 13.4477 16.4477 13 17 13C17.5523 13 18 13.4477 18 14Z",
+      fill: "#EC5D25"
+    }), /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.69288 5.5C7.46964 5.5 7.27344 5.64799 7.21211 5.86264L6.03001 10H17.97L16.7879 5.86264C16.7266 5.64799 16.5304 5.5 16.3071 5.5H7.69288ZM19.6762 10.5117C20.4737 11.05 21 11.963 21 13V18.75C21 19.4404 20.4404 20 19.75 20C19.0596 20 18.5 19.4404 18.5 18.75V18H5.5V18.75C5.5 19.4404 4.94036 20 4.25 20C3.55964 20 3 19.4404 3 18.75V13C3 11.963 3.52626 11.05 4.32378 10.5117L4.46999 10H3.75C3.33579 10 3 9.66421 3 9.25C3 8.83579 3.33579 8.5 3.75 8.5H4.89856L5.76983 5.45056C6.01514 4.59196 6.79992 4 7.69288 4H16.3071C17.2001 4 17.9849 4.59196 18.2302 5.45056L19.1014 8.5H20.25C20.6642 8.5 21 8.83579 21 9.25C21 9.66421 20.6642 10 20.25 10H19.53L19.6762 10.5117ZM4.5 16.5H19.5V13C19.5 12.4218 19.173 11.9187 18.6904 11.6678C18.4846 11.5608 18.2505 11.5 18 11.5H6C5.7495 11.5 5.51541 11.5608 5.30955 11.6678C4.82695 11.9187 4.5 12.4218 4.5 13V16.5Z",
+      fill: "#EC5D25"
+    }));
+  });
+  if (type === 'flight') return /*#__PURE__*/React.createElement(FlightIcon, null);
+  if (type === 'hotel') return /*#__PURE__*/React.createElement(HotelIcon, null);
+  if (type === 'rental_car') return /*#__PURE__*/React.createElement(CarIcon, null);
+  return null;
+};
+
+var Loader = function Loader() {
+  return /*#__PURE__*/React.createElement(IUICircularProgress, {
+    color: "inherit",
+    size: 25,
+    style: {
+      color: '#EC5D25'
+    }
+  });
+};
+var LoyaltyPrograms = function LoyaltyPrograms(_ref) {
+  var items = _ref.items,
+    handleSelect = _ref.handleSelect,
+    loading = _ref.loading,
+    setIsOtherMembership = _ref.setIsOtherMembership,
+    searchQuery = _ref.searchQuery,
+    fetchItems = _ref.fetchItems,
+    type = _ref.type,
+    _ref$nextPageAvailabl = _ref.nextPageAvailable,
+    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl,
+    page = _ref.page;
+  var observerRef = useRef(null);
+  var delayTimeoutRef = useRef(null);
+  useEffect(function () {
+    if (!nextPageAvailable || loading) return;
+    var observer = new IntersectionObserver(function (entries) {
+      if (entries[0].isIntersecting) {
+        if (nextPageAvailable) fetchItems(searchQuery);
+      }
+    }, {
+      threshold: 0.5
+    });
+    var target = observerRef.current;
+    if (target) {
+      observer.observe(target);
+    }
+    return function () {
+      if (target) {
+        observer.unobserve(target);
+      }
+      if (delayTimeoutRef.current) {
+        clearTimeout(delayTimeoutRef.current);
+      }
+    };
+  }, [loading, nextPageAvailable, searchQuery, fetchItems]);
+  var FallbackIcon = function FallbackIcon() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon
+    }, /*#__PURE__*/React.createElement(TravelModeIcon, {
+      type: type
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$3.list
+  }, page === 1 && loading ? null : items.map(function (item) {
+    var _item$associated_name, _item$associated_name2;
+    var associatedList = (item === null || item === void 0 ? void 0 : item.program_name) === 'Other' ? 'Add new membership program' : type === 'rental_car' ? item === null || item === void 0 ? void 0 : item.program_name : item !== null && item !== void 0 && (_item$associated_name = item.associated_names) !== null && _item$associated_name !== void 0 && _item$associated_name.length ? item === null || item === void 0 ? void 0 : (_item$associated_name2 = item.associated_names) === null || _item$associated_name2 === void 0 ? void 0 : _item$associated_name2.join(', ') : '';
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        handleSelect(item);
+        if (item.program_name === 'Other') {
+          setIsOtherMembership(true);
+        }
+      },
+      key: item.id,
+      className: styles$3.memberItem
+    }, item !== null && item !== void 0 && item.loyalty_program_image_url ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: "url(" + (item === null || item === void 0 ? void 0 : item.loyalty_program_image_url) + ")",
+        backgroundSize: 600,
+        borderRadius: 6,
+        border: '1px solid #F1F3F5',
+        backgroundPosition: 'top',
+        height: 40,
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: item === null || item === void 0 ? void 0 : item.loyalty_program_image_url,
+      alt: item.title,
+      onError: function onError(e) {
+        e.target.style.display = 'none';
+        var fallbackContainer = e.target.nextElementSibling;
+        if (fallbackContainer) fallbackContainer.style.display = 'block';
+      }
+    })) : /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon
+    }, /*#__PURE__*/React.createElement(FallbackIcon, null)), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon,
+      style: {
+        display: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(FallbackIcon, null)), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.membershipDetails
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$3.title
+    }, item === null || item === void 0 ? void 0 : item.program_name), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.subtitle,
+      title: associatedList
+    }, associatedList)));
+  }), loading && /*#__PURE__*/React.createElement("div", {
+    className: styles$3.loading
+  }, /*#__PURE__*/React.createElement(Loader, null)), !loading && nextPageAvailable && /*#__PURE__*/React.createElement("div", {
+    ref: observerRef,
+    className: styles$3.loading
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Loader, null))));
+};
+
+var EditIcon = function EditIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_13010_74651)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.7197 1.72376C11.7029 0.740515 13.2971 0.740516 14.2803 1.72377C15.2636 2.70701 15.2636 4.30118 14.2803 5.28443L5.14645 14.4183C4.77137 14.7934 4.26267 15.0041 3.73223 15.0041H2C1.44772 15.0041 1 14.5564 1 14.0041V12.2719C1 11.7414 1.21071 11.2327 1.58579 10.8576L10.7197 1.72376ZM13.2197 2.78443C12.8222 2.38696 12.1778 2.38696 11.7803 2.78443L11.0607 3.5041L12.5 4.94344L13.2197 4.22376C13.6171 3.8263 13.6171 3.18189 13.2197 2.78443ZM11.4393 6.0041L10 4.56476L2.64645 11.9183C2.55268 12.0121 2.5 12.1393 2.5 12.2719V13.5041H3.73223C3.86484 13.5041 3.99202 13.4514 4.08579 13.3576L11.4393 6.0041Z",
+    fill: "#EC5D25"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_13010_74651"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white",
+    transform: "translate(0 0.00390625)"
+  }))));
+};
+
+var DeleteIcon = function DeleteIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.33333 2.33716C7.14924 2.33716 7 2.4864 7 2.67049V3.33716H9V2.67049C9 2.4864 8.85076 2.33716 8.66667 2.33716H7.33333ZM10 3.33716V2.67049C10 1.93411 9.40305 1.33716 8.66667 1.33716H7.33333C6.59695 1.33716 6 1.93411 6 2.67049V3.33716H2.5C2.22386 3.33716 2 3.56102 2 3.83716C2 4.1133 2.22386 4.33716 2.5 4.33716H3.03122L3.57716 12.7993C3.64506 13.8516 4.51843 14.6705 5.57301 14.6705H10.427C11.4816 14.6705 12.3549 13.8516 12.4228 12.7993L12.9688 4.33716H13.5C13.7761 4.33716 14 4.1133 14 3.83716C14 3.56102 13.7761 3.33716 13.5 3.33716H10ZM11.9667 4.33716H4.0333L4.57509 12.7349C4.60903 13.2611 5.04572 13.6705 5.57301 13.6705H10.427C10.9543 13.6705 11.391 13.2611 11.4249 12.7349L11.9667 4.33716ZM6.5 6.00383C6.77614 6.00383 7 6.22768 7 6.50383V11.5038C7 11.78 6.77614 12.0038 6.5 12.0038C6.22386 12.0038 6 11.78 6 11.5038V6.50383C6 6.22768 6.22386 6.00383 6.5 6.00383ZM9.5 6.00383C9.77614 6.00383 10 6.22768 10 6.50383V11.5038C10 11.78 9.77614 12.0038 9.5 12.0038C9.22386 12.0038 9 11.78 9 11.5038V6.50383C9 6.22768 9.22386 6.00383 9.5 6.00383Z",
+    fill: "#CF2231"
+  }));
+};
+
+var _excluded = ["ind"];
+var IUIToastMessageService$4 = services.IUIToastMessageService;
+var api$6 = configs.api;
+var SavedMemberships = function SavedMemberships(_ref) {
+  var _ref$list = _ref.list,
+    list = _ref$list === void 0 ? [] : _ref$list,
+    type = _ref.type,
+    _ref$updateList = _ref.updateList,
+    updateList = _ref$updateList === void 0 ? function () {} : _ref$updateList,
+    _ref$handleEdit = _ref.handleEdit,
+    handleEdit = _ref$handleEdit === void 0 ? function () {} : _ref$handleEdit;
+  var _useState = useState(false),
+    open = _useState[0],
+    setOpen = _useState[1];
+  var _useState2 = useState(false),
+    isDeleting = _useState2[0],
+    setIsDeleting = _useState2[1];
+  var _useState3 = useState(null),
+    deleteItemData = _useState3[0],
+    setDeleteItemData = _useState3[1];
+  var _useSelector = useSelector(function (state) {
+      return state.common;
+    }),
+    userID = _useSelector.id;
+  var handleClose = function handleClose() {
+    setOpen(false);
+    setDeleteItemData(null);
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var url = "/api/v1/user-management/users/" + userID + "/membership";
+      var index = deleteItemData.ind,
+        rest = _objectWithoutPropertiesLoose(deleteItemData, _excluded);
+      var payload = _extends({}, rest, {
+        user: userID
+      });
+      setIsDeleting(true);
+      var _temp = _catch(function () {
+        return Promise.resolve(api$6["delete"](url, {
+          data: payload
+        })).then(function (response) {
+          var _response$data;
+          if (response !== null && response !== void 0 && (_response$data = response.data) !== null && _response$data !== void 0 && _response$data.status) {
+            updateList(type, index);
+            setOpen(false);
+            IUIToastMessageService$4.notify("Membership deleted.");
+          } else {
+            IUIToastMessageService$4.warningNotify('Something went wrong!!');
+          }
+          setIsDeleting(false);
+        });
+      }, function (error) {
+        console.error('Error occurred while deleting membership:', error);
+        IUIToastMessageService$4.errorNotify('Failed to delete membership. Please try again.');
+        setIsDeleting(false);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleDelete = function handleDelete(mem) {
+    setOpen(true);
+    setDeleteItemData(mem);
+  };
+  var onEdit = function onEdit(mem, index, isOther) {
+    handleEdit(mem, index, isOther);
+  };
+  var FallbackIcon = function FallbackIcon(_ref2) {
+    var type = _ref2.type;
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon
+    }, /*#__PURE__*/React.createElement(TravelModeIcon, {
+      type: type
+    }));
+  };
+  var _ref3 = deleteItemData || {},
+    _ref3$name = _ref3.name,
+    name = _ref3$name === void 0 ? '' : _ref3$name,
+    _ref3$program_name = _ref3.program_name,
+    program_name = _ref3$program_name === void 0 ? '' : _ref3$program_name,
+    _ref3$loyalty_program = _ref3.loyalty_program_name,
+    loyalty_program_name = _ref3$loyalty_program === void 0 ? '' : _ref3$loyalty_program;
+  var deleteMembershipName = loyalty_program_name === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IUIModal, {
+    isOpen: open,
+    closeHandler: handleClose,
+    cancelLabel: "Cancel",
+    submitLabel: isDeleting ? 'Deleting...' : 'Delete',
+    submitHandler: handleSubmit,
+    modalBodyStyle: {
+      padding: '0px 24px',
+      minHeight: 50,
+      borderBottom: '1px solid #E5E7EB'
+    },
+    isDisabledSubmitBtn: isDeleting,
+    headerText: "Delete " + deleteMembershipName,
+    width: "640px",
+    modalClass: styles$3.membershipDeleteModal
+  }, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginTop: 0,
+      color: '#6B7280'
+    }
+  }, "Are you sure you want to delete ", deleteMembershipName, "? This change is not reversible.")), list.map(function (mem, ind) {
+    var _ref4 = mem || {},
+      _ref4$name = _ref4.name,
+      name = _ref4$name === void 0 ? '' : _ref4$name,
+      _ref4$number = _ref4.number,
+      number = _ref4$number === void 0 ? '' : _ref4$number,
+      _ref4$program_name = _ref4.program_name,
+      program_name = _ref4$program_name === void 0 ? '' : _ref4$program_name,
+      _ref4$loyalty_program = _ref4.loyalty_program_image_url,
+      loyalty_program_image_url = _ref4$loyalty_program === void 0 ? null : _ref4$loyalty_program,
+      _ref4$loyalty_program2 = _ref4.loyalty_program_name,
+      loyalty_program_name = _ref4$loyalty_program2 === void 0 ? '' : _ref4$loyalty_program2;
+    var isOther = (loyalty_program_name || program_name) === 'Other';
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$3.savedMembership,
+      key: ind
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$3.iconWrapper
+    }, loyalty_program_image_url ? /*#__PURE__*/React.createElement("div", {
+      className: styles$3.iconPar,
+      style: {
+        background: "url(" + loyalty_program_image_url + ")",
+        backgroundSize: 600,
+        borderRadius: 6,
+        border: '1px solid #F1F3F5',
+        backgroundPosition: 'top'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: loyalty_program_image_url,
+      alt: name,
+      className: styles$3.icon,
+      onError: function onError(e) {
+        e.target.style.display = 'none';
+        var fallbackContainer = e.target.nextElementSibling;
+        if (fallbackContainer) fallbackContainer.style.display = 'block';
+      }
+    })) : /*#__PURE__*/React.createElement(FallbackIcon, {
+      type: type
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon,
+      style: {
+        display: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(FallbackIcon, {
+      type: type
+    })), /*#__PURE__*/React.createElement("p", null, (loyalty_program_name || program_name) === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name)), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.number
+    }, number), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.actions
+    }, /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        onEdit(mem, ind, isOther);
+      },
+      style: {
+        marginTop: 1
+      }
+    }, /*#__PURE__*/React.createElement(EditIcon, {
+      width: "14",
+      height: "14",
+      color: "#EC5D25"
+    })), /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        handleDelete(_extends({}, mem, {
+          ind: ind
+        }));
+      },
+      style: {
+        marginLeft: 10
+      }
+    }, /*#__PURE__*/React.createElement(DeleteIcon, null))));
   }));
 };
 
+var AddMembershipButton = memo(function (_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? '' : _ref$type,
+    _ref$setModalState = _ref.setModalState,
+    setModalState = _ref$setModalState === void 0 ? function () {} : _ref$setModalState,
+    modalState = _ref.modalState,
+    _ref$list = _ref.list,
+    list = _ref$list === void 0 ? [] : _ref$list,
+    _ref$updateList = _ref.updateList,
+    updateList = _ref$updateList === void 0 ? function () {} : _ref$updateList,
+    _ref$handleEdit = _ref.handleEdit,
+    handleEdit = _ref$handleEdit === void 0 ? function () {} : _ref$handleEdit;
+  var handleAddMembership = function handleAddMembership(type) {
+    var currentModalState = _extends({}, modalState);
+    currentModalState.open = true;
+    if (type === 'flight') {
+      currentModalState.title = 'Add airline membership';
+      currentModalState.subtitle = 'Earn points from your favorite airline by booking on ITILITE.';
+    }
+    if (type === 'hotel') {
+      currentModalState.title = 'Add hotel membership';
+      currentModalState.subtitle = 'Earn points from your favorite hotels by booking on ITILITE.';
+    }
+    if (type === 'rental_car') {
+      currentModalState.title = 'Add rental car membership';
+      currentModalState.subtitle = 'Earn points from your favorite rental car agency by booking on ITILITE.';
+    }
+    currentModalState.type = type;
+    setModalState(currentModalState);
+  };
+  var label = 'Airline';
+  if (type === 'hotel') {
+    label = 'Hotel';
+  }
+  if (type === 'rental_car') {
+    label = 'Rental car';
+  }
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IUILabel, {
+    label: label,
+    headerType: true
+  }), /*#__PURE__*/React.createElement(SavedMemberships, {
+    list: list,
+    type: type,
+    updateList: updateList,
+    handleEdit: handleEdit
+  }), /*#__PURE__*/React.createElement(IUIButton, {
+    buttonText: "Add membership",
+    type: "text",
+    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
+      width: "10",
+      height: "10",
+      color: "#EC5D25"
+    }),
+    onClick: function onClick() {
+      handleAddMembership(type);
+    }
+  }));
+});
+
+var IUIToastMessageService$5 = services.IUIToastMessageService;
+var api$7 = configs.api;
+var Membership = function Membership(_ref) {
+  var _clsx;
+  var _ref$membershipInfoIn = _ref.membershipInfoInput,
+    membershipInfoInput = _ref$membershipInfoIn === void 0 ? [] : _ref$membershipInfoIn,
+    _ref$setMembershipInf = _ref.setMembershipInfoInput,
+    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf,
+    _ref$isProfile = _ref.isProfile,
+    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
+  var _useParams = useParams(),
+    editUserId = _useParams.userId;
+  var _useSelector = useSelector(function (state) {
+      return state.common;
+    }),
+    id = _useSelector.id;
+  var userID = isProfile ? id : editUserId;
+  var _useState = useState(membershipInfoInput),
+    savedMemberships = _useState[0],
+    setSavedMemberships = _useState[1];
+  var groupedMembershipData = savedMemberships.reduce(function (acc, item) {
+    var _acc$item$membership_;
+    acc[item === null || item === void 0 ? void 0 : item.membership_type] = (acc === null || acc === void 0 ? void 0 : acc[item === null || item === void 0 ? void 0 : item.membership_type]) || [];
+    acc === null || acc === void 0 ? void 0 : (_acc$item$membership_ = acc[item === null || item === void 0 ? void 0 : item.membership_type]) === null || _acc$item$membership_ === void 0 ? void 0 : _acc$item$membership_.push(item);
+    return acc;
+  }, {
+    flight: [],
+    hotel: [],
+    rental_car: []
+  });
+  var _useState2 = useState({
+      open: false,
+      title: 'Add airline membership'
+    }),
+    modalState = _useState2[0],
+    setModalState = _useState2[1];
+  var _useState3 = useState(false),
+    isUpdating = _useState3[0],
+    setIsUpdating = _useState3[1];
+  var _useState4 = useState(null),
+    editIndex = _useState4[0],
+    setEditIndex = _useState4[1];
+  var _modalState$open = modalState.open,
+    open = _modalState$open === void 0 ? false : _modalState$open,
+    _modalState$title = modalState.title,
+    title = _modalState$title === void 0 ? '' : _modalState$title,
+    _modalState$subtitle = modalState.subtitle,
+    subtitle = _modalState$subtitle === void 0 ? '' : _modalState$subtitle,
+    _modalState$type = modalState.type,
+    type = _modalState$type === void 0 ? '' : _modalState$type;
+  var _useState5 = useState(false),
+    isInputFocused = _useState5[0],
+    setIsInputFocused = _useState5[1];
+  var _useState6 = useState(''),
+    searchQuery = _useState6[0],
+    setSearchQuery = _useState6[1];
+  var _useState7 = useState(''),
+    debouncedQuery = _useState7[0],
+    setDebouncedQuery = _useState7[1];
+  var _useState8 = useState([]),
+    items = _useState8[0],
+    setItems = _useState8[1];
+  var _useState9 = useState(1),
+    page = _useState9[0],
+    setPage = _useState9[1];
+  var _useState10 = useState(false),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var _useState11 = useState(false),
+    isOtherMembership = _useState11[0],
+    setIsOtherMembership = _useState11[1];
+  var _useState12 = useState(null),
+    selectedMembershipChain = _useState12[0],
+    setSelectedMembershipChain = _useState12[1];
+  var _useState13 = useState(''),
+    membershipName = _useState13[0],
+    setMembershipName = _useState13[1];
+  var _useState14 = useState(''),
+    membershipNumber = _useState14[0],
+    setMembershipNumber = _useState14[1];
+  var wrapperRef = useRef(null);
+  var nextRef = useRef(null);
+  var fetchItems = function fetchItems(query, reset) {
+    if (query === void 0) {
+      query = '';
+    }
+    if (reset === void 0) {
+      reset = false;
+    }
+    try {
+      nextRef.current = null;
+      var pageNo = reset ? 1 : page + 1;
+      setLoading(true);
+      var url = 'api/v1/user-management/loyalty-program/' + ("?page=" + pageNo + "&travel_type=" + type);
+      if (query) {
+        url += "&search_term=" + query.toLowerCase();
+      }
+      if (reset) setPage(1);else setPage(function (prevPage) {
+        return prevPage + 1;
+      });
+      var _temp = _catch(function () {
+        return Promise.resolve(api$7.get(url).then(function (res) {
+          return res;
+        })).then(function (response) {
+          var _response$data, _response$data2;
+          var list = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.results;
+          nextRef.current = response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.next;
+          setItems(function (prevItems) {
+            return reset ? list : [].concat(prevItems, list);
+          });
+          setLoading(false);
+        });
+      }, function (error) {
+        nextRef.current = null;
+        IUIToastMessageService$5.warningNotify('Something went wrong');
+        setIsInputFocused(false);
+        setLoading(false);
+        console.error('Error fetching data:', error);
+      });
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleSelect = function handleSelect(item) {
+    setSelectedMembershipChain(item);
+    setIsInputFocused(false);
+  };
+  var handleClickOutside = function handleClickOutside(event) {
+    if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+      setIsInputFocused(false);
+    }
+  };
+  useEffect(function () {
+    setSavedMemberships(membershipInfoInput);
+  }, [membershipInfoInput]);
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  useEffect(function () {
+    var handler = setTimeout(function () {
+      setDebouncedQuery(searchQuery);
+    }, 750);
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [searchQuery]);
+  useEffect(function () {
+    if (isInputFocused) fetchItems(debouncedQuery, true);else {
+      setSearchQuery('');
+      setItems([]);
+    }
+  }, [isInputFocused, debouncedQuery]);
+  useEffect(function () {
+    if (!(modalState !== null && modalState !== void 0 && modalState.open)) {
+      setIsInputFocused(false);
+    }
+  }, [modalState]);
+  var handleClose = function handleClose() {
+    setIsUpdating(false);
+    setIsOtherMembership(false);
+    setMembershipName('');
+    setMembershipNumber('');
+    setModalState(_extends({}, modalState, {
+      open: false
+    }));
+    setSelectedMembershipChain(null);
+    setIsInputFocused(false);
+    setItems([]);
+    setEditIndex(null);
+    setSearchQuery('');
+  };
+  var updateList = function updateList(type, index, item) {
+    if (index === void 0) {
+      index = null;
+    }
+    if (item === void 0) {
+      item = null;
+    }
+    if (!groupedMembershipData[type]) {
+      console.error("Invalid type: " + type);
+      return;
+    }
+    if (item) {
+      if (index) {
+        groupedMembershipData[type][index] = _extends({}, groupedMembershipData[type][index], {
+          number: item.number,
+          name: item.name
+        });
+      } else groupedMembershipData[type] = [].concat(groupedMembershipData[type], [item]);
+    }
+    if (index !== null && !item) {
+      var _groupedMembershipDat, _groupedMembershipDat2;
+      if (index < 0 || index >= (groupedMembershipData === null || groupedMembershipData === void 0 ? void 0 : (_groupedMembershipDat = groupedMembershipData[type]) === null || _groupedMembershipDat === void 0 ? void 0 : _groupedMembershipDat.length)) {
+        console.error("Invalid index: " + index);
+        return;
+      }
+      groupedMembershipData[type] = [].concat(groupedMembershipData === null || groupedMembershipData === void 0 ? void 0 : (_groupedMembershipDat2 = groupedMembershipData[type]) === null || _groupedMembershipDat2 === void 0 ? void 0 : _groupedMembershipDat2.slice(0, index), groupedMembershipData[type].slice(index + 1));
+    }
+    var flight = groupedMembershipData.flight,
+      hotel = groupedMembershipData.hotel,
+      rental_car = groupedMembershipData.rental_car;
+    var updatedMemberships = [].concat(flight, hotel, rental_car);
+    setMembershipInfoInput(updatedMemberships);
+  };
+  var handleSubmit = function handleSubmit() {
+    try {
+      var url = "/api/v1/user-management/users/" + userID + "/membership";
+      var payload = editIndex ? _extends({}, selectedMembershipChain, {
+        number: membershipNumber,
+        name: membershipName || ''
+      }) : {
+        membership_type: type,
+        number: membershipNumber,
+        iata_code: null,
+        user: userID,
+        loyalty_program_id: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_id,
+        name: membershipName || ''
+      };
+      setIsUpdating(true);
+      var _temp2 = _finallyRethrows(function () {
+        return _catch(function () {
+          return Promise.resolve(editIndex ? api$7.put(url, payload) : api$7.post(url, payload)).then(function (response) {
+            if ((response === null || response === void 0 ? void 0 : response.status) === 201 || (response === null || response === void 0 ? void 0 : response.status) === 200) {
+              var _response$data3;
+              var updatedResponse = response === null || response === void 0 ? void 0 : response.data;
+              updatedResponse.program_name = selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name;
+              updatedResponse.loyalty_program_image_url = selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_image_url;
+              if (isOtherMembership) updatedResponse.loyalty_program_name = 'Other';
+              updateList(response === null || response === void 0 ? void 0 : (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : _response$data3.membership_type, editIndex, updatedResponse);
+              IUIToastMessageService$5.sNotify(editIndex ? "Membership updated." : "New membership added.");
+            } else {
+              IUIToastMessageService$5.warningNotify('Failed to save membership');
+            }
+          });
+        }, function (error) {
+          console.error(error);
+          IUIToastMessageService$5.warningNotify('Something went wrong!');
+        });
+      }, function (_wasThrown, _result) {
+        handleClose();
+        if (_wasThrown) throw _result;
+        return _result;
+      });
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var handleEdit = function handleEdit(mem, index, isOther) {
+    setEditIndex(index);
+    setSelectedMembershipChain(mem);
+    setMembershipName((mem === null || mem === void 0 ? void 0 : mem.name) || '');
+    setMembershipNumber(mem === null || mem === void 0 ? void 0 : mem.number);
+    setIsOtherMembership(isOther);
+    var currentModalState = _extends({}, modalState);
+    currentModalState.open = true;
+    currentModalState.type = mem === null || mem === void 0 ? void 0 : mem.membership_type;
+    setModalState(currentModalState);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(IUIModal, {
+    isOpen: open,
+    closeHandler: handleClose,
+    modalClass: clsx(styles$3.loyaltymodal, (_clsx = {}, _clsx[styles$3.loyaltyList] = !selectedMembershipChain, _clsx)),
+    cancelLabel: selectedMembershipChain ? 'Cancel' : '',
+    submitLabel: selectedMembershipChain ? isUpdating ? 'Saving...' : editIndex ? 'Save' : 'Add' : '',
+    submitHandler: handleSubmit,
+    isDisabledSubmitBtn: isUpdating || !membershipNumber || isOtherMembership && !membershipName,
+    width: selectedMembershipChain ? '480px' : '640px',
+    headerText: selectedMembershipChain ? '' : title,
+    subHanderText: selectedMembershipChain ? '' : subtitle,
+    modalBodyStyle: {
+      padding: selectedMembershipChain ? '0px 24px 25px' : '24px 24px 0px',
+      minHeight: selectedMembershipChain ? 120 : 80,
+      borderBottom: selectedMembershipChain && '1px solid #E5E7EB',
+      marginBottom: selectedMembershipChain ? 0 : -18
+    }
+  }, /*#__PURE__*/React.createElement(Fragment$1, null, selectedMembershipChain ? /*#__PURE__*/React.createElement(MembershipForm, {
+    selectedMembershipChain: selectedMembershipChain,
+    isOtherMembership: isOtherMembership,
+    membershipName: membershipName,
+    membershipNumber: membershipNumber,
+    setMembershipName: setMembershipName,
+    setMembershipNumber: setMembershipNumber,
+    type: type,
+    isEdit: !!editIndex
+  }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#374151',
+      fontWeight: 500
+    }
+  }, "Loyalty program"), ' ', /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#6B7280'
+    }
+  }, "*")), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.selectWrapper,
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.selectSearchBox
+  }, /*#__PURE__*/React.createElement("input", {
+    className: styles$3.searchInput,
+    placeholder: "Select loyalty program",
+    onFocus: function onFocus() {
+      return setIsInputFocused(true);
+    },
+    onClick: function onClick() {
+      return setIsInputFocused(true);
+    },
+    onChange: function onChange(e) {
+      if (!isInputFocused) {
+        setIsInputFocused(true);
+      }
+      setSearchQuery(e.target.value);
+    },
+    value: searchQuery
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.chevronIcon
+  }, /*#__PURE__*/React.createElement(ChevronNext, {
+    color: "#6B7280"
+  }))), isInputFocused && /*#__PURE__*/React.createElement("div", {
+    className: styles$3.membershipList
+  }, /*#__PURE__*/React.createElement(LoyaltyPrograms, {
+    items: items,
+    handleSelect: handleSelect,
+    loading: loading,
+    setIsOtherMembership: setIsOtherMembership,
+    setSelectedMembershipChain: setSelectedMembershipChain,
+    searchQuery: searchQuery,
+    fetchItems: fetchItems,
+    type: type,
+    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current,
+    page: page
+  })))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, Object.keys(groupedMembershipData).map(function (memType, ind) {
+    return /*#__PURE__*/React.createElement(Fragment$1, {
+      key: memType
+    }, /*#__PURE__*/React.createElement(AddMembershipButton, {
+      type: memType,
+      setModalState: setModalState,
+      modalState: modalState,
+      list: groupedMembershipData[memType],
+      updateList: updateList,
+      handleEdit: handleEdit
+    }), ind < 2 && /*#__PURE__*/React.createElement(IUIDivider, {
+      className: styles$3.divider
+    }));
+  })));
+};
+
 var AdditionalInfo = function AdditionalInfo(_ref) {
   var _clsx;
   var membershipInfoInput = _ref.membershipInfoInput,
-    onMemInfoInputChange = _ref.onMemInfoInputChange,
-    addMemInfoInput = _ref.addMemInfoInput,
     travelPreferenceInfo = _ref.travelPreferenceInfo,
     _ref$travelPreference = _ref.travelPreferenceOnChange,
     travelPreferenceOnChange = _ref$travelPreference === void 0 ? function () {} : _ref$travelPreference,
@@ -4508,10 +5409,12 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     dateFormat = _ref.dateFormat,
     _ref$defaultExpand = _ref.defaultExpand,
     defaultExpand = _ref$defaultExpand === void 0 ? false : _ref$defaultExpand,
-    _ref$handleRemoveMemF = _ref.handleRemoveMemFields,
-    handleRemoveMemFields = _ref$handleRemoveMemF === void 0 ? {} : _ref$handleRemoveMemF,
     _ref$setAdditionalInf = _ref.setAdditionalInfoFlag,
-    setAdditionalInfoFlag = _ref$setAdditionalInf === void 0 ? function () {} : _ref$setAdditionalInf;
+    setAdditionalInfoFlag = _ref$setAdditionalInf === void 0 ? function () {} : _ref$setAdditionalInf,
+    _ref$setMembershipInf = _ref.setMembershipInfoInput,
+    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf,
+    _ref$isProfile = _ref.isProfile,
+    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
   var handleChange = function handleChange(panel) {
     return function (event, defaultExpand) {
       setAdditionalInfoFlag(defaultExpand ? panel : false);
@@ -4523,57 +5426,9 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     passportInfo = _useSelector.passportInfo,
     secureTravelInfo = _useSelector.secureTravelInfo,
     travelPreference = _useSelector.travelPreference;
-  var _useSelector2 = useSelector(function (state) {
-      return state.userAddEdit;
-    }),
-    maxMembershipInput = _useSelector2.maxMembershipInput;
   var dropdownList = useSelector(function (state) {
     return state.userAddEdit.dropdownList;
   });
-  var MembershipField = function MembershipField(_ref2) {
-    var val = _ref2.val,
-      index = _ref2.index;
-    if (val.membership_type === 'flight') {
-      return (
-        /*#__PURE__*/
-        React.createElement(IUIInput, {
-          label: "Airline name",
-          placeholder: "Enter airline name",
-          fullwidth: false,
-          defaultValue: val.name,
-          onValueChange: function onValueChange(_ref3) {
-            var _value = _ref3._value;
-            return onMemInfoInputChange(index, 'name', _value);
-          }
-        })
-      );
-    }
-    if (val.membership_type === 'hotel') {
-      return /*#__PURE__*/React.createElement(IUIInput, {
-        label: "Hotel name",
-        placeholder: "Enter hotel name",
-        fullwidth: false,
-        defaultValue: val.name,
-        onValueChange: function onValueChange(_ref4) {
-          var _value = _ref4._value;
-          return onMemInfoInputChange(index, 'name', _value);
-        }
-      });
-    }
-    if (val.membership_type === 'rental_car') {
-      return /*#__PURE__*/React.createElement(IUIInput, {
-        label: "Car provider name",
-        placeholder: "Enter a car provider name",
-        fullwidth: false,
-        defaultValue: val.name,
-        onValueChange: function onValueChange(_ref5) {
-          var _value = _ref5._value;
-          return onMemInfoInputChange(index, 'name', _value);
-        }
-      });
-    }
-    return null;
-  };
   return /*#__PURE__*/React.createElement(IUIAccordion, {
     expanded: defaultExpand === 'open',
     onChange: handleChange('open'),
@@ -4655,8 +5510,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     md: 4
   }, /*#__PURE__*/React.createElement(IUILabel, {
     label: "Membership information",
-    headerType: true,
-    description: "You can add up to " + maxMembershipInput + " membership details"
+    headerType: true
   })), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     sm: 12,
@@ -4666,139 +5520,11 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: styles.formFieldsWrapper
-  }, membershipInfoInput.length === 0 && /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles.emptyFieldContainer
-  }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles.emptyFieldDescription
-  }, "No membership details added yet"), /*#__PURE__*/React.createElement(IUIBox, {
-    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-    display: "flex"
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add airline",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('flight');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add hotel",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('hotel');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add car rental",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('rental_car');
-    }
-  }))), membershipInfoInput.length > 0 && membershipInfoInput.map(function (val, index) {
-    if (index >= maxMembershipInput) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: index.toString()
-    }, /*#__PURE__*/React.createElement(IUIGrid, {
-      item: true,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }, /*#__PURE__*/React.createElement(MembershipField, {
-      val: val,
-      index: index,
-      key: index.toString()
-    })), /*#__PURE__*/React.createElement(IUIGrid, {
-      item: true,
-      md: 8,
-      lg: 6,
-      xl: 6
-    }, /*#__PURE__*/React.createElement(IUIBox, {
-      component: "div",
-      display: "flex"
-    }, /*#__PURE__*/React.createElement(IUIInput, {
-      label: "Membership number",
-      placeholder: "Enter membership number",
-      fullwidth: false,
-      defaultValue: val.number,
-      onValueChange: function onValueChange(_ref6) {
-        var _value = _ref6._value;
-        return onMemInfoInputChange(index, 'number', _value);
-      }
-    }), /*#__PURE__*/React.createElement(IUIIconButton, {
-      style: {
-        marginTop: '30px'
-      },
-      disableRipple: true,
-      onClick: function onClick() {
-        return handleRemoveMemFields(index);
-      },
-      className: styles.backGrdColorOnHover
-    }, /*#__PURE__*/React.createElement(CrossIcon, {
-      width: "14",
-      height: "14"
-    })))));
-  }), membershipInfoInput.length < maxMembershipInput && membershipInfoInput.length > 0 && /*#__PURE__*/React.createElement(IUIGrid, {
-    item: true,
-    md: 8,
-    lg: 8,
-    xl: 8
-  }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-    display: "flex"
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add airline",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('flight');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add hotel",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('hotel');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add car rental",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('rental_car');
-    }
-  })))))), /*#__PURE__*/React.createElement(IUIDivider, {
+  }, /*#__PURE__*/React.createElement(Membership, {
+    membershipInfoInput: membershipInfoInput,
+    setMembershipInfoInput: setMembershipInfoInput,
+    isProfile: isProfile
+  })))), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
@@ -4882,7 +5608,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }))))));
 };
 
-var styles$3 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ","pageHeader":"_2ZeWp","buttonHover":"_2Iuy1","cardHeaderBackground":"_3NJWF","actionCustom":"_3Kbfm"};
+var styles$4 = {"root":"_b_muK","minWidth":"_3OQXs","bullet":"_1Q5vL","pos":"_6wGWA","cardHeader":"_SWCfJ","pageHeader":"_2ZeWp","buttonHover":"_2Iuy1","cardHeaderBackground":"_3NJWF","actionCustom":"_3Kbfm"};
 
 var VerificationError = function VerificationError(_ref) {
   var config = _ref.config,
@@ -4893,18 +5619,18 @@ var VerificationError = function VerificationError(_ref) {
   var history = useHistory();
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$3.pageHeader
+    className: styles$4.pageHeader
   }, /*#__PURE__*/React.createElement(IUICard, {
     headerComponentTitle: title,
-    cardHeaderClassName: styles$3.cardHeaderBackground,
+    cardHeaderClassName: styles$4.cardHeaderBackground,
     headerComponent: /*#__PURE__*/React.createElement(IUITypography, {
       gutterBottom: true,
       variant: "h4",
-      className: styles$3.cardHeader
+      className: styles$4.cardHeader
     }, title),
     description: errMsg,
     actionComponent: /*#__PURE__*/React.createElement(IUIButton, {
-      className: styles$3.buttonHover,
+      className: styles$4.buttonHover,
       buttonText: "BACK TO HOMEPAGE",
       type: "outlined",
       onClick: function onClick() {
@@ -4941,8 +5667,8 @@ var ErrorMessages = {
   passport_photo: 'Please attach passport photo.',
   travel_docs: 'Please attach travel docs.',
   products: 'Please select atleast one product access.',
-  only_cards_products: 'Select at least one additional product if opting for cards.',
-  none_products: 'Select at least one product. If opting for cards, please choose at least one additional product.'
+  only_cards_products: 'Currently, Card cannot be selected as a standalone option. Please add at least one more product.',
+  none_products: 'Select at least one product. If opting for card, please choose at least one additional product.'
 };
 
 function AddPanelDialog(_ref) {
@@ -5001,7 +5727,11 @@ var CardsField = function CardsField(props) {
     _props$isProfile = props.isProfile,
     isProfile = _props$isProfile === void 0 ? false : _props$isProfile,
     _props$roles = props.roles,
-    roles = _props$roles === void 0 ? [] : _props$roles;
+    roles = _props$roles === void 0 ? [] : _props$roles,
+    _props$cardsAdmin = props.cardsAdmin,
+    cardsAdmin = _props$cardsAdmin === void 0 ? false : _props$cardsAdmin,
+    editUserId = props.editUserId,
+    loggedInUserId = props.loggedInUserId;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: (styles.headingPadding)
@@ -5030,17 +5760,30 @@ var CardsField = function CardsField(props) {
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: styles.formFieldsWrapper
-  }, isProfile ? /*#__PURE__*/React.createElement(UserRole, {
+  }, isProfile || loggedInUserId === editUserId ? /*#__PURE__*/React.createElement(UserRole, {
     list: roles,
     value: roleValue
   }) : /*#__PURE__*/React.createElement(IUIRadio, {
     list: roles,
     value: roleValue,
-    onValueChange: onRoleChange
-  })))));
+    onValueChange: onRoleChange,
+    disabled: cardsAdmin ? false : true
+  })), !cardsAdmin && !isProfile && /*#__PURE__*/React.createElement(IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    style: {
+      marginTop: "24px"
+    }
+  }, /*#__PURE__*/React.createElement(IUITypography, {
+    variant: "body2",
+    component: "span",
+    className: styles.errorTextCls
+  }, editUserId ? "Only Card admin can change the Card role." : "Only Card admin can change card roles. By default this user will have Card Holder role.")))));
 };
 
-var IUIToastMessageService$4 = services.IUIToastMessageService,
+var IUIToastMessageService$6 = services.IUIToastMessageService,
   IUILocalStorageService$5 = services.IUILocalStorageService;
 var env$4 = configs.env;
 var UserAddEdit = function UserAddEdit(props) {
@@ -5049,8 +5792,6 @@ var UserAddEdit = function UserAddEdit(props) {
     config = props.config,
     _props$isProfile = props.isProfile,
     isProfile = _props$isProfile === void 0 ? false : _props$isProfile;
-  console.log("isProfile", isProfile);
-  console.log("isEditMode", isEditMode);
   env$4.init(config, isProfile);
   var queryParams = new URLSearchParams(window.location.search);
   var verifyUserId = Number(queryParams.get(config.routes.users.add.queryParamKeys.verifyUserId));
@@ -5087,7 +5828,7 @@ var UserAddEdit = function UserAddEdit(props) {
   var _useState = useState({
       travel: false,
       expense: false,
-      cards: false
+      card: false
     }),
     productAccess = _useState[0],
     setProductAccess = _useState[1];
@@ -5098,7 +5839,7 @@ var UserAddEdit = function UserAddEdit(props) {
     errorMsgs.products = '';
     var _productAccess = _extends({}, productAccess);
     _productAccess[value] = !_productAccess[value];
-    if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.cards === true) {
+    if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.card === true) {
       var _errorArray = [].concat(errorArray);
       var _errorMsgs = _extends({}, errorMsgs);
       if (_errorArray.indexOf('products') === -1) {
@@ -5114,7 +5855,7 @@ var UserAddEdit = function UserAddEdit(props) {
           block: 'center'
         });
       }
-    } else if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.cards === false) {
+    } else if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.card === false) {
       var _errorArray2 = [].concat(errorArray);
       var _errorMsgs2 = _extends({}, errorMsgs);
       if (_errorArray2.indexOf('products') === -1) {
@@ -5193,9 +5934,9 @@ var UserAddEdit = function UserAddEdit(props) {
           if (_loop()) break;
         }
       } else if (typeof err === 'string') {
-        IUIToastMessageService$4.warningNotify(err);
+        IUIToastMessageService$6.warningNotify(err);
       } else {
-        IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+        IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["finally"](function () {
       dispatch(stopLoader());
@@ -5246,9 +5987,9 @@ var UserAddEdit = function UserAddEdit(props) {
           if (_loop2()) break;
         }
       } else if (typeof err === 'string') {
-        IUIToastMessageService$4.warningNotify(err);
+        IUIToastMessageService$6.warningNotify(err);
       } else {
-        IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+        IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["finally"](function () {
       dispatch(stopLoader());
@@ -5268,7 +6009,7 @@ var UserAddEdit = function UserAddEdit(props) {
       if (res !== null && res !== void 0 && (_res$roles = res.roles) !== null && _res$roles !== void 0 && _res$roles.length) {
         dispatch(setCardsDetails(res));
       } else {
-        IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+        IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["catch"](function (error) {
       console.log("errorrr", error);
@@ -5288,7 +6029,7 @@ var UserAddEdit = function UserAddEdit(props) {
       if (res !== null && res !== void 0 && (_res$roles2 = res.roles) !== null && _res$roles2 !== void 0 && _res$roles2.length) {
         dispatch(setCardsDetails(res));
       } else {
-        IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+        IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["catch"](function (error) {
       console.log("errorrr", error);
@@ -5448,68 +6189,50 @@ var UserAddEdit = function UserAddEdit(props) {
   var _useState25 = useState(''),
     cardsRole = _useState25[0],
     setCardsRole = _useState25[1];
-  var _useState26 = useState(false),
-    cardsErrorMsg = _useState26[0],
-    setCardsErrorMsg = _useState26[1];
-  console.log("cardsRole123", cardsRole);
-  console.log("cardsErrorMsg", cardsErrorMsg);
   useEffect(function () {
-    if (isCardsAdmin === false && cardsRole.includes("card-admin")) {
-      setCardsErrorMsg(true);
-      IUIToastMessageService$4.warningNotify("You are not authorized person to make someone admin");
-    } else {
-      setCardsErrorMsg(false);
+    if (productAccess.card === false) {
+      setCardsRole('');
     }
-  }, [cardsRole]);
+  }, [productAccess.card]);
   useEffect(function () {
-    if (productAccess.cards === false) {
-      setCardsRole('');
-    } else {
+    if (isCardsDetailsRendered && !isProfile && productAccess.card) {
+      var selectedRole = cardsDetails.cardsRoles.find(function (role) {
+        return role.isAssigned;
+      });
+      if (selectedRole) {
+        setCardsRole(selectedRole.value);
+      } else {
+        var defaultRole = cardsDetails.cardsRoles.find(function (role) {
+          var splitRoleVal = role.value.split(':');
+          return splitRoleVal[2] === 'card-holder';
+        });
+        if (defaultRole) {
+          setCardsRole(defaultRole.value);
+        }
+      }
+    } else if (isCardsDetailsRendered && isProfile && productAccess.card) {
+      var targetRole = isCardsAdmin ? 'card-admin' : 'card-holder';
       for (var _iterator = _createForOfIteratorHelperLoose(cardsDetails.cardsRoles), _step; !(_step = _iterator()).done;) {
         var role = _step.value;
-        var splitRoleval = role.value.split(":");
-        var defaultRole = splitRoleval[2];
-        if (defaultRole === 'card-holder') {
+        var splitRoleVal = role.value.split(':');
+        var profileRole = splitRoleVal[2];
+        if (profileRole === targetRole) {
           setCardsRole(role.value);
           break;
         }
       }
     }
-  }, [productAccess.cards]);
-  useEffect(function () {
-    if (isCardsDetailsRendered) {
-      var selectedRole = null;
-      for (var _iterator2 = _createForOfIteratorHelperLoose(cardsDetails.cardsRoles), _step2; !(_step2 = _iterator2()).done;) {
-        var _role = _step2.value;
-        if (_role.isAssigned) {
-          setCardsRole(_role.value);
-          selectedRole = _role.value;
-          break;
-        }
-      }
-      if (selectedRole === null) {
-        for (var _iterator3 = _createForOfIteratorHelperLoose(cardsDetails.cardsRoles), _step3; !(_step3 = _iterator3()).done;) {
-          var role = _step3.value;
-          var splitRoleval = role.value.split(":");
-          var defaultRole = splitRoleval[2];
-          if (defaultRole === 'card-holder') {
-            setCardsRole(role.value);
-            break;
-          }
-        }
-      }
-    }
-  }, [isCardsDetailsRendered, cardsDetails]);
+  }, [isCardsDetailsRendered, cardsDetails, isProfile, productAccess.card, isCardsAdmin]);
   var asyncSelectRefs = useRef({
     emp_level: useRef(null),
     entity: useRef(null),
     business_unit: useRef(null),
     department: useRef(null)
   });
-  var _useState27 = useState([]),
-    errorArray = _useState27[0],
-    setErrorArray = _useState27[1];
-  var _useState28 = useState({
+  var _useState26 = useState([]),
+    errorArray = _useState26[0],
+    setErrorArray = _useState26[1];
+  var _useState27 = useState({
       first_name: '',
       last_name: '',
       email: '',
@@ -5539,9 +6262,9 @@ var UserAddEdit = function UserAddEdit(props) {
       userTagType: '',
       profile_pic: ''
     }),
-    errorMsgs = _useState28[0],
-    setErrorMsgs = _useState28[1];
-  var _useState29 = useState({
+    errorMsgs = _useState27[0],
+    setErrorMsgs = _useState27[1];
+  var _useState28 = useState({
       first_name: false,
       last_name: false,
       email: false,
@@ -5568,14 +6291,14 @@ var UserAddEdit = function UserAddEdit(props) {
       userTagType: false,
       profile_pic: false
     }),
-    inputChangeLog = _useState29[0],
-    updateInputChangeLog = _useState29[1];
-  var _useState30 = useState([]),
-    uploadedFiles = _useState30[0],
-    setUploadedFiles = _useState30[1];
-  var _useState31 = useState(70),
-    maxLengthForModal = _useState31[0],
-    setMaxLengthForModal = _useState31[1];
+    inputChangeLog = _useState28[0],
+    updateInputChangeLog = _useState28[1];
+  var _useState29 = useState([]),
+    uploadedFiles = _useState29[0],
+    setUploadedFiles = _useState29[1];
+  var _useState30 = useState(70),
+    maxLengthForModal = _useState30[0],
+    setMaxLengthForModal = _useState30[1];
   var defaultAddModalData = {
     isOpen: false,
     isError: false,
@@ -5591,9 +6314,9 @@ var UserAddEdit = function UserAddEdit(props) {
     maxLength: maxLengthForModal,
     minLength: 0
   };
-  var _useState32 = useState(defaultAddModalData),
-    addModalData = _useState32[0],
-    setAddModalData = _useState32[1];
+  var _useState31 = useState(defaultAddModalData),
+    addModalData = _useState31[0],
+    setAddModalData = _useState31[1];
   var onAddModalClose = function onAddModalClose() {
     setAddModalData(_extends({}, defaultAddModalData));
   };
@@ -5654,7 +6377,7 @@ var UserAddEdit = function UserAddEdit(props) {
         setAddModalData(_extends({}, addModalData, {
           isOpen: false
         }));
-        IUIToastMessageService$4.sNotify(addModalData.title + " added successfully.");
+        IUIToastMessageService$6.sNotify(addModalData.title + " added successfully.");
         var tempKey = addModalData.id === 'employee_level' ? 'emp_level' : addModalData.id;
         if (addModalData.id === 'department') {
           var _extends2;
@@ -6005,7 +6728,7 @@ var UserAddEdit = function UserAddEdit(props) {
   useEffect(function () {
     if (isRendered === true) {
       renderFields === null || renderFields === void 0 ? void 0 : renderFields.products.forEach(function (prod) {
-        if ((prod === null || prod === void 0 ? void 0 : prod.name) === 'cards') {
+        if ((prod === null || prod === void 0 ? void 0 : prod.name) === 'card') {
           editUserId ? fetchEditUserCardsDetails(editUserId) : fetchLoggedUserCardsDetails();
         }
       });
@@ -6131,7 +6854,7 @@ var UserAddEdit = function UserAddEdit(props) {
             setProductAccess({
               travel: products.includes('travel'),
               expense: products.includes('expense'),
-              cards: products.includes('cards')
+              card: products.includes('card')
             });
             if (products.includes('travel')) {
               var _res$travel_info, _res$travel_info2, _res$travel_info3, _res$travel_info4, _res$travel_info5, _res$travel_info6;
@@ -6339,7 +7062,7 @@ var UserAddEdit = function UserAddEdit(props) {
     try {
       var checkAnyError = doesFormHasError();
       if (checkAnyError) {
-        IUIToastMessageService$4.warningNotify(checkAnyError);
+        IUIToastMessageService$6.warningNotify(checkAnyError);
         return Promise.resolve();
       }
       if (employeeInfoInput.manager_id.value !== '') {
@@ -6383,9 +7106,6 @@ var UserAddEdit = function UserAddEdit(props) {
         employeeInfo = optionalFields.employee_info,
         userTravelInfo = optionalFields.user_travel_info;
       var allMandatoryFields = ['first_name', 'last_name', 'email'];
-      if (cardsErrorMsg) {
-        _isError = true;
-      }
       allMandatoryFields.forEach(function (key, index) {
         if (personalInfoInput[key] === '') {
           _isError = true;
@@ -6524,7 +7244,7 @@ var UserAddEdit = function UserAddEdit(props) {
         }
       }
       var cardApiflag = false;
-      if (productAccess.cards === false) {
+      if (productAccess.card === false || isCardsAdmin === false) {
         cardApiflag = false;
       } else {
         cardApiflag = true;
@@ -6532,7 +7252,7 @@ var UserAddEdit = function UserAddEdit(props) {
       if (!_isError) {
         if (isEditMode && editUserId || isProfile) {
           dispatch(showLoader());
-          if (cardApiflag) {
+          if (cardApiflag && !isProfile && editUserId !== (id === null || id === void 0 ? void 0 : id.toString())) {
             fetch(userAddEditUrl.cardsEditUserDetails(editUserId), {
               method: 'POST',
               body: JSON.stringify(cardsPayload),
@@ -6544,7 +7264,7 @@ var UserAddEdit = function UserAddEdit(props) {
               if (response.status === 200) {
                 updateUserApiCall(payload, inputChangeLog);
               } else {
-                IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+                IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
               }
             })["catch"](function (error) {
               console.log("errorrr", error);
@@ -6569,7 +7289,7 @@ var UserAddEdit = function UserAddEdit(props) {
                   }
                 }).then(function (response) {
                   if (response.status !== 200) {
-                    IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+                    IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
                   }
                 })["catch"](function (error) {
                   console.log("errorrr", error);
@@ -6613,9 +7333,9 @@ var UserAddEdit = function UserAddEdit(props) {
                   if (_loop4()) break;
                 }
               } else if (typeof err === 'string') {
-                IUIToastMessageService$4.warningNotify(err);
+                IUIToastMessageService$6.warningNotify(err);
               } else {
-                IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+                IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
               }
             })["finally"](function () {
               dispatch(stopLoader());
@@ -6954,6 +7674,13 @@ var UserAddEdit = function UserAddEdit(props) {
     className: styles.productContainerGap
   }, renderFields.products.map(function (p, i) {
     p.readOnly = isProfile;
+    if (p.id === 3 && !isCardsAdmin && !isProfile) {
+      p.readOnly = true;
+      p.disableText = "Only card admin can change this access.";
+    } else if (p.id === 3 && editUserId === (id === null || id === void 0 ? void 0 : id.toString())) {
+      p.readOnly = true;
+      p.disableText = "You cannot update your own Card product";
+    }
     return /*#__PURE__*/React.createElement(IUIGrid, {
       item: true,
       sm: 12,
@@ -7019,7 +7746,9 @@ var UserAddEdit = function UserAddEdit(props) {
     errorMsgs: errorMsgs,
     dateFormat: dateFormat,
     defaultExpand: isAdditionalInfoExpanded,
-    setAdditionalInfoFlag: setAdditionalInfoFlag
+    setAdditionalInfoFlag: setAdditionalInfoFlag,
+    setMembershipInfoInput: setMembershipInfoInput,
+    isProfile: isProfile
   })), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), productAccess && productAccess.expense && /*#__PURE__*/React.createElement(TravelExpenseFields, {
@@ -7048,9 +7777,9 @@ var UserAddEdit = function UserAddEdit(props) {
     roles: renderFields.expenseRoles
   }), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
-  }), isCardsDetailsRendered && productAccess && productAccess.cards && /*#__PURE__*/React.createElement(CardsField, {
+  }), isCardsDetailsRendered && productAccess && productAccess.card && /*#__PURE__*/React.createElement(CardsField, {
     cardsConstants: cardsDetails.cardsConstants,
-    type: "cards",
+    type: "card",
     isProfile: isProfile,
     onRoleChange: function onRoleChange(_ref7) {
       var _value = _ref7._value;
@@ -7058,7 +7787,9 @@ var UserAddEdit = function UserAddEdit(props) {
     },
     roleValue: cardsRole,
     roles: cardsDetails.cardsRoles,
-    cardsAdmin: isCardsAdmin
+    cardsAdmin: isCardsAdmin,
+    editUserId: editUserId,
+    loggedInUserId: id === null || id === void 0 ? void 0 : id.toString()
   }))) : /*#__PURE__*/React.createElement(VerificationError, {
     config: config,
     errMsg: hasVerificationError
@@ -7074,7 +7805,7 @@ var UserAddEdit = function UserAddEdit(props) {
 };
 var index = withStore(UserAddEdit);
 
-var styles$4 = {"UUIUserManagementImport":"_2LqsB","pageHeader":"_2e_3-","heading":"_3eU-2","headingLarge":"_2Att5","headingMedium":"_1V1WI","headingSmall":"_3K2if","dividerColor":"_2HV3a","container":"_1IhuU","customRadioEach":"_1SNqS","fileEmptyScreenClass":"_1oAZy","emptyScreenText":"_2Dr6Z","tablewrapper":"_3qvwi","rowText":"_2gGIL","textTransform":"_1wfQ7","lightColor":"_mB5T5","customRadio":"_Jgvba","radioLbl":"_3ymQp","connector":"_2wR5m","recordsDetails":"_1K8ye","rightBorder":"_2xf9y","mildText":"_GMJnw","buttonTopalignment":"_1yIRP","minWidth":"_2QJ1O","recordValue":"_2B4yV","validationLine":"_3wyl5","descText":"_3mh3L","divider":"_1FdXG","checkboxlabel":"_2Nf4P","disabledText":"_2fNvj","statusCircle":"_3LWGh","draftCircle":"_2sc-Y","colGap":"_7nyR0","infoText":"_1ktOg","infoLbl":"_3dfeW","importStatus":"_f2QaG","completedContainer":"_1bMg3","recordRow":"_3bzZL","numberText":"_33tc8","stepper":"_2qgQw","importProgressInfo":"_3L6ao","importProgressInfotext":"_yI1xw","lightLargeFont":"_evdHP","backdrop":"_1CjJP"};
+var styles$5 = {"UUIUserManagementImport":"_2LqsB","pageHeader":"_2e_3-","heading":"_3eU-2","headingLarge":"_2Att5","headingMedium":"_1V1WI","headingSmall":"_3K2if","dividerColor":"_2HV3a","container":"_1IhuU","customRadioEach":"_1SNqS","fileEmptyScreenClass":"_1oAZy","emptyScreenText":"_2Dr6Z","tablewrapper":"_3qvwi","rowText":"_2gGIL","textTransform":"_1wfQ7","lightColor":"_mB5T5","customRadio":"_Jgvba","radioLbl":"_3ymQp","connector":"_2wR5m","recordsDetails":"_1K8ye","rightBorder":"_2xf9y","mildText":"_GMJnw","buttonTopalignment":"_1yIRP","minWidth":"_2QJ1O","recordValue":"_2B4yV","validationLine":"_3wyl5","descText":"_3mh3L","divider":"_1FdXG","checkboxlabel":"_2Nf4P","disabledText":"_2fNvj","statusCircle":"_3LWGh","draftCircle":"_2sc-Y","colGap":"_7nyR0","infoText":"_1ktOg","infoLbl":"_3dfeW","importStatus":"_f2QaG","completedContainer":"_1bMg3","recordRow":"_3bzZL","numberText":"_33tc8","stepper":"_2qgQw","importProgressInfo":"_3L6ao","importProgressInfotext":"_yI1xw","lightLargeFont":"_evdHP","backdrop":"_1CjJP"};
 
 var DownloadIcon = function DownloadIcon(props) {
   return /*#__PURE__*/React.createElement("svg", {
@@ -7115,21 +7846,6 @@ var CheckCircleIcon = function CheckCircleIcon(props) {
   }));
 };
 
-var ChevronNext = function ChevronNext() {
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "8",
-    height: "16",
-    fill: "none",
-    viewBox: "0 0 8 16"
-  }, /*#__PURE__*/React.createElement("path", {
-    stroke: "#9CA3AF",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    d: "M2 4l4 4-4 4"
-  }));
-};
-
 var FileError = function FileError() {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -7169,7 +7885,7 @@ var Progressicon = function Progressicon(props) {
   }));
 };
 
-var api$6 = configs.api;
+var api$8 = configs.api;
 var showLoader$2 = function showLoader() {
   return {
     type: SHOW_LOADER$4
@@ -7195,7 +7911,7 @@ var setBulkActionHistoryFields = function setBulkActionHistoryFields(payload) {
 var generateTemplate = function generateTemplate(payload) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.get("" + userBulkImport.generateTemplate()).then(function (res) {
+      api$8.get("" + userBulkImport.generateTemplate()).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -7206,7 +7922,7 @@ var generateTemplate = function generateTemplate(payload) {
 var uploadBulkUsersFile = function uploadBulkUsersFile(payload) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.get(userBulkImport.uploadUrl() + "?action=upload_bulk_users&item_type=bulk_users&file_name=" + payload.fileName).then(function (res) {
+      api$8.get(userBulkImport.uploadUrl() + "?action=upload_bulk_users&item_type=bulk_users&file_name=" + payload.fileName).then(function (res) {
         var resolveResponse = {
           file_type: 'bulk_users',
           file_path: res.data.presigned_url.fields.key,
@@ -7245,7 +7961,7 @@ var uploadFileToS3$1 = function uploadFileToS3(presignedPostData, file) {
 var validateUploadedFile = function validateUploadedFile(fileName) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.post(userBulkImport.validateUploadedFile() + "?file_name=" + fileName).then(function (res) {
+      api$8.post(userBulkImport.validateUploadedFile() + "?file_name=" + fileName).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -7253,13 +7969,13 @@ var validateUploadedFile = function validateUploadedFile(fileName) {
     });
   };
 };
-var executionJob = function executionJob(jobId, type) {
+var _executionJob = function executionJob(jobId, type) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.get(userBulkImport.executionResult() + "?job_id=" + jobId).then(function (res) {
+      api$8.get(userBulkImport.executionResult() + "?job_id=" + jobId).then(function (res) {
         if (!res.data[type]) {
           setTimeout(function () {
-            dispatch(executionJob(jobId, type)).then(function (res) {
+            dispatch(_executionJob(jobId, type)).then(function (res) {
               return res.data[type] && resolve(res);
             })["catch"](function (err) {
               reject(err);
@@ -7276,13 +7992,13 @@ var executionJob = function executionJob(jobId, type) {
     });
   };
 };
-var downloadExecutionJob = function downloadExecutionJob(auditId, type) {
+var _downloadExecutionJob = function downloadExecutionJob(auditId, type) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.get(userBulkImport.executionResult() + "?audit_id=" + auditId).then(function (res) {
+      api$8.get(userBulkImport.executionResult() + "?audit_id=" + auditId).then(function (res) {
         if (!res.data[type]) {
           setTimeout(function () {
-            dispatch(downloadExecutionJob(auditId, type)).then(function (res) {
+            dispatch(_downloadExecutionJob(auditId, type)).then(function (res) {
               return res.data[type] && resolve(res);
             })["catch"](function (err) {
               reject(err);
@@ -7301,7 +8017,7 @@ var downloadExecutionJob = function downloadExecutionJob(auditId, type) {
 var downloadUploadedRecords = function downloadUploadedRecords(type, jobId) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.get(userBulkImport.downloadUploadedRecords() + "?status=" + type + "&job_id=" + jobId).then(function (res) {
+      api$8.get(userBulkImport.downloadUploadedRecords() + "?status=" + type + "&job_id=" + jobId).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -7312,7 +8028,7 @@ var downloadUploadedRecords = function downloadUploadedRecords(type, jobId) {
 var importUploadedRecords = function importUploadedRecords(jobId, canUpdateExistingUsers) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.post(userBulkImport.importRecords() + "?job_id=" + jobId + "&update=" + canUpdateExistingUsers).then(function (res) {
+      api$8.post(userBulkImport.importRecords() + "?job_id=" + jobId + "&update=" + canUpdateExistingUsers).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -7323,7 +8039,7 @@ var importUploadedRecords = function importUploadedRecords(jobId, canUpdateExist
 var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$6.get(url).then(function (res) {
+      api$8.get(url).then(function (res) {
         if (res.status === 204) {
           dispatch(setBulkActionHistoryFields({
             count: 0,
@@ -7347,7 +8063,7 @@ var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   };
 };
 
-var styles$5 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltipTextDiv":"_1l4V-","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","deactivateAlert":"_3hvWz","warningSvg":"_2H6Bq","departmentHeadText":"_3pOsV","deactivateBtn":"_2v6e4","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn","deactivateSubmitBtn":"_1qxY-","deactivateCustomButtonClass":"_2YBWE"};
+var styles$6 = {"UUIUserManagementList":"_3WNHx","scrollOverlayMenu":"_2_WEg","overlaysearch":"_1Pbhb","pageHeader":"_1WLpc","buttonWrapper":"_2egTG","headingWrapper":"_1He01","headingSignUpWrapper":"_Q8vqd","heading":"_1uPaO","headingLarge":"_2FsLd","headingMedium":"_nGXA9","headingSmall":"_2rpwF","description":"_25vb9","headerText":"_1Ny9J","letterImage":"_2hr3R","tablewrapper":"_1-RPw","rowText":"_1LXyO","textTransform":"_3kFQS","lightColor":"_3Ghgw","avatarClassName":"_2qO_X","tooltipText":"_151u_","tooltipTextDiv":"_1l4V-","tooltip":"_-LQNH","importModalBodyContainer":"_25xUk","dividerColor":"_2HZv9","w100":"_3vGmU","downloadTemplateContainer":"_3-Xu_","downloadTemplateDescContainer":"_tLw43","labelContainer":"_7TYUZ","downlTempHeader":"__CZpe","downlTempDescription":"_19jEe","downloadTemplateButton":"_1qXtq","fileUploaderContainer":"_1YVz2","colGap":"_3vnY5","deActivateModalContainer":"_28H9H","backdrop":"_1ky1x","errorText":"_26_if","deactivateAlert":"_3hvWz","warningSvg":"_2H6Bq","departmentHeadText":"_3pOsV","deactivateBtn":"_2v6e4","user_list_page_tabs":"_xWE7K","TabLabelCount":"_13pXn","deactivateSubmitBtn":"_1qxY-","deactivateCustomButtonClass":"_2YBWE"};
 
 var BulkUploadModal = function BulkUploadModal(props) {
   var isOpenImportUsersModal = props.isOpenImportUsersModal,
@@ -7420,7 +8136,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
         return Promise.resolve(dispatch(uploadBulkUsersFile(docs[i]))).then(function (res) {
           return Promise.resolve(dispatch(validateUploadedFile(res.user_file_name)).then(function (validatedRes) {
             if (validatedRes.data.status) {
-              dispatch(executionJob(validatedRes.data.job_id, 'is_validation_completed')).then(function (response) {
+              dispatch(_executionJob(validatedRes.data.job_id, 'is_validation_completed')).then(function (response) {
                 data.push(res);
                 setFiles([].concat(data));
                 setIsFileUploading(false);
@@ -7463,7 +8179,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBackdrop, {
     open: isFileUploading || isFileDownloading,
-    className: styles$5.backdrop
+    className: styles$6.backdrop
   }, /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit"
   })), /*#__PURE__*/React.createElement(IUIModal, {
@@ -7480,7 +8196,7 @@ var BulkUploadModal = function BulkUploadModal(props) {
     }
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
-    className: styles$5.importModalBodyContainer
+    className: styles$6.importModalBodyContainer
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     md: 12,
@@ -7488,26 +8204,26 @@ var BulkUploadModal = function BulkUploadModal(props) {
     xl: 12,
     sm: 12,
     xs: 12,
-    className: styles$5.downloadTemplateContainer
+    className: styles$6.downloadTemplateContainer
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
     flexDirection: "column",
     justifyContent: "space-between",
-    className: styles$5.downloadTemplateDescContainer
+    className: styles$6.downloadTemplateDescContainer
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$5.labelContainer
+    className: styles$6.labelContainer
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.downlTempHeader
+    className: styles$6.downlTempHeader
   }, "1.\xA0\xA0 Download the template"), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.downlTempDescription
+    className: styles$6.downlTempDescription
   }, "Use this template with predefined columns and add users to your team")), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUIButton, {
     type: "outlined",
     buttonText: "Download template",
     onClick: downloadTemplate,
-    className: styles$5.downloadTemplateButton,
+    className: styles$6.downloadTemplateButton,
     isLink: true
   })))), /*#__PURE__*/React.createElement(IUIDivider, {
-    className: clsx(styles$5.dividerColor, styles$5.w100)
+    className: clsx(styles$6.dividerColor, styles$6.w100)
   }), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     md: 12,
@@ -7515,19 +8231,19 @@ var BulkUploadModal = function BulkUploadModal(props) {
     xl: 12,
     sm: 12,
     xs: 12,
-    className: styles$5.downloadTemplateContainer
+    className: styles$6.downloadTemplateContainer
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
     flexDirection: "column",
-    className: clsx(styles$5.downloadTemplateDescContainer, styles$5.colGap)
+    className: clsx(styles$6.downloadTemplateDescContainer, styles$6.colGap)
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$5.labelContainer
+    className: styles$6.labelContainer
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.downlTempHeader
+    className: styles$6.downlTempHeader
   }, "2.\xA0\xA0 Upload XLSX"), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.downlTempDescription
+    className: styles$6.downlTempDescription
   }, "Once you\u2019ve filled out the file, upload it here")), /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$5.fileUploaderContainer
+    className: styles$6.fileUploaderContainer
   }, /*#__PURE__*/React.createElement(IUIDropzone, {
     handleDrop: handleDrop,
     fileNames: fileNames,
@@ -7539,11 +8255,11 @@ var BulkUploadModal = function BulkUploadModal(props) {
       gap: '10px'
     }
   }, /*#__PURE__*/React.createElement(ErrorIcon, null), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.errorText
+    className: styles$6.errorText
   }, errorMessage)))))));
 };
 
-var IUIToastMessageService$5 = services.IUIToastMessageService;
+var IUIToastMessageService$7 = services.IUIToastMessageService;
 var env$5 = configs.env;
 function getSteps() {
   return ['Review and import', 'Summary'];
@@ -7591,7 +8307,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     if (isTokenVerified === true) {
       var getData = function getData() {
         try {
-          return Promise.resolve(dispatch(executionJob(jobId, 'is_validation_completed')).then(function (res) {
+          return Promise.resolve(dispatch(_executionJob(jobId, 'is_validation_completed')).then(function (res) {
             setImportStatus(res.data.bulk_result);
             setActiveStep(getActiveStep(res.data.is_job_completed));
             setCanUpdateExistingUsers(res.data.exist_users > 0);
@@ -7637,12 +8353,12 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       return Promise.resolve(dispatch(downloadUploadedRecords(type, jobId)).then(function (validatedRes) {
         var _validatedRes$data;
         if ((_validatedRes$data = validatedRes.data) !== null && _validatedRes$data !== void 0 && _validatedRes$data.status) {
-          dispatch(downloadExecutionJob(validatedRes.data.audit_id, 'status')).then(function (res) {
+          dispatch(_downloadExecutionJob(validatedRes.data.audit_id, 'status')).then(function (res) {
             window.open(res.data.presigned_url, '_self').focus();
           })["catch"](function (reject) {
             if (reject) {
               if (!reject.response.data.status) {
-                IUIToastMessageService$5.warningNotify(reject.response.data.message);
+                IUIToastMessageService$7.warningNotify(reject.response.data.message);
               }
             }
           })["finally"](function () {
@@ -7652,7 +8368,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       })["catch"](function (reject) {
         if (reject) {
           if (!reject.response.data.status) {
-            IUIToastMessageService$5.warningNotify(reject.response.data.message);
+            IUIToastMessageService$7.warningNotify(reject.response.data.message);
             setDownlStatus(false);
           }
         }
@@ -7678,7 +8394,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     try {
       if (userBulkImportInfo.success === 0 && userBulkImportInfo.exist_users > 0) {
         if (!canUpdateExistingUsers) {
-          IUIToastMessageService$5.warningNotify('Select update any existing users box');
+          IUIToastMessageService$7.warningNotify('Select update any existing users box');
           return Promise.resolve(false);
         }
       }
@@ -7686,7 +8402,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       return Promise.resolve(dispatch(importUploadedRecords(jobId, canUpdateExistingUsers ? 1 : 0))).then(function (res) {
         var _temp = function () {
           if (res.data.status) {
-            return Promise.resolve(dispatch(executionJob(jobId, 'is_job_completed')).then(function (resp) {
+            return Promise.resolve(dispatch(_executionJob(jobId, 'is_job_completed')).then(function (resp) {
               if (resp.data.status) {
                 setImportStatus(+resp.data.bulk_result);
                 setActiveStep(1);
@@ -7718,14 +8434,14 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step === Number(activeStep)) {
       return /*#__PURE__*/React.createElement(IUIPrimaryRadio, {
         checked: true,
-        className: clsx(styles$4.customRadioEach),
+        className: clsx(styles$5.customRadioEach),
         size: "small",
         disabled: true
       });
     }
     if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step !== Number(activeStep)) {
       return /*#__PURE__*/React.createElement(IUIPrimaryRadio, {
-        className: clsx(styles$4.customRadioEach),
+        className: clsx(styles$5.customRadioEach),
         size: "small",
         disabled: true
       });
@@ -7733,7 +8449,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     if (importStatus === 3 && step === Number(activeStep)) {
       return /*#__PURE__*/React.createElement(IUIPrimaryRadio, {
         checked: true,
-        className: clsx(styles$4.customRadioEach),
+        className: clsx(styles$5.customRadioEach),
         size: "small",
         disabled: true
       });
@@ -7750,11 +8466,11 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     switch (importStatus) {
       case 2:
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DraftIcon, null), /*#__PURE__*/React.createElement(IUITypography, {
-          className: styles$4.descText
+          className: styles$5.descText
         }, "Draft"));
       case 1:
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Progressicon, null), /*#__PURE__*/React.createElement(IUITypography, {
-          className: styles$4.descText
+          className: styles$5.descText
         }, "In progress"));
       case 3:
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
@@ -7762,28 +8478,28 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
           height: "16",
           color: "#059669"
         }), /*#__PURE__*/React.createElement(IUITypography, {
-          className: styles$4.descText
+          className: styles$5.descText
         }, "Completed"));
       case 4:
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorIcon, null), /*#__PURE__*/React.createElement(IUITypography, {
-          className: styles$4.descText
+          className: styles$5.descText
         }, "Failed"));
     }
   };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$4.UUIUserManagementImport
+    className: styles$5.UUIUserManagementImport
   }, /*#__PURE__*/React.createElement(IUIBackdrop, {
     open: importStatus === 1 || isFileDownloading,
-    className: styles$4.backdrop
+    className: styles$5.backdrop
   }, /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit"
   })), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: clsx(styles$4.pageHeader)
+    className: clsx(styles$5.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$4.breadcrumb
+    className: styles$5.breadcrumb
   }, /*#__PURE__*/React.createElement(IUIBreadCrumb, {
     breadCrumbs: [{
       href: config.routes.users.list.path,
@@ -7806,23 +8522,23 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$4.headingWrapper
+    className: styles$5.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
-    className: clsx(styles$4.heading, styles$4.headingLarge)
+    className: clsx(styles$5.heading, styles$5.headingLarge)
   }, "Import users"))))), /*#__PURE__*/React.createElement(IUIDivider, {
-    className: styles$4.dividerColor
+    className: styles$5.dividerColor
   }), canShowBlankScreen && /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     flexDirection: "column",
-    className: styles$4.fileEmptyScreenClass
+    className: styles$5.fileEmptyScreenClass
   }, /*#__PURE__*/React.createElement(FileError, null), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.emptyScreenText
+    className: styles$5.emptyScreenText
   }, blankScreenMessage)), isApiProcessDone && !canShowBlankScreen && /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
-    className: styles$4.container
+    className: styles$5.container
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     lg: 9,
@@ -7837,7 +8553,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React.createElement(IUIStepper, {
     activeStep: activeStep,
     nonLinear: true,
-    className: styles$4.stepper,
+    className: styles$5.stepper,
     CustomStepIcon: CustomStepIcon,
     steps: steps
   }), importStatus === 1 && /*#__PURE__*/React.createElement(IUIBox, {
@@ -7846,21 +8562,21 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     justifyContent: "center",
     width: "800px",
     borderRadius: "6px",
-    className: styles$4.importProgressInfo
+    className: styles$5.importProgressInfo
   }, /*#__PURE__*/React.createElement(BoldInfoIcon, {
     width: "18",
     height: "18",
     color: "#7C2D12"
   }), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.importProgressInfotext
+    className: styles$5.importProgressInfotext
   }, "Import is in progress. This can take a few minutes. You can check the status from Bulk action history.")), importStatus !== 3 && /*#__PURE__*/React.createElement(IUIBox, {
     paddingLeft: "12px"
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
-    className: styles$4.recordsDetails
+    className: styles$5.recordsDetails
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
-    className: styles$4.rightBorder,
+    className: styles$5.rightBorder,
     lg: 3,
     md: 3,
     xl: 3
@@ -7873,22 +8589,22 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       gap: '45px'
     }
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.mildText)
+    className: clsx(styles$5.mildText)
   }, "Total \xA0 records"), +userBulkImportInfo.total_records > 0 && /*#__PURE__*/React.createElement(IUIIconButton, {
     onClick: function onClick() {
       return handleDownloadRecords('total');
     },
-    className: styles$4.buttonTopalignment
+    className: styles$5.buttonTopalignment
   }, /*#__PURE__*/React.createElement(DownloadIcon, {
     width: "11",
     height: "14"
   }))), /*#__PURE__*/React.createElement(IUIBox, {
     paddingLeft: "24px"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.recordValue, (_clsx = {}, _clsx[styles$4.lightLargeFont] = +userBulkImportInfo.total_records === 0, _clsx))
+    className: clsx(styles$5.recordValue, (_clsx = {}, _clsx[styles$5.lightLargeFont] = +userBulkImportInfo.total_records === 0, _clsx))
   }, userBulkImportInfo.total_records))), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
-    className: styles$4.rightBorder,
+    className: styles$5.rightBorder,
     lg: 3,
     md: 3,
     xl: 3
@@ -7901,22 +8617,22 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       gap: '45px'
     }
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.mildText
+    className: styles$5.mildText
   }, "Valid new records"), +userBulkImportInfo.success > 0 && /*#__PURE__*/React.createElement(IUIIconButton, {
     onClick: function onClick() {
       return handleDownloadRecords('success');
     },
-    className: styles$4.buttonTopalignment
+    className: styles$5.buttonTopalignment
   }, /*#__PURE__*/React.createElement(DownloadIcon, {
     width: "11",
     height: "14"
   }))), /*#__PURE__*/React.createElement(IUIBox, {
     paddingLeft: "24px"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.recordValue, (_clsx2 = {}, _clsx2[styles$4.lightLargeFont] = +userBulkImportInfo.success === 0, _clsx2))
+    className: clsx(styles$5.recordValue, (_clsx2 = {}, _clsx2[styles$5.lightLargeFont] = +userBulkImportInfo.success === 0, _clsx2))
   }, userBulkImportInfo.success))), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
-    className: styles$4.rightBorder,
+    className: styles$5.rightBorder,
     lg: 3,
     md: 3,
     xl: 3
@@ -7929,19 +8645,19 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       gap: '45px'
     }
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.mildText
+    className: styles$5.mildText
   }, "Valid existing records"), +userBulkImportInfo.exist_users > 0 && /*#__PURE__*/React.createElement(IUIIconButton, {
     onClick: function onClick() {
       return handleDownloadRecords('exist');
     },
-    className: styles$4.buttonTopalignment
+    className: styles$5.buttonTopalignment
   }, /*#__PURE__*/React.createElement(DownloadIcon, {
     width: "11",
     height: "14"
   }))), /*#__PURE__*/React.createElement(IUIBox, {
     paddingLeft: "24px"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.recordValue, (_clsx3 = {}, _clsx3[styles$4.lightLargeFont] = +userBulkImportInfo.exist_users === 0, _clsx3))
+    className: clsx(styles$5.recordValue, (_clsx3 = {}, _clsx3[styles$5.lightLargeFont] = +userBulkImportInfo.exist_users === 0, _clsx3))
   }, userBulkImportInfo.exist_users))), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     lg: 3,
@@ -7956,26 +8672,26 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       gap: '45px'
     }
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.mildText
+    className: styles$5.mildText
   }, "Invalid records"), +userBulkImportInfo.failure > 0 && /*#__PURE__*/React.createElement(IUIIconButton, {
     onClick: function onClick() {
       return handleDownloadRecords('failure');
     },
-    className: styles$4.buttonTopalignment
+    className: styles$5.buttonTopalignment
   }, /*#__PURE__*/React.createElement(DownloadIcon, {
     width: "11",
     height: "14"
   }))), /*#__PURE__*/React.createElement(IUIBox, {
     paddingLeft: "24px"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.recordValue, (_clsx4 = {}, _clsx4[styles$4.lightLargeFont] = +userBulkImportInfo.failure === 0, _clsx4))
+    className: clsx(styles$5.recordValue, (_clsx4 = {}, _clsx4[styles$5.lightLargeFont] = +userBulkImportInfo.failure === 0, _clsx4))
   }, userBulkImportInfo.failure)))), +userBulkImportInfo.failure > 0 && /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.validationLine
+    className: styles$5.validationLine
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "span",
     display: "inline-flex"
   }, /*#__PURE__*/React.createElement(ErrorIcon, null)), +userBulkImportInfo.failure === 1 ? userBulkImportInfo.failure + ' record failed validation' : userBulkImportInfo.failure + ' records failed validation'), /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.descText),
+    className: clsx(styles$5.descText),
     style: {
       paddingLeft: '27px'
     }
@@ -7995,9 +8711,9 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     type: "text",
     onClick: importUserHandler
   }))), (+userBulkImportInfo.success > 0 || +userBulkImportInfo.exist_users > 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIDivider, {
-    className: styles$4.divider
+    className: styles$5.divider
   }), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.validationLine
+    className: styles$5.validationLine
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "span",
     display: "inline-flex"
@@ -8006,7 +8722,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     height: "16",
     color: "#059669"
   })), handleSuccessTitle()), /*#__PURE__*/React.createElement(IUITypography, {
-    className: clsx(styles$4.descText),
+    className: clsx(styles$5.descText),
     style: {
       paddingLeft: '27px'
     }
@@ -8021,7 +8737,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
       checked: canUpdateExistingUsers
     }),
     label: "Update any existing users",
-    className: clsx(styles$4.checkboxlabel, (_clsx5 = {}, _clsx5[styles$4.disabledText] = +userBulkImportInfo.exist_users === 0, _clsx5)),
+    className: clsx(styles$5.checkboxlabel, (_clsx5 = {}, _clsx5[styles$5.disabledText] = +userBulkImportInfo.exist_users === 0, _clsx5)),
     disabled: +userBulkImportInfo.exist_users === 0
   })), /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
@@ -8035,17 +8751,17 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     onClick: handleImportUploadRecords,
     disabled: importStatus === 1
   }))))), importStatus === 3 && /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$4.completedContainer
+    className: styles$5.completedContainer
   }, /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.importStatus
+    className: styles$5.importStatus
   }, "Import was successful")), /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$4.recordRow
+    className: styles$5.recordRow
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.numberText
+    className: styles$5.numberText
   }, userBulkImportInfo.total_records, /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.total_records === 1 ? 'total record' : 'total records', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
@@ -8057,7 +8773,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     justifyContent: "space-between",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.numberText
+    className: styles$5.numberText
   }, userBulkImportInfo.success, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.success === 1 ? 'new user added ' : 'new users added ', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
@@ -8069,7 +8785,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     justifyContent: "space-between",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.numberText
+    className: styles$5.numberText
   }, userBulkImportInfo.exist_users, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.exist_users === 1 ? 'existing user updated' : 'existing users updated', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
@@ -8081,7 +8797,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     justifyContent: "space-between",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.numberText
+    className: styles$5.numberText
   }, userBulkImportInfo.failure, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +userBulkImportInfo.failure === 1 ? 'invalid record' : 'invalid records', ' ')), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Download records",
     type: "text",
@@ -8101,7 +8817,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
     flexDirection: "column",
-    className: styles$4.colGap,
+    className: styles$5.colGap,
     padding: "40px 0px"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
@@ -8110,21 +8826,21 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     },
     alignItems: "center"
   }, customStatus()), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoLbl
+    className: styles$5.infoLbl
   }, "Import ID"), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoText
+    className: styles$5.infoText
   }, userBulkImportInfo.import_id)), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoLbl
+    className: styles$5.infoLbl
   }, "File name"), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoText
+    className: styles$5.infoText
   }, userBulkImportInfo.file_name)), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoLbl
+    className: styles$5.infoLbl
   }, "File uploaded by"), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoText
+    className: styles$5.infoText
   }, userBulkImportInfo.uploaded_by.first_name + ' ' + userBulkImportInfo.uploaded_by.last_name)), /*#__PURE__*/React.createElement(IUIBox, null, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoLbl
+    className: styles$5.infoLbl
   }, "Import confirmed by"), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$4.infoText
+    className: styles$5.infoText
   }, userBulkImportInfo.uploaded_by.first_name + ' ' + userBulkImportInfo.uploaded_by.last_name))))), /*#__PURE__*/React.createElement(BulkUploadModal, {
     isOpenImportUsersModal: isOpenImportUsersModal,
     closeImportUsersModal: closeImportUsersModal,
@@ -8183,7 +8899,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
       return /*#__PURE__*/React.createElement(IUIBox, {
         component: "div"
       }, row.history_info.upload_id && /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText, styles$4.textTransform)
+        className: clsx(styles$5.rowText, styles$5.textTransform)
       }, row.history_info.upload_id));
     }
   }, {
@@ -8195,7 +8911,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
       return /*#__PURE__*/React.createElement(IUIBox, {
         component: "div"
       }, row.history_info && /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText, styles$4.textTransform)
+        className: clsx(styles$5.rowText, styles$5.textTransform)
       }, row.history_info.type));
     }
   }, {
@@ -8211,9 +8927,9 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
           gap: '8px'
         }
       }, row.history_info && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText, styles$4.textTransform)
+        className: clsx(styles$5.rowText, styles$5.textTransform)
       }, getLocaleTime(row.history_info.date_of_upload + ' ' + row.history_info.time_of_upload, row.history_info.date_format)[0]), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText, styles$4.textTransform, styles$4.lightColor)
+        className: clsx(styles$5.rowText, styles$5.textTransform, styles$5.lightColor)
       }, getLocaleTime(row.history_info.date_of_upload + ' ' + row.history_info.time_of_upload, row.history_info.date_format)[1])));
     }
   }, {
@@ -8225,7 +8941,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
       return /*#__PURE__*/React.createElement(IUIBox, {
         component: "div"
       }, row.history_info && /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText, styles$4.textTransform)
+        className: clsx(styles$5.rowText, styles$5.textTransform)
       }, row.history_info.uploader_first_name, ' ', row.history_info.uploader_last_name));
     }
   }, {
@@ -8257,7 +8973,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
         width: "11",
         height: "14"
       })), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText)
+        className: clsx(styles$5.rowText)
       }, row.history_info.total_users, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +row.history_info.total_users === 1 ? ' total record' : ' total records '))), +row.history_info.valid_users > 0 && /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
         display: "flex",
@@ -8274,7 +8990,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
         width: "11",
         height: "14"
       })), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText)
+        className: clsx(styles$5.rowText)
       }, row.history_info.valid_users, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +row.history_info.valid_users === 1 ? '  new user can be added ' : '  new users can be added '))), +row.history_info.exist_users > 0 && /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
         display: "flex",
@@ -8291,7 +9007,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
         width: "11",
         height: "14"
       })), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText)
+        className: clsx(styles$5.rowText)
       }, row.history_info.exist_users, ' ', /*#__PURE__*/React.createElement("span", null, ' ', +row.history_info.exist_users === 1 ? '  existing user can be updated ' : '  existing users can be updated  '))), +row.history_info.invalid_users > 0 && /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
         display: "flex",
@@ -8308,7 +9024,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
         width: "11",
         height: "14"
       })), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText)
+        className: clsx(styles$5.rowText)
       }, row.history_info.invalid_users + ' ', /*#__PURE__*/React.createElement("span", null, ' ', +row.history_info.invalid_users === 1 ? '  invalid record' : '  invalid records')))));
     }
   }, {
@@ -8325,7 +9041,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
           gap: '5px'
         }
       }, row.history_info && /*#__PURE__*/React.createElement(React.Fragment, null, getStatusIcon(row.history_info.status.toLowerCase()), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$4.rowText, styles$4.textTransform, styles$4.lightColor)
+        className: clsx(styles$5.rowText, styles$5.textTransform, styles$5.lightColor)
       }, row.history_info.status)));
     }
   }];
@@ -8348,7 +9064,7 @@ var BulkActionHistoryTable = function BulkActionHistoryTable(props) {
   });
 };
 
-var styles$6 = {"UUICustomFields":"_tdVCY","pageHeader":"_8iQvL","buttonWrapper":"_2k_GJ","headingWrapper":"_1rYVz","heading":"_2nxXO","headingLarge":"_2auvl","headingMedium":"_Wjaw1","headingSmall":"_1UmTe","description":"_2BS2i","headerText":"_3SZ_X","letterImage":"_2AwAF","tablewrapper":"_3qSxj","rowText":"_2ZSw6","textTransform":"_1F6ss","lightColor":"_2Wjom","importModalBodyContainer":"_2JCWP","dividerColor":"_3EsJG","downloadTemplateContainer":"_2uRic","downloadTemplateDescContainer":"_55kg5","labelContainer":"_78mCn","downlTempHeader":"_lqUA2","downlTempDescription":"_1vT5l","colGap":"_1x_9W","tableHead":"_5SygC","actionButtons":"_3PeqN","emptyData":"_1bHs-","buttonWidth":"_2W2Jo","iconLayout":"_31IgO","baseAlert":"_342t1","iconStyle":"_3hgYk"};
+var styles$7 = {"UUICustomFields":"_tdVCY","pageHeader":"_8iQvL","buttonWrapper":"_2k_GJ","headingWrapper":"_1rYVz","heading":"_2nxXO","headingLarge":"_2auvl","headingMedium":"_Wjaw1","headingSmall":"_1UmTe","description":"_2BS2i","headerText":"_3SZ_X","letterImage":"_2AwAF","tablewrapper":"_3qSxj","rowText":"_2ZSw6","textTransform":"_1F6ss","lightColor":"_2Wjom","importModalBodyContainer":"_2JCWP","dividerColor":"_3EsJG","downloadTemplateContainer":"_2uRic","downloadTemplateDescContainer":"_55kg5","labelContainer":"_78mCn","downlTempHeader":"_lqUA2","downlTempDescription":"_1vT5l","colGap":"_1x_9W","tableHead":"_5SygC","actionButtons":"_3PeqN","emptyData":"_1bHs-","buttonWidth":"_2W2Jo","iconLayout":"_31IgO","baseAlert":"_342t1","iconStyle":"_3hgYk"};
 
 function SkeletonLoader(_ref) {
   var _ref$data = _ref.data,
@@ -8373,7 +9089,7 @@ function SkeletonLoader(_ref) {
       }
     }] : _ref$data;
   return /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$6.tablewrapper,
+    className: styles$7.tablewrapper,
     style: {
       margin: 20
     }
@@ -8382,7 +9098,7 @@ function SkeletonLoader(_ref) {
   }));
 }
 
-var IUIToastMessageService$6 = services.IUIToastMessageService;
+var IUIToastMessageService$8 = services.IUIToastMessageService;
 var env$6 = configs.env;
 var BulkActionHistory = function BulkActionHistory(_ref) {
   var config = _ref.config;
@@ -8469,12 +9185,12 @@ var BulkActionHistory = function BulkActionHistory(_ref) {
       return Promise.resolve(dispatch(downloadUploadedRecords(type, jobId)).then(function (validatedRes) {
         var _validatedRes$data;
         if ((_validatedRes$data = validatedRes.data) !== null && _validatedRes$data !== void 0 && _validatedRes$data.status) {
-          dispatch(downloadExecutionJob(validatedRes.data.audit_id, 'status')).then(function (res) {
+          dispatch(_downloadExecutionJob(validatedRes.data.audit_id, 'status')).then(function (res) {
             window.open(res.data.presigned_url, '_self').focus();
           })["catch"](function (reject) {
             if (reject) {
               if (!reject.response.data.status) {
-                IUIToastMessageService$6.warningNotify(reject.response.data.message);
+                IUIToastMessageService$8.warningNotify(reject.response.data.message);
               }
             }
           })["finally"](function () {
@@ -8484,7 +9200,7 @@ var BulkActionHistory = function BulkActionHistory(_ref) {
       })["catch"](function (reject) {
         if (reject) {
           if (!reject.response.data.status) {
-            IUIToastMessageService$6.warningNotify(reject.response.data.message);
+            IUIToastMessageService$8.warningNotify(reject.response.data.message);
             setDownlStatus(false);
           }
         }
@@ -8535,18 +9251,18 @@ var BulkActionHistory = function BulkActionHistory(_ref) {
   }, [isTokenVerified, isSearchingChangeTemp, isSortingChangeTemp]);
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$4.UUIUserManagementImport
+    className: styles$5.UUIUserManagementImport
   }, /*#__PURE__*/React.createElement(IUIBackdrop, {
     open: isApiFetching || isFileDownloading,
-    className: styles$4.backdrop
+    className: styles$5.backdrop
   }, /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit"
   })), loading ? /*#__PURE__*/React.createElement(SkeletonLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: clsx(styles$4.pageHeader)
+    className: clsx(styles$5.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$4.breadcrumb
+    className: styles$5.breadcrumb
   }, /*#__PURE__*/React.createElement(IUIBreadCrumb, {
     breadCrumbs: [{
       href: config.routes.users.list.path,
@@ -8565,14 +9281,14 @@ var BulkActionHistory = function BulkActionHistory(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$4.headingWrapper
+    className: styles$5.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
-    className: clsx(styles$4.heading, styles$4.headingLarge)
+    className: clsx(styles$5.heading, styles$5.headingLarge)
   }, "Bulk action history"))))), /*#__PURE__*/React.createElement(IUIDivider, {
-    className: styles$4.dividerColor
+    className: styles$5.dividerColor
   }), /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$4.tablewrapper
+    className: styles$5.tablewrapper
   }, /*#__PURE__*/React.createElement(BulkActionHistoryTable, {
     data: bulkActionFields,
     handleChangeRowsPerPage: handleChangeRowsPerPage,
@@ -8821,7 +9537,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
         secondaryText: row.email,
         letterAvatarTextColor: "black",
         letterAvatarBackgroundColor: "#d3d3d3",
-        avatarClassName: styles$5.avatarClassName,
+        avatarClassName: styles$6.avatarClassName,
         profilePath: row === null || row === void 0 ? void 0 : (_row$profile_pic = row.profile_pic) === null || _row$profile_pic === void 0 ? void 0 : _row$profile_pic.presigned_url
       }));
     }
@@ -8843,7 +9559,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
         },
         placement: "top-start"
       }, /*#__PURE__*/React.createElement("div", {
-        className: clsx(styles$5.tooltipTextDiv)
+        className: clsx(styles$6.tooltipTextDiv)
       }, "Invited")) : null);
     }
   }, {
@@ -8856,7 +9572,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
         component: "div",
         width: 100
       }, row.employee_info && /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform)
+        className: clsx(styles$6.rowText, styles$6.textTransform)
       }, row.employee_info.department));
     }
   }, {
@@ -8867,42 +9583,42 @@ var StickyHeadTable = function StickyHeadTable(props) {
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIBox, {
         component: "div"
-      }, row.products.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, row.products[0].role !== "Card Holder" ? /*#__PURE__*/React.createElement(IUIBox, {
+      }, row.products.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, !row.products[0].role.toLowerCase().includes("holder") ? /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform, styles$5.lightColor),
+        className: clsx(styles$6.rowText, styles$6.textTransform, styles$6.lightColor),
         style: {
           whiteSpace: 'nowrap'
         }
       }, row.products[0].name + ' / ' + ' '), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform),
+        className: clsx(styles$6.rowText, styles$6.textTransform),
         style: {
           whiteSpace: 'nowrap'
         }
-      }, "\xA0" + row.products[0].role)) : "", row.products[1] && row.products[1].role !== "Card Holder" && /*#__PURE__*/React.createElement(IUIBox, {
+      }, "\xA0" + row.products[0].role)) : "", row.products[1] && !row.products[1].role.toLowerCase().includes("holder") && /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform, styles$5.lightColor),
+        className: clsx(styles$6.rowText, styles$6.textTransform, styles$6.lightColor),
         style: {
           whiteSpace: 'nowrap'
         }
       }, row.products[1].name + ' / '), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform),
+        className: clsx(styles$6.rowText, styles$6.textTransform),
         style: {
           whiteSpace: 'nowrap'
         }
-      }, "\xA0" + row.products[1].role)), row.products[2] && row.products[2].role !== "Card Holder" && /*#__PURE__*/React.createElement(IUIBox, {
+      }, "\xA0" + row.products[1].role)), row.products[2] && !row.products[2].role.toLowerCase().includes("holder") && /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform, styles$5.lightColor),
+        className: clsx(styles$6.rowText, styles$6.textTransform, styles$6.lightColor),
         style: {
           whiteSpace: 'nowrap'
         }
       }, row.products[2].name + ' / '), /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform),
+        className: clsx(styles$6.rowText, styles$6.textTransform),
         style: {
           whiteSpace: 'nowrap'
         }
@@ -8915,7 +9631,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     cell: function cell(row) {
       return /*#__PURE__*/React.createElement(IUIFormGroup, null, /*#__PURE__*/React.createElement(IUITypography, {
         component: "div",
-        className: clsx(styles$5.rowText, styles$5.textTransform)
+        className: clsx(styles$6.rowText, styles$6.textTransform)
       }, /*#__PURE__*/React.createElement(IUIGrid, {
         component: "label",
         container: true,
@@ -9061,7 +9777,7 @@ var SingupRequests = function SingupRequests(props) {
         secondaryText: row.email,
         letterAvatarTextColor: "black",
         letterAvatarBackgroundColor: "#d3d3d3",
-        avatarClassName: styles$5.avatarClassName,
+        avatarClassName: styles$6.avatarClassName,
         profilePath: row === null || row === void 0 ? void 0 : (_row$profile_pic2 = row.profile_pic) === null || _row$profile_pic2 === void 0 ? void 0 : _row$profile_pic2.presigned_url
       }));
     }
@@ -9075,7 +9791,7 @@ var SingupRequests = function SingupRequests(props) {
         component: "div",
         width: 100
       }, /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$5.rowText, styles$5.textTransform)
+        className: clsx(styles$6.rowText, styles$6.textTransform)
       }, formatDate(row.created_at)));
     }
   }, {
@@ -9182,9 +9898,9 @@ function InviteInfoIcon() {
   }));
 }
 
-var IUIToastMessageService$7 = services.IUIToastMessageService;
+var IUIToastMessageService$9 = services.IUIToastMessageService;
 var env$7 = configs.env,
-  api$7 = configs.api;
+  api$9 = configs.api;
 var UndoButton = function UndoButton(_ref) {
   var onUndo = _ref.onUndo,
     msg = _ref.msg;
@@ -9380,7 +10096,7 @@ var UserList = function UserList(_ref2) {
   };
   var openDeactivateModal = function openDeactivateModal() {
     if (Object.values(selected).flat().length === 0 || Object.values(selected).flat() === undefined) {
-      IUIToastMessageService$7.warningNotify('Select at least one user to deactivate.');
+      IUIToastMessageService$9.warningNotify('Select at least one user to deactivate.');
       return false;
     }
     if (selectedUsersApprover.length) {
@@ -9419,9 +10135,9 @@ var UserList = function UserList(_ref2) {
     history.push(config.routes.users.add.path + "?" + config.routes.users.add.queryParamKeys.verifyUserId + "=" + userId);
   };
   var handleRejectUserClick = function handleRejectUserClick(userId) {
-    IUIToastMessageService$7.undoNotify( /*#__PURE__*/React.createElement(UndoButton, {
+    IUIToastMessageService$9.undoNotify(/*#__PURE__*/React.createElement(UndoButton, {
       onUndo: function onUndo() {
-        return IUIToastMessageService$7.setUndoClicked(true);
+        return IUIToastMessageService$9.setUndoClicked(true);
       },
       msg: "Sign-up request rejected"
     }), function (res) {
@@ -9443,7 +10159,7 @@ var UserList = function UserList(_ref2) {
           console.log(err);
         });
       }
-      IUIToastMessageService$7.setUndoClicked(false);
+      IUIToastMessageService$9.setUndoClicked(false);
     });
   };
   var handleBulkActionHistoryClick = function handleBulkActionHistoryClick() {
@@ -9549,7 +10265,7 @@ var UserList = function UserList(_ref2) {
     setIsDisabledSubmitBtn(true);
     setApproveeStatus(false);
     if (deactivateSingle === true) {
-      api$7.get(userAddEditUrl.transferAppover() + "user_id=" + user.id + "&page=1").then(function (response) {
+      api$9.get(userAddEditUrl.transferAppover() + "user_id=" + user.id + "&page=1").then(function (response) {
         if (response.data["default"].id) {
           setDefaultId(response.data["default"].id);
           setApproverRole({
@@ -9661,7 +10377,7 @@ var UserList = function UserList(_ref2) {
   var toggleInviteModal = function toggleInviteModal(ids, type, firstName, lastName) {
     if (type === undefined) {
       if (Object.values(selected).flat().length === 0 || Object.values(selected).flat() === undefined) {
-        IUIToastMessageService$7.warningNotify('Select at least one user to invite.');
+        IUIToastMessageService$9.warningNotify('Select at least one user to invite.');
         return false;
       }
     }
@@ -9696,12 +10412,12 @@ var UserList = function UserList(_ref2) {
       return Promise.resolve(dispatch(exportUsers()).then(function (validatedRes) {
         var _validatedRes$data;
         if ((_validatedRes$data = validatedRes.data) !== null && _validatedRes$data !== void 0 && _validatedRes$data.status) {
-          dispatch(downloadExecutionJob(validatedRes.data.audit_id, 'status')).then(function (res) {
+          dispatch(_downloadExecutionJob(validatedRes.data.audit_id, 'status')).then(function (res) {
             window.open(res.data.presigned_url, '_self').focus();
           })["catch"](function (reject) {
             if (reject) {
               if (!reject.response.data.status) {
-                IUIToastMessageService$7.warningNotify(reject.response.data.message);
+                IUIToastMessageService$9.warningNotify(reject.response.data.message);
               }
             }
           })["finally"](function () {
@@ -9711,7 +10427,7 @@ var UserList = function UserList(_ref2) {
       })["catch"](function (reject) {
         if (reject) {
           if (!reject.response.data.status) {
-            IUIToastMessageService$7.warningNotify(reject.response.data.message);
+            IUIToastMessageService$9.warningNotify(reject.response.data.message);
             setDownlStatus(false);
           }
         }
@@ -9830,14 +10546,14 @@ var UserList = function UserList(_ref2) {
   var topRightButtons = function topRightButtons() {
     return /*#__PURE__*/React.createElement(IUIBox, {
       component: "div",
-      className: styles$5.buttonWrapper,
+      className: styles$6.buttonWrapper,
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       alignSelf: "flex-start"
     }, /*#__PURE__*/React.createElement(IUIBox, {
       component: "div",
-      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+      className: clsx(styles$6.buttonSingle, styles$6.buttonLeft)
     }, /*#__PURE__*/React.createElement(IUIButton, {
       buttonText: "Export all users",
       type: "outlined",
@@ -9848,7 +10564,7 @@ var UserList = function UserList(_ref2) {
       onClick: handleExportUsers
     })), /*#__PURE__*/React.createElement(IUIBox, {
       component: "div",
-      className: clsx(styles$5.buttonSingle, styles$5.buttonLeft)
+      className: clsx(styles$6.buttonSingle, styles$6.buttonLeft)
     }, /*#__PURE__*/React.createElement(IUIDropdownButton, {
       buttonText: "Bulk actions",
       type: "outlined",
@@ -9869,12 +10585,12 @@ var UserList = function UserList(_ref2) {
   };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$5.UUIUserManagementList
+    className: styles$6.UUIUserManagementList
   }, overlayMenu ? /*#__PURE__*/React.createElement(Box, {
-    className: styles$5.scrollOverlayMenu
+    className: styles$6.scrollOverlayMenu
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: clsx(styles$5.pageHeader)
+    className: clsx(styles$6.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -9897,7 +10613,7 @@ var UserList = function UserList(_ref2) {
     onChangeHandler: function onChangeHandler(e) {
       return onSearchHandler(e.target.value);
     },
-    className: styles$5.overlaysearch
+    className: styles$6.overlaysearch
   })), topRightButtons()), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -9905,13 +10621,13 @@ var UserList = function UserList(_ref2) {
     alignItems: "center"
   }))) : '', !hasVerificationError ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBackdrop, {
     open: isFileDownloading || isApiFetching,
-    className: styles$5.backdrop
+    className: styles$6.backdrop
   }, /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit"
   })), isDataFetching ? /*#__PURE__*/React.createElement(SkeletonLoader, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIBox, {
     id: "table-root",
     component: "div",
-    className: clsx(styles$5.pageHeader)
+    className: clsx(styles$6.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -9930,23 +10646,23 @@ var UserList = function UserList(_ref2) {
     }
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$5.headingWrapper
+    className: styles$6.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
-    className: clsx(styles$5.heading, styles$5.headingLarge)
+    className: clsx(styles$6.heading, styles$6.headingLarge)
   }, isILadmin && companyName ? companyName + " - Users" : 'Users'))), topRightButtons()), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
   })), /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$5.tablewrapper
+    className: styles$6.tablewrapper
   }, /*#__PURE__*/React.createElement(IUITabs, {
     value: tabValue,
     customTabHandler: function customTabHandler(value) {
       return dispatch(updateTabValue(value));
     },
-    className: styles$5.user_list_page_tabs,
+    className: styles$6.user_list_page_tabs,
     tabs: [{
       label: /*#__PURE__*/React.createElement(IUIBox, null, "Current users", ' ', /*#__PURE__*/React.createElement(TabLabelCount, {
         count: userListInfo.count
@@ -9957,10 +10673,10 @@ var UserList = function UserList(_ref2) {
         }
       }, /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
-        className: styles$5.headingWrapper
+        className: styles$6.headingWrapper
       }, /*#__PURE__*/React.createElement(IUITypography, {
         variant: "body2",
-        className: clsx(styles$5.description)
+        className: clsx(styles$6.description)
       }, "Create new users, customize user permissions and manage user accounts")), /*#__PURE__*/React.createElement(StickyHeadTable, {
         data: userListInfo,
         handleChangeRowsPerPage: handleChangeRowsPerPage,
@@ -9993,10 +10709,10 @@ var UserList = function UserList(_ref2) {
         }
       }, /*#__PURE__*/React.createElement(IUIBox, {
         component: "div",
-        className: styles$5.headingSignUpWrapper
+        className: styles$6.headingSignUpWrapper
       }, /*#__PURE__*/React.createElement(IUITypography, {
         variant: "body2",
-        className: clsx(styles$5.description)
+        className: clsx(styles$6.description)
       }, "Verify and add users to allow them to start using ITILITE. Set up preferences for receiving sign up request updates in", ' ', /*#__PURE__*/React.createElement("span", {
         onClick: redirectToNotifications,
         className: clsx(config.routes.notification && 'iui__cursor-pointer iui__border--bottom_solid_black500-1')
@@ -10042,16 +10758,16 @@ var UserList = function UserList(_ref2) {
     headerText: "Deactivate this user?",
     width: "400px",
     subHanderText: "",
-    submitBtnClass: styles$5.deactivateBtn,
+    submitBtnClass: styles$6.deactivateBtn,
     isDisabledSubmitBtn: isDisabledSubmitBtn,
     modalClass: "deactivateSingleModal",
     modalBodyStyle: {
       overflowY: 'unset'
     }
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: clsx(styles$5.deactivateSingle, 'iui__mb-16')
+    className: clsx(styles$6.deactivateSingle, 'iui__mb-16')
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$5.deactivateAlert
+    className: styles$6.deactivateAlert
   }, /*#__PURE__*/React.createElement(InfoYellowIcon, {
     width: "9",
     height: "9"
@@ -10100,29 +10816,29 @@ var UserList = function UserList(_ref2) {
     alignItems: "center",
     flexDirection: "column",
     padding: "27px 16px 27px",
-    className: styles$5.deActivateModalContainer
+    className: styles$6.deActivateModalContainer
   }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.headerText
+    className: styles$6.headerText
   }, 'Are you sure you want to deactivate ' + Object.values(selected).flat().length.toString() + (Object.values(selected).flat().length === 1 ? ' user ?' : ' users ?')), /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles$5.description
+    className: styles$6.description
   }, "The", ' ', Object.values(selected).flat().length === 1 ? ' user ' : ' users ', "won\u2019t be able to access itilite platform"))), /*#__PURE__*/React.createElement(IUIModal, {
     isOpen: isBulkDeactivateModalOpen,
     closeHandler: closeDeActiveModal,
     cancelLabel: "Cancel",
     submitLabel: "Deactivate safe users",
     isDisabledSubmitBtn: !((selectedUsersNotApprover === null || selectedUsersNotApprover === void 0 ? void 0 : selectedUsersNotApprover.length) > 0),
-    submitBtnClass: clsx(styles$5.deactivateSubmitBtn),
+    submitBtnClass: clsx(styles$6.deactivateSubmitBtn),
     customButtonLabel: "Deactivate all users",
     customButtonHandler: handleDeactivateUsers,
     submitHandler: handleDeactivateSafeUsers,
     width: "640px",
-    customButtonClass: clsx(styles$5.deactivateCustomButtonClass),
+    customButtonClass: clsx(styles$6.deactivateCustomButtonClass),
     headerText: "Deactivate users?",
     modalBodyStyle: {
       maxHeight: 'calc(100vh - 50vh)'
     }
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: clsx(styles$5.deactivateAlert, styles$5.warningSvg)
+    className: clsx(styles$6.deactivateAlert, styles$6.warningSvg)
   }, /*#__PURE__*/React.createElement(RedWarningIcon, {
     color: "#9A6700",
     size: "14"
@@ -10234,7 +10950,7 @@ var UserList = function UserList(_ref2) {
 var TabLabelCount = function TabLabelCount(_ref5) {
   var count = _ref5.count;
   return /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$5.TabLabelCount
+    className: styles$6.TabLabelCount
   }, " ", count, " ");
 };
 var index$2 = withStore(UserList);
@@ -10255,7 +10971,7 @@ function Header(props) {
     isILadmin = _useSelector.isILadmin;
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: clsx(styles$5.pageHeader)
+    className: clsx(styles$6.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -10274,19 +10990,19 @@ function Header(props) {
     }
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$5.headingWrapper
+    className: styles$6.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
-    className: clsx(styles$5.heading, styles$5.headingLarge)
+    className: clsx(styles$6.heading, styles$6.headingLarge)
   }, isILadmin === 1 && companyName !== null && companyName + " - ", ' ', headingName)), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$5.headingWrapper
+    className: styles$6.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "body2",
-    className: clsx(styles$5.description)
+    className: clsx(styles$6.description)
   }, subHeading))), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$5.buttonWrapper,
+    className: styles$6.buttonWrapper,
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
@@ -10307,7 +11023,7 @@ function Header(props) {
   })));
 }
 
-var styles$7 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","rowText":"_2XKxl","lightColor":"_3uyfh","buttonWidth":"_13tv0","readOnlyInput":"_3yYuQ","addUserButton":"_1zbr_","alertDescContainer":"_3h8DM","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5","headingWrapper":"_20Qv9","pageHeader":"_36au5","description":"_tULrl","headerText":"_3W_ZV","tableContainer":"_3xdGF"};
+var styles$8 = {"sidebar__container":"_1EFxC","sidebar__wrapper":"_3Mk3_","sidebar__navlinks":"_29KVG","sidebar__navlinks-title":"_2Eg7m","MuiListItem-button":"_3yWwI","Mui-selected":"_3Ou88","rowText":"_2XKxl","lightColor":"_3uyfh","buttonWidth":"_13tv0","readOnlyInput":"_3yYuQ","addUserButton":"_1zbr_","alertDescContainer":"_3h8DM","onBoardText":"_HUoW-","iconStyle":"_3k0Fb","iconLayout":"_v3GT2","baseAlert":"_12zY5","headingWrapper":"_20Qv9","pageHeader":"_36au5","description":"_tULrl","headerText":"_3W_ZV","tableContainer":"_3xdGF"};
 
 function Listview(_ref) {
   var data = _ref.data,
@@ -10360,19 +11076,19 @@ function Listview(_ref) {
         display: "flex"
       }, /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Edit",
-        className: styles$7.buttonWidth,
+        className: styles$8.buttonWidth,
         onClick: function onClick() {
           return handleEditDialog(row);
         }
       }), row.no_of_users > 0 ? /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
-        className: styles$7.buttonWidth,
+        className: styles$8.buttonWidth,
         onClick: function onClick() {
           return handleDeleteDialog(row, true);
         }
       }) : /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
-        className: styles$7.buttonWidth,
+        className: styles$8.buttonWidth,
         onClick: function onClick() {
           return handleDeleteDialog(row, false);
         }
@@ -10398,7 +11114,7 @@ function Listview(_ref) {
       return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(IUIBox, {
         component: "div"
       }, deptHeadDetails(row)), row.is_default_dept_head && /*#__PURE__*/React.createElement(IUITypography, {
-        className: clsx(styles$7.rowText, styles$7.textTransform, styles$7.lightColor)
+        className: clsx(styles$8.rowText, styles$8.textTransform, styles$8.lightColor)
       }, "Assigned by default"));
     }
   }, {
@@ -10420,19 +11136,19 @@ function Listview(_ref) {
         display: "flex"
       }, /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Edit",
-        className: styles$7.buttonWidth,
+        className: styles$8.buttonWidth,
         onClick: function onClick() {
           return handleEditDialog(row);
         }
       }), row.no_of_users > 0 ? /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
-        className: styles$7.buttonWidth,
+        className: styles$8.buttonWidth,
         onClick: function onClick() {
           return handleDeleteDialog(row, true);
         }
       }) : /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
-        className: styles$7.buttonWidth,
+        className: styles$8.buttonWidth,
         onClick: function onClick() {
           return handleDeleteDialog(row, false);
         }
@@ -10441,7 +11157,7 @@ function Listview(_ref) {
   }];
   return /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(IUIBox, {
     p: 3,
-    className: data !== null && data !== void 0 && data.results && data.results.length > 0 && data.results[0].code === UNASSIGNED_USERS ? styles$7.tableContainer : ''
+    className: data !== null && data !== void 0 && data.results && data.results.length > 0 && data.results[0].code === UNASSIGNED_USERS ? styles$8.tableContainer : ''
   }, /*#__PURE__*/React.createElement(IUITable, {
     searchHide: true,
     hasFilter: true,
@@ -10572,11 +11288,11 @@ function EditPanelDialog(_ref) {
     justifyContent: "center",
     alignItems: "center",
     flexDirection: "column",
-    className: styles$7.baseAlert
+    className: styles$8.baseAlert
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$7.alertDescContainer
+    className: styles$8.alertDescContainer
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$7.iconLayout,
+    className: styles$8.iconLayout,
     style: {
       paddingTop: '4px'
     }
@@ -10584,7 +11300,7 @@ function EditPanelDialog(_ref) {
     color: "#CA8A04",
     width: "25",
     height: "20",
-    className: styles$7.iconStyle
+    className: styles$8.iconStyle
   })), /*#__PURE__*/React.createElement(IUILabel, {
     label: "By default, the primary admin gets assigned as the department head. This department has no users, so to change department head, add a new user.",
     style: {
@@ -10599,7 +11315,7 @@ function EditPanelDialog(_ref) {
       color: "#EC5D25"
     }),
     onClick: handleAddPageNavigation,
-    className: styles$7.addUserButton
+    className: styles$8.addUserButton
   }))), /*#__PURE__*/React.createElement(IUIInput, {
     label: name + " name",
     name: "name",
@@ -10696,14 +11412,14 @@ function MoveUserDialog(_ref) {
     flexDirection: "column"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
-    className: styles$7.baseAlert
+    className: styles$8.baseAlert
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$7.iconLayout
+    className: styles$8.iconLayout
   }, /*#__PURE__*/React.createElement(BoldInfoIcon, {
     color: "#CA8A04",
     width: "25",
     height: "20",
-    className: styles$7.iconStyle
+    className: styles$8.iconStyle
   })), /*#__PURE__*/React.createElement(IUILabel, {
     label: data.name + " cannot be deleted as it is linked with some users. You can delete this " + ((_labelData$module = labelData.module) === null || _labelData$module === void 0 ? void 0 : _labelData$module.toLowerCase()) + " only once you move the users to a different " + ((_labelData$module2 = labelData.module) === null || _labelData$module2 === void 0 ? void 0 : _labelData$module2.toLowerCase()) + ".",
     style: {
@@ -10772,11 +11488,11 @@ function DeletePanelModal$1(_ref) {
     alignItems: "center",
     flexDirection: "column"
   }, /*#__PURE__*/React.createElement(IUITypography, null, /*#__PURE__*/React.createElement("span", {
-    className: styles$7.onBoardText
+    className: styles$8.onBoardText
   }, data.name), " cannot be deleted as it is linked with some users. To delete this", ' ', labelData.module, ", you must add a new ", labelData.module, " and then move the users to the new ", labelData.module, "."))));
 }
 
-var IUIToastMessageService$8 = services.IUIToastMessageService;
+var IUIToastMessageService$a = services.IUIToastMessageService;
 var UserPanel = function UserPanel(_ref) {
   var title = _ref.title,
     headingName = _ref.headingName,
@@ -10982,7 +11698,7 @@ var UserPanel = function UserPanel(_ref) {
     }
     dispatch(userPanelShowLoader());
     dispatch(dispatchFun(tableName, payload, getApiData(), optionalParams)).then(function (res) {
-      IUIToastMessageService$8.sNotify(type === 'move' ? res.data.message : "" + message);
+      IUIToastMessageService$a.sNotify(type === 'move' ? res.data.message : "" + message);
       dispatch(userPanelStopLoader());
       if (type === 'delete') {
         closeDeleteModal();
@@ -11070,7 +11786,7 @@ var UserPanel = function UserPanel(_ref) {
   };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$5.UUIUserManagementList
+    className: styles$6.UUIUserManagementList
   }, hasVerificationError === false ? /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(Header, {
     name: title,
     headingName: headingName,
@@ -11235,14 +11951,14 @@ var DeleteCustomFieldModal = function DeleteCustomFieldModal(_ref) {
     flexDirection: "column"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     display: "flex",
-    className: styles$6.baseAlert
+    className: styles$7.baseAlert
   }, /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$6.iconLayout
+    className: styles$7.iconLayout
   }, /*#__PURE__*/React.createElement(BoldInfoIcon, {
     color: "#CA8A04",
     width: "25",
     height: "20",
-    className: styles$6.iconStyle
+    className: styles$7.iconStyle
   })), /*#__PURE__*/React.createElement(IUILabel, {
     label: "User data associated with the custom field \"" + data.field_name + "\" will get lost. It may also affect the reporting and rules associated with the field.",
     style: {
@@ -11270,7 +11986,7 @@ var PageHeader = function PageHeader() {
   };
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: clsx(styles$6.pageHeader)
+    className: clsx(styles$7.pageHeader)
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
     display: "flex",
@@ -11278,13 +11994,13 @@ var PageHeader = function PageHeader() {
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$6.headingWrapper
+    className: styles$7.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "h3",
-    className: clsx(styles$6.heading, styles$6.headingLarge)
+    className: clsx(styles$7.heading, styles$7.headingLarge)
   }, isILadmin && companyName ? companyName + " - " : '', "Custom fields")), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$6.buttonWrapper,
+    className: styles$7.buttonWrapper,
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
@@ -11307,10 +12023,10 @@ var PageHeader = function PageHeader() {
     alignItems: "center"
   }), /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$6.headingWrapper
+    className: styles$7.headingWrapper
   }, /*#__PURE__*/React.createElement(IUITypography, {
     variant: "body2",
-    className: clsx(styles$6.description)
+    className: clsx(styles$7.description)
   }, "Configure fields based on the information you require from your employees in their profile")), /*#__PURE__*/React.createElement(AddCustomFieldModal, {
     isOpenModal: isOpenModal,
     closeModalHandler: function closeModalHandler() {
@@ -11372,13 +12088,13 @@ function Table() {
         display: "flex"
       }, /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Edit",
-        className: styles$6.buttonWidth,
+        className: styles$7.buttonWidth,
         onClick: function onClick() {
           return handleEdit(row);
         }
       }), /*#__PURE__*/React.createElement(IUIButton, {
         buttonText: "Delete",
-        className: styles$6.buttonWidth,
+        className: styles$7.buttonWidth,
         onClick: function onClick() {
           return handleDelete(row);
         }
@@ -11386,7 +12102,7 @@ function Table() {
     }
   }];
   return /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles$6.tablewrapper
+    className: styles$7.tablewrapper
   }, /*#__PURE__*/React.createElement(IUITable, {
     hasFilter: false,
     isCheckboxTable: false,
@@ -11425,7 +12141,7 @@ var CustomFields$1 = function CustomFields(_ref) {
   }, [isTokenVerified]);
   return /*#__PURE__*/React.createElement(IUIBox, {
     component: "div",
-    className: styles$6.UUICustomFields
+    className: styles$7.UUICustomFields
   }, /*#__PURE__*/React.createElement(PageHeader, null), loading ? /*#__PURE__*/React.createElement(SkeletonLoader, {
     data: [{
       variant: 'rect',