@itilite/iui-user-management 1.4.0 → 1.4.2

package/dist/index.js

@@ -35,6 +35,37 @@ function _extends() {
   };
   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 _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;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
 var _Pact = /*#__PURE__*/function () {
   function _Pact() {}
@@ -392,6 +423,12 @@ var userAddEditUrl = {
   },
   undoRejectUserVerification: function undoRejectUserVerification(userId) {
     return "api/v1/onboarding/user-signup-reject/" + userId + "?action=undo";
+  },
+  cardsEditUserDetails: function cardsEditUserDetails(userId) {
+    return env.getCardsapiURL() + "/authorization/user/" + userId;
+  },
+  cardsAddUsersDetails: function cardsAddUsersDetails() {
+    return env.getCardsapiURL() + "/authorization/company/" + IUILocalStorageService.getCompanyId() + "/roles";
   }
 };
 var userListUrl = {
@@ -794,6 +831,7 @@ var styles$1 = {"card":"_3_S9J","cardNumber":"_36E9M","cardDigit":"_2pm-T","expi
 var SHOW_LOADER = 'SHOW_LOADER';
 var STOP_LOADER = 'STOP_LOADER';
 var SET_RENDER_FIELDS = 'SET_RENDER_FIELDS';
+var SET_CARDS_DETAILS = 'SET_CARDS_DETAILS';
 var SET_CUSTOM_FIELD = 'SET_CUSTOM_FIELD';
 var SET_TRAVEL_APPROVER_FIELD = 'SET_TRAVEL_APPROVER_FIELD';
 var SET_EXPENSE_APPROVER_FIELD = 'SET_EXPENSE_APPROVER_FIELD';
@@ -838,9 +876,15 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
       if (payload.productAccess.expense) {
         product.expense = payload.expenseRole || null;
       }
+      if (payload.productAccess.card) {
+        var splitRole = payload.cardsRole.split(":");
+        var cardsUsmRole = splitRole[2];
+        product.card = cardsUsmRole || null;
+      }
       return product;
     }(),
-    approvers: {}
+    approvers: {},
+    requested_user_is_admin: payload.isCardsAdmin
   };
   var userTags = [];
   for (var key in payload.userTagType) {
@@ -932,13 +976,20 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
   var res = {
     fields: {
       user_personal_info: {},
-      employee_info: {}
+      employee_info: {},
+      requested_user_is_admin: payload.isCardsAdmin
     }
   };
   if (!env$1.isProfilePage()) {
     res.fields.product = function () {
-      if (payload.productAccess.travel && payload.productAccess.expense) {
+      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.card) {
+        return 'expense+card';
+      } else if (payload.productAccess.travel && payload.productAccess.card) {
+        return 'travel+card';
       } else if (payload.productAccess.travel) {
         return 'travel';
       } else {
@@ -953,6 +1004,11 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
       if (payload.productAccess.expense) {
         roles.expense = payload.expenseRole;
       }
+      if (payload.productAccess.card) {
+        var splitRole = payload.cardsRole.split(":");
+        var cardsUsmRole = splitRole[2];
+        roles.card = cardsUsmRole;
+      }
       return roles;
     }();
     res.fields.custom_attributes = payload.customFieldsInput;
@@ -1291,6 +1347,12 @@ var setRenderFields = function setRenderFields(payload) {
     payload: payload
   };
 };
+var setCardsDetails = function setCardsDetails(payload) {
+  return {
+    type: SET_CARDS_DETAILS,
+    payload: payload
+  };
+};
 var setCustomField = function setCustomField(payload) {
   return {
     type: SET_CUSTOM_FIELD,
@@ -3193,6 +3255,12 @@ var products = [{
   name: 'expense',
   type: 'checkbox',
   disableText: 'Please get in touch with your administrator to change this value.'
+}, {
+  id: 3,
+  label: 'Card',
+  name: 'card',
+  type: 'checkbox',
+  disableText: 'Please get in touch with your administrator to change this value.'
 }];
 var dropdownList = {
   gender: [{
@@ -3363,6 +3431,34 @@ var expenseConstants = {
     disableText: 'Please get in touch with your administrator to change this value.'
   }]
 };
+var cardsConstants = {
+  heading: 'Card specific information',
+  roleHeading: 'Card role',
+  roleDescription: 'Roles allow users to only access relevant features and functionalities',
+  roles: [{
+    id: 1,
+    label: 'Card holder',
+    description: 'Can view own cards and transactions.',
+    value: '',
+    name: '',
+    type: 'radio',
+    isAssigned: false,
+    fullWidth: false,
+    visibility: true,
+    disableText: 'Please get in touch with your administrator to change this value.'
+  }, {
+    id: 2,
+    label: 'Card admin',
+    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',
+    isAssigned: false,
+    fullWidth: false,
+    visibility: true,
+    disableText: 'Please get in touch with your administrator to change this value.'
+  }]
+};
 var passportInfo = [{
   id: 1,
   label: 'Passport issuing country',
@@ -3592,6 +3688,12 @@ var initialState = {
     travelConstants: travelConstants,
     expenseConstants: expenseConstants
   },
+  isCardsDetailsRendered: false,
+  isCardsAdmin: false,
+  cardsDetails: {
+    cardsRoles: cardsConstants.roles,
+    cardsConstants: cardsConstants
+  },
   dropdownList: dropdownList,
   maxTravelApprovers: 10,
   maxExpenseApprovers: 10,
@@ -3758,11 +3860,37 @@ var reducer = function reducer(state, action) {
           isRendered: true
         });
       }
+    case SET_CARDS_DETAILS:
+      {
+        var _action$payload8, _action$payload8$role, _action$payload9;
+        var cardsDetails = _extends({}, state.cardsDetails);
+        if (action !== null && action !== void 0 && (_action$payload8 = action.payload) !== null && _action$payload8 !== void 0 && (_action$payload8$role = _action$payload8.roles) !== null && _action$payload8$role !== void 0 && _action$payload8$role.length) {
+          cardsDetails.cardsRoles = action.payload.roles.map(function (role) {
+            return {
+              id: role.id,
+              label: role.name,
+              description: role.description,
+              value: role.value,
+              isAssigned: role.is_assigned,
+              name: role.value,
+              type: 'radio',
+              fullWidth: false,
+              visibility: true,
+              disableText: 'Please get in touch with your administrator to change this value.'
+            };
+          });
+        }
+        return _extends({}, state, {
+          cardsDetails: cardsDetails,
+          isCardsDetailsRendered: true,
+          isCardsAdmin: action === null || action === void 0 ? void 0 : (_action$payload9 = action.payload) === null || _action$payload9 === void 0 ? void 0 : _action$payload9.requested_user_is_admin
+        });
+      }
     case SET_STATIC_FIELDS_VISIBILITY:
       {
         var _personalInfo = state.renderFields.personalInfo.map(function (input) {
-          var _action$payload8;
-          if (action !== null && action !== void 0 && action.payload && Object.hasOwnProperty.call(action.payload, input.name) && action !== null && action !== void 0 && (_action$payload8 = action.payload) !== null && _action$payload8 !== void 0 && _action$payload8[input.name]) {
+          var _action$payload10;
+          if (action !== null && action !== void 0 && action.payload && Object.hasOwnProperty.call(action.payload, input.name) && action !== null && action !== void 0 && (_action$payload10 = action.payload) !== null && _action$payload10 !== void 0 && _action$payload10[input.name]) {
             if (Object.hasOwnProperty.call(action.payload[input.name], 'readOnly')) {
               input.readOnly = action.payload[input.name].readOnly;
             }
@@ -4815,7 +4943,9 @@ var ErrorMessages = {
   passport_expiry_date: 'Please enter passport expiry date.',
   passport_photo: 'Please attach passport photo.',
   travel_docs: 'Please attach travel docs.',
-  products: 'Please select atleast one product access.'
+  products: 'Please select atleast one product access.',
+  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) {
@@ -4865,7 +4995,73 @@ function AddPanelDialog(_ref) {
   })));
 }
 
-var IUIToastMessageService$4 = utils.services.IUIToastMessageService;
+var CardsField = function CardsField(props) {
+  var cardsConstants = props.cardsConstants,
+    _props$onRoleChange = props.onRoleChange,
+    onRoleChange = _props$onRoleChange === void 0 ? function () {} : _props$onRoleChange,
+    _props$roleValue = props.roleValue,
+    roleValue = _props$roleValue === void 0 ? '' : _props$roleValue,
+    _props$isProfile = props.isProfile,
+    isProfile = _props$isProfile === void 0 ? false : _props$isProfile,
+    _props$roles = 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__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: (styles.headingPadding)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+    variant: "h3",
+    className: clsx(styles.heading, styles.headingMedium)
+  }, cardsConstants.heading)), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles.dividerColor
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles.product_info, styles.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: cardsConstants.roleHeading,
+    headerType: true,
+    description: cardsConstants.roleDescription
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 6
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: styles.formFieldsWrapper
+  }, isProfile || loggedInUserId === editUserId ? /*#__PURE__*/React__default.createElement(UserRole, {
+    list: roles,
+    value: roleValue
+  }) : /*#__PURE__*/React__default.createElement(iuistyles.IUIRadio, {
+    list: roles,
+    value: roleValue,
+    onValueChange: onRoleChange,
+    disabled: cardsAdmin ? false : true
+  })), !cardsAdmin && !isProfile && /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    style: {
+      marginTop: "24px"
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.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 = utils.services.IUIToastMessageService,
+  IUILocalStorageService$5 = utils.services.IUILocalStorageService;
 var env$4 = utils.configs.env;
 var UserAddEdit = function UserAddEdit(props) {
   var isEditMode = props.isEditMode,
@@ -4892,7 +5088,10 @@ var UserAddEdit = function UserAddEdit(props) {
     isRendered = _useSelector.isRendered,
     maxTravelApprovers = _useSelector.maxTravelApprovers,
     maxExpenseApprovers = _useSelector.maxExpenseApprovers,
-    maxMembershipInput = _useSelector.maxMembershipInput;
+    maxMembershipInput = _useSelector.maxMembershipInput,
+    isCardsDetailsRendered = _useSelector.isCardsDetailsRendered,
+    isCardsAdmin = _useSelector.isCardsAdmin,
+    cardsDetails = _useSelector.cardsDetails;
   var _useSelector2 = reactRedux.useSelector(function (state) {
       return state.common;
     }),
@@ -4905,7 +5104,8 @@ var UserAddEdit = function UserAddEdit(props) {
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({
       travel: false,
-      expense: false
+      expense: false,
+      card: false
     }),
     productAccess = _useState[0],
     setProductAccess = _useState[1];
@@ -4916,13 +5116,13 @@ var UserAddEdit = function UserAddEdit(props) {
     errorMsgs.products = '';
     var _productAccess = _extends({}, productAccess);
     _productAccess[value] = !_productAccess[value];
-    if (_productAccess.travel === false && _productAccess.expense === false) {
+    if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.card === true) {
       var _errorArray = [].concat(errorArray);
       var _errorMsgs = _extends({}, errorMsgs);
       if (_errorArray.indexOf('products') === -1) {
         _errorArray.push('products');
       }
-      _errorMsgs.products = ErrorMessages.products;
+      _errorMsgs.products = ErrorMessages.only_cards_products;
       setErrorArray(_errorArray);
       setErrorMsgs(_errorMsgs);
       var el = document.getElementById('products');
@@ -4932,6 +5132,22 @@ var UserAddEdit = function UserAddEdit(props) {
           block: 'center'
         });
       }
+    } else if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.card === false) {
+      var _errorArray2 = [].concat(errorArray);
+      var _errorMsgs2 = _extends({}, errorMsgs);
+      if (_errorArray2.indexOf('products') === -1) {
+        _errorArray2.push('products');
+      }
+      _errorMsgs2.products = ErrorMessages.products;
+      setErrorArray(_errorArray2);
+      setErrorMsgs(_errorMsgs2);
+      var _el = document.getElementById('products');
+      if (_el) {
+        _el.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
     } else {
       setErrorArray(errorArray);
       setErrorMsgs(errorMsgs);
@@ -4947,6 +5163,155 @@ var UserAddEdit = function UserAddEdit(props) {
   var _useState4 = React.useState([]),
     countryContactCode = _useState4[0],
     setCountryContactCode = _useState4[1];
+  var updateUserApiCall = function updateUserApiCall(payload, inputChangeLog) {
+    dispatch(updateUser(payload, isProfile ? id : editUserId, inputChangeLog)).then(function (res) {
+      if (isProfile) {
+        var _config$routes, _config$routes$profil, _config$routes$profil2;
+        (config === null || config === void 0 ? void 0 : (_config$routes = config.routes) === null || _config$routes === void 0 ? void 0 : (_config$routes$profil = _config$routes.profile) === null || _config$routes$profil === void 0 ? void 0 : (_config$routes$profil2 = _config$routes$profil.redirectUrl) === null || _config$routes$profil2 === void 0 ? void 0 : _config$routes$profil2.submit) && history.push(config.routes.profile.redirectUrl.submit);
+      } else {
+        var _config$routes2, _config$routes2$users, _config$routes2$users2;
+        (config === null || config === void 0 ? void 0 : (_config$routes2 = config.routes) === null || _config$routes2 === void 0 ? void 0 : (_config$routes2$users = _config$routes2.users) === null || _config$routes2$users === void 0 ? void 0 : (_config$routes2$users2 = _config$routes2$users.list) === null || _config$routes2$users2 === void 0 ? void 0 : _config$routes2$users2.path) && history.push(config.routes.users.list.path);
+      }
+      setFilesForDelete([]);
+      setProfilePicDelete([]);
+    })["catch"](function (err) {
+      if (typeof err === 'object') {
+        if (err.country_code) {
+          err.contact_number = err.country_code;
+        }
+        if (err.contact_country_code) {
+          err.contact_number = err.contact_country_code;
+        }
+        if (err.passport) {
+          err.passport_photo = _extends({}, err.passport);
+          delete err.passport;
+        }
+        setErrorArray(Object.keys(err));
+        setErrorMsgs(err);
+        var _loop = function _loop() {
+          if (Object.hasOwnProperty.call(err, key)) {
+            if (err[key]) {
+              if (key in passportInfoInput || key in travelPreferenceInfo || key in secureTravelInputInfo) {
+                setAdditionalInfoFlag('open');
+              }
+              var el = document.getElementById(key === 'country_code' || key === 'contact_country_code' ? 'contact_number' : key);
+              if (el) {
+                setTimeout(function () {
+                  el.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                  });
+                }, 500);
+                return 1;
+              }
+            }
+          }
+        };
+        for (var key in err) {
+          if (_loop()) break;
+        }
+      } else if (typeof err === 'string') {
+        IUIToastMessageService$4.warningNotify(err);
+      } else {
+        IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+      }
+    })["finally"](function () {
+      dispatch(stopLoader());
+    });
+  };
+  var createUserApiCall = function createUserApiCall(payload) {
+    dispatch(createUser(payload)).then(function (res) {
+      var _config$routes3, _config$routes3$users, _config$routes3$users2;
+      if (config !== null && config !== void 0 && (_config$routes3 = config.routes) !== null && _config$routes3 !== void 0 && (_config$routes3$users = _config$routes3.users) !== null && _config$routes3$users !== void 0 && (_config$routes3$users2 = _config$routes3$users.list) !== null && _config$routes3$users2 !== void 0 && _config$routes3$users2.path) {
+        history.push({
+          pathname: config.routes.users.list.path
+        });
+      }
+    })["catch"](function (err) {
+      if (typeof err === 'object') {
+        if (err.country_code) {
+          err.contact_number = err.country_code;
+        }
+        if (err.contact_country_code) {
+          err.contact_number = err.contact_country_code;
+        }
+        if (err.passport) {
+          err.passport_photo = _extends({}, err.passport);
+          delete err.passport;
+        }
+        setErrorArray(Object.keys(err));
+        setErrorMsgs(err);
+        var _loop2 = function _loop2() {
+          if (Object.hasOwnProperty.call(err, key)) {
+            if (err[key]) {
+              if (key in passportInfoInput || key in travelPreferenceInfo || key in secureTravelInputInfo) {
+                setAdditionalInfoFlag('open');
+              }
+              var el = document.getElementById(key === 'country_code' || key === 'contact_country_code' ? 'contact_number' : key);
+              if (el) {
+                setTimeout(function () {
+                  el.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                  });
+                }, 500);
+                return 1;
+              }
+            }
+          }
+        };
+        for (var key in err) {
+          if (_loop2()) break;
+        }
+      } else if (typeof err === 'string') {
+        IUIToastMessageService$4.warningNotify(err);
+      } else {
+        IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+      }
+    })["finally"](function () {
+      dispatch(stopLoader());
+    });
+  };
+  var fetchEditUserCardsDetails = function fetchEditUserCardsDetails(editUserId) {
+    fetch(userAddEditUrl.cardsEditUserDetails(editUserId), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
+      }
+    }).then(function (response) {
+      return response.json();
+    }).then(function (res) {
+      var _res$roles;
+      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.');
+      }
+    })["catch"](function (error) {
+      console.log("errorrr", error);
+    });
+  };
+  var fetchLoggedUserCardsDetails = function fetchLoggedUserCardsDetails() {
+    fetch(userAddEditUrl.cardsAddUsersDetails(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
+      }
+    }).then(function (response) {
+      return response.json();
+    }).then(function (res) {
+      var _res$roles2;
+      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.');
+      }
+    })["catch"](function (error) {
+      console.log("errorrr", error);
+    });
+  };
   React.useEffect(function () {
     var countryObject = countryContactCode.find(function (t) {
       return t.dial_code === countryDialCode;
@@ -5098,16 +5463,53 @@ var UserAddEdit = function UserAddEdit(props) {
     }),
     expenseFYI = _useState24[0],
     setExpenseFYI = _useState24[1];
+  var _useState25 = React.useState(''),
+    cardsRole = _useState25[0],
+    setCardsRole = _useState25[1];
+  React.useEffect(function () {
+    if (productAccess.card === false) {
+      setCardsRole('');
+    }
+  }, [productAccess.card]);
+  React.useEffect(function () {
+    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 profileRole = splitRoleVal[2];
+        if (profileRole === targetRole) {
+          setCardsRole(role.value);
+          break;
+        }
+      }
+    }
+  }, [isCardsDetailsRendered, cardsDetails, isProfile, productAccess.card, isCardsAdmin]);
   var asyncSelectRefs = React.useRef({
     emp_level: React.useRef(null),
     entity: React.useRef(null),
     business_unit: React.useRef(null),
     department: React.useRef(null)
   });
-  var _useState25 = React.useState([]),
-    errorArray = _useState25[0],
-    setErrorArray = _useState25[1];
-  var _useState26 = React.useState({
+  var _useState26 = React.useState([]),
+    errorArray = _useState26[0],
+    setErrorArray = _useState26[1];
+  var _useState27 = React.useState({
       first_name: '',
       last_name: '',
       email: '',
@@ -5137,9 +5539,9 @@ var UserAddEdit = function UserAddEdit(props) {
       userTagType: '',
       profile_pic: ''
     }),
-    errorMsgs = _useState26[0],
-    setErrorMsgs = _useState26[1];
-  var _useState27 = React.useState({
+    errorMsgs = _useState27[0],
+    setErrorMsgs = _useState27[1];
+  var _useState28 = React.useState({
       first_name: false,
       last_name: false,
       email: false,
@@ -5166,14 +5568,14 @@ var UserAddEdit = function UserAddEdit(props) {
       userTagType: false,
       profile_pic: false
     }),
-    inputChangeLog = _useState27[0],
-    updateInputChangeLog = _useState27[1];
-  var _useState28 = React.useState([]),
-    uploadedFiles = _useState28[0],
-    setUploadedFiles = _useState28[1];
-  var _useState29 = React.useState(70),
-    maxLengthForModal = _useState29[0],
-    setMaxLengthForModal = _useState29[1];
+    inputChangeLog = _useState28[0],
+    updateInputChangeLog = _useState28[1];
+  var _useState29 = React.useState([]),
+    uploadedFiles = _useState29[0],
+    setUploadedFiles = _useState29[1];
+  var _useState30 = React.useState(70),
+    maxLengthForModal = _useState30[0],
+    setMaxLengthForModal = _useState30[1];
   var defaultAddModalData = {
     isOpen: false,
     isError: false,
@@ -5189,9 +5591,9 @@ var UserAddEdit = function UserAddEdit(props) {
     maxLength: maxLengthForModal,
     minLength: 0
   };
-  var _useState30 = React.useState(defaultAddModalData),
-    addModalData = _useState30[0],
-    setAddModalData = _useState30[1];
+  var _useState31 = React.useState(defaultAddModalData),
+    addModalData = _useState31[0],
+    setAddModalData = _useState31[1];
   var onAddModalClose = function onAddModalClose() {
     setAddModalData(_extends({}, defaultAddModalData));
   };
@@ -5602,6 +6004,11 @@ var UserAddEdit = function UserAddEdit(props) {
   }, [isTokenVerified]);
   React.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) === 'card') {
+          editUserId ? fetchEditUserCardsDetails(editUserId) : fetchLoggedUserCardsDetails();
+        }
+      });
       setPersonalInfoInput(_extends({}, personalInfoInput, {
         country_code: countryCode
       }));
@@ -5723,7 +6130,8 @@ var UserAddEdit = function UserAddEdit(props) {
             var products = res.user_product.split('+');
             setProductAccess({
               travel: products.includes('travel'),
-              expense: products.includes('expense')
+              expense: products.includes('expense'),
+              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;
@@ -5940,6 +6348,9 @@ var UserAddEdit = function UserAddEdit(props) {
       if (employeeInfoInput.skip_manager_id.value !== '') {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
+      var cardsPayload = {
+        "roles": [cardsRole]
+      };
       var payload = {
         personalInfoInput: personalInfoInput,
         employeeInfoInput: employeeInfoInput,
@@ -5958,7 +6369,9 @@ var UserAddEdit = function UserAddEdit(props) {
         uploadedFiles: uploadedFiles,
         filesForDelete: filesForDelete,
         profilePicDelete: profilePicDelete,
-        userTagType: userTagType
+        userTagType: userTagType,
+        cardsRole: cardsRole,
+        isCardsAdmin: isCardsAdmin
       };
       if (verifyUserId) {
         payload.verifyUserId = verifyUserId;
@@ -6084,7 +6497,7 @@ var UserAddEdit = function UserAddEdit(props) {
       if (_isError) {
         setErrorArray(_errorArray);
         setErrorMsgs(_errorMsgs);
-        var _loop = function _loop() {
+        var _loop3 = function _loop3() {
           if (Object.hasOwnProperty.call(_errorMsgs, _key3)) {
             if (_errorMsgs[_key3]) {
               if (_key3 in passportInfoInput || _key3 in travelPreferenceInfo || _key3 in secureTravelInputInfo) {
@@ -6104,115 +6517,109 @@ var UserAddEdit = function UserAddEdit(props) {
           }
         };
         for (var _key3 in _errorMsgs) {
-          if (_loop()) break;
+          if (_loop3()) break;
         }
       }
+      var cardApiflag = false;
+      if (productAccess.card === false || isCardsAdmin === false) {
+        cardApiflag = false;
+      } else {
+        cardApiflag = true;
+      }
       if (!_isError) {
         if (isEditMode && editUserId || isProfile) {
           dispatch(showLoader());
-          dispatch(updateUser(payload, isProfile ? id : editUserId, inputChangeLog)).then(function (res) {
-            if (isProfile) {
-              var _config$routes, _config$routes$profil, _config$routes$profil2;
-              (config === null || config === void 0 ? void 0 : (_config$routes = config.routes) === null || _config$routes === void 0 ? void 0 : (_config$routes$profil = _config$routes.profile) === null || _config$routes$profil === void 0 ? void 0 : (_config$routes$profil2 = _config$routes$profil.redirectUrl) === null || _config$routes$profil2 === void 0 ? void 0 : _config$routes$profil2.submit) && history.push(config.routes.profile.redirectUrl.submit);
-            } else {
-              var _config$routes2, _config$routes2$users, _config$routes2$users2;
-              (config === null || config === void 0 ? void 0 : (_config$routes2 = config.routes) === null || _config$routes2 === void 0 ? void 0 : (_config$routes2$users = _config$routes2.users) === null || _config$routes2$users === void 0 ? void 0 : (_config$routes2$users2 = _config$routes2$users.list) === null || _config$routes2$users2 === void 0 ? void 0 : _config$routes2$users2.path) && history.push(config.routes.users.list.path);
-            }
-            setFilesForDelete([]);
-            setProfilePicDelete([]);
-          })["catch"](function (err) {
-            if (typeof err === 'object') {
-              if (err.country_code) {
-                err.contact_number = err.country_code;
-              }
-              if (err.contact_country_code) {
-                err.contact_number = err.contact_country_code;
+          if (cardApiflag && !isProfile && editUserId !== (id === null || id === void 0 ? void 0 : id.toString())) {
+            fetch(userAddEditUrl.cardsEditUserDetails(editUserId), {
+              method: 'POST',
+              body: JSON.stringify(cardsPayload),
+              headers: {
+                'Content-Type': 'application/json',
+                'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
               }
-              if (err.passport) {
-                err.passport_photo = _extends({}, err.passport);
-                delete err.passport;
-              }
-              setErrorArray(Object.keys(err));
-              setErrorMsgs(err);
-              var _loop2 = function _loop2() {
-                if (Object.hasOwnProperty.call(err, _key4)) {
-                  if (err[_key4]) {
-                    if (_key4 in passportInfoInput || _key4 in travelPreferenceInfo || _key4 in secureTravelInputInfo) {
-                      setAdditionalInfoFlag('open');
-                    }
-                    var el = document.getElementById(_key4 === 'country_code' || _key4 === 'contact_country_code' ? 'contact_number' : _key4);
-                    if (el) {
-                      setTimeout(function () {
-                        el.scrollIntoView({
-                          behavior: 'smooth',
-                          block: 'center'
-                        });
-                      }, 500);
-                      return 1;
-                    }
-                  }
-                }
-              };
-              for (var _key4 in err) {
-                if (_loop2()) break;
+            }).then(function (response) {
+              if (response.status === 200) {
+                updateUserApiCall(payload, inputChangeLog);
+              } else {
+                IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
               }
-            } else if (typeof err === 'string') {
-              IUIToastMessageService$4.warningNotify(err);
-            } else {
-              IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
-            }
-          })["finally"](function () {
-            dispatch(stopLoader());
-          });
+            })["catch"](function (error) {
+              console.log("errorrr", error);
+            })["finally"](function () {
+              dispatch(stopLoader());
+            });
+          } else {
+            updateUserApiCall(payload, inputChangeLog);
+          }
         } else {
           dispatch(showLoader());
-          dispatch(createUser(payload)).then(function (res) {
-            var _config$routes3, _config$routes3$users, _config$routes3$users2;
-            (config === null || config === void 0 ? void 0 : (_config$routes3 = config.routes) === null || _config$routes3 === void 0 ? void 0 : (_config$routes3$users = _config$routes3.users) === null || _config$routes3$users === void 0 ? void 0 : (_config$routes3$users2 = _config$routes3$users.list) === null || _config$routes3$users2 === void 0 ? void 0 : _config$routes3$users2.path) && history.push(config.routes.users.list.path);
-          })["catch"](function (err) {
-            if (typeof err === 'object') {
-              if (err.country_code) {
-                err.contact_number = err.country_code;
-              }
-              if (err.contact_country_code) {
-                err.contact_number = err.contact_country_code;
-              }
-              if (err.passport) {
-                err.passport_photo = _extends({}, err.passport);
-                delete err.passport;
+          if (cardApiflag === true) {
+            dispatch(createUser(payload)).then(function (res) {
+              var _config$routes4, _config$routes4$users, _config$routes4$users2;
+              if (res !== null && res !== void 0 && res.user_id) {
+                fetch(userAddEditUrl.cardsEditUserDetails(res === null || res === void 0 ? void 0 : res.user_id), {
+                  method: 'POST',
+                  body: JSON.stringify(cardsPayload),
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
+                  }
+                }).then(function (response) {
+                  if (response.status !== 200) {
+                    IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
+                  }
+                })["catch"](function (error) {
+                  console.log("errorrr", error);
+                });
               }
-              setErrorArray(Object.keys(err));
-              setErrorMsgs(err);
-              var _loop3 = function _loop3() {
-                if (Object.hasOwnProperty.call(err, _key5)) {
-                  if (err[_key5]) {
-                    if (_key5 in passportInfoInput || _key5 in travelPreferenceInfo || _key5 in secureTravelInputInfo) {
-                      setAdditionalInfoFlag('open');
-                    }
-                    var el = document.getElementById(_key5 === 'country_code' || _key5 === 'contact_country_code' ? 'contact_number' : _key5);
-                    if (el) {
-                      setTimeout(function () {
-                        el.scrollIntoView({
-                          behavior: 'smooth',
-                          block: 'center'
-                        });
-                      }, 500);
-                      return 1;
+              (config === null || config === void 0 ? void 0 : (_config$routes4 = config.routes) === null || _config$routes4 === void 0 ? void 0 : (_config$routes4$users = _config$routes4.users) === null || _config$routes4$users === void 0 ? void 0 : (_config$routes4$users2 = _config$routes4$users.list) === null || _config$routes4$users2 === void 0 ? void 0 : _config$routes4$users2.path) && history.push(config.routes.users.list.path);
+            })["catch"](function (err) {
+              if (typeof err === 'object') {
+                if (err.country_code) {
+                  err.contact_number = err.country_code;
+                }
+                if (err.contact_country_code) {
+                  err.contact_number = err.contact_country_code;
+                }
+                if (err.passport) {
+                  err.passport_photo = _extends({}, err.passport);
+                  delete err.passport;
+                }
+                setErrorArray(Object.keys(err));
+                setErrorMsgs(err);
+                var _loop4 = function _loop4() {
+                  if (Object.hasOwnProperty.call(err, _key4)) {
+                    if (err[_key4]) {
+                      if (_key4 in passportInfoInput || _key4 in travelPreferenceInfo || _key4 in secureTravelInputInfo) {
+                        setAdditionalInfoFlag('open');
+                      }
+                      var el = document.getElementById(_key4 === 'country_code' || _key4 === 'contact_country_code' ? 'contact_number' : _key4);
+                      if (el) {
+                        setTimeout(function () {
+                          el.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'center'
+                          });
+                        }, 500);
+                        return 1;
+                      }
                     }
                   }
+                };
+                for (var _key4 in err) {
+                  if (_loop4()) break;
                 }
-              };
-              for (var _key5 in err) {
-                if (_loop3()) break;
+              } else if (typeof err === 'string') {
+                IUIToastMessageService$4.warningNotify(err);
+              } else {
+                IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
               }
-            } else if (typeof err === 'string') {
-              IUIToastMessageService$4.warningNotify(err);
-            } else {
-              IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
-            }
-          })["finally"](function () {
-            dispatch(stopLoader());
-          });
+            })["finally"](function () {
+              dispatch(stopLoader());
+            });
+          } else {
+            createUserApiCall(payload);
+          }
         }
       }
       return Promise.resolve();
@@ -6230,8 +6637,8 @@ var UserAddEdit = function UserAddEdit(props) {
         }
       }
     } else {
-      var _config$routes4, _config$routes4$users, _config$routes4$users2;
-      (config === null || config === void 0 ? void 0 : (_config$routes4 = config.routes) === null || _config$routes4 === void 0 ? void 0 : (_config$routes4$users = _config$routes4.users) === null || _config$routes4$users === void 0 ? void 0 : (_config$routes4$users2 = _config$routes4$users.list) === null || _config$routes4$users2 === void 0 ? void 0 : _config$routes4$users2.path) && history.push(config.routes.users.list.path);
+      var _config$routes5, _config$routes5$users, _config$routes5$users2;
+      (config === null || config === void 0 ? void 0 : (_config$routes5 = config.routes) === null || _config$routes5 === void 0 ? void 0 : (_config$routes5$users = _config$routes5.users) === null || _config$routes5$users === void 0 ? void 0 : (_config$routes5$users2 = _config$routes5$users.list) === null || _config$routes5$users2 === void 0 ? void 0 : _config$routes5$users2.path) && history.push(config.routes.users.list.path);
     }
   };
   var handleCustomFieldsNavigation = function handleCustomFieldsNavigation() {
@@ -6544,6 +6951,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__default.createElement(iuistyles.IUIGrid, {
       item: true,
       sm: 12,
@@ -6636,6 +7050,21 @@ var UserAddEdit = function UserAddEdit(props) {
     isProfile: isProfile,
     editUserId: editUserId,
     roles: renderFields.expenseRoles
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles.dividerColor
+  }), isCardsDetailsRendered && productAccess && productAccess.card && /*#__PURE__*/React__default.createElement(CardsField, {
+    cardsConstants: cardsDetails.cardsConstants,
+    type: "card",
+    isProfile: isProfile,
+    onRoleChange: function onRoleChange(_ref7) {
+      var _value = _ref7._value;
+      return setCardsRole(_value);
+    },
+    roleValue: cardsRole,
+    roles: cardsDetails.cardsRoles,
+    cardsAdmin: isCardsAdmin,
+    editUserId: editUserId,
+    loggedInUserId: id === null || id === void 0 ? void 0 : id.toString()
   }))) : /*#__PURE__*/React__default.createElement(VerificationError, {
     config: config,
     errMsg: hasVerificationError
@@ -8444,7 +8873,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
     cell: function cell(row) {
       return /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         component: "div"
-      }, row.products.length > 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      }, row.products.length > 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !row.products[0].role.toLowerCase().includes("holder") ? /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
@@ -8457,7 +8886,7 @@ var StickyHeadTable = function StickyHeadTable(props) {
         style: {
           whiteSpace: 'nowrap'
         }
-      }, "\xA0" + row.products[0].role)), row.products[1] && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+      }, "\xA0" + row.products[0].role)) : "", row.products[1] && !row.products[1].role.toLowerCase().includes("holder") && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
@@ -8470,7 +8899,20 @@ var StickyHeadTable = function StickyHeadTable(props) {
         style: {
           whiteSpace: 'nowrap'
         }
-      }, "\xA0" + row.products[1].role))) : '');
+      }, "\xA0" + row.products[1].role)), row.products[2] && !row.products[2].role.toLowerCase().includes("holder") && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+        component: "div",
+        display: "flex"
+      }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+        className: clsx(styles$5.rowText, styles$5.textTransform, styles$5.lightColor),
+        style: {
+          whiteSpace: 'nowrap'
+        }
+      }, row.products[2].name + ' / '), /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
+        className: clsx(styles$5.rowText, styles$5.textTransform),
+        style: {
+          whiteSpace: 'nowrap'
+        }
+      }, "\xA0" + row.products[2].role))) : '');
     }
   }, {
     id: 'status',