@itilite/iui-user-management 1.4.4999 → 1.4.7681

package/dist/index.modern.js

@@ -1,9 +1,8 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUISearch, IUICircularProgress, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUICard, IUIBackdrop, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIIconButton, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
-import React, { useState, useEffect, memo, useRef, Fragment as Fragment$1 } from 'react';
+import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIGrid, IUIDivider, IUITypography, IUIRadio, IUIButton, IUIModal, IUISearch, IUICircularProgress, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUICard, IUIBackdrop, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIIconButton, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
+import React, { useState, Fragment as Fragment$1, useEffect, memo, useRef } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import axios from 'axios';
-import AddIcon$1 from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete';
+import { IconButton, Menu, MenuItem, Popper, Grow, Paper, ClickAwayListener, MenuList, Typography, Box } from '@material-ui/core';
 import { useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
@@ -15,7 +14,6 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Switch from '@material-ui/core/Switch';
 import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import Button from '@material-ui/core/Button';
-import { Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, Typography, Box } from '@material-ui/core';
 import { useScrollPosition } from '@n8tb1t/use-scroll-position';
 
 function _arrayLikeToArray(r, a) {
@@ -186,17 +184,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.forwardRef(function (props, ref) {
   var _p = props._p,
@@ -836,7 +824,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","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';
@@ -937,10 +927,17 @@ var formatCreateUserPayload = function formatCreateUserPayload(payload) {
       res.membership_info = payload.membershipInfoInput.filter(function (membership) {
         return !membership.isDeleted;
       }).map(function (membership) {
+        var _ref = membership || {},
+          _ref$iata_code = _ref.iata_code,
+          iata_code = _ref$iata_code === void 0 ? null : _ref$iata_code,
+          _ref$loyalty_program_ = _ref.loyalty_program_id,
+          loyalty_program_id = _ref$loyalty_program_ === void 0 ? null : _ref$loyalty_program_;
         var res = {
           membership_type: membership.membership_type,
           name: membership.name,
-          number: membership.number
+          number: membership.number,
+          iata_code: iata_code,
+          loyalty_program_id: loyalty_program_id
         };
         return res;
       });
@@ -1118,11 +1115,18 @@ var formatUpdateUserPayload = function formatUpdateUserPayload(payload, inputCha
       res.fields.membership_info = payload.membershipInfoInput.filter(function (membership) {
         return !!membership.isEditMode;
       }).map(function (membership) {
+        var _ref2 = membership || {},
+          _ref2$iata_code = _ref2.iata_code,
+          iata_code = _ref2$iata_code === void 0 ? null : _ref2$iata_code,
+          _ref2$loyalty_program = _ref2.loyalty_program_id,
+          loyalty_program_id = _ref2$loyalty_program === void 0 ? null : _ref2$loyalty_program;
         var res = {
           membership_type: membership.membership_type,
           name: membership.name,
           number: membership.number,
-          id: membership.id
+          id: membership.id,
+          iata_code: iata_code,
+          loyalty_program_id: loyalty_program_id
         };
         return res;
       }).concat(payload.membershipInfoInput.filter(function (membership) {
@@ -2230,84 +2234,195 @@ var editCustomFieldLabel = function editCustomFieldLabel(payload) {
 
 var IUILocalStorageService$4 = services.IUILocalStorageService;
 var env$3 = 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,
+    _ref$paymentMethod = _ref.paymentMethod,
+    paymentMethod = _ref$paymentMethod === void 0 ? null : _ref$paymentMethod;
   var dispatch = 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 = useState(null),
+    anchorEl = _useState[0],
+    setAnchorEl = _useState[1];
+  var _useState2 = 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.createElement("div", {
-    className: styles$1.card
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.cardLabel
-  }, isDefaultCard ? /*#__PURE__*/React.createElement("span", {
-    className: styles$1.defaultLabel
-  }, "Default Card") : /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: setDefaultCard,
-    className: styles$1.defaultBtn
-  }, "Make This Default")), !isDefaultCard && /*#__PURE__*/React.createElement("div", {
-    className: styles$1.cardDeleteBtn
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: handleCardDelete
-  }, /*#__PURE__*/React.createElement(DeleteIcon, {
-    width: "10",
-    height: "10"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$1.cardNumber
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles$1.cardDigit
-  }, "XXXX"), /*#__PURE__*/React.createElement("span", {
-    className: styles$1.cardDigit
-  }, "XXXX"), /*#__PURE__*/React.createElement("span", {
-    className: styles$1.cardDigit
-  }, "XXXX"), /*#__PURE__*/React.createElement("span", {
-    className: styles$1.cardDigit
-  }, lastDigit)), /*#__PURE__*/React.createElement("div", {
-    className: styles$1.expiryDate
-  }, expMonth, " / ", expYear), /*#__PURE__*/React.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.createElement("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: className
+    }, /*#__PURE__*/React.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.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.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.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none"
+    }, /*#__PURE__*/React.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.createElement("div", {
+      key: card.id,
+      className: clsx(classes.card, classes[cardClass])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.cardHeader
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.cardTitleSection
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: classes.cardName
+    }, card.alias), /*#__PURE__*/React.createElement("span", {
+      className: classes.cardType
+    }, getCardTypeLabel(card.category), isDefaultCard && /*#__PURE__*/React.createElement("span", null, ' (Default)'))), isCompanyCard ? /*#__PURE__*/React.createElement(LockIcon, {
+      className: classes.lockIcon
+    }) : /*#__PURE__*/React.createElement(IconButton, {
+      size: "small",
+      onClick: function onClick(e) {
+        return handleMenuClick(e, card);
+      },
+      className: classes.menuButton
+    }, /*#__PURE__*/React.createElement(MoreIcon, {
+      className: clsx(classes.moreIcon, classes[cardClass]),
+      color: isCompanyCard ? '#2EA363' : '#3D89FF'
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: classes.cardDetails
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.cardNumber
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classes.cardMaskedNumber
+    }, "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022"), ' ', card.card.last4), /*#__PURE__*/React.createElement("div", {
+      className: classes.cardExpiry
+    }, "Expiry date ", card.card.exp_month, "/", String(card.card.exp_year).slice(-2)), /*#__PURE__*/React.createElement("div", {
+      className: classes.cardCvv
+    }, "CVV \u2022\u2022\u2022")), /*#__PURE__*/React.createElement("div", {
+      className: classes.cardFooter
+    }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.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.createElement("div", {
-    className: clsx(styles$1.card, styles$1.cursonPointer),
-    onClick: handleAddCard
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1.addCard
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AddIcon$1, null)), /*#__PURE__*/React.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.createElement(React.Fragment, null);
-  }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIDivider, {
+    style: {
+      marginBottom: -20
+    }
+  }, /*#__PURE__*/React.createElement(IUIGrid, {
+    container: true,
+    className: clsx(styles$1.sectionWrapper)
+  }, /*#__PURE__*/React.createElement(IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 4
+  }, /*#__PURE__*/React.createElement(IUILabel, {
+    label: "My cards",
+    headerType: true,
+    description: "These are personal & company issued cards owned by you."
+  })), /*#__PURE__*/React.createElement(IUIGrid, {
+    item: true,
+    sm: 12,
+    md: 8,
+    lg: 8,
+    xl: 6
+  }, /*#__PURE__*/React.createElement(IUIGrid, {
+    container: true,
+    className: styles$1.formFieldsWrapper
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, paymentMethod === 2 && /*#__PURE__*/React.createElement("div", {
+    style: classes.disabledNotice
+  }, "Company has disabled usage of your personal cards, please reach out to your admin"), /*#__PURE__*/React.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 && paymentMethod !== 2 && /*#__PURE__*/React.createElement("button", {
+    className: classes.addCardButton,
+    onClick: function onClick() {
+      return window.location.assign(_url);
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.plusIcon
+  }, "+"), " Add card")))))), (companyCards === null || companyCards === void 0 ? void 0 : companyCards.length) !== 0 && /*#__PURE__*/React.createElement(Fragment$1, null, /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles$1.dividerColor
   }), /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
@@ -2317,9 +2432,9 @@ var PaymentCards = function PaymentCards(_ref3) {
     sm: 12,
     md: 4
   }, /*#__PURE__*/React.createElement(IUILabel, {
-    label: "Card Details",
-    headerType: true,
-    description: ""
+    label: "Company cards",
+    description: "These are the centralized cards owned by your company.",
+    headerType: true
   })), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     sm: 12,
@@ -2329,20 +2444,43 @@ var PaymentCards = function PaymentCards(_ref3) {
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: styles$1.formFieldsWrapper
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, paymentDetails.cards && paymentDetails.cards.map(function (card) {
-    return /*#__PURE__*/React.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.createElement(AddCard, {
-    pg: paymentDetails.pg
-  }))))));
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classes.cardsGrid
+  }, companyCards.map(function (card) {
+    return renderCard(card);
+  }))))))), /*#__PURE__*/React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: Boolean(anchorEl),
+    onClose: handleMenuClose,
+    anchorOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: 'right'
+    }
+  }, selectedCard && !+selectedCard.metadata.default_card && /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: handleMarkAsDefault
+  }, "Mark as default"), /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IUIDivider, {
+    className: styles$1.dividerColor
+  }), /*#__PURE__*/React.createElement(CardsManagement, {
+    paymentDetails: paymentDetails
+  }));
 };
 
 function AddIcon(props) {
@@ -2415,7 +2553,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 = useState({
       product: '',
       approvers: []
@@ -2711,8 +2851,9 @@ var TravelExpenseFields = function TravelExpenseFields(props) {
       isError: !!errMsg[i],
       placeholder: "Example label - \u201CManager\u201D"
     }));
-  })))), type === 'travel' && isProfile && paymentDetails && /*#__PURE__*/React.createElement(PaymentCards, {
-    paymentDetails: paymentDetails
+  })))), type === 'travel' && paymentDetails && /*#__PURE__*/React.createElement(PaymentCards, {
+    paymentDetails: paymentDetails,
+    paymentMethod: paymentMethod
   }));
 };
 
