@itilite/iui-user-management 1.4.7 → 1.4.42

package/dist/index.modern.js

@@ -1,15 +1,16 @@
-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';
 import AddIcon$1 from '@material-ui/icons/Add';
-import DeleteIcon$1 from '@material-ui/icons/Delete';
+import DeleteIcon 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 { useParams, useHistory, useLocation } from 'react-router-dom';
+import api$9 from '@itilite/iuistyles/src/utils/Api';
+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';
@@ -2269,7 +2270,7 @@ var CreditCard = function CreditCard(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleCardDelete
-  }, /*#__PURE__*/React.createElement(DeleteIcon$1, {
+  }, /*#__PURE__*/React.createElement(DeleteIcon, {
     width: "10",
     height: "10"
   }))), /*#__PURE__*/React.createElement("div", {
@@ -4485,11 +4486,9 @@ var ExpandLessIcon = function ExpandLessIcon(props) {
   }));
 };
 
-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 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,111 +4496,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 sixteenDigitNumber = /^\d{16}$/;
-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,
-    _ref$isAAAloyaltySele = _ref.isAAAloyaltySelected,
-    isAAAloyaltySelected = _ref$isAAAloyaltySele === void 0 ? false : _ref$isAAAloyaltySele;
-  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: isAAAloyaltySelected ? 'Enter 16-digit AAA membership ID' : '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
-    }
-  }), isAAAloyaltySelected && membershipNumber && !sixteenDigitNumber.test(membershipNumber) && /*#__PURE__*/React.createElement("div", {
-    style: {
-      color: '#cf2231',
-      marginTop: 5
-    }
-  }, "Enter a valid 16-digit AAA membership ID"));
-};
-
 var TravelModeIcon = function TravelModeIcon(_ref) {
   var type = _ref.type;
   var FlightIcon = memo(function () {
@@ -4658,16 +4559,71 @@ 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 LoyaltyPrograms = function LoyaltyPrograms(_ref) {
+
+var RenderList = function RenderList(_ref) {
   var items = _ref.items,
     handleSelect = _ref.handleSelect,
     loading = _ref.loading,
@@ -4676,15 +4632,13 @@ var LoyaltyPrograms = function LoyaltyPrograms(_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
@@ -4697,9 +4651,6 @@ var LoyaltyPrograms = function LoyaltyPrograms(_ref) {
       if (target) {
         observer.unobserve(target);
       }
-      if (delayTimeoutRef.current) {
-        clearTimeout(delayTimeoutRef.current);
-      }
     };
   }, [loading, nextPageAvailable, searchQuery, fetchItems]);
   var FallbackIcon = function FallbackIcon() {
@@ -4711,9 +4662,8 @@ var LoyaltyPrograms = function LoyaltyPrograms(_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);
@@ -4723,18 +4673,7 @@ var LoyaltyPrograms = function LoyaltyPrograms(_ref) {
       },
       key: item.id,
       className: styles$3.memberItem
-    }, 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", {
+    }, item !== null && item !== void 0 && item.loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.loyalty_program_image_url,
       alt: item.title,
       onError: function onError(e) {
@@ -4742,7 +4681,7 @@ var LoyaltyPrograms = function LoyaltyPrograms(_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,
@@ -4754,52 +4693,14 @@ var LoyaltyPrograms = function LoyaltyPrograms(_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))));
-};
-
-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"
-  }));
+  }, /*#__PURE__*/React.createElement("div", null, "Loading...")));
 };
 
 var _excluded = ["ind"];
@@ -4826,6 +4727,20 @@ 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);
@@ -4878,14 +4793,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,
@@ -4898,60 +4805,37 @@ var SavedMemberships = function SavedMemberships(_ref) {
       borderBottom: '1px solid #E5E7EB'
     },
     isDisabledSubmitBtn: isDeleting,
