@usereactify/search 5.0.0-beta.1 → 5.0.0-beta.2

package/dist/src/hooks/reactivesearch/useReactiveReactProp.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveReactProp = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const components_1 = require("../../components");
+const useReactiveReactProp = (currentHandle) => {
+    const { options } = (0, hooks_1.useReactifySearchContext)();
+    const { filters } = (0, hooks_1.useFilters)();
+    return react_1.default.useMemo(() => {
+        var _a;
+        return {
+            and: [
+                "SearchInput",
+                ...components_1.SENSOR_IDS,
+                ...((_a = options.additionalComponentHandles) !== null && _a !== void 0 ? _a : []),
+                ...filters.map((filter) => filter.handle),
+            ].filter((handle) => handle !== currentHandle),
+        };
+    }, [filters, currentHandle, options.additionalComponentHandles]);
+};
+exports.useReactiveReactProp = useReactiveReactProp;

package/dist/src/hooks/reactivesearch/useReactiveResultStackProps.d.ts

@@ -0,0 +1,17 @@
+export declare const useReactiveResultStackProps: (options: {
+    pageSize?: number;
+}) => {
+    size: number;
+    URLParams: boolean;
+    showLoader: boolean;
+    dataField: string;
+    showResultStats: boolean;
+    react: {
+        and: string[];
+    };
+    componentId: string;
+    scrollOnChange: boolean;
+    pagination: boolean;
+    infiniteScroll: boolean;
+    renderNoResults: () => null;
+};

package/dist/src/hooks/reactivesearch/useReactiveResultStackProps.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveResultStackProps = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const useReactiveReactProp_1 = require("./useReactiveReactProp");
+const useReactiveResultStackProps = (options) => {
+    const filterStack = (0, hooks_1.useFilterStack)();
+    const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)();
+    const size = react_1.default.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = options.pageSize) !== null && _a !== void 0 ? _a : filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) !== null && _b !== void 0 ? _b : 20;
+    }, [options.pageSize, filterStack]);
+    return react_1.default.useMemo(() => ({
+        size,
+        URLParams: true,
+        showLoader: false,
+        dataField: "title",
+        showResultStats: false,
+        react: reactiveReactProp,
+        componentId: "page",
+        scrollOnChange: false,
+        pagination: (filterStack === null || filterStack === void 0 ? void 0 : filterStack.paginationType) !== "infinite_scroll",
+        infiniteScroll: (filterStack === null || filterStack === void 0 ? void 0 : filterStack.paginationType) === "infinite_scroll",
+        renderNoResults: () => null, // always use only render, otherwise both are shown
+    }), [filterStack, reactiveReactProp, options.pageSize]);
+};
+exports.useReactiveResultStackProps = useReactiveResultStackProps;

package/dist/src/hooks/useAnalytics.d.ts

@@ -0,0 +1,95 @@
+export declare const useAnalytics: () => {
+    track: (event: TrackEvent) => Promise<import("axios").AxiosResponse<any, any> | undefined>;
+};
+export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.ZeroResultsEvent | TrackEvent.ViewProductEvent | TrackEvent.ClickProductEvent | TrackEvent.ViewPromotionEvent | TrackEvent.ClickPromotionEvent | TrackEvent.PaginationChangeEvent | TrackEvent.SortChangeEvent | TrackEvent.FilterChangeEvent;
+export declare namespace TrackEvent {
+    interface SearchEvent {
+        eventName: "search";
+        payload: SearchEvent.Payload;
+    }
+    namespace SearchEvent {
+        interface Payload {
+            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;
+    }
+    namespace ClickProductEvent {
+        interface Payload {
+            elasticProduct: ElasticProduct;
+        }
+    }
+    interface ViewPromotionEvent {
+        eventName: "viewPromotion";
+        payload: ViewPromotionEvent.Payload;
+    }
+    namespace ViewPromotionEvent {
+        interface Payload {
+            link: string;
+            title: string;
+        }
+    }
+    interface ClickPromotionEvent {
+        eventName: "clickPromotion";
+        payload: ClickPromotionEvent.Payload;
+    }
+    namespace ClickPromotionEvent {
+        interface Payload {
+            link: string;
+            title: string;
+        }
+    }
+    interface PaginationChangeEvent {
+        eventName: "paginationChange";
+        payload: PaginationChangeEvent.Payload;
+    }
+    namespace PaginationChangeEvent {
+        interface Payload {
+            page: number;
+            source: "search" | "collection";
+        }
+    }
+    interface SortChangeEvent {
+        eventName: "sortChange";
+        payload: SortChangeEvent.Payload;
+    }
+    namespace SortChangeEvent {
+        interface Payload {
+            type: string;
+        }
+    }
+    interface FilterChangeEvent {
+        eventName: "filterChange";
+        payload: FilterChangeEvent.Payload;
+    }
+    namespace FilterChangeEvent {
+        interface Payload {
+            name: string;
+            value: string;
+        }
+    }
+    interface ElasticProduct {
+        id: number;
+        title: string;
+    }
+}

package/dist/src/hooks/useAnalytics.js

@@ -0,0 +1,110 @@
+"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 hooks_1 = require("../hooks");
+const useAnalytics = () => {
+    const { options } = (0, hooks_1.useReactifySearchContext)();
+    const url = "https://analytics.search.reactify.app/record/";
+    const track = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!options.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": options.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 "zeroResults":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "viewProduct":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "clickProduct":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "viewPromotion":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "clickPromotion":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "paginationChange":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "sortChange":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+        case "filterChange":
+            events = [
+                {
+                    eventName,
+                    payload: event.payload,
+                },
+            ];
+            break;
+    }
+    return events;
+}

