@lana-commerce/core 11.0.0

package/esm/react/contains.js

@@ -0,0 +1,10 @@
+const DOCUMENT_POSITION_CONTAINED_BY = 16;
+export function contains(container, elem) {
+    if (!container || !elem)
+        return false;
+    if (container.contains) {
+        return container.contains(elem);
+    }
+    const comparison = container.compareDocumentPosition(elem);
+    return comparison === 0 || (comparison & DOCUMENT_POSITION_CONTAINED_BY) !== 0;
+}

package/esm/react/popperBinder.js

@@ -0,0 +1,71 @@
+import ReactDOM from "react-dom";
+import Popper from "../vendor/popper/index.js";
+export class PopperBinder {
+    params;
+    popper = null;
+    triggerRef = null;
+    menuRef = null;
+    onUpdateCallbacks = [];
+    constructor(params) {
+        this.params = params;
+    }
+    handleUpdateMenuRef = (e) => {
+        this.menuRef = e;
+        this.hookPopper(this.triggerRef, this.menuRef);
+    };
+    handleUpdateTriggerRef = (e) => {
+        this.triggerRef = e;
+        this.hookPopper(this.triggerRef, this.menuRef);
+    };
+    addOnUpdateCallback(newCB) {
+        if (this.onUpdateCallbacks.some((cb) => cb === newCB))
+            return;
+        this.onUpdateCallbacks.push(newCB);
+    }
+    removeOnUpdateCallback(oldCB) {
+        const idx = this.onUpdateCallbacks.findIndex((cb) => cb === oldCB);
+        if (idx !== -1)
+            this.onUpdateCallbacks.splice(idx, 1);
+    }
+    handleUpdate = () => {
+        for (const cb of this.onUpdateCallbacks)
+            cb();
+    };
+    hookPopper(triggerRef, menuRef) {
+        const { noFlip, scrollFlip, placement, parentWidth } = this.params;
+        if (this.popper && (!triggerRef || !menuRef)) {
+            this.popper.destroy();
+            this.popper = null;
+            return;
+        }
+        if (!this.popper && triggerRef && menuRef) {
+            const triggerEl = ReactDOM.findDOMNode(triggerRef);
+            const menuEl = ReactDOM.findDOMNode(menuRef);
+            this.popper = new Popper(triggerEl, menuEl, {
+                onUpdate: this.handleUpdate,
+                placement: placement || "bottom-end",
+                modifiers: {
+                    hide: { enabled: false },
+                    preventOverflow: { enabled: false },
+                    flip: { enabled: !noFlip, boundariesElement: scrollFlip ? "scrollParent" : "viewport" },
+                    ...(parentWidth
+                        ? {
+                            applyWidthToStyle: {
+                                enabled: true,
+                                fn: (data) => {
+                                    data.styles.width = `${data.offsets.reference.width}`;
+                                    return data;
+                                },
+                                order: 890,
+                            },
+                        }
+                        : {}),
+                },
+            });
+        }
+    }
+    update() {
+        if (this.popper)
+            this.popper.update();
+    }
+}

package/esm/react/rootClose.js