-    headerText: "Delete " + deleteMembershipName,
-    width: "640px",
-    modalClass: styles$3.membershipDeleteModal
+    headerText: "Delete SkyMiles?",
+    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;
-    var isOther = (loyalty_program_name || program_name) === 'Other';
+      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 _mem$name = mem.name,
+      name = _mem$name === void 0 ? '' : _mem$name,
+      _mem$number = mem.number,
+      number = _mem$number === void 0 ? '' : _mem$number,
+      _mem$program_name = mem.program_name,
+      program_name = _mem$program_name === void 0 ? '' : _mem$program_name,
+      _mem$loyalty_program_ = mem.loyalty_program_image_url,
+      loyalty_program_image_url = _mem$loyalty_program_ === void 0 ? null : _mem$loyalty_program_,
+      _mem$loyalty_program_2 = mem.loyalty_program_name,
+      loyalty_program_name = _mem$loyalty_program_2 === void 0 ? '' : _mem$loyalty_program_2;
+    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("div", {
-      className: styles$3.iconPar,
-      style: {
-        background: "url(" + loyalty_program_image_url + ")",
-        backgroundSize: 600,
-        borderRadius: 6,
-        border: '1px solid #F1F3F5',
-        backgroundPosition: 'top'
-      }
+      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';
-      }
+      alt: name
     })) : /*#__PURE__*/React.createElement(FallbackIcon, {
       type: type
-    }), /*#__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", {
+    }), /*#__PURE__*/React.createElement("p", null, name || program_name || loyalty_program_name)), /*#__PURE__*/React.createElement("div", {
       className: styles$3.number
     }, number), /*#__PURE__*/React.createElement("div", {
       className: styles$3.actions
@@ -4962,7 +4846,7 @@ var SavedMemberships = function SavedMemberships(_ref) {
       style: {
         marginTop: 1
       }
-    }, /*#__PURE__*/React.createElement(EditIcon, {
+    }, /*#__PURE__*/React.createElement(PencilIcon, {
       width: "14",
       height: "14",
       color: "#EC5D25"
@@ -4971,9 +4855,6 @@ var SavedMemberships = function SavedMemberships(_ref) {
         handleDelete(_extends({}, mem, {
           ind: ind
         }));
-      },
-      style: {
-        marginLeft: 10
       }
     }, /*#__PURE__*/React.createElement(DeleteIcon, null))));
   }));
@@ -5039,30 +4920,21 @@ var AddMembershipButton = memo(function (_ref) {
 });
 
 var IUIToastMessageService$5 = services.IUIToastMessageService;
