@itilite/iui-user-management 1.4.842 → 1.4.891

package/dist/index.css

@@ -188,6 +188,26 @@
 ._ajB82 {
   width: 100% !important;
 }
+
+._1lEyQ ul li:hover {
+  background-color: rgba(254, 210, 193, 0.4509803922) !important;
+  border-radius: 8px;
+}
+
+._3ymE1.MuiButton-root {
+  background-color: #EC5D25;
+  color: #ffffff;
+  border: none;
+  border-radius: 8px !important;
+  padding: 8px 16px !important;
+  height: 40px;
+}
+._3ymE1.MuiButton-root:hover {
+  background-color: #ec5d25 !important;
+}
+._3ymE1 .MuiButton-endIcon svg {
+  fill: #ffffff !important;
+}
 ._smjc4 {
   border-radius: 15px;
   background-color: #F4F4F4;
@@ -384,6 +404,7 @@
   position: relative;
   transition: all 0.2s ease;
   min-height: 200px;
+  height: 216px;
   display: flex;
   flex-direction: column;
   width: 305px;
@@ -426,7 +447,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
   padding: 16px;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
@@ -437,7 +458,7 @@
 }
 
 ._2Vlhq {
-  color: #6b7280;
+  color: #363E4F;
 }
 
 ._bp-Mt {
@@ -446,6 +467,8 @@
   color: #363E4F;
   margin: 0 0 4px 0;
   line-height: 20px;
+  font-family: "Inter";
+  margin-bottom: 0;
 }
 
 ._3l4HZ {
@@ -453,6 +476,7 @@
   font-weight: 500;
   letter-spacing: 0.5px;
   line-height: 20px;
+  font-family: "Inter";
 }
 ._duePd ._3l4HZ {
   color: #6b7280;
@@ -484,21 +508,33 @@
 }
 
 ._7FOPe {
+  color: #363E4F;
+  font-family: Inter;
   font-size: 13px;
+  font-style: normal;
   font-weight: 400;
-  color: #1a1a1a;
-  margin-bottom: 12px;
-  letter-spacing: 1px;
   line-height: 18px;
+  margin-bottom: 12px;
 }
 
 ._CI_p2,
 ._3Gzqu {
+  color: #363E4F;
+  font-family: Inter;
   font-size: 13px;
-  color: #6b7280;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+._3Gzqu {
   margin-bottom: 6px;
 }
 
