@itilite/iui-user-management 1.4.497 → 1.4.611

package/dist/index.modern.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, memo, useRef, Fragment as Fragment$1 } from
 import { configs, services, utilUrls } from '@itilite/utils';
 import axios from 'axios';
 import AddIcon$1 from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteIcon$1 from '@material-ui/icons/Delete';
 import { useDispatch, useSelector, Provider } from 'react-redux';
 import { combineReducers, createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
@@ -2269,7 +2269,7 @@ var CreditCard = function CreditCard(_ref) {
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleCardDelete
-  }, /*#__PURE__*/React.createElement(DeleteIcon, {
+  }, /*#__PURE__*/React.createElement(DeleteIcon$1, {
     width: "10",
     height: "10"
   }))), /*#__PURE__*/React.createElement("div", {
@@ -4485,7 +4485,7 @@ var ExpandLessIcon = function ExpandLessIcon(props) {
   }));
 };
 
-var styles$3 = {"divider":"_3v2HU","selectSearchBox":"_1bAuu","chevronIcon":"_33J5X","selectWrapper":"_AJzhr","membershipList":"_u-SZq","memberItem":"_2d9GY","membershipDetails":"_194K1","title":"_l3kQ9","subtitle":"_33IR-","saveMembership":"_35aiF","newMembershipIcon":"_2d5UD","loading":"_1quY2","searchInput":"_1oiP4","membershipChainInfo":"_10Fx3","addNewMembership":"_3Y8Dj","savedMembership":"_2cSoW","iconWrapper":"_1Thb8","icon":"_3CdwB","number":"_1eJyq","actions":"_f_N1r"};
+var styles$3 = {"loyaltymodal":"_2LnGt","membershipDeleteModal":"_2LdH8","loyaltyList":"_r0C_N","divider":"_3v2HU","selectSearchBox":"_1bAuu","chevronIcon":"_33J5X","selectWrapper":"_AJzhr","membershipList":"_u-SZq","list":"_2GyN2","memberItem":"_2d9GY","membershipDetails":"_194K1","title":"_l3kQ9","subtitle":"_33IR-","saveMembership":"_35aiF","newMembershipIcon":"_2d5UD","loading":"_1quY2","searchInput":"_1oiP4","membershipChainInfo":"_10Fx3","addNewMembership":"_3Y8Dj","savedMembership":"_2cSoW","iconWrapper":"_1Thb8","iconPar":"_O51oP","icon":"_3CdwB","number":"_1eJyq","actions":"_f_N1r"};
 
 var ChevronNext = function ChevronNext(_ref) {
   var _ref$color = _ref.color,
@@ -4516,11 +4516,11 @@ var MembershipForm = function MembershipForm(_ref) {
   var FallbackIcon = function FallbackIcon() {
     var url = '';
     if (type === 'flight') {
-      url = 'https://i.imghippo.com/files/Tcd6723qtY.png';
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/flightmemfallback.png';
     } else if (type === 'hotel') {
-      url = 'https://i.imghippo.com/files/CWoy5950wU.png';
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/hotelmemfallback.png';
     } else {
-      url = 'https://i.imghippo.com/files/MNQI7762nvk.png';
+      url = 'https://d2n81k4sk1bpk1.cloudfront.net/dashboard/carmemfallback.png';
     }
     return /*#__PURE__*/React.createElement("div", {
       className: styles$3.newMembershipIcon
@@ -4548,11 +4548,14 @@ var MembershipForm = function MembershipForm(_ref) {
     placeholder: placeholder,
     value: membershipName,
     onChangeHandler: function onChangeHandler(e) {
-      return setMembershipName(e.target.value);
+      var inputValue = e.target.value;
+      if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) <= 50) {
+        setMembershipName(inputValue);
+      }
     },
     iconComponent: null,
     style: {
-      width: '50%',
+      width: '100%',
       paddingLeft: 0,
       borderRadius: 6
     }
@@ -4577,11 +4580,14 @@ var MembershipForm = function MembershipForm(_ref) {
     placeholder: "e.g. ABCD1234",
     value: membershipNumber,
     onChangeHandler: function onChangeHandler(e) {
-      setMembershipNumber(e.target.value);
+      var inputValue = e.target.value;
+      if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) <= 50) {
+        setMembershipNumber(inputValue);
+      }
     },
     iconComponent: null,
     style: {
-      width: '50%',
+      width: '100%',
       paddingLeft: 0,
       borderRadius: 6
     }
@@ -4653,7 +4659,7 @@ var Loader = function Loader() {
     }
   });
 };
