@usereactify/search 3.4.4 → 3.7.0-beta.0

package/dist/hooks/useAnalytics.d.ts

@@ -1,7 +1,7 @@
 export declare const useAnalytics: () => {
     track: (event: TrackEvent) => Promise<import("axios").AxiosResponse<any, any> | undefined>;
 };
-export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.ClickProductEvent;
+export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.ZeroResultsEvent | TrackEvent.ViewProductEvent | TrackEvent.ClickProductEvent;
 export declare namespace TrackEvent {
     interface SearchEvent {
         eventName: "search";
@@ -12,6 +12,24 @@ export declare namespace TrackEvent {
             searchTerm: string;
         }
     }
+    interface ZeroResultsEvent {
+        eventName: "zeroResults";
+        payload: ZeroResultsEvent.Payload;
+    }
+    namespace ZeroResultsEvent {
+        interface Payload {
+            searchTerm: string;
+        }
+    }
+    interface ViewProductEvent {
+        eventName: "viewProduct";
+        payload: ViewProductEvent.Payload;
+    }
+    namespace ViewProductEvent {
+        interface Payload {
+            elasticProduct: ElasticProduct;
+        }
+    }
     interface ClickProductEvent {
         eventName: "clickProduct";
         payload: ClickProductEvent.Payload;

package/dist/hooks/useAnalytics.js

@@ -41,6 +41,14 @@ function getTrackEvents(event) {
                 },
             ];
             break;
+        case "viewProduct":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
         case "clickProduct":
             events = [
                 {
@@ -49,6 +57,14 @@ function getTrackEvents(event) {
                 },
             ];
             break;
+        case "zeroResults":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
     }
     return events;
 }

package/dist/provider.js

@@ -171,6 +171,7 @@ const useCuration = (config, collection, searchQuery) => react_1.default.useMemo
     const normalisedHandleOrSearchTerm = handleOrSearchTerm
         .toLowerCase()
         .trim();
+    const globalCuration = config.curations.find((curation) => curation.id === "global" && curation.type === type);
     const curation = config.curations.find((curation) => {
         var _a, _b;
         const normalisedSearchTerm = (_a = curation.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim();
@@ -183,5 +184,5 @@ const useCuration = (config, collection, searchQuery) => react_1.default.useMemo
                 normalisedHandleOrSearchTerm === normalisedCollectionHandle);
         return false;
     });
-    return curation ? curation : undefined;
+    return curation ? curation : globalCuration ? globalCuration : undefined;
 }, [config, collection, searchQuery]);

package/dist/result/ResultCard.d.ts

@@ -5,7 +5,10 @@ declare type Props = {
     pagePosition: number;
     product: ElasticProduct;
     document: ElasticProduct;
-    render?: (props: Omit<Props, "render"> & ReturnType<typeof useProductPrice>) => JSX.Element;
+    render?: (props: Omit<Props, "render"> & ReturnType<typeof useProductPrice> & {
+        itemRef: (node?: Element | null) => void;
+        handleClick: () => void;
+    }) => JSX.Element;
 };
 export declare const ResultCard: React.FC<Props>;
 export {};

package/dist/result/ResultCard.js

@@ -16,15 +16,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultCard = void 0;
 const react_1 = __importDefault(require("react"));
