@sledge-app/react-instant-search 1.0.11 → 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);
@@ -2287,9 +2291,11 @@ const ProductCard = (props) => {
   const { id, title, image, url, vendor = "", currency, handle } = product || {};
   const { id: variant_id = "", admin_graphql_api_id: variant_admin_graphql_api_id = "", title: variant_title = "", price = "", sku = "" } = (variants == null ? void 0 : variants.length) ? variants[0] : {};
   const defaultSelectedVariantId = variant_admin_graphql_api_id ? variant_admin_graphql_api_id : "";
+  const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
   const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
+  const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
   let isLoadingAddToCart = clickedAddToCartId == selectedVariantId;
-  let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !variants[0].inventory_quantity && showOptionOutOfStock : false;
+  let isOutOfStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? !Number(selectedVariantStock) && showOptionOutOfStock : false;
   let component = null;
   if (CardsComponent) {
     const CardsProps = {
@@ -2327,6 +2333,7 @@ const ProductCard = (props) => {
         defaultSelected["data-selected-option2"] = variants[0].option2;
       }
       defaultSelected["data-variant-id"] = variants[0].admin_graphql_api_id;
+      defaultSelected["data-inventory-quantity"] = variants[0].inventory_quantity;
     }, setSelectedOption = function(element, optionName) {
       const optionsButton = element.target.offsetParent.querySelector(`.options-button-${optionName}`).querySelectorAll(`button`);
       const defaultSelectedClassChanger = () => {
@@ -2352,7 +2359,7 @@ const ProductCard = (props) => {
           defaultSelectedClassChanger();
       }
     }, setSelectedVariant = function(element, value, optionIndex) {
-      var _a2;
+      var _a2, _b2;
       const parentCard = element.target.offsetParent;
       const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
       const setOptionAttribute = () => {
@@ -2364,10 +2371,14 @@ const ProductCard = (props) => {
       const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
       const variantId = selectOption.attributes["data-graphql-id"].value;
       const imageId = (_a2 = selectOption.attributes["data-image-id"]) == null ? void 0 : _a2.value;
+      const inventoryQuantity = (_b2 = selectOption.attributes["data-inventory-quantity"]) == null ? void 0 : _b2.value;
       const setOther = () => {
         selectedInput.attributes[`data-variant-id`].value = selectOption.attributes["data-graphql-id"].value;
+        selectedInput.attributes[`data-inventory-quantity`].value = inventoryQuantity;
         if (variantId)
           setSelectedVariantId(variantId);
+        if (inventoryQuantity)
+          setSelectedVariantStock(inventoryQuantity);
         if (imageId)
           parentCard.querySelector(`img.sledge__product-grid-card-image-featured-image`).src = parentCard.querySelector(
             `div.sledge__product-grid-card-variant-images img[id="${imageId}"]`
@@ -2394,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,
@@ -2476,10 +2488,11 @@ const ProductCard = (props) => {
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-variant-swatch", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", ...defaultSelected, className: "sledge__product-grid-card-selected-option" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("select", { className: "variant-picker sledge__product-grid-card-variant-picker", children: variants == null ? void 0 : variants.map((variant) => {
-              const { title: title2, option1, option2, position, id: id2, admin_graphql_api_id, image_id } = variant;
+              const { title: title2, option1, option2, position, id: id2, admin_graphql_api_id, image_id, inventory_quantity } = variant;
               let optionAttributes = {
                 "data-option-1": option1,
                 "data-option-2": option2,
+                "data-inventory-quantity": inventory_quantity,
                 "data-position": position,
                 "data-id": id2,
                 "data-graphql-id": admin_graphql_api_id,
@@ -2962,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;
@@ -3015,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" }) });
@@ -3069,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" }),
@@ -3087,7 +3102,9 @@ const SearchViewMoreResult = ({
   keyword,
   isComponentJsVersion = false,
   showPopupComponent,
-  setShowPopupComponent
+  setShowPopupComponent,
+  urlSearchResult = DEFAULT_SEARCH_RESULT_URL,
+  query
 }) => {
   var _a;
   if (Component) {
@@ -3100,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 = {
@@ -3121,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) => {
     },
@@ -3134,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 });
@@ -3237,7 +3257,9 @@ const SearchIconWidgetPopup = () => {
         otherIndexListsComponent = () => {
         },
         searchViewMoreResultComponent = () => {
-        }
+        },
+        urlSearchResult: urlSearchResult2 = "",
+        query = {}
       }) => {
         setShowInfo(true);
         setHandleFunctions({
@@ -3249,8 +3271,10 @@ const SearchIconWidgetPopup = () => {
           productCardsComponent,
           suggestionKeywordListsComponent,
           otherIndexListsComponent,
-          searchViewMoreResultComponent
+          searchViewMoreResultComponent,
+          query
         });
+        setUrlSearchResult(urlSearchResult2);
       };
     }
     handleSettings(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING) || null);
@@ -3431,7 +3455,9 @@ const SearchIconWidgetPopup = () => {
               keyword,
               isComponentJsVersion: handleFunctions.isJsVersion,
               showPopupComponent: showInfo,
-              setShowPopupComponent: setShowInfo
+              setShowPopupComponent: setShowInfo,
+              urlSearchResult,
+              query: handleFunctions.query
             }
           ) }) : null
         ] })
@@ -3457,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) || "{}") : {});
@@ -3995,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);
@@ -4821,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;
@@ -5068,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
     ] }) }) })
   ] });
 };