@itilite/iui-user-management 1.4.48 → 1.4.61

package/dist/index.modern.js

@@ -1,15 +1,15 @@
-import { IUIAsyncSelect, IUIBox, IUILabel, IUIFileUpload, IUICheckboxButton, IUIPhone, IUISelect, IUIDatePicker, IUIInput, IUIDivider, IUIGrid, IUITypography, IUIRadio, IUIButton, IUIModal, IUISearch, IUIAccordion, IUIAccordionSummary, IUIAccordionDetails, IUICard, IUIBackdrop, IUICircularProgress, IUIBreadCrumb, IUIDropzone, IUIStepper, IUIIconButton, IUIFormControlLabel, IUICheckBox, IUIPrimaryRadio, IUITable, IUISkeleton, IUIProfileBox, IUIFormGroup, IUIDropdownButton, IUITabs } from '@itilite/iuistyles';
+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 { 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 DeleteIcon$1 from '@material-ui/icons/Delete';
 import { useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import moment from 'moment';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useParams, useHistory, useLocation } from 'react-router-dom';
 import { withStyles, makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Switch from '@material-ui/core/Switch';
@@ -2269,7 +2269,7 @@ var CreditCard = function CreditCard(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleCardDelete
-  }, /*#__PURE__*/React.createElement(DeleteIcon, {
+  }, /*#__PURE__*/React.createElement(DeleteIcon$1, {
     width: "10",
     height: "10"
   }))), /*#__PURE__*/React.createElement("div", {
@@ -4485,9 +4485,11 @@ var ExpandLessIcon = function ExpandLessIcon(props) {
   }));
 };
 
-var styles$3 = {"divider":"_3v2HU","selectSearchBox":"_1bAuu","chevronIcon":"_33J5X","selectWrapper":"_AJzhr","membershipList":"_u-SZq","memberItem":"_2d9GY","membershipDetails":"_194K1","title":"_l3kQ9","subtitle":"_33IR-","saveMembership":"_35aiF","newMembershipIcon":"_2d5UD","loading":"_1quY2","searchInput":"_1oiP4","membershipChainInfo":"_10Fx3","addNewMembership":"_3Y8Dj","savedMembership":"_2cSoW","iconWrapper":"_1Thb8","icon":"_3CdwB","number":"_1eJyq","actions":"_f_N1r"};
+var styles$3 = {"loyaltymodal":"_2LnGt","membershipDeleteModal":"_2LdH8","loyaltyList":"_r0C_N","divider":"_3v2HU","selectSearchBox":"_1bAuu","chevronIcon":"_33J5X","selectWrapper":"_AJzhr","membershipList":"_u-SZq","list":"_2GyN2","memberItem":"_2d9GY","membershipDetails":"_194K1","title":"_l3kQ9","subtitle":"_33IR-","saveMembership":"_35aiF","newMembershipIcon":"_2d5UD","loading":"_1quY2","searchInput":"_1oiP4","membershipChainInfo":"_10Fx3","addNewMembership":"_3Y8Dj","savedMembership":"_2cSoW","iconWrapper":"_1Thb8","iconPar":"_O51oP","icon":"_3CdwB","number":"_1eJyq","actions":"_f_N1r"};
 
-var ChevronNext = function ChevronNext() {
+var ChevronNext = function ChevronNext(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#9CA3AF' : _ref$color;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "8",
@@ -4495,13 +4497,103 @@ var ChevronNext = function ChevronNext() {
     fill: "none",
     viewBox: "0 0 8 16"
   }, /*#__PURE__*/React.createElement("path", {
-    stroke: "#9CA3AF",
+    stroke: color,
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M2 4l4 4-4 4"
   }));
 };
 
