@sledge-app/react-instant-search 1.0.12 → 1.0.13

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

@@ -39,7 +39,6 @@ const DATASET_ATTRIBUTE_KEY = {
   WISHLIST: {
     SHARE_ID: "data-share-id",
     QUERY_SHARE_ID: "data-query-share-id",
-    CUSTOM_ROUTE_PAGE: "data-custom-route-page",
     RENDER_WISHLIST_WIDGET_ALERT: "data-render-wishlist-widget-alert",
     USE_PROXY_URL: "data-use-proxy-url",
     LIMIT_OPTIONS: "data-limit-options"
@@ -55,6 +54,7 @@ const DATASET_ATTRIBUTE_KEY = {
     ON_AFTER_RENDER_BLOG: "data-on-after-render-blog",
     ON_AFTER_RENDER_ARTICLE: "data-on-after-render-article",
     QUERY_KEYWORD: "data-query-keyword",
+    URL_SEARCH_RESULT: "data-url-search-result",
     RENDER_SUGGESTION_KEYWORD_LIST: "data-render-suggestion-keyword-list",
     RENDER_OTHER_INDEX_LIST: "data-render-other-index-list",
     RENDER_SEARCH_VIEW_MORE_RESULT: "data-render-search-view-more-result",
@@ -116,7 +116,11 @@ const SELECTOR = {
     ELEMENT_PLP_WIDGET: `[${SELECTOR_ATTRIBUTE_KEY}="instant-search-product-filter-widget"]`
   }
 };
-const SEARCH_RESULT_URL = "/pages/search-result";
+const DEFAULT_SEARCH_RESULT_URL = "/apps/sledge/search";
+const DEFAULT_WISHLIST_URL = "/apps/sledge/wishlist";
+const DEFAULT_QUERY_PARAM = {
+  KEYWORD: "q"
+};
 const ELEMENT_ID = {
   PRODUCT_REVIEW: {
     ELEMENT_WIDGET: "product-review-widget"
@@ -843,7 +847,7 @@ const BadgeHeaderMenu = (props) => {
   const { sledgeAnonymId } = React__default.useContext(SledgeContext);
   const { isFirstLoading, isLoading, totalWishlist, isMaximizeTotalWishlist, proxyUrl, dataSettings, useProxyUrl } = props || {};
   const { is_required_login } = ((_a = dataSettings == null ? void 0 : dataSettings.display) == null ? void 0 : _a.global) || {};
-  const defaultColorIcon = "#000000";
+  const defaultColorIcon = "currentColor";
   const [colorIcon, setColorIcon] = React__default.useState(defaultColorIcon);
   const [isRequiredLogin, setIsRequiredLogin] = React__default.useState(false);
   React__default.useEffect(() => {
@@ -1002,7 +1006,7 @@ const BadgeRoot = (props) => {
   const [proxyUrl, setProxyUrl] = React__default.useState((propsData == null ? void 0 : propsData.proxy_url) || "");
   const [dataSettings, setDataSettings] = React__default.useState({});
   const handleGetWishlistInfo = async () => {
-    var _a2, _b, _c;
+    var _a2, _b;
     let response;
     let run = false;
     let valueTotalWishlist;
@@ -1010,7 +1014,7 @@ const BadgeRoot = (props) => {
     response = await getWishlistInfo();
     run = ((_a2 = response == null ? void 0 : response.status) == null ? void 0 : _a2.code) === 200 || false;
     valueTotalWishlist = !((_b = response == null ? void 0 : response.data) == null ? void 0 : _b.total_data) ? 0 : response.data.total_data;
-    valueProxyUrl = ((_c = response == null ? void 0 : response.data) == null ? void 0 : _c.proxy_url) || "";
+    valueProxyUrl = DEFAULT_WISHLIST_URL;
     if (run) {
       setTotalWishlist(valueTotalWishlist);
       setIsMaximizeTotalWishlist(valueTotalWishlist > 99);
@@ -2401,6 +2405,7 @@ const ProductCard = (props) => {
               onClick: () => sourceApp === "instant-search" && productClickTrigger({
                 productId: id
               }),
+              className: "sledge__product-grid-card-image-link",
               children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   Trigger,
@@ -2970,7 +2975,7 @@ const LoadingDots = () => {
 const SearchIconWidget = (props) => {
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
-  const { size = "sm", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props || {};
+  const { size = "sm", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, urlSearchResult, query } = props || {};
   let productCardsComponent = null;
   let suggestionKeywordListsComponent = null;
   let otherIndexListsComponent = null;
@@ -3023,7 +3028,9 @@ const SearchIconWidget = (props) => {
         productCardsComponent,
         suggestionKeywordListsComponent,
         otherIndexListsComponent,
-        searchViewMoreResultComponent
+        searchViewMoreResultComponent,
+        urlSearchResult,
+        query
       });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "sledge-instant-search__icon-widget", onClick: handleShowWidget, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { ...sizing, color: "currentColor" }) });
@@ -3077,7 +3084,7 @@ const SuggestionKeywordLists = ({
         return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "a",
           {
-            href: `${SEARCH_RESULT_URL}?q=${keyword}`,
+            href: `${DEFAULT_SEARCH_RESULT_URL}?q=${keyword}`,
             className: "sledge-instant-search__icon-widget-search-form-result-list-link sledge-instant-search__icon-widget-search-form-result-list-link-suggestion",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(SearchIcon, { width: 12, height: 12, color: "#677487" }),
@@ -3095,7 +3102,9 @@ const SearchViewMoreResult = ({
   keyword,
   isComponentJsVersion = false,
   showPopupComponent,
-  setShowPopupComponent
+  setShowPopupComponent,
+  urlSearchResult = DEFAULT_SEARCH_RESULT_URL,
+  query
 }) => {
   var _a;
   if (Component) {
@@ -3108,7 +3117,8 @@ const SearchViewMoreResult = ({
     const ComponentProps = { keyword, showPopupComponent, setShowPopupComponent, setRenderSearchResult };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(React__default.Fragment, { children: isComponentJsVersion ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: Component({ ...ComponentProps }) } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...ComponentProps }) });
   } else {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${SEARCH_RESULT_URL}?q=${keyword}`, className: "sledge-instant-search__icon-widget-button-more", children: "View More Result" });
+    const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: `${urlSearchResult}?${queryKeyword}=${keyword}`, className: "sledge-instant-search__icon-widget-button-more", children: "View More Result" });
   }
 };
 const Global = {
@@ -3129,6 +3139,7 @@ const SearchIconWidgetPopup = () => {
   const [displaySettings, setDisplaySettings] = React__default.useState({});
   const [suggestionSettings, setSuggestionSettings] = React__default.useState({});
   const [suggestionIndex, setSuggestionIndex] = React__default.useState("");
+  const [urlSearchResult, setUrlSearchResult] = React__default.useState("");
   const [handleFunctions, setHandleFunctions] = React__default.useState({
     onAfterAddToCart: (state) => {
     },
@@ -3142,7 +3153,8 @@ const SearchIconWidgetPopup = () => {
     productCardsComponent: null,
     suggestionKeywordListsComponent: null,
     otherIndexListsComponent: null,
-    searchViewMoreResultComponent: null
+    searchViewMoreResultComponent: null,
+    query: {}
   });
   const searchFieldRef = React__default.useRef(null);
   const previousState = usePrevious({ keyword });
@@ -3245,7 +3257,9 @@ const SearchIconWidgetPopup = () => {
         otherIndexListsComponent = () => {
         },
         searchViewMoreResultComponent = () => {
-        }
+        },
+        urlSearchResult: urlSearchResult2 = "",
+        query = {}
       }) => {
         setShowInfo(true);
         setHandleFunctions({
@@ -3257,8 +3271,10 @@ const SearchIconWidgetPopup = () => {
           productCardsComponent,
           suggestionKeywordListsComponent,
           otherIndexListsComponent,
-          searchViewMoreResultComponent
+          searchViewMoreResultComponent,
+          query
         });
+        setUrlSearchResult(urlSearchResult2);
       };
     }
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
@@ -3439,7 +3455,9 @@ const SearchIconWidgetPopup = () => {
               keyword,
               isComponentJsVersion: handleFunctions.isJsVersion,
               showPopupComponent: showInfo,
-              setShowPopupComponent: setShowInfo
+              setShowPopupComponent: setShowInfo,
+              urlSearchResult,
+              query: handleFunctions.query
             }
           ) }) : null
         ] })
@@ -3465,7 +3483,7 @@ const SearchResultWidget = (props) => {
     data: propsData,
     sledgeSettings
   } = props;
-  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : "q";
+  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
   const { collectionId } = params || {};
   const searchParams = typeof document !== "undefined" ? new URLSearchParams((_a = document == null ? void 0 : document.location) == null ? void 0 : _a.search) : null;
   const [settings] = React__default.useState(typeof localStorage !== "undefined" ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || "{}") : {});
@@ -4003,7 +4021,7 @@ const ResultProduct = (props) => {
     data: propsData,
     settings
   } = props || {};
-  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : "q";
+  const queryKeyword = (query == null ? void 0 : query.keyword) ? query.keyword : DEFAULT_QUERY_PARAM.KEYWORD;
   const { collectionId } = params || {};
   const [isFirstLoading, setIsFirstLoading] = React__default.useState(!propsData);
   const [isLoading, setIsLoading] = React__default.useState(!propsData);
@@ -4829,7 +4847,7 @@ const SearchWidget = (props) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const { isRenderApp, isJsVersion } = React__default.useContext(SledgeContext);
   const { instantSearch: isRenderAppInstantSearch } = isRenderApp || {};
-  const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct } = props;
+  const { width = "400px", children, onAfterAddToCart, onAfterAddWishlist, onAfterRemoveWishlist, onAfterRenderProduct, urlSearchResult, query } = props;
   let productCardsComponent = null;
   let suggestionKeywordListsComponent = null;
   let otherIndexListsComponent = null;
@@ -5076,7 +5094,16 @@ const SearchWidget = (props) => {
           ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-search-form-result-product-disabled", children: "No product were found" })
         ] })
       ] }),
-      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Global.SearchViewMoreResult, { component: searchViewMoreResultComponent, keyword, isComponentJsVersion: isJsVersion }) }) : null
+      (searchResultProduct == null ? void 0 : searchResultProduct.length) || Object.keys(suggestionSettings).length && ((_r = (_q = suggestionSettings[suggestionIndex]) == null ? void 0 : _q.products) == null ? void 0 : _r.active) && ((_u = (_t = (_s = suggestionSettings[suggestionIndex]) == null ? void 0 : _s.products) == null ? void 0 : _t.list) == null ? void 0 : _u.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__widget-button-more-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Global.SearchViewMoreResult,
+        {
+          component: searchViewMoreResultComponent,
+          keyword,
+          isComponentJsVersion: isJsVersion,
+          urlSearchResult,
+          query
+        }
+      ) }) : null
     ] }) }) })
   ] });
 };