@usereactify/search 3.4.3 → 3.6.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/hooks/useLiveConfig.d.ts

@@ -1,5 +1,4 @@
 import { Config } from "../types/config";
 export declare const useLiveConfig: (shopifyPermanentDomain: string) => {
-    config: Config;
-    configLoading: boolean;
+    config: Config | undefined;
 };

package/dist/hooks/useLiveConfig.js

@@ -17,58 +17,48 @@ const react_1 = __importDefault(require("react"));
 const debug = require("debug")("reactify-search:useLiveConfig");
 // 5 minute cache expiry
 const CACHE_EXPIRY = 5 * 60 * 1000;
-const useLiveConfig = (shopifyPermanentDomain) => {
-    // synchronously returns cached and non-expired config from session storage
-    const cachedConfig = react_1.default.useMemo(() => {
-        var _a;
-        if (typeof window === "undefined") {
-            return;
-        }
-        // skip checking cache if url search param "nocache" is set
-        const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !==
-            null;
-        if (skipCache) {
-            debug("skipping cache");
-            return;
-        }
-        const sessionConfig = JSON.parse((_a = window.sessionStorage.getItem("reactify-search:config")) !== null && _a !== void 0 ? _a : "null");
-        if (sessionConfig) {
-            const sessionConfigTtl = sessionConfig.expiresAt - Date.now();
-            debug(`found ${sessionConfigTtl > 0 ? "cached" : "expired"} config`);
-            if (sessionConfigTtl > 0) {
-                debug(`config expires in ${(sessionConfigTtl / 1000).toFixed()} seconds`);
-                return sessionConfig.config;
-            }
-        }
+// synchronously returns cached and non-expired config from session storage
+function getCachedConfig() {
+    var _a;
+    if (typeof window === "undefined") {
         return;
-    }, []);
-    const [config, setConfig] = react_1.default.useState(cachedConfig !== null && cachedConfig !== void 0 ? cachedConfig : {
-        fields: [],
-        filters: [],
-        sort: [],
-        curations: [],
-        redirects: [],
-    });
-    const [configLoading, setConfigLoading] = react_1.default.useState(cachedConfig ? false : true);
-    react_1.default.useEffect(() => {
-        // fetch remote config if no cached config is found
-        if (!cachedConfig) {
-            (() => __awaiter(void 0, void 0, void 0, function* () {
-                debug("fetching fresh config");
-                setConfigLoading(true);
-                const json = yield fetch(`https://config.search.reactify.app/?shop=${shopifyPermanentDomain}`).then((response) => response.json());
-                setConfig(json.body);
-                setConfigLoading(false);
-                window.sessionStorage.setItem("reactify-search:config", JSON.stringify({
-                    expiresAt: new Date().getTime() + CACHE_EXPIRY,
-                    config: json.body,
-                }));
-            }))();
+    }
+    // skip checking cache if url search param "nocache" is set
+    const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !==
+        null;
+    if (skipCache) {
+        debug("skipping cache");
+        return;
+    }
+    const sessionConfig = JSON.parse((_a = window.sessionStorage.getItem("reactify-search:config")) !== null && _a !== void 0 ? _a : "null");
+    if (sessionConfig) {
+        const sessionConfigTtl = sessionConfig.expiresAt - Date.now();
+        debug(`found ${sessionConfigTtl > 0 ? "cached" : "expired"} config`);
+        if (sessionConfigTtl > 0) {
+            debug(`config expires in ${(sessionConfigTtl / 1000).toFixed()} seconds`);
+            return sessionConfig.config;
         }
+    }
+    return;
+}
+const useLiveConfig = (shopifyPermanentDomain) => {
+    const [config, setConfig] = react_1.default.useState(getCachedConfig());
+    react_1.default.useEffect(() => {
+        const cachedConfig = getCachedConfig();
+        if (cachedConfig)
+            return;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            debug("fetching fresh config");
+            const json = yield fetch(`https://config.search.reactify.app/?shop=${shopifyPermanentDomain}`).then((response) => response.json());
+            setConfig(json.body);
+            window.sessionStorage.setItem("reactify-search:config", JSON.stringify({
+                expiresAt: new Date().getTime() + CACHE_EXPIRY,
+                config: json.body,
+            }));
+        }))();
     }, [shopifyPermanentDomain]);
     return {
         config,
-        configLoading,
     };
 };
 exports.useLiveConfig = useLiveConfig;

package/dist/provider.d.ts

@@ -3,7 +3,6 @@ import type { Config, ConfigSort, ConfigFilter, ConfigCuration } from "./types/c
 declare type Context = {
     index: string;
     config: Config;
-    configLoading: boolean;
     shopifyPermanentDomain: string;
     sortOption: ConfigSort | undefined;
     sortOptions: ConfigSort[];
@@ -34,8 +33,15 @@ declare type Props = {
     theme?: Theme;
     /** Array of additional component IDs managed outside of Reactify Search */
     additionalComponentIds?: string[];
+    /**
+     * Optional render function to display a component when the config is loading.
+     */
+    renderBooting?: () => JSX.Element | null;
 };
 export declare const Provider: React.FC<Props>;
+export declare const ConfiguredProvider: React.FC<Omit<Props, "renderBooting"> & {
+    config: Config;
+}>;
 export declare const useContext: () => Context;
 export interface Collection {
     id: number;

package/dist/provider.js

@@ -1,9 +1,20 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContext = exports.Provider = void 0;
+exports.useContext = exports.ConfiguredProvider = exports.Provider = void 0;
 const react_1 = __importDefault(require("react"));
 const UtilityAuthenticatedReactiveBase_1 = require("./utility/UtilityAuthenticatedReactiveBase");
 const hooks_1 = require("./hooks");
@@ -14,9 +25,20 @@ const defaultCredentials = {
     password: "password",
     endpoint: "https://api.search.reactify.app",
 };
-const Provider = (props) => {
+const Provider = (_a) => {
+    var { renderBooting } = _a, props = __rest(_a, ["renderBooting"]);
+    const { config } = (0, hooks_1.useLiveConfig)(props.shopifyPermanentDomain);
+    if (!config) {
+        if (renderBooting)
+            return renderBooting();
+        return null;
+    }
+    return react_1.default.createElement(exports.ConfiguredProvider, Object.assign({}, props, { config: config }));
+};
+exports.Provider = Provider;
+const ConfiguredProvider = (props) => {
     var _a, _b;
-    const { index, shopifyPermanentDomain, children, collection, instantSearch, filterStackId, noReactiveBase, additionalComponentIds, } = props;
+    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, shopifyPermanentDomain, additionalComponentIds, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
@@ -34,7 +56,6 @@ const Provider = (props) => {
     react_1.default.useEffect(() => {
         debug("props", props);
     }, [props]);
-    const { config, configLoading } = (0, hooks_1.useLiveConfig)(props.shopifyPermanentDomain);
     // @todo make this hackable with a prop
     // https://gitlab.com/reactifyapps/reactify-search-frontend/-/issues/1
     const searchQueryFromURL = react_1.default.useMemo(() => {
@@ -66,7 +87,6 @@ const Provider = (props) => {
     const contextValue = react_1.default.useMemo(() => ({
         index,
         config,
-        configLoading,
         shopifyPermanentDomain,
         collection,
         credentials,
@@ -109,7 +129,7 @@ const Provider = (props) => {
     return (react_1.default.createElement(Context.Provider, { value: contextValue },
         react_1.default.createElement(UtilityAuthenticatedReactiveBase_1.UtilityAuthenticatedReactiveBase, null, children)));
 };
-exports.Provider = Provider;
+exports.ConfiguredProvider = ConfiguredProvider;
 const useContext = () => react_1.default.useContext(Context);
 exports.useContext = useContext;
 const useSortState = (config, collection) => {
@@ -151,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();
@@ -163,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.d.ts

@@ -14,7 +14,6 @@ declare type Props = {
     pageSize?: number;
     gridColumns?: number;
     listClassName?: string;
-    renderBooting?: () => JSX.Element | null;
     renderLoading?: () => JSX.Element | null;
     renderNoResults?: () => JSX.Element | null;
     renderResultCard?: Parameters<typeof ResultCard>[0]["render"];

package/dist/result/ResultList.js

@@ -11,7 +11,7 @@ const ResultPagination_1 = require("./ResultPagination");
 const ResultCardCallout_1 = require("./ResultCardCallout");
 const ResultLoadMoreButton_1 = require("./ResultLoadMoreButton");
 const ResultPaginationNextPrev_1 = require("./ResultPaginationNextPrev");
-const provider_1 = require("../provider");
+const __1 = require("../");
 const hooks_1 = require("../hooks");
 const elastic_1 = require("../types/elastic");
 const ResultList = (props) => {
@@ -23,10 +23,10 @@ const ResultList = (props) => {
 };
 exports.ResultList = ResultList;
 const ResultListInner = (props) => {
-    const { gridColumns, renderError, renderAfter, renderBefore, renderBooting, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = 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 { configLoading } = (0, provider_1.useContext)();
+    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(() => ({
@@ -34,11 +34,6 @@ const ResultListInner = (props) => {
         gridTemplateColumns: `repeat(${gridColumns !== null && gridColumns !== void 0 ? gridColumns : 4}, minmax(0, 1fr))`,
     }), [gridColumns]);
     const resultProps = react_1.default.useMemo(() => (Object.assign(Object.assign({}, reactivesearchResultProps), { products: reactivesearchResultProps.data.filter((document) => elastic_1.ElasticDocumentType.Product === document.type || !document.type), callouts: reactivesearchResultProps.data.filter((document) => elastic_1.ElasticDocumentType.Callout === document.type) })), [reactivesearchResultProps]);
-    if (configLoading) {
-        if (renderBooting)
-            return renderBooting();
-        return react_1.default.createElement("div", null, "Loading...");
-    }
     if (reactivesearchResultProps.error) {
         if (renderError)
             return renderError({ error: reactivesearchResultProps.error });
@@ -52,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.3",
+  "version": "3.6.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",