@itilite/iui-user-management 1.4.722 → 1.4.761

package/dist/index.js

@@ -5,8 +5,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var utils = require('@itilite/utils');
 var axios = _interopDefault(require('axios'));
-var AddIcon$1 = _interopDefault(require('@material-ui/icons/Add'));
-var DeleteIcon$1 = _interopDefault(require('@material-ui/icons/Delete'));
+var core = require('@material-ui/core');
 var reactRedux = require('react-redux');
 var redux = require('redux');
 var thunk = _interopDefault(require('redux-thunk'));
@@ -18,7 +17,6 @@ var Tooltip = _interopDefault(require('@material-ui/core/Tooltip'));
 var Switch = _interopDefault(require('@material-ui/core/Switch'));
 var MoreHorizIcon = _interopDefault(require('@material-ui/icons/MoreHoriz'));
 var Button = _interopDefault(require('@material-ui/core/Button'));
-var core = require('@material-ui/core');
 var useScrollPosition = require('@n8tb1t/use-scroll-position');
 
 function _arrayLikeToArray(r, a) {
@@ -189,17 +187,7 @@ function _finallyRethrows(body, finalizer) {
 
 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"};
 
-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,
@@ -839,7 +827,9 @@ var UserRole = function UserRole(_ref) {
   }));
 };
 
-var styles$1 = {"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","defaultLabel":"_smjc4","defaultBtn":"_1_ArA","cursonPointer":"_1L115","sectionWrapper":"_VpUCK","margin":"_1Fs_D","minGridWidth":"_1hl-Z","firstRowMargin":"_1WZZj","firstChildMargin":"_IT_O_","paddingTop":"_Mhnl7","dividerColor":"_3ltFd"};
+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 SHOW_LOADER = 'SHOW_LOADER';
 var STOP_LOADER = 'STOP_LOADER';
