@usereactify/search 2.1.0-beta.2 → 2.1.0-beta.3

package/dist/hooks/reactivesearch/useReactiveResultListProps.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useReactiveResultListProps = void 0;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const useReactiveReactProp_1 = require("./useReactiveReactProp");
+const useReactiveResultListProps = (props = {}) => {
+    const { pageSize, pageSizeAdjust } = props;
+    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) - (pageSizeAdjust !== null && pageSizeAdjust !== void 0 ? pageSizeAdjust : 0);
+    }, [pageSize, pageSizeAdjust, 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, pageSize]);
+};
+exports.useReactiveResultListProps = useReactiveResultListProps;

package/dist/hooks/useAnalytics.d.ts

@@ -0,0 +1,14 @@
+export declare const useAnalytics: () => {
+    track: (event: TrackEvent) => Promise<void>;
+};
+export declare type TrackEvent = TrackEvent.SearchEvent | TrackEvent.SelectItemEvent;
+export declare namespace TrackEvent {
+    interface SearchEvent {
+        eventName: "search";
+        searchTerm: string;
+    }
+    interface SelectItemEvent {
+        eventName: "select_item";
+        id: number;
+    }
+}

package/dist/hooks/useAnalytics.js

@@ -0,0 +1,47 @@
+"use strict";
+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 { shopName } = (0, provider_1.useContext)();
+    const url = "https://analytics.search.reactify.app/record/";
+    const track = (event) => {
+        const events = getTrackEvents(event);
+        return axios_1.default
+            .post(url, { events }, { headers: { "X-Reactify-Tenant": shopName || "test shop name" } })
+            .then((response) => {
+            console.log(response);
+        });
+    };
+    return { track };
+};
+exports.useAnalytics = useAnalytics;
+function getTrackEvents(event) {
+    const { eventName } = event;
+    let events = [];
+    switch (eventName) {
+        case "search":
+            const { searchTerm } = event;
+            events = [
+                {
+                    eventName,
+                    searchTerm,
+                },
+            ];
+            break;
+        case "select_item":
+            const { id } = event;
+            events = [
+                {
+                    eventName,
+                    id,
+                },
+            ];
+            break;
+    }
+    return events;
+}

package/dist/hooks/useCollection.d.ts

@@ -0,0 +1 @@
+export declare const useCollection: () => import("..").Collection | undefined;

package/dist/hooks/useCollection.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCollection = void 0;
+const provider_1 = require("../provider");
+const useCollection = () => (0, provider_1.useContext)().collection;
+exports.useCollection = useCollection;

package/dist/hooks/useCombinedResults.d.ts

@@ -0,0 +1,7 @@
+import { ConfigCallout, ResultCombined, ReactivesearchResultProps } from "../types";
+interface Props {
+    callouts: ConfigCallout[];
+    products: ReactivesearchResultProps["data"];
+}
+export declare const useCombinedResults: ({ callouts, products }: Props) => ResultCombined[];
+export {};

package/dist/hooks/useCombinedResults.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.useCombinedResults = void 0;
+const react_1 = __importDefault(require("react"));
+const useCombinedResults = ({ callouts, products }) => react_1.default.useMemo(() => {
+    const combinedResults = [];
+    let n = 0;
+    for (const product of products) {
+        // search for a callout in this position
+        const callout = callouts.find((callout) => n === callout.position);
+        if (callout)
+            combinedResults.push({ type: "callout", data: callout });
+        combinedResults.push({ type: "product", data: product });
+        n++;
+    }
+    // add a trailing callout if available
+    const callout = callouts.find((callout) => n === callout.position);
+    if (callout)
+        combinedResults.push({ type: "callout", data: callout });
+    return combinedResults;
+}, [callouts, products]);
+exports.useCombinedResults = useCombinedResults;

package/dist/hooks/useConfig.d.ts

@@ -0,0 +1 @@
+export declare const useConfig: () => import("..").Config;

package/dist/hooks/useConfig.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConfig = void 0;
+const provider_1 = require("../provider");
+const useConfig = () => (0, provider_1.useContext)().config;
+exports.useConfig = useConfig;

package/dist/hooks/useCuration.d.ts

@@ -0,0 +1 @@
+export declare const useCuration: () => import("..").ConfigCuration | undefined;

package/dist/hooks/useCuration.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCuration = void 0;
+const provider_1 = require("../provider");
+const useCuration = () => (0, provider_1.useContext)().curation;
+exports.useCuration = useCuration;

package/dist/hooks/useFilterCollapsedState.d.ts

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

package/dist/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/hooks/useFilterListProps.d.ts

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

package/dist/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/hooks/useFilterStack.d.ts

@@ -0,0 +1 @@
+export declare const useFilterStack: () => import("..").ConfigFilter | undefined;

package/dist/hooks/useFilterStack.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFilterStack = void 0;
+const provider_1 = require("../provider");
+const useFilterStack = () => (0, provider_1.useContext)().filterStack;
+exports.useFilterStack = useFilterStack;

