@usereactify/search 3.12.0-beta.4 → 4.1.0-beta.0

package/dist/hooks/reactivesearch/useReactiveFilterListProps.js

@@ -7,7 +7,7 @@ exports.useReactiveFilterListProps = void 0;
 const react_1 = __importDefault(require("react"));
 const useReactiveReactProp_1 = require("./useReactiveReactProp");
 const useReactiveFilterListProps = (filter) => {
-    const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)(filter.handle);
+    const reactiveReactProp = (0, useReactiveReactProp_1.useReactiveReactProp)(filter.id);
     const nestedField = react_1.default.useMemo(() => {
         const nestedFields = ["variants"];
         const topField = filter.field.split(".")[0];
@@ -93,7 +93,7 @@ const useReactiveFilterListProps = (filter) => {
         customQuery,
         defaultQuery,
         URLParams: true,
-        componentId: filter.handle,
+        componentId: filter.id,
         dataField: filter.field,
         filterLabel: filter.name,
         react: reactiveReactProp,

package/dist/hooks/reactivesearch/useReactiveReactProp.d.ts

@@ -1,3 +1,3 @@
-export declare const useReactiveReactProp: (currentHandle?: string | undefined) => {
+export declare const useReactiveReactProp: (currentId?: string | undefined) => {
     and: string[];
 };

package/dist/hooks/reactivesearch/useReactiveReactProp.js

@@ -8,18 +8,18 @@ const react_1 = __importDefault(require("react"));
 const sensor_1 = require("../../sensor");
 const useFilters_1 = require("../useFilters");
 const provider_1 = require("../../provider");
-const useReactiveReactProp = (currentHandle) => {
+const useReactiveReactProp = (currentId) => {
     const filters = (0, useFilters_1.useFilters)();
-    const { additionalComponentHandles } = (0, provider_1.useContext)();
+    const { additionalComponentIds } = (0, provider_1.useContext)();
     return react_1.default.useMemo(() => {
         return {
             and: [
                 "SearchInput",
                 ...sensor_1.SENSOR_IDS,
-                ...(additionalComponentHandles !== null && additionalComponentHandles !== void 0 ? additionalComponentHandles : []),
-                ...filters.map((filter) => filter.handle),
-            ].filter((handle) => handle !== currentHandle),
+                ...(additionalComponentIds !== null && additionalComponentIds !== void 0 ? additionalComponentIds : []),
+                ...filters.map((filter) => filter.id),
+            ].filter((id) => id !== currentId),
         };
-    }, [filters, currentHandle]);
+    }, [filters, currentId]);
 };
 exports.useReactiveReactProp = useReactiveReactProp;

package/dist/hooks/useLiveConfig.d.ts

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

package/dist/hooks/useLiveConfig.js

@@ -41,7 +41,7 @@ function getCachedConfig() {
     }
     return;
 }
-const useLiveConfig = (shopifyPermanentDomain, configId) => {
+const useLiveConfig = (shopifyPermanentDomain) => {
     const [config, setConfig] = react_1.default.useState(getCachedConfig());
     react_1.default.useEffect(() => {
         const cachedConfig = getCachedConfig();
@@ -49,19 +49,14 @@ const useLiveConfig = (shopifyPermanentDomain, configId) => {
             return;
         (() => __awaiter(void 0, void 0, void 0, function* () {
             debug("fetching fresh config");
-            const searchParams = new URLSearchParams();
-            searchParams.set("shop", shopifyPermanentDomain);
-            if (configId) {
-                searchParams.set("id", configId);
-            }
-            const json = yield fetch(`https://config.search.reactify.app/?${searchParams.toString()}`).then((response) => response.json());
+            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, configId]);
+    }, [shopifyPermanentDomain]);
     return {
         config,
     };

package/dist/provider.d.ts

@@ -20,14 +20,13 @@ declare type Context = {
     theme?: Theme;
     curation?: ConfigCuration;
     /** Array of additional component IDs managed outside of Reactify Search */
-    additionalComponentHandles?: string[];
+    additionalComponentIds?: string[];
 };
 declare const Context: React.Context<Context | undefined>;
 declare type Props = {
     index: string;
     shopifyPermanentDomain: string;
-    configId?: string;
-    filterStackHandle?: string;
+    filterStackId?: string;
     collection?: Collection;
     noReactiveBase?: boolean;
     instantSearch?: boolean;
@@ -35,7 +34,7 @@ declare type Props = {
     credentials?: Credentials;
     theme?: Theme;
     /** Array of additional component IDs managed outside of Reactify Search */
-    additionalComponentHandles?: string[];
+    additionalComponentIds?: string[];
     /**
      * Optional render function to display a component when the config is loading.
      */

package/dist/provider.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -16,6 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useContext = exports.ConfiguredProvider = exports.Provider = void 0;
 const react_1 = __importDefault(require("react"));
+const Sentry = __importStar(require("@sentry/react"));
 const hooks_1 = require("./hooks");
 const UtilityAuthenticatedReactiveBase_1 = require("./utility/UtilityAuthenticatedReactiveBase");
 const debug = require("debug")("reactify-search:Provider");
@@ -25,20 +45,33 @@ const defaultCredentials = {
     password: "password",
     endpoint: "https://api.search.reactify.app",
 };
+Sentry.init({
+    dsn: "https://f591e13196ad4d6bbcd8abbeb2e023db@o1280055.ingest.sentry.io/6482743",
+});
 const Provider = (_a) => {
     var { renderBooting } = _a, props = __rest(_a, ["renderBooting"]);
-    const { config } = (0, hooks_1.useLiveConfig)(props.shopifyPermanentDomain, props.configId);
+    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 }));
+    return (react_1.default.createElement(Sentry.ErrorBoundary, { fallback: react_1.default.createElement("p", null, "An error has occurred"), beforeCapture: (scope) => {
+            scope.setTag("index", props.index);
+            scope.setTag("shop", props.shopifyPermanentDomain);
+            if (!!props.collection)
+                scope.setTag("collection", props.collection.handle);
+            if (!!props.filterStackId)
+                scope.setTag("filterStackId", props.filterStackId);
+            if (!!props.instantSearch)
+                scope.setTag("instantSearch", true);
+        } },
+        react_1.default.createElement(exports.ConfiguredProvider, Object.assign({}, props, { config: config }))));
 };
 exports.Provider = Provider;
 const ConfiguredProvider = (props) => {
     var _a, _b;
-    const { index, config, children, collection, instantSearch, filterStackHandle, noReactiveBase, shopifyPermanentDomain, additionalComponentHandles, onRedirect, } = props;
+    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, shopifyPermanentDomain, additionalComponentIds, onRedirect, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
     const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
@@ -77,13 +110,13 @@ const ConfiguredProvider = (props) => {
             setSearchQuery(searchQueryFromURL);
     }, [searchQueryFromURL]);
     react_1.default.useEffect(() => {
-        if (searchSortFromURL && (sortOption === null || sortOption === void 0 ? void 0 : sortOption.handle) !== searchSortFromURL) {
+        if (searchSortFromURL && (sortOption === null || sortOption === void 0 ? void 0 : sortOption.id) !== searchSortFromURL) {
             setSortOption(searchSortFromURL, true);
         }
     }, [searchSortFromURL]);
     react_1.default.useEffect(() => {
-        if (window.location.search === "" && (sortOption === null || sortOption === void 0 ? void 0 : sortOption.handle)) {
-            setSortOption(sortOption.handle, true);
+        if (window.location.search === "" && (sortOption === null || sortOption === void 0 ? void 0 : sortOption.id)) {
+            setSortOption(sortOptions[0].id, true);
         }
     }, [window.location.href]);
     const [showInstantSearchResults, setShowInstantSearchResults] = react_1.default.useState(false);
@@ -107,7 +140,7 @@ const ConfiguredProvider = (props) => {
     // do not attempt to resolve a filter stack if in instantSearch mode
     const filterStack = instantSearch
         ? undefined
-        : useFilterStack(config, collection, filterStackHandle);
+        : useFilterStack(config, collection, filterStackId);
     const curation = useCuration(config, collection, searchQuery);
     const contextValue = react_1.default.useMemo(() => ({
         index,
@@ -126,7 +159,7 @@ const ConfiguredProvider = (props) => {
         setShowInstantSearchResults,
         theme,
         curation,
-        additionalComponentHandles,
+        additionalComponentIds,
         instantSearch: !!instantSearch,
         showInstantSearchResults: !!showInstantSearchResults && !!searchQuery,
     }), [
@@ -143,7 +176,7 @@ const ConfiguredProvider = (props) => {
         onRedirect,
         submitSearch,
         instantSearch,
-        additionalComponentHandles,
+        additionalComponentIds,
         showInstantSearchResults,
         theme,
     ]);
@@ -167,7 +200,7 @@ const useSortState = (config, collection) => {
             .sort((a, b) => `${a.position}`.localeCompare(`${b.position}`))
             .filter(({ visibility }) => ["all", type].includes(visibility));
     }, [config, collection]);
-    const [sortOptionState, setSortOptionState] = react_1.default.useState((_a = sortOptions[0]) === null || _a === void 0 ? void 0 : _a.handle);
+    const [sortOptionState, setSortOptionState] = react_1.default.useState((_a = sortOptions[0]) === null || _a === void 0 ? void 0 : _a.id);
     const sortOption = react_1.default.useMemo(() => sortOptions.find(({ id }) => id === sortOptionState) || sortOptions[0], [sortOptions, sortOptionState]);
     const setSortOption = react_1.default.useCallback((sortOptionId, ignoreHistoryState = false) => {
         setSortOptionState(sortOptionId);
@@ -187,37 +220,22 @@ const useSortState = (config, collection) => {
 // @todo we need a better name for the overall page like "Filter Stack" or something,
 // each block is then called a filter so like Size would be a "Filter" and then each
 // value within it is a "Filter Option"
-const useFilterStack = (config, collection, filterStackHandle) => react_1.default.useMemo(() => {
-    const type = !!collection ? "collection" : "search";
-    // select filters by type
-    const matchingFilterStacks = config.filters.filter((filter) => filter.type === type);
-    // select filter stack by handle if provided
-    if (filterStackHandle) {
-        const matchingFilterStack = matchingFilterStacks.find((filterStack) => filterStackHandle === filterStack.handle);
-        if (matchingFilterStack) {
-            return matchingFilterStack;
-        }
+const useFilterStack = (config, collection, filterStackId) => react_1.default.useMemo(() => {
+    var _a;
+    // manually select filter stack by ID if provided
+    if (filterStackId) {
+        const filterStack = config.filters.find((filter) => filterStackId === filter.id);
+        if (filterStack)
+            return filterStack;
     }
-    // select filter stack by collection if provided
+    // automatically select filter stack by collection if provided
     if (collection === null || collection === void 0 ? void 0 : collection.handle) {
-        const matchingFilterStack = matchingFilterStacks.find((filterStack) => { var _a; return (_a = filterStack.collections) === null || _a === void 0 ? void 0 : _a.includes(collection.handle); });
-        if (matchingFilterStack) {
-            return matchingFilterStack;
-        }
-    }
-    // select filter with "default" handle
-    let matchingFilterStack = matchingFilterStacks.find((filterStack) => filterStack.handle === "default");
-    if (matchingFilterStack) {
-        return matchingFilterStack;
+        const filterStack = config.filters.find((filter) => { var _a; return (_a = filter.collections) === null || _a === void 0 ? void 0 : _a.includes(collection.handle); });
+        if (filterStack)
+            return filterStack;
     }
-    // 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;
+    const type = !!collection ? "collection" : "search";
+    return ((_a = config.filters.find((filter) => type === filter.type)) !== null && _a !== void 0 ? _a : config.filters[0]);
 }, [config, collection]);
 const useCuration = (config, collection, searchQuery) => react_1.default.useMemo(() => {
     debug("resolveCuration.start", { config, collection, searchQuery });

package/dist/types/firestore.d.ts

@@ -107,7 +107,6 @@ export interface DefinedField {
 export interface Sort {
     id: string;
     name: string;
-    handle: string;
     field: string;
     position: number;
     enabled: boolean;
@@ -117,7 +116,6 @@ export interface Sort {
 export interface Filter {
     id: string;
     name: string;
-    handle: string;
     enabled: boolean;
     pageSize: number;
     keywords: string[];
@@ -137,7 +135,6 @@ export interface FilterOption {
     field: string;
     id: string;
     name: string;
-    handle: string;
     position: number;
     settingsCollapsedDesktop: boolean;
     settingsCollapsedMobile: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.12.0-beta.4",
+  "version": "4.1.0-beta.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,7 +12,8 @@
   "scripts": {
     "watch": "tsc --watch",
     "release": "standard-version",
-    "patch": "standard-version -r patch",
+    "release:patch": "standard-version --release-as patch",
+    "release:beta": "standard-version --release-as minor --prerelease beta",
     "build": "rimraf dist && tsc",
     "prettier": "prettier --write .",
     "storybook": "start-storybook -p 6006",
@@ -30,6 +31,7 @@
     ]
   },
   "dependencies": {
+    "@sentry/react": "7.1.1",
     "ahooks": "2.10.11",
     "axios": "0.26.1",
     "currency.js": "2.0.4",