@salla.sa/twilight-components 2.14.554 → 2.14.556

package/dist/components/salla-products-list2.js

@@ -57,6 +57,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         this.prevCategoryIdKey = 'prevCategoryId';
         this.isProcessing = false; // Tracks if we are processing data
         this.scrollTimeout = null;
+        this.requestId = null;
         this.boundScrollToLastViewedProduct = () => this.scrollToLastViewedProduct();
         this.boundHandleScroll = () => this.handleScroll();
         this.specialPagesWithoutIds = {
@@ -321,6 +322,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             if (anchor) {
                 Helper.saveProductSource(this.getSource());
                 Helper.saveProductPosition(product.position);
+                // `this.requestId` is the latest page's id, not necessarily the one that rendered
+                // this card — see the accepted limitation documented on Helper.saveRequestId.
+                Helper.saveRequestId(this.requestId);
                 if (this.hasInfiniteScroll) {
                     this.takeStateSnapshot();
                     sessionStorage.setItem(this.lastViewedProductKey, product.id);
@@ -330,6 +334,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 // Add-to-cart clicked directly within the list (no navigation): persist the
                 // position so the following Product Added event can attribute the clicked rank.
                 Helper.saveProductPosition(product.position);
+                Helper.saveRequestId(this.requestId);
             }
         });
         if (this.selectable) {
@@ -757,6 +762,17 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 return;
             this.isProcessing = true;
             try {
+                try {
+                    // fetch() hides custom response headers behind CORS unless the backend
+                    // exposes them, so fall back to a `request_id` field in the JSON body.
+                    const requestId = httpResponse?.headers?.get?.('s-request-id') || response?.request_id;
+                    if (requestId) {
+                        this.requestId = requestId;
+                    }
+                }
+                catch {
+                    // ignore
+                }
                 if (!response.data?.length && this.infiniteScroll.pageIndex === 2) {
                     this.showPlaceholder = true;
                     salla.infiniteScroll.destroy(this.infiniteScroll);
@@ -1082,6 +1098,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         if (!response) {
             return [];
         }
+        if (response._requestId) {
+            this.requestId = response._requestId;
+        }
         let source = this.getSource();
         if (response.cursor?.current === 1) {
             if (!this.isAuxiliaryProductsListSource()) {

package/dist/components/salla-products-slider2.js

@@ -41,6 +41,7 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
          */
         this.productCardComponent = 'custom-salla-product-card';
         this.apiUrl = '';
+        this.requestId = null;
         this.onWishlistStorageSynced = () => Helper.syncWishlistIcons(this.host, `${this.productCardComponent}, salla-product-card`);
     }
     componentWillLoad() {
@@ -81,6 +82,9 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
             }))
                 .then(response => Helper.injectExtraFieldsToResponse(response))
                 .then(async (response) => {
+                if (response._requestId) {
+                    this.requestId = response._requestId;
+                }
                 this.productsData = await this.applyBeforeAppendItems(response.data);
                 this.isReady = true;
                 response.source = this.getSource();
@@ -124,6 +128,7 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
         const handleClick = isLandingPage ? undefined : () => {
             Helper.saveProductSource(this.getSource());
             Helper.saveProductPosition(product.position);
+            Helper.saveRequestId(this.requestId);
         };
         if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
             return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));

package/dist/components/salla-slider2.js

@@ -10140,16 +10140,20 @@ const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends H
         this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
         if (this.listenToThumbnailsOption) {
             salla.event.on('product-options::change', data => {
-                const isSupportedOptionType = ['thumbnail', 'color'].includes(data?.option?.type);
-                const optionImageId = data?.detail?.option_value;
-                if (!isSupportedOptionType || !optionImageId) {
+                if (!['thumbnail', 'color'].includes(data?.option?.type)) {
                     return;
                 }
-                const slideIndex = this.sliderWrapper
-                    ?.querySelector(`[data-img-id="${optionImageId}"]`)
-                    ?.getAttribute('data-slid-index');
-                if (slideIndex) {
-                    this.slideTo(parseInt(slideIndex), 300, false);
+                // Options with their own uploaded thumbnail carry the gallery image id in `color`.
+                const imageIds = [data?.detail?.option_value, data?.detail?.color]
+                    .filter(value => value != null && /^\d+$/.test(String(value)));
+                for (const imageId of imageIds) {
+                    const slideIndex = this.sliderWrapper
+                        ?.querySelector(`[data-img-id="${CSS.escape(String(imageId))}"]`)
+                        ?.getAttribute('data-slid-index');
+                    if (slideIndex != null) {
+                        this.slideTo(parseInt(slideIndex, 10), 300, false);
+                        return;
+                    }
                 }
             });
         }

package/dist/esm/{Helper-DsjZ6kte.js → Helper-Cql-WbqR.js}

@@ -255,6 +255,42 @@ class Helper {
             salla.logger.warn('Error saving position to session storage');
         }
     }
+    /**
+     * Persist the `s-request-id` of the products response the customer just interacted
+     * with, so the analytics event that follows can be attributed back to it.
+     *
+     * KNOWN LIMITATION — deliberate, accepted for this release.
+     * This is a single shared value, so the last interaction wins. Two flows can therefore
+     * attach the wrong request id to an event:
+     *   1. Infinite scroll — a later page overwrites this value while the earlier pages'
+     *      cards are still on screen, so clicking a product from page 1 after page 2 has
+     *      loaded attributes the event to the page-2 response.
+     *   2. Interleaved add-to-cart — `Product Added` only fires once the async cart request
+     *      resolves. If the customer interacts with another product in the meantime, this
+     *      value has already been replaced by the time the event reads it.
+     *
+     * Why this is safe to ship as-is: `request_id` is an analytics-attribution field only.
+     * It is never read by storefront logic, never affects the cart, pricing, the order, or
+     * anything the customer sees, and every read and write here is wrapped so it cannot
+     * throw. The worst outcome is one analytics row carrying a neighbouring request id —
+     * the event still fires, and its product, position and source fields stay correct.
+     * Both flows also need a specific interleaving to occur at all, so they are the
+     * exception rather than the norm.
+     *
+     * The fix is to key the stored value by product id instead of sharing one slot, which
+     * changes this method's signature and the session-storage schema. That is being handled
+     * as a follow-up enhancement rather than widening this PR.
+     */
+    saveRequestId(requestId) {
+        if (!requestId)
+            return;
+        try {
+            sessionStorage.setItem('s-request-id', requestId);
+        }
+        catch (error) {
+            salla.logger.warn('Error saving request id to session storage');
+        }
+    }
     saveAddToCartSource(source) {
         this.saveSource('s-add-to-cart-source', source);
     }

package/dist/esm/{filepond-CfR9FvSg.js → filepond-Dl-e9LIA.js}

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

package/dist/esm/{filepond-plugin-file-poster-B6F5nK4V.js → filepond-plugin-file-poster-B44qzFr7.js}

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

package/dist/esm/{filepond-plugin-file-validate-size-BxIzTBd4.js → filepond-plugin-file-validate-size-DeewGi6D.js}

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

package/dist/esm/{filepond-plugin-file-validate-type-DfUPdGXA.js → filepond-plugin-file-validate-type-DquQHM9K.js}

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

package/dist/esm/{filepond-plugin-image-edit-Ddgh5YPx.js → filepond-plugin-image-edit-DPSC2V4u.js}

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

package/dist/esm/{filepond-plugin-image-exif-orientation-BHjeleJe.js → filepond-plugin-image-exif-orientation-A-4MC3po.js}

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

package/dist/esm/{filepond-plugin-image-preview-Cp3-aadR.js → filepond-plugin-image-preview-vvc3KNls.js}

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