package/dist/hooks/useFilters.d.ts

@@ -0,0 +1 @@
+export declare const useFilters: () => import("..").ConfigFilterOption[];

package/dist/hooks/useFilters.js

@@ -0,0 +1,17 @@
+"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 useFilterStack_1 = require("./useFilterStack");
+const useFilters = () => {
+    const filterStack = (0, useFilterStack_1.useFilterStack)();
+    return react_1.default.useMemo(() => {
+        if (!filterStack)
+            return [];
+        return filterStack.options.sort((a, b) => a.position > b.position ? 1 : -1);
+    }, [filterStack]);
+};
+exports.useFilters = useFilters;

package/dist/hooks/usePages.d.ts

@@ -0,0 +1,10 @@
+import { ReactivesearchPaginationProps } from "../types";
+export declare const usePages: (props: ReactivesearchPaginationProps) => {
+    pagesToShow: number[];
+    hasNextPage: boolean;
+    buildPagePath: (page: number) => string;
+    handleNextPage: (event?: any) => void;
+    hasPreviousPage: boolean;
+    actualCurrentPage: number;
+    handlePreviousPage: (event?: any) => void;
+};

package/dist/hooks/usePages.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePages = void 0;
+const react_1 = __importDefault(require("react"));
+const usePages = (props) => {
+    const { pages, setPage, totalPages, currentPage } = props;
+    const buildPagePath = react_1.default.useCallback((page) => {
+        const currentPath = window.location.pathname;
+        return currentPath.includes("page=")
+            ? currentPath.replace(/page=\d+/g, `page=${page}`)
+            : `${currentPath}${currentPath.includes("?") ? "&" : "?"}page=${page}`;
+    }, []);
+    const pagesToShow = react_1.default.useMemo(() => getPages(pages, totalPages, currentPage), [pages, totalPages, currentPage]);
+    // default currentPage is zero-indexed, actualCurrentPage is one-indexed
+    const actualCurrentPage = react_1.default.useMemo(() => currentPage + 1, [currentPage]);
+    const hasNextPage = react_1.default.useMemo(() => actualCurrentPage < totalPages, [
+        actualCurrentPage,
+        totalPages,
+    ]);
+    const handleNextPage = react_1.default.useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        if (!hasNextPage)
+            return;
+        setPage(currentPage + 1);
+    }, [hasNextPage, currentPage, setPage]);
+    const hasPreviousPage = react_1.default.useMemo(() => actualCurrentPage > 1, [
+        actualCurrentPage,
+    ]);
+    const handlePreviousPage = react_1.default.useCallback((event) => {
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        if (!hasPreviousPage)
+            return;
+        setPage(currentPage - 1);
+    }, [hasPreviousPage, currentPage, setPage]);
+    return react_1.default.useMemo(() => ({
+        pagesToShow,
+        hasNextPage,
+        buildPagePath,
+        handleNextPage,
+        hasPreviousPage,
+        actualCurrentPage,
+        handlePreviousPage,
+    }), [
+        pagesToShow,
+        hasNextPage,
+        buildPagePath,
+        handleNextPage,
+        hasPreviousPage,
+        actualCurrentPage,
+        handlePreviousPage,
+    ]);
+};
+exports.usePages = usePages;
+// get a list of pages to display buttons for
+// @todo this is super hacky and needs to be cleaned up
+const getPages = (pages, totalPages, currentPage) => {
+    const pagesToShow = pages > totalPages ? totalPages : pages;
+    const buffer = Math.floor(pagesToShow / 2);
+    let list = [];
+    let start = 0;
+    if (totalPages <= 5 || currentPage < buffer + 1) {
+        start = 0;
+    }
+    else {
+        if (totalPages - buffer <= currentPage) {
+            start =
+                currentPage + 1 === totalPages
+                    ? currentPage - (pagesToShow - 1)
+                    : currentPage - (buffer + buffer / 2);
+        }
+        else {
+            start = currentPage - buffer;
+        }
+    }
+    Array.apply(null, Array(pagesToShow)).map((item, index) => {
+        list.push(start + index);
+    });
+    return list;
+};

package/dist/hooks/useProductPrice.d.ts

@@ -0,0 +1,12 @@
+import currency from "currency.js";
+import { Product } from "../types";
+declare type PriceResponse = {
+    onSale: boolean;
+    price?: currency;
+    currencyCode: string;
+    formattedPrice?: string;
+    compareAtPrice?: currency;
+    formattedCompareAtPrice?: string;
+};
+export declare const useProductPrice: (product: Product) => PriceResponse;
+export {};

