@itilite/iui-user-management 1.4.481 → 1.4.483

package/dist/index.css

@@ -480,6 +480,7 @@
 ._2cSoW ._3CdwB {
   width: 48px;
   height: 40px;
+  border-radius: 4px;
 }
 ._2cSoW ._3CdwB img {
   width: 48px;

package/dist/index.js

@@ -4505,6 +4505,79 @@ var ChevronNext = function ChevronNext() {
   }));
 };
 
+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__default.createElement("div", {
+      className: styles$3.newMembershipIcon
+    }, /*#__PURE__*/React__default.createElement("img", {
+      src: url
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$3.saveMembership
+  }, isOtherMembership ? /*#__PURE__*/React__default.createElement("div", {
+    className: styles$3.addNewMembership
+  }, /*#__PURE__*/React__default.createElement("p", null, isEdit ? 'Edit' : 'Add new', " membership"), /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
+    label: "Membership name",
+    required: true
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUISearch, {
+    placeholder: "",
+    value: membershipName,
+    onChangeHandler: function onChangeHandler(e) {
+      return setMembershipName(e.target.value);
+    },
+    iconComponent: null,
+    style: {
+      width: '50%',
+      paddingLeft: 0
+    }
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    className: styles$3.membershipChainInfo
+  }, selectedMembershipChain !== null && selectedMembershipChain !== void 0 && selectedMembershipChain.loyalty_program_image_url ? /*#__PURE__*/React__default.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__default.createElement(FallbackIcon, null), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'none'
+    }
+  }, /*#__PURE__*/React__default.createElement(FallbackIcon, null)), /*#__PURE__*/React__default.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__default.createElement(iuistyles.IUILabel, {
+    label: "Membership number",
+    required: true
+  }), /*#__PURE__*/React__default.createElement(iuistyles.IUISearch, {
+    placeholder: "",
+    value: membershipNumber,
+    onChangeHandler: function onChangeHandler(e) {
+      setMembershipNumber(e.target.value);
+    },
+    iconComponent: null,
+    style: {
+      width: '50%',
+      paddingLeft: 0
+    }
+  }));
+};
+
 var TravelModeIcon = function TravelModeIcon(_ref) {
   var type = _ref.type;
   var FlightIcon = React.memo(function () {
@@ -4561,70 +4634,15 @@ 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__default.createElement("div", {
-      className: styles$3.newMembershipIcon
-    }, /*#__PURE__*/React__default.createElement(TravelModeIcon, {
-      type: type
-    }));
-  };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.saveMembership
-  }, isOtherMembership ? /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.addNewMembership
-  }, /*#__PURE__*/React__default.createElement("p", null, isEdit ? 'Edit' : 'Add new', " membership"), /*#__PURE__*/React__default.createElement(iuistyles.IUILabel, {
-    label: "Membership name",
-    required: true
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUISearch, {
-    placeholder: "",
-    value: membershipName,
-    onChangeHandler: function onChangeHandler(e) {
-      return setMembershipName(e.target.value);
-    },
-    iconComponent: null,
-    style: {
-      width: '50%',
-      paddingLeft: 0
-    }
-  })) : /*#__PURE__*/React__default.createElement("div", {
-    className: styles$3.membershipChainInfo
-  }, selectedMembershipChain !== null && selectedMembershipChain !== void 0 && selectedMembershipChain.loyalty_program_image_url ? /*#__PURE__*/React__default.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__default.createElement(FallbackIcon, null), /*#__PURE__*/React__default.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__default.createElement(iuistyles.IUILabel, {
-    label: "Membership number",
-    required: true
-  }), /*#__PURE__*/React__default.createElement(iuistyles.IUISearch, {
-    placeholder: "",
-    value: membershipNumber,
-    onChangeHandler: function onChangeHandler(e) {
-      var value = e.target.value;
-      if (/^\d*$/.test(value)) {
-        setMembershipNumber(value);
-      }
-    },
-    iconComponent: null,
+var Loader = function Loader() {
+  return /*#__PURE__*/React__default.createElement(iuistyles.IUICircularProgress, {
+    color: "inherit",
+    size: 25,
     style: {
-      width: '50%',
-      paddingLeft: 0
+      color: '#EC5D25'
     }
-  }));
+  });
 };
