@itilite/iui-user-management 0.4.52 → 0.4.53

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() + "/card/authorization/user/" + userId;
+  },
+  cardsAddUsersDetails: function cardsAddUsersDetails() {
+    return env.getCardsapiURL() + "/card/authorization/company/" + IUILocalStorageService.getCompanyId() + "/roles";
   }
 };
 var userListUrl = {
@@ -750,7 +787,6 @@ var departmentHeadOptions = function departmentHeadOptions(search, loadedOptions
             data: item
           };
         });
-        console.log(response.next);
         return {
           options: mappedValue,
           hasMore: !!response.next,
@@ -795,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';
@@ -839,9 +876,15 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
       if (payload.productAccess.expense) {
         product.expense = payload.expenseRole || null;
       }
+      if (payload.productAccess.cards) {
+        var splitRole = payload.cardsRole.split(":");
+        var cardsUsmRole = splitRole[2];
+        product.cards = cardsUsmRole || null;
+      }
       return product;
     }(),
-    approvers: {}
+    approvers: {},
+    requested_user_is_admin: payload.isCardsAdmin
   };
   var userTags = [];
   for (var key in payload.userTagType) {
@@ -933,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.cards) {
+        return 'expense+travel+cards';
+      } 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.travel) {
         return 'travel';
       } else {
@@ -954,6 +1004,11 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
       if (payload.productAccess.expense) {
         roles.expense = payload.expenseRole;
       }
+      if (payload.productAccess.cards) {
+        var splitRole = payload.cardsRole.split(":");
+        var cardsUsmRole = splitRole[2];
+        roles.cards = cardsUsmRole;
+      }
       return roles;
     }();
     res.fields.custom_attributes = payload.customFieldsInput;
@@ -1292,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,
@@ -1363,7 +1424,7 @@ var fetchCountryCodes = function fetchCountryCodes() {
     return new Promise(function (resolve, reject) {
       api$2.get(userAddEditUrl.countryCode()).then(function (res) {
         dispatch(setCountryCodes(res.data.country_code_details));
-        resolve('success');
+        resolve(res.data.country_code_details);
       })["catch"](function (err) {
         reject(err);
       })["finally"](function () {});
@@ -1517,7 +1578,6 @@ var createUser = function createUser(payload) {
     return new Promise(function (resolve, reject) {
       api$2.post(userAddEditUrl.createUser(), formatCreateUserPayload(payload)).then(function (res) {
         if (res.data.status === true) {
-          IUIToastMessageService$1.sNotify(res.data.message);
           resolve(res.data);
         } else {
           if (res.data.errors && typeof res.data.errors === 'object') {
@@ -1668,7 +1728,6 @@ var updateUser = function updateUser(payload, userId, inputChangeLog) {
     return new Promise(function (resolve, reject) {
       api$2.put(userAddEditUrl.editUser(userId), formatUpdateUserPayload(payload, inputChangeLog)).then(function (res) {
         if (res.data.status === true) {
-          IUIToastMessageService$1.sNotify(res.data.message);
           resolve(res.data);
         } else {
           if (!Object.keys(res.data.errors).length) {
@@ -3194,6 +3253,12 @@ var products = [{
   name: 'expense',
   type: 'checkbox',
   disableText: 'Please get in touch with your administrator to change this value.'
+}, {
+  id: 3,
+  label: 'Cards',
+  name: 'cards',
+  type: 'checkbox',
+  disableText: 'Please get in touch with your administrator to change this value.'
 }];
 var dropdownList = {
   gender: [{
@@ -3364,6 +3429,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 own and use cards that are issued to them',
+    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: 'Can issue cards to others and can manage all cards and transactions across the company.',
+    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',
@@ -3593,6 +3686,12 @@ var initialState = {
     travelConstants: travelConstants,
     expenseConstants: expenseConstants
   },
+  isCardsDetailsRendered: false,
+  isCardsAdmin: false,
+  cardsDetails: {
+    cardsRoles: cardsConstants.roles,
+    cardsConstants: cardsConstants
+  },
   dropdownList: dropdownList,
   maxTravelApprovers: 10,
   maxExpenseApprovers: 10,
@@ -3759,11 +3858,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;
             }
@@ -4816,7 +4941,8 @@ 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.'
+  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.'
 };
 
 function AddPanelDialog(_ref) {
@@ -4866,7 +4992,56 @@ 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;
+  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 ? /*#__PURE__*/React__default.createElement(UserRole, {
+    list: roles,
+    value: roleValue
+  }) : /*#__PURE__*/React__default.createElement(iuistyles.IUIRadio, {
+    list: roles,
+    value: roleValue,
+    onValueChange: onRoleChange
+  })))));
+};
+
+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,
@@ -4874,6 +5049,8 @@ 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));
@@ -4893,7 +5070,12 @@ 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;
+  console.log("isCardsAdmin", isCardsAdmin);
+  console.log("cardsDetails", cardsDetails);
   var _useSelector2 = reactRedux.useSelector(function (state) {
       return state.common;
     }),
@@ -4902,11 +5084,13 @@ var UserAddEdit = function UserAddEdit(props) {
     hasVerificationError = _useSelector2.hasVerificationError,
     isILadmin = _useSelector2.isILadmin,
     companyName = _useSelector2.companyName;
+  console.log("id", id);
   var history = reactRouterDom.useHistory();
   var location = reactRouterDom.useLocation();
   var _useState = React.useState({
       travel: false,
-      expense: false
+      expense: false,
+      cards: false
     }),
     productAccess = _useState[0],
     setProductAccess = _useState[1];
@@ -4917,13 +5101,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.cards === 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');
@@ -4933,13 +5117,192 @@ var UserAddEdit = function UserAddEdit(props) {
           block: 'center'
         });
       }
+    } else if (_productAccess.travel === false && _productAccess.expense === false && _productAccess.cards === false) {
+      var _errorArray2 = [].concat(errorArray);
+      var _errorMsgs2 = _extends({}, errorMsgs);
+      if (_errorArray2.indexOf('products') === -1) {
+        _errorArray2.push('products');
+      }
+      _errorMsgs2.products = ErrorMessages.none_products;
+      setErrorArray(_errorArray2);
+      setErrorMsgs(_errorMsgs2);
+      var _el = document.getElementById('products');
+      if (_el) {
+        _el.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        });
+      }
     } else {
       setErrorArray(errorArray);
       setErrorMsgs(errorMsgs);
     }
     setProductAccess(_productAccess);
   };
-  var _useState2 = React.useState({
+  var _useState2 = React.useState(''),
+    newCountryCode = _useState2[0],
+    setNewCountryCode = _useState2[1];
+  var _useState3 = React.useState(),
+    countryDialCode = _useState3[0],
+    setCountryDialCode = _useState3[1];
+  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) {
+      dispatch(setCardsDetails(res));
+    })["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) {
+      dispatch(setCardsDetails(res));
+    })["catch"](function (error) {
+      console.log("errorrr", error);
+    });
+  };
+  React.useEffect(function () {
+    var countryObject = countryContactCode.find(function (t) {
+      return t.dial_code === countryDialCode;
+    });
+    if (countryObject) {
+      setPersonalInfoInput(_extends({}, personalInfoInput, {
+        country_code: countryObject.code
+      }));
+    }
+  }, [countryDialCode]);
+  React.useEffect(function () {
+    var extractedNumber = newCountryCode.substring(1);
+    var convertedNumber = parseInt(extractedNumber);
+    setCountryDialCode(convertedNumber);
+  }, [newCountryCode]);
+  var _useState5 = React.useState({
       first_name: '',
       last_name: '',
       email: '',
@@ -4950,9 +5313,9 @@ var UserAddEdit = function UserAddEdit(props) {
       contact_country_code: '',
       profile_pic: []
     }),
-    personalInfoInput = _useState2[0],
-    setPersonalInfoInput = _useState2[1];
-  var _useState3 = React.useState({
+    personalInfoInput = _useState5[0],
+    setPersonalInfoInput = _useState5[1];
+  var _useState6 = React.useState({
       emp_level: {
         value: '',
         label: 'Select employee level'
@@ -4985,9 +5348,9 @@ var UserAddEdit = function UserAddEdit(props) {
         label: defaultCurrency
       }
     }),
-    employeeInfoInput = _useState3[0],
-    setEmployeeInfoInput = _useState3[1];
-  var _useState4 = React.useState({
+    employeeInfoInput = _useState6[0],
+    setEmployeeInfoInput = _useState6[1];
+  var _useState7 = React.useState({
       emp_level: 0,
       entity: 0,
       business_unit: 0,
@@ -4996,48 +5359,48 @@ var UserAddEdit = function UserAddEdit(props) {
       manager_id: 0,
       skip_manager_id: 0
     }),
-    cacheForAsyncDropdown = _useState4[0],
-    clearCacheForAsyncDropdown = _useState4[1];
-  var _useState5 = React.useState({}),
-    userTagType = _useState5[0],
-    setUserTagType = _useState5[1];
-  var _useState6 = React.useState(false),
-    scroll = _useState6[0],
-    setScroll = _useState6[1];
-  var _useState7 = React.useState({}),
-    customFieldsInput = _useState7[0],
-    setCustomFieldsInput = _useState7[1];
-  var _useState8 = React.useState('traveler'),
-    travelRole = _useState8[0],
-    setTravelRole = _useState8[1];
-  var _useState9 = React.useState({}),
-    travelApproversInput = _useState9[0],
-    setTravelApproversInput = _useState9[1];
-  var _useState10 = React.useState({
+    cacheForAsyncDropdown = _useState7[0],
+    clearCacheForAsyncDropdown = _useState7[1];
+  var _useState8 = React.useState({}),
+    userTagType = _useState8[0],
+    setUserTagType = _useState8[1];
+  var _useState9 = React.useState(false),
+    scroll = _useState9[0],
+    setScroll = _useState9[1];
+  var _useState10 = React.useState({}),
+    customFieldsInput = _useState10[0],
+    setCustomFieldsInput = _useState10[1];
+  var _useState11 = React.useState('traveler'),
+    travelRole = _useState11[0],
+    setTravelRole = _useState11[1];
+  var _useState12 = React.useState({}),
+    travelApproversInput = _useState12[0],
+    setTravelApproversInput = _useState12[1];
+  var _useState13 = React.useState({
       value: '',
       label: 'Select approver'
     }),
-    travelFYI = _useState10[0],
-    setTravelFYI = _useState10[1];
-  var _useState11 = React.useState([]),
-    membershipInfoInput = _useState11[0],
-    setMembershipInfoInput = _useState11[1];
-  var _useState12 = React.useState([]),
-    removedMembershipInfoInput = _useState12[0],
-    setRemovedMembershipInfoInput = _useState12[1];
-  var _useState13 = React.useState({
+    travelFYI = _useState13[0],
+    setTravelFYI = _useState13[1];
+  var _useState14 = React.useState([]),
+    membershipInfoInput = _useState14[0],
+    setMembershipInfoInput = _useState14[1];
+  var _useState15 = React.useState([]),
+    removedMembershipInfoInput = _useState15[0],
+    setRemovedMembershipInfoInput = _useState15[1];
+  var _useState16 = React.useState({
       flight_seat_preference: '',
       meal_preference: ''
     }),
-    travelPreferenceInfo = _useState13[0],
-    settravelPreferenceInfo = _useState13[1];
-  var _useState14 = React.useState({
+    travelPreferenceInfo = _useState16[0],
+    settravelPreferenceInfo = _useState16[1];
+  var _useState17 = React.useState({
       trusted_traveller: '',
       redress_number: ''
     }),
-    secureTravelInputInfo = _useState14[0],
-    setSecureTravelInputInfo = _useState14[1];
-  var _useState15 = React.useState({
+    secureTravelInputInfo = _useState17[0],
+    setSecureTravelInputInfo = _useState17[1];
+  var _useState18 = React.useState({
       passport_issue_country: {
         value: '',
         label: 'Select country'
@@ -5052,39 +5415,94 @@ var UserAddEdit = function UserAddEdit(props) {
       passport_photo: [],
       travel_docs: []
     }),
-    passportInfoInput = _useState15[0],
-    setPassportInfoInput = _useState15[1];
-  var _useState16 = React.useState([]),
-    filesForDelete = _useState16[0],
-    setFilesForDelete = _useState16[1];
-  var _useState17 = React.useState([]),
-    profilePicDelete = _useState17[0],
-    setProfilePicDelete = _useState17[1];
-  var _useState18 = React.useState(config.env.isTravelProduct && isProfile ? 'open' : ''),
-    isAdditionalInfoExpanded = _useState18[0],
-    setAdditionalInfoFlag = _useState18[1];
-  var _useState19 = React.useState('submitter'),
-    expenseRole = _useState19[0],
-    setExpenseRole = _useState19[1];
-  var _useState20 = React.useState({}),
-    expenseApproversInput = _useState20[0],
-    setExpenseApproversInput = _useState20[1];
-  var _useState21 = React.useState({
+    passportInfoInput = _useState18[0],
+    setPassportInfoInput = _useState18[1];
+  var _useState19 = React.useState([]),
+    filesForDelete = _useState19[0],
+    setFilesForDelete = _useState19[1];
+  var _useState20 = React.useState([]),
+    profilePicDelete = _useState20[0],
+    setProfilePicDelete = _useState20[1];
+  var _useState21 = React.useState(config.env.isTravelProduct && isProfile ? 'open' : ''),
+    isAdditionalInfoExpanded = _useState21[0],
+    setAdditionalInfoFlag = _useState21[1];
+  var _useState22 = React.useState('submitter'),
+    expenseRole = _useState22[0],
+    setExpenseRole = _useState22[1];
+  var _useState23 = React.useState({}),
+    expenseApproversInput = _useState23[0],
+    setExpenseApproversInput = _useState23[1];
+  var _useState24 = React.useState({
       value: '',
       label: 'Select approver'
     }),
-    expenseFYI = _useState21[0],
-    setExpenseFYI = _useState21[1];
+    expenseFYI = _useState24[0],
+    setExpenseFYI = _useState24[1];
+  var _useState25 = React.useState(''),
+    cardsRole = _useState25[0],
+    setCardsRole = _useState25[1];
+  var _useState26 = React.useState(false),
+    cardsErrorMsg = _useState26[0],
+    setCardsErrorMsg = _useState26[1];
+  console.log("cardsRole123", cardsRole);
+  console.log("cardsErrorMsg", cardsErrorMsg);
+  React.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);
+    }
+  }, [cardsRole]);
+  React.useEffect(function () {
+    if (productAccess.cards === false) {
+      setCardsRole('');
+    } else {
+      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') {
+          setCardsRole(role.value);
+          break;
+        }
+      }
+    }
+  }, [productAccess.cards]);
+  React.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]);
   var asyncSelectRefs = React.useRef({
     emp_level: React.useRef(null),
     entity: React.useRef(null),
     business_unit: React.useRef(null),
     department: React.useRef(null)
   });
-  var _useState22 = React.useState([]),
-    errorArray = _useState22[0],
-    setErrorArray = _useState22[1];
-  var _useState23 = React.useState({
+  var _useState27 = React.useState([]),
+    errorArray = _useState27[0],
+    setErrorArray = _useState27[1];
+  var _useState28 = React.useState({
       first_name: '',
       last_name: '',
       email: '',
@@ -5114,9 +5532,9 @@ var UserAddEdit = function UserAddEdit(props) {
       userTagType: '',
       profile_pic: ''
     }),
-    errorMsgs = _useState23[0],
-    setErrorMsgs = _useState23[1];
-  var _useState24 = React.useState({
+    errorMsgs = _useState28[0],
+    setErrorMsgs = _useState28[1];
+  var _useState29 = React.useState({
       first_name: false,
       last_name: false,
       email: false,
@@ -5143,14 +5561,14 @@ var UserAddEdit = function UserAddEdit(props) {
       userTagType: false,
       profile_pic: false
     }),
-    inputChangeLog = _useState24[0],
-    updateInputChangeLog = _useState24[1];
-  var _useState25 = React.useState([]),
-    uploadedFiles = _useState25[0],
-    setUploadedFiles = _useState25[1];
-  var _useState26 = React.useState(70),
-    maxLengthForModal = _useState26[0],
-    setMaxLengthForModal = _useState26[1];
+    inputChangeLog = _useState29[0],
+    updateInputChangeLog = _useState29[1];
+  var _useState30 = React.useState([]),
+    uploadedFiles = _useState30[0],
+    setUploadedFiles = _useState30[1];
+  var _useState31 = React.useState(70),
+    maxLengthForModal = _useState31[0],
+    setMaxLengthForModal = _useState31[1];
   var defaultAddModalData = {
     isOpen: false,
     isError: false,
@@ -5166,9 +5584,9 @@ var UserAddEdit = function UserAddEdit(props) {
     maxLength: maxLengthForModal,
     minLength: 0
   };
-  var _useState27 = React.useState(defaultAddModalData),
-    addModalData = _useState27[0],
-    setAddModalData = _useState27[1];
+  var _useState32 = React.useState(defaultAddModalData),
+    addModalData = _useState32[0],
+    setAddModalData = _useState32[1];
   var onAddModalClose = function onAddModalClose() {
     setAddModalData(_extends({}, defaultAddModalData));
   };
@@ -5345,7 +5763,6 @@ var UserAddEdit = function UserAddEdit(props) {
       _value = args._value,
       _isError = args._isError,
       _errorMsg = args._errorMsg;
-    console.log(_name, _value);
     setEmployeeInfoInput(_extends({}, employeeInfoInput, (_extends8 = {}, _extends8[_name] = _value, _extends8)));
     updateError(_name, _isError, _errorMsg);
     if (Object.hasOwnProperty.call(inputChangeLog, _name)) {
@@ -5379,7 +5796,6 @@ var UserAddEdit = function UserAddEdit(props) {
     var _extends12;
     var _name = _ref3._name,
       _value = _ref3._value;
-    console.log(_name, _value, 'travel');
     setTravelApproversInput(_extends({}, travelApproversInput, (_extends12 = {}, _extends12[_name] = _value, _extends12)));
   };
   var onExpenseApproversInputChange = function onExpenseApproversInputChange(_ref4) {
@@ -5577,6 +5993,7 @@ var UserAddEdit = function UserAddEdit(props) {
   React.useEffect(function () {
     if (isTokenVerified === true) {
       dispatch(fetchRenderFileds());
+      editUserId ? fetchEditUserCardsDetails(editUserId) : fetchLoggedUserCardsDetails();
     }
   }, [isTokenVerified]);
   React.useEffect(function () {
@@ -5591,6 +6008,7 @@ var UserAddEdit = function UserAddEdit(props) {
         }
       }));
       dispatch(fetchCountryCodes()).then(function (_res) {
+        setCountryContactCode(_res);
         if (isEditMode) {
           if (!isProfile && !editUserId) return false;
           dispatch(setStaticFieldsVisibility({
@@ -5701,7 +6119,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'),
+              cards: products.includes('cards')
             });
             if (products.includes('travel')) {
               var _res$travel_info, _res$travel_info2, _res$travel_info3, _res$travel_info4, _res$travel_info5, _res$travel_info6;
@@ -5912,13 +6331,15 @@ var UserAddEdit = function UserAddEdit(props) {
         IUIToastMessageService$4.warningNotify(checkAnyError);
         return Promise.resolve();
       }
-      console.log(employeeInfoInput, 'data');
       if (employeeInfoInput.manager_id.value !== '') {
         employeeInfoInput.manager_id = employeeInfoInput.manager.value;
       }
       if (employeeInfoInput.skip_manager_id.value !== '') {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
+      var cardsPayload = {
+        "roles": [cardsRole]
+      };
       var payload = {
         personalInfoInput: personalInfoInput,
         employeeInfoInput: employeeInfoInput,
@@ -5937,7 +6358,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;
@@ -5949,6 +6372,9 @@ 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;
@@ -5976,11 +6402,8 @@ var UserAddEdit = function UserAddEdit(props) {
         }
       }
       for (var _key in employeeInfo) {
-        console.log('key', _key);
         if (Object.hasOwnProperty.call(employeeInfo, _key)) {
-          var _employeeInfoInput$_k;
-          console.log('employeeInfo0000', (_employeeInfoInput$_k = employeeInfoInput[_key]) === null || _employeeInfoInput$_k === void 0 ? void 0 : _employeeInfoInput$_k.value, 'sajkdhjasj');
-          if (employeeInfo[_key] === false && employeeInfoInput[_key] !== undefined && (typeof employeeInfoInput[_key] === 'string' && !employeeInfoInput[_key] || typeof employeeInfoInput[_key] === 'object' && !employeeInfoInput[_key].value || !employeeInfoInput[_key].value) === '' && fieldsVisibility.employee_info[_key] !== 2) {
+          if (employeeInfo[_key] === false && employeeInfoInput[_key] !== undefined && (typeof employeeInfoInput[_key] === 'string' && !employeeInfoInput[_key] || typeof employeeInfoInput[_key] === 'object' && !employeeInfoInput[_key].value) && fieldsVisibility.employee_info[_key] !== 2) {
             _isError = true;
             if (_errorArray.indexOf(_key) === -1) _errorArray.push(_key);
             _errorMsgs[_key] = ErrorMessages[_key];
@@ -6066,7 +6489,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) {
@@ -6086,115 +6509,57 @@ var UserAddEdit = function UserAddEdit(props) {
           }
         };
         for (var _key3 in _errorMsgs) {
-          if (_loop()) break;
+          if (_loop3()) break;
         }
       }
+      var cardApiflag = false;
+      if (productAccess.cards === 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 (err.passport) {
-                err.passport_photo = _extends({}, err.passport);
-                delete err.passport;
+          if (cardApiflag) {
+            fetch(userAddEditUrl.cardsEditUserDetails(editUserId), {
+              method: 'POST',
+              body: JSON.stringify(cardsPayload),
+              headers: {
+                'Content-Type': 'application/json',
+                'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
               }
-              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;
-              }
-            } else if (typeof err === 'string') {
-              IUIToastMessageService$4.warningNotify(err);
-            } else {
-              IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
-            }
-          })["finally"](function () {
-            dispatch(stopLoader());
-          });
+            }).then(function (response) {
+              return response.json();
+            }).then(function (res) {
+              updateUserApiCall(payload, inputChangeLog);
+            })["catch"](function (error) {
+              console.log("errorrr", error);
+            });
+          } 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;
-              }
-              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;
-                    }
-                  }
-                }
-              };
-              for (var _key5 in err) {
-                if (_loop3()) break;
+          dispatch(showLoader());
+          if (cardApiflag === true) {
+            fetch(userAddEditUrl.cardsEditUserDetails(isEditMode ? editUserId : id), {
+              method: 'POST',
+              body: JSON.stringify(cardsPayload),
+              headers: {
+                'Content-Type': 'application/json',
+                'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
               }
-            } else if (typeof err === 'string') {
-              IUIToastMessageService$4.warningNotify(err);
-            } else {
-              IUIToastMessageService$4.warningNotify('Opps, Something went wrong.');
-            }
-          })["finally"](function () {
-            dispatch(stopLoader());
-          });
+            }).then(function (response) {
+              return response.json();
+            }).then(function (res) {
+              createUserApiCall(payload);
+            })["catch"](function (error) {
+              console.log("errorrr", error);
+            });
+          } else {
+            createUserApiCall(payload);
+          }
         }
       }
       return Promise.resolve();
@@ -6233,17 +6598,13 @@ var UserAddEdit = function UserAddEdit(props) {
     if (verifyUserId) {
       dispatch(showLoader());
       dispatch(verifyUserInfo(verifyUserId)).then(function (res) {
+        setNewCountryCode(res === null || res === void 0 ? void 0 : res.country_contact_code);
         setPersonalInfoInput(function (prevState) {
           return _extends({}, prevState, {
-            first_name: res.fname,
-            last_name: res.lname,
+            first_name: res.first_name,
+            last_name: res.last_name,
             email: res.email,
-            contact_number: res.phone,
-            dob: function () {
-              var dt = new Date(res.dob);
-              var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-              return dt.getDate() + " " + months[dt.getMonth()] + " " + dt.getFullYear();
-            }(),
+            contact_number: res === null || res === void 0 ? void 0 : res.contact_number,
             gender: function () {
               if (res.gender === 'male') return 'Male';else if (res.gender === 'female') return 'Female';else if (res.gender === 'others') return 'Others';else return '';
             }()
@@ -6516,7 +6877,7 @@ var UserAddEdit = function UserAddEdit(props) {
     md: 4
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
     label: "Product access",
-    description: isProfile ? '' : 'Select at least one product',
+    description: isProfile ? '' : 'Please select a product. Cards are available along with at least one additional product.',
     headerType: true,
     required: true
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
@@ -6622,6 +6983,19 @@ var UserAddEdit = function UserAddEdit(props) {
     isProfile: isProfile,
     editUserId: editUserId,
     roles: renderFields.expenseRoles
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles.dividerColor
+  }), isCardsDetailsRendered && productAccess && productAccess.cards && /*#__PURE__*/React__default.createElement(CardsField, {
+    cardsConstants: cardsDetails.cardsConstants,
+    type: "cards",
+    isProfile: isProfile,
+    onRoleChange: function onRoleChange(_ref7) {
+      var _value = _ref7._value;
+      return setCardsRole(_value);
+    },
+    roleValue: cardsRole,
+    roles: cardsDetails.cardsRoles,
+    cardsAdmin: isCardsAdmin
   }))) : /*#__PURE__*/React__default.createElement(VerificationError, {
     config: config,
     errMsg: hasVerificationError
@@ -8430,7 +8804,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 !== "Card Holder" ? /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
@@ -8443,7 +8817,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 !== "Card Holder" && /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
         component: "div",
         display: "flex"
       }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
@@ -8456,7 +8830,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 !== "Card 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',
@@ -8597,17 +8984,17 @@ var SingupRequests = function SingupRequests(props) {
     return dt.getDate() + " " + months[dt.getMonth()] + " " + dt.getFullYear();
   };
   var columns = [{
-    id: 'fname',
+    id: 'first_name',
     label: 'Name',
     minWidth: 250,
     sortable: true,
     cell: function cell(row) {
       var _row$profile_pic2;
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIProfileBox, {
-        firstName: row.fname,
-        lastName: row.lname,
+        firstName: row.first_name,
+        lastName: row.last_name,
         isLetterAvatar: row.profile_pic && row.profile_pic.presigned_url ? false : true,
-        primaryText: row.fname + ' ' + row.lname,
+        primaryText: row.first_name + ' ' + row.last_name,
         secondaryText: row.email,
         letterAvatarTextColor: "black",
         letterAvatarBackgroundColor: "#d3d3d3",
@@ -8616,7 +9003,7 @@ var SingupRequests = function SingupRequests(props) {
       }));
     }
   }, {
-    id: 'created',
+    id: 'created_at',
     label: 'Requested on',
     minWidth: 100,
     sortable: true,
@@ -8626,7 +9013,7 @@ var SingupRequests = function SingupRequests(props) {
         width: 100
       }, /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
         className: clsx(styles$5.rowText, styles$5.textTransform)
-      }, formatDate(row.created)));
+      }, formatDate(row.created_at)));
     }
   }, {
     id: 'actions',
@@ -8899,7 +9286,7 @@ var UserList = function UserList(_ref2) {
   var _React$useState11 = React__default.useState('asc'),
     signup_order = _React$useState11[0],
     setSignUpOrder = _React$useState11[1];
-  var _React$useState12 = React__default.useState('fname'),
+  var _React$useState12 = React__default.useState('first_name'),
     signup_orderBy = _React$useState12[0],
     setSignUpOrderBy = _React$useState12[1];
   var _useState22 = React.useState(''),
@@ -8922,7 +9309,11 @@ var UserList = function UserList(_ref2) {
     }),
     signupRequestListInfo = _useSelector3.signupRequestListInfo;
   var redirectToNotifications = function redirectToNotifications() {
-    history.push(config.routes.notification.path);
+    if (config.routes.notification) {
+      history.push({
+        pathname: config.routes.notification.path
+      });
+    }
   };
   var openDeactivateModal = function openDeactivateModal() {
     if (Object.values(selected).flat().length === 0 || Object.values(selected).flat() === undefined) {
@@ -9544,7 +9935,7 @@ var UserList = function UserList(_ref2) {
         variant: "body2",
         className: clsx(styles$5.description)
       }, "Verify and add users to allow them to start using ITILITE. Set up preferences for receiving sign up request updates in", ' ', /*#__PURE__*/React__default.createElement("span", {
-        onClick: config.routes.notification && redirectToNotifications,
+        onClick: redirectToNotifications,
         className: clsx(config.routes.notification && 'iui__cursor-pointer iui__border--bottom_solid_black500-1')
       }, "Notifications"))), /*#__PURE__*/React__default.createElement(SingupRequests, {
         data: signupRequestListInfo,
@@ -10082,7 +10473,6 @@ function EditPanelDialog(_ref) {
   }, [rowData]);
   var history = reactRouterDom.useHistory();
   var handleAddPageNavigation = function handleAddPageNavigation() {
-    console.log(rowData);
     history.push({
       pathname: config.routes.users.add.path,
       state: rowData