@itilite/iui-user-management 1.4.99 → 1.4.481

package/dist/index.modern.js

@@ -1,4 +1,4 @@
-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 { 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 React, { useState, useEffect, memo, useRef, Fragment as Fragment$1 } from 'react';
 import { configs, services, utilUrls } from '@itilite/utils';
 import axios from 'axios';
@@ -9,7 +9,7 @@ import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import moment from 'moment';
 import { composeWithDevTools } from 'redux-devtools-extension';
-import { useParams, useHistory, useLocation } from 'react-router-dom';
+import { 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';
@@ -4485,11 +4485,9 @@ var ExpandLessIcon = function ExpandLessIcon(props) {
   }));
 };
 
-var styles$3 = {"loyaltymodal":"_2LnGt","membershipDeleteModal":"_2LdH8","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","icon":"_3CdwB","number":"_1eJyq","actions":"_f_N1r"};
+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 ChevronNext = function ChevronNext(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#9CA3AF' : _ref$color;
+var ChevronNext = function ChevronNext() {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "8",
@@ -4497,103 +4495,13 @@ var ChevronNext = function ChevronNext(_ref) {
     fill: "none",
     viewBox: "0 0 8 16"
   }, /*#__PURE__*/React.createElement("path", {
-    stroke: color,
+    stroke: "#9CA3AF",
     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://i.imghippo.com/files/Tcd6723qtY.png';
-    } else if (type === 'hotel') {
-      url = 'https://i.imghippo.com/files/CWoy5950wU.png';
-    } else {
-      url = 'https://i.imghippo.com/files/MNQI7762nvk.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: '50%',
-      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: '50%',
-      paddingLeft: 0,
-      borderRadius: 6
-    }
-  }));
-};
-
 var TravelModeIcon = function TravelModeIcon(_ref) {
   var type = _ref.type;
   var FlightIcon = memo(function () {
@@ -4650,15 +4558,70 @@ var TravelModeIcon = function TravelModeIcon(_ref) {
   return null;
 };
 
-var Loader = function Loader() {
-  return /*#__PURE__*/React.createElement(IUICircularProgress, {
-    color: "inherit",
-    size: 25,
+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,
     style: {
-      color: '#EC5D25'
+      width: '50%',
+      paddingLeft: 0
     }
-  });
+  })) : /*#__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 items = _ref.items,
     handleSelect = _ref.handleSelect,
@@ -4668,15 +4631,13 @@ var RenderList = function RenderList(_ref) {
     fetchItems = _ref.fetchItems,
     type = _ref.type,
     _ref$nextPageAvailabl = _ref.nextPageAvailable,
-    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl,
-    page = _ref.page;
+    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl;
   var observerRef = useRef(null);
-  var delayTimeoutRef = useRef(null);
   useEffect(function () {
     if (!nextPageAvailable || loading) return;
     var observer = new IntersectionObserver(function (entries) {
       if (entries[0].isIntersecting) {
-        if (nextPageAvailable) fetchItems(searchQuery);
+        fetchItems(searchQuery);
       }
     }, {
       threshold: 0.5
@@ -4689,9 +4650,6 @@ var RenderList = function RenderList(_ref) {
       if (target) {
         observer.unobserve(target);
       }
-      if (delayTimeoutRef.current) {
-        clearTimeout(delayTimeoutRef.current);
-      }
     };
   }, [loading, nextPageAvailable, searchQuery, fetchItems]);
   var FallbackIcon = function FallbackIcon() {
@@ -4703,9 +4661,8 @@ var RenderList = function RenderList(_ref) {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$3.list
-  }, 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(', ') : '';
+  }, items.map(function (item) {
+    var _item$associated_name;
     return /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         handleSelect(item);
@@ -4735,15 +4692,14 @@ 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,
-      title: associatedList
-    }, associatedList)));
+      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(' '))));
   }), loading && /*#__PURE__*/React.createElement("div", {
     className: styles$3.loading
-  }, /*#__PURE__*/React.createElement(Loader, null)), !loading && nextPageAvailable && /*#__PURE__*/React.createElement("div", {
+  }, "Loading..."), !loading && nextPageAvailable && /*#__PURE__*/React.createElement("div", {
     ref: observerRef,
     className: styles$3.loading
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Loader, null))));
+  }, /*#__PURE__*/React.createElement("div", null, "Loading...")));
 };
 
 var _excluded = ["ind"];
@@ -4857,14 +4813,6 @@ 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,
@@ -4877,52 +4825,39 @@ var SavedMemberships = function SavedMemberships(_ref) {
       borderBottom: '1px solid #E5E7EB'
     },
     isDisabledSubmitBtn: isDeleting,