-var RenderList = function RenderList(_ref) {
+var LoyaltyPrograms = function LoyaltyPrograms(_ref) {
   var items = _ref.items,
     handleSelect = _ref.handleSelect,
     loading = _ref.loading,
@@ -4665,11 +4671,12 @@ 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) {
-        fetchItems(searchQuery);
+        if (nextPageAvailable) fetchItems(searchQuery);
       }
     }, {
       threshold: 0.5
@@ -4682,6 +4689,9 @@ var RenderList = function RenderList(_ref) {
       if (target) {
         observer.unobserve(target);
       }
+      if (delayTimeoutRef.current) {
+        clearTimeout(delayTimeoutRef.current);
+      }
     };
   }, [loading, nextPageAvailable, searchQuery, fetchItems]);
   var FallbackIcon = function FallbackIcon() {
@@ -4695,7 +4705,7 @@ var RenderList = function RenderList(_ref) {
     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 associatedList = (item === null || item === void 0 ? void 0 : item.program_name) === 'Other' ? 'Add new membership program' : type === 'rental_car' ? item === null || item === void 0 ? void 0 : item.program_name : item !== null && item !== void 0 && (_item$associated_name = item.associated_names) !== null && _item$associated_name !== void 0 && _item$associated_name.length ? item === null || item === void 0 ? void 0 : (_item$associated_name2 = item.associated_names) === null || _item$associated_name2 === void 0 ? void 0 : _item$associated_name2.join(', ') : '';
     return /*#__PURE__*/React.createElement("div", {
       onClick: function onClick() {
         handleSelect(item);
@@ -4705,7 +4715,18 @@ var RenderList = function RenderList(_ref) {
       },
       key: item.id,
       className: styles$3.memberItem
-    }, item !== null && item !== void 0 && item.loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
+    }, item !== null && item !== void 0 && item.loyalty_program_image_url ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: "url(" + (item === null || item === void 0 ? void 0 : item.loyalty_program_image_url) + ")",
+        backgroundSize: 600,
+        borderRadius: 6,
+        border: '1px solid #F1F3F5',
+        backgroundPosition: 'top',
+        height: 40,
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
       src: item === null || item === void 0 ? void 0 : item.loyalty_program_image_url,
       alt: item.title,
       onError: function onError(e) {
@@ -4713,7 +4734,7 @@ var RenderList = function RenderList(_ref) {
         var fallbackContainer = e.target.nextElementSibling;
         if (fallbackContainer) fallbackContainer.style.display = 'block';
       }
-    }) : /*#__PURE__*/React.createElement("div", {
+    })) : /*#__PURE__*/React.createElement("div", {
       className: styles$3.newMembershipIcon
     }, /*#__PURE__*/React.createElement(FallbackIcon, null)), /*#__PURE__*/React.createElement("div", {
       className: styles$3.newMembershipIcon,
@@ -4736,6 +4757,43 @@ var RenderList = function RenderList(_ref) {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Loader, null))));
 };
 