@@ -3467,6 +3608,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 = [{
@@ -3874,6 +4026,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 {
@@ -3890,6 +4043,7 @@ var reducer = function reducer(state, action) {
             };
           });
         }
+        console.log(cardsDetails, 'cardsDetails2');
         return _extends({}, state, {
           cardsDetails: cardsDetails,
           isCardsDetailsRendered: true,
@@ -4504,6 +4658,7 @@ var ChevronNext = function ChevronNext(_ref) {
   }));
 };
 
+var sixteenDigitNumber = /^\d{16}$/;
 var MembershipForm = function MembershipForm(_ref) {
   var selectedMembershipChain = _ref.selectedMembershipChain,
     isOtherMembership = _ref.isOtherMembership,
@@ -4512,7 +4667,9 @@ var MembershipForm = function MembershipForm(_ref) {
     setMembershipName = _ref.setMembershipName,
     setMembershipNumber = _ref.setMembershipNumber,
     type = _ref.type,
-    isEdit = _ref.isEdit;
+    isEdit = _ref.isEdit,
+    _ref$isAAAloyaltySele = _ref.isAAAloyaltySelected,
+    isAAAloyaltySelected = _ref$isAAAloyaltySele === void 0 ? false : _ref$isAAAloyaltySele;
   var FallbackIcon = function FallbackIcon() {
     var url = '';
     if (type === 'flight') {
@@ -4555,7 +4712,7 @@ var MembershipForm = function MembershipForm(_ref) {
     },
     iconComponent: null,
     style: {
-      width: '50%',
+      width: '100%',
       paddingLeft: 0,
       borderRadius: 6
     }
@@ -4577,7 +4734,7 @@ var MembershipForm = function MembershipForm(_ref) {
     label: "Membership number",
     required: true
   }), /*#__PURE__*/React.createElement(IUISearch, {
-    placeholder: "e.g. ABCD1234",
+    placeholder: isAAAloyaltySelected ? 'Enter 16-digit AAA membership ID' : 'e.g. ABCD1234',
     value: membershipNumber,
     onChangeHandler: function onChangeHandler(e) {
       var inputValue = e.target.value;
@@ -4587,11 +4744,16 @@ var MembershipForm = function MembershipForm(_ref) {
     },
     iconComponent: null,
     style: {
-      width: '50%',
+      width: '100%',
       paddingLeft: 0,
       borderRadius: 6
     }
-  }));
+  }), isAAAloyaltySelected && membershipNumber && !sixteenDigitNumber.test(membershipNumber) && /*#__PURE__*/React.createElement("div", {
+    style: {
+      color: '#cf2231',
+      marginTop: 5
+    }
+  }, "Enter a valid 16-digit AAA membership ID"));
 };
 
 var TravelModeIcon = function TravelModeIcon(_ref) {
@@ -4757,6 +4919,43 @@ var LoyaltyPrograms = function LoyaltyPrograms(_ref) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Loader, null))));
 };
 