@@ -2247,84 +2237,193 @@ var editCustomFieldLabel = function editCustomFieldLabel(payload) {
 
 var IUILocalStorageService$4 = utils.services.IUILocalStorageService;
 var env$3 = utils.configs.env;
-var CreditCard = function CreditCard(_ref) {
-  var cardId = _ref.cardId,
-    lastDigit = _ref.lastDigit,
-    expMonth = _ref.expMonth,
-    expYear = _ref.expYear,
-    cardBrand = _ref.cardBrand,
-    _ref$isDefaultCard = _ref.isDefaultCard,
-    isDefaultCard = _ref$isDefaultCard === void 0 ? false : _ref$isDefaultCard,
-    pg = _ref.pg;
+var CardsManagement = function CardsManagement(_ref) {
+  var _pg$gateway;
+  var _ref$paymentDetails = _ref.paymentDetails,
+    paymentDetails = _ref$paymentDetails === void 0 ? {} : _ref$paymentDetails;
   var dispatch = reactRedux.useDispatch();
-  var handleCardDelete = function handleCardDelete() {
-    dispatch(deletePaymentCard({
-      pmId: cardId,
-      vendorId: pg.vendor_id
-    }));
-  };
-  var setDefaultCard = function setDefaultCard() {
+  var pg = paymentDetails.pg,
+    _paymentDetails$cards = paymentDetails.cards,
+    cards = _paymentDetails$cards === void 0 ? null : _paymentDetails$cards;
+  var _useState = React.useState(null),
+    anchorEl = _useState[0],
+    setAnchorEl = _useState[1];
+  var _useState2 = React.useState(null),
+    selectedCard = _useState2[0],
+    setSelectedCard = _useState2[1];
+  var handleMenuClick = function handleMenuClick(event, card) {
+    setAnchorEl(event.currentTarget);
+    setSelectedCard(card);
+  };
+  var handleMenuClose = function handleMenuClose() {
+    setAnchorEl(null);
+    setSelectedCard(null);
+  };
+  var handleMarkAsDefault = function handleMarkAsDefault() {
+    console.log('Mark as default:', selectedCard);
+    if (!pg || !selectedCard) return;
     dispatch(setDefaultPaymentCard({
       user_id: +pg.user_id,
-      method_id: cardId,
+      method_id: selectedCard.id,
       vendor_id: +pg.vendor_id,
       app_type: 1
     }));
+    handleMenuClose();
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.card
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.cardLabel
-  }, isDefaultCard ? /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.defaultLabel
-  }, "Default Card") : /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    onClick: setDefaultCard,
-    className: styles$1.defaultBtn
-  }, "Make This Default")), !isDefaultCard && /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.cardDeleteBtn
-  }, /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    onClick: handleCardDelete
-  }, /*#__PURE__*/React__default.createElement(DeleteIcon$1, {
-    width: "10",
-    height: "10"
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.cardNumber
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.cardDigit
-  }, "XXXX"), /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.cardDigit
-  }, "XXXX"), /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.cardDigit
-  }, "XXXX"), /*#__PURE__*/React__default.createElement("span", {
-    className: styles$1.cardDigit
-  }, lastDigit)), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.expiryDate
-  }, expMonth, " / ", expYear), /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(styles$1.cardImage, styles$1[cardBrand])
-  }));
-};
-var AddCard = function AddCard(_ref2) {
-  var pg = _ref2.pg;
-  var _url = env$3.getPaymentUrl() + ("/api/v1/auth/" + IUILocalStorageService$4.getAccessToken() + "/1/" + pg.entity_id + "/0/" + pg.vendor_id + "/1");
-  var handleAddCard = function handleAddCard() {
-    window.location.assign(_url);
+  var handleDeleteCard = function handleDeleteCard() {
+    dispatch(deletePaymentCard({
+      pmId: selectedCard.id,
+      vendorId: pg.vendor_id
+    }));
+    handleMenuClose();
+  };
+  var getBrandLogo = function getBrandLogo(brand) {
+    var logos = {
+      visa: 'https://upload.wikimedia.org/wikipedia/commons/0/04/Visa.svg',
+      mastercard: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg',
+      amex: 'https://upload.wikimedia.org/wikipedia/commons/3/30/American_Express_logo.svg'
+    };
+    return logos[brand.toLowerCase()] || '';
+  };
+  var getCardTypeClass = function getCardTypeClass(category) {
+    return category === 'Corporate' ? 'corporate' : category === 'Company' ? 'company' : 'personal';
   };
+  var getCardTypeLabel = function getCardTypeLabel(category) {
+    return category === 'Corporate' ? 'CORPORATE' : category === 'Company' ? 'COMPANY' : 'PERSONAL';
+  };
+  var MoreIcon = function MoreIcon(_ref2) {
+    var _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? '#3D89FF' : _ref2$color,
+      className = _ref2.className;
+    return /*#__PURE__*/React__default.createElement("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: className
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M0.8125 8.00439C0.8125 8.4188 0.97712 8.81622 1.27015 9.10925C1.56317 9.40227 1.9606 9.56689 2.375 9.56689C2.7894 9.56689 3.18683 9.40227 3.47985 9.10925C3.77288 8.81622 3.9375 8.4188 3.9375 8.00439C3.9375 7.58999 3.77288 7.19257 3.47985 6.89954C3.18683 6.60651 2.7894 6.44189 2.375 6.44189C1.9606 6.44189 1.56317 6.60651 1.27015 6.89954C0.97712 7.19257 0.8125 7.58999 0.8125 8.00439Z",
+      stroke: color,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M6.4375 8.00439C6.4375 8.20958 6.47792 8.41277 6.55644 8.60234C6.63496 8.79191 6.75005 8.96416 6.89515 9.10925C7.04024 9.25434 7.21249 9.36943 7.40206 9.44796C7.59163 9.52648 7.79481 9.56689 8 9.56689C8.20519 9.56689 8.40837 9.52648 8.59794 9.44796C8.78751 9.36943 8.95976 9.25434 9.10485 9.10925C9.24995 8.96416 9.36504 8.79191 9.44356 8.60234C9.52208 8.41277 9.5625 8.20958 9.5625 8.00439C9.5625 7.7992 9.52208 7.59602 9.44356 7.40645C9.36504 7.21688 9.24995 7.04463 9.10485 6.89954C8.95976 6.75445 8.78751 6.63936 8.59794 6.56083C8.40837 6.48231 8.20519 6.44189 8 6.44189C7.79481 6.44189 7.59163 6.48231 7.40206 6.56083C7.21249 6.63936 7.04024 6.75445 6.89515 6.89954C6.75005 7.04463 6.63496 7.21688 6.55644 7.40645C6.47792 7.59602 6.4375 7.7992 6.4375 8.00439Z",
+      stroke: color,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/React__default.createElement("path", {
+      d: "M12.0625 8.00439C12.0625 8.4188 12.2271 8.81622 12.5201 9.10925C12.8132 9.40227 13.2106 9.56689 13.625 9.56689C14.0394 9.56689 14.4368 9.40227 14.7299 9.10925C15.0229 8.81622 15.1875 8.4188 15.1875 8.00439C15.1875 7.58999 15.0229 7.19257 14.7299 6.89954C14.4368 6.60651 14.0394 6.44189 13.625 6.44189C13.2106 6.44189 12.8132 6.60651 12.5201 6.89954C12.2271 7.19257 12.0625 7.58999 12.0625 8.00439Z",
+      stroke: color,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }));
+  };
+  var LockIcon = function LockIcon(_ref3) {
+    return /*#__PURE__*/React__default.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }, /*#__PURE__*/React__default.createElement("path", {
+      d: "M7.83562 1.50971L8 1.50439C9.32548 1.50439 10.41 2.53593 10.4947 3.84002L10.5 4.00439V5.00439H11.5C12.3284 5.00439 13 5.67597 13 6.50439V12.5044C13 13.3328 12.3284 14.0044 11.5 14.0044H4.5C3.67157 14.0044 3 13.3328 3 12.5044V6.50439C3 5.67597 3.67157 5.00439 4.5 5.00439H5.5V4.00439C5.5 2.67891 6.53154 1.59436 7.83562 1.50971ZM11.5 6.00439H4.5C4.22386 6.00439 4 6.22825 4 6.50439V12.5044C4 12.7805 4.22386 13.0044 4.5 13.0044H11.5C11.7761 13.0044 12 12.7805 12 12.5044V6.50439C12 6.22825 11.7761 6.00439 11.5 6.00439ZM8 8.50439C8.55228 8.50439 9 8.95211 9 9.50439C9 10.0567 8.55228 10.5044 8 10.5044C7.44772 10.5044 7 10.0567 7 9.50439C7 8.95211 7.44772 8.50439 8 8.50439ZM8.14446 2.51126L8 2.50439C7.2203 2.50439 6.57955 3.09928 6.50687 3.85993L6.5 4.00439V5.00439H9.5V4.00439C9.5 3.2247 8.90511 2.58395 8.14446 2.51126Z",
+      fill: "#2EA363"
+    }));
+  };
+  var renderCard = function renderCard(card) {
+    var isCompanyCard = card.category === 'Company';
+    var cardClass = getCardTypeClass(card.category);
+    var isDefaultCard = !!+card.metadata.default_card;
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: card.id,
+      className: clsx(classes.card, classes[cardClass])
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: classes.cardHeader
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: classes.cardTitleSection
+    }, /*#__PURE__*/React__default.createElement("h3", {
+      className: classes.cardName
+    }, card.name), /*#__PURE__*/React__default.createElement("span", {
+      className: classes.cardType
+    }, getCardTypeLabel(card.category))), isCompanyCard ? /*#__PURE__*/React__default.createElement(LockIcon, {
+      className: classes.lockIcon
+    }) : /*#__PURE__*/React__default.createElement(core.IconButton, {
+      size: "small",
+      onClick: function onClick(e) {
+        return handleMenuClick(e, card);
+      },
+      className: classes.menuButton
+    }, /*#__PURE__*/React__default.createElement(MoreIcon, {
+      className: clsx(classes.moreIcon, classes[cardClass]),
+      color: isCompanyCard ? '#10B981' : '#3D89FF'
+    }))), /*#__PURE__*/React__default.createElement("div", {
+      className: classes.cardDetails
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: classes.cardNumber
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: classes.cardMaskedNumber
+    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022"), ' ', card.card.last4), /*#__PURE__*/React__default.createElement("div", {
+      className: classes.cardExpiry
+    }, "Expiry date ", card.card.exp_month, "/", String(card.card.exp_year).slice(-2)), /*#__PURE__*/React__default.createElement("div", {
+      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", {
+      src: getBrandLogo(card.card.brand),
+      alt: card.card.brand,
+      className: classes.brandLogo
+    })));
+  };
+  var personalCards = cards.filter(function (card) {
+    return card.category === 'Personal';
+  });
+  var corporateCards = cards.filter(function (card) {
+    return card.category === 'Corporate';
+  });
+  var companyCards = cards.filter(function (card) {
+    return card.category === 'Company';
+  });
+  var _url = env$3.getPaymentUrl() + ("/api/v1/auth/" + IUILocalStorageService$4.getAccessToken() + "/1/" + pg.entity_id + "/0/" + pg.vendor_id + "/1");
   return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(styles$1.card, styles$1.cursonPointer),
