@usereactify/search 4.4.1 → 5.0.0-beta.2

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

@@ -0,0 +1,70 @@
+import type { ConfigFilterOption } from "../../types/config";
+/**
+ * For use with @appbaseio/reactivesearch SingleRange and MultiRange components
+ */
+export declare const useReactiveFilterRangeProps: (filter: ConfigFilterOption) => {
+    showFilter: boolean;
+    showRadio: boolean;
+    showCheckbox: boolean;
+    nestedField: string | undefined;
+    customQuery: ((value?: string | string[] | undefined) => {
+        query?: undefined;
+    } | {
+        query: {
+            nested: {
+                path: string;
+                query: {
+                    bool: {
+                        must: ({
+                            match: {
+                                "variants.available": string;
+                            };
+                            terms?: undefined;
+                        } | {
+                            terms: {
+                                [x: string]: string[];
+                            };
+                            match?: undefined;
+                        })[];
+                    };
+                };
+            };
+        };
+    }) | undefined;
+    defaultQuery: (() => {
+        aggs: {
+            reactivesearch_nested: {
+                nested: {
+                    path: string;
+                };
+                aggs: {
+                    reactify_nested_outer: {
+                        filter: {
+                            match: {
+                                "variants.available": string;
+                            };
+                        };
+                        aggs: {
+                            [x: string]: {
+                                terms: {
+                                    field: string;
+                                    size: number;
+                                    order: {
+                                        _count: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    }) | undefined;
+    URLParams: boolean;
+    componentId: string;
+    dataField: string;
+    filterLabel: string;
+    react: {
+        and: string[];
+    };
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveFilterRangeProps = void 0;
+const react_1 = __importDefault(require("react"));
+const useReactiveFilterSharedProps_1 = require("./useReactiveFilterSharedProps");
+const useReactiveReactProp_1 = require("./useReactiveReactProp");
+/**
+ * For use with @appbaseio/reactivesearch SingleRange and MultiRange components
+ */
+const useReactiveFilterRangeProps = (filter) => {
+    const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)(filter.handle);
+    const reactiveFilterSharedProps = (0, useReactiveFilterSharedProps_1.useReactiveFilterSharedProps)(filter);
+    return react_1.default.useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({}, reactiveFilterSharedProps), { showFilter: (_a = filter.settingsShowFilter) !== null && _a !== void 0 ? _a : true, showRadio: false, showCheckbox: false }));
+    }, [filter, reactiveReactProp]);
+};
+exports.useReactiveFilterRangeProps = useReactiveFilterRangeProps;

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

@@ -0,0 +1,67 @@
+import type { ConfigFilterOption } from "../../types/config";
+/**
+ * For use with all @appbaseio/reactivesearch filter components
+ */
+export declare const useReactiveFilterSharedProps: (filter: ConfigFilterOption) => {
+    nestedField: string | undefined;
+    customQuery: ((value?: string | string[] | undefined) => {
+        query?: undefined;
+    } | {
+        query: {
+            nested: {
+                path: string;
+                query: {
+                    bool: {
+                        must: ({
+                            match: {
+                                "variants.available": string;
+                            };
+                            terms?: undefined;
+                        } | {
+                            terms: {
+                                [x: string]: string[];
+                            };
+                            match?: undefined;
+                        })[];
+                    };
+                };
+            };
+        };
+    }) | undefined;
+    defaultQuery: (() => {
+        aggs: {
+            reactivesearch_nested: {
+                nested: {
+                    path: string;
+                };
+                aggs: {
+                    reactify_nested_outer: {
+                        filter: {
+                            match: {
+                                "variants.available": string;
+                            };
+                        };
+                        aggs: {
+                            [x: string]: {
+                                terms: {
+                                    field: string;
+                                    size: number;
+                                    order: {
+                                        _count: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    }) | undefined;
+    URLParams: boolean;
+    componentId: string;
+    dataField: string;
+    filterLabel: string;
+    react: {
+        and: string[];
+    };
+};

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

@@ -0,0 +1,105 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveFilterSharedProps = void 0;
+const react_1 = __importDefault(require("react"));
+const useReactiveReactProp_1 = require("./useReactiveReactProp");
+/**
+ * For use with all @appbaseio/reactivesearch filter components
+ */
+const useReactiveFilterSharedProps = (filter) => {
+    const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)(filter.handle);
+    const nestedField = react_1.default.useMemo(() => {
+        const nestedFields = ["variants"];
+        const topField = filter.field.split(".")[0];
+        if (nestedFields.includes(topField))
+            return topField;
+        return undefined;
+    }, [filter]);
+    // define a custom query for when settingsHideUnavailable is enabled and the target field is inside variants
+    // customQuery defines how this filter affects *other* components like the results component
+    const customQuery = react_1.default.useMemo(() => {
+        if (!filter.settingsHideUnavailable ||
+            !filter.field.startsWith("variants."))
+            return undefined;
+        return (value) => {
+            if (!value)
+                return {};
+            // reactivesearch sometimes returns string, sometimes string[]
+            const valueArray = "string" === typeof value ? [value] : value;
+            if (0 === valueArray.length)
+                return {};
+            return {
+                query: {
+                    nested: {
+                        path: "variants",
+                        query: {
+                            bool: {
+                                must: [
+                                    {
+                                        match: {
+                                            "variants.available": "true",
+                                        },
+                                    },
+                                    {
+                                        terms: {
+                                            [filter.field]: valueArray,
+                                        },
+                                    },
+                                ],
+                            },
+                        },
+                    },
+                },
+            };
+        };
+    }, [filter]);
+    // define a default query for when settingsHideUnavailable is enabled and the target field is inside variants
+    // defaultQuery defines how this filter affects itself i.e. the options displayed
+    const defaultQuery = react_1.default.useMemo(() => {
+        if (!filter.settingsHideUnavailable ||
+            !filter.field.startsWith("variants."))
+            return undefined;
+        // override the aggregation query to filter the results by the variants.available attribute
+        return () => {
+            return {
+                aggs: {
+                    reactivesearch_nested: {
+                        nested: { path: "variants" },
+                        aggs: {
+                            reactify_nested_outer: {
+                                filter: {
+                                    match: {
+                                        "variants.available": "true",
+                                    },
+                                },
+                                aggs: {
+                                    [filter.field]: {
+                                        terms: {
+                                            field: filter.field,
+                                            size: 100,
+                                            order: { _count: "desc" },
+                                        },
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            };
+        };
+    }, [filter]);
+    return react_1.default.useMemo(() => ({
+        nestedField,
+        customQuery,
+        defaultQuery,
+        URLParams: true,
+        componentId: filter.handle,
+        dataField: filter.field,
+        filterLabel: filter.name,
+        react: reactiveReactProp,
+    }), [filter, reactiveReactProp]);
+};
+exports.useReactiveFilterSharedProps = useReactiveFilterSharedProps;

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

@@ -0,0 +1,68 @@
+import type { ConfigFilterOption } from "../../types/config";
+/**
+ * For use with @appbaseio/reactivesearch RangeSlider component
+ */
+export declare const useReactiveFilterSliderProps: (filter: ConfigFilterOption) => {
+    showFilter: boolean;
+    nestedField: string | undefined;
+    customQuery: ((value?: string | string[] | undefined) => {
+        query?: undefined;
+    } | {
+        query: {
+            nested: {
+                path: string;
+                query: {
+                    bool: {
+                        must: ({
+                            match: {
+                                "variants.available": string;
+                            };
+                            terms?: undefined;
+                        } | {
+                            terms: {
+                                [x: string]: string[];
+                            };
+                            match?: undefined;
+                        })[];
+                    };
+                };
+            };
+        };
+    }) | undefined;
+    defaultQuery: (() => {
+        aggs: {
+            reactivesearch_nested: {
+                nested: {
+                    path: string;
+                };
+                aggs: {
+                    reactify_nested_outer: {
+                        filter: {
+                            match: {
+                                "variants.available": string;
+                            };
+                        };
+                        aggs: {
+                            [x: string]: {
+                                terms: {
+                                    field: string;
+                                    size: number;
+                                    order: {
+                                        _count: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    }) | undefined;
+    URLParams: boolean;
+    componentId: string;
+    dataField: string;
+    filterLabel: string;
+    react: {
+        and: string[];
+    };
+};

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveFilterSliderProps = void 0;
+const react_1 = __importDefault(require("react"));
+const useReactiveFilterSharedProps_1 = require("./useReactiveFilterSharedProps");
+const useReactiveReactProp_1 = require("./useReactiveReactProp");
+/**
+ * For use with @appbaseio/reactivesearch RangeSlider component
+ */
+const useReactiveFilterSliderProps = (filter) => {
+    const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)(filter.handle);
+    const reactiveFilterSharedProps = (0, useReactiveFilterSharedProps_1.useReactiveFilterSharedProps)(filter);
+    return react_1.default.useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({}, reactiveFilterSharedProps), { showFilter: (_a = filter.settingsShowFilter) !== null && _a !== void 0 ? _a : true }));
+    }, [filter, reactiveReactProp]);
+};
+exports.useReactiveFilterSliderProps = useReactiveFilterSliderProps;

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

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

package/dist/src/hooks/reactivesearch/{useReactiveResultListProps.d.ts → useReactiveResultStackProps.d.ts}

@@ -1,7 +1,6 @@
-declare type Props = {
+export declare const useReactiveResultStackProps: (options: {
     pageSize?: number;
-};
-export declare const useReactiveResultListProps: (props?: Props) => {
+}) => {
     size: number;
     URLParams: boolean;
     showLoader: boolean;
@@ -16,4 +15,3 @@ export declare const useReactiveResultListProps: (props?: Props) => {
     infiniteScroll: boolean;
     renderNoResults: () => null;
 };
-export {};

package/dist/src/hooks/reactivesearch/{useReactiveResultListProps.js → useReactiveResultStackProps.js}

@@ -3,18 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReactiveResultListProps = void 0;
+exports.useReactiveResultStackProps = void 0;
 const react_1 = __importDefault(require("react"));
 const hooks_1 = require("../../hooks");
 const useReactiveReactProp_1 = require("./useReactiveReactProp");
-const useReactiveResultListProps = (props = {}) => {
-    const { pageSize } = props;
+const useReactiveResultStackProps = (options) => {
     const filterStack = (0, hooks_1.useFilterStack)();
     const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)();
     const size = react_1.default.useMemo(() => {
-        var _a;
-        return (_a = pageSize !== null && pageSize !== void 0 ? pageSize : filterStack === null || filterStack === void 0 ? void 0 : filterStack.pageSize) !== null && _a !== void 0 ? _a : 20;
-    }, [pageSize, filterStack]);
+        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,
@@ -27,6 +26,6 @@ const useReactiveResultListProps = (props = {}) => {
         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, pageSize]);
+    }), [filterStack, reactiveReactProp, options.pageSize]);
 };
-exports.useReactiveResultListProps = useReactiveResultListProps;
+exports.useReactiveResultStackProps = useReactiveResultStackProps;

package/dist/src/hooks/useAnalytics.js

@@ -14,17 +14,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAnalytics = void 0;
 const axios_1 = __importDefault(require("axios"));
-const provider_1 = require("../provider");
+const hooks_1 = require("../hooks");
 const useAnalytics = () => {
-    const { shopifyPermanentDomain } = (0, provider_1.useContext)();
+    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 (!shopifyPermanentDomain) {
+        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": shopifyPermanentDomain } });
+        return axios_1.default.post(url, { events }, { headers: { "X-Reactify-Tenant": options.shopifyPermanentDomain } });
     });
     return { track };
 };

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

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

package/dist/src/hooks/useConfig.js

@@ -1,6 +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 provider_1 = require("../provider");
-const useConfig = () => (0, provider_1.useContext)().config;
+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

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

package/dist/src/hooks/useCuration.js

@@ -1,6 +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 provider_1 = require("../provider");
-const useCuration = () => (0, provider_1.useContext)().curation;
+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/useFilterListProps.d.ts

@@ -1,22 +1,12 @@
 import { ConfigFilterOption } from "../types/config";
 import { ReactivesearchFilterProps } from "../types/reactivesearch";
-export declare const useFilterListProps: (filter: ConfigFilterOption, reactivesearchFilterProps: ReactivesearchFilterProps) => {
+export declare const useFilterListProps: (filter: ConfigFilterOption, reactivesearchFilterProps: ReactivesearchFilterProps) => ReactivesearchFilterProps & {
     filter: ConfigFilterOption;
-    options: {
-        checked: boolean;
+    options: Array<{
         doc_count: number;
         key: string;
-    }[];
+        checked: boolean;
+    }>;
     hasSelected: boolean;
     totalSelected: number;
-    loading: boolean;
-    error: Error | null;
-    handleChange: (value: string) => void;
-    data: {
-        doc_count: number;
-        key: string;
-    }[];
-    value: string | {
-        [key: string]: boolean;
-    };
 };

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

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