+var MembershipForm = function MembershipForm(_ref) {
+  var selectedMembershipChain = _ref.selectedMembershipChain,
+    isOtherMembership = _ref.isOtherMembership,
+    membershipName = _ref.membershipName,
+    membershipNumber = _ref.membershipNumber,
+    setMembershipName = _ref.setMembershipName,
+    setMembershipNumber = _ref.setMembershipNumber,
+    type = _ref.type,
+    isEdit = _ref.isEdit;
+  var FallbackIcon = function FallbackIcon() {
+    var url = '';
+    if (type === 'flight') {
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/flightmemfallback.png';
+    } else if (type === 'hotel') {
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/hotelmemfallback.png';
+    } else {
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/carmemfallback.png';
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon
+    }, /*#__PURE__*/React.createElement("img", {
+      src: url
+    }));
+  };
+  var placeholder = 'e.g. SkyMiles';
+  if (type === 'hotel') {
+    placeholder = 'e.g. Best Western';
+  }
+  if (type === 'rental_car') {
+    placeholder = 'e.g. Firefly Car Rental';
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$3.saveMembership
+  }, isOtherMembership ? /*#__PURE__*/React.createElement("div", {
+    className: styles$3.addNewMembership
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$3.membershipChainInfo
+  }, /*#__PURE__*/React.createElement(FallbackIcon, null), /*#__PURE__*/React.createElement("p", null, isEdit ? 'Edit' : 'Add new', " membership")), /*#__PURE__*/React.createElement(IUILabel, {
+    label: "Membership name",
+    required: true
+  }), /*#__PURE__*/React.createElement(IUISearch, {
+    placeholder: placeholder,
+    value: membershipName,
+    onChangeHandler: function onChangeHandler(e) {
+      var inputValue = e.target.value;
+      if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) <= 50) {
+        setMembershipName(inputValue);
+      }
+    },
+    iconComponent: null,
+    style: {
+      width: '100%',
+      paddingLeft: 0,
+      borderRadius: 6
+    }
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: styles$3.membershipChainInfo
+  }, selectedMembershipChain !== null && selectedMembershipChain !== void 0 && selectedMembershipChain.loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
+    src: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_image_url,
+    alt: selectedMembershipChain.program_name,
+    onError: function onError(e) {
+      e.target.style.display = 'none';
+      var fallbackContainer = e.target.nextElementSibling;
+      if (fallbackContainer) fallbackContainer.style.display = 'block';
+    }
+  }) : /*#__PURE__*/React.createElement(FallbackIcon, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(FallbackIcon, null)), /*#__PURE__*/React.createElement("p", null, isEdit ? 'Edit' : 'Add', ' ', (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_name) || (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name))), /*#__PURE__*/React.createElement(IUILabel, {
+    label: "Membership number",
+    required: true
+  }), /*#__PURE__*/React.createElement(IUISearch, {
+    placeholder: "e.g. ABCD1234",
+    value: membershipNumber,
+    onChangeHandler: function onChangeHandler(e) {
+      var inputValue = e.target.value;
+      if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) <= 50) {
+        setMembershipNumber(inputValue);
+      }
+    },
+    iconComponent: null,
+    style: {
+      width: '100%',
+      paddingLeft: 0,
+      borderRadius: 6
+    }
+  }));
+};
+
 var TravelModeIcon = function TravelModeIcon(_ref) {
   var type = _ref.type;
   var FlightIcon = memo(function () {
@@ -4558,71 +4650,16 @@ var TravelModeIcon = function TravelModeIcon(_ref) {
   return null;
 };
 
-var MembershipForm = function MembershipForm(_ref) {
-  var selectedMembershipChain = _ref.selectedMembershipChain,
-    isOtherMembership = _ref.isOtherMembership,
-    membershipName = _ref.membershipName,
-    membershipNumber = _ref.membershipNumber,
-    setMembershipName = _ref.setMembershipName,
-    setMembershipNumber = _ref.setMembershipNumber,
-    type = _ref.type,
-    isEdit = _ref.isEdit;
-  var FallbackIcon = function FallbackIcon() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$3.newMembershipIcon
-    }, /*#__PURE__*/React.createElement(TravelModeIcon, {
-      type: type
-    }));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$3.saveMembership
-  }, isOtherMembership ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3.addNewMembership
-  }, /*#__PURE__*/React.createElement("p", null, isEdit ? 'Edit' : 'Add new', " membership"), /*#__PURE__*/React.createElement(IUILabel, {
-    label: "Membership name",
-    required: true
-  }), /*#__PURE__*/React.createElement(IUISearch, {
-    placeholder: "",
-    value: membershipName,
-    onChangeHandler: function onChangeHandler(e) {
-      return setMembershipName(e.target.value);
-    },
-    iconComponent: null,
+var Loader = function Loader() {
+  return /*#__PURE__*/React.createElement(IUICircularProgress, {
+    color: "inherit",
+    size: 25,
     style: {
-      width: '50%',
-      paddingLeft: 0
+      color: '#EC5D25'
     }
-  })) : /*#__PURE__*/React.createElement("div", {
-    className: styles$3.membershipChainInfo
-  }, selectedMembershipChain !== null && selectedMembershipChain !== void 0 && selectedMembershipChain.loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
-    src: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_image_url,
-    alt: selectedMembershipChain.program_name,
-    onError: function onError(e) {
-      e.target.style.display = 'none';
-      var fallbackContainer = e.target.nextElementSibling;
-      if (fallbackContainer) fallbackContainer.style.display = 'block';
-    }
-  }) : /*#__PURE__*/React.createElement(FallbackIcon, null), /*#__PURE__*/React.createElement("p", null, isEdit ? 'Edit' : 'Add', ' ', (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_name) || (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name))), /*#__PURE__*/React.createElement(IUILabel, {
-    label: "Membership number",
-    required: true
-  }), /*#__PURE__*/React.createElement(IUISearch, {
-    placeholder: "",
-    value: membershipNumber,
-    onChangeHandler: function onChangeHandler(e) {
-      var value = e.target.value;
-      if (/^\d*$/.test(value)) {
-        setMembershipNumber(value);
-      }
-    },
-    iconComponent: null,
-    style: {
-      width: '50%',
-      paddingLeft: 0
-    }
-  }));
+  });
 };
