@usereactify/search 3.4.4 → 3.5.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/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.4.4",
+  "version": "3.5.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -32,7 +32,8 @@
     "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",