@itilite/iui-user-management 1.5.0-beta-4 → 1.5.0-beta-5

package/dist/index.css

@@ -379,6 +379,22 @@
   vertical-align: middle;
 }
 
+._1Oqzs {
+  color: #9A6700;
+  border-radius: 4px;
+  padding: 4px;
+  border: 0.5px solid var(--color-red-200, #EAC54F);
+  background: var(--surface-critical, #FFFBE0);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px; /* 120% */
+  letter-spacing: 0.1px;
+  display: inline-block;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+
 ._3G7La._2_sgJ {
   color: #9A6700;
   border: 0.5px solid #EAC54F;

package/dist/index.js

@@ -845,7 +845,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 = {"disabledCard":"_3MVKj","expiredLabel":"_2_sgJ","expiresoonLabel":"_3G7La","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","cardAlias":"_19m4v","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 = {"disabledCard":"_3MVKj","expiredLabel":"_2_sgJ","invalidLabel":"_1Oqzs","expiresoonLabel":"_3G7La","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","cardAlias":"_19m4v","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';
@@ -2666,6 +2666,12 @@ var Visa = function Visa(props) {
   }))));
 };
 
+var CARDS_DISABLED = {
+  DISABLED: '0',
+  EXPIRED: '2',
+  INVALID: '3'
+};
+
 var IUILocalStorageService$3 = utils.services.IUILocalStorageService;
 var env$3 = utils.configs.env,
   paymentApi$1 = utils.configs.paymentApi;
@@ -2840,14 +2846,20 @@ var CardsManagement = function CardsManagement(_ref) {
     var isCompanyCard = (card === null || card === void 0 ? void 0 : card.category) === 'Company';
     var cardClass = getCardTypeClass(card === null || card === void 0 ? void 0 : card.category);
     var isDefaultCard = !!+(card === null || card === void 0 ? void 0 : (_card$metadata = card.metadata) === null || _card$metadata === void 0 ? void 0 : _card$metadata.default_card);
-    var isExpired = card.metadata.is_enabled === '2';
-    var isDisabled = card.metadata.is_enabled === '0' || isExpired;
+    var isExpired = card.metadata.is_enabled === CARDS_DISABLED.EXPIRED;
+    var isInvalid = card.metadata.is_enabled === CARDS_DISABLED.INVALID;
+    var isDisabled = card.metadata.is_enabled === CARDS_DISABLED.DISABLED || isExpired || isInvalid;
     var currentDate = new Date();
     var cardExpDate = new Date(parseInt(card.card.exp_year, 10), parseInt(card.card.exp_month, 10) - 1);
     var timeDiff = cardExpDate.getTime() - currentDate.getTime();
     var daysToExpire = Math.ceil(timeDiff / (1000 * 3600 * 24));
     var expiresSoon = daysToExpire <= 30 && !isExpired;
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(core.Tooltip, {
+      title: isInvalid ? 'This card is invalid, because you have been issued a new card.' : null,
+      disableHoverListener: !isInvalid,
+      placement: "top",
+      arrow: true
+    }, /*#__PURE__*/React__default.createElement("div", {
       key: card.id,
       className: clsx(classes.card, classes[cardClass], (_clsx = {}, _clsx[classes.disabledCard] = isDisabled, _clsx))
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -2860,7 +2872,9 @@ var CardsManagement = function CardsManagement(_ref) {
       className: classes.cardAlias
     }, card === null || card === void 0 ? void 0 : card.alias), isExpired && /*#__PURE__*/React__default.createElement("span", {
       className: classes.expiredLabel
-    }, "Expired"), expiresSoon && /*#__PURE__*/React__default.createElement("span", {
+    }, "Expired"), isInvalid && /*#__PURE__*/React__default.createElement("span", {
+      className: classes.invalidLabel
+    }, "Invalid"), expiresSoon && !isInvalid && /*#__PURE__*/React__default.createElement("span", {
       className: clsx(classes.expiresoonLabel, classes.expiredLabel)
     }, "Expires Soon")), /*#__PURE__*/React__default.createElement("span", {
       className: classes.cardType
@@ -2887,7 +2901,7 @@ var CardsManagement = function CardsManagement(_ref) {
       className: classes.cardCvv
     }, "CVV \u2022\u2022\u2022")), /*#__PURE__*/React__default.createElement("div", {
       className: classes.cardFooter
-    }, /*#__PURE__*/React__default.createElement("div", null), getBrandLogo(card === null || card === void 0 ? void 0 : (_card$card4 = card.card) === null || _card$card4 === void 0 ? void 0 : _card$card4.brand)));
+    }, /*#__PURE__*/React__default.createElement("div", null), getBrandLogo(card === null || card === void 0 ? void 0 : (_card$card4 = card.card) === null || _card$card4 === void 0 ? void 0 : _card$card4.brand))));
   };
   var _url = env$3.getPaymentUrl() + ("/api/v1/auth/" + IUILocalStorageService$3.getAccessToken() + "/1/" + pg.entity_id + "/0/" + pg.vendor_id + "/1");
   var showMenuButton = 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);
@@ -2972,7 +2986,7 @@ var CardsManagement = function CardsManagement(_ref) {
       vertical: 'top',
       horizontal: 'right'
     }
-  }, selectedCard && selectedCard.metadata.is_enabled !== '2' && !+selectedCard.metadata.default_card && /*#__PURE__*/React__default.createElement(core.MenuItem, {
+  }, selectedCard && selectedCard.metadata.is_enabled !== CARDS_DISABLED.DISABLED && selectedCard.metadata.is_enabled !== CARDS_DISABLED.EXPIRED && selectedCard.metadata.is_enabled !== CARDS_DISABLED.INVALID && !+selectedCard.metadata.default_card && /*#__PURE__*/React__default.createElement(core.MenuItem, {
     onClick: handleMarkAsDefault
   }, "Mark as default"), showMenuButton && /*#__PURE__*/React__default.createElement(core.MenuItem, {
     onClick: handleDeleteCard,