-    headerText: "Delete " + deleteMembershipName,
-    width: "640px",
-    modalClass: styles$3.membershipDeleteModal
+    headerText: "Delete " + ((deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.loyalty_program_name) || (deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.name)),
+    width: "640px"
   }, /*#__PURE__*/React.createElement("p", {
     style: {
       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;
+  }, "Are you sure you want to delete", ' ', (deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.loyalty_program_name) || (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;
     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("img", {
+    }, loyalty_program_image_url ? /*#__PURE__*/React.createElement("div", {
+      className: styles$3.icon
+    }, /*#__PURE__*/React.createElement("img", {
       src: loyalty_program_image_url,
-      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';
-        console.log(fallbackContainer, 'xxx4');
-      }
-    }) : /*#__PURE__*/React.createElement(FallbackIcon, {
-      type: type
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$3.newMembershipIcon,
-      style: {
-        display: 'none'
-      }
-    }, /*#__PURE__*/React.createElement(FallbackIcon, {
+      alt: name
+    })) : /*#__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("p", null, loyalty_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
@@ -5015,16 +4950,11 @@ var Membership = function Membership(_ref) {
   var _ref$membershipInfoIn = _ref.membershipInfoInput,
     membershipInfoInput = _ref$membershipInfoIn === void 0 ? [] : _ref$membershipInfoIn,
     _ref$setMembershipInf = _ref.setMembershipInfoInput,
-    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;
+    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf;
   var _useSelector = useSelector(function (state) {
       return state.common;
     }),
-    id = _useSelector.id;
-  var userID = isProfile ? id : editUserId;
+    userID = _useSelector.id;
   var _useState = useState(membershipInfoInput),
     savedMemberships = _useState[0],
     setSavedMemberships = _useState[1];
@@ -5097,34 +5027,33 @@ 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=" + pageNo + "&travel_type=" + type);
+      var url = 'api/v1/user-management/loyalty-program/' + ("?page=" + page + "&travel_type=" + type);
       if (query) {
-        url += "&search_term=" + query.toLowerCase();
+        url += "&search_term=" + query;
       }
-      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);
+      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;
+            });
           });
-          setLoading(false);
+        }, function (error) {
+          console.error('Error fetching data:', error);
         });
-      }, function (error) {
-        nextRef.current = null;
-        IUIToastMessageService$5.warningNotify('Something went wrong');
-        setIsInputFocused(false);
+      }, function (_wasThrown, _result) {
         setLoading(false);
-        console.error('Error fetching data:', error);
+        if (_wasThrown) throw _result;
+        return _result;
       });
       return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
@@ -5158,16 +5087,8 @@ var Membership = function Membership(_ref) {
     };
   }, [searchQuery]);
   useEffect(function () {
-    if (isInputFocused) fetchItems(debouncedQuery, true);else {
-      setSearchQuery('');
-      setItems([]);
-    }
+    if (isInputFocused) fetchItems(debouncedQuery, true);
   }, [isInputFocused, debouncedQuery]);
-  useEffect(function () {
-    if (!(modalState !== null && modalState !== void 0 && modalState.open)) {
-      setIsInputFocused(false);
-    }
-  }, [modalState]);
   var handleClose = function handleClose() {
     setIsUpdating(false);
     setIsOtherMembership(false);
@@ -5218,8 +5139,7 @@ var Membership = function Membership(_ref) {
     try {
       var url = "/api/v1/user-management/users/" + userID + "/membership";
       var payload = editIndex ? _extends({}, selectedMembershipChain, {
-        number: membershipNumber,
-        name: membershipName || ''
+        number: membershipNumber
       }) : {
         membership_type: type,
         number: membershipNumber,
@@ -5236,10 +5156,8 @@ 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.sNotify(editIndex ? "Membership updated." : "New membership added.");
+              IUIToastMessageService$5.notify(editIndex ? "Membership updated." : "New membership added.");
             } else {
               IUIToastMessageService$5.warningNotify('Failed to save membership');
             }
@@ -5248,10 +5166,10 @@ var Membership = function Membership(_ref) {
           console.error(error);
           IUIToastMessageService$5.warningNotify('Something went wrong!');
         });
-      }, function (_wasThrown, _result) {
+      }, function (_wasThrown2, _result2) {
         handleClose();
-        if (_wasThrown) throw _result;
-        return _result;
+        if (_wasThrown2) throw _result2;
+        return _result2;
       });
       return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
@@ -5276,19 +5194,17 @@ var Membership = function Membership(_ref) {
   }, /*#__PURE__*/React.createElement(IUIModal, {
     isOpen: open,
     closeHandler: handleClose,
-    modalClass: styles$3.loyaltymodal,
     cancelLabel: selectedMembershipChain ? 'Cancel' : '',
     submitLabel: selectedMembershipChain ? isUpdating ? 'Saving...' : editIndex ? 'Save' : 'Add' : '',
     submitHandler: handleSubmit,
-    isDisabledSubmitBtn: isUpdating || !membershipNumber || isOtherMembership && !membershipName,
+    isDisabledSubmitBtn: isUpdating || !membershipNumber,
     width: "640px",
     headerText: selectedMembershipChain ? '' : title,
     subHanderText: selectedMembershipChain ? '' : subtitle,
     modalBodyStyle: {
-      padding: selectedMembershipChain ? '0px 24px 25px' : '24px 24px 0px',
+      padding: selectedMembershipChain ? '0px 24px 25px' : '10px 24px 0px',
       minHeight: selectedMembershipChain ? 120 : 80,
-      borderBottom: selectedMembershipChain && '1px solid #E5E7EB',
-      marginBottom: selectedMembershipChain ? 0 : -18
+      borderBottom: selectedMembershipChain && '1px solid #E5E7EB'
     }
   }, /*#__PURE__*/React.createElement(Fragment$1, null, selectedMembershipChain ? /*#__PURE__*/React.createElement(MembershipForm, {
     selectedMembershipChain: selectedMembershipChain,
@@ -5299,16 +5215,7 @@ var Membership = function Membership(_ref) {
     setMembershipNumber: setMembershipNumber,
     type: type,
     isEdit: !!editIndex
-  }) : /*#__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", {
+  }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Loyalty program *"), /*#__PURE__*/React.createElement("div", {
     className: styles$3.selectWrapper,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -5319,21 +5226,12 @@ var Membership = function Membership(_ref) {
     onFocus: function onFocus() {
       return setIsInputFocused(true);
     },
-    onClick: function onClick() {
-      return setIsInputFocused(true);
-    },
     onChange: function onChange(e) {
-      if (!isInputFocused) {
-        setIsInputFocused(true);
-      }
-      setSearchQuery(e.target.value);
-    },
-    value: searchQuery
+      return setSearchQuery(e.target.value);
+    }
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$3.chevronIcon
-  }, /*#__PURE__*/React.createElement(ChevronNext, {
-    color: "#6B7280"
-  }))), isInputFocused && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ChevronNext, null))), isInputFocused && /*#__PURE__*/React.createElement("div", {
     className: styles$3.membershipList
   }, /*#__PURE__*/React.createElement(RenderList, {
     items: items,
@@ -5344,8 +5242,7 @@ var Membership = function Membership(_ref) {
     searchQuery: searchQuery,
     fetchItems: fetchItems,
     type: type,
-    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current,
-    page: page
+    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current
   })))))), /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100%'
