@usereactify/search 3.0.0-beta.0 → 3.1.0

package/dist/provider.d.ts

@@ -19,8 +19,6 @@ 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 = {
@@ -34,8 +32,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

@@ -14,10 +14,10 @@ const defaultCredentials = {
     endpoint: "https://api.search.reactify.app",
 };
 const Provider = (props) => {
-    var _a;
-    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, enableCallouts, additionalComponentIds, } = props;
+    var _a, _b;
+    const { index, config, children, collection, instantSearch, filterStackId, noReactiveBase, additionalComponentIds, } = props;
     const credentials = (_a = props.credentials) !== null && _a !== void 0 ? _a : defaultCredentials;
-    const theme = props.theme || {
+    const theme = (_b = props.theme) !== null && _b !== void 0 ? _b : {
         typography: {
             fontFamily: "inherit",
             fontSize: "inherit",
@@ -76,7 +76,6 @@ const Provider = (props) => {
         setShowInstantSearchResults,
         theme,
         curation,
-        enableCallouts,
         additionalComponentIds,
         instantSearch: !!instantSearch,
         showInstantSearchResults: !!showInstantSearchResults && !!searchQuery,
@@ -92,7 +91,6 @@ const Provider = (props) => {
         sortOptions,
         submitSearch,
         instantSearch,
-        enableCallouts,
         additionalComponentIds,
         showInstantSearchResults,
         theme,

package/dist/result/ResultCard.d.ts

@@ -2,8 +2,9 @@ import React from "react";
 import type { ElasticProduct } from "../types/elastic";
 import { useProductPrice } from "../hooks";
 declare type Props = {
-    product: ElasticProduct;
     pagePosition: number;
+    product: ElasticProduct;
+    document: ElasticProduct;
     render?: (props: Omit<Props, "render"> & ReturnType<typeof useProductPrice>) => JSX.Element;
 };
 export declare const ResultCard: React.FC<Props>;

package/dist/result/ResultCardCallout.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
 import { ElasticCallout } from "../types/elastic";
 declare type Props = {
-    callout: ElasticCallout;
     pagePosition: number;
+    document: ElasticCallout;
+    callout: ElasticCallout["callout"];
     render?: (props: Omit<Props, "render">) => JSX.Element;
 };
 export declare const ResultCardCallout: React.FC<Props>;

package/dist/result/ResultCardCallout.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResultCardCallout = void 0;
 const react_1 = __importDefault(require("react"));
 const ResultCardCallout = (props) => {
-    const { callout: { callout }, } = props;
+    const { callout } = props;
     const styleProp = react_1.default.useMemo(() => {
         var _a, _b;
         return ({
@@ -31,7 +31,7 @@ const ResultCardCallout = (props) => {
 exports.ResultCardCallout = ResultCardCallout;
 const ResultCardCalloutInner = (_a) => {
     var { render } = _a, props = __rest(_a, ["render"]);
-    const { callout: { callout }, } = props;
+    const { callout } = props;
     if (render)
         return render(props);
     return react_1.default.createElement("p", null, callout.title);

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,14 @@ 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]);
     if (reactivesearchResultProps.error) {
         if (renderError)
             return renderError({ error: reactivesearchResultProps.error });
@@ -59,11 +54,12 @@ const ResultListInner = (props) => {
     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) => {
-            if (elastic_1.ElasticDocumentType.Product === result.type) {
-                return (react_1.default.createElement(ResultCard_1.ResultCard, { key: result._id, product: result, pagePosition: key + 1, render: renderResultCard }));
+            // @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 (!!enableCallouts && elastic_1.ElasticDocumentType.Callout === result.type) {
-                return (react_1.default.createElement(ResultCardCallout_1.ResultCardCallout, { key: result._id, callout: result, pagePosition: key + 1, render: renderResultCardCallout }));
+            if (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 }));
             }
             return null;
         })),

package/dist/sensor/SensorSort.js

@@ -11,6 +11,7 @@ const debug = require("debug")("reactify-search:SensorSort");
 const SensorSort = () => {
     const config = (0, hooks_1.useConfig)();
     const curation = (0, hooks_1.useCuration)();
+    const collection = (0, hooks_1.useCollection)();
     const { sortOption } = (0, hooks_1.useSort)();
     const searchQuery = react_1.default.useMemo(() => {
         if (typeof window === "undefined")
@@ -20,7 +21,7 @@ const SensorSort = () => {
     }, []);
     const { sort, query } = react_1.default.useMemo(() => {
         return {
-            sort: buildSort(config, curation, sortOption),
+            sort: buildSort({ config, curation, sortOption, collection }),
             query: buildQuery(curation),
         };
     }, [config, sortOption, curation]);
@@ -35,25 +36,30 @@ const SensorSort = () => {
         }) }));
 };
 exports.SensorSort = SensorSort;
-const buildSort = (config, curation, sortState) => {
+const buildSort = (args) => {
     var _a;
+    const { config, curation, sortOption, collection } = args;
     debug("buildSortQuery.start", {
         config,
         curation,
-        sortState,
+        sortOption,
     });
-    // return default collection position if unset
-    if (!sortState) {
-        return [{ "collections.position": "asc" }];
+    // return default sort option if unset
+    if (!sortOption) {
+        return collection
+            ? mapCollectionPositionSortClause(collection)
+            : ["_score"];
     }
     // curation positions are only applied for the default `collections.position` or `_score` sort
     // if the sort is something else, apply a normal sort which applies what the user has requested
-    if (!["collections.position", "_score"].includes(sortState.field)) {
-        return [{ [sortState.field]: sortState.direction }];
+    if (!["_score", "collections.position"].includes(sortOption.field)) {
+        return [{ [sortOption.field]: sortOption.direction }];
     }
-    // no matching curation, return default sort order
+    // no matching curation, return default sort clause
     if (!curation) {
-        return [{ [sortState.field]: sortState.direction }];
+        return collection
+            ? mapCollectionPositionSortClause(collection)
+            : ["_score"];
     }
     const sorts = [];
     // show pins first
@@ -106,8 +112,31 @@ const buildSort = (config, curation, sortState) => {
         sorts.push("_doc");
     else
         sorts.push("_score");
+    // @todo ideally, once pins are extinguished and there are no boost rules, the rest of the
+    // result should be ordered by the shopify collection position rather than the index order,
+    // but this will need some proper testing to ensure it does not break curations
     return sorts;
 };
+/**
+ * Return a sort clause which sorts by position within the given collection.
+ */
+function mapCollectionPositionSortClause(collection) {
+    return [
+        {
+            "collections.position": {
+                order: "asc",
+                nested: {
+                    path: "collections",
+                    filter: {
+                        term: {
+                            "collections.handle.keyword": collection.handle,
+                        },
+                    },
+                },
+            },
+        },
+    ];
+}
 const buildQuery = (curation) => {
     var _a;
     if (!curation)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@usereactify/search",
   "description": "React UI library for Reactify Search",
-  "version": "3.0.0-beta.0",
+  "version": "3.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",