+const react_intersection_observer_1 = require("react-intersection-observer");
 const hooks_1 = require("../hooks");
 const ResultCard = (_a) => {
     var { render } = _a, props = __rest(_a, ["render"]);
     const { product } = props;
     const productPrice = (0, hooks_1.useProductPrice)(product);
-    if (render)
-        return render(Object.assign(Object.assign({}, props), productPrice));
     const { formattedPrice, formattedCompareAtPrice, onSale } = productPrice;
     const { track } = (0, hooks_1.useAnalytics)();
+    const { ref, inView } = (0, react_intersection_observer_1.useInView)({
+        threshold: 0.5,
+        triggerOnce: true,
+    });
     const handleClick = react_1.default.useCallback(() => {
         track({
             eventName: "clickProduct",
@@ -36,7 +39,24 @@ const ResultCard = (_a) => {
             },
         });
     }, [track, product]);
-    return (react_1.default.createElement("article", null,
+    const handleView = react_1.default.useCallback(() => {
+        track({
+            eventName: "viewProduct",
+            payload: {
+                elasticProduct: {
+                    id: product.id,
+                    title: product.title,
+                },
+            },
+        });
+    }, [track, product]);
+    react_1.default.useEffect(() => {
+        if (inView)
+            handleView();
+    }, [inView]);
+    if (render)
+        return render(Object.assign(Object.assign(Object.assign({}, props), productPrice), { itemRef: ref, handleClick }));
+    return (react_1.default.createElement("article", { ref: ref },
         react_1.default.createElement("a", { onClick: handleClick, href: `/products/${product.handle}` },
             product.image && react_1.default.createElement("img", { src: product.image, width: "100%" }),
             product.title),

package/dist/result/ResultList.js

@@ -11,6 +11,7 @@ const ResultPagination_1 = require("./ResultPagination");
 const ResultCardCallout_1 = require("./ResultCardCallout");
 const ResultLoadMoreButton_1 = require("./ResultLoadMoreButton");
 const ResultPaginationNextPrev_1 = require("./ResultPaginationNextPrev");
+const __1 = require("../");
 const hooks_1 = require("../hooks");
 const elastic_1 = require("../types/elastic");
 const ResultList = (props) => {
@@ -24,7 +25,8 @@ exports.ResultList = ResultList;
 const ResultListInner = (props) => {
     const { gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
     const filterStack = (0, hooks_1.useFilterStack)();
-    const { instantSearch } = (0, hooks_1.useSearch)();
+    const { instantSearch, searchQuery } = (0, hooks_1.useSearch)();
+    const { track } = (0, __1.useAnalytics)();
     const initialSearchHasRun = react_1.default.useMemo(() => "undefined" !==
         typeof reactivesearchResultProps.resultStats.numberOfResults, [reactivesearchResultProps]);
     const styleProp = react_1.default.useMemo(() => ({
@@ -45,6 +47,11 @@ const ResultListInner = (props) => {
         return react_1.default.createElement("div", null, "Loading...");
     }
     if (!reactivesearchResultProps.resultStats.numberOfResults) {
+        if (searchQuery)
+            track({
+                eventName: "zeroResults",
+                payload: { searchTerm: searchQuery },
+            });
         if (renderNoResults)
             return renderNoResults();
         return react_1.default.createElement("div", null, "No results");

package/dist/sensor/SensorSort.js

@@ -12,6 +12,7 @@ const SensorSort = () => {
     const config = (0, hooks_1.useConfig)();
     const curation = (0, hooks_1.useCuration)();
     const collection = (0, hooks_1.useCollection)();
+    const globalCuration = (curation === null || curation === void 0 ? void 0 : curation.id) === "global";
     const { sortOption } = (0, hooks_1.useSort)();
     const searchQuery = react_1.default.useMemo(() => {
         if (typeof window === "undefined")
@@ -21,8 +22,14 @@ const SensorSort = () => {
     }, []);
     const { sort, query } = react_1.default.useMemo(() => {
         return {
-            sort: buildSort({ config, curation, sortOption, collection }),
-            query: buildQuery(curation),
+            sort: buildSort({
+                config,
+                curation,
+                sortOption,
+                collection,
+                globalCuration,
+            }),
+            query: buildQuery(curation, globalCuration),
         };
     }, [config, sortOption, curation]);
     react_1.default.useEffect(() => {
@@ -38,7 +45,7 @@ const SensorSort = () => {
 exports.SensorSort = SensorSort;
 const buildSort = (args) => {
     var _a;
-    const { config, curation, sortOption, collection } = args;
+    const { config, curation, sortOption, collection, globalCuration } = args;
     debug("buildSortQuery.start", {
         config,
         curation,
@@ -63,22 +70,25 @@ const buildSort = (args) => {
     }
     const sorts = [];
     // show pins first
-    sorts.push({
-        "curations.position": {
-            unmapped_type: "long",
-            order: "asc",
-            nested: {
-                path: "curations",
-                filter: {
-                    term: {
-                        [`curations.${"collection" === curation.type ? "collectionHandle" : "searchTerm"}.keyword`]: "collection" === curation.type
-                            ? curation.collectionHandle
-                            : (_a = curation.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase(),
+    if (!globalCuration)
+        sorts.push({
+            "curations.position": {
+                unmapped_type: "long",
+                order: "asc",
+                nested: {
+                    path: "curations",
+                    filter: {
+                        term: {
+                            [`curations.${"collection" === curation.type
+                                ? "collectionHandle"
+                                : "searchTerm"}.keyword`]: "collection" === curation.type
+                                ? curation.collectionHandle
+                                : (_a = curation.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase(),
+                        },
                     },
                 },
             },
-        },
-    });
+        });
     if (0 < curation.boosting.groupings.length) {
         const groupings = curation.boosting.groupings.sort((a, b) => a.position > b.position ? 1 : -1);
         for (const grouping of groupings) {
@@ -137,9 +147,9 @@ function mapCollectionPositionSortClause(collection) {
         },
     ];
 }
-const buildQuery = (curation) => {
+const buildQuery = (curation, globalCuration) => {
     var _a;
-    if (!curation)
+    if (!curation || globalCuration)
         return undefined;
     return {
         bool: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.4.4",
+  "version": "3.7.0-beta.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,14 +32,15 @@
     "ahooks": "2.10.11",
     "axios": "0.26.1",
     "currency.js": "2.0.4",
-    "debug": "4.3.2"
+    "debug": "4.3.2",
+    "react-intersection-observer": "9.1.0"
   },
   "peerDependencies": {
-    "@appbaseio/reactivesearch": "^3.16.1",
+    "@appbaseio/reactivesearch": "^3.14.0",
     "react": "^17.0.0"
   },
   "devDependencies": {
-    "@appbaseio/reactivesearch": "3.24.3",
+    "@appbaseio/reactivesearch": "^3.14.0",
     "@commitlint/cli": "13.2.0",
     "@commitlint/config-conventional": "13.2.0",
     "@storybook/addon-actions": "6.3.10",