@usereactify/search 3.0.0 → 3.3.0

package/README.md

@@ -38,4 +38,9 @@ npm run storybook
 
 # release a version
 npm run release
+
+# release a beta version
+npm run release -- --prerelease beta
+
+npm publish --tag beta
 ```

package/dist/hooks/index.d.ts

@@ -5,6 +5,7 @@ export * from "./useConfig";
 export * from "./useSearch";
 export * from "./useFilters";
 export * from "./useCuration";
+export * from "./useAnalytics";
 export * from "./useCollection";
 export * from "./useFilterStack";
 export * from "./useProductPrice";

package/dist/hooks/index.js

@@ -17,6 +17,7 @@ __exportStar(require("./useConfig"), exports);
 __exportStar(require("./useSearch"), exports);
 __exportStar(require("./useFilters"), exports);
 __exportStar(require("./useCuration"), exports);
+__exportStar(require("./useAnalytics"), exports);
 __exportStar(require("./useCollection"), exports);
 __exportStar(require("./useFilterStack"), exports);
 __exportStar(require("./useProductPrice"), exports);

package/dist/hooks/reactivesearch/useReactiveDataSearchProps.js

@@ -33,8 +33,15 @@ const useReactiveDataSearchProps = (props = {}) => {
             return;
         submitSearch();
     }, [submitSearch]);
+    const { track } = (0, __1.useAnalytics)();
+    const trackQuery = react_1.default.useCallback(() => {
+        if (!searchQuery)
+            return;
+        track({ eventName: "search", payload: { searchTerm: searchQuery } });
+    }, [searchQuery, track]);
     const { run: runDebouncedTriggerQuery, cancel: cancelDebouncedTriggerQuery } = (0, ahooks_1.useDebounceFn)((triggerQuery) => {
         triggerQuery();
+        trackQuery();
     }, {
         wait: debounce !== null && debounce !== void 0 ? debounce : 300,
     });

package/dist/hooks/useAnalytics.d.ts

@@ -0,0 +1,28 @@
+export declare const useAnalytics: () => {
+    track: (event: TrackEvent) => Promise<import("axios").AxiosResponse<any, any> | undefined>;
+};
+export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.ClickProductEvent;
+export declare namespace TrackEvent {
+    interface SearchEvent {
+        eventName: "search";
+        payload: SearchEvent.Payload;
+    }
+    namespace SearchEvent {
+        interface Payload {
+            searchTerm: string;
+        }
+    }
+    interface ClickProductEvent {
+        eventName: "clickProduct";
+        payload: ClickProductEvent.Payload;
+    }
+    namespace ClickProductEvent {
+        interface Payload {
+            elasticProduct: ElasticProduct;
+        }
+    }
+    interface ElasticProduct {
+        id: number;
+        title: string;
+    }
+}

package/dist/hooks/useAnalytics.js

@@ -0,0 +1,54 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnalytics = void 0;
+const axios_1 = __importDefault(require("axios"));
+const provider_1 = require("../provider");
+const useAnalytics = () => {
+    const { shopifyPermanentDomain } = (0, provider_1.useContext)();
+    const url = "https://analytics.search.reactify.app/record/";
+    const track = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!shopifyPermanentDomain) {
+            console.warn(new Error('Unable to send tracking event, missing value for "shopifyPermanentDomain".'));
+            return;
+        }
+        const events = getTrackEvents(event);
+        return axios_1.default.post(url, { events }, { headers: { "X-Reactify-Tenant": shopifyPermanentDomain } });
+    });
+    return { track };
+};
+exports.useAnalytics = useAnalytics;
+function getTrackEvents(event) {
+    const { eventName } = event;
+    let events = [];
+    switch (eventName) {
+        case "search":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "clickProduct":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+    }
+    return events;
+}

package/dist/provider.d.ts

@@ -3,6 +3,7 @@ import type { Config, ConfigSort, ConfigFilter, ConfigCuration } from "./types/c
 declare type Context = {
     index: string;
     config: Config;
+    shopifyPermanentDomain: string;
     sortOption: ConfigSort;
     sortOptions: ConfigSort[];
     searchQuery?: string;
@@ -19,13 +20,12 @@ declare type Context = {
     curation?: ConfigCuration;
     /** Array of additional component IDs managed outside of Reactify Search */
     additionalComponentIds?: string[];
-    /** Enable the new callouts feature */
-    enableCallouts?: boolean;
 };
 declare const Context: React.Context<Context | undefined>;
 declare type Props = {
     index: string;
     config: Config;
+    shopifyPermanentDomain: string;
     filterStackId?: string;
     collection?: Collection;
     noReactiveBase?: boolean;
@@ -34,8 +34,6 @@ declare type Props = {
     theme?: Theme;
     /** Array of additional component IDs managed outside of Reactify Search */
     additionalComponentIds?: string[];
-    /** Enable the new callouts feature */
-    enableCallouts?: boolean;
 };
 export declare const Provider: React.FC<Props>;
 export declare const useContext: () => Context;

package/dist/provider.js

@@ -15,7 +15,7 @@ const defaultCredentials = {
 };
 const Provider = (props) => {
     var _a, _b;
-    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, enableCallouts, additionalComponentIds, } = props;
+    const { index, config, shopifyPermanentDomain, children, collection, instantSearch, filterStackId, noReactiveBase, additionalComponentIds, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
@@ -64,6 +64,7 @@ const Provider = (props) => {
     const contextValue = react_1.default.useMemo(() => ({
         index,
         config,
+        shopifyPermanentDomain,
         collection,
         credentials,
         searchQuery,
@@ -76,7 +77,6 @@ const Provider = (props) => {
         setShowInstantSearchResults,
         theme,
         curation,
-        enableCallouts,
         additionalComponentIds,
         instantSearch: !!instantSearch,
         showInstantSearchResults: !!showInstantSearchResults && !!searchQuery,
@@ -84,6 +84,7 @@ const Provider = (props) => {
         index,
         config,
         curation,
+        shopifyPermanentDomain,
         collection,
         credentials,
         searchQuery,
@@ -92,7 +93,6 @@ const Provider = (props) => {
         sortOptions,
         submitSearch,
         instantSearch,
-        enableCallouts,
         additionalComponentIds,
         showInstantSearchResults,
         theme,

package/dist/result/ResultCard.js

@@ -24,8 +24,20 @@ const ResultCard = (_a) => {
     if (render)
         return render(Object.assign(Object.assign({}, props), productPrice));
     const { formattedPrice, formattedCompareAtPrice, onSale } = productPrice;
+    const { track } = (0, hooks_1.useAnalytics)();
+    const handleClick = react_1.default.useCallback(() => {
+        track({
+            eventName: "clickProduct",
+            payload: {
+                elasticProduct: {
+                    id: product.id,
+                    title: product.title,
+                },
+            },
+        });
+    }, [track, product]);
     return (react_1.default.createElement("article", null,
-        react_1.default.createElement("a", { href: `/products/${product.handle}` },
+        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),
         react_1.default.createElement("span", null, formattedPrice),

package/dist/result/ResultList.d.ts

@@ -5,6 +5,11 @@ import { ResultCardCallout } from "./ResultCardCallout";
 import { ResultLoadMoreButton } from "./ResultLoadMoreButton";
 import { ResultPaginationNextPrev } from "./ResultPaginationNextPrev";
 import { ReactivesearchError, ReactivesearchResultProps } from "../types/reactivesearch";
+import { ElasticCallout, ElasticProduct } from "../types/elastic";
+declare type ResultProps = ReactivesearchResultProps & {
+    callouts: ElasticCallout[];
+    products: ElasticProduct[];
+};
 declare type Props = {
     pageSize?: number;
     gridColumns?: number;
@@ -14,9 +19,9 @@ declare type Props = {
     renderResultCard?: Parameters<typeof ResultCard>[0]["render"];
     renderPagination?: Parameters<typeof ResultPagination>[0]["render"];
     renderResultCardCallout?: Parameters<typeof ResultCardCallout>[0]["render"];
-    renderAfter?: (props: ReactivesearchResultProps) => JSX.Element | null;
-    renderBefore?: (props: ReactivesearchResultProps) => JSX.Element | null;
-    renderResults?: (props: ReactivesearchResultProps) => JSX.Element | null;
+    renderAfter?: (props: ResultProps) => JSX.Element | null;
+    renderBefore?: (props: ResultProps) => JSX.Element | null;
+    renderResults?: (props: ResultProps) => JSX.Element | null;
     renderError?: (props: {
         error: ReactivesearchError;
     }) => JSX.Element | null;

package/dist/result/ResultList.js

@@ -11,7 +11,6 @@ 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 hooks_1 = require("../hooks");
 const elastic_1 = require("../types/elastic");
 const ResultList = (props) => {
@@ -24,18 +23,15 @@ const ResultList = (props) => {
 exports.ResultList = ResultList;
 const ResultListInner = (props) => {
     const { gridColumns, renderError, renderAfter, renderBefore, renderLoading, listClassName, renderResults, renderNoResults, renderResultCard, renderLoadMoreButton, renderResultCardCallout, reactivesearchResultProps, } = props;
-    const curation = (0, hooks_1.useCuration)();
     const filterStack = (0, hooks_1.useFilterStack)();
     const { instantSearch } = (0, hooks_1.useSearch)();
-    const { enableCallouts } = (0, provider_1.useContext)();
     const initialSearchHasRun = react_1.default.useMemo(() => "undefined" !==
         typeof reactivesearchResultProps.resultStats.numberOfResults, [reactivesearchResultProps]);
-    const styleProp = react_1.default.useMemo(() => !!enableCallouts
-        ? {
-            display: "grid",
-            gridTemplateColumns: `repeat(${gridColumns !== null && gridColumns !== void 0 ? gridColumns : 4}, minmax(0, 1fr))`,
-        }
-        : {}, [curation]);
+    const styleProp = react_1.default.useMemo(() => ({
+        display: "grid",
+        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 (reactivesearchResultProps.error) {
         if (renderError)
             return renderError({ error: reactivesearchResultProps.error });
@@ -54,22 +50,22 @@ const ResultListInner = (props) => {
         return react_1.default.createElement("div", null, "No results");
     }
     if (renderResults) {
-        return renderResults(reactivesearchResultProps);
+        return renderResults(resultProps);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        renderBefore && renderBefore(reactivesearchResultProps),
-        react_1.default.createElement("section", { className: listClassName, style: styleProp }, reactivesearchResultProps.data.map((result, key) => {
+        renderBefore && renderBefore(resultProps),
+        react_1.default.createElement("section", { className: listClassName, style: styleProp }, reactivesearchResultProps.data.map((document, key) => {
             // @todo result.type is missing in v1 indexes, this check ensures that they are assumed to be products
-            if (elastic_1.ElasticDocumentType.Product === result.type || !result.type) {
-                return (react_1.default.createElement(ResultCard_1.ResultCard, { key: result._id, product: result, document: result, pagePosition: key + 1, render: renderResultCard }));
+            if (elastic_1.ElasticDocumentType.Product === document.type || !document.type) {
+                return (react_1.default.createElement(ResultCard_1.ResultCard, { key: document._id, product: document, document: document, pagePosition: key + 1, render: renderResultCard }));
             }
-            if (!!enableCallouts && elastic_1.ElasticDocumentType.Callout === result.type) {
-                return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, { key: result._id, document: result, pagePosition: key + 1, callout: result.callout, render: renderResultCardCallout }));
+            if (elastic_1.ElasticDocumentType.Callout === document.type) {
+                return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, { key: document._id, document: document, pagePosition: key + 1, callout: document.callout, render: renderResultCardCallout }));
             }
             return null;
         })),
         !instantSearch && "load_more" === (filterStack === null || filterStack === void 0 ? void 0 : filterStack.paginationType) && (react_1.default.createElement(ResultLoadMoreButton_1.ResultLoadMoreButton, Object.assign({}, reactivesearchResultProps, { render: renderLoadMoreButton }))),
-        renderAfter && renderAfter(reactivesearchResultProps)));
+        renderAfter && renderAfter(resultProps)));
 };
 const ResultPaginationInner = (props) => {
     const { renderPagination, renderPaginationNextPrev } = props;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.0.0",
+  "version": "3.3.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "ahooks": "2.10.11",
+    "axios": "0.26.1",
     "currency.js": "2.0.4",
     "debug": "4.3.2"
   },