package/dist/hooks/useProductPrice.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProductPrice = void 0;
+const react_1 = __importDefault(require("react"));
+const currency_js_1 = __importDefault(require("currency.js"));
+const useProductPrice = (product) => react_1.default.useMemo(() => {
+    var _a, _b, _c, _d;
+    const variant = (_a = product.variants) === null || _a === void 0 ? void 0 : _a[0];
+    if (!variant) {
+        return {
+            onSale: false,
+            price: undefined,
+            currencyCode: "AUD",
+            compareAtPrice: undefined,
+        };
+    }
+    // @todo select the appropriate currency
+    const priceSet = (_b = variant.presentment_prices) === null || _b === void 0 ? void 0 : _b[0];
+    if (!priceSet || !priceSet.price) {
+        return {
+            onSale: false,
+            price: undefined,
+            currencyCode: "AUD",
+            compareAtPrice: undefined,
+        };
+    }
+    const currencyCode = (_c = priceSet.price.currency_code) !== null && _c !== void 0 ? _c : "AUD";
+    const price = priceSet.price.amount
+        ? (0, currency_js_1.default)(priceSet.price.amount)
+        : undefined;
+    const formattedPrice = price ? formatPrice(price, currencyCode) : undefined;
+    const compareAtPrice = ((_d = priceSet.compare_at_price) === null || _d === void 0 ? void 0 : _d.amount)
+        ? (0, currency_js_1.default)(priceSet.compare_at_price.amount)
+        : undefined;
+    const formattedCompareAtPrice = compareAtPrice
+        ? formatPrice(compareAtPrice, currencyCode)
+        : undefined;
+    const onSale = !!compareAtPrice && !!price && compareAtPrice.intValue > price.intValue;
+    return {
+        price,
+        onSale,
+        currencyCode,
+        compareAtPrice,
+        formattedPrice,
+        formattedCompareAtPrice,
+    };
+}, [product]);
+exports.useProductPrice = useProductPrice;
+const formatPrice = (price, currencyCode) => {
+    let priceString = new Intl.NumberFormat("en-AU", {
+        style: "currency",
+        currency: currencyCode,
+    }).format(price.value);
+    if ("AUD" === currencyCode) {
+        priceString = `AU ${priceString}`;
+    }
+    return priceString;
+};

package/dist/hooks/useSearch.d.ts

@@ -0,0 +1,8 @@
+export declare const useSearch: () => {
+    searchQuery: string | undefined;
+    submitSearch: (localSearchQuery?: string | undefined) => void;
+    instantSearch: boolean;
+    setSearchQuery: (searchQuery: string) => void;
+    showInstantSearchResults: boolean;
+    setShowInstantSearchResults: (showInstantSearchResults: boolean) => void;
+};

package/dist/hooks/useSearch.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearch = void 0;
+const provider_1 = require("../provider");
+const useSearch = () => {
+    const { searchQuery, submitSearch, setSearchQuery, instantSearch, showInstantSearchResults, setShowInstantSearchResults, } = (0, provider_1.useContext)();
+    return {
+        searchQuery,
+        submitSearch,
+        instantSearch,
+        setSearchQuery,
+        showInstantSearchResults,
+        setShowInstantSearchResults,
+    };
+};
+exports.useSearch = useSearch;

package/dist/hooks/useSort.d.ts

@@ -0,0 +1,5 @@
+export declare const useSort: () => {
+    sortOption: import("..").ConfigSort;
+    sortOptions: import("..").ConfigSort[];
+    setSortOption: (sortOptionId: string) => void;
+};

package/dist/hooks/useSort.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSort = void 0;
+const provider_1 = require("../provider");
+const useSort = () => {
+    const { sortOption, sortOptions, setSortOption } = (0, provider_1.useContext)();
+    return { sortOption, sortOptions, setSortOption };
+};
+exports.useSort = useSort;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./types";
+export * from "./hooks";
+export * from "./filter";
+export * from "./sensor";
+export * from "./result";
+export * from "./search";
+export * from "./provider";

package/dist/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./filter"), exports);
+__exportStar(require("./sensor"), exports);
+__exportStar(require("./result"), exports);
+__exportStar(require("./search"), exports);
+__exportStar(require("./provider"), exports);

package/dist/provider.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Collection, Config, ConfigSort, ConfigFilter, ConfigCuration, ConfigCredentials, ConfigTheme } from "./types";
+declare type Context = {
+    index: string;
+    config: Config;
+    shopName: string;
+    sortOption: ConfigSort;
+    sortOptions: ConfigSort[];
+    searchQuery?: string;
+    filterStack?: ConfigFilter;
+    collection?: Collection;
+    instantSearch: boolean;
+    credentials: ConfigCredentials;
+    submitSearch: (localSearchQuery?: string) => void;
+    setSearchQuery: (searchQuery: string) => void;
+    setSortOption: (sortOptionId: string) => void;
+    showInstantSearchResults: boolean;
+    setShowInstantSearchResults: (showInstantSearchResults: boolean) => void;
+    theme?: ConfigTheme;
+    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;
+    shopName: string;
+    filterStackId?: string;
+    collection?: Collection;
+    noReactiveBase?: boolean;
+    instantSearch?: boolean;
+    credentials?: ConfigCredentials;
+    theme?: ConfigTheme;
+    /** 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;
+export {};