@salesgenterp/ui-components 0.4.543 → 0.4.544

package/dist/index.modern.js

@@ -61,7 +61,6 @@ import { FiTruck } from 'react-icons/fi';
 import { FaCheck, FaRegNoteSticky } from 'react-icons/fa6';
 import Image$3 from 'next/image';
 import debounce$1 from 'lodash/debounce';
-import omit$1 from 'lodash/omit';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -16283,9 +16282,100 @@ var WishlistProductCardSkeleton = function WishlistProductCardSkeleton(_ref) {
   }));
 };
 
+var getWishlistData = function getWishlistData(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    _ref$queryParams = _ref.queryParams,
+    queryParams = _ref$queryParams === void 0 ? {} : _ref$queryParams;
+  try {
+    var _erCookieStorage$getI;
+    if (!apiEndPoint || !token) return Promise.resolve([]);
+    var storeId = (erCookieStorage === null || erCookieStorage === void 0 ? void 0 : (_erCookieStorage$getI = erCookieStorage.getItem) === null || _erCookieStorage$getI === void 0 ? void 0 : _erCookieStorage$getI.call(erCookieStorage, 'storeId')) || 2;
+    return Promise.resolve(API({
+      apiEndPoint: apiEndPoint,
+      token: token,
+      url: "/ecommerce/wishlist?storeIds=" + storeId,
+      queryParams: queryParams
+    })).then(function (data) {
+      return data != null ? data : [];
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var removeFromWishlist = function removeFromWishlist(_ref2) {
+  var apiEndPoint = _ref2.apiEndPoint,
+    token = _ref2.token,
+    products = _ref2.products;
+  try {
+    var _erCookieStorage$getI2;
+    if (!apiEndPoint || !token) return Promise.resolve();
+    var storeId = (erCookieStorage === null || erCookieStorage === void 0 ? void 0 : (_erCookieStorage$getI2 = erCookieStorage.getItem) === null || _erCookieStorage$getI2 === void 0 ? void 0 : _erCookieStorage$getI2.call(erCookieStorage, 'storeId')) || 2;
+    var body = (products || []).map(function (product) {
+      return {
+        productId: product === null || product === void 0 ? void 0 : product.productId,
+        storeId: storeId
+      };
+    }).filter(function (item) {
+      return item === null || item === void 0 ? void 0 : item.productId;
+    });
+    if (!(body !== null && body !== void 0 && body.length)) return Promise.resolve();
+    return Promise.resolve(API({
+      apiEndPoint: apiEndPoint,
+      token: token,
+      url: "/ecommerce/wishlist/items",
+      body: body,
+      method: 'delete',
+      successMessage: 'Product removed from wishlist successfully',
+      errorMessage: 'Error in removing product from wishlist'
+    })).then(function () {});
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var moveToCart = function moveToCart(_ref3) {
+  var apiEndPoint = _ref3.apiEndPoint,
+    token = _ref3.token,
+    productId = _ref3.productId;
+  try {
+    if (!apiEndPoint || !token || productId == null) return Promise.resolve();
+    return Promise.resolve(API({
+      apiEndPoint: apiEndPoint,
+      token: token,
+      url: "/ecommerce/wishlist/move-to-cart",
+      method: 'post',
+      body: [productId],
+      successMessage: 'Product moved to cart successfully',
+      errorMessage: 'Error in moving product to cart'
+    })).then(function () {});
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var _templateObject$T, _templateObject2$D, _templateObject3$t, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$c, _templateObject8$a, _templateObject9$7, _templateObject10$5, _templateObject11$4;
-var getProductImage = function getProductImage(imageUrl, imgNotFoundUrl) {
-  return imageUrl && imageUrl !== 'null' ? imageUrl : imgNotFoundUrl != null ? imgNotFoundUrl : '/images/products/imgnotfound.png';
+var EmptyStateText = styled.p(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  color: #4b4b4b;\n  margin: 16px 0;\n"])));
+var ProductCardWrapper = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: #ffffff;\n  border: 1px solid #d3d3d3;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  gap: 10px;\n  cursor: pointer;\n"])));
+var TopBar = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n"])));
+var SearchWrapper = styled(Box)(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 24px;\n    max-width: 400px;\n    width: 100%;\n  }\n"])));
+var TotalItemsText = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  color: #4b4b4b;\n  margin-bottom: 24px;\n  white-space: nowrap;\n"])));
+var DeleteButton = styled.button(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  opacity: 1;\n  pointer-events: auto;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background-color: #ffffff;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n  cursor: pointer;\n  color: #ff0000;\n"])));
+var PriceContainer = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
+var DiscountPriceRow = styled.div(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
+var ProductName$2 = styled.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: #000000;\n  text-align: center;\n  height: 40px;\n  overflow: hidden;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: pre-wrap;\n"])));
+var ProductActionButton = styled(Button)(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])), function (_ref) {
+  var primaryColor = _ref.primaryColor;
+  return primaryColor != null ? primaryColor : '#000000';
+});
+var OutOfStockButton = styled(Button)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  && {\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])));
+
+var getProductImage = function getProductImage(imageUrl, fallbackUrl) {
+  var url = imageUrl || fallbackUrl;
+  return url && url !== 'null' ? url : '/images/products/imgnotfound.png';
+};
+var formatPrice = function formatPrice(price) {
+  var value = Number(price);
+  return Number.isFinite(value) ? value.toFixed(2) : '0.00';
 };
 var DEFAULT_GRID_SPAN = {
   lg: 3,
@@ -16293,7 +16383,6 @@ var DEFAULT_GRID_SPAN = {
   sm: 6,
   xs: 6
 };
-var WISHLIST_ITEM_OMIT_KEYS = ['createdBy', 'insertedTimestamp', 'updatedBy', 'updatedTimestamp'];
 var getStyleOverride = function getStyleOverride(styleOverrides) {
   for (var _len = arguments.length, keys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     keys[_key - 1] = arguments[_key];
@@ -16304,72 +16393,45 @@ var getStyleOverride = function getStyleOverride(styleOverrides) {
   }
   return undefined;
 };
-var WishlistComponent = function WishlistComponent(_ref) {
-  var style = _ref.style,
-    imgNotFoundUrl = _ref.imgNotFoundUrl,
+var normalizeWishlistItems = function normalizeWishlistItems(data) {
+  if (Array.isArray(data)) return data.filter(Boolean);
+  var content = data === null || data === void 0 ? void 0 : data.content;
+  return Array.isArray(content) ? content.filter(Boolean) : [];
+};
+var getWishlistTotal = function getWishlistTotal(data, items) {
+  var _items$length;
+  if (typeof (data === null || data === void 0 ? void 0 : data.totalElements) === 'number') {
+    return data.totalElements;
+  }
+  return (_items$length = items === null || items === void 0 ? void 0 : items.length) != null ? _items$length : 0;
+};
+var WishlistContent = function WishlistContent(_ref) {
+  var data = _ref.data,
+    apiEndPoint = _ref.apiEndPoint,
     token = _ref.token,
-    _ref$isLoading = _ref.isLoading,
-    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    _ref$wishlistData = _ref.wishlistData,
-    wishlistData = _ref$wishlistData === void 0 ? [] : _ref$wishlistData,
-    onRemoveFromWishlist = _ref.onRemoveFromWishlist,
-    onSearch = _ref.onSearch,
-    _ref$span = _ref.span,
-    span = _ref$span === void 0 ? DEFAULT_GRID_SPAN : _ref$span,
+    searchInput = _ref.searchInput,
+    onSearchChange = _ref.onSearchChange,
+    searchQuery = _ref.searchQuery,
+    styleOverrides = _ref.styleOverrides,
+    gridSpan = _ref.gridSpan,
     primaryColor = _ref.primaryColor,
-    apiEndPoint = _ref.apiEndPoint,
-    onAddToCart = _ref.onAddToCart,
+    onMoveToCart = _ref.onMoveToCart,
     onProductCardClick = _ref.onProductCardClick,
-    _ref$doNotShowPrice = _ref.doNotShowPrice,
-    doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice;
-  var _useAllSystemFeatureV = useAllSystemFeatureValues({
-      apiEndPoint: apiEndPoint,
-      token: token
-    }),
-    allowToProcessInvoiceForOutOfStockProductsEcommerce = _useAllSystemFeatureV.allowToProcessInvoiceForOutOfStockProductsEcommerce;
-  var styleOverrides = useMemo(function () {
-    return _extends({}, style || {});
-  }, [style]);
-  var _useState = useState(''),
-    searchInput = _useState[0],
-    setSearchInput = _useState[1];
+    _ref$imgNotFoundUrl = _ref.imgNotFoundUrl,
+    imgNotFoundUrl = _ref$imgNotFoundUrl === void 0 ? '' : _ref$imgNotFoundUrl,
+    setRefreshTrigger = _ref.setRefreshTrigger,
+    allowToProcessInvoiceForOutOfStockProducts = _ref.allowToProcessInvoiceForOutOfStockProducts;
   var items = useMemo(function () {
-    var _wishlistData$content;
-    if (Array.isArray(wishlistData)) return wishlistData;
-    return (_wishlistData$content = wishlistData === null || wishlistData === void 0 ? void 0 : wishlistData.content) != null ? _wishlistData$content : [];
-  }, [wishlistData]);
-  var gridSpan = useMemo(function () {
-    return _extends({}, DEFAULT_GRID_SPAN, span || {});
-  }, [span]);
+    return normalizeWishlistItems(data);
+  }, [data]);
   var totalItems = useMemo(function () {
-    if (typeof (wishlistData === null || wishlistData === void 0 ? void 0 : wishlistData.totalElements) === 'number') {
-      return wishlistData === null || wishlistData === void 0 ? void 0 : wishlistData.totalElements;
-    }
-    return items === null || items === void 0 ? void 0 : items.length;
-  }, [wishlistData, items === null || items === void 0 ? void 0 : items.length]);
-  var debouncedSearch = useMemo(function () {
-    return debounce$1(function (value) {
-      return onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
-    }, 500);
-  }, [onSearch]);
-  useEffect(function () {
-    return function () {
-      debouncedSearch.cancel();
-    };
-  }, [debouncedSearch]);
-  if (!token) {
-    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h1", null, "Wishlist"), /*#__PURE__*/React__default.createElement("p", null, "Please log in to view your wishlist."));
-  }
-  if (!isLoading && items.length === 0) {
-    return /*#__PURE__*/React__default.createElement(EmptyStateText, {
-      style: getStyleOverride(styleOverrides, 'emptyStateText', 'EmptyStateText')
-    }, "no products added to wishlist");
-  }
+    return getWishlistTotal(data, items);
+  }, [data, items]);
+  var isEmptyWishlist = items.length === 0 && !searchQuery;
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
-      marginTop: '1rem',
-      height: '100%',
-      width: '100%'
+      width: '100%',
+      height: '100%'
     }
   }, /*#__PURE__*/React__default.createElement(TopBar, {
     style: getStyleOverride(styleOverrides, 'topBar', 'TopBar')
@@ -16378,12 +16440,7 @@ var WishlistComponent = function WishlistComponent(_ref) {
   }, /*#__PURE__*/React__default.createElement(TextField, {
     placeholder: "Type minimum 3 characters to search...",
     value: searchInput,
-    onChange: function onChange(e) {
-      var value = e.target.value;
-      setSearchInput(value);
-      if (!token || typeof onSearch !== 'function') return;
-      debouncedSearch(value);
-    },
+    onChange: onSearchChange,
     size: "small",
     fullWidth: true,
     sx: {
@@ -16393,71 +16450,169 @@ var WishlistComponent = function WishlistComponent(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(TotalItemsText, {
     style: getStyleOverride(styleOverrides, 'totalItemsText', 'TotalItemsText')
-  }, "Total " + totalItems + " item" + (totalItems === 1 ? '' : 's'))), isLoading ? /*#__PURE__*/React__default.createElement(WishlistProductCardSkeleton, {
-    span: span
-  }) : /*#__PURE__*/React__default.createElement(Grid, {
+  }, "Total " + totalItems + " item" + (totalItems === 1 ? '' : 's'))), isEmptyWishlist || items.length === 0 ? /*#__PURE__*/React__default.createElement(EmptyStateText, {
+    style: getStyleOverride(styleOverrides, 'emptyStateText', 'EmptyStateText')
+  }, "No wishlist items found") : /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     spacing: 2
-  }, items === null || items === void 0 ? void 0 : items.map(function (product) {
+  }, items.map(function (product, index) {
+    var _ref2, _product$id;
     return /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
-      xs: gridSpan.xs,
-      sm: gridSpan.sm,
-      md: gridSpan.md,
-      lg: gridSpan.lg,
-      key: product === null || product === void 0 ? void 0 : product.id
+      xs: gridSpan === null || gridSpan === void 0 ? void 0 : gridSpan.xs,
+      sm: gridSpan === null || gridSpan === void 0 ? void 0 : gridSpan.sm,
+      md: gridSpan === null || gridSpan === void 0 ? void 0 : gridSpan.md,
+      lg: gridSpan === null || gridSpan === void 0 ? void 0 : gridSpan.lg,
+      key: (_ref2 = (_product$id = product === null || product === void 0 ? void 0 : product.id) != null ? _product$id : product === null || product === void 0 ? void 0 : product.productId) != null ? _ref2 : index
     }, /*#__PURE__*/React__default.createElement(ProductCard, {
+      setRefreshTrigger: setRefreshTrigger,
+      apiEndPoint: apiEndPoint,
+      token: token,
       product: product,
       styleOverrides: styleOverrides,
-      onRemoveFromWishlist: onRemoveFromWishlist,
       primaryColor: primaryColor,
+      onMoveToCart: onMoveToCart,
+      onProductCardClick: onProductCardClick,
       imgNotFoundUrl: imgNotFoundUrl,
-      onAddToCart: onAddToCart,
-      allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
-      doNotShowPrice: doNotShowPrice,
-      onProductCardClick: onProductCardClick
+      allowToProcessInvoiceForOutOfStockProducts: allowToProcessInvoiceForOutOfStockProducts
     }));
   })));
 };
-var ProductCardWrapper = styled.div(_templateObject$T || (_templateObject$T = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: #ffffff;\n  border: 1px solid #d3d3d3;\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 10px;\n  gap: 10px;\n  cursor: pointer;\n"])));
-var TopBar = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n"])));
-var SearchWrapper = styled(Box)(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  && {\n    margin-bottom: 24px;\n    max-width: 400px;\n    width: 100%;\n  }\n"])));
-var TotalItemsText = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 500;\n  color: #4b4b4b;\n  margin-bottom: 24px;\n  white-space: nowrap;\n"])));
-var EmptyStateText = styled.p(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  color: #4b4b4b;\n  margin: 16px 0;\n"])));
-var DeleteButton = styled.button(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  opacity: 1;\n  pointer-events: auto;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background-color: #ffffff;\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);\n  cursor: pointer;\n  color: #ff0000;\n"])));
-var PriceContainer = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])));
-var DiscountPriceRow = styled.div(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
-var ProductName$2 = styled.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  font-size: 16px;\n  font-weight: 500;\n  color: #000000;\n  text-align: center;\n  height: 40px;\n  overflow: hidden;\n  width: 100%;\n  text-overflow: ellipsis;\n  white-space: pre-wrap;\n"])));
-var ProductActionButton = styled(Button)(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])), function (_ref2) {
-  var primaryColor = _ref2.primaryColor;
-  return primaryColor != null ? primaryColor : '#000000';
-});
-var OutOfStockButton = styled(Button)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  && {\n    color: #ffffff;\n    border-radius: 10px;\n    font-weight: 500;\n  }\n"])));
-var ProductCard = function ProductCard(_ref3) {
-  var _product$standardPric, _product$retailPrice, _product$standardPric2;
-  var product = _ref3.product,
-    styleOverrides = _ref3.styleOverrides,
-    onRemoveFromWishlist = _ref3.onRemoveFromWishlist,
+var WishlistComponent = function WishlistComponent(_ref3) {
+  var _ref3$style = _ref3.style,
+    style = _ref3$style === void 0 ? {} : _ref3$style,
+    token = _ref3.token,
+    _ref3$span = _ref3.span,
+    span = _ref3$span === void 0 ? DEFAULT_GRID_SPAN : _ref3$span,
     primaryColor = _ref3.primaryColor,
-    imgNotFoundUrl = _ref3.imgNotFoundUrl,
-    allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref3.allowToProcessInvoiceForOutOfStockProductsEcommerce,
-    onAddToCart = _ref3.onAddToCart,
-    doNotShowPrice = _ref3.doNotShowPrice,
-    onProductCardClick = _ref3.onProductCardClick;
-  var router = useRouter();
-  var _useState2 = useState(false),
-    deleteLoading = _useState2[0],
-    setDeleteLoading = _useState2[1];
-  var _useState3 = useState(false),
-    addToCartLoading = _useState3[0],
-    setAddToCartLoading = _useState3[1];
-  var removeFromWishlist = function removeFromWishlist(productId) {
+    apiEndPoint = _ref3.apiEndPoint,
+    onMoveToCart = _ref3.onMoveToCart,
+    onProductCardClick = _ref3.onProductCardClick,
+    _ref3$allowToProcessI = _ref3.allowToProcessInvoiceForOutOfStockProducts,
+    allowToProcessInvoiceForOutOfStockProducts = _ref3$allowToProcessI === void 0 ? false : _ref3$allowToProcessI;
+  var styleOverrides = useMemo(function () {
+    return _extends({}, style || {});
+  }, [style]);
+  var _useState = useState(''),
+    searchInput = _useState[0],
+    setSearchInput = _useState[1];
+  var _useState2 = useState(''),
+    searchQuery = _useState2[0],
+    setSearchQuery = _useState2[1];
+  var _useState3 = useState(0),
+    refreshTrigger = _useState3[0],
+    setRefreshTrigger = _useState3[1];
+  var gridSpan = useMemo(function () {
+    return _extends({}, DEFAULT_GRID_SPAN, span || {});
+  }, [span]);
+  var debouncedSearch = useMemo(function () {
+    return debounce$1(function (value) {
+      var normalizedValue = value != null ? value : '';
+      if (normalizedValue.length === 0 || normalizedValue.length >= 3) {
+        setSearchQuery(normalizedValue);
+      }
+    }, 500);
+  }, []);
+  useEffect(function () {
+    return function () {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  var handleSearchChange = useCallback(function (e) {
+    var _e$target$value, _e$target;
+    var value = (_e$target$value = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) != null ? _e$target$value : '';
+    setSearchInput(value);
+    debouncedSearch(value);
+  }, [debouncedSearch]);
+  var wishlistTrigger = useMemo(function () {
+    return searchQuery + "-" + refreshTrigger;
+  }, [searchQuery, refreshTrigger]);
+  var wishlistAsyncService = useCallback(function () {
+    return getWishlistData({
+      apiEndPoint: apiEndPoint,
+      token: token,
+      queryParams: _extends({
+        page: 0,
+        size: 9999
+      }, searchQuery ? {
+        productName: searchQuery
+      } : {})
+    });
+  }, [apiEndPoint, token, searchQuery]);
+  var wishlistLoadingView = useMemo(function () {
+    return /*#__PURE__*/React__default.createElement(WishlistProductCardSkeleton, {
+      span: span
+    });
+  }, [span]);
+  if (!token) {
+    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("h1", null, "Wishlist"), /*#__PURE__*/React__default.createElement("p", null, "Please log in to view your wishlist."));
+  }
+  if (!apiEndPoint) {
+    return /*#__PURE__*/React__default.createElement(EmptyStateText, null, "Unable to load wishlist. API endpoint is not configured.");
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginTop: '1rem',
+      height: '100%',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
+    asyncService: wishlistAsyncService,
+    triggerChange: wishlistTrigger,
+    loadingView: wishlistLoadingView
+  }, function (data) {
+    return /*#__PURE__*/React__default.createElement(WishlistContent, {
+      data: data,
+      apiEndPoint: apiEndPoint,
+      token: token,
+      searchInput: searchInput,
+      onSearchChange: handleSearchChange,
+      searchQuery: searchQuery,
+      styleOverrides: styleOverrides,
+      gridSpan: gridSpan,
+      primaryColor: primaryColor,
+      onMoveToCart: onMoveToCart,
+      onProductCardClick: onProductCardClick,
+      setRefreshTrigger: setRefreshTrigger,
+      allowToProcessInvoiceForOutOfStockProducts: allowToProcessInvoiceForOutOfStockProducts
+    });
+  }));
+};
+var ProductCard = function ProductCard(_ref4) {
+  var _product$standardPric, _product$retailPrice;
+  var product = _ref4.product,
+    styleOverrides = _ref4.styleOverrides,
+    primaryColor = _ref4.primaryColor,
+    onMoveToCart = _ref4.onMoveToCart,
+    onProductCardClick = _ref4.onProductCardClick,
+    _ref4$imgNotFoundUrl = _ref4.imgNotFoundUrl,
+    imgNotFoundUrl = _ref4$imgNotFoundUrl === void 0 ? '' : _ref4$imgNotFoundUrl,
+    apiEndPoint = _ref4.apiEndPoint,
+    token = _ref4.token,
+    setRefreshTrigger = _ref4.setRefreshTrigger,
+    allowToProcessInvoiceForOutOfStockProducts = _ref4.allowToProcessInvoiceForOutOfStockProducts;
+  var _useState4 = useState(false),
+    deleteLoading = _useState4[0],
+    setDeleteLoading = _useState4[1];
+  var _useState5 = useState(false),
+    moveToCartLoading = _useState5[0],
+    setMoveToCartLoading = _useState5[1];
+  if (!product) return null;
+  var removeItem = function removeItem(item) {
     try {
-      if (typeof onRemoveFromWishlist !== 'function') return Promise.resolve();
+      if (!(item !== null && item !== void 0 && item.productId) && !(item !== null && item !== void 0 && item.id)) return Promise.resolve();
       setDeleteLoading(true);
       var _temp = _finallyRethrows(function () {
         return _catch(function () {
-          return Promise.resolve(onRemoveFromWishlist(productId)).then(function () {});
+          return Promise.resolve(removeFromWishlist({
+            apiEndPoint: apiEndPoint,
+            token: token,
+            products: [item]
+          })).then(function () {
+            setRefreshTrigger === null || setRefreshTrigger === void 0 ? void 0 : setRefreshTrigger(function (prev) {
+              return prev + 1;
+            });
+          });
         }, function () {});
       }, function (_wasThrown, _result) {
         setDeleteLoading(false);
@@ -16469,30 +16624,10 @@ var ProductCard = function ProductCard(_ref3) {
       return Promise.reject(e);
     }
   };
-  var onChangeQuantity = function onChangeQuantity(product) {
-    try {
-      if (!onAddToCart || typeof onAddToCart !== 'function') return Promise.resolve();
-      var _temp2 = _finallyRethrows(function () {
-        return _catch(function () {
-          setAddToCartLoading(true);
-          return Promise.resolve(onAddToCart(omit$1(product, WISHLIST_ITEM_OMIT_KEYS))).then(function () {});
-        }, function () {});
-      }, function (_wasThrown2, _result2) {
-        setAddToCartLoading(false);
-        if (_wasThrown2) throw _result2;
-        return _result2;
-      });
-      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
-    }
-  };
   return /*#__PURE__*/React__default.createElement(ProductCardWrapper, {
     style: getStyleOverride(styleOverrides, 'productCardWrapper', 'ProductCardWrapper'),
     onClick: function onClick() {
-      if (typeof onProductCardClick === 'function') {
-        onProductCardClick(product);
-      }
+      onProductCardClick === null || onProductCardClick === void 0 ? void 0 : onProductCardClick(product);
     }
   }, /*#__PURE__*/React__default.createElement(DeleteButton, {
     type: "button",
@@ -16501,11 +16636,13 @@ var ProductCard = function ProductCard(_ref3) {
     style: getStyleOverride(styleOverrides, 'deleteButton', 'DeleteButton'),
     onClick: function onClick(e) {
       try {
-        var _temp3 = _catch(function () {
-          e.stopPropagation();
-          return Promise.resolve(removeFromWishlist(product === null || product === void 0 ? void 0 : product.productId)).then(function () {});
-        }, function () {});
-        return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+        var _e$stopPropagation;
+        e === null || e === void 0 ? void 0 : (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
+        return Promise.resolve(_catch(function () {
+          var confirm = window.confirm('Are you sure you want to remove this item from wishlist?');
+          if (!confirm) return;
+          return Promise.resolve(removeItem(product)).then(function () {});
+        }, function () {}));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -16522,44 +16659,65 @@ var ProductCard = function ProductCard(_ref3) {
     width: 160,
     height: 160,
     objectFit: "contain"
-  }), !doNotShowPrice ? /*#__PURE__*/React__default.createElement(PriceContainer, {
+  }), /*#__PURE__*/React__default.createElement(PriceContainer, {
     style: getStyleOverride(styleOverrides, 'priceContainer', 'PriceContainer')
-  }, (product === null || product === void 0 ? void 0 : product.standardPrice) > (product === null || product === void 0 ? void 0 : product.retailPrice) ? /*#__PURE__*/React__default.createElement(DiscountPriceRow, {
+  }, ((_product$standardPric = product === null || product === void 0 ? void 0 : product.standardPrice) != null ? _product$standardPric : 0) > ((_product$retailPrice = product === null || product === void 0 ? void 0 : product.retailPrice) != null ? _product$retailPrice : 0) ? /*#__PURE__*/React__default.createElement(DiscountPriceRow, {
     style: getStyleOverride(styleOverrides, 'discountPriceRow', 'DiscountPriceRow')
-  }, /*#__PURE__*/React__default.createElement("del", null, "$" + (product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, "$" + (product === null || product === void 0 ? void 0 : (_product$retailPrice = product.retailPrice) === null || _product$retailPrice === void 0 ? void 0 : _product$retailPrice.toFixed(2))))) : /*#__PURE__*/React__default.createElement("div", null, "$" + (product === null || product === void 0 ? void 0 : (_product$standardPric2 = product.standardPrice) === null || _product$standardPric2 === void 0 ? void 0 : _product$standardPric2.toFixed(2)))) : /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(ProductName$2, {
+  }, /*#__PURE__*/React__default.createElement("del", null, "$" + formatPrice(product === null || product === void 0 ? void 0 : product.standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, "$" + formatPrice(product === null || product === void 0 ? void 0 : product.retailPrice.toFixed(2))))) : /*#__PURE__*/React__default.createElement("div", null, "$" + formatPrice(product === null || product === void 0 ? void 0 : product.standardPrice.toFixed(2)))), /*#__PURE__*/React__default.createElement(ProductName$2, {
     style: getStyleOverride(styleOverrides, 'productName', 'ProductName')
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", null, (product === null || product === void 0 ? void 0 : product.productStock) > 0 || product !== null && product !== void 0 && product.hasChildProduct ? /*#__PURE__*/React__default.createElement(ProductActionButton, {
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("div", null, (product === null || product === void 0 ? void 0 : product.productStock) > 0 || allowToProcessInvoiceForOutOfStockProducts || product !== null && product !== void 0 && product.hasChildProduct ? /*#__PURE__*/React__default.createElement(ProductActionButton, {
     variant: "contained",
     color: "primary",
     primaryColor: primaryColor,
     style: getStyleOverride(styleOverrides, 'productActionButton', 'ProductActionButton'),
     onClick: function onClick(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      if (product !== null && product !== void 0 && product.hasChildProduct) {
-        if (typeof onProductCardClick === 'function') {
-          onProductCardClick(product);
-        }
-      } else {
-        if (onAddToCart) {
-          var _product$quantity;
-          onChangeQuantity(_extends({}, product, {
-            quantity: checkMinMaxQty({
-              quantity: (_product$quantity = product === null || product === void 0 ? void 0 : product.quantity) != null ? _product$quantity : 1,
-              product: product,
-              allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce
-            })
-          }));
-        }
+      try {
+        var _e$stopPropagation2, _e$preventDefault;
+        e === null || e === void 0 ? void 0 : (_e$stopPropagation2 = e.stopPropagation) === null || _e$stopPropagation2 === void 0 ? void 0 : _e$stopPropagation2.call(e);
+        e === null || e === void 0 ? void 0 : (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 ? void 0 : _e$preventDefault.call(e);
+        return Promise.resolve(function () {
+          if (product !== null && product !== void 0 && product.hasChildProduct) {
+            onProductCardClick === null || onProductCardClick === void 0 ? void 0 : onProductCardClick(product);
+          } else return function () {
+            if (typeof onMoveToCart === 'function') {
+              var _product$id2;
+              var productId = (_product$id2 = product === null || product === void 0 ? void 0 : product.id) != null ? _product$id2 : product === null || product === void 0 ? void 0 : product.productId;
+              if (!productId) return;
+              setMoveToCartLoading(true);
+              var _temp2 = _finallyRethrows(function () {
+                return _catch(function () {
+                  return Promise.resolve(moveToCart({
+                    apiEndPoint: apiEndPoint,
+                    token: token,
+                    productId: productId
+                  })).then(function () {
+                    setRefreshTrigger === null || setRefreshTrigger === void 0 ? void 0 : setRefreshTrigger(function (prev) {
+                      return prev + 1;
+                    });
+                    onMoveToCart(product);
+                  });
+                }, function () {});
+              }, function (_wasThrown2, _result3) {
+                setMoveToCartLoading(false);
+                if (_wasThrown2) throw _result3;
+                return _result3;
+              });
+              if (_temp2 && _temp2.then) return _temp2.then(function () {});
+            }
+          }();
+        }());
+      } catch (e) {
+        return Promise.reject(e);
       }
     }
-  }, product !== null && product !== void 0 && product.hasChildProduct ? 'Select Options' : addToCartLoading ? 'Moving...' : 'Move to Cart') : /*#__PURE__*/React__default.createElement(OutOfStockButton, {
+  }, product !== null && product !== void 0 && product.hasChildProduct ? 'Select Options' : moveToCartLoading ? 'Moving...' : 'Move to Cart') : /*#__PURE__*/React__default.createElement(OutOfStockButton, {
     variant: "contained",
     color: "primary",
     disabled: true,
     style: getStyleOverride(styleOverrides, 'outOfStockButton', 'OutOfStockButton'),
     onClick: function onClick(e) {
-      return e.stopPropagation();
+      var _e$stopPropagation3;
+      return e === null || e === void 0 ? void 0 : (_e$stopPropagation3 = e.stopPropagation) === null || _e$stopPropagation3 === void 0 ? void 0 : _e$stopPropagation3.call(e);
     }
   }, "Out Of stock")));
 };