@itilite/iui-user-management 1.4.99 → 1.4.482

package/dist/index.modern.js

@@ -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,6 +4558,67 @@ 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,
+    style: {
+      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) {
+      setMembershipNumber(e.target.value);
+    },
+    iconComponent: null,
+    style: {
+      width: '50%',
+      paddingLeft: 0
+    }
+  }));
+};
+
 var Loader = function Loader() {
   return /*#__PURE__*/React.createElement(IUICircularProgress, {
     color: "inherit",
@@ -4671,12 +4640,11 @@ var RenderList = function RenderList(_ref) {
     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) {
-        if (nextPageAvailable) fetchItems(searchQuery);
+        fetchItems(searchQuery);
       }
     }, {
       threshold: 0.5
@@ -4689,9 +4657,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() {
@@ -4704,8 +4669,7 @@ 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(', ') : '';
+    var _item$associated_name;
     return /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         handleSelect(item);
@@ -4735,9 +4699,8 @@ 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 === null || item === void 0 ? void 0 : 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", {
@@ -4878,8 +4841,7 @@ var SavedMemberships = function SavedMemberships(_ref) {
     },
     isDisabledSubmitBtn: isDeleting,
     headerText: "Delete " + deleteMembershipName,
-    width: "640px",
-    modalClass: styles$3.membershipDeleteModal
+    width: "640px"
   }, /*#__PURE__*/React.createElement("p", {
     style: {
       marginTop: 0,
@@ -5015,16 +4977,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 +5054,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=" + pageNo + "&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);
+            });
           });
-          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) {
@@ -5218,8 +5175,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 +5192,9 @@ 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 +5203,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 +5231,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 +5252,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", {
@@ -5331,9 +5275,7 @@ var Membership = function Membership(_ref) {
     value: searchQuery
   }), /*#__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,
@@ -5369,6 +5311,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 +5331,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 +5343,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 +5431,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 +5442,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 +5964,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 +5976,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 +5984,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 +5996,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 +7036,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 +7222,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 +7231,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 +7249,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 +7710,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, {