@salla.sa/twilight-components 2.14.577 → 2.14.579

package/dist/components/salla-basket-gap.js

@@ -44,6 +44,11 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
         this.placeholder = '';
         this.fetchGeneration = 0;
         this.isSyncingCart = false;
+        /** The recommendations response that produced the rendered list; attributes every event below. */
+        this.requestId = null;
+        this.listViewTracked = false;
+        /** Ids of the last list actually announced, so an unchanged re-fetch is not re-counted. */
+        this.lastListViewedKey = '';
         this.cartItemChangedHandler = (response) => {
             const items = response?.data?.cart?.items ?? [];
             const ids = items.map((i) => String(i.product_id)).filter(Boolean);
@@ -72,6 +77,7 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
                     cartItem,
                     cartId: event?.detail?.data?.id,
                     source: 'basket_gap',
+                    request_id: this.requestId,
                 }]);
         };
         salla.lang.onLoaded(() => {
@@ -116,6 +122,64 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
         document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
         this.positionUnderCartItems();
     }
+    componentDidRender() {
+        if (!this.products.length || this.listViewTracked || this.intersectionObserver)
+            return;
+        // The section is injected below the cart items, so it is usually out of view on
+        // load — an impression is only real once it is actually on screen.
+        const observer = new IntersectionObserver((entries) => {
+            // A callback queued before disconnect() still runs. Without this check a
+            // callback left over from the list BEFORE a cart-driven refetch would announce
+            // the new list before it is rendered, disconnect the new observer (the old code
+            // disconnected whichever observer was current, not the one that fired) and mark
+            // the impression done — so the new list never got a real one.
+            if (this.intersectionObserver !== observer)
+                return;
+            if (!entries.some((entry) => entry.isIntersecting))
+                return;
+            this.listViewTracked = true;
+            observer.disconnect();
+            this.intersectionObserver = undefined;
+            this.emitListViewed();
+        }, { threshold: 0.1 });
+        this.intersectionObserver = observer;
+        observer.observe(this.host);
+    }
+    emitListViewed() {
+        // A cart change re-fetches, and the section is usually still on screen, so the
+        // observer re-arms and fires immediately. Only a genuinely different list is a new
+        // impression.
+        const key = this.products.map((product) => product.id).join(',');
+        if (key === this.lastListViewedKey)
+            return;
+        this.lastListViewedKey = key;
+        salla.event.emit('salla-basket-gap::list.viewed', {
+            products: this.products,
+            source: 'basket_gap',
+            request_id: this.requestId,
+        });
+    }
+    /**
+     * One delegated listener per card rather than a handler on each anchor: the click is
+     * only a product click when it lands on a product link, not on the add button or the
+     * offer badge.
+     */
+    handleCardClick(event, product) {
+        // Duck-typed rather than `instanceof Element`: that global does not exist in
+        // Stencil's non-browser runtime, where the check would throw instead of skip.
+        const target = event.target;
+        if (typeof target?.closest === 'function' && target.closest('a[href]')) {
+            this.emitProductClicked(product);
+        }
+    }
+    emitProductClicked(product) {
+        salla.event.emit('salla-basket-gap::product.clicked', [{
+                product,
+                position: this.products.indexOf(product) + 1,
+                source: 'basket_gap',
+                request_id: this.requestId,
+            }]);
+    }
     /**
      * Cart item rows on the storefront cart page (excluding the order-options block).
      * Kept defensive: themes that don't use the `form[id^="item-"]` pattern return none.
@@ -181,6 +245,8 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
         this.host.addEventListener('success', this.addButtonSuccessHandler);
     }
     disconnectedCallback() {
+        this.intersectionObserver?.disconnect();
+        this.intersectionObserver = undefined;
         salla.event.off('cart::item.added', this.cartItemChangedHandler);
         salla.event.off('cart::item.deleted', this.cartItemChangedHandler);
         salla.event.off('cart::before.add.item', this.beforeAddItemHandler);
@@ -208,6 +274,8 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
             .then((ids) => {
             if (generation !== this.fetchGeneration)
                 return;
+            // Held until the products it describes are actually rendered — see fetchProducts.
+            const requestId = ids._requestId || null;
             // Pass objectIDs as the authoritative cart list so the filter is not
             // affected by stale storage when called from a live cart event.
             const cartIds = this.getCartProductIds(objectIDs);
@@ -216,7 +284,7 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
                 this.canRender = false;
                 return;
             }
-            return this.fetchProducts(filteredIds.slice(0, this.limit), generation);
+            return this.fetchProducts(filteredIds.slice(0, this.limit), generation, requestId);
         })
             .catch(() => {
             if (generation !== this.fetchGeneration)
@@ -229,7 +297,7 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
             this.isLoading = false;
         });
     }
-    fetchProducts(ids, generation) {
+    fetchProducts(ids, generation, requestId = null) {
         return salla.api.withoutNotifier(() => salla.product.api.fetch({
             source: 'selected',
             source_value: ids,
@@ -237,7 +305,17 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
         })).then((response) => {
             if (generation !== this.fetchGeneration)
                 return;
+            // List, id and impression state flip together. Assigning the id earlier left a
+            // window where an observer already watching an unscrolled section could fire and
+            // report the PREVIOUS products under the NEW id — and mark the impression done,
+            // so the real one for the new list never fired.
             this.products = response?.data ?? [];
+            this.requestId = requestId;
+            // A refreshed list is a new impression: the cart changed and the shopper sees a
+            // different set of products, so a pending observer is re-armed by componentDidRender.
+            this.listViewTracked = false;
+            this.intersectionObserver?.disconnect();
+            this.intersectionObserver = undefined;
             this.canRender = this.products.length > 0;
         }).catch(() => {
             if (generation !== this.fetchGeneration)
@@ -265,7 +343,7 @@ const SallaBasketGap$1 = /*@__PURE__*/ proxyCustomElement(class SallaBasketGap e
     }
     getProductCard(product) {
         const discountLabel = this.getDiscountLabel(product);
-        return (h("div", { key: product.id, class: "s-basket-gap-card" }, h("a", { href: product.url, class: "s-basket-gap-card-image" }, h("img", { class: "lazy", src: this.placeholder, "data-src": product.image?.url, alt: product.image?.alt || product.name })), h("div", { class: "s-basket-gap-card-info" }, h("h3", { class: "s-basket-gap-card-name" }, h("a", { href: product.url }, product.name)), product.is_on_sale
+        return (h("div", { key: product.id, class: "s-basket-gap-card", onClick: (event) => this.handleCardClick(event, product) }, h("a", { href: product.url, class: "s-basket-gap-card-image" }, h("img", { class: "lazy", src: this.placeholder, "data-src": product.image?.url, alt: product.image?.alt || product.name })), h("div", { class: "s-basket-gap-card-info" }, h("h3", { class: "s-basket-gap-card-name" }, h("a", { href: product.url }, product.name)), product.is_on_sale
             ? h("div", { class: "s-basket-gap-card-sale-price" }, h("span", { innerHTML: salla.money(product.sale_price) }), h("del", { innerHTML: salla.money(product.regular_price) }))
             : h("span", { class: "s-basket-gap-card-price", innerHTML: salla.money(product.price) }), product.weight_label && (h("span", { class: "s-basket-gap-card-weight" }, this.weightLabel, " ", product.weight_label))), h("div", { class: "s-basket-gap-card-actions" }, (product.promotion_title || product.discount_ends || product.is_on_sale) && (h("div", { class: "s-basket-gap-card-offer" }, h("i", { class: "sicon-gift" }), discountLabel && h("span", null, discountLabel), product.discount_ends && [
             // auto-segments drops the days box under 24h left, and the hours box under 1h.

package/dist/components/salla-bought-together.js

@@ -26,6 +26,8 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
         this.buyTogetherFor = salla.lang.get('pages.products.buy_together_for');
         this.resolvedProductId = 0;
         this.listViewTracked = false;
+        /** The recommendations response that produced the rendered list; attributes every event below. */
+        this.requestId = null;
         salla.lang.onLoaded(() => {
             this.title = salla.lang.get('pages.products.bought_together_title');
             this.subtitle = salla.lang.get('pages.products.bought_together_subtitle');
@@ -52,6 +54,7 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
                 this.canRender = false;
                 return;
             }
+            this.requestId = recommendedIds._requestId || null;
             const ids = [String(this.resolvedProductId), ...recommendedIds.slice(0, this.limit)];
             return salla.product.fetch({ source: 'selected', source_value: ids });
         })
@@ -101,6 +104,8 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
             .filter(p => !this.isMainProduct(p.id));
         salla.event.emit('salla-bought-together::list.viewed', {
             products: recommendedProducts,
+            source: 'pdp_fbt',
+            request_id: this.requestId,
         });
     }
     isMainProduct(id) {
@@ -112,7 +117,12 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
         return index === -1 ? -1 : index + 1;
     }
     emitProductClicked(product, position) {
-        salla.event.emit('salla-bought-together::product.clicked', [{ product, position }]);
+        salla.event.emit('salla-bought-together::product.clicked', [{
+                product,
+                position,
+                source: 'pdp_fbt',
+                request_id: this.requestId,
+            }]);
     }
     toggleProduct(id) {
         const next = new Set(this.selectedIds);
@@ -153,6 +163,7 @@ const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBought
                                 position,
                                 cartItem,
                                 cartId: response?.data?.id,
+                                request_id: this.requestId,
                             }]);
                     }
                 }

package/dist/esm/{catalog-recommendations-CRW60UDr.js → catalog-recommendations-DIAyA5MP.js}

@@ -51,6 +51,7 @@ function toNumericId(value) {
 function fetchRecommendations(path, params) {
     const url = new URL(getRecommendationsUrl(path));
     Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
+    let requestId = null;
     // Native fetch (not salla.api) so only the explicit allow-listed headers are
     // sent — no axios default headers to trip the recommendations CORS preflight.
     // Best-effort feature: callers hide their section via .catch(), so no notifier.
@@ -65,9 +66,23 @@ function fetchRecommendations(path, params) {
         if (!response.ok) {
             throw new Error(`Recommendations request failed: ${response.status}`);
         }
+        // Going around `salla.api` also goes around the axios response interceptor that
+        // harvests this id for `salla.recommendations`, so it is captured here instead.
+        // The recommendations worker generates one when the client sends none and
+        // CORS-exposes it, so it is present on every response.
+        requestId = response.headers?.get?.('s-request-id') ?? null;
         return response.json();
     })
-        .then((payload) => extractRecommendationIds(payload));
+        .then((payload) => {
+        const ids = extractRecommendationIds(payload);
+        // Rides along on the id list so callers keep their `string[]` contract, and the
+        // section that renders these ids can attribute its events to the response that
+        // produced them. Non-enumerable, so the value still behaves as a plain array.
+        if (requestId) {
+            Object.defineProperty(ids, '_requestId', { value: requestId });
+        }
+        return ids;
+    });
 }
 function fetchCartBoughtTogether(productIds) {
     const ids = productIds

package/dist/esm/{filepond-plugin-file-poster-CHpnwHYe.js → filepond-plugin-file-poster-ifZZJbSt.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-BwHBxxMg.js → filepond-plugin-file-validate-size-Di-mYkQm.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-BD-yTEPO.js → filepond-plugin-file-validate-type-CvQPSQLD.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-DKc0Yw10.js → filepond-plugin-image-edit-BwN5C4U-.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-CepmNFGF.js → filepond-plugin-image-exif-orientation-DskcwcEc.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-FhnzagMd.js → filepond-plugin-image-preview-CNRRNBsw.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-Qm94dFPs.js → filepond-uH9_9tud.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-BAXTlrSC.js';
+import { d as getDefaultExportFromCjs } from './index-Cv0bGFJf.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {