@itilite/iui-user-management 1.4.7611 → 1.4.7682

package/dist/index.css

@@ -357,6 +357,18 @@
   margin-bottom: 60px;
 }
 
+._1yV0j {
+  display: flex;
+  padding: 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  color: #CF2231;
+  border-radius: 4px;
+  background: #FFF1F0;
+  margin-bottom: 32px;
+}
+
 ._1oHGu {
   display: flex;
   flex-wrap: wrap;
@@ -380,34 +392,34 @@
   stroke: #6b7280 !important;
 }
 ._3ZTQc ._3utA0._3O33a path {
-  stroke: #3b82f6 !important;
+  stroke: #3D89FF !important;
 }
 ._3ZTQc ._3utA0._180_L path {
-  stroke: #10b981 !important;
+  stroke: #2EA363 !important;
 }
 ._3ZTQc:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 ._3ZTQc._duePd {
-  border-color: #d1d5db;
+  border-color: #D3D8DF;
 }
 ._3ZTQc._duePd ._1eF61 {
-  background: #f1f3f5;
-  border-bottom: 1px solid #d1d5db;
+  background: #F1F3F5;
+  border-bottom: 1px solid #D3D8DF;
 }
 ._3ZTQc._3O33a {
-  border-color: #bfdbfe;
+  border-color: #86CBFF;
 }
 ._3ZTQc._3O33a ._1eF61 {
-  background: #eff6ff;
-  border-bottom: 1px solid #bfdbfe;
+  background: #EBF8FF;
+  border-bottom: 1px solid #86CBFF;
 }
 ._3ZTQc._180_L {
-  border-color: #bbf7d0;
+  border-color: #70DC9D;
 }
 ._3ZTQc._180_L ._1eF61 {
-  background: #f0fdf4;
-  border-bottom: 1px solid #bbf7d0;
+  background: #D9FBE5;
+  border-bottom: 1px solid #70DC9D;
 }
 
 ._1eF61 {
@@ -431,7 +443,7 @@
 ._bp-Mt {
   font-size: 14px;
   font-weight: 600;
-  color: #363e4f;
+  color: #363E4F;
   margin: 0 0 4px 0;
   line-height: 20px;
 }
@@ -446,10 +458,10 @@
   color: #6b7280;
 }
 ._3O33a ._3l4HZ {
-  color: #3b82f6;
+  color: #3D89FF;
 }
 ._180_L ._3l4HZ {
-  color: #10b981;
+  color: #2EA363;
 }
 
 ._3TTEn {
@@ -461,7 +473,7 @@
 }
 
 ._1S27X {
-  color: #10b981;
+  color: #2EA363;
   font-size: 20px;
 }
 

package/dist/index.js

@@ -829,7 +829,7 @@ var UserRole = function UserRole(_ref) {
 
 var styles$1 = {"defaultLabel":"_smjc4","card":"_3_S9J","cardNumber":"_36E9M","cardDigit":"_2pm-T","expiryDate":"_2tBnF","cardImage":"_3QvZh","visa":"_1IpBm","mastercard":"_2x6IX","amex":"_2a38S","discover":"_2vksl","diners":"_2kQRs","jcb":"_2bO1f","unionpay":"_2_jfu","is_nothing":"_1Lrzs","addCard":"_3711U","cardDeleteBtn":"_7Da2t","cardLabel":"_PQTex","defaultBtn":"_1_ArA","cursonPointer":"_1L115","sectionWrapper":"_VpUCK","margin":"_1Fs_D","minGridWidth":"_1hl-Z","firstRowMargin":"_1WZZj","firstChildMargin":"_IT_O_","paddingTop":"_Mhnl7","dividerColor":"_3ltFd"};
 
-var classes = {"sectionHeader":"_2d_OH","myCardsSection":"_3MNHj","companyCardsSection":"_34lN6","cardsGrid":"_1oHGu","card":"_3ZTQc","moreIcon":"_3utA0","personal":"_duePd","corporate":"_3O33a","company":"_180_L","cardHeader":"_1eF61","cardTitleSection":"_2c40W","cardMaskedNumber":"_2Vlhq","cardName":"_bp-Mt","cardType":"_3l4HZ","menuButton":"_3TTEn","lockIcon":"_1S27X","cardDetails":"_IP2rg","cardNumber":"_7FOPe","cardExpiry":"_CI_p2","cardCvv":"_3Gzqu","cardUnhide":"_ivgBf","cardFooter":"_1WgPL","brandLogo":"_EV0l8","addCardButton":"_1oaCc","plusIcon":"_w9L5L"};
+var classes = {"sectionHeader":"_2d_OH","myCardsSection":"_3MNHj","companyCardsSection":"_34lN6","disabledNotice":"_1yV0j","cardsGrid":"_1oHGu","card":"_3ZTQc","moreIcon":"_3utA0","personal":"_duePd","corporate":"_3O33a","company":"_180_L","cardHeader":"_1eF61","cardTitleSection":"_2c40W","cardMaskedNumber":"_2Vlhq","cardName":"_bp-Mt","cardType":"_3l4HZ","menuButton":"_3TTEn","lockIcon":"_1S27X","cardDetails":"_IP2rg","cardNumber":"_7FOPe","cardExpiry":"_CI_p2","cardCvv":"_3Gzqu","cardUnhide":"_ivgBf","cardFooter":"_1WgPL","brandLogo":"_EV0l8","addCardButton":"_1oaCc","plusIcon":"_w9L5L"};
 
 var SHOW_LOADER = 'SHOW_LOADER';
 var STOP_LOADER = 'STOP_LOADER';
@@ -2240,12 +2240,13 @@ var env$3 = utils.configs.env;
 var CardsManagement = function CardsManagement(_ref) {
   var _pg$gateway;
   var _ref$paymentDetails = _ref.paymentDetails,
-    paymentDetails = _ref$paymentDetails === void 0 ? {} : _ref$paymentDetails;
+    paymentDetails = _ref$paymentDetails === void 0 ? {} : _ref$paymentDetails,
+    _ref$paymentMethod = _ref.paymentMethod,
+    paymentMethod = _ref$paymentMethod === void 0 ? null : _ref$paymentMethod;
   var dispatch = reactRedux.useDispatch();
   var pg = paymentDetails.pg,
     _paymentDetails$cards = paymentDetails.cards,
     cards = _paymentDetails$cards === void 0 ? null : _paymentDetails$cards;
-  console.log(paymentDetails, 'paymentDetails3');
   var _useState = React.useState(null),
     anchorEl = _useState[0],
     setAnchorEl = _useState[1];
@@ -2344,9 +2345,9 @@ var CardsManagement = function CardsManagement(_ref) {
       className: classes.cardTitleSection
     }, /*#__PURE__*/React__default.createElement("h3", {
       className: classes.cardName
-    }, card.name), /*#__PURE__*/React__default.createElement("span", {
+    }, card.alias), /*#__PURE__*/React__default.createElement("span", {
       className: classes.cardType
-    }, getCardTypeLabel(card.category))), isCompanyCard ? /*#__PURE__*/React__default.createElement(LockIcon, {
+    }, getCardTypeLabel(card.category), isDefaultCard && /*#__PURE__*/React__default.createElement("span", null, ' (Default)'))), isCompanyCard ? /*#__PURE__*/React__default.createElement(LockIcon, {
       className: classes.lockIcon
     }) : /*#__PURE__*/React__default.createElement(core.IconButton, {
       size: "small",
@@ -2356,7 +2357,7 @@ var CardsManagement = function CardsManagement(_ref) {
       className: classes.menuButton
     }, /*#__PURE__*/React__default.createElement(MoreIcon, {
       className: clsx(classes.moreIcon, classes[cardClass]),
-      color: isCompanyCard ? '#10B981' : '#3D89FF'
+      color: isCompanyCard ? '#2EA363' : '#3D89FF'
     }))), /*#__PURE__*/React__default.createElement("div", {
       className: classes.cardDetails
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -2369,9 +2370,7 @@ var CardsManagement = function CardsManagement(_ref) {
       className: classes.cardCvv
     }, "CVV \u2022\u2022\u2022")), /*#__PURE__*/React__default.createElement("div", {
       className: classes.cardFooter
-    }, isDefaultCard ? /*#__PURE__*/React__default.createElement("div", {
-      className: styles$1.defaultLabel
-    }, "Default Card") : /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("img", {
+    }, /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("img", {
       src: getBrandLogo(card.card.brand),
       alt: card.card.brand,
       className: classes.brandLogo
@@ -2411,20 +2410,22 @@ var CardsManagement = function CardsManagement(_ref) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     container: true,
     className: styles$1.formFieldsWrapper
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, paymentMethod === 2 && /*#__PURE__*/React__default.createElement("div", {
+    style: classes.disabledNotice
+  }, "Company has disabled usage of your personal cards, please reach out to your admin"), /*#__PURE__*/React__default.createElement("div", {
     className: classes.cardsGrid
   }, personalCards.map(function (card) {
     return renderCard(card);
   }), corporateCards.map(function (card) {
     return renderCard(card);
-  })), (!cards || (cards === null || cards === void 0 ? void 0 : cards.length) < 10) && (pg === null || pg === void 0 ? void 0 : (_pg$gateway = pg.gateway) === null || _pg$gateway === void 0 ? void 0 : _pg$gateway.toLowerCase()) === 'stripe' && (pg === null || pg === void 0 ? void 0 : pg.save_card_enable) === 1 && /*#__PURE__*/React__default.createElement("button", {
+  })), (!cards || (cards === null || cards === void 0 ? void 0 : cards.length) < 10) && (pg === null || pg === void 0 ? void 0 : (_pg$gateway = pg.gateway) === null || _pg$gateway === void 0 ? void 0 : _pg$gateway.toLowerCase()) === 'stripe' && (pg === null || pg === void 0 ? void 0 : pg.save_card_enable) === 1 && paymentMethod !== 2 && /*#__PURE__*/React__default.createElement("button", {
     className: classes.addCardButton,
     onClick: function onClick() {
       return window.location.assign(_url);
     }
   }, /*#__PURE__*/React__default.createElement("span", {
     className: classes.plusIcon
-  }, "+"), " Add card test")))))), (companyCards === null || companyCards === void 0 ? void 0 : companyCards.length) !== 0 && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+  }, "+"), " Add card")))))), (companyCards === null || companyCards === void 0 ? void 0 : companyCards.length) !== 0 && /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
     className: styles$1.dividerColor
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     container: true,
@@ -2462,7 +2463,7 @@ var CardsManagement = function CardsManagement(_ref) {
       vertical: 'top',
       horizontal: 'right'
     }
-  }, /*#__PURE__*/React__default.createElement(core.MenuItem, {
+  }, selectedCard && !+selectedCard.metadata.default_card && /*#__PURE__*/React__default.createElement(core.MenuItem, {
     onClick: handleMarkAsDefault
   }, "Mark as default"), /*#__PURE__*/React__default.createElement(core.MenuItem, {
     onClick: handleDeleteCard,
@@ -2478,7 +2479,6 @@ var PaymentCards = function PaymentCards(_ref) {
   if (!paymentDetails || Object.keys(paymentDetails).length === 0 || (!paymentDetails.cards || paymentDetails.cards.length === 0) && ((paymentDetails === null || paymentDetails === void 0 ? void 0 : (_paymentDetails$pg = paymentDetails.pg) === null || _paymentDetails$pg === void 0 ? void 0 : _paymentDetails$pg.gateway.toLowerCase()) !== 'stripe' || (paymentDetails === null || paymentDetails === void 0 ? void 0 : (_paymentDetails$pg2 = paymentDetails.pg) === null || _paymentDetails$pg2 === void 0 ? void 0 : _paymentDetails$pg2.save_card_enable) !== 1)) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   }
-  console.log('paymentDetails2', paymentDetails);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
     className: styles$1.dividerColor
   }), /*#__PURE__*/React__default.createElement(CardsManagement, {
@@ -2556,7 +2556,9 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
     _props$editUserId = props.editUserId,
     editUserId = _props$editUserId === void 0 ? null : _props$editUserId,
     _props$roles = props.roles,
-    roles = _props$roles === void 0 ? [] : _props$roles;
+    roles = _props$roles === void 0 ? [] : _props$roles,
+    _props$paymentMethod = props.paymentMethod,
+    paymentMethod = _props$paymentMethod === void 0 ? null : _props$paymentMethod;
   var _useState = React.useState({
       product: '',
       approvers: []
@@ -2853,7 +2855,8 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
       placeholder: "Example label - \u201CManager\u201D"
     }));
   })))), type === 'travel' && paymentDetails && /*#__PURE__*/React__default.createElement(PaymentCards, {
-    paymentDetails: paymentDetails
+    paymentDetails: paymentDetails,
+    paymentMethod: paymentMethod
   }));
 };
 
@@ -3608,6 +3611,17 @@ var cardsConstants = {
     fullWidth: false,
     visibility: true,
     disableText: 'Please get in touch with your administrator to change this value.'
+  }, {
+    id: 3,
+    label: 'Bookkeeper',
+    description: 'This role is capable of reading all the action for own and other card employees',
+    value: '',
+    name: '',
+    type: 'radio',
+    isAssigned: false,
+    fullWidth: false,
+    visibility: true,
+    disableText: 'Please get in touch with your administrator to change this value.'
   }]
 };
 var passportInfo = [{
@@ -4015,6 +4029,7 @@ var reducer = function reducer(state, action) {
       {
         var _action$payload8, _action$payload8$role, _action$payload9;
         var cardsDetails = _extends({}, state.cardsDetails);
+        console.log(action === null || action === void 0 ? void 0 : action.payload, 'cardsDetails22');
         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 {
@@ -4031,6 +4046,7 @@ var reducer = function reducer(state, action) {
             };
           });
         }
+        console.log(cardsDetails, 'cardsDetails2');
         return _extends({}, state, {
           cardsDetails: cardsDetails,
           isCardsDetailsRendered: true,
@@ -5974,7 +5990,9 @@ var UserAddEdit = function UserAddEdit(props) {
     editUserId = props.editUserId,
     config = props.config,
     _props$isProfile = props.isProfile,
-    isProfile = _props$isProfile === void 0 ? false : _props$isProfile;
+    isProfile = _props$isProfile === void 0 ? false : _props$isProfile,
+    _props$paymentMethod = props.paymentMethod,
+    paymentMethod = _props$paymentMethod === void 0 ? null : _props$paymentMethod;
   env$4.init(config, isProfile);
   var queryParams = new URLSearchParams(window.location.search);
   var verifyUserId = Number(queryParams.get(config.routes.users.add.queryParamKeys.verifyUserId));
@@ -6183,39 +6201,20 @@ var UserAddEdit = function UserAddEdit(props) {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
+        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) {
+        console.log(res, 'cardsDetails222');
         dispatch(setCardsDetails(res));
       } else {
         IUIToastMessageService$6.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$6.warningNotify('Opps, Something went wrong.');
-      }
-    })["catch"](function (error) {
-      console.log("errorrr", error);
+      console.log('errorrr', error);
     });
   };
   React.useEffect(function () {
@@ -6395,13 +6394,20 @@ var UserAddEdit = function UserAddEdit(props) {
       }
     } 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;
+      var _selectedRole = cardsDetails.cardsRoles.find(function (role) {
+        return role.isAssigned;
+      });
+      if (_selectedRole) {
+        setCardsRole(_selectedRole.value);
+      } else {
+        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;
+          }
         }
       }
     }
@@ -6909,10 +6915,11 @@ var UserAddEdit = function UserAddEdit(props) {
     }
   }, [isTokenVerified]);
   React.useEffect(function () {
+    console.log(isProfile, 'isProfile', id, 'id', editUserId, 'editUserId');
     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();
+          fetchEditUserCardsDetails(isProfile ? id : editUserId);
         }
       });
       setPersonalInfoInput(_extends({}, personalInfoInput, {
@@ -6938,7 +6945,6 @@ var UserAddEdit = function UserAddEdit(props) {
             userId: isProfile ? id : editUserId
           })).then(function (res) {
             var _res$user_tags, _res$custom_attribute;
-            console.log(res, 'paymentDetails1', res === null || res === void 0 ? void 0 : res.payment_details);
             var profilePic = [];
             if (res && res.profile_pic) {
               profilePic = [{
@@ -7256,7 +7262,7 @@ var UserAddEdit = function UserAddEdit(props) {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
       var cardsPayload = {
-        "roles": [cardsRole]
+        roles: [cardsRole]
       };
       var payload = {
         personalInfoInput: personalInfoInput,
@@ -7442,7 +7448,7 @@ var UserAddEdit = function UserAddEdit(props) {
               body: JSON.stringify(cardsPayload),
               headers: {
                 'Content-Type': 'application/json',
-                'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
+                authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
               }
             }).then(function (response) {
               if (response.status === 200) {
@@ -7451,7 +7457,7 @@ var UserAddEdit = function UserAddEdit(props) {
                 IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
               }
             })["catch"](function (error) {
-              console.log("errorrr", error);
+              console.log('errorrr', error);
             })["finally"](function () {
               dispatch(stopLoader());
             });
@@ -7469,14 +7475,14 @@ var UserAddEdit = function UserAddEdit(props) {
                   body: JSON.stringify(cardsPayload),
                   headers: {
                     'Content-Type': 'application/json',
-                    'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
+                    authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
                   }
                 }).then(function (response) {
                   if (response.status !== 200) {
                     IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
                   }
                 })["catch"](function (error) {
-                  console.log("errorrr", error);
+                  console.log('errorrr', error);
                 });
               }
               (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);
@@ -7886,7 +7892,8 @@ var UserAddEdit = function UserAddEdit(props) {
     maxApprovers: maxTravelApprovers,
     isProfile: isProfile,
     editUserId: editUserId,
-    roles: renderFields.travelRoles
+    roles: renderFields.travelRoles,
+    paymentMethod: paymentMethod
   }), /*#__PURE__*/React__default.createElement(AdditionalInfo, {
     membershipInfoInput: membershipInfoInput,
     onMemInfoInputChange: onMemInfoInputChange,