-
 var RenderList = function RenderList(_ref) {
   var items = _ref.items,
     handleSelect = _ref.handleSelect,
@@ -4634,7 +4652,8 @@ var RenderList = function RenderList(_ref) {
     fetchItems = _ref.fetchItems,
     type = _ref.type,
     _ref$nextPageAvailabl = _ref.nextPageAvailable,
-    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl;
+    nextPageAvailable = _ref$nextPageAvailabl === void 0 ? false : _ref$nextPageAvailabl,
+    page = _ref.page;
   var observerRef = React.useRef(null);
   React.useEffect(function () {
     if (!nextPageAvailable || loading) return;
@@ -4664,7 +4683,7 @@ var RenderList = function RenderList(_ref) {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.list
-  }, items.map(function (item) {
+  }, page === 1 && loading ? null : items.map(function (item) {
     var _item$associated_name;
     return /*#__PURE__*/React__default.createElement("div", {
       onClick: function onClick() {
@@ -4696,13 +4715,13 @@ var RenderList = function RenderList(_ref) {
       className: styles$3.title
     }, item === null || item === void 0 ? void 0 : item.program_name), /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.subtitle
-    }, item.program_name === 'Other' ? 'Add new membership program' : item === null || item === void 0 ? void 0 : (_item$associated_name = item.associated_names) === null || _item$associated_name === void 0 ? void 0 : _item$associated_name.join(' '))));
+    }, (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__default.createElement("div", {
     className: styles$3.loading
-  }, "Loading..."), !loading && nextPageAvailable && /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Loader, null)), !loading && nextPageAvailable && /*#__PURE__*/React__default.createElement("div", {
     ref: observerRef,
     className: styles$3.loading
-  }, /*#__PURE__*/React__default.createElement("div", null, "Loading...")));
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Loader, null))));
 };
 
 var _excluded = ["ind"];
@@ -4816,6 +4835,14 @@ var SavedMemberships = function SavedMemberships(_ref) {
       type: type
     }));
   };
+  var _ref3 = deleteItemData || {},
+    _ref3$name = _ref3.name,
+    name = _ref3$name === void 0 ? '' : _ref3$name,
+    _ref3$program_name = _ref3.program_name,
+    program_name = _ref3$program_name === void 0 ? '' : _ref3$program_name,
+    _ref3$loyalty_program = _ref3.loyalty_program_name,
+    loyalty_program_name = _ref3$loyalty_program === void 0 ? '' : _ref3$loyalty_program;
+  var deleteMembershipName = loyalty_program_name === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name;
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(iuistyles.IUIModal, {
     isOpen: open,
     closeHandler: handleClose,
@@ -4828,39 +4855,51 @@ var SavedMemberships = function SavedMemberships(_ref) {
       borderBottom: '1px solid #E5E7EB'
     },
     isDisabledSubmitBtn: isDeleting,
-    headerText: "Delete " + ((deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.loyalty_program_name) || (deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.name)),
+    headerText: "Delete " + deleteMembershipName,
     width: "640px"
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
       marginTop: 0,
       color: '#6B7280'
     }
-  }, "Are you sure you want to delete", ' ', (deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.loyalty_program_name) || (deleteItemData === null || deleteItemData === void 0 ? void 0 : deleteItemData.name), "? This change is not reversible.")), list.map(function (mem, ind) {
-    var _ref3 = mem || {},
-      _ref3$name = _ref3.name,
-      name = _ref3$name === void 0 ? '' : _ref3$name,
-      _ref3$number = _ref3.number,
-      number = _ref3$number === void 0 ? '' : _ref3$number,
-      _ref3$program_name = _ref3.program_name,
-      program_name = _ref3$program_name === void 0 ? '' : _ref3$program_name,
-      _ref3$loyalty_program = _ref3.loyalty_program_image_url,
-      loyalty_program_image_url = _ref3$loyalty_program === void 0 ? null : _ref3$loyalty_program,
-      _ref3$loyalty_program2 = _ref3.loyalty_program_name,
-      loyalty_program_name = _ref3$loyalty_program2 === void 0 ? '' : _ref3$loyalty_program2;
+  }, "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 = !!name;
     return /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.savedMembership,
       key: ind
     }, /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.iconWrapper