package/dist/src/hooks/useConfig.d.ts

@@ -0,0 +1,4 @@
+import { Config } from "../types/config";
+export declare const useConfig: (shopifyPermanentDomain: string, configId?: string | undefined) => {
+    config: Config | undefined;
+};

package/dist/src/hooks/useConfig.js

@@ -0,0 +1,81 @@
+"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.useConfig = void 0;
+const react_1 = __importDefault(require("react"));
+const debug = require("debug")("reactify-search:useConfig");
+// 5 minute cache expiry
+const CACHE_EXPIRY = 5 * 60 * 1000;
+const useConfig = (shopifyPermanentDomain, configId) => {
+    // synchronously returns cached and non-expired config from session storage
+    const cachedConfig = react_1.default.useMemo(() => {
+        var _a;
+        if (typeof window === "undefined") {
+            return;
+        }
+        debug("checking config cache");
+        // 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("config cache is disabled");
+            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();
+            if (sessionConfigTtl > 0) {
+                debug(`config cache valid, expires in ${(sessionConfigTtl / 1000).toFixed()} seconds`);
+                return sessionConfig.config;
+            }
+            else {
+                debug(`config cache invalid, expired ${((sessionConfigTtl * -1) / 1000).toFixed()} seconds ago`);
+            }
+        }
+        return;
+    }, []);
+    const [config, setConfig] = react_1.default.useState(cachedConfig);
+    react_1.default.useEffect(() => {
+        if (config) {
+            return;
+        }
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            debug("loading fresh config");
+            const searchParams = new URLSearchParams();
+            searchParams.set("shop", shopifyPermanentDomain);
+            if (configId) {
+                searchParams.set("id", configId);
+            }
+            const skipCache = new URLSearchParams(window.location.href.split("?")[1]).get("nocache") !== null;
+            if (skipCache) {
+                searchParams.set("nocache", "true");
+            }
+            const json = yield fetch(`https://config.search.reactify.app/?${searchParams.toString()}`).then((response) => response.json());
+            setConfig(json.body);
+            debug("loaded fresh config");
+            window.sessionStorage.setItem("reactify-search:config", JSON.stringify({
+                expiresAt: new Date().getTime() + CACHE_EXPIRY,
+                noCache: skipCache,
+                config: json.body,
+            }));
+        }))();
+    }, [shopifyPermanentDomain, configId]);
+    react_1.default.useEffect(() => {
+        debug("variable[config]", config);
+    }, [config]);
+    return {
+        config,
+    };
+};
+exports.useConfig = useConfig;

package/dist/src/hooks/useCuration.d.ts

@@ -0,0 +1,2 @@
+import { ConfigCuration } from "../types";
+export declare const useCuration: () => ConfigCuration | undefined;