-    onClick: handleAddCard
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$1.addCard
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AddIcon$1, null)), /*#__PURE__*/React__default.createElement("div", null, "Add New Card")));
-};
-var PaymentCards = function PaymentCards(_ref3) {
-  var _paymentDetails$pg, _paymentDetails$pg2;
-  var paymentDetails = _ref3.paymentDetails;
-  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);
-  }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    style: {
+      marginBottom: -20
+    }
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    container: true,
+    className: clsx(styles$1.sectionWrapper)
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "My cards",
+    headerType: true,
+    description: "These are personal & company issued cards owned by you."
+  })), /*#__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$1.formFieldsWrapper
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__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", {
+    className: classes.addCardButton,
+    onClick: function onClick() {
+      return window.location.assign(_url);
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: classes.plusIcon
+  }, "+"), " 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,
@@ -2334,9 +2433,9 @@ var PaymentCards = function PaymentCards(_ref3) {
     sm: 12,
     md: 4
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Card Details",
-    headerType: true,
-    description: ""
+    label: "Company cards",
+    description: "These are the centralized cards owned by your company.",
+    headerType: true
   })), /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     item: true,
     sm: 12,
@@ -2346,20 +2445,43 @@ var PaymentCards = function PaymentCards(_ref3) {
   }, /*#__PURE__*/React__default.createElement(iuistyles.IUIGrid, {
     container: true,
     className: styles$1.formFieldsWrapper
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, paymentDetails.cards && paymentDetails.cards.map(function (card) {
-    return /*#__PURE__*/React__default.createElement(CreditCard, {
-      key: card.id,
-      cardId: card.id,
-      lastDigit: card.card.last4,
-      expMonth: card.card.exp_month,
-      expYear: card.card.exp_year,
-      cardBrand: card.card.brand,
-      isDefaultCard: !!+card.metadata.default_card,
-      pg: paymentDetails.pg
-    });
-  }), (!paymentDetails.cards || paymentDetails.cards.length < 10) && paymentDetails.pg.gateway.toLowerCase() === 'stripe' && paymentDetails.pg.save_card_enable === 1 && /*#__PURE__*/React__default.createElement(AddCard, {
-    pg: paymentDetails.pg
-  }))))));
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: classes.cardsGrid
+  }, companyCards.map(function (card) {
+    return renderCard(card);
+  }))))))), /*#__PURE__*/React__default.createElement(core.Menu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleMenuClose,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    }
+  }, /*#__PURE__*/React__default.createElement(core.MenuItem, {
+    onClick: handleMarkAsDefault
+  }, "Mark as default"), /*#__PURE__*/React__default.createElement(core.MenuItem, {
+    onClick: handleDeleteCard,
+    style: {
+      color: '#ff4444'
+    }
+  }, "Delete card")));
+};
+
+var PaymentCards = function PaymentCards(_ref) {
+  var _paymentDetails$pg, _paymentDetails$pg2;
+  var paymentDetails = _ref.paymentDetails;
+  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);
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
+    className: styles$1.dividerColor
+  }), /*#__PURE__*/React__default.createElement(CardsManagement, {
+    paymentDetails: paymentDetails
+  }));
 };
 
 function AddIcon(props) {
@@ -2728,7 +2850,7 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
       isError: !!errMsg[i],
       placeholder: "Example label - \u201CManager\u201D"
     }));