-
-var RenderList = function RenderList(_ref) {
+var LoyaltyPrograms = function LoyaltyPrograms(_ref) {
   var items = _ref.items,
     handleSelect = _ref.handleSelect,
     loading = _ref.loading,
@@ -4631,13 +4668,15 @@ var RenderList = function RenderList(_ref) {
     fetchItems = _ref.fetchItems,
     type = _ref.type,
     _ref$nextPageAvailabl = _ref.nextPageAvailable,
-    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl;
+    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl,
+    page = _ref.page;
   var observerRef = useRef(null);
+  var delayTimeoutRef = useRef(null);
   useEffect(function () {
     if (!nextPageAvailable || loading) return;
     var observer = new IntersectionObserver(function (entries) {
       if (entries[0].isIntersecting) {
-        fetchItems(searchQuery);
+        if (nextPageAvailable) fetchItems(searchQuery);
       }
     }, {
       threshold: 0.5
@@ -4650,6 +4689,9 @@ var RenderList = function RenderList(_ref) {
       if (target) {
         observer.unobserve(target);
       }
+      if (delayTimeoutRef.current) {
+        clearTimeout(delayTimeoutRef.current);
+      }
     };
   }, [loading, nextPageAvailable, searchQuery, fetchItems]);
   var FallbackIcon = function FallbackIcon() {
@@ -4661,8 +4703,9 @@ var RenderList = function RenderList(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$3.list
-  }, items.map(function (item) {
-    var _item$associated_name;
+  }, page === 1 && loading ? null : items.map(function (item) {
+    var _item$associated_name, _item$associated_name2;
+    var associatedList = (item === null || item === void 0 ? void 0 : item.program_name) === 'Other' ? 'Add new membership program' : type === 'rental_car' ? item === null || item === void 0 ? void 0 : item.program_name : item !== null && item !== void 0 && (_item$associated_name = item.associated_names) !== null && _item$associated_name !== void 0 && _item$associated_name.length ? item === null || item === void 0 ? void 0 : (_item$associated_name2 = item.associated_names) === null || _item$associated_name2 === void 0 ? void 0 : _item$associated_name2.join(', ') : '';
     return /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         handleSelect(item);
@@ -4672,7 +4715,18 @@ var RenderList = function RenderList(_ref) {
       },
       key: item.id,
       className: styles$3.memberItem
-    }, item !== null && item !== void 0 && item.loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
+    }, item !== null && item !== void 0 && item.loyalty_program_image_url ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: "url(" + (item === null || item === void 0 ? void 0 : item.loyalty_program_image_url) + ")",
+        backgroundSize: 600,
+        borderRadius: 6,
+        border: '1px solid #F1F3F5',
+        backgroundPosition: 'top',
+        height: 40,
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.loyalty_program_image_url,
       alt: item.title,
       onError: function onError(e) {
@@ -4680,7 +4734,7 @@ var RenderList = function RenderList(_ref) {
         var fallbackContainer = e.target.nextElementSibling;
         if (fallbackContainer) fallbackContainer.style.display = 'block';
       }
-    }) : /*#__PURE__*/React.createElement("div", {
+    })) : /*#__PURE__*/React.createElement("div", {
       className: styles$3.newMembershipIcon
     }, /*#__PURE__*/React.createElement(FallbackIcon, null)), /*#__PURE__*/React.createElement("div", {
       className: styles$3.newMembershipIcon,
@@ -4692,14 +4746,52 @@ var RenderList = function RenderList(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$3.title
     }, item === null || item === void 0 ? void 0 : item.program_name), /*#__PURE__*/React.createElement("div", {
-      className: styles$3.subtitle
-    }, item.program_name === 'Other' ? 'Add new membership program' : item === null || item === void 0 ? void 0 : (_item$associated_name = item.associated_names) === null || _item$associated_name === void 0 ? void 0 : _item$associated_name.join(' '))));
+      className: styles$3.subtitle,
+      title: associatedList
+    }, associatedList)));
   }), loading && /*#__PURE__*/React.createElement("div", {
     className: styles$3.loading
-  }, "Loading..."), !loading && nextPageAvailable && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Loader, null)), !loading && nextPageAvailable && /*#__PURE__*/React.createElement("div", {
     ref: observerRef,
     className: styles$3.loading
-  }, /*#__PURE__*/React.createElement("div", null, "Loading...")));
+  }, /*#__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"];
@@ -4726,20 +4818,6 @@ var SavedMemberships = function SavedMemberships(_ref) {
       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 handleClose = function handleClose() {
     setOpen(false);
     setDeleteItemData(null);
@@ -4792,6 +4870,14 @@ var SavedMemberships = function SavedMemberships(_ref) {
       type: type
     }));
   };
+  var _ref3 = deleteItemData || {},
+    _ref3$name = _ref3.name,
+    name = _ref3$name === void 0 ? '' : _ref3$name,
+    _ref3$program_name = _ref3.program_name,
+    program_name = _ref3$program_name === void 0 ? '' : _ref3$program_name,
+    _ref3$loyalty_program = _ref3.loyalty_program_name,
+    loyalty_program_name = _ref3$loyalty_program === void 0 ? '' : _ref3$loyalty_program;
+  var deleteMembershipName = loyalty_program_name === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IUIModal, {
     isOpen: open,
     closeHandler: handleClose,
@@ -4804,38 +4890,60 @@ var SavedMemberships = function SavedMemberships(_ref) {
       borderBottom: '1px solid #E5E7EB'
     },
     isDisabledSubmitBtn: isDeleting,
-    headerText: "Delete SkyMiles?",
-    width: "640px"
+    headerText: "Delete " + deleteMembershipName,
+    width: "640px",
+    modalClass: styles$3.membershipDeleteModal
   }, /*#__PURE__*/React.createElement("p", {
     style: {
-      marginTop: 0
-    }
-  }, "Are you sure you want to delete ", deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.name, "? This change is not reversible.")), list.map(function (mem, ind) {
-    var _ref3 = mem || {},
-      _ref3$name = _ref3.name,
-      name = _ref3$name === void 0 ? '' : _ref3$name,
-      _ref3$number = _ref3.number,
-      number = _ref3$number === void 0 ? '' : _ref3$number,
-      _ref3$program_name = _ref3.program_name,
-      program_name = _ref3$program_name === void 0 ? '' : _ref3$program_name,
-      _ref3$loyalty_program = _ref3.loyalty_program_image_url,
-      loyalty_program_image_url = _ref3$loyalty_program === void 0 ? null : _ref3$loyalty_program,
-      _ref3$loyalty_program2 = _ref3.loyalty_program_name,
-      loyalty_program_name = _ref3$loyalty_program2 === void 0 ? '' : _ref3$loyalty_program2;
-    var isOther = !!name;
+      marginTop: 0,
+      color: '#6B7280'
+    }
+  }, "Are you sure you want to delete ", deleteMembershipName, "? This change is not reversible.")), list.map(function (mem, ind) {
+    var _ref4 = mem || {},
+      _ref4$name = _ref4.name,
+      name = _ref4$name === void 0 ? '' : _ref4$name,
+      _ref4$number = _ref4.number,
+      number = _ref4$number === void 0 ? '' : _ref4$number,
+      _ref4$program_name = _ref4.program_name,
+      program_name = _ref4$program_name === void 0 ? '' : _ref4$program_name,
+      _ref4$loyalty_program = _ref4.loyalty_program_image_url,
+      loyalty_program_image_url = _ref4$loyalty_program === void 0 ? null : _ref4$loyalty_program,
+      _ref4$loyalty_program2 = _ref4.loyalty_program_name,
+      loyalty_program_name = _ref4$loyalty_program2 === void 0 ? '' : _ref4$loyalty_program2;
+    var isOther = (loyalty_program_name || program_name) === 'Other';
     return /*#__PURE__*/React.createElement("div", {
       className: styles$3.savedMembership,
       key: ind
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$3.iconWrapper
     }, loyalty_program_image_url ? /*#__PURE__*/React.createElement("div", {
-      className: styles$3.icon
+      className: styles$3.iconPar,
+      style: {
+        background: "url(" + loyalty_program_image_url + ")",
+        backgroundSize: 600,
+        borderRadius: 6,
+        border: '1px solid #F1F3F5',
+        backgroundPosition: 'top'
+      }
     }, /*#__PURE__*/React.createElement("img", {
       src: loyalty_program_image_url,
-      alt: name
+      alt: name,
+      className: styles$3.icon,
+      onError: function onError(e) {
+        e.target.style.display = 'none';
+        var fallbackContainer = e.target.nextElementSibling;
+        if (fallbackContainer) fallbackContainer.style.display = 'block';
+      }
     })) : /*#__PURE__*/React.createElement(FallbackIcon, {
       type: type
-    }), /*#__PURE__*/React.createElement("p", null, loyalty_program_name === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name)), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles$3.newMembershipIcon,
+      style: {
+        display: 'none'
+      }
+    }, /*#__PURE__*/React.createElement(FallbackIcon, {
+      type: type
+    })), /*#__PURE__*/React.createElement("p", null, (loyalty_program_name || program_name) === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name)), /*#__PURE__*/React.createElement("div", {
       className: styles$3.number
     }, number), /*#__PURE__*/React.createElement("div", {
       className: styles$3.actions
@@ -4846,7 +4954,7 @@ var SavedMemberships = function SavedMemberships(_ref) {
       style: {
         marginTop: 1
       }
-    }, /*#__PURE__*/React.createElement(PencilIcon, {
+    }, /*#__PURE__*/React.createElement(EditIcon, {
       width: "14",
       height: "14",
       color: "#EC5D25"
@@ -4855,6 +4963,9 @@ var SavedMemberships = function SavedMemberships(_ref) {
         handleDelete(_extends({}, mem, {
           ind: ind
         }));
+      },
+      style: {
+        marginLeft: 10
       }
     }, /*#__PURE__*/React.createElement(DeleteIcon, null))));
   }));