+var EditIcon = function EditIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_13010_74651)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.7197 1.72376C11.7029 0.740515 13.2971 0.740516 14.2803 1.72377C15.2636 2.70701 15.2636 4.30118 14.2803 5.28443L5.14645 14.4183C4.77137 14.7934 4.26267 15.0041 3.73223 15.0041H2C1.44772 15.0041 1 14.5564 1 14.0041V12.2719C1 11.7414 1.21071 11.2327 1.58579 10.8576L10.7197 1.72376ZM13.2197 2.78443C12.8222 2.38696 12.1778 2.38696 11.7803 2.78443L11.0607 3.5041L12.5 4.94344L13.2197 4.22376C13.6171 3.8263 13.6171 3.18189 13.2197 2.78443ZM11.4393 6.0041L10 4.56476L2.64645 11.9183C2.55268 12.0121 2.5 12.1393 2.5 12.2719V13.5041H3.73223C3.86484 13.5041 3.99202 13.4514 4.08579 13.3576L11.4393 6.0041Z",
+    fill: "#EC5D25"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_13010_74651"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white",
+    transform: "translate(0 0.00390625)"
+  }))));
+};
+
+var DeleteIcon = function DeleteIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.33333 2.33716C7.14924 2.33716 7 2.4864 7 2.67049V3.33716H9V2.67049C9 2.4864 8.85076 2.33716 8.66667 2.33716H7.33333ZM10 3.33716V2.67049C10 1.93411 9.40305 1.33716 8.66667 1.33716H7.33333C6.59695 1.33716 6 1.93411 6 2.67049V3.33716H2.5C2.22386 3.33716 2 3.56102 2 3.83716C2 4.1133 2.22386 4.33716 2.5 4.33716H3.03122L3.57716 12.7993C3.64506 13.8516 4.51843 14.6705 5.57301 14.6705H10.427C11.4816 14.6705 12.3549 13.8516 12.4228 12.7993L12.9688 4.33716H13.5C13.7761 4.33716 14 4.1133 14 3.83716C14 3.56102 13.7761 3.33716 13.5 3.33716H10ZM11.9667 4.33716H4.0333L4.57509 12.7349C4.60903 13.2611 5.04572 13.6705 5.57301 13.6705H10.427C10.9543 13.6705 11.391 13.2611 11.4249 12.7349L11.9667 4.33716ZM6.5 6.00383C6.77614 6.00383 7 6.22768 7 6.50383V11.5038C7 11.78 6.77614 12.0038 6.5 12.0038C6.22386 12.0038 6 11.78 6 11.5038V6.50383C6 6.22768 6.22386 6.00383 6.5 6.00383ZM9.5 6.00383C9.77614 6.00383 10 6.22768 10 6.50383V11.5038C10 11.78 9.77614 12.0038 9.5 12.0038C9.22386 12.0038 9 11.78 9 11.5038V6.50383C9 6.22768 9.22386 6.00383 9.5 6.00383Z",
+    fill: "#CF2231"
+  }));
+};
+
 var _excluded = ["ind"];
 var IUIToastMessageService$4 = services.IUIToastMessageService;
 var api$6 = configs.api;