package/dist/src/hooks/useCuration.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCuration = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const useCuration = () => {
+    const { options, config } = (0, hooks_1.useReactifySearchContext)();
+    const { searchQuery } = (0, hooks_1.useSearch)();
+    return react_1.default.useMemo(() => {
+        const handleOrSearchTerm = options.mode === "collection" ? options.collection ? options.collection.handle : searchQuery : "";
+        const normalisedHandleOrSearchTerm = handleOrSearchTerm
+            .toLowerCase()
+            .trim();
+        const globalCuration = config.curations.find((curation) => curation.id === "global" && curation.type === options.mode);
+        const curation = config.curations.find((curation) => {
+            var _a, _b;
+            const normalisedSearchTerm = (_a = curation.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim();
+            const normalisedCollectionHandle = (_b = curation.collectionHandle) === null || _b === void 0 ? void 0 : _b.toLowerCase().trim();
+            if ("search" === options.mode) {
+                return ("search" === curation.type &&
+                    normalisedHandleOrSearchTerm === normalisedSearchTerm);
+            }
+            if ("collection" === options.mode) {
+                return ("collection" === curation.type &&
+                    normalisedHandleOrSearchTerm === normalisedCollectionHandle);
+            }
+            return false;
+        });
+        const addGlobalBoosting = (curation) => {
+            const curationIsCollection = curation.type === "collection";
+            if (!curationIsCollection) {
+                return curation;
+            }
+            const curationHasRules = !!curation.boosting.groupings.length ||
+                !!curation.boosting.sortings.length;
+            if (curationHasRules || !globalCuration) {
+                return curation;
+            }
+            const curationWithGlobalBoosting = Object.assign(Object.assign({}, curation), { boosting: globalCuration.boosting });
+            return curationWithGlobalBoosting;
+        };
+        return curation
+            ? addGlobalBoosting(curation)
+            : globalCuration
+                ? globalCuration
+                : undefined;
+    }, [config, options.mode === "collection" ? options.collection : undefined, searchQuery]);
+};
+exports.useCuration = useCuration;

package/dist/src/hooks/useFilterCollapsedState.d.ts

@@ -0,0 +1,8 @@
+import { ConfigFilterOption } from "../types/config";
+export declare const useFilterCollapsedState: (filter: ConfigFilterOption) => {
+    collapsed: boolean;
+    shouldRender: boolean;
+    collapsedShow: () => void;
+    collapsedHide: () => void;
+    collapsedToggle: () => void;
+};

package/dist/src/hooks/useFilterCollapsedState.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterCollapsedState = void 0;
+const react_1 = __importDefault(require("react"));
+const useFilterCollapsedState = (filter) => {
+    // @todo use settingsCollapsedDesktop and settingsCollapsedMobile with device detection
+    const [collapsed, setCollapsed] = react_1.default.useState(filter.settingsCollapsedDesktop);
+    // when the filter is shown, it needs to stay rendered or when it's collapsed, the filter context
+    // will be lost which isn't expected behaviour
+    const [shouldRender, setShouldRender] = react_1.default.useState(!collapsed);
+    // enable render when filter is uncollapsed
+    react_1.default.useEffect(() => {
+        if (!collapsed)
+            setShouldRender(true);
+    }, [collapsed]);
+    return {
+        collapsed,
+        shouldRender,
+        collapsedShow: react_1.default.useCallback(() => setCollapsed(true), []),
+        collapsedHide: react_1.default.useCallback(() => setCollapsed(false), []),
+        collapsedToggle: react_1.default.useCallback(() => setCollapsed((collapsed) => !collapsed), []),
+    };
+};
+exports.useFilterCollapsedState = useFilterCollapsedState;

package/dist/src/hooks/useFilterListProps.d.ts

@@ -0,0 +1,12 @@
+import { ConfigFilterOption } from "../types/config";
+import { ReactivesearchFilterProps } from "../types/reactivesearch";
+export declare const useFilterListProps: (filter: ConfigFilterOption, reactivesearchFilterProps: ReactivesearchFilterProps) => ReactivesearchFilterProps & {
+    filter: ConfigFilterOption;
+    options: Array<{
+        doc_count: number;
+        key: string;
+        checked: boolean;
+    }>;
+    hasSelected: boolean;
+    totalSelected: number;
+};

package/dist/src/hooks/useFilterListProps.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterListProps = void 0;
+const react_1 = __importDefault(require("react"));
+// converts reactivesearch props returned in filters to a cleaned up/filtered version
+const useFilterListProps = (filter, reactivesearchFilterProps) => {
+    return react_1.default.useMemo(() => {
+        const { data, value } = reactivesearchFilterProps;
+        // remove excluded options, sort alphabeticaly, map checked boolean
+        const options = data
+            .filter(({ key }) => {
+            var _a, _b;
+            if ((_a = filter.valuesExclude) === null || _a === void 0 ? void 0 : _a.includes(key))
+                return false;
+            if (!!((_b = filter.valuesManual) === null || _b === void 0 ? void 0 : _b.length) && !filter.valuesManual.includes(key))
+                return false;
+            return true;
+        })
+            .sort((a, b) => a.key.localeCompare(b.key))
+            .map((option) => (Object.assign(Object.assign({}, option), { checked: (typeof value === "object" && value[option.key]) ||
+                value === option.key })));
+        // work out if at least one option selected
+        const hasSelected = (typeof value === "object" && 0 < Object.keys(value).length) ||
+            (typeof value !== "object" && !!value);
+        const totalSelected = options.filter((option) => option.checked).length;
+        return Object.assign(Object.assign({}, reactivesearchFilterProps), { filter,
+            options,
+            hasSelected,
+            totalSelected });
+    }, [filter, reactivesearchFilterProps]);
+};
+exports.useFilterListProps = useFilterListProps;

package/dist/src/hooks/useFilterStack.d.ts

@@ -0,0 +1,2 @@
+import { ConfigFilter } from "../types";
+export declare const useFilterStack: () => ConfigFilter | undefined;

package/dist/src/hooks/useFilterStack.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterStack = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const useFilterStack = () => {
+    const { options, config } = (0, hooks_1.useReactifySearchContext)();
+    return react_1.default.useMemo(() => {
+        if (options.mode === "instant-search") {
+            return undefined;
+        }
+        // select filters by type
+        const matchingFilterStacks = config.filters.filter((filter) => filter.type === options.mode);
+        // select filter stack by handle if provided
+        if (options.filterStackHandle) {
+            const matchingFilterStack = matchingFilterStacks.find((filterStack) => options.filterStackHandle === filterStack.handle);
+            if (matchingFilterStack) {
+                return matchingFilterStack;
+            }
+        }
+        // select filter stack by collection if provided
+        if (options.mode === "collection" && options.collection.handle) {
+            const matchingFilterStack = matchingFilterStacks.find((filterStack) => { var _a; return (_a = filterStack.collections) === null || _a === void 0 ? void 0 : _a.includes(options.collection.handle); });
+            if (matchingFilterStack) {
+                return matchingFilterStack;
+            }
+        }
+        // select filter with "default" handle
+        let matchingFilterStack = matchingFilterStacks.find((filterStack) => filterStack.handle === "default");
+        if (matchingFilterStack) {
+            return matchingFilterStack;
+        }
+        // select any filter with "default" handle
+        matchingFilterStack = config.filters.find((filterStack) => filterStack.handle === "default");
+        if (matchingFilterStack) {
+            return matchingFilterStack;
+        }
+        // select any available filter as a last resort
+        matchingFilterStack = config.filters[0];
+        return matchingFilterStack;
+    }, [config, options.mode === "collection" ? options.collection : undefined]);
+};
+exports.useFilterStack = useFilterStack;

package/dist/src/hooks/useFilters.d.ts

@@ -0,0 +1,4 @@
+import { ConfigFilterOption } from "../types";
+export declare const useFilters: () => {
+    filters: Array<ConfigFilterOption>;
+};

package/dist/src/hooks/useFilters.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilters = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../hooks");
+const useFilters = () => {
+    const filterStack = (0, hooks_1.useFilterStack)();
+    return react_1.default.useMemo(() => {
+        if (!filterStack) {
+            return {
+                filters: [],
+            };
+        }
+        return {
+            filters: filterStack.options.sort((a, b) => a.position > b.position ? 1 : -1),
+        };
+    }, [filterStack]);
+};
+exports.useFilters = useFilters;

package/dist/src/hooks/usePagination.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { ReactivesearchPaginationProps } from "../types/reactivesearch";
+export declare const usePagination: (input: ReactivesearchPaginationProps) => {
+    currentPage: number;
+    totalPages: number;
+    pagesToShow: Array<number>;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    actualCurrentPage: number;
+    buildPagePath: (page: number) => string;
+    handleNextPage: (event?: React.SyntheticEvent<Element, Event> | undefined) => void;
+    handlePreviousPage: (event?: React.SyntheticEvent<Element, Event> | undefined) => void;
+    handlePageChange: (pageNumber: number, event?: React.SyntheticEvent<Element, Event> | undefined) => void;
+};