@@ -0,0 +1,106 @@
+import ReactDOM from "react-dom";
+import { contains } from "./contains.js";
+import { generateUUID } from "../generateUUID.js";
+const escapeKeyCode = 27;
+function isLeftClickEvent(event) {
+    return event.button === 0;
+}
+function isModifierEvent(event) {
+    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
+}
+function isWidthBelowWidth(comp) {
+    const w = comp?.opts?.ignoreBelowWidth;
+    if (w === undefined)
+        return false;
+    return window.innerWidth < w;
+}
+function isWidthAboveWidth(comp) {
+    const w = comp?.opts?.ignoreAboveWidth;
+    if (w === undefined)
+        return false;
+    return window.innerWidth >= w;
+}
+function shouldDoNothing(event, hierarchical, trackedComponents) {
+    const len = trackedComponents.length;
+    const last = len > 0 ? trackedComponents[len - 1] : undefined;
+    if (isWidthBelowWidth(last) || isWidthAboveWidth(last))
+        return true;
+    const tag = last?.tag;
+    const group = trackedComponents.filter((comp) => comp.tag === tag);
+    return (isModifierEvent(event) ||
+        !isLeftClickEvent(event) ||
+        (hierarchical && len > 0
+            ? group.some((comp) => contains(ReactDOM.findDOMNode(comp.instance), event.target))
+            : trackedComponents.some((comp) => contains(ReactDOM.findDOMNode(comp.instance), event.target))));
+}
+export class RootCloseTracker {
+    hierarchical;
+    mouseDownStatus = "do_nothing";
+    trackedComponents = [];
+    constructor(hierarchical) {
+        this.hierarchical = hierarchical;
+    }
+    addTrackedComponent(v, tag, onRootClose, opts) {
+        this.trackedComponents.push({ instance: v, onRootClose, tag: tag || generateUUID(), opts });
+        if (this.trackedComponents.length === 1) {
+            // added first one, setup event listeners
+            this.addEventListeners();
+        }
+    }
+    removeTrackedComponent(v) {
+        const i = this.trackedComponents.findIndex((comp) => comp.instance === v);
+        if (i !== -1) {
+            this.trackedComponents.splice(i, 1);
+        }
+        if (this.trackedComponents.length === 0) {
+            // removed last one, remove event listeners
+            this.removeEventListeners();
+        }
+    }
+    handleMouseDownCapture = (e) => {
+        const len = this.trackedComponents.length;
+        if (len === 0)
+            return;
+        this.mouseDownStatus = shouldDoNothing(e, this.hierarchical, this.trackedComponents) ? "do_nothing" : "close";
+    };
+    handleClickCapture = (e) => {
+        const len = this.trackedComponents.length;
+        if (len === 0)
+            return;
+        const shouldClose = !shouldDoNothing(e, this.hierarchical, this.trackedComponents);
+        if (shouldClose && this.mouseDownStatus === "close") {
+            if (this.hierarchical && len > 1) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            this.trackedComponents[len - 1].onRootClose();
+        }
+    };
+    handleKeyUp = (e) => {
+        const len = this.trackedComponents.length;
+        const last = len > 0 ? this.trackedComponents[len - 1] : undefined;
+        if (isWidthBelowWidth(last) || isWidthAboveWidth(last))
+            return;
+        if (e.keyCode === escapeKeyCode && last) {
+            last.onRootClose();
+        }
+    };
+    addEventListeners() {
+        document.addEventListener("mousedown", this.handleMouseDownCapture, true);
+        document.addEventListener("click", this.handleClickCapture, true);
+        document.addEventListener("keyup", this.handleKeyUp);
+        // we took root close wrapper from some other project and it had those mobile safari hacks, I
+        // wasn't able to find the exact details on what it does and whether it's even still relevant today
+        // hence commenting it out for now
+        // if ("ontouchstart" in document.documentElement) {
+        //   this.mobileSafariHackListeners = [].slice.call(document.body.children).map(el => listen(el, "mousemove", noop));
+        // }
+    }
+    removeEventListeners() {
+        document.removeEventListener("keyup", this.handleKeyUp);
+        document.removeEventListener("click", this.handleClickCapture, true);
+        document.removeEventListener("mousedown", this.handleMouseDownCapture, true);
+        // if (this.mobileSafariHackListeners)
+        //   this.mobileSafariHackListeners.forEach(remove => remove())
+    }
+}

package/esm/react/translateLocalStatic.js

