@sledge-app/react-instant-search 1.0.88 → 1.0.89

package/dist/sledge-react-instant-search.js

@@ -150,6 +150,17 @@ const SELECTOR = {
     ELEMENT_RELATED_PRODUCTS: `[${SELECTOR_ATTRIBUTE_KEY}="product-recommendation-related-prodcuts"]`
   }
 };
+const CUSTOM_EVENT_NAMES = {
+  AFTER_ADD_WISHLIST: "after-add-wishlist",
+  AFTER_REMOVE_WISHLIST: "after-remove-wishlist",
+  AFTER_ADD_TO_CART: "after-add-to-cart",
+  AFTER_ADD_REVIEW: "after-add-review",
+  AFTER_RENDER_PRODUCT: "after-render-product",
+  AFTER_RENDER_COLLECTION: "after-render-collection",
+  AFTER_RENDER_PAGE: "after-render-page",
+  AFTER_RENDER_BLOG: "after-render-blog",
+  AFTER_RENDER_ARTICLE: "after-render-article"
+};
 const DEFAULT_LIMIT_VALUE = [12, 24, 36, 48, 120];
 const DEFAULT_MAX_WIDTH_COMPONENT = "1180px";
 const DEFAULT_SEARCH_RESULT_URL = "/apps/sledge/search";
@@ -510,6 +521,10 @@ const shopifyFormatMoney = (cents, format) => {
   }
   return formatString.replace(placeholderRegex, value);
 };
+const dispatchCustomEvent = (eventName, detail) => {
+  const customEvent = new CustomEvent(eventName, { bubbles: true, cancelable: true, composed: false, ...detail && { detail } });
+  document.dispatchEvent(customEvent);
+};
 const root = "";
 const Loading = "";
 const ConfirmationPopup = "";
@@ -1671,9 +1686,15 @@ const Trigger = (props) => {
       return;
     }
     let resAddWishlist = await addWishlist(params);
-    const { status, data: response_data } = resAddWishlist || {};
+    const { status, data } = resAddWishlist || {};
     const { code } = status || {};
-    if (code === 200) {
+    const { product } = data || {};
+    let run = code === 200;
+    dispatchCustomEvent(!isWishlist ? CUSTOM_EVENT_NAMES.AFTER_ADD_WISHLIST : CUSTOM_EVENT_NAMES.AFTER_REMOVE_WISHLIST, {
+      state: run ? "success" : "failed",
+      product
+    });
+    if (run) {
       setIsWishlist(!isWishlist);
       if (triggerRenderWishlistBadge)
         triggerRenderWishlistBadge(true);
@@ -3286,6 +3307,9 @@ const ProductGrid = (props) => {
     carouselSourceWidget: "productGrid"
   } || null;
   React__default.useEffect(() => {
+    dispatchCustomEvent(CUSTOM_EVENT_NAMES.AFTER_RENDER_PRODUCT, {
+      state: "success"
+    });
     onAfterRenderProduct && onAfterRenderProduct("success");
     handleSettings();
   }, []);
@@ -3308,6 +3332,9 @@ const InputField = "";
 const CollectionGrid$1 = "";
 const CollectionGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVersion, onAfterRenderCollection }) => {
   React__default.useEffect(() => {
+    dispatchCustomEvent(CUSTOM_EVENT_NAMES.AFTER_RENDER_COLLECTION, {
+      state: "success"
+    });
     onAfterRenderCollection && onAfterRenderCollection("success");
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__collection-grid ${className}`, children: data.map((item, index) => {
@@ -3329,6 +3356,9 @@ const CollectionGrid = ({ className = "", data, cards: CardsComponent, isCompone
 const PageGrid$1 = "";
 const PageGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVersion, onAfterRenderPage }) => {
   React__default.useEffect(() => {
+    dispatchCustomEvent(CUSTOM_EVENT_NAMES.AFTER_RENDER_PAGE, {
+      state: "success"
+    });
     onAfterRenderPage && onAfterRenderPage("success");
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__page-grid ${className}`, children: data.map((item, index) => {
@@ -3350,6 +3380,9 @@ const PageGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVe
 const BlogGrid$1 = "";
 const BlogGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVersion, onAfterRenderBlog }) => {
   React__default.useEffect(() => {
+    dispatchCustomEvent(CUSTOM_EVENT_NAMES.AFTER_RENDER_BLOG, {
+      state: "success"
+    });
     onAfterRenderBlog && onAfterRenderBlog("success");
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__blog-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {
@@ -3377,6 +3410,9 @@ const BlogGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVe
 const ArticleGrid$1 = "";
 const ArticleGrid = ({ className = "", data, cards: CardsComponent, isComponentJsVersion, onAfterRenderArticle }) => {
   React__default.useEffect(() => {
+    dispatchCustomEvent(CUSTOM_EVENT_NAMES.AFTER_RENDER_ARTICLE, {
+      state: "success"
+    });
     onAfterRenderArticle && onAfterRenderArticle("success");
   }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: !(data == null ? void 0 : data.length) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__article-grid ${className}`, children: data == null ? void 0 : data.map((item, index) => {