+var EditIcon = function EditIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_13010_74651)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.7197 1.72376C11.7029 0.740515 13.2971 0.740516 14.2803 1.72377C15.2636 2.70701 15.2636 4.30118 14.2803 5.28443L5.14645 14.4183C4.77137 14.7934 4.26267 15.0041 3.73223 15.0041H2C1.44772 15.0041 1 14.5564 1 14.0041V12.2719C1 11.7414 1.21071 11.2327 1.58579 10.8576L10.7197 1.72376ZM13.2197 2.78443C12.8222 2.38696 12.1778 2.38696 11.7803 2.78443L11.0607 3.5041L12.5 4.94344L13.2197 4.22376C13.6171 3.8263 13.6171 3.18189 13.2197 2.78443ZM11.4393 6.0041L10 4.56476L2.64645 11.9183C2.55268 12.0121 2.5 12.1393 2.5 12.2719V13.5041H3.73223C3.86484 13.5041 3.99202 13.4514 4.08579 13.3576L11.4393 6.0041Z",
+    fill: "#EC5D25"
+  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_13010_74651"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white",
+    transform: "translate(0 0.00390625)"
+  }))));
+};
+
+var DeleteIcon = function DeleteIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.33333 2.33716C7.14924 2.33716 7 2.4864 7 2.67049V3.33716H9V2.67049C9 2.4864 8.85076 2.33716 8.66667 2.33716H7.33333ZM10 3.33716V2.67049C10 1.93411 9.40305 1.33716 8.66667 1.33716H7.33333C6.59695 1.33716 6 1.93411 6 2.67049V3.33716H2.5C2.22386 3.33716 2 3.56102 2 3.83716C2 4.1133 2.22386 4.33716 2.5 4.33716H3.03122L3.57716 12.7993C3.64506 13.8516 4.51843 14.6705 5.57301 14.6705H10.427C11.4816 14.6705 12.3549 13.8516 12.4228 12.7993L12.9688 4.33716H13.5C13.7761 4.33716 14 4.1133 14 3.83716C14 3.56102 13.7761 3.33716 13.5 3.33716H10ZM11.9667 4.33716H4.0333L4.57509 12.7349C4.60903 13.2611 5.04572 13.6705 5.57301 13.6705H10.427C10.9543 13.6705 11.391 13.2611 11.4249 12.7349L11.9667 4.33716ZM6.5 6.00383C6.77614 6.00383 7 6.22768 7 6.50383V11.5038C7 11.78 6.77614 12.0038 6.5 12.0038C6.22386 12.0038 6 11.78 6 11.5038V6.50383C6 6.22768 6.22386 6.00383 6.5 6.00383ZM9.5 6.00383C9.77614 6.00383 10 6.22768 10 6.50383V11.5038C10 11.78 9.77614 12.0038 9.5 12.0038C9.22386 12.0038 9 11.78 9 11.5038V6.50383C9 6.22768 9.22386 6.00383 9.5 6.00383Z",
+    fill: "#CF2231"
+  }));
+};
+
 var _excluded = ["ind"];
 var IUIToastMessageService$4 = services.IUIToastMessageService;
 var api$6 = configs.api;
@@ -4760,41 +4818,6 @@ var SavedMemberships = function SavedMemberships(_ref) {
       return state.common;
     }),
     userID = _useSelector.id;