@@ -0,0 +1,26 @@
+/**
+ * @jsx React.createElement
+ * @jsxFrag React.Fragment
+ */
+import React, { cloneElement, isValidElement } from "react";
+import { format } from "../formatToJSX.js";
+import { getLocale } from "../translateLocale.js";
+const formatJSXConfig = {
+    cloneElement,
+    isValidElement,
+    toFragment: (v) => React.createElement(React.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/react/useAsyncCachedValue.js

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+export function useAsyncCachedValue(loader) {
+    const [value, setValue] = useState(loader.value);
+    useEffect(() => {
+        if (!value) {
+            loader.load().then(setValue);
+        }
+    }, []);
+    return value;
+}

package/esm/refreshTimeout.js

@@ -0,0 +1,21 @@
+export function refreshTimeout(f, delayMs) {
+    let timeout;
+    const ff = () => {
+        timeout = undefined;
+        f();
+    };
+    timeout = setTimeout(ff, delayMs);
+    return {
+        clear: () => {
+            if (timeout)
+                clearTimeout(timeout);
+            timeout = undefined;
+        },
+        refresh: () => {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = setTimeout(ff, delayMs);
+            }
+        },
+    };
+}

package/esm/remoteAuth.js

@@ -0,0 +1,52 @@
+import Postmate from "postmate";
+import jwtDecode from "jwt-decode";
+import { getSalesChannelID } from "./getSalesChannelID.js";
+import { getSessionID } from "./getSessionID.js";
+import { sleep } from "./sleep.js";
+export function authFromJWT(jwt) {
+    let customerID = "";
+    if (jwt) {
+        try {
+            const data = jwtDecode(jwt);
+            customerID = data.customer_id;
+        }
+        catch {
+            // do nothing
+        }
+    }
+    return jwt && customerID ? { kind: "authorized", jwt, customerID, customerEmail: "" } : { kind: "not_authorized" };
+}
+let globalPostmate;
+export function getRemote(url) {
+    if (!globalPostmate) {
+        let el = document.getElementById("remote-container");
+        if (!el) {
+            el = document.createElement("div");
+            el.style.display = "none";
+            document.body.appendChild(el);
+        }
+        globalPostmate = new Postmate({
+            container: el,
+            url,
+        });
+    }
+    return globalPostmate;
+}
+export function setRemoteAuth(pm, jwt, timeout = 3000) {
+    return Promise.race([
+        pm
+            .then((pm) => {
+            pm.call("setAuth", authFromJWT(jwt));
+            const sessionID = getSessionID();
+            if (sessionID) {
+                pm.call("setSessionID", sessionID);
+            }
+            const salesChannelID = getSalesChannelID();
+            if (salesChannelID) {
+                pm.call("setSalesChannelID", salesChannelID);
+            }
+        })
+            .then(() => "success"),
+        sleep(timeout).then(() => "timeout"),
+    ]);
+}

package/esm/request.js

@@ -0,0 +1,323 @@
+import { ErrorCode } from "./generated/codes.js";
+import { BUILD_CONFIG } from "./buildconfig.js";
+import { requestDetails } from "./requestDetails.js";
+import { generateUUID } from "./generateUUID.js";
+import { getSalesChannelID } from "./getSalesChannelID.js";
+import { getSessionID } from "./getSessionID.js";
+import { nonNull } from "./nonNull.js";
+import { sleep } from "./sleep.js";
+export const defaultNextTryInMS = (n) => {
+    switch (n) {
+        case 0:
+            return 100;
+        case 1:
+            return 200;
+        case 2:
+            return 500;
+        case 3:
+            return 1000;
+        case 4:
+        default:
+            return 2000;
+    }
+};
+export const defaultTimeoutMS = (n) => {
+    switch (n) {
+        case 0:
+            return 3000;
+        case 1:
+            return 6000;
+        case 2:
+        default:
+            return 9000;
+    }
+};
+export const extendedTimeoutMS = (n) => {
+    switch (n) {
+        case 0:
+            return 18000;
+        case 1:
+            return 18000 * 2;
+        case 2:
+        default:
+            return 18000 * 3;
+    }
+};
+function jitter(v) {
+    const vv = v / 2;
+    return vv + Math.round(Math.random() * vv);
+}
+const neverPromise = new Promise(() => { });
+export async function backoffRetry(cb, opts) {
+    const tries = opts ? opts.numTries || 5 : 5;
+    let tooManyRequestsCount = 0;
+    let i = 0;
+    while (true) {
+        const nextTryInMS = jitter((opts && opts.getNextTryInMS ? opts.getNextTryInMS : defaultNextTryInMS)(i));
+        const timeoutMS = (opts && opts.getTimeoutMS ? opts.getTimeoutMS : defaultTimeoutMS)(i);
+        const result = await cb(timeoutMS);
+        const info = { result, nextTryInMS, attemptNumber: i + 1, totalAttempts: tries };
+        opts?.reportResult?.(info);
+        if (result.type === "exhausted") {
+            tooManyRequestsCount++;
+            await sleep(jitter(500 * tooManyRequestsCount));
+            continue;
+        }
+        if (result.type === "expected" || i === tries - 1) {
+            return result.value;
+        }
+        await Promise.race([sleep(nextTryInMS), opts?.forceNextTry?.(info) || neverPromise]);
+        i++;
+    }
+}
+//=====================================================================================================
+//=====================================================================================================
+function canContainFields(v) {
+    return typeof v === "object" && v !== null;
+}
+function isGraphQLData(body) {
+    if (!canContainFields(body))
+        return false;
+    if (body.data !== undefined)
+        return true;
+    return false;
+}
+function isGraphQLError(body) {
+    if (!canContainFields(body))
+        return false;
+    if (body.errors !== undefined && Array.isArray(body.errors))
+        return true;
+    return false;
+}
+function addAuthMaybe(headers, opts) {
+    if (opts?.authToken)
+        headers["Authorization"] = "Bearer " + opts.authToken;
+}
+function addSessionIDMaybe(headers, opts) {
+    const sessionID = opts?.sessionID || getSessionID();
+    if (sessionID)
+        headers["Session-Id"] = sessionID;
+}
+function addSalesChannelIDMaybe(headers, opts) {
+    const salesChannelID = opts?.salesChannelID || getSalesChannelID();
+    if (salesChannelID)
+        headers["Sales-Channel-Id"] = salesChannelID;
+}
+function addDeviceIDMaybe(headers, opts) {
+    const deviceID = opts?.deviceID;
+    if (deviceID)
+        headers["Device-Id"] = deviceID;
+}
+function addLocaleMaybe(headers, opts) {
+    if (opts?.locale)
+        headers["Locale"] = opts.locale;
+}
+export function requestErrorPrefix(details) {
+    const fields = [];
+    const { operations } = details;
+    fields.push(`Url: ${details.url}`);
+    if (details.authToken) {
+        fields.push(`AuthToken: ${details.authToken}`);
+    }
+    if (details.uuid) {
+        fields.push(`IdempotencyKey: ${details.uuid}`);
+    }
+    if (details.sessionID) {
+        fields.push(`SessionId: ${details.sessionID}`);
+    }
+    if (details.salesChannelID) {
+        fields.push(`SalesChannelId: ${details.salesChannelID}`);
+    }
+    if (details.deviceID) {
+        fields.push(`DeviceId: ${details.deviceID}`);
+    }
+    if (details.locale) {
+        fields.push(`Locale: ${details.locale}`);
+    }
+    for (let i = 0; i < operations.length; i++) {
+        const opIndex = operations.length > 1 ? ` ${i + 1}` : "";
+        fields.push(`Operation${opIndex}: ${operations[i]}`);
+    }
+    if (details.variables) {
+        try {
+            fields.push(`Variables: ${JSON.stringify(details.variables, null, 2)}`);
+        }
+        catch {
+            fields.push(`Variables: <JSON.stringify failed>`);
+        }
+    }
+    return `GraphQL API request failed:\n${fields.join("\n")}\n`;
+}
+export function prettyPrintGraphErrors(errors) {
+    return errors.map(prettyPrintGraphError).join("\n");
+}
+export function prettyPrintAPIError(err) {
+    const msg = err.message;
+    const code = err.code;
+    const meta = err.meta;
+    const metaSuffix = meta ? "\n" + JSON.stringify(meta, null, 2) : "";
+    const codeStr = code ? ErrorCode[code] : "";
+    const text = msg && code ? `[${codeStr}] ${msg}` : msg ? msg : codeStr;
+    return `${text}${metaSuffix}`;
+}
+export function prettyPrintGraphError(gerr) {
+    const apiError = gerr.apiError;
+    if (apiError) {
+        return prettyPrintAPIError(apiError);
+    }
+    else {
+        return gerr ? gerr.message : "Unknown error";
+    }
+}
+export function prettyPrintRequestResponseError(err, detailed) {
+    if (err.kind === "error") {
+        const pfx = detailed ? requestErrorPrefix(err.details) : "";
+        return pfx + prettyPrintGraphError(err.error);
+    }
+    else if (err.kind === "custom_error") {
+        return err.text;
+    }
+    else {
+        const pfx = detailed ? requestErrorPrefix(err.details) : "";
+        switch (err.type) {
+            case "fetch_not_defined":
+                return pfx + '"fetch" not defined, missing polyfill?';
+            case "timeout":
+                return pfx + "HTTP request timed out after all retries";
+            case "no_error":
+                return pfx + "HTTP response contains no GraphQL error or it's ambiguous";
+            case "no_status":
+                return pfx + "HTTP request didn't respond with status code, connectivity problem?";
+            case "bad_status":
+                return pfx + "HTTP response contains status ≥ 500";
+            case "unrecognized_data_body":
+                return pfx + "HTTP response doesn't look like GraphQL data body";
+            case "unrecognized_error_body":
+                return pfx + "HTTP response doesn't look like GraphQL error body";
+            case "more_than_one_operation":
+                return pfx + "GraphQL request contains more than one operation, single operation expected";
+        }
+    }
+}
+export function request(query) {
+    return async (variables, opts) => {
+        const resp = await graphqlBackoffRetry(query, variables, opts);
+        if (resp.kind === "system_error") {
+            return {
+                kind: "system_error",
+                type: resp.type,
+                details: resp.details,
+            };
+        }
+        const ks = resp.data ? Object.keys(resp.data) : [];
+        if (resp.data && ks.length === 1 && resp.data[ks[0]]) {
+            const data = nonNull(resp.data[ks[0]], "request response data");
+            return { kind: "data", data };
+        }
+        else if (ks.length > 1) {
+            return {
+                kind: "system_error",
+                type: "more_than_one_operation",
+                details: resp.details,
+            };
+        }
+        else {
+            const errs = resp.errors;
+            const error = errs?.length === 1 ? errs[0] : undefined;
+            const details = resp.details;
+            return error ? { kind: "error", error, details } : { kind: "system_error", type: "no_error", details };
+        }
+    };
+}
+export function requestMulti(query) {
+    return (variables, opts) => {
+        return graphqlBackoffRetry(query, variables, opts);
+    };
+}
+const hasSHA256 = globalThis?.crypto?.subtle !== undefined;
+async function sha256(query) {
+    const utf8buf = new TextEncoder().encode(query);
+    const hashBuffer = await globalThis.crypto.subtle.digest("SHA-256", utf8buf);
+    return Array.from(new Uint8Array(hashBuffer))
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join("");
+}
+export async function graphqlBackoffRetry(query, variables, opts) {
+    const url = opts?.url || `${BUILD_CONFIG.API_URL}/${opts?.commerce ? "commerce" : "storefront"}.json`;
+    const uuid = generateUUID();
+    const details = requestDetails(query, variables, opts, uuid);
+    const result = await backoffRetry(async (timeout) => {
+        try {
+            const headers = {
+                "Content-Type": "application/json",
+                "Idempotency-Key": uuid,
+            };
+            addAuthMaybe(headers, opts);
+            addLocaleMaybe(headers, opts);
+            addSalesChannelIDMaybe(headers, opts);
+            addSessionIDMaybe(headers, opts);
+            addDeviceIDMaybe(headers, opts);
+            const controller = new AbortController();
+            const timeoutHandle = setTimeout(() => {
+                controller.abort();
+            }, timeout);
+            let includeQuery = hasSHA256 ? false : true;
+            while (true) {
+                const req = { query, variables };
+                if (!includeQuery) {
+                    delete req.query;
+                }
+                if (hasSHA256) {
+                    req.extensions = { persistedQuery: { version: 1, sha256Hash: await sha256(query) } };
+                }
+                if (typeof fetch === "undefined") {
+                    return { type: "expected", value: { kind: "system_error", type: "fetch_not_defined", details } };
+                }
+                const resp = await fetch(url, {
+                    method: "POST",
+                    body: JSON.stringify(req),
+                    headers,
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutHandle);
+                if (resp.status === 429)
+                    return { type: "exhausted" };
+                const isJSON = (resp.headers.get("content-type")?.indexOf("application/json") ?? -1) !== -1;
+                const body = isJSON ? await resp.json() : undefined;
+                if (isGraphQLError(body) && !includeQuery && body.errors.some((e) => e.message === "PersistedQueryNotFound")) {
+                    includeQuery = true;
+                    continue;
+                }
+                if (resp.status >= 200 && resp.status < 300) {
+                    if (!isGraphQLData(body)) {
+                        return { type: "unexpected", value: { kind: "system_error", type: "unrecognized_data_body", details } };
+                    }
+                    return { type: "expected", value: { kind: "data_or_error", ...body, details } };
+                }
+                else {
+                    // something returned from http server
+                    if (resp.status >= 500) {
+                        return { type: "unexpected", value: { kind: "system_error", type: "bad_status", details } };
+                    }
+                    if (!isGraphQLError(body)) {
+                        return { type: "unexpected", value: { kind: "system_error", type: "unrecognized_error_body", details } };
+                    }
+                    if (body.errors.every((e) => e.apiError?.code === 500)) {
+                        return { type: "unexpected", value: { kind: "system_error", type: "bad_status", details } };
+                    }
+                    return { type: "expected", value: { kind: "data_or_error", ...body, details } };
+                }
+            }
+        }
+        catch (err) {
+            const isTimeout = err && err.name && err.name === "AbortError";
+            if (isTimeout) {
+                return { type: "unexpected", value: { kind: "system_error", type: "timeout", details } };
+            }
+            else {
+                return { type: "unexpected", value: { kind: "system_error", type: "no_status", details } };
+            }
+        }
+    }, opts);
+    return result;
+}

package/esm/requestDetails.js

@@ -0,0 +1,69 @@
+import { BUILD_CONFIG } from "./buildconfig.js";
+export function trimComments(v) {
+    return v.replace(/#.*$/gm, "");
+}
+const balancedMap = {
+    "(": ")",
+    "{": "}",
+};
+export function skipToBalanced(v, i) {
+    if (i === -1)
+        return -1;
+    const left = v[i];
+    const right = balancedMap[v[i]];
+    if (!right)
+        throw new Error(`index must point at balanced character, one of: ${Object.keys(balancedMap).join(", ")}`);
+    let balance = 0;
+    while (i < v.length) {
+        const c = v[i];
+        if (c === left) {
+            balance++;
+        }
+        else if (c === right) {
+            balance--;
+        }
+        if (balance === 0)
+            return i;
+        i++;
+    }
+    return -1;
+}
+export function extractGraphQLOperations(v) {
+    v = trimComments(v);
+    const out = [];
+    while (true) {
+        v = v.trim();
+        const m = /fragment|query|mutation|{/g.exec(v);
+        if (!m)
+            return out;
+        v = v.substring(m.index);
+        if (v.startsWith("fragment")) {
+            const i = skipToBalanced(v, v.indexOf("{"));
+            if (i === -1)
+                return out;
+            v = v.substring(i + 1);
+        }
+        else {
+            const i = skipToBalanced(v, v.indexOf("{"));
+            if (i === -1)
+                return out;
+            out.push(v.substring(0, i + 1));
+            v = v.substring(i + 1);
+        }
+        continue;
+    }
+}
+export function requestDetails(query, variables, opts, uuid) {
+    const operations = extractGraphQLOperations(query);
+    return {
+        operations,
+        variables,
+        url: opts?.url || `${BUILD_CONFIG.API_URL}/${opts?.commerce ? "commerce" : "storefront"}.json`,
+        authToken: opts?.authToken,
+        locale: opts?.locale,
+        sessionID: opts?.sessionID,
+        salesChannelID: opts?.salesChannelID,
+        deviceID: opts?.deviceID,
+        uuid,
+    };
+}