@lana-commerce/core 11.0.0

package/esm/preact/transition/Transition.js

@@ -0,0 +1,100 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+const noop = () => { };
+const APPEAR = "APPEAR";
+const APPEARING = "APPEARING";
+const APPEARED = "APPEARED";
+const ENTER = "ENTER";
+const ENTERING = "ENTERING";
+const ENTERED = "ENTERED";
+const EXIT = "EXIT";
+const EXITING = "EXITING";
+const EXITED = "EXITED";
+export const Transition = ({ in: inProp = false, appear = false, enter = true, exit = true, duration = 500, alwaysMounted = false, children, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop, }) => {
+    const timeoutRef = useRef();
+    let ignoreInPropChange = false;
+    const [phase, setPhase] = useState(() => {
+        ignoreInPropChange = true;
+        if (!inProp)
+            return EXITED;
+        if (appear)
+            return APPEAR;
+        return APPEARED;
+    });
+    useEffect(() => {
+        switch (phase) {
+            case APPEAR:
+                onEnter();
+                setPhase(APPEARING);
+                break;
+            case APPEARING:
+                onEntering();
+                timeoutRef.current = setTimeout(() => {
+                    setPhase(APPEARED);
+                }, duration);
+                break;
+            case APPEARED:
+                onEntered();
+                break;
+            case ENTER:
+                onEnter();
+                setPhase(ENTERING);
+                break;
+            case ENTERING:
+                onEntering();
+                timeoutRef.current = setTimeout(() => {
+                    setPhase(ENTERED);
+                }, duration);
+                break;
+            case ENTERED:
+                onEntered();
+                break;
+            case EXIT:
+                onExit();
+                setPhase(EXITING);
+                break;
+            case EXITING:
+                onExiting();
+                timeoutRef.current = setTimeout(() => {
+                    setPhase(EXITED);
+                }, duration);
+                break;
+            case EXITED:
+                onExited();
+                break;
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [phase]);
+    useLayoutEffect(() => {
+        if (!ignoreInPropChange) {
+            switch (true) {
+                case !!(inProp && enter):
+                    setPhase(ENTER);
+                    break;
+                case !!(inProp && !enter):
+                    setPhase(ENTERED);
+                    break;
+                case !!(!inProp && exit):
+                    setPhase(EXIT);
+                    break;
+                case !!(!inProp && !exit):
+                    setPhase(EXITED);
+                    break;
+            }
+        }
+    }, [inProp]);
+    const value = useMemo(() => ({
+        appear: phase === APPEAR,
+        appearActive: phase === APPEARING,
+        appearDone: phase === APPEARED,
+        enter: phase === ENTER,
+        enterActive: phase === ENTERING,
+        enterDone: phase === ENTERED,
+        exit: phase === EXIT,
+        exitActive: phase === EXITING,
+        exitDone: phase === EXITED,
+    }), [phase]);
+    return alwaysMounted || phase !== EXITED ? children(value) : null;
+};

package/esm/preact/translateLocalStatic.js

@@ -0,0 +1,26 @@
+/**
+ * @jsx h
+ * @jsxFrag Fragment
+ */
+import { Fragment, cloneElement, isValidElement } from "preact";
+import { format } from "../formatToJSX.js";
+import { getLocale } from "../translateLocale.js";
+const formatJSXConfig = {
+    cloneElement,
+    isValidElement,
+    toFragment: (v) => h(Fragment, null, v),
+};
+export function makeT(perLocaleData) {
+    return (template, ...args) => {
+        const locale = getLocale();
+        let pat = template;
+        if (locale !== "en") {
+            pat = perLocaleData[locale]?.[template];
+            if (!pat) {
+                console.warn(`missing translation string for "${locale}" locale: ${template}`);
+                pat = template;
+            }
+        }
+        return format(formatJSXConfig, pat, ...args);
+    };
+}

package/esm/productFiltering.js

@@ -0,0 +1,164 @@
+import { createEvent, createStore } from "effector";
+import { variantPriceInfo } from "./variantPrice.js";
+import { compact } from "./compact.js";
+import { debounced } from "./effector/debounced.js";
+export function createProductFiltering() {
+    const pageKey = createStore("");
+    const setFiltersState = createEvent();
+    const setFilterState = createEvent();
+    const filtersState = createStore({});
+    const filtersStateDebounced = createStore({});
+    debounced(filtersState, filtersStateDebounced, 500);
+    filtersState.on(setFiltersState, (_, v) => v.state);
+    filtersState.on(setFilterState, (fs, { id, data }) => {
+        const s = { ...fs };
+        if (data === undefined) {
+            delete s[id];
+        }
+        else {
+            s[id] = data;
+        }
+        return s;
+    });
+    pageKey.on(setFiltersState, (_, v) => v.pageKey);
+    pageKey.on(setFilterState, (_, v) => v.pageKey);
+    return {
+        setFiltersState,
+        setFilterState,
+        filtersState,
+        filtersStateDebounced,
+        pageKey,
+    };
+}
+export function filterProducts(state, filtersMap, products) {
+    if (Object.keys(state).length === 0)
+        return products.map((p) => ({ original: p, filtered: p }));
+    const funcs = [];
+    for (const key in state) {
+        const f = filtersMap[key];
+        if (!f)
+            continue;
+        const val = state[key];
+        funcs.push((p) => f.filter(val, p));
+    }
+    return compact(products.map((p) => {
+        let pp = p;
+        for (const f of funcs) {
+            if (!pp)
+                break;
+            pp = f(pp);
+        }
+        return pp ? { original: p, filtered: pp } : undefined;
+    }));
+}
+export function filtersToSearchOptions(state, filtersMap) {
+    const perContext = new Map();
+    const out = [];
+    for (const key in state) {
+        const f = filtersMap[key];
+        if (!f)
+            continue;
+        const val = state[key];
+        const result = f.api(val);
+        if (result) {
+            const context = f.context;
+            if (!perContext.has(context)) {
+                perContext.set(context, []);
+            }
+            const array = perContext.get(context);
+            array.push(result);
+        }
+    }
+    const p = perContext.get("product");
+    if (p)
+        out.push(...p);
+    const v = perContext.get("variant");
+    if (v)
+        out.push({ kind: "and", opts: v, context: "variants" });
+    return out;
+}
+export function makeOptionFilter(optionID) {
+    return {
+        id: `option:${optionID}`,
+        context: "variant",
+        filter: (state, p) => {
+            if (state === undefined)
+                return p;
+            const variants = compact(p.variants).filter((v) => v.options.some((opt) => opt.option_id === optionID && state?.has(opt.option_value_id)));
+            if (variants.length === 0)
+                return undefined;
+            return { ...p, variants };
+        },
+        api: (state) => {
+            if (!state)
+                return undefined;
+            const vals = Array.from(state.keys());
+            return {
+                kind: "or",
+                opts: vals.map((val) => ({
+                    kind: "and",
+                    opts: [
+                        { kind: "opt", opt: { op: "eq", name: "variants.options.option_id", text: optionID } },
+                        { kind: "opt", opt: { op: "eq", name: "variants.options.option_value_id", text: val } },
+                    ],
+                })),
+            };
+        },
+    };
+}
+export function makePriceFilter(env) {
+    return {
+        id: "price-range",
+        context: "variant",
+        filter: (state, p) => {
+            if (state === undefined)
+                return p;
+            const variants = compact(p.variants).filter((v) => {
+                const price = variantPriceInfo(env, v).price;
+                return price >= state.from && price <= state.to;
+            });
+            if (variants.length === 0)
+                return undefined;
+            return { ...p, variants };
+        },
+        api: (state) => {
+            if (state === undefined)
+                return undefined;
+            // TODO: better API price filtering, what about other currencies?
+            return {
+                kind: "and",
+                opts: [
+                    { kind: "opt", opt: { op: "ge", name: "variants.price", number: state.from } },
+                    { kind: "opt", opt: { op: "le", name: "variants.price", number: state.to } },
+                ],
+            };
+        },
+    };
+}
+export function makeRatingFilter() {
+    return {
+        id: "rating-range",
+        context: "product",
+        filter: (state, p) => {
+            if (state === undefined)
+                return p;
+            const score = p.average_score / 2 + 0.5;
+            if (score >= state.from && score <= state.to)
+                return p;
+            return undefined;
+        },
+        api: (state) => {
+            if (state === undefined)
+                return undefined;
+            const lo = 2 * state.from - 1;
+            const hi = 2 * state.to - 1;
+            return {
+                kind: "and",
+                opts: [
+                    { kind: "opt", opt: { op: "ge", name: "average_score", number: lo, zero: lo === 0 } },
+                    { kind: "opt", opt: { op: "le", name: "average_score", number: hi, zero: hi === 0 } },
+                ],
+            };
+        },
+    };
+}

package/esm/productSEO.js

@@ -0,0 +1,46 @@
+import { defaultVariant } from "./defaultVariant.js";
+import { toMajor } from "./toMajor.js";
+import { variantImages } from "./variantImages.js";
+import { variantPriceInfo } from "./variantPrice.js";
+export function productSEO(env, product) {
+    const variant = defaultVariant(product);
+    if (!variant)
+        return undefined;
+    const images = variantImages(variant);
+    const priceInfo = variantPriceInfo(env, variant);
+    const info = variant
+        ? {
+            variantID: variant.id,
+            variantSKU: variant.sku,
+            productID: product.id,
+            productHandle: product.handle,
+        }
+        : undefined;
+    return {
+        canonicalLinkHref: info && env.canonicalVariantURL ? env.canonicalVariantURL(info) : undefined,
+        meta: [
+            { name: "title", content: product.meta_title },
+            { name: "description", content: product.meta_description },
+            // OPEN GRAPH
+            { property: "og:type", content: "product" },
+            { property: "og:title", content: product.meta_title },
+            ...(info && env.canonicalVariantURL ? [{ property: "og:url", content: env.canonicalVariantURL(info) }] : []),
+            { property: "og:price:amount", content: `${toMajor(env.shopCurrencies, env.currency, priceInfo.price)}` },
+            { property: "og:price:currency", content: env.currency },
+            { property: "og:availability", content: (variant.inventory?.available || 0) > 0 ? "instock" : "oos" },
+            { property: "og:description", content: product.meta_description },
+            // TWITTER CARD
+            { name: "twitter:card", content: "summary" },
+            { name: "twitter:title", content: product.meta_title },
+            { name: "twitter:description", content: product.meta_description },
+            // OPEN GRAPH images
+            ...images.reduce((array, f) => [
+                ...array,
+                { property: "og:image", content: f.public_url },
+                { property: "og:image:secure_url", content: f.public_url },
+            ], []),
+            // TWITTER CARD images
+            ...images.reduce((array, f) => [...array, { property: "twitter:image", content: f.public_url }], []),
+        ],
+    };
+}

package/esm/productSorting.js

@@ -0,0 +1,89 @@
+import { variantPriceInfo } from "./variantPrice.js";
+import { defaultVariant } from "./defaultVariant.js";
+export const sortByPriceAsc = {
+    id: "price_asc",
+    api: () => ["min_price", false],
+    func: (a, b) => a.price - b.price,
+};
+export const sortByPriceDesc = {
+    id: "price_desc",
+    api: () => ["min_price", true],
+    func: (a, b) => b.price - a.price,
+};
+export const sortByTitleAsc = {
+    id: "title_asc",
+    api: () => ["title", false],
+    func: (a, b) => a.title.localeCompare(b.title),
+};
+export const sortByTitleDesc = {
+    id: "title_desc",
+    api: () => ["title", true],
+    func: (a, b) => b.title.localeCompare(a.title),
+};
+export const sortByRatingAsc = {
+    id: "rating_asc",
+    api: () => ["rating", false],
+    func: (a, b) => {
+        if (a.rating !== undefined && b.rating !== undefined) {
+            return a.rating - b.rating;
+        }
+        else {
+            return (a.rating !== undefined ? 0 : 1) - (b.rating !== undefined ? 0 : 1);
+        }
+    },
+};
+export const sortByRatingDesc = {
+    id: "rating_desc",
+    api: () => ["rating", true],
+    func: (a, b) => {
+        if (a.rating !== undefined && b.rating !== undefined) {
+            return b.rating - a.rating;
+        }
+        else {
+            return (a.rating !== undefined ? 0 : 1) - (b.rating !== undefined ? 0 : 1);
+        }
+    },
+};
+export const sortBySalesDesc = {
+    id: "top_selling",
+    api: () => ["sales", true],
+    func: () => {
+        throw new Error("not implemented");
+    },
+    apiOnly: true,
+};
+export const sortByVisitsDesc = {
+    id: "most_viewed",
+    api: () => ["visits", true],
+    func: () => {
+        throw new Error("not implemented");
+    },
+    apiOnly: true,
+};
+export const defaultSortOptions = [
+    sortByPriceAsc,
+    sortByPriceDesc,
+    sortByTitleAsc,
+    sortByTitleDesc,
+    sortByRatingAsc,
+    sortByRatingDesc,
+    sortBySalesDesc,
+    sortByVisitsDesc,
+];
+export function sortProducts(env, sortBy, products) {
+    if (!sortBy)
+        return products;
+    return products
+        .map((fp, idx) => {
+        const p = fp.filtered;
+        const v = defaultVariant(p);
+        return {
+            idx,
+            price: variantPriceInfo(env, v).price,
+            title: p.title,
+            rating: p.review_count !== 0 ? p.average_score : undefined,
+        };
+    })
+        .sort(sortBy.func)
+        .map((vi) => products[vi.idx]);
+}

package/esm/promiseAll.js

@@ -0,0 +1,11 @@
+export async function promiseAll(obj) {
+    const keys = Object.keys(obj);
+    const values = await Promise.all(keys.map((key) => obj[key]));
+    const out = {};
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const val = values[i];
+        out[key] = val;
+    }
+    return out;
+}

package/esm/promiseLimit.js

@@ -0,0 +1,32 @@
+export class PromiseLimiter {
+    slots;
+    queue = [];
+    constructor(num) {
+        this.slots = Array.from({ length: num }).map((_, idx) => idx);
+    }
+    dispatch = async () => {
+        if (this.queue.length === 0 || this.slots.length === 0)
+            return;
+        const slot = this.slots.shift();
+        const item = this.queue.shift();
+        try {
+            item.resolve(await item.pfunc(slot));
+        }
+        catch (err) {
+            item.reject(err);
+        }
+        this.slots.push(slot);
+        this.dispatch();
+    };
+    async run(pfunc) {
+        const p = new Promise((resolve, reject) => {
+            this.queue.push({
+                pfunc,
+                resolve,
+                reject,
+            });
+        });
+        this.dispatch();
+        return p;
+    }
+}

package/esm/rdsToInitialScores.js

@@ -0,0 +1,27 @@
+import { compact } from "./compact.js";
+function findScoreInPrevScores(rdID, prevScores) {
+    const s = prevScores?.find((s) => (s.review_dimension ? s.review_dimension.id === rdID : rdID === ""));
+    return s ? s.score : 0;
+}
+function defaultInitialScoresValue(prevScores) {
+    return [{ review_dimension_id: "", score: findScoreInPrevScores("", prevScores) || 9, overall: false }];
+}
+export function rdsToInitialScores(rds, reviewDimensions, prevScores) {
+    if (!rds) {
+        return defaultInitialScoresValue(prevScores);
+    }
+    const overallID = rds.overall_review_dimension ? rds.overall_review_dimension.id : "";
+    const arr = compact(rds.review_dimensions?.map((rd) => {
+        if (!rd)
+            return undefined;
+        const v = reviewDimensions[rd.id];
+        if (!v)
+            return undefined;
+        return {
+            review_dimension_id: v.id,
+            score: findScoreInPrevScores(v.id, prevScores) || 9,
+            overall: v.id === overallID,
+        };
+    }));
+    return arr.length > 0 ? arr : defaultInitialScoresValue(prevScores);
+}

package/esm/react/components/Portal.js

@@ -0,0 +1,2 @@
+import ReactDOM from "react-dom";
+export const Portal = (props) => typeof document !== "undefined" ? ReactDOM.createPortal(props.children, document.body) : null;

package/esm/react/components/RootCloseWrapper.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { RootCloseTracker } from "../rootClose.js";
+const globalTracker = new RootCloseTracker(true);
+export class RootCloseWrapper extends React.Component {
+    added = false;
+    componentDidMount() {
+        const { tracker, tag, onRootClose, disabled, ignoreBelowWidth, ignoreAboveWidth } = this.props;
+        if (!disabled) {
+            (tracker || globalTracker).addTrackedComponent(this, tag, onRootClose, { ignoreBelowWidth, ignoreAboveWidth });
+            this.added = true;
+        }
+    }
+    componentDidUpdate() {
+        const { tracker, tag, onRootClose, disabled } = this.props;
+        if (this.added && disabled) {
+            (tracker || globalTracker).removeTrackedComponent(this);
+            this.added = false;
+        }
+        else if (!this.added && !disabled) {
+            (tracker || globalTracker).addTrackedComponent(this, tag, onRootClose);
+            this.added = true;
+        }
+    }
+    componentWillUnmount() {
+        const { tracker } = this.props;
+        if (this.added) {
+            (tracker || globalTracker).removeTrackedComponent(this);
+        }
+    }
+    render() {
+        return this.props.children;
+    }
+}

package/esm/react/components/SixDigitInput.js

@@ -0,0 +1,158 @@
+import React from "react";
+export class SixDigitInput extends React.Component {
+    inputRefs = [null, null, null, null, null, null];
+    focusedOnce = false;
+    cursorOverride;
+    cursorKeyDownPos = 0;
+    focus() {
+        const v = this.inputRefs[0];
+        if (v)
+            v.focus();
+    }
+    onChangeNth(e, idx) {
+        const newValue = e.target.value;
+        const { value } = this.props;
+        const oldValue = value.length > idx ? value[idx] : "";
+        let nextValue = "";
+        let move = 0;
+        if (oldValue === "") {
+            nextValue = value + newValue;
+            const shouldBeAt = Math.min(5, nextValue.length);
+            move = shouldBeAt - idx;
+        }
+        else if (oldValue !== "") {
+            const ar = value.split("");
+            ar.splice(idx, 1, ...newValue.split(""));
+            nextValue = ar.join("");
+            if (this.cursorKeyDownPos === 1)
+                move = 1;
+        }
+        nextValue = nextValue.substring(0, 6);
+        this.onChange(nextValue, idx, move);
+    }
+    onChange(nextValue, idx, move) {
+        this.props.onChange(nextValue);
+        if (nextValue.length === 6) {
+            const e6 = this.props.onEnteredSixDigits;
+            if (e6) {
+                setTimeout(e6, 0);
+            }
+        }
+        if (move !== 0) {
+            const r = this.inputRefs[idx + move];
+            if (r) {
+                r.focus();
+                if (move > 0) {
+                    r.setSelectionRange(0, 0);
+                }
+                else {
+                    r.setSelectionRange(1, 1);
+                }
+            }
+        }
+    }
+    onKeyDownNth(idx, e) {
+        const pos = this.inputRefs[idx]?.selectionStart || 0;
+        const { value } = this.props;
+        const v = value.length > idx ? value[idx] : "";
+        const absPos = idx + pos;
+        const isFirst = pos === 0;
+        const isLast = v.length > 0 ? pos === 1 : true;
+        switch (e.keyCode) {
+            case 8: // backspace
+                e.preventDefault();
+                if (absPos > 0 && absPos <= value.length) {
+                    if (pos === 1)
+                        this.cursorOverride = { idx, pos: 0 };
+                    if (pos === 0)
+                        this.cursorOverride = { idx: idx - 1, pos: 0 };
+                    const ar = value.split("");
+                    ar.splice(absPos - 1, 1);
+                    this.onChange(ar.join(""), idx, pos === 0 ? -1 : 0);
+                }
+                break;
+            case 46: // delete
+                e.preventDefault();
+                if (value.length > absPos) {
+                    if (pos === 0)
+                        this.cursorOverride = { idx, pos: 0 };
+                    const ar = value.split("");
+                    ar.splice(absPos, 1);
+                    this.onChange(ar.join(""), idx, 0);
+                }
+                break;
+            case 37: // arrow left
+                if (isFirst) {
+                    e.preventDefault();
+                    if (idx > 0) {
+                        const r = this.inputRefs[idx - 1];
+                        if (r) {
+                            r.focus();
+                            r.setSelectionRange(1, 1);
+                        }
+                    }
+                }
+                break;
+            case 39: // arrow right
+                if (isLast) {
+                    e.preventDefault();
+                    if (idx < 5) {
+                        const r = this.inputRefs[idx + 1];
+                        if (r) {
+                            r.focus();
+                            r.setSelectionRange(0, 0);
+                        }
+                    }
+                }
+                break;
+            case 36: // home
+                {
+                    const r = this.inputRefs[0];
+                    if (r) {
+                        r.focus();
+                        r.setSelectionRange(0, 0);
+                    }
+                }
+                break;
+            case 35: // end
+                {
+                    const r = this.inputRefs[value.length === 6 ? 5 : value.length];
+                    if (r) {
+                        r.focus();
+                        r.setSelectionRange(1, 1);
+                    }
+                }
+                break;
+            default:
+                if (value.length === 6)
+                    e.preventDefault();
+                this.cursorKeyDownPos = pos;
+                break;
+        }
+    }
+    getValue(idx) {
+        const { value } = this.props;
+        return value.length > idx ? value[idx] : "";
+    }
+    componentDidUpdate() {
+        const co = this.cursorOverride;
+        if (co) {
+            this.inputRefs[co.idx]?.setSelectionRange(co.pos, co.pos);
+            this.cursorOverride = undefined;
+        }
+    }
+    render() {
+        const { autoFocus, className, inputClassName } = this.props;
+        return (React.createElement("div", { className: className }, [0, 1, 2, 3, 4, 5].map((i) => (React.createElement("input", { key: i, inputMode: "numeric", pattern: "[0-9]*", autoComplete: "off", type: "text", ref: (e) => {
+                this.inputRefs[i] = e;
+                if (i === 0 && autoFocus && !this.focusedOnce && e) {
+                    this.focusedOnce = true;
+                    e.focus();
+                }
+            }, className: inputClassName, value: this.getValue(i), onKeyDown: (e) => {
+                this.onKeyDownNth(i, e);
+            }, onChange: (e) => {
+                this.onChangeNth(e, i);
+            } })))));
+    }
+}