@@ -4767,7 +4966,9 @@ var SavedMemberships = function SavedMemberships(_ref) {
     _ref$updateList = _ref.updateList,
     updateList = _ref$updateList === void 0 ? function () {} : _ref$updateList,
     _ref$handleEdit = _ref.handleEdit,
-    handleEdit = _ref$handleEdit === void 0 ? function () {} : _ref$handleEdit;
+    handleEdit = _ref$handleEdit === void 0 ? function () {} : _ref$handleEdit,
+    _ref$isProfile = _ref.isProfile,
+    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
   var _useState = useState(false),
     open = _useState[0],
     setOpen = _useState[1];
@@ -4780,42 +4981,10 @@ var SavedMemberships = function SavedMemberships(_ref) {
   var _useSelector = useSelector(function (state) {
       return state.common;
     }),
-    userID = _useSelector.id;
-  var DeleteIcon = function DeleteIcon() {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.33333 2.33716C7.14924 2.33716 7 2.4864 7 2.67049V3.33716H9V2.67049C9 2.4864 8.85076 2.33716 8.66667 2.33716H7.33333ZM10 3.33716V2.67049C10 1.93411 9.40305 1.33716 8.66667 1.33716H7.33333C6.59695 1.33716 6 1.93411 6 2.67049V3.33716H2.5C2.22386 3.33716 2 3.56102 2 3.83716C2 4.1133 2.22386 4.33716 2.5 4.33716H3.03122L3.57716 12.7993C3.64506 13.8516 4.51843 14.6705 5.57301 14.6705H10.427C11.4816 14.6705 12.3549 13.8516 12.4228 12.7993L12.9688 4.33716H13.5C13.7761 4.33716 14 4.1133 14 3.83716C14 3.56102 13.7761 3.33716 13.5 3.33716H10ZM11.9667 4.33716H4.0333L4.57509 12.7349C4.60903 13.2611 5.04572 13.6705 5.57301 13.6705H10.427C10.9543 13.6705 11.391 13.2611 11.4249 12.7349L11.9667 4.33716ZM6.5 6.00383C6.77614 6.00383 7 6.22768 7 6.50383V11.5038C7 11.78 6.77614 12.0038 6.5 12.0038C6.22386 12.0038 6 11.78 6 11.5038V6.50383C6 6.22768 6.22386 6.00383 6.5 6.00383ZM9.5 6.00383C9.77614 6.00383 10 6.22768 10 6.50383V11.5038C10 11.78 9.77614 12.0038 9.5 12.0038C9.22386 12.0038 9 11.78 9 11.5038V6.50383C9 6.22768 9.22386 6.00383 9.5 6.00383Z",
-      fill: "#CF2231"
-    }));
-  };
-  var EditIcon = function EditIcon() {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("g", {
-      clipPath: "url(#clip0_13010_74651)"
-    }, /*#__PURE__*/React.createElement("path", {
-      d: "M10.7197 1.72376C11.7029 0.740515 13.2971 0.740516 14.2803 1.72377C15.2636 2.70701 15.2636 4.30118 14.2803 5.28443L5.14645 14.4183C4.77137 14.7934 4.26267 15.0041 3.73223 15.0041H2C1.44772 15.0041 1 14.5564 1 14.0041V12.2719C1 11.7414 1.21071 11.2327 1.58579 10.8576L10.7197 1.72376ZM13.2197 2.78443C12.8222 2.38696 12.1778 2.38696 11.7803 2.78443L11.0607 3.5041L12.5 4.94344L13.2197 4.22376C13.6171 3.8263 13.6171 3.18189 13.2197 2.78443ZM11.4393 6.0041L10 4.56476L2.64645 11.9183C2.55268 12.0121 2.5 12.1393 2.5 12.2719V13.5041H3.73223C3.86484 13.5041 3.99202 13.4514 4.08579 13.3576L11.4393 6.0041Z",
-      fill: "#EC5D25"
-    })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
-      id: "clip0_13010_74651"
-    }, /*#__PURE__*/React.createElement("rect", {
-      width: "16",
-      height: "16",
-      fill: "white",
-      transform: "translate(0 0.00390625)"
-    }))));
-  };
+    id = _useSelector.id;
+  var _useParams = useParams(),
+    editUserId = _useParams.userId;
+  var userID = isProfile ? id : editUserId;
   var handleClose = function handleClose() {
     setOpen(false);
     setDeleteItemData(null);
@@ -4980,7 +5149,9 @@ var AddMembershipButton = memo(function (_ref) {
     _ref$updateList = _ref.updateList,
     updateList = _ref$updateList === void 0 ? function () {} : _ref$updateList,
     _ref$handleEdit = _ref.handleEdit,
-    handleEdit = _ref$handleEdit === void 0 ? function () {} : _ref$handleEdit;
+    handleEdit = _ref$handleEdit === void 0 ? function () {} : _ref$handleEdit,
+    _ref$isProfile = _ref.isProfile,
+    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
   var handleAddMembership = function handleAddMembership(type) {
     var currentModalState = _extends({}, modalState);
     currentModalState.open = true;
@@ -5013,7 +5184,8 @@ var AddMembershipButton = memo(function (_ref) {
     list: list,
     type: type,
     updateList: updateList,
-    handleEdit: handleEdit
+    handleEdit: handleEdit,
+    isProfile: isProfile
   }), /*#__PURE__*/React.createElement(IUIButton, {
     buttonText: "Add membership",
     type: "text",
@@ -5030,6 +5202,7 @@ var AddMembershipButton = memo(function (_ref) {
 
 var IUIToastMessageService$5 = services.IUIToastMessageService;
 var api$7 = configs.api;
+var sixteenDigitNumber$1 = /^\d{16}$/;
 var Membership = function Membership(_ref) {
   var _clsx;
   var _ref$membershipInfoIn = _ref.membershipInfoInput,
@@ -5049,8 +5222,9 @@ var Membership = function Membership(_ref) {
     savedMemberships = _useState[0],
     setSavedMemberships = _useState[1];
   var groupedMembershipData = savedMemberships.reduce(function (acc, item) {
-    acc[item.membership_type] = acc[item.membership_type] || [];
-    acc[item.membership_type].push(item);
+    var _acc$item$membership_;
+    acc[item === null || item === void 0 ? void 0 : item.membership_type] = (acc === null || acc === void 0 ? void 0 : acc[item === null || item === void 0 ? void 0 : item.membership_type]) || [];
+    acc === null || acc === void 0 ? void 0 : (_acc$item$membership_ = acc[item === null || item === void 0 ? void 0 : item.membership_type]) === null || _acc$item$membership_ === void 0 ? void 0 : _acc$item$membership_.push(item);
     return acc;
   }, {
     flight: [],
@@ -5109,6 +5283,8 @@ var Membership = function Membership(_ref) {
     setMembershipNumber = _useState14[1];
   var wrapperRef = useRef(null);
   var nextRef = useRef(null);
+  var isEditing = editIndex !== null;
+  var isAAAloyaltySelected = (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name) === 'AAA' || (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_name) === 'AAA';
   var fetchItems = function fetchItems(query, reset) {
     if (query === void 0) {
       query = '';
@@ -5214,7 +5390,7 @@ var Membership = function Membership(_ref) {
       return;
     }
     if (item) {
-      if (index) {
+      if (isEditing) {
         groupedMembershipData[type][index] = _extends({}, groupedMembershipData[type][index], {
           number: item.number,
           name: item.name
@@ -5222,11 +5398,12 @@ var Membership = function Membership(_ref) {
       } else groupedMembershipData[type] = [].concat(groupedMembershipData[type], [item]);
     }
     if (index !== null && !item) {
-      if (index < 0 || index >= groupedMembershipData[type].length) {
+      var _groupedMembershipDat, _groupedMembershipDat2;
+      if (index < 0 || index >= (groupedMembershipData === null || groupedMembershipData === void 0 ? void 0 : (_groupedMembershipDat = groupedMembershipData[type]) === null || _groupedMembershipDat === void 0 ? void 0 : _groupedMembershipDat.length)) {
         console.error("Invalid index: " + index);
         return;
       }
-      groupedMembershipData[type] = [].concat(groupedMembershipData[type].slice(0, index), groupedMembershipData[type].slice(index + 1));
+      groupedMembershipData[type] = [].concat(groupedMembershipData === null || groupedMembershipData === void 0 ? void 0 : (_groupedMembershipDat2 = groupedMembershipData[type]) === null || _groupedMembershipDat2 === void 0 ? void 0 : _groupedMembershipDat2.slice(0, index), groupedMembershipData[type].slice(index + 1));
     }
     var flight = groupedMembershipData.flight,
       hotel = groupedMembershipData.hotel,
@@ -5236,34 +5413,55 @@ 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 = editIndex ? _extends({}, selectedMembershipChain, {
-        number: membershipNumber,
-        name: membershipName || ''
+      var payload = isEditing ? _extends({}, selectedMembershipChain, {
+        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 _temp2 = _finallyRethrows(function () {
+      var _temp4 = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(editIndex ? api$7.put(url, payload) : api$7.post(url, payload)).then(function (response) {
-            if ((response === null || response === void 0 ? void 0 : response.status) === 201 || (response === null || response === void 0 ? void 0 : response.status) === 200) {
-              var _response$data3;
-              var updatedResponse = response === null || response === void 0 ? void 0 : response.data;
+          function _temp3() {
+            var _response, _response2;
+            if (((_response = response) === null || _response === void 0 ? void 0 : _response.status) === 201 || ((_response2 = response) === null || _response2 === void 0 ? void 0 : _response2.status) === 200) {
+              var _response3;
+              var updatedResponse = (_response3 = response) === null || _response3 === void 0 ? void 0 : _response3.data;
               updatedResponse.program_name = selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name;
               updatedResponse.loyalty_program_image_url = selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_image_url;
               if (isOtherMembership) updatedResponse.loyalty_program_name = 'Other';
-              updateList(response === null || response === void 0 ? void 0 : (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : _response$data3.membership_type, editIndex, updatedResponse);
-              IUIToastMessageService$5.sNotify(editIndex ? "Membership updated." : "New membership added.");
+              updateList(type, editIndex, updatedResponse);
+              if (userID) IUIToastMessageService$5.sNotify(isEditing ? "Membership updated." : "New membership added.");
             } else {
               IUIToastMessageService$5.warningNotify('Failed to save membership');
             }
-          });
+          }
+          var response = {};
+          var _temp2 = function () {
+            if (userID) {
+              return Promise.resolve(isEditing ? api$7.put(url, payload) : api$7.post(url, payload)).then(function (_api$put) {
+                response = _api$put;
+              });
+            } else {
+              delete payload.user;
+              response = {
+                data: payload,
+                status: 200
+              };
+            }
+          }();
+          return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
         }, function (error) {
           console.error(error);
           IUIToastMessageService$5.warningNotify('Something went wrong!');
@@ -5273,7 +5471,7 @@ var Membership = function Membership(_ref) {
         if (_wasThrown) throw _result;
         return _result;
       });
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -5298,10 +5496,10 @@ var Membership = function Membership(_ref) {
     closeHandler: handleClose,
     modalClass: clsx(styles$3.loyaltymodal, (_clsx = {}, _clsx[styles$3.loyaltyList] = !selectedMembershipChain, _clsx)),
     cancelLabel: selectedMembershipChain ? 'Cancel' : '',
-    submitLabel: selectedMembershipChain ? isUpdating ? 'Saving...' : editIndex ? 'Save' : 'Add' : '',
+    submitLabel: selectedMembershipChain ? isUpdating ? 'Saving...' : isEditing ? 'Save' : 'Add' : '',
     submitHandler: handleSubmit,
-    isDisabledSubmitBtn: isUpdating || !membershipNumber || isOtherMembership && !membershipName,
-    width: "640px",
+    isDisabledSubmitBtn: isUpdating || !membershipNumber || isOtherMembership && !membershipName || isAAAloyaltySelected && !sixteenDigitNumber$1.test(membershipNumber),
+    width: selectedMembershipChain ? '480px' : '640px',
     headerText: selectedMembershipChain ? '' : title,
     subHanderText: selectedMembershipChain ? '' : subtitle,
     modalBodyStyle: {
@@ -5318,7 +5516,8 @@ var Membership = function Membership(_ref) {
     setMembershipName: setMembershipName,
     setMembershipNumber: setMembershipNumber,
     type: type,
-    isEdit: !!editIndex
+    isEdit: isEditing,
+    isAAAloyaltySelected: isAAAloyaltySelected
   }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
     style: {
       color: '#374151',
@@ -5379,7 +5578,8 @@ var Membership = function Membership(_ref) {
       modalState: modalState,
       list: groupedMembershipData[memType],
       updateList: updateList,
-      handleEdit: handleEdit
+      handleEdit: handleEdit,
+      isProfile: isProfile
     }), ind < 2 && /*#__PURE__*/React.createElement(IUIDivider, {
       className: styles$3.divider
     }));
@@ -5787,7 +5987,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));
@@ -6003,26 +6205,7 @@ var UserAddEdit = function UserAddEdit(props) {
     }).then(function (res) {
       var _res$roles;
       if (res !== null && res !== void 0 && (_res$roles = res.roles) !== null && _res$roles !== void 0 && _res$roles.length) {
-        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) {
+        console.log(res, 'cardsDetails222');
         dispatch(setCardsDetails(res));
       } else {
         IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
@@ -6722,10 +6905,11 @@ var UserAddEdit = function UserAddEdit(props) {
     }
   }, [isTokenVerified]);
   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, {
@@ -7428,32 +7612,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 () {
@@ -7724,9 +7882,8 @@ var UserAddEdit = function UserAddEdit(props) {
     maxApprovers: maxTravelApprovers,
     isProfile: isProfile,
     editUserId: editUserId,
-    roles: renderFields.travelRoles
-  }), /*#__PURE__*/React.createElement(IUIDivider, {
-    className: styles.dividerColor
+    roles: renderFields.travelRoles,
+    paymentMethod: paymentMethod
   }), /*#__PURE__*/React.createElement(AdditionalInfo, {
     membershipInfoInput: membershipInfoInput,
     onMemInfoInputChange: onMemInfoInputChange,
@@ -9318,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;
@@ -9377,7 +9534,7 @@ var DropdownBtn = function DropdownBtn(props) {
   }, [open]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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,
@@ -9403,13 +9560,13 @@ var DropdownBtn = function DropdownBtn(props) {
         transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
       }
     }), /*#__PURE__*/React.createElement(Paper, {
-      className: classes.menuListContainer,
+      className: classes$1.menuListContainer,
       elevation: 0
     }, /*#__PURE__*/React.createElement(ClickAwayListener, {
       onClickAway: handleClose
     }, /*#__PURE__*/React.createElement(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);
@@ -9420,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.createElement(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.createElement(IUITypography, {
         variant: "subtitle2",
-        className: clsx(classes.menuItemtext, classes.subTxt)
+        className: clsx(classes$1.menuItemtext, classes$1.subTxt)
       }, val.subText));
     })))));
   }));