-  var DeleteIcon = function DeleteIcon() {
-    return /*#__PURE__*/React.createElement("svg", {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/React.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.33333 2.33716C7.14924 2.33716 7 2.4864 7 2.67049V3.33716H9V2.67049C9 2.4864 8.85076 2.33716 8.66667 2.33716H7.33333ZM10 3.33716V2.67049C10 1.93411 9.40305 1.33716 8.66667 1.33716H7.33333C6.59695 1.33716 6 1.93411 6 2.67049V3.33716H2.5C2.22386 3.33716 2 3.56102 2 3.83716C2 4.1133 2.22386 4.33716 2.5 4.33716H3.03122L3.57716 12.7993C3.64506 13.8516 4.51843 14.6705 5.57301 14.6705H10.427C11.4816 14.6705 12.3549 13.8516 12.4228 12.7993L12.9688 4.33716H13.5C13.7761 4.33716 14 4.1133 14 3.83716C14 3.56102 13.7761 3.33716 13.5 3.33716H10ZM11.9667 4.33716H4.0333L4.57509 12.7349C4.60903 13.2611 5.04572 13.6705 5.57301 13.6705H10.427C10.9543 13.6705 11.391 13.2611 11.4249 12.7349L11.9667 4.33716ZM6.5 6.00383C6.77614 6.00383 7 6.22768 7 6.50383V11.5038C7 11.78 6.77614 12.0038 6.5 12.0038C6.22386 12.0038 6 11.78 6 11.5038V6.50383C6 6.22768 6.22386 6.00383 6.5 6.00383ZM9.5 6.00383C9.77614 6.00383 10 6.22768 10 6.50383V11.5038C10 11.78 9.77614 12.0038 9.5 12.0038C9.22386 12.0038 9 11.78 9 11.5038V6.50383C9 6.22768 9.22386 6.00383 9.5 6.00383Z",
-      fill: "#CF2231"
-    }));
-  };
-  var 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 handleClose = function handleClose() {
     setOpen(false);
     setDeleteItemData(null);
@@ -4868,7 +4891,8 @@ var SavedMemberships = function SavedMemberships(_ref) {
     },
     isDisabledSubmitBtn: isDeleting,
     headerText: "Delete " + deleteMembershipName,
-    width: "640px"
+    width: "640px",
+    modalClass: styles$3.membershipDeleteModal
   }, /*#__PURE__*/React.createElement("p", {
     style: {
       marginTop: 0,
@@ -4886,13 +4910,22 @@ var SavedMemberships = function SavedMemberships(_ref) {
       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 = !!name;
+    var isOther = (loyalty_program_name || program_name) === 'Other';
     return /*#__PURE__*/React.createElement("div", {
       className: styles$3.savedMembership,
       key: ind
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$3.iconWrapper
-    }, loyalty_program_image_url ? /*#__PURE__*/React.createElement("img", {
+    }, 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'
+      }
+    }, /*#__PURE__*/React.createElement("img", {
       src: loyalty_program_image_url,
       alt: name,
       className: styles$3.icon,
@@ -4900,9 +4933,8 @@ var SavedMemberships = function SavedMemberships(_ref) {
         e.target.style.display = 'none';
         var fallbackContainer = e.target.nextElementSibling;
         if (fallbackContainer) fallbackContainer.style.display = 'block';
-        console.log(fallbackContainer, 'xxx4');
       }
-    }) : /*#__PURE__*/React.createElement(FallbackIcon, {
+    })) : /*#__PURE__*/React.createElement(FallbackIcon, {
       type: type
     }), /*#__PURE__*/React.createElement("div", {
       className: styles$3.newMembershipIcon,
@@ -4911,7 +4943,7 @@ var SavedMemberships = function SavedMemberships(_ref) {
       }
     }, /*#__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 || 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
@@ -5001,6 +5033,7 @@ var AddMembershipButton = memo(function (_ref) {
 var IUIToastMessageService$5 = services.IUIToastMessageService;
 var api$7 = configs.api;
 var Membership = function Membership(_ref) {
+  var _clsx;
   var _ref$membershipInfoIn = _ref.membershipInfoInput,
     membershipInfoInput = _ref$membershipInfoIn === void 0 ? [] : _ref$membershipInfoIn,
     _ref$setMembershipInf = _ref.setMembershipInfoInput,
@@ -5018,8 +5051,9 @@ var Membership = function Membership(_ref) {
     savedMemberships = _useState[0],
     setSavedMemberships = _useState[1];
   var groupedMembershipData = savedMemberships.reduce(function (acc, item) {
-    acc[item.membership_type] = acc[item.membership_type] || [];
-    acc[item.membership_type].push(item);
+    var _acc$item$membership_;
+    acc[item === null || item === void 0 ? void 0 : item.membership_type] = (acc === null || acc === void 0 ? void 0 : acc[item === null || item === void 0 ? void 0 : item.membership_type]) || [];
+    acc === null || acc === void 0 ? void 0 : (_acc$item$membership_ = acc[item === null || item === void 0 ? void 0 : item.membership_type]) === null || _acc$item$membership_ === void 0 ? void 0 : _acc$item$membership_.push(item);
     return acc;
   }, {
     flight: [],
@@ -5086,6 +5120,7 @@ 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);
@@ -5108,6 +5143,9 @@ var Membership = function Membership(_ref) {
           setLoading(false);
         });
       }, function (error) {
+        nextRef.current = null;
+        IUIToastMessageService$5.warningNotify('Something went wrong');
+        setIsInputFocused(false);
         setLoading(false);
         console.error('Error fetching data:', error);
       });
@@ -5187,11 +5225,12 @@ var Membership = function Membership(_ref) {
       } else groupedMembershipData[type] = [].concat(groupedMembershipData[type], [item]);
     }
     if (index !== null && !item) {
-      if (index < 0 || index >= groupedMembershipData[type].length) {
+      var _groupedMembershipDat, _groupedMembershipDat2;
+      if (index < 0 || index >= (groupedMembershipData === null || groupedMembershipData === void 0 ? void 0 : (_groupedMembershipDat = groupedMembershipData[type]) === null || _groupedMembershipDat === void 0 ? void 0 : _groupedMembershipDat.length)) {
         console.error("Invalid index: " + index);
         return;
       }
-      groupedMembershipData[type] = [].concat(groupedMembershipData[type].slice(0, index), groupedMembershipData[type].slice(index + 1));
+      groupedMembershipData[type] = [].concat(groupedMembershipData === null || groupedMembershipData === void 0 ? void 0 : (_groupedMembershipDat2 = groupedMembershipData[type]) === null || _groupedMembershipDat2 === void 0 ? void 0 : _groupedMembershipDat2.slice(0, index), groupedMembershipData[type].slice(index + 1));
     }
     var flight = groupedMembershipData.flight,
       hotel = groupedMembershipData.hotel,
@@ -5203,7 +5242,8 @@ var Membership = function Membership(_ref) {
     try {
       var url = "/api/v1/user-management/users/" + userID + "/membership";
       var payload = editIndex ? _extends({}, selectedMembershipChain, {
-        number: membershipNumber
+        number: membershipNumber,
+        name: membershipName || ''
       }) : {
         membership_type: type,
         number: membershipNumber,
@@ -5260,18 +5300,19 @@ var Membership = function Membership(_ref) {
   }, /*#__PURE__*/React.createElement(IUIModal, {
     isOpen: open,
     closeHandler: handleClose,
+    modalClass: clsx(styles$3.loyaltymodal, (_clsx = {}, _clsx[styles$3.loyaltyList] = !selectedMembershipChain, _clsx)),
     cancelLabel: selectedMembershipChain ? 'Cancel' : '',
     submitLabel: selectedMembershipChain ? isUpdating ? 'Saving...' : editIndex ? 'Save' : 'Add' : '',
     submitHandler: handleSubmit,
-    isDisabledSubmitBtn: isUpdating || !membershipNumber,
-    width: "640px",
+    isDisabledSubmitBtn: isUpdating || !membershipNumber || isOtherMembership && !membershipName,
+    width: selectedMembershipChain ? '480px' : '640px',
     headerText: selectedMembershipChain ? '' : title,
     subHanderText: selectedMembershipChain ? '' : subtitle,
     modalBodyStyle: {
-      padding: selectedMembershipChain ? '0px 24px 25px' : '10px 24px 0px',
+      padding: selectedMembershipChain ? '0px 24px 25px' : '24px 24px 0px',
       minHeight: selectedMembershipChain ? 120 : 80,
       borderBottom: selectedMembershipChain && '1px solid #E5E7EB',
-      marginBottom: selectedMembershipChain ? 0 : -40
+      marginBottom: selectedMembershipChain ? 0 : -18
     }
   }, /*#__PURE__*/React.createElement(Fragment$1, null, selectedMembershipChain ? /*#__PURE__*/React.createElement(MembershipForm, {
     selectedMembershipChain: selectedMembershipChain,
@@ -5282,7 +5323,16 @@ var Membership = function Membership(_ref) {
     setMembershipNumber: setMembershipNumber,
     type: type,
     isEdit: !!editIndex
-  }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Loyalty program *"), /*#__PURE__*/React.createElement("div", {
+  }) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#374151',
+      fontWeight: 500
+    }
+  }, "Loyalty program"), ' ', /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#6B7280'
+    }
+  }, "*")), /*#__PURE__*/React.createElement("div", {
     className: styles$3.selectWrapper,
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement("div", {
@@ -5309,7 +5359,7 @@ var Membership = function Membership(_ref) {
     color: "#6B7280"
   }))), isInputFocused && /*#__PURE__*/React.createElement("div", {
     className: styles$3.membershipList
-  }, /*#__PURE__*/React.createElement(RenderList, {
+  }, /*#__PURE__*/React.createElement(LoyaltyPrograms, {
     items: items,
     handleSelect: handleSelect,
     loading: loading,
@@ -5343,7 +5393,6 @@ var Membership = function Membership(_ref) {
 var AdditionalInfo = function AdditionalInfo(_ref) {
   var _clsx;
   var membershipInfoInput = _ref.membershipInfoInput,
-    addMemInfoInput = _ref.addMemInfoInput,
     travelPreferenceInfo = _ref.travelPreferenceInfo,
     _ref$travelPreference = _ref.travelPreferenceOnChange,
     travelPreferenceOnChange = _ref$travelPreference === void 0 ? function () {} : _ref$travelPreference,
@@ -5471,50 +5520,7 @@ var AdditionalInfo = function AdditionalInfo(_ref) {
   }, /*#__PURE__*/React.createElement(IUIGrid, {
     container: true,
     className: styles.formFieldsWrapper
-  }, membershipInfoInput.length === 0 && /*#__PURE__*/React.createElement(IUIBox, {
-    className: styles.emptyFieldContainer
-  }, /*#__PURE__*/React.createElement(IUITypography, {
-    className: styles.emptyFieldDescription
-  }, "No membership details added yet"), /*#__PURE__*/React.createElement(IUIBox, {
-    className: clsx(styles.emptyFieldBtnContainer, styles.rowGap),
-    display: "flex"
-  }, /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add airline",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('flight');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add hotel",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('hotel');
-    }
-  }), /*#__PURE__*/React.createElement(IUIButton, {
-    buttonText: "Add car rental",
-    type: "text",
-    startIcon: /*#__PURE__*/React.createElement(AddIcon, {
-      width: "10",
-      height: "10",
-      color: "#EC5D25"
-    }),
-    className: styles.paddingTop,
-    onClick: function onClick(e) {
-      return addMemInfoInput('rental_car');
-    }
-  }))), /*#__PURE__*/React.createElement(Membership, {
+  }, /*#__PURE__*/React.createElement(Membership, {
     membershipInfoInput: membershipInfoInput,
     setMembershipInfoInput: setMembershipInfoInput,
     isProfile: isProfile
@@ -5994,7 +6000,7 @@ var UserAddEdit = function UserAddEdit(props) {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
       }
     }).then(function (response) {
       return response.json();
@@ -6006,7 +6012,7 @@ var UserAddEdit = function UserAddEdit(props) {
         IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["catch"](function (error) {
-      console.log('errorrr', error);
+      console.log("errorrr", error);
     });
   };
   var fetchLoggedUserCardsDetails = function fetchLoggedUserCardsDetails() {
@@ -6014,7 +6020,7 @@ var UserAddEdit = function UserAddEdit(props) {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
-        authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+        'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
       }
     }).then(function (response) {
       return response.json();
@@ -6026,7 +6032,7 @@ var UserAddEdit = function UserAddEdit(props) {
         IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
       }
     })["catch"](function (error) {
-      console.log('errorrr', error);
+      console.log("errorrr", error);
     });
   };
   useEffect(function () {
@@ -7066,7 +7072,7 @@ var UserAddEdit = function UserAddEdit(props) {
         employeeInfoInput.skip_manager_id = employeeInfoInput.skip_manager.value;
       }
       var cardsPayload = {
-        roles: [cardsRole]
+        "roles": [cardsRole]
       };
       var payload = {
         personalInfoInput: personalInfoInput,
@@ -7252,7 +7258,7 @@ var UserAddEdit = function UserAddEdit(props) {
               body: JSON.stringify(cardsPayload),
               headers: {
                 'Content-Type': 'application/json',
-                authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+                'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
               }
             }).then(function (response) {
               if (response.status === 200) {
@@ -7261,7 +7267,7 @@ var UserAddEdit = function UserAddEdit(props) {
                 IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
               }
             })["catch"](function (error) {
-              console.log('errorrr', error);
+              console.log("errorrr", error);
             })["finally"](function () {
               dispatch(stopLoader());
             });
@@ -7279,14 +7285,14 @@ var UserAddEdit = function UserAddEdit(props) {
                   body: JSON.stringify(cardsPayload),
                   headers: {
                     'Content-Type': 'application/json',
-                    authorization: "Bearer " + IUILocalStorageService$5.getAccessToken()
+                    'authorization': "Bearer " + IUILocalStorageService$5.getAccessToken()
                   }
                 }).then(function (response) {
                   if (response.status !== 200) {
                     IUIToastMessageService$6.warningNotify('Opps, Something went wrong.');
                   }
                 })["catch"](function (error) {
-                  console.log('errorrr', error);
+                  console.log("errorrr", error);
                 });
               }
               (config === null || config === void 0 ? void 0 : (_config$routes4 = config.routes) === null || _config$routes4 === void 0 ? void 0 : (_config$routes4$users = _config$routes4.users) === null || _config$routes4$users === void 0 ? void 0 : (_config$routes4$users2 = _config$routes4$users.list) === null || _config$routes4$users2 === void 0 ? void 0 : _config$routes4$users2.path) && history.push(config.routes.users.list.path);