@@ -5369,6 +5266,7 @@ 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,
@@ -5388,9 +5286,7 @@ 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,
-    _ref$isProfile = _ref.isProfile,
-    isProfile = _ref$isProfile === void 0 ? false : _ref$isProfile;
+    setMembershipInfoInput = _ref$setMembershipInf === void 0 ? function () {} : _ref$setMembershipInf;
   var handleChange = function handleChange(panel) {
     return function (event, defaultExpand) {
       setAdditionalInfoFlag(defaultExpand ? panel : false);
@@ -5402,6 +5298,10 @@ 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;
   });
@@ -5486,7 +5386,8 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
     md: 4
   }, /*#__PURE__*/React.createElement(IUILabel, {
     label: "Membership information",
-    headerType: true
+    headerType: true,
+    description: "You can add up to " + maxMembershipInput + " membership details"
   })), /*#__PURE__*/React.createElement(IUIGrid, {
     item: true,
     sm: 12,
@@ -5496,10 +5397,52 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: styles.formFieldsWrapper
-  }, /*#__PURE__*/React.createElement(Membership, {
+  }, 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, {
     membershipInfoInput: membershipInfoInput,
-    setMembershipInfoInput: setMembershipInfoInput,
-    isProfile: isProfile
+    setMembershipInfoInput: setMembershipInfoInput
   })))), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), /*#__PURE__*/React.createElement(IUIGrid, {
@@ -5976,7 +5919,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();
@@ -5988,7 +5931,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() {
@@ -5996,7 +5939,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();
@@ -6008,7 +5951,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 () {
@@ -7048,7 +6991,7 @@ var UserAddEdit = function UserAddEdit(props) {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
       var cardsPayload = {
-        "roles": [cardsRole]
+        roles: [cardsRole]
       };
       var payload = {
         personalInfoInput: personalInfoInput,
@@ -7234,7 +7177,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) {
@@ -7243,7 +7186,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());
             });
@@ -7261,14 +7204,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);
@@ -7722,7 +7665,8 @@ var UserAddEdit = function UserAddEdit(props) {
     errorMsgs: errorMsgs,
     dateFormat: dateFormat,
     defaultExpand: isAdditionalInfoExpanded,
-    setAdditionalInfoFlag: setAdditionalInfoFlag
+    setAdditionalInfoFlag: setAdditionalInfoFlag,
+    setMembershipInfoInput: setMembershipInfoInput
   })), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), productAccess && productAccess.expense && /*#__PURE__*/React.createElement(TravelExpenseFields, {