@usereactify/search 3.10.0 → 3.10.3

package/dist/hooks/useAnalytics.js

@@ -41,7 +41,7 @@ function getTrackEvents(event) {
                 },
             ];
             break;
-        case "viewProduct":
+        case "zeroResults":
             events = [
                 {
                     eventName,
@@ -49,7 +49,7 @@ function getTrackEvents(event) {
                 },
             ];
             break;
-        case "clickProduct":
+        case "viewProduct":
             events = [
                 {
                     eventName,
@@ -57,7 +57,7 @@ function getTrackEvents(event) {
                 },
             ];
             break;
-        case "viewPromotion":
+        case "clickProduct":
             events = [
                 {
                     eventName,
@@ -65,7 +65,7 @@ function getTrackEvents(event) {
                 },
             ];
             break;
-        case "clickPromotion":
+        case "viewPromotion":
             events = [
                 {
                     eventName,
@@ -73,7 +73,7 @@ function getTrackEvents(event) {
                 },
             ];
             break;
-        case "zeroResults":
+        case "clickPromotion":
             events = [
                 {
                     eventName,

package/dist/provider.d.ts

@@ -11,6 +11,7 @@ declare type Context = {
     collection?: Collection;
     instantSearch: boolean;
     credentials: Credentials;
+    onRedirect?: (type: "redirect" | "search", url: string) => void;
     submitSearch: (localSearchQuery?: string) => void;
     setSearchQuery: (searchQuery: string) => void;
     setSortOption: (sortOptionId: string) => void;
@@ -29,6 +30,7 @@ declare type Props = {
     collection?: Collection;
     noReactiveBase?: boolean;
     instantSearch?: boolean;
+    onRedirect?: (type: "redirect" | "search", url: string) => void;
     credentials?: Credentials;
     theme?: Theme;
     /** Array of additional component IDs managed outside of Reactify Search */

package/dist/provider.js

@@ -38,7 +38,7 @@ const Provider = (_a) => {
 exports.Provider = Provider;
 const ConfiguredProvider = (props) => {
     var _a, _b;
-    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, shopifyPermanentDomain, additionalComponentIds, } = props;
+    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, shopifyPermanentDomain, additionalComponentIds, onRedirect, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
@@ -56,16 +56,36 @@ const ConfiguredProvider = (props) => {
     react_1.default.useEffect(() => {
         debug("props", props);
     }, [props]);
-    // @todo make this hackable with a prop
-    // https://gitlab.com/reactifyapps/reactify-search-frontend/-/issues/1
     const searchQueryFromURL = react_1.default.useMemo(() => {
         var _a;
         if (typeof window === "undefined")
             return undefined;
         const urlParams = new URLSearchParams(window.location.search);
         return (_a = urlParams.get("q")) !== null && _a !== void 0 ? _a : undefined;
-    }, []);
+    }, [window.location.search]);
+    const searchSortFromURL = react_1.default.useMemo(() => {
+        var _a;
+        if (typeof window === "undefined")
+            return undefined;
+        const urlParams = new URLSearchParams(window.location.search);
+        return (_a = urlParams.get("sort")) !== null && _a !== void 0 ? _a : undefined;
+    }, [window.location.search]);
     const [searchQuery, setSearchQuery] = react_1.default.useState(searchQueryFromURL);
+    const { sortOption, sortOptions, setSortOption } = useSortState(config, collection);
+    react_1.default.useEffect(() => {
+        if (searchQueryFromURL && searchQuery !== searchQueryFromURL)
+            setSearchQuery(searchQueryFromURL);
+    }, [searchQueryFromURL]);
+    react_1.default.useEffect(() => {
+        if (searchSortFromURL && (sortOption === null || sortOption === void 0 ? void 0 : sortOption.id) !== searchSortFromURL) {
+            setSortOption(searchSortFromURL, true);
+        }
+    }, [searchSortFromURL]);
+    react_1.default.useEffect(() => {
+        if (window.location.search === "" && (sortOption === null || sortOption === void 0 ? void 0 : sortOption.id)) {
+            setSortOption(sortOptions[0].id, true);
+        }
+    }, [window.location.href]);
     const [showInstantSearchResults, setShowInstantSearchResults] = react_1.default.useState(false);
     const submitSearch = react_1.default.useCallback((localSearchQuery) => {
         const actualSearchQuery = localSearchQuery !== null && localSearchQuery !== void 0 ? localSearchQuery : searchQuery;
@@ -73,12 +93,17 @@ const ConfiguredProvider = (props) => {
             return;
         const redirect = config.redirects.find((redirect) => redirect.query.trim().toLowerCase() ===
             actualSearchQuery.trim().toLowerCase());
-        if (redirect)
+        setShowInstantSearchResults(false);
+        if (onRedirect) {
+            onRedirect(redirect ? "redirect" : "search", redirect ? redirect.url : `/search?q=${actualSearchQuery}`);
+        }
+        else if (redirect) {
             window.location.href = redirect.url;
-        else
+        }
+        else {
             window.location.href = `/search?q=${actualSearchQuery}`;
+        }
     }, [searchQuery]);
-    const { sortOption, sortOptions, setSortOption } = useSortState(config, collection);
     // do not attempt to resolve a filter stack if in instantSearch mode
     const filterStack = instantSearch
         ? undefined
@@ -94,6 +119,7 @@ const ConfiguredProvider = (props) => {
         filterStack,
         sortOption,
         sortOptions,
+        onRedirect,
         submitSearch,
         setSortOption,
         setSearchQuery,
@@ -114,6 +140,7 @@ const ConfiguredProvider = (props) => {
         filterStack,
         sortOption,
         sortOptions,
+        onRedirect,
         submitSearch,
         instantSearch,
         additionalComponentIds,
@@ -142,9 +169,16 @@ const useSortState = (config, collection) => {
     }, [config, collection]);
     const [sortOptionState, setSortOptionState] = react_1.default.useState((_a = sortOptions[0]) === null || _a === void 0 ? void 0 : _a.id);
     const sortOption = react_1.default.useMemo(() => sortOptions.find(({ id }) => id === sortOptionState) || sortOptions[0], [sortOptions, sortOptionState]);
-    const setSortOption = react_1.default.useCallback((sortOptionId) => {
+    const setSortOption = react_1.default.useCallback((sortOptionId, ignoreHistoryState = false) => {
         setSortOptionState(sortOptionId);
-    }, []);
+        if (!ignoreHistoryState) {
+            const url = new URL(window.location.href);
+            url.searchParams.has("sort")
+                ? url.searchParams.set("sort", sortOptionId)
+                : url.searchParams.append("sort", sortOptionId);
+            window.history.pushState({}, "", url.toString());
+        }
+    }, [window.location.href]);
     return react_1.default.useMemo(() => ({ sortOptions, sortOption, setSortOption }), [sortOption, sortOptions, setSortOption]);
 };
 // resolve the "filter" in use for this view
@@ -161,6 +195,12 @@ const useFilterStack = (config, collection, filterStackId) => react_1.default.us
         if (filterStack)
             return filterStack;
     }
+    // automatically select filter stack by collection if provided
+    if (collection === null || collection === void 0 ? void 0 : collection.handle) {
+        const filterStack = config.filters.find((filter) => { var _a; return (_a = filter.collections) === null || _a === void 0 ? void 0 : _a.includes(collection.handle); });
+        if (filterStack)
+            return filterStack;
+    }
     const type = !!collection ? "collection" : "search";
     return ((_a = config.filters.find((filter) => type === filter.type)) !== null && _a !== void 0 ? _a : config.filters[0]);
 }, [config, collection]);

package/dist/types/firestore.d.ts

@@ -120,6 +120,7 @@ export interface Filter {
     pageSize: number;
     keywords: string[];
     defaultSort: string;
+    collections: string[];
     type: "search" | "collection";
     paginationType: "pagination" | "load_more" | "next_prev" | "infinite_scroll";
     inventoryVisibility: "show_all" | "hide_products" | "hide_variants" | "hide_all";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.10.0",
+  "version": "3.10.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",