@@ -4922,20 +5033,27 @@ var AddMembershipButton = memo(function (_ref) {
 var IUIToastMessageService$5 = services.IUIToastMessageService;
 var api$7 = configs.api;
 var Membership = function Membership(_ref) {
+  var _clsx;
   var _ref$membershipInfoIn = _ref.membershipInfoInput,
     membershipInfoInput = _ref$membershipInfoIn === void 0 ? [] : _ref$membershipInfoIn,
     _ref$setMembershipInf = _ref.setMembershipInfoInput,
-    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf;
+    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf,
+    _ref$isProfile = _ref.isProfile,
+    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
+  var _useParams = useParams(),
+    editUserId = _useParams.userId;
   var _useSelector = useSelector(function (state) {
       return state.common;
     }),
-    userID = _useSelector.id;
+    id = _useSelector.id;
+  var userID = isProfile ? id : editUserId;
   var _useState = useState(membershipInfoInput),
     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: [],
@@ -5002,33 +5120,34 @@ var Membership = function Membership(_ref) {
       reset = false;
     }
     try {
+      nextRef.current = null;
+      var pageNo = reset ? 1 : page + 1;
       setLoading(true);
-      var url = 'api/v1/user-management/loyalty-program/' + ("?page=" + page + "&travel_type=" + type);
+      var url = 'api/v1/user-management/loyalty-program/' + ("?page=" + pageNo + "&travel_type=" + type);
       if (query) {
-        url += "&search_term=" + query;
+        url += "&search_term=" + query.toLowerCase();
       }
-      var _temp = _finallyRethrows(function () {
-        return _catch(function () {
-          return Promise.resolve(api$7.get(url).then(function (res) {
-            return res;
-          })).then(function (response) {
-            var _response$data, _response$data2;
-            var list = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.results;
-            nextRef.current = response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.next;
-            setItems(function (prevItems) {
-              return reset ? list : [].concat(prevItems, list);
-            });
-            if (reset) setPage(1);else setPage(function (prevPage) {
-              return prevPage + 1;
-            });
+      if (reset) setPage(1);else setPage(function (prevPage) {
+        return prevPage + 1;
+      });
+      var _temp = _catch(function () {
+        return Promise.resolve(api$7.get(url).then(function (res) {
+          return res;
+        })).then(function (response) {
+          var _response$data, _response$data2;
+          var list = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : _response$data.results;
+          nextRef.current = response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : _response$data2.next;
+          setItems(function (prevItems) {
+            return reset ? list : [].concat(prevItems, list);
           });
-        }, function (error) {
-          console.error('Error fetching data:', error);
+          setLoading(false);
         });
-      }, function (_wasThrown, _result) {
+      }, function (error) {
+        nextRef.current = null;
+        IUIToastMessageService$5.warningNotify('Something went wrong');
+        setIsInputFocused(false);
         setLoading(false);
-        if (_wasThrown) throw _result;
-        return _result;
+        console.error('Error fetching data:', error);
       });
       return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
@@ -5062,8 +5181,16 @@ var Membership = function Membership(_ref) {
     };
   }, [searchQuery]);
   useEffect(function () {
-    if (isInputFocused) fetchItems(debouncedQuery, true);
+    if (isInputFocused) fetchItems(debouncedQuery, true);else {
+      setSearchQuery('');
+      setItems([]);
+    }
   }, [isInputFocused, debouncedQuery]);
+  useEffect(function () {
+    if (!(modalState !== null && modalState !== void 0 && modalState.open)) {
+      setIsInputFocused(false);
+    }
+  }, [modalState]);
   var handleClose = function handleClose() {
     setIsUpdating(false);
     setIsOtherMembership(false);
@@ -5098,11 +5225,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,
@@ -5114,7 +5242,8 @@ var Membership = function Membership(_ref) {
     try {
       var url = "/api/v1/user-management/users/" + userID + "/membership";
       var payload = editIndex ? _extends({}, selectedMembershipChain, {
-        number: membershipNumber
+        number: membershipNumber,
+        name: membershipName || ''
       }) : {
         membership_type: type,
         number: membershipNumber,
@@ -5131,8 +5260,10 @@ var Membership = function Membership(_ref) {
               var _response$data3;
               var updatedResponse = response === null || response === void 0 ? void 0 : response.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.notify(editIndex ? "Membership updated." : "New membership added.");
+              IUIToastMessageService$5.sNotify(editIndex ? "Membership updated." : "New membership added.");
             } else {
               IUIToastMessageService$5.warningNotify('Failed to save membership');
             }
@@ -5141,10 +5272,10 @@ var Membership = function Membership(_ref) {
           console.error(error);
           IUIToastMessageService$5.warningNotify('Something went wrong!');
         });
-      }, function (_wasThrown2, _result2) {
+      }, function (_wasThrown, _result) {
         handleClose();
-        if (_wasThrown2) throw _result2;
-        return _result2;
+        if (_wasThrown) throw _result;
+        return _result;
       });
       return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
@@ -5169,17 +5300,19 @@ var Membership = function Membership(_ref) {
   }, /*#__PURE__*/React.createElement(IUIModal, {
     isOpen: open,
     closeHandler: handleClose,
+    modalClass: clsx(styles$3.loyaltymodal, (_clsx = {}, _clsx[styles$3.loyaltyList] = !selectedMembershipChain, _clsx)),
     cancelLabel: selectedMembershipChain ? 'Cancel' : '',
     submitLabel: selectedMembershipChain ? isUpdating ? 'Saving...' : editIndex ? 'Save' : 'Add' : '',
     submitHandler: handleSubmit,
-    isDisabledSubmitBtn: isUpdating || !membershipNumber,
-    width: "640px",
+    isDisabledSubmitBtn: isUpdating || !membershipNumber || isOtherMembership && !membershipName,
+    width: selectedMembershipChain ? '480px' : '640px',
     headerText: selectedMembershipChain ? '' : title,
     subHanderText: selectedMembershipChain ? '' : subtitle,
     modalBodyStyle: {
-      padding: selectedMembershipChain ? '0px 24px 25px' : '10px 24px 0px',
+      padding: selectedMembershipChain ? '0px 24px 25px' : '24px 24px 0px',
       minHeight: selectedMembershipChain ? 120 : 80,
-      borderBottom: selectedMembershipChain && '1px solid #E5E7EB'
+      borderBottom: selectedMembershipChain && '1px solid #E5E7EB',
+      marginBottom: selectedMembershipChain ? 0 : -18
     }
   }, /*#__PURE__*/React.createElement(Fragment$1, null, selectedMembershipChain ? /*#__PURE__*/React.createElement(MembershipForm, {
     selectedMembershipChain: selectedMembershipChain,
@@ -5190,7 +5323,16 @@ var Membership = function Membership(_ref) {
     setMembershipNumber: setMembershipNumber,
     type: type,
     isEdit: !!editIndex
-  }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Loyalty program *"), /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#374151',
+      fontWeight: 500
+    }
+  }, "Loyalty program"), ' ', /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#6B7280'
+    }
+  }, "*")), /*#__PURE__*/React.createElement("div", {
     className: styles$3.selectWrapper,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -5201,14 +5343,23 @@ var Membership = function Membership(_ref) {
     onFocus: function onFocus() {
       return setIsInputFocused(true);
     },
+    onClick: function onClick() {
+      return setIsInputFocused(true);
+    },
     onChange: function onChange(e) {
-      return setSearchQuery(e.target.value);
-    }
+      if (!isInputFocused) {
+        setIsInputFocused(true);
+      }
+      setSearchQuery(e.target.value);
+    },
+    value: searchQuery
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$3.chevronIcon
-  }, /*#__PURE__*/React.createElement(ChevronNext, null))), isInputFocused && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ChevronNext, {
+    color: "#6B7280"
+  }))), isInputFocused && /*#__PURE__*/React.createElement("div", {
     className: styles$3.membershipList
-  }, /*#__PURE__*/React.createElement(RenderList, {
+  }, /*#__PURE__*/React.createElement(LoyaltyPrograms, {
     items: items,
     handleSelect: handleSelect,
     loading: loading,
@@ -5217,7 +5368,8 @@ var Membership = function Membership(_ref) {
     searchQuery: searchQuery,
     fetchItems: fetchItems,
     type: type,
-    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current
+    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current,
+    page: page
   })))))), /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%'
@@ -5241,7 +5393,6 @@ var Membership = function Membership(_ref) {
 var AdditionalInfo = function AdditionalInfo(_ref) {
   var _clsx;
   var membershipInfoInput = _ref.membershipInfoInput,
-    addMemInfoInput = _ref.addMemInfoInput,
     travelPreferenceInfo = _ref.travelPreferenceInfo,
     _ref$travelPreference = _ref.travelPreferenceOnChange,
     travelPreferenceOnChange = _ref$travelPreference === void 0 ? function () {} : _ref$travelPreference,
@@ -5261,7 +5412,9 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     _ref$setAdditionalInf = _ref.setAdditionalInfoFlag,
     setAdditionalInfoFlag = _ref$setAdditionalInf === void 0 ? function () {} : _ref$setAdditionalInf,
     _ref$setMembershipInf = _ref.setMembershipInfoInput,
-    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf;
+    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf,
+    _ref$isProfile = _ref.isProfile,
+    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
   var handleChange = function handleChange(panel) {
     return function (event, defaultExpand) {
       setAdditionalInfoFlag(defaultExpand ? panel : false);
@@ -5273,10 +5426,6 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     passportInfo = _useSelector.passportInfo,
     secureTravelInfo = _useSelector.secureTravelInfo,
     travelPreference = _useSelector.travelPreference;
-  var _useSelector2 = useSelector(function (state) {
-      return state.userAddEdit;
-    }),
-    maxMembershipInput = _useSelector2.maxMembershipInput;
   var dropdownList = useSelector(function (state) {
     return state.userAddEdit.dropdownList;
   });
@@ -5361,8 +5510,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     md: 4
   }, /*#__PURE__*/React.createElement(IUILabel, {
     label: "Membership information",
-    headerType: true,
-    description: "You can add up to " + maxMembershipInput + " membership details"
+    headerType: true
   })), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     sm: 12,
@@ -5372,52 +5520,10 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: styles.formFieldsWrapper
-  }, membershipInfoInput.length === 0 && /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles.emptyFieldContainer
-  }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles.emptyFieldDescription
-  }, "No membership details added yet"), /*#__PURE__*/React.createElement(IUIBox, {
-    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-    display: "flex"
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add airline",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('flight');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add hotel",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('hotel');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add car rental",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('rental_car');
-    }
-  }))), /*#__PURE__*/React.createElement(Membership, {
+  }, /*#__PURE__*/React.createElement(Membership, {
     membershipInfoInput: membershipInfoInput,
-    setMembershipInfoInput: setMembershipInfoInput
+    setMembershipInfoInput: setMembershipInfoInput,
+    isProfile: isProfile
   })))), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), /*#__PURE__*/React.createElement(IUIGrid, {
@@ -5894,7 +6000,7 @@ var UserAddEdit = function UserAddEdit(props) {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
       }
     }).then(function (response) {
       return response.json();
@@ -5906,7 +6012,7 @@ var UserAddEdit = function UserAddEdit(props) {
         IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["catch"](function (error) {
-      console.log('errorrr', error);
+      console.log("errorrr", error);
     });
   };
   var fetchLoggedUserCardsDetails = function fetchLoggedUserCardsDetails() {
@@ -5914,7 +6020,7 @@ var UserAddEdit = function UserAddEdit(props) {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
       }
     }).then(function (response) {
       return response.json();
@@ -5926,7 +6032,7 @@ var UserAddEdit = function UserAddEdit(props) {
         IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["catch"](function (error) {
-      console.log('errorrr', error);
+      console.log("errorrr", error);
     });
   };
   useEffect(function () {
@@ -6966,7 +7072,7 @@ var UserAddEdit = function UserAddEdit(props) {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
       var cardsPayload = {
-        roles: [cardsRole]
+        "roles": [cardsRole]
       };
       var payload = {
         personalInfoInput: personalInfoInput,
@@ -7152,7 +7258,7 @@ var UserAddEdit = function UserAddEdit(props) {
               body: JSON.stringify(cardsPayload),
               headers: {
                 'Content-Type': 'application/json',
-                authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+                'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
               }
             }).then(function (response) {
               if (response.status === 200) {
@@ -7161,7 +7267,7 @@ var UserAddEdit = function UserAddEdit(props) {
                 IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
               }
             })["catch"](function (error) {
-              console.log('errorrr', error);
+              console.log("errorrr", error);
             })["finally"](function () {
               dispatch(stopLoader());
             });
@@ -7179,14 +7285,14 @@ var UserAddEdit = function UserAddEdit(props) {
                   body: JSON.stringify(cardsPayload),
                   headers: {
                     'Content-Type': 'application/json',
-                    authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+                    'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
                   }
                 }).then(function (response) {
                   if (response.status !== 200) {
                     IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
                   }
                 })["catch"](function (error) {
-                  console.log('errorrr', error);
+                  console.log("errorrr", error);
                 });
               }
               (config === null || config === void 0 ? void 0 : (_config$routes4 = config.routes) === null || _config$routes4 === void 0 ? void 0 : (_config$routes4$users = _config$routes4.users) === null || _config$routes4$users === void 0 ? void 0 : (_config$routes4$users2 = _config$routes4$users.list) === null || _config$routes4$users2 === void 0 ? void 0 : _config$routes4$users2.path) && history.push(config.routes.users.list.path);
@@ -7641,7 +7747,8 @@ var UserAddEdit = function UserAddEdit(props) {
     dateFormat: dateFormat,
     defaultExpand: isAdditionalInfoExpanded,
     setAdditionalInfoFlag: setAdditionalInfoFlag,
-    setMembershipInfoInput: setMembershipInfoInput
+    setMembershipInfoInput: setMembershipInfoInput,
+    isProfile: isProfile
   })), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), productAccess && productAccess.expense && /*#__PURE__*/React.createElement(TravelExpenseFields, {