@blotoutio/providers-evo-search-sdk 1.71.1 → 1.72.0

package/hooks.mjs

@@ -3433,6 +3433,443 @@ const useEvoSearchAPI = () => {
     return { ready: ctx.ready, api: ctx.api };
 };
 
+/**
+ * Storefront-local helpers, deliberately separate from the worker-scoped API
+ * client: `api.ts` injects identity params and headers that must never reach
+ * the merchant's own origin, and its `credentials: omit` policy is the
+ * opposite of what storefront requests (which ride the cart cookie) need.
+ */
+/**
+ * The storefront's root path. Shopify publishes it (locale prefix included,
+ * e.g. `/en-ca/`) on `window.Shopify.routes.root`; default to `/`.
+ */
+const storefrontRoot = () => {
+    var _a, _b;
+    if (typeof window === 'undefined') {
+        return '/';
+    }
+    const root = (_b = (_a = window.Shopify) === null || _a === void 0 ? void 0 : _a.routes) === null || _b === void 0 ? void 0 : _b.root;
+    return typeof root === 'string' && root.startsWith('/') && root.endsWith('/')
+        ? root
+        : '/';
+};
+/* ------------------------------------------------------------------ *
+ * Theme quick-add handoff
+ *
+ * Whatever a merchant's quick-add opens — a modal, a side drawer, a plain
+ * navigation — their own product card already knows how to open it. So the
+ * tile borrows that card and presses its button rather than emulating any
+ * one theme's surface. Nothing here is written against a specific theme:
+ * the results section and the trigger are both read off the storefront at
+ * runtime, and a store with no quick-add at all resolves to `false` so the
+ * caller keeps its product link.
+ * ------------------------------------------------------------------ */
+/**
+ * Our own markup, which must never be mistaken for the theme's card. Every
+ * surface we render is `evs-` prefixed — the custom elements by tag, the
+ * managed page by class — so the prefix is the test rather than a list that
+ * would fall behind the next component.
+ */
+const isEvoSearchMarkup = (node) => node.tagName.startsWith('EVS-') ||
+    node.hasAttribute('data-evo-search-quick-add') ||
+    Array.from(node.classList).some((name) => name.startsWith('evs-'));
+const QUICK_ADD_PATTERN = /quick[-_]?(add|shop|view|buy)|choose[-_]?option/i;
+/** The same words as a selector, so presence is one query rather than a walk. */
+const QUICK_ADD_HINT = '[class*="quick-add" i],[class*="quickadd" i],[class*="quick-shop" i],' +
+    '[class*="quickshop" i],[class*="quick-view" i],[class*="quickview" i],' +
+    '[class*="quick-buy" i],[class*="quickbuy" i],quick-add,quick-add-component,' +
+    'quick-add-modal,quick-shop,quick-view';
+const productHandleOf = (link) => { var _a, _b, _c; return (_c = (_b = /\/products\/([^/?#]+)/.exec((_a = link.getAttribute('href')) !== null && _a !== void 0 ? _a : '')) === null || _b === void 0 ? void 0 : _b[1]) !== null && _c !== void 0 ? _c : null; };
+const isThemeOwned = (element) => {
+    for (let node = element; node; node = node.parentElement) {
+        if (isEvoSearchMarkup(node))
+            return false;
+    }
+    return true;
+};
+const attributeSignal = (element) => {
+    var _a, _b;
+    return `${element.tagName} ${(_a = element.getAttribute('class')) !== null && _a !== void 0 ? _a : ''} ${(_b = element.getAttribute('data-quick-add-button')) !== null && _b !== void 0 ? _b : ''}`;
+};
+const holdsQuickAdd = (element) => element.querySelector(QUICK_ADD_HINT) !== null;
+/**
+ * Whether this storefront does quick-add at all, read off the theme's own
+ * cards. A tile asks before it names its own call to action: promising an add
+ * on a storefront that can only offer the product page is a worse answer than
+ * naming the detour. Page scope, so a probe reads it once and every tile in
+ * the pass shares the answer; never remembered across passes, because a "no"
+ * from an early render would outlive the markup that made it true.
+ */
+const pageHasThemeQuickAdd = () => {
+    if (typeof document === 'undefined')
+        return false;
+    try {
+        return Array.from(document.querySelectorAll(QUICK_ADD_HINT)).some(isThemeOwned);
+    }
+    catch {
+        return false;
+    }
+};
+/** True until the climb reaches the grid, where a sibling product appears. */
+const holdsOnlyProduct = (element, handle) => {
+    const links = element.querySelectorAll('a[href*="/products/"]');
+    return (links.length > 0 &&
+        Array.from(links).every((link) => productHandleOf(link) === handle));
+};
+/**
+ * The theme's card for one product. Deliberately the OUTERMOST wrapper that
+ * still belongs to this product alone: a theme's quick-add resolves the
+ * product through its own card element (Horizon reads
+ * `closest('product-card')`), so handing it an inner fragment that merely
+ * contains the button leaves it without a product to open.
+ */
+const themeCardFor = (root, handle) => {
+    const link = Array.from(root.querySelectorAll('a[href*="/products/"]')).find((candidate) => productHandleOf(candidate) === handle && isThemeOwned(candidate));
+    if (!link)
+        return null;
+    let card = null;
+    let node = link.parentElement;
+    for (let depth = 0; node && depth < 10; depth += 1) {
+        if (node.id.startsWith('shopify-section-') ||
+            !holdsOnlyProduct(node, handle)) {
+            break;
+        }
+        if (holdsQuickAdd(node))
+            card = node;
+        node = node.parentElement;
+    }
+    return card;
+};
+/**
+ * The section that renders the theme's own product grid, read off the page
+ * rather than configured: Shopify stamps every section as
+ * `shopify-section-<id>`, and the one holding the most product links is the
+ * grid. A storefront with no sections at all (headless) yields null, which
+ * is what keeps the handoff from firing there.
+ */
+const themeGridSectionId = () => {
+    var _a;
+    let best = null;
+    for (const section of Array.from(document.querySelectorAll('[id^="shopify-section-"]'))) {
+        const links = Array.from(section.querySelectorAll('a[href*="/products/"]')).filter(isThemeOwned).length;
+        if (links > 0 && (!best || links > best.links)) {
+            best = { id: section.id.slice('shopify-section-'.length), links };
+        }
+    }
+    return (_a = best === null || best === void 0 ? void 0 : best.id) !== null && _a !== void 0 ? _a : null;
+};
+const themeCardCache = new Map();
+/**
+ * Handles the theme's own grid section came back without a card for. Worth
+ * remembering, because it is a fact about the theme's results rather than a
+ * transient failure — a refused or failed fetch records nothing — and a card
+ * that mounts on the page later is found before this set is consulted.
+ */
+const themeCardMisses = new Set();
+/** Ask the storefront to render its own grid for this product alone. */
+const fetchThemeCard = async (request, handle) => {
+    const cached = themeCardCache.get(handle);
+    if (cached)
+        return cached;
+    if (themeCardMisses.has(handle))
+        return null;
+    const sectionId = themeGridSectionId();
+    if (!sectionId)
+        return null;
+    const response = await request(`${storefrontRoot()}search?q=${encodeURIComponent(handle)}&section_id=${encodeURIComponent(sectionId)}`, { credentials: 'same-origin' });
+    if (!response.ok)
+        return null;
+    const document_ = new DOMParser().parseFromString(await response.text(), 'text/html');
+    const card = themeCardFor(document_, handle);
+    if (!card) {
+        themeCardMisses.add(handle);
+        return null;
+    }
+    const imported = document.importNode(card, true);
+    themeCardCache.set(handle, imported);
+    return imported;
+};
+/**
+ * A borrowed card has to be genuinely laid out: `display:none`,
+ * `visibility:hidden` and `inert` all leave the trigger unclickable, and a
+ * theme that renders its quick-add surface inside the card would render it
+ * hidden too. Off-screen it is, with no `transform` — that would make this
+ * host the containing block for the theme's own fixed-position dialog.
+ */
+const quickAddHost = () => {
+    const existing = document.querySelector('[data-evo-search-quick-add]');
+    if (existing instanceof HTMLElement)
+        return existing;
+    const host = document.createElement('div');
+    host.setAttribute('data-evo-search-quick-add', '');
+    host.style.cssText =
+        'position:fixed;top:0;left:-10000px;width:360px;height:1px;overflow:visible';
+    document.body.appendChild(host);
+    return host;
+};
+/**
+ * A card commonly carries more than one trigger and hides all but the live
+ * one — Horizon ships a direct-add submit beside a "choose options" button
+ * and drops one out of the layout in CSS. Computed style is the discriminator
+ * (rather than geometry, which an off-screen host would answer for), read up
+ * to the card so a hidden wrapper counts.
+ */
+const isRendered = (element, root) => {
+    const view = element.ownerDocument.defaultView;
+    if (!view)
+        return true;
+    for (let node = element; node; node = node.parentElement) {
+        const style = view.getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return false;
+        if (node === root)
+            break;
+    }
+    return true;
+};
+const ancestorsWithin = (element, root) => {
+    const chain = [];
+    for (let node = element.parentElement; node && node !== root.parentElement; node = node.parentElement) {
+        chain.push(node);
+    }
+    return chain;
+};
+/**
+ * Every control that can submit a form: a button or an `<input>` whose type is
+ * `submit` or `image` — `<button>` submits by default, `<input>` does not.
+ */
+const isSubmitter = (candidate) => (candidate instanceof HTMLButtonElement && candidate.type !== 'button') ||
+    (candidate instanceof HTMLInputElement &&
+        (candidate.type === 'submit' || candidate.type === 'image'));
+/**
+ * Whether clicking this element posts the native cart form. `formaction` is
+ * read off the attribute rather than the property, which resolves against the
+ * document URL and so is never empty.
+ */
+const submitsCartForm = (candidate) => {
+    if (!isSubmitter(candidate))
+        return false;
+    const override = candidate.getAttribute('formaction');
+    if (override)
+        return override.includes('/cart/add');
+    return candidate.closest('form[action*="/cart/add"]') !== null;
+};
+/**
+ * Whether clicking this element does anything of its own. `click()` on a
+ * `<div>` dispatches a real bubbling event, so a theme listening higher up
+ * would still open — but a bare div carries no activation behaviour, and the
+ * two are indistinguishable from here. Declining trades that delegated
+ * listener for a product link the shopper can always complete, which is the
+ * better half of the trade: a detour beats a click that does nothing.
+ *
+ * A theme's own custom element counts, because that is where a theme usually
+ * puts its quick-add. Only the configured path is narrowed by this — the
+ * heuristic already queries nothing but `button` and `a[role="button"]`.
+ */
+const isActionable = (candidate) => ['BUTTON', 'INPUT', 'SELECT', 'SUMMARY', 'LABEL'].includes(candidate.tagName) ||
+    (candidate instanceof HTMLAnchorElement && candidate.hasAttribute('href')) ||
+    candidate.hasAttribute('role') ||
+    candidate.hasAttribute('tabindex') ||
+    candidate.tagName.includes('-');
+/**
+ * Whether clicking this element can open a quick-add at all. Four ways it
+ * cannot: nothing happens on a click at all; it is not laid out, so the click
+ * lands nowhere; it is disabled, so the click is swallowed and the caller
+ * would read the silent no-op as a successful handoff and suppress the product
+ * link; or it submits the native cart form, which would add a variant the
+ * shopper never chose.
+ *
+ * A merchant's configured selector is held to the same four, because it
+ * names markup the merchant cannot see the state of — a selector matching
+ * Horizon's card picks up the hidden direct-add submit as readily as the
+ * "choose options" button beside it.
+ */
+const isUsableTrigger = (candidate, card) => {
+    if (!isActionable(candidate))
+        return false;
+    if (!isRendered(candidate, card))
+        return false;
+    if (candidate.disabled === true ||
+        candidate.getAttribute('aria-disabled') === 'true') {
+        return false;
+    }
+    return !submitsCartForm(candidate);
+};
+/**
+ * The rendered trigger. A card commonly carries several — Horizon ships both
+ * a direct-add submit and a "choose options" button and hides one of them in
+ * CSS — so visibility is the discriminator, and a submit inside the native
+ * cart form is refused outright: it would silently add a variant the shopper
+ * never chose.
+ */
+const quickAddTrigger = (card, configured) => {
+    var _a;
+    if (configured) {
+        // Every match, not the first: a broad selector over a card that ships a
+        // hidden direct-add ahead of the live button would otherwise resolve to
+        // the hidden one and decline a handoff that was there to make.
+        return ((_a = Array.from(card.querySelectorAll(configured)).find((candidate) => candidate instanceof HTMLElement && isUsableTrigger(candidate, card))) !== null && _a !== void 0 ? _a : null);
+    }
+    for (const candidate of Array.from(card.querySelectorAll('button,a[role="button"]'))) {
+        if (!(candidate instanceof HTMLElement))
+            continue;
+        if (!isUsableTrigger(candidate, card))
+            continue;
+        const signals = [candidate, ...ancestorsWithin(candidate, card)];
+        if (signals.some((node) => QUICK_ADD_PATTERN.test(attributeSignal(node)))) {
+            return candidate;
+        }
+    }
+    return null;
+};
+/**
+ * Whether this storefront has a quick-add to hand off to, answered
+ * synchronously so a caller can keep its product link's native behaviour
+ * when the answer is no. Three things have to hold: the theme does quick-add
+ * somewhere on this page, and either its card for this product is already
+ * here or there is a grid section to render one from that has not already come
+ * back without it. A headless storefront fails the first test and never
+ * reaches the network.
+ */
+const themeQuickAddAvailable = (handle) => themeQuickAddProbe().available(handle);
+/**
+ * One render pass's worth of those answers. The two page-level scans — does
+ * the theme do quick-add, and which section is its grid — come back the same
+ * for every tile, and the per-handle lookup walks the document, so a grid of
+ * tiles asking one at a time rescans the page once per tile. A probe reads the
+ * page once and remembers each handle it is asked about; a renderer builds one
+ * per pass and lets it fall out of scope, so nothing is remembered past the
+ * markup it was read from.
+ */
+const themeQuickAddProbe = () => {
+    if (typeof document === 'undefined')
+        return { available: () => false };
+    let pageAnswer;
+    let sectionAnswer;
+    const perHandle = new Map();
+    const resolve = (handle) => {
+        pageAnswer !== null && pageAnswer !== void 0 ? pageAnswer : (pageAnswer = pageHasThemeQuickAdd());
+        if (!pageAnswer)
+            return false;
+        if (themeCardFor(document, handle) !== null)
+            return true;
+        if (themeCardMisses.has(handle))
+            return false;
+        if (sectionAnswer === undefined)
+            sectionAnswer = themeGridSectionId();
+        return sectionAnswer !== null;
+    };
+    return {
+        available: (handle) => {
+            if (!handle)
+                return false;
+            const memo = perHandle.get(handle);
+            if (memo !== undefined)
+                return memo;
+            let answer = false;
+            try {
+                answer = resolve(handle);
+            }
+            catch {
+                answer = false;
+            }
+            perHandle.set(handle, answer);
+            return answer;
+        },
+    };
+};
+/**
+ * Open the merchant's own quick-add surface for a product, resolving false
+ * when the storefront has none — headless, or a theme whose cards simply
+ * link to the product page. False is not a degraded state: the caller's
+ * product link IS what that storefront does.
+ *
+ * The theme's own card on the page is pressed where it stands. A clone has no
+ * `shopify-section-` ancestor and no grid controller above it, so a theme that
+ * resolves its product by climbing out of the card — or keys a body-appended
+ * surface off the section id — would find nothing to open. Only a card we had
+ * to fetch is hosted, because that one has no place on the page to be pressed
+ * in; it keeps the section ancestor it never had.
+ *
+ * A hosted card stays in the host after a successful open, because a theme
+ * that builds its surface inside the card would have it torn out from under
+ * the shopper; the next handoff replaces it.
+ */
+const openThemeQuickAdd = async ({ handle, triggerSelector, fetchImpl, }) => {
+    // Gated on the same predicate the caller uses, so the handoff can never
+    // spend a section render on a storefront that has nothing to hand off to.
+    if (!themeQuickAddAvailable(handle))
+        return false;
+    try {
+        const live = themeCardFor(document, handle);
+        if (live) {
+            // Already upgraded and wired, so no frame to wait for. `isRendered`
+            // stops at the card rather than the document, which lets a trigger in
+            // the theme's hidden duplicate grid through — its listeners are wired
+            // the same, and the surface it opens is not drawn from the card.
+            const trigger = quickAddTrigger(live, triggerSelector);
+            if (!trigger)
+                return false;
+            trigger.click();
+            return true;
+        }
+        const fetched = await fetchThemeCard(fetchImpl !== null && fetchImpl !== void 0 ? fetchImpl : window.fetch.bind(window), handle);
+        if (!fetched)
+            return false;
+        const host = quickAddHost();
+        const card = fetched.cloneNode(true);
+        host.replaceChildren(card);
+        // One frame so the theme's custom elements upgrade and wire their refs.
+        await new Promise((resolve) => {
+            requestAnimationFrame(() => resolve());
+        });
+        const trigger = quickAddTrigger(card, triggerSelector);
+        if (!trigger) {
+            host.replaceChildren();
+            return false;
+        }
+        trigger.click();
+        return true;
+    }
+    catch {
+        // A theme throwing on its own markup is a theme without a usable
+        // quick-add: the caller's product link stands.
+        return false;
+    }
+};
+/**
+ * A tile that cannot resolve a variant, clicked. Borrow the storefront's own
+ * quick-add when there is one; otherwise leave the link untouched — on a
+ * headless storefront it belongs to the host router, and hijacking it would
+ * turn a client transition into a full page load.
+ */
+const handleChooseOptionsClick = (event, { probe, handle, href, triggerSelector, }) => {
+    if (event.defaultPrevented ||
+        event.metaKey ||
+        event.ctrlKey ||
+        event.shiftKey ||
+        event.altKey ||
+        !probe.available(handle)) {
+        return;
+    }
+    event.preventDefault();
+    void openThemeQuickAdd({
+        handle,
+        ...(triggerSelector ? { triggerSelector } : {}),
+    }).then((opened) => {
+        // The theme looked like it had one and then did not: complete the journey
+        // the shopper actually asked for rather than swallowing it.
+        if (!opened)
+            window.location.href = href;
+    });
+};
+/**
+ * That tile's call to action: an add wherever the storefront can actually open
+ * one, and the detour named where it cannot. The same predicate the click
+ * gates on, so the promise and the outcome agree.
+ */
+const chooseOptionsLabel = (probe, handle, labels) => (probe.available(handle) ? labels.add : labels.detour);
+
 const CSS = `
 .evs-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
 .evs-search-page{box-sizing:border-box;max-width:var(--evs-max-width,1200px);margin:auto;padding:var(--evs-content-padding-top,24px) var(--evs-content-padding-inline,24px) var(--evs-content-padding-bottom,24px);color:var(--evs-ink);background:var(--evs-background);font-family:var(--evs-font-family)}
@@ -3693,7 +4130,14 @@ const VariantRow = ({ product, design, data, selection, onSelect, onRequestMatri
                         ? `Selected ${selectionText}`
                         : 'No product options selected' })] }));
 };
-const ProductCard = ({ product, design, onClick, data, selection, onSelect, onRequestMatrix, onAddToCart, quickAddState, variantBusy, hrefFor, }) => {
+/** The link a tile that cannot resolve a variant carries, and its handoff. */
+const ChooseOptions = ({ className, href, handle, probe, triggerSelector, children, }) => (jsx("a", { className: className, href: href, onClick: (event) => handleChooseOptionsClick(event, {
+        probe,
+        handle,
+        href,
+        ...(triggerSelector ? { triggerSelector } : {}),
+    }), children: children }));
+const ProductCard = ({ product, design, onClick, data, selection, onSelect, onRequestMatrix, onAddToCart, quickAddState, variantBusy, hrefFor, quickAddProbe, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
     const lead = product.variants[0];
     const selectedSummary = exactSelectedVariant(data, selection);
@@ -3806,7 +4250,12 @@ const ProductCard = ({ product, design, onClick, data, selection, onSelect, onRe
                         ? design.labels.soldOut
                         : (quickAddState === null || quickAddState === void 0 ? void 0 : quickAddState.checking)
                             ? (_12 = design.labels.checkingAvailability) !== null && _12 !== void 0 ? _12 : 'Checking availability…'
-                            : atc.label })) : (jsx("a", { className: `evs-atc evs-atc-${atc.style} evs-atc-choose-options`, href: hrefFor(product, cartTarget === null || cartTarget === void 0 ? void 0 : cartTarget.id), children: (_13 = design.labels.chooseOptions) !== null && _13 !== void 0 ? _13 : 'Choose options' })))] }));
+                            : atc.label })) : (jsx(ChooseOptions, { className: `evs-atc evs-atc-${atc.style} evs-atc-choose-options`, href: hrefFor(product, cartTarget === null || cartTarget === void 0 ? void 0 : cartTarget.id), handle: product.handle, probe: quickAddProbe, ...(atc.quickAddTriggerSelector
+                        ? { triggerSelector: atc.quickAddTriggerSelector }
+                        : {}), children: chooseOptionsLabel(quickAddProbe, product.handle, {
+                        add: atc.label,
+                        detour: (_13 = design.labels.chooseOptions) !== null && _13 !== void 0 ? _13 : 'Choose options',
+                    }) })))] }));
 };
 const PromoCard = ({ card }) => {
     var _a, _b, _c, _d;
@@ -4135,11 +4584,14 @@ const EvoSearchSearchPage = ({ initialSearch, onUrlChange, fallback = null, base
             }));
         }
     };
+    // One probe for the whole pass: its two page-level reads and its per-handle
+    // card lookups walk the document, and every tile asks the same questions.
+    const quickAddProbe = themeQuickAddProbe();
     // Product tiles plus merchant promo cards spliced into their grid slots
     // (first page only — a promo card is a landing moment, not a repeat).
     const gridCells = search.results.map((product) => {
         var _a;
-        return (jsx(ProductCard, { product: product, design: design, data: variantDataFor(product), selection: (_a = selectedOptions[product.id]) !== null && _a !== void 0 ? _a : {}, onSelect: (axis, value) => void selectProductOption(product, axis, value), onRequestMatrix: () => void requestVariantMatrix(product), onAddToCart: onAddToCart ? safelyAddToCart : undefined, quickAddState: quickAddStates[product.id], variantBusy: variantMatrixBusy.has(product.id), hrefFor: hrefFor, onClick: (selected, productUrl) => {
+        return (jsx(ProductCard, { product: product, design: design, data: variantDataFor(product), selection: (_a = selectedOptions[product.id]) !== null && _a !== void 0 ? _a : {}, onSelect: (axis, value) => void selectProductOption(product, axis, value), onRequestMatrix: () => void requestVariantMatrix(product), onAddToCart: onAddToCart ? safelyAddToCart : undefined, quickAddState: quickAddStates[product.id], variantBusy: variantMatrixBusy.has(product.id), hrefFor: hrefFor, quickAddProbe: quickAddProbe, onClick: (selected, productUrl) => {
                 var _a, _b;
                 return search.trackClick(product.id, {
                     productTitle: product.title,