-var api$7 = configs.api;
-var sixteenDigitNumber$1 = /^\d{16}$/;
 var Membership = function Membership(_ref) {
-  var _clsx;
   var _ref$membershipInfoIn = _ref.membershipInfoInput,
     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];
   var groupedMembershipData = savedMemberships.reduce(function (acc, 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);
+    acc[item.membership_type] = acc[item.membership_type] || [];
+    acc[item.membership_type].push(item);
     return acc;
   }, {
     flight: [],
@@ -5121,7 +4993,6 @@ var Membership = function Membership(_ref) {
     setMembershipNumber = _useState14[1];
   var wrapperRef = useRef(null);
   var nextRef = useRef(null);
-  var isAAAloyaltySelected = (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.program_name) === 'AAA' || (selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_name) === 'AAA';
   var fetchItems = function fetchItems(query, reset) {
     if (query === void 0) {
       query = '';
@@ -5130,34 +5001,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$9.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) {
@@ -5191,20 +5061,11 @@ 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);
-    setMembershipName('');
     setMembershipNumber('');
     setModalState(_extends({}, modalState, {
       open: false
@@ -5213,7 +5074,6 @@ var Membership = function Membership(_ref) {
     setIsInputFocused(false);
     setItems([]);
     setEditIndex(null);
-    setSearchQuery('');
   };
   var updateList = function updateList(type, index, item) {
     if (index === void 0) {
@@ -5235,12 +5095,11 @@ var Membership = function Membership(_ref) {
       } else groupedMembershipData[type] = [].concat(groupedMembershipData[type], [item]);
     }
     if (index !== null && !item) {
-      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)) {
+      if (index < 0 || index >= groupedMembershipData[type].length) {
         console.error("Invalid index: " + index);
         return;
       }
-      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));
+      groupedMembershipData[type] = [].concat(groupedMembershipData[type].slice(0, index), groupedMembershipData[type].slice(index + 1));
     }
     var flight = groupedMembershipData.flight,
       hotel = groupedMembershipData.hotel,
@@ -5250,34 +5109,29 @@ var Membership = function Membership(_ref) {
   };
   var handleSubmit = function handleSubmit() {
     try {
-      if (isAAAloyaltySelected && !sixteenDigitNumber$1.test(membershipNumber)) {
-        IUIToastMessageService$5.warningNotify('Enter 16-digit AAA membership ID');
-        return Promise.resolve();
-      }
       var url = "/api/v1/user-management/users/" + userID + "/membership";
       var payload = editIndex ? _extends({}, selectedMembershipChain, {
-        number: membershipNumber,
-        name: membershipName || ''
+        number: membershipNumber
       }) : {
         membership_type: type,
         number: membershipNumber,
         iata_code: null,
         user: userID,
-        loyalty_program_id: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_id,
-        name: membershipName || ''
+        loyalty_program_id: selectedMembershipChain === null || selectedMembershipChain === void 0 ? void 0 : selectedMembershipChain.loyalty_program_id
       };
+      if (isOtherMembership) {
+        payload.name = membershipName;
+      }
       setIsUpdating(true);
       var _temp2 = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(editIndex ? api$7.put(url, payload) : api$7.post(url, payload)).then(function (response) {
+          return Promise.resolve(editIndex ? api$9.put(url, payload) : api$9.post(url, payload)).then(function (response) {
             if ((response === null || response === void 0 ? void 0 : response.status) === 201 || (response === null || response === void 0 ? void 0 : response.status) === 200) {
               var _response$data3;
               var updatedResponse = response === null || response === void 0 ? void 0 : response.data;
               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');
             }
@@ -5286,10 +5140,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) {
@@ -5299,7 +5153,7 @@ var Membership = function Membership(_ref) {
   var handleEdit = function handleEdit(mem, index, isOther) {
     setEditIndex(index);
     setSelectedMembershipChain(mem);
-    setMembershipName((mem === null || mem === void 0 ? void 0 : mem.name) || '');
+    setMembershipName(mem === null || mem === void 0 ? void 0 : mem.name);
     setMembershipNumber(mem === null || mem === void 0 ? void 0 : mem.number);
     setIsOtherMembership(isOther);
     var currentModalState = _extends({}, modalState);
@@ -5314,19 +5168,17 @@ 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 || isOtherMembership && !membershipName || isAAAloyaltySelected && !sixteenDigitNumber$1.test(membershipNumber),
-    width: selectedMembershipChain ? '480px' : '640px',
+    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,
@@ -5336,18 +5188,8 @@ var Membership = function Membership(_ref) {
     setMembershipName: setMembershipName,
     setMembershipNumber: setMembershipNumber,
     type: type,
-    isEdit: !!editIndex,
-    isAAAloyaltySelected: isAAAloyaltySelected
-  }) : /*#__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", {
+    isEdit: !!editIndex
+  }) : /*#__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", {
@@ -5358,23 +5200,14 @@ 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(LoyaltyPrograms, {
+  }, /*#__PURE__*/React.createElement(RenderList, {
     items: items,
     handleSelect: handleSelect,
     loading: loading,
@@ -5383,8 +5216,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%'
@@ -5408,6 +5240,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,
@@ -5427,9 +5260,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);
@@ -5441,6 +5272,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;
   });
@@ -5525,7 +5360,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,
@@ -5535,10 +5371,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, {
@@ -6015,7 +5893,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();
@@ -6027,7 +5905,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() {
@@ -6035,7 +5913,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();
@@ -6047,7 +5925,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 () {
@@ -7087,7 +6965,7 @@ var UserAddEdit = function UserAddEdit(props) {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
       var cardsPayload = {
-        "roles": [cardsRole]
+        roles: [cardsRole]
       };
       var payload = {
         personalInfoInput: personalInfoInput,
@@ -7273,7 +7151,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) {
@@ -7282,7 +7160,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());
             });
@@ -7300,14 +7178,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);
@@ -7762,8 +7640,7 @@ var UserAddEdit = function UserAddEdit(props) {
     dateFormat: dateFormat,
     defaultExpand: isAdditionalInfoExpanded,
     setAdditionalInfoFlag: setAdditionalInfoFlag,
-    setMembershipInfoInput: setMembershipInfoInput,
-    isProfile: isProfile
+    setMembershipInfoInput: setMembershipInfoInput
   })), /*#__PURE__*/React.createElement(IUIDivider, {
     className: styles.dividerColor
   }), productAccess && productAccess.expense && /*#__PURE__*/React.createElement(TravelExpenseFields, {
@@ -7900,7 +7777,7 @@ var Progressicon = function Progressicon(props) {
   }));
 };
 
-var api$8 = configs.api;
+var api$7 = configs.api;
 var showLoader$2 = function showLoader() {
   return {
     type: SHOW_LOADER$4
@@ -7926,7 +7803,7 @@ var setBulkActionHistoryFields = function setBulkActionHistoryFields(payload) {
 var generateTemplate = function generateTemplate(payload) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.get("" + userBulkImport.generateTemplate()).then(function (res) {
+      api$7.get("" + userBulkImport.generateTemplate()).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -7937,7 +7814,7 @@ var generateTemplate = function generateTemplate(payload) {
 var uploadBulkUsersFile = function uploadBulkUsersFile(payload) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.get(userBulkImport.uploadUrl() + "?action=upload_bulk_users&item_type=bulk_users&file_name=" + payload.fileName).then(function (res) {
+      api$7.get(userBulkImport.uploadUrl() + "?action=upload_bulk_users&item_type=bulk_users&file_name=" + payload.fileName).then(function (res) {
         var resolveResponse = {
           file_type: 'bulk_users',
           file_path: res.data.presigned_url.fields.key,
@@ -7976,7 +7853,7 @@ var uploadFileToS3$1 = function uploadFileToS3(presignedPostData, file) {
 var validateUploadedFile = function validateUploadedFile(fileName) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.post(userBulkImport.validateUploadedFile() + "?file_name=" + fileName).then(function (res) {
+      api$7.post(userBulkImport.validateUploadedFile() + "?file_name=" + fileName).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -7987,7 +7864,7 @@ var validateUploadedFile = function validateUploadedFile(fileName) {
 var _executionJob = function executionJob(jobId, type) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.get(userBulkImport.executionResult() + "?job_id=" + jobId).then(function (res) {
+      api$7.get(userBulkImport.executionResult() + "?job_id=" + jobId).then(function (res) {
         if (!res.data[type]) {
           setTimeout(function () {
             dispatch(_executionJob(jobId, type)).then(function (res) {
@@ -8010,7 +7887,7 @@ var _executionJob = function executionJob(jobId, type) {
 var _downloadExecutionJob = function downloadExecutionJob(auditId, type) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.get(userBulkImport.executionResult() + "?audit_id=" + auditId).then(function (res) {
+      api$7.get(userBulkImport.executionResult() + "?audit_id=" + auditId).then(function (res) {
         if (!res.data[type]) {
           setTimeout(function () {
             dispatch(_downloadExecutionJob(auditId, type)).then(function (res) {
@@ -8032,7 +7909,7 @@ var _downloadExecutionJob = function downloadExecutionJob(auditId, type) {
 var downloadUploadedRecords = function downloadUploadedRecords(type, jobId) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.get(userBulkImport.downloadUploadedRecords() + "?status=" + type + "&job_id=" + jobId).then(function (res) {
+      api$7.get(userBulkImport.downloadUploadedRecords() + "?status=" + type + "&job_id=" + jobId).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -8043,7 +7920,7 @@ var downloadUploadedRecords = function downloadUploadedRecords(type, jobId) {
 var importUploadedRecords = function importUploadedRecords(jobId, canUpdateExistingUsers) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.post(userBulkImport.importRecords() + "?job_id=" + jobId + "&update=" + canUpdateExistingUsers).then(function (res) {
+      api$7.post(userBulkImport.importRecords() + "?job_id=" + jobId + "&update=" + canUpdateExistingUsers).then(function (res) {
         resolve(res);
       })["catch"](function (err) {
         reject(err);
@@ -8054,7 +7931,7 @@ var importUploadedRecords = function importUploadedRecords(jobId, canUpdateExist
 var fetchBulkactionHistory = function fetchBulkactionHistory(url) {
   return function (dispatch) {
     return new Promise(function (resolve, reject) {
-      api$8.get(url).then(function (res) {
+      api$7.get(url).then(function (res) {
         if (res.status === 204) {
           dispatch(setBulkActionHistoryFields({
             count: 0,
@@ -9915,7 +9792,7 @@ function InviteInfoIcon() {
 
 var IUIToastMessageService$9 = services.IUIToastMessageService;
 var env$7 = configs.env,
-  api$9 = configs.api;
+  api$8 = configs.api;
 var UndoButton = function UndoButton(_ref) {
   var onUndo = _ref.onUndo,
     msg = _ref.msg;
@@ -10280,7 +10157,7 @@ var UserList = function UserList(_ref2) {
     setIsDisabledSubmitBtn(true);
     setApproveeStatus(false);
     if (deactivateSingle === true) {
-      api$9.get(userAddEditUrl.transferAppover() + "user_id=" + user.id + "&page=1").then(function (response) {
+      api$8.get(userAddEditUrl.transferAppover() + "user_id=" + user.id + "&page=1").then(function (response) {
         if (response.data["default"].id) {
           setDefaultId(response.data["default"].id);
           setApproverRole({