-  })))), type === 'travel' && isProfile && paymentDetails && /*#__PURE__*/React__default.createElement(PaymentCards, {
+  })))), type === 'travel' && paymentDetails && /*#__PURE__*/React__default.createElement(PaymentCards, {
     paymentDetails: paymentDetails
   }));
 };
@@ -5276,21 +5398,22 @@ var Membership = function Membership(_ref) {
   };
   var handleSubmit = function handleSubmit() {
     try {
+      var _ref2, _ref3;
       if (isAAAloyaltySelected && !sixteenDigitNumber$1.test(membershipNumber)) {
         IUIToastMessageService$5.warningNotify('Enter 16-digit AAA membership ID');
         return Promise.resolve();
       }
       var url = "/api/v1/user-management/users/" + userID + "/membership";
       var payload = isEditing ? _extends({}, selectedMembershipChain, {
-        number: membershipNumber,
-        name: membershipName || ''
+        number: membershipNumber === null || membershipNumber === void 0 ? void 0 : membershipNumber.trim(),
+        name: (_ref2 = membershipName || '') === null || _ref2 === void 0 ? void 0 : _ref2.trim()
       }) : {
         membership_type: type,
-        number: membershipNumber,
+        number: membershipNumber === null || membershipNumber === void 0 ? void 0 : membershipNumber.trim(),
         iata_code: null,
         user: userID,
         loyalty_program_id: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_id,
-        name: membershipName || ''
+        name: (_ref3 = membershipName || '') === null || _ref3 === void 0 ? void 0 : _ref3.trim()
       };
       setIsUpdating(true);
       var _temp4 = _finallyRethrows(function () {
@@ -7490,32 +7613,6 @@ var UserAddEdit = function UserAddEdit(props) {
             }()
           });
         });