+._CI_p2 {
+  margin-bottom: 12px;
+}
+
 ._ivgBf {
   font-size: 13px;
   color: #9ca3af;
@@ -510,6 +546,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0 16px 16px 16px;
+  margin-top: -14px;
 }
 
 ._EV0l8 {

package/dist/index.js

@@ -185,19 +185,9 @@ function _finallyRethrows(body, finalizer) {
   return finalizer(false, result);
 }
 
-var styles = {"UUIUserManagementAddEdit":"_3n-WG","pageHeader":"_3qWcA","buttonWrapper":"_1IP9P","scrolled":"_m8f96","headingButtonWrapper":"_w9z7b","headingButtonWrapperProfile":"_12Wd9","hintText":"_ySdbZ","heading":"_2Y1Aw","headingLarge":"_2K1NF","headingMedium":"_RUuAz","headingSmall":"_23Dye","additionalInfoContainer":"_1Suhw","additionalInfoTitle":"_56iJF","titleContainer":"_H5nfl","expandIconAlign":"_3F4i0","detailsContainer":"_2G0LW","formWrapper":"_2fPRc","sectionWrapper":"_37Gqp","margin":"_2Sdl7","minGridWidth":"_2D7iu","firstRowMargin":"_1BozG","firstChildMargin":"_2C3Mb","paddingTop":"_DBPjV","backGrdColorOnHover":"_5oE6H","fieldMargin":"_RCWjq","productContainerGap":"_tuCbi","containerWidth":"_1oWos","productItemBroder":"_T0Hcd","headingPadding":"_2MFfQ","emptyFieldContainer":"_3VWtw","emptyFieldDescription":"_2jC5u","rowGap":"_1NJFY","formTitle":"_GAKk2","formDescription":"_3TZ6Z","themeLink":"_eJ_1B","dashedLine":"_3ZOs1","dividerColor":"_2pxEJ","errorTextCls":"_27eth","backdrop":"_Pm0Au","inputWidth":"_ajB82"};
+var styles = {"UUIUserManagementAddEdit":"_3n-WG","pageHeader":"_3qWcA","buttonWrapper":"_1IP9P","scrolled":"_m8f96","headingButtonWrapper":"_w9z7b","headingButtonWrapperProfile":"_12Wd9","hintText":"_ySdbZ","heading":"_2Y1Aw","headingLarge":"_2K1NF","headingMedium":"_RUuAz","headingSmall":"_23Dye","additionalInfoContainer":"_1Suhw","additionalInfoTitle":"_56iJF","titleContainer":"_H5nfl","expandIconAlign":"_3F4i0","detailsContainer":"_2G0LW","formWrapper":"_2fPRc","sectionWrapper":"_37Gqp","margin":"_2Sdl7","minGridWidth":"_2D7iu","firstRowMargin":"_1BozG","firstChildMargin":"_2C3Mb","paddingTop":"_DBPjV","backGrdColorOnHover":"_5oE6H","fieldMargin":"_RCWjq","productContainerGap":"_tuCbi","containerWidth":"_1oWos","productItemBroder":"_T0Hcd","headingPadding":"_2MFfQ","emptyFieldContainer":"_3VWtw","emptyFieldDescription":"_2jC5u","rowGap":"_1NJFY","formTitle":"_GAKk2","formDescription":"_3TZ6Z","themeLink":"_eJ_1B","dashedLine":"_3ZOs1","dividerColor":"_2pxEJ","errorTextCls":"_27eth","backdrop":"_Pm0Au","inputWidth":"_ajB82","buttonRight":"_1lEyQ","containedDropdownBtn":"_3ymE1"};
 
-function r(e) {
-  var t,
-    f,
-    n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;else if ("object" == typeof e) if (Array.isArray(e)) for (t = 0; t < e.length; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);else for (t in e) e[t] && (n && (n += " "), n += t);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = ""; f < arguments.length;) (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
 var GetInputType = React__default.forwardRef(function (props, ref) {
   var _p = props._p,
@@ -899,6 +889,9 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
     approvers: {},
     requested_user_is_admin: payload.isCardsAdmin
   };
+  if (payload.send_welcome_email !== undefined) {
+    res.should_send_welcome_email = payload.send_welcome_email;
+  }
   var userTags = [];
   for (var key in payload.userTagType) {
     if (Object.hasOwnProperty.call(payload.userTagType, key) && payload.userTagType[key]) {
@@ -2647,11 +2640,13 @@ var Visa = function Visa(props) {
 var IUILocalStorageService$4 = utils.services.IUILocalStorageService;
 var env$3 = utils.configs.env;
 var CardsManagement = function CardsManagement(_ref) {
-  var _pg$gateway;
+  var _pg$gateway, _selectedCard$metadat;
   var _ref$paymentDetails = _ref.paymentDetails,
     paymentDetails = _ref$paymentDetails === void 0 ? {} : _ref$paymentDetails,
     _ref$paymentMethod = _ref.paymentMethod,
-    paymentMethod = _ref$paymentMethod === void 0 ? null : _ref$paymentMethod;
+    paymentMethod = _ref$paymentMethod === void 0 ? null : _ref$paymentMethod,
+    _ref$sendLog = _ref.sendLog,
+    sendLog = _ref$sendLog === void 0 ? function () {} : _ref$sendLog;
   var dispatch = reactRedux.useDispatch();
   var _ref2 = paymentDetails || {},
     _ref2$pg = _ref2.pg,
@@ -2673,8 +2668,16 @@ var CardsManagement = function CardsManagement(_ref) {
     setSelectedCard(null);
   };
   var handleMarkAsDefault = function handleMarkAsDefault() {
-    console.log('Mark as default:', selectedCard);
+    var _selectedCard$card;
     if (!pg || !selectedCard) return;
+    sendLog({
+      eventName: 'edit_card_clicked',
+      customProperties: {
+        action_type: 'Make default',
+        card_last4: (selectedCard === null || selectedCard === void 0 ? void 0 : (_selectedCard$card = selectedCard.card) === null || _selectedCard$card === void 0 ? void 0 : _selectedCard$card.last4) || ''
+      },
+      logImpression: true
+    });
     dispatch(setDefaultPaymentCard({
       user_id: +pg.user_id,
       method_id: selectedCard.id,
@@ -2684,13 +2687,21 @@ var CardsManagement = function CardsManagement(_ref) {
     handleMenuClose();
   };
   var handleDeleteCard = function handleDeleteCard() {
+    var _selectedCard$card2;
+    sendLog({
+      eventName: 'edit_card_clicked',
+      customProperties: {
+        action_type: 'Delete',
+        card_last4: (selectedCard === null || selectedCard === void 0 ? void 0 : (_selectedCard$card2 = selectedCard.card) === null || _selectedCard$card2 === void 0 ? void 0 : _selectedCard$card2.last4) || ''
+      },
+      logImpression: true
+    });
     dispatch(deletePaymentCard({
       pmId: selectedCard.id,
       vendorId: pg.vendor_id
     }));
     handleMenuClose();
   };
-  console.log('test mudu 22');
   var getBrandLogo = function getBrandLogo(brand) {
     var width = 40;
     var aspectRatio = 780 / 500;
@@ -2854,7 +2865,11 @@ var CardsManagement = function CardsManagement(_ref) {
   }) : null), console.log('cards', cards, 'cardsCount', cardsCount, pg), (!cards || cardsCount < 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 === 1 && /*#__PURE__*/React__default.createElement("button", {
     className: classes.addCardButton,
     onClick: function onClick() {
-      return window.location.assign(_url);
+      sendLog({
+        eventName: 'add_user_card_clicked',
+        logImpression: true
+      });
+      window.location.assign(_url);
     }
   }, /*#__PURE__*/React__default.createElement("span", {
     className: classes.plusIcon
@@ -2898,7 +2913,7 @@ var CardsManagement = function CardsManagement(_ref) {
     }
   }, selectedCard && !+selectedCard.metadata.default_card && /*#__PURE__*/React__default.createElement(core.MenuItem, {
     onClick: handleMarkAsDefault
-  }, "Mark as default"), /*#__PURE__*/React__default.createElement(core.MenuItem, {
+  }, "Mark as default"), (cardsCount === 1 || cardsCount > 1 && !+(selectedCard === null || selectedCard === void 0 ? void 0 : (_selectedCard$metadat = selectedCard.metadata) === null || _selectedCard$metadat === void 0 ? void 0 : _selectedCard$metadat.default_card)) && /*#__PURE__*/React__default.createElement(core.MenuItem, {
     onClick: handleDeleteCard,
     style: {
       color: '#ff4444'
@@ -2911,7 +2926,9 @@ var PaymentCards = function PaymentCards(_ref) {
   var _ref$paymentDetails = _ref.paymentDetails,
     paymentDetails = _ref$paymentDetails === void 0 ? {} : _ref$paymentDetails,
     _ref$paymentMethod = _ref.paymentMethod,
-    paymentMethod = _ref$paymentMethod === void 0 ? null : _ref$paymentMethod;
+    paymentMethod = _ref$paymentMethod === void 0 ? null : _ref$paymentMethod,
+    _ref$sendLog = _ref.sendLog,
+    sendLog = _ref$sendLog === void 0 ? function () {} : _ref$sendLog;
   if (!paymentDetails || ((_Object$keys = Object.keys(paymentDetails)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 0 || (!(paymentDetails !== null && paymentDetails !== void 0 && paymentDetails.cards) || (paymentDetails === null || paymentDetails === void 0 ? void 0 : (_paymentDetails$cards = paymentDetails.cards) === null || _paymentDetails$cards === void 0 ? void 0 : _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 || paymentMethod !== 1)) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   }
@@ -2919,7 +2936,8 @@ var PaymentCards = function PaymentCards(_ref) {
     className: styles$1.dividerColor
   }), /*#__PURE__*/React__default.createElement(CardsManagement, {
     paymentDetails: paymentDetails,
-    paymentMethod: paymentMethod
+    paymentMethod: paymentMethod,
+    sendLog: sendLog
   }));
 };
 
@@ -2995,7 +3013,9 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
     _props$roles = props.roles,
     roles = _props$roles === void 0 ? [] : _props$roles,
     _props$paymentMethod = props.paymentMethod,
-    paymentMethod = _props$paymentMethod === void 0 ? null : _props$paymentMethod;
+    paymentMethod = _props$paymentMethod === void 0 ? null : _props$paymentMethod,
+    _props$sendLog = props.sendLog,
+    sendLog = _props$sendLog === void 0 ? function () {} : _props$sendLog;
   var _useState = React.useState({
       product: '',
       approvers: []
@@ -3293,7 +3313,8 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
     }));
   })))), type === 'travel' && paymentDetails && isProfile && /*#__PURE__*/React__default.createElement(PaymentCards, {
     paymentDetails: paymentDetails,
-    paymentMethod: paymentMethod
+    paymentMethod: paymentMethod,
+    sendLog: sendLog
   }));
 };
 
@@ -5052,6 +5073,7 @@ function withStore(Component) {
 }
 
 var ExpandMoreIcon = function ExpandMoreIcon(props) {
+  var fillColor = props.fillColor || '#6B7280';
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: props.width,
@@ -5059,7 +5081,7 @@ var ExpandMoreIcon = function ExpandMoreIcon(props) {
     fill: "none",
     viewBox: "0 0 12 7"
   }, /*#__PURE__*/React__default.createElement("path", {
-    fill: "#6B7280",
+    fill: fillColor,
     d: "M.293.294a1 1 0 011.414 0L6 4.587 10.293.294a1 1 0 111.414 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414z"
   }));
 };
@@ -6427,7 +6449,9 @@ var UserAddEdit = function UserAddEdit(props) {
     _props$isProfile = props.isProfile,
     isProfile = _props$isProfile === void 0 ? false : _props$isProfile,
     _props$paymentMethod = props.paymentMethod,
-    paymentMethod = _props$paymentMethod === void 0 ? null : _props$paymentMethod;
+    paymentMethod = _props$paymentMethod === void 0 ? null : _props$paymentMethod,
+    _props$sendLog = props.sendLog,
+    sendLog = _props$sendLog === void 0 ? function () {} : _props$sendLog;
   env$4.init(config, isProfile);
   var queryParams = new URLSearchParams(window.location.search);
   var verifyUserId = Number(queryParams.get(config.routes.users.add.queryParamKeys.verifyUserId));
@@ -7706,7 +7730,10 @@ var UserAddEdit = function UserAddEdit(props) {
       return Promise.reject(e);
     }
   };
-  var formSubmitHandler = function formSubmitHandler() {
+  var formSubmitHandler = function formSubmitHandler(send_welcome_email) {
+    if (send_welcome_email === void 0) {
+      send_welcome_email = false;
+    }
     try {
       var checkAnyError = doesFormHasError();
       if (checkAnyError) {
@@ -7744,6 +7771,9 @@ var UserAddEdit = function UserAddEdit(props) {
         cardsRole: cardsRole,
         isCardsAdmin: isCardsAdmin
       };
+      if (!isEditMode && !isProfile) {
+        payload.send_welcome_email = send_welcome_email;
+      }
       if (verifyUserId) {
         payload.verifyUserId = verifyUserId;
       }
@@ -8132,12 +8162,34 @@ var UserAddEdit = function UserAddEdit(props) {
     onClick: handleCancelNavigation
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
-    className: "pageHeader--button-single button-right"
-  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
+    className: clsx('pageHeader--button-single', styles.buttonRight)
+  }, isEditMode || isProfile ? /*#__PURE__*/React__default.createElement(iuistyles.IUIButton, {
     buttonText: "Save",
     type: "contained",
     onClick: formSubmitHandler,
     disabled: isPageLoading || productAccess.travel === false && productAccess.expense === false || !!doesFormHasError()
+  }) : /*#__PURE__*/React__default.createElement(iuistyles.IUIDropdownButton, {
+    buttonText: "Create user",
+    outlinedBtn: false,
+    className: styles.containedDropdownBtn,
+    placement: "bottom-end",
+    endIcon: /*#__PURE__*/React__default.createElement(ExpandMoreIcon, {
+      fillColor: "white",
+      width: "10",
+      height: "10",
+      fill: true
+    }),
+    menuListInfo: [{
+      label: 'Send email invite',
+      handler: function handler() {
+        return formSubmitHandler(true);
+      }
+    }, {
+      label: 'Do not send email',
+      handler: function handler() {
+        return formSubmitHandler(false);
+      }
+    }]
   }))))), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     component: "div",
     marginTop: "8rem",
@@ -8351,7 +8403,8 @@ var UserAddEdit = function UserAddEdit(props) {
     isProfile: isProfile,
     editUserId: editUserId,
     roles: renderFields.travelRoles,
-    paymentMethod: paymentMethod
+    paymentMethod: paymentMethod,
+    sendLog: sendLog
   }), /*#__PURE__*/React__default.createElement(AdditionalInfo, {
     membershipInfoInput: membershipInfoInput,
     onMemInfoInputChange: onMemInfoInputChange,
@@ -8396,7 +8449,8 @@ var UserAddEdit = function UserAddEdit(props) {
     isProfile: isProfile,
     editUserId: editUserId,
     roles: renderFields.expenseRoles,
-    paymentMethod: paymentMethod
+    paymentMethod: paymentMethod,
+    sendLog: sendLog
   }), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
     className: styles.dividerColor
   }), isCardsDetailsRendered && productAccess && productAccess.card && /*#__PURE__*/React__default.createElement(CardsField, {
@@ -8647,10 +8701,15 @@ var downloadUploadedRecords = function downloadUploadedRecords(type, jobId) {
     });
   };
 };
-var importUploadedRecords = function importUploadedRecords(jobId, canUpdateExistingUsers) {
+var importUploadedRecords = function importUploadedRecords(jobId, canUpdateExistingUsers, sendInvite) {
+  if (sendInvite === void 0) {
+    sendInvite = false;
+  }
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.post(userBulkImport.importRecords() + "?job_id=" + jobId + "&update=" + canUpdateExistingUsers).then(function (res) {
+      api$8.post(userBulkImport.importRecords() + "?job_id=" + jobId + "&update=" + canUpdateExistingUsers, {
+        should_send_welcome_email: sendInvite
+      }).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -8911,9 +8970,12 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   var _useState5 = React.useState(false),
     canUpdateExistingUsers = _useState5[0],
     setCanUpdateExistingUsers = _useState5[1];
-  var _useState6 = React.useState(false),
-    isFileDownloading = _useState6[0],
-    setDownlStatus = _useState6[1];
+  var _useState6 = React.useState(true),
+    sendInvite = _useState6[0],
+    setSendInvite = _useState6[1];
+  var _useState7 = React.useState(false),
+    isFileDownloading = _useState7[0],
+    setDownlStatus = _useState7[1];
   var _useSelector = reactRedux.useSelector(function (state) {
       return state.common;
     }),
@@ -9021,7 +9083,7 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
         }
       }
       setImportStatus(1);
-      return Promise.resolve(dispatch(importUploadedRecords(jobId, canUpdateExistingUsers ? 1 : 0))).then(function (res) {
+      return Promise.resolve(dispatch(importUploadedRecords(jobId, canUpdateExistingUsers ? 1 : 0, sendInvite))).then(function (res) {
         var _temp = function () {
           if (res.data.status) {
             return Promise.resolve(dispatch(_executionJob(jobId, 'is_job_completed')).then(function (resp) {
@@ -9052,6 +9114,9 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
   var handleExistingUserUpdation = function handleExistingUserUpdation(event) {
     setCanUpdateExistingUsers(!canUpdateExistingUsers);
   };
+  var handleSendInvite = function handleSendInvite() {
+    setSendInvite(!sendInvite);
+  };
   var CustomStepIcon = function CustomStepIcon(step) {
     if ((importStatus === 1 || importStatus === 2 || importStatus === 4) && step === Number(activeStep)) {
       return /*#__PURE__*/React__default.createElement(iuistyles.IUIPrimaryRadio, {
@@ -9361,6 +9426,18 @@ var UserBulkUpload = function UserBulkUpload(_ref) {
     label: "Update any existing users",
     className: clsx(styles$5.checkboxlabel, (_clsx5 = {}, _clsx5[styles$5.disabledText] = +userBulkImportInfo.exist_users === 0, _clsx5)),
     disabled: +userBulkImportInfo.exist_users === 0
+  })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
+    display: "flex",
+    style: {
+      paddingLeft: '28px'
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIFormControlLabel, {
+    control: /*#__PURE__*/React__default.createElement(iuistyles.IUICheckBox, {
+      handleCheckBoxHandler: handleSendInvite,
+      checked: sendInvite
+    }),
+    label: "Send invitation emails to new users who have not logged into the platform.",
+    className: clsx(styles$5.checkboxlabel)
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIBox, {
     display: "flex",
     style: {