-    }, loyalty_program_image_url ? /*#__PURE__*/React__default.createElement("div", {
-      className: styles$3.icon
-    }, /*#__PURE__*/React__default.createElement("img", {
+    }, loyalty_program_image_url ? /*#__PURE__*/React__default.createElement("img", {
       src: loyalty_program_image_url,
-      alt: name
-    })) : /*#__PURE__*/React__default.createElement(FallbackIcon, {
+      alt: name,
+      className: styles$3.icon,
+      onError: function onError(e) {
+        e.target.style.display = 'none';
+        var fallbackContainer = e.target.nextElementSibling;
+        if (fallbackContainer) fallbackContainer.style.display = 'block';
+        console.log(fallbackContainer, 'xxx4');
+      }
+    }) : /*#__PURE__*/React__default.createElement(FallbackIcon, {
       type: type
-    }), /*#__PURE__*/React__default.createElement("p", null, loyalty_program_name === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name)), /*#__PURE__*/React__default.createElement("div", {
+    }), /*#__PURE__*/React__default.createElement("div", {
+      className: styles$3.newMembershipIcon,
+      style: {
+        display: 'none'
+      }
+    }, /*#__PURE__*/React__default.createElement(FallbackIcon, {
+      type: type
+    })), /*#__PURE__*/React__default.createElement("p", null, loyalty_program_name === 'Other' ? name || loyalty_program_name || program_name : loyalty_program_name || program_name || name)), /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.number
     }, number), /*#__PURE__*/React__default.createElement("div", {
       className: styles$3.actions
@@ -5030,11 +5069,15 @@ var Membership = function Membership(_ref) {
       reset = false;
     }
     try {
+      var pageNo = reset ? 1 : page + 1;
       setLoading(true);
-      var url = 'api/v1/user-management/loyalty-program/' + ("?page=" + page + "&travel_type=" + type);
+      var url = 'api/v1/user-management/loyalty-program/' + ("?page=" + pageNo + "&travel_type=" + type);
       if (query) {
         url += "&search_term=" + query;
       }
+      if (reset) setPage(1);else setPage(function (prevPage) {
+        return prevPage + 1;
+      });
       var _temp = _finallyRethrows(function () {
         return _catch(function () {
           return Promise.resolve(api$7.get(url).then(function (res) {
@@ -5046,9 +5089,6 @@ var Membership = function Membership(_ref) {
             setItems(function (prevItems) {
               return reset ? list : [].concat(prevItems, list);
             });
-            if (reset) setPage(1);else setPage(function (prevPage) {
-              return prevPage + 1;
-            });
           });
         }, function (error) {
           console.error('Error fetching data:', error);
@@ -5090,8 +5130,16 @@ var Membership = function Membership(_ref) {
     };
   }, [searchQuery]);
   React.useEffect(function () {
-    if (isInputFocused) fetchItems(debouncedQuery, true);
+    if (isInputFocused) fetchItems(debouncedQuery, true);else {
+      setSearchQuery('');
+      setItems([]);
+    }
   }, [isInputFocused, debouncedQuery]);
+  React.useEffect(function () {
+    if (!(modalState !== null && modalState !== void 0 && modalState.open)) {
+      setIsInputFocused(false);
+    }
+  }, [modalState]);
   var handleClose = function handleClose() {
     setIsUpdating(false);
     setIsOtherMembership(false);
@@ -5159,6 +5207,7 @@ 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;
+              if (isOtherMembership) updatedResponse.loyalty_program_name = 'Other';
               updateList(response === null || response === void 0 ? void 0 : (_response$data3 = response.data) === null || _response$data3 === void 0 ? void 0 : _response$data3.membership_type, editIndex, updatedResponse);
               IUIToastMessageService$5.notify(editIndex ? "Membership updated." : "New membership added.");
             } else {
@@ -5229,9 +5278,16 @@ var Membership = function Membership(_ref) {
     onFocus: function onFocus() {
       return setIsInputFocused(true);
     },
+    onClick: function onClick() {
+      return setIsInputFocused(true);
+    },
     onChange: function onChange(e) {
-      return setSearchQuery(e.target.value);
-    }
+      if (!isInputFocused) {
+        setIsInputFocused(true);
+      }
+      setSearchQuery(e.target.value);
+    },
+    value: searchQuery
   }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.chevronIcon
   }, /*#__PURE__*/React__default.createElement(ChevronNext, null))), isInputFocused && /*#__PURE__*/React__default.createElement("div", {
@@ -5245,7 +5301,8 @@ var Membership = function Membership(_ref) {
     searchQuery: searchQuery,
     fetchItems: fetchItems,
     type: type,
-    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current
+    nextPageAvailable: nextRef === null || nextRef === void 0 ? void 0 : nextRef.current,
+    page: page
   })))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%'