-        if (res.client_admin) {
-          setTravelApproversInput(function (prevState) {
-            var nextState = _extends({}, prevState);
-            for (var key in nextState) {
-              if (Object.hasOwnProperty.call(nextState, key)) {
-                nextState[key] = {
-                  value: res.client_admin,
-                  label: res.client_admin
-                };
-              }
-            }
-            return nextState;
-          });
-          setExpenseApproversInput(function (prevState) {
-            var nextState = _extends({}, prevState);
-            for (var key in nextState) {
-              if (Object.hasOwnProperty.call(nextState, key)) {
-                nextState[key] = {
-                  value: res.client_admin,
-                  label: res.client_admin
-                };
-              }
-            }
-            return nextState;
-          });
-        }
       })["catch"](function (err) {
         console.log(err);
       })["finally"](function () {
@@ -7787,8 +7884,6 @@ var UserAddEdit = function UserAddEdit(props) {
     isProfile: isProfile,
     editUserId: editUserId,
     roles: renderFields.travelRoles
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUIDivider, {
-    className: styles.dividerColor
   }), /*#__PURE__*/React__default.createElement(AdditionalInfo, {
     membershipInfoInput: membershipInfoInput,
     onMemInfoInputChange: onMemInfoInputChange,
@@ -9380,7 +9475,7 @@ var BulkDownloadIcon = function BulkDownloadIcon(props) {
   }));
 };
 
-var classes = {"containedBtn":"_2A4_u","customMiniBox":"_QGIKG","muiBtn":"_3iFbO","outlinedBtn":"_3lQYD","menuList":"_1C8bJ","menuListContainer":"_1N83W","menuItemContainer":"_3VtcE","menuItemtext":"_2xqnU","subTxt":"_3CVzX"};
+var classes$1 = {"containedBtn":"_2A4_u","customMiniBox":"_QGIKG","muiBtn":"_3iFbO","outlinedBtn":"_3lQYD","menuList":"_1C8bJ","menuListContainer":"_1N83W","menuItemContainer":"_3VtcE","menuItemtext":"_2xqnU","subTxt":"_3CVzX"};
 
 var DropdownBtn = function DropdownBtn(props) {
   var _clsx;
@@ -9439,7 +9534,7 @@ var DropdownBtn = function DropdownBtn(props) {
   }, [open]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
     endIcon: endIcon,
-    className: clsx(classes.muiBtn, className, (_clsx = {}, _clsx[classes.outlinedBtn] = outlinedBtn, _clsx)),
+    className: clsx(classes$1.muiBtn, className, (_clsx = {}, _clsx[classes$1.outlinedBtn] = outlinedBtn, _clsx)),
     disableRipple: disableRipple,
     variant: "outlined",
     ref: anchorRef,
@@ -9465,13 +9560,13 @@ var DropdownBtn = function DropdownBtn(props) {
         transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
       }
     }), /*#__PURE__*/React__default.createElement(core.Paper, {
-      className: classes.menuListContainer,
+      className: classes$1.menuListContainer,
       elevation: 0
     }, /*#__PURE__*/React__default.createElement(core.ClickAwayListener, {
       onClickAway: handleClose
     }, /*#__PURE__*/React__default.createElement(core.MenuList, {
       autoFocusItem: open,
-      className: clsx(classes.menuList, (_clsx2 = {}, _clsx2[classes.outlinedBtn] = outlinedBtn, _clsx2), menuListClass),
+      className: clsx(classes$1.menuList, (_clsx2 = {}, _clsx2[classes$1.outlinedBtn] = outlinedBtn, _clsx2), menuListClass),
       id: "menu-list-grow",
       onKeyDown: function onKeyDown(e) {
         return handleListKeyDown(e);
@@ -9482,13 +9577,13 @@ var DropdownBtn = function DropdownBtn(props) {
           return handleMenuClick(val);
         },
         key: _i,
-        className: clsx(classes.menuItemContainer, val.disable && 'iui__cursor-not-allowed'),
+        className: clsx(classes$1.menuItemContainer, val.disable && 'iui__cursor-not-allowed'),
         disableRipple: true
       }, /*#__PURE__*/React__default.createElement(core.Typography, {
-        className: clsx(classes.menuItemtext, val && val.disable && 'iui__opacity--60')
+        className: clsx(classes$1.menuItemtext, val && val.disable && 'iui__opacity--60')
       }, val.label), val.subText && /*#__PURE__*/React__default.createElement(iuistyles.IUITypography, {
         variant: "subtitle2",
-        className: clsx(classes.menuItemtext, classes.subTxt)
+        className: clsx(classes$1.menuItemtext, classes$1.subTxt)
       }, val.subText));
     })))));
   }));