@salla.sa/twilight-components 2.14.482 → 2.14.484

package/dist/collection/components/salla-product-options/availability-utils.js

@@ -15,8 +15,15 @@
  *
  * skus_availability is always the authoritative source when present; is_out is
  * consulted only as a last resort when a detail has no SKU data at all.
+ *
+ * For unlimited products (no SKU data, or all SKUs false), all options default
+ * to available unless explicitly marked as out of stock.
+ *
+ * @param isProductAvailable – whether product is available at the parent level
+ *        (e.g., quantity > 0 or -1 for unlimited). If true and all SKUs are false,
+ *        treat as available (data is incomplete or product is unlimited).
  */
-export function computeAvailabilityMap(optionsData, selectedOptions) {
+export function computeAvailabilityMap(optionsData, selectedOptions, isProductAvailable = true) {
     const map = {};
     if (!optionsData?.length)
         return map;
@@ -24,6 +31,22 @@ export function computeAvailabilityMap(optionsData, selectedOptions) {
     const isSingleGroup = variantGroups.length <= 1;
     // Non-advance options carry no variant SKUs — never let them constrain the intersection.
     const nonAdvanceOptionIds = new Set(optionsData.filter(opt => opt.is_advance === false).map(opt => opt.id));
+    // Unlimited product (no SKU data) — all options default to available unless explicitly marked.
+    if (variantGroups.length === 0) {
+        for (const optionGroup of optionsData) {
+            for (const detail of optionGroup.details) {
+                map[detail.id] = detail.is_out ? 'out_of_stock' : 'available';
+            }
+        }
+        return map;
+    }
+    // The isProductAvailable fallback (promote all-false SKUs to 'available') is only safe
+    // when the product carries NO in-stock SKU anywhere — that signals placeholder/incomplete
+    // SKU data for an unlimited product. If ANY SKU in the product is in stock, the data is
+    // real and all-false details are genuinely out of stock; promoting them would let shoppers
+    // pick an unfulfillable variant of a partially-available limited product.
+    const productHasAnyTrueSku = variantGroups.some(opt => opt.details?.some(d => d.skus_availability && Object.values(d.skus_availability).some(Boolean)));
+    const allowUnlimitedFallback = isProductAvailable && !productHasAnyTrueSku;
     for (const optionGroup of variantGroups) {
         const otherSelected = selectedOptions.filter(s => s.option_id !== optionGroup.id);
         for (const detail of optionGroup.details) {
@@ -34,9 +57,17 @@ export function computeAvailabilityMap(optionsData, selectedOptions) {
                 continue;
             }
             const detailSkus = Object.keys(skusAvail).map(Number);
+            const hasAnyTrueSku = detailSkus.some(sku => skusAvail[sku]);
             // No cross-group context yet — evaluate this detail's own SKUs directly.
             if (isSingleGroup || otherSelected.length === 0) {
-                map[detail.id] = detailSkus.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+                // If product is available but all SKUs are false, treat as available
+                // (data incomplete or product is unlimited with placeholder SKU data).
+                if (!hasAnyTrueSku && allowUnlimitedFallback) {
+                    map[detail.id] = 'available';
+                }
+                else {
+                    map[detail.id] = hasAnyTrueSku ? 'available' : 'out_of_stock';
+                }
                 continue;
             }
             // Intersect this detail's SKUs with those of each other selected detail.
@@ -47,11 +78,22 @@ export function computeAvailabilityMap(optionsData, selectedOptions) {
                 const otherSkus = new Set(Object.keys(other.skus_availability || {}).map(Number));
                 candidates = candidates.filter(sku => otherSkus.has(sku));
             }
+            // Empty intersection normally means an unfulfillable combination. But when the
+            // unlimited fallback applies (no true SKU anywhere — placeholder data), there are
+            // no real stock constraints, so a non-overlapping SKU set is a data artifact, not
+            // an impossible combination.
             if (!candidates.length) {
-                map[detail.id] = 'impossible';
+                map[detail.id] = allowUnlimitedFallback ? 'available' : 'impossible';
                 continue;
             }
-            map[detail.id] = candidates.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+            const hasAvailableCandidate = candidates.some(sku => skusAvail[sku]);
+            // If product available but no candidates match true SKUs, treat as available.
+            if (!hasAvailableCandidate && allowUnlimitedFallback) {
+                map[detail.id] = 'available';
+            }
+            else {
+                map[detail.id] = hasAvailableCandidate ? 'available' : 'out_of_stock';
+            }
         }
     }
     return map;

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -29,6 +29,17 @@ export class SallaProductOptions {
         this.userInitiatedValidation = false;
         this.isCartMode = false;
         this.availabilityMap = {};
+        /**
+         * Whether the product is available at the parent level (quantity > 0, or unlimited).
+         * Controls the unlimited-product fallback in computeAvailabilityMap: only when true is a
+         * detail with all-false SKUs treated as available (placeholder/incomplete data).
+         *
+         * The API path derives this automatically from `is_out_of_stock`. When options are supplied
+         * via the `options` prop, callers must set `product-available` explicitly — it defaults to
+         * false so genuinely out-of-stock products are never silently promoted to available.
+         * (Truly unlimited products with no SKU data are handled separately and don't need this.)
+         */
+        this.productAvailable = false;
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -115,7 +126,10 @@ export class SallaProductOptions {
             this.setOptionsData([]);
         }
         if (this.productId && !salla.url.is_page('cart')) {
-            salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));
+            salla.api.product.getDetails(this.productId, ['options']).then(resp => {
+                this.productAvailable = !resp.data.is_out_of_stock;
+                this.setOptionsData(resp.data.options);
+            });
         }
     }
     /**
@@ -469,6 +483,9 @@ export class SallaProductOptions {
             }
         }
         this.outOfStockText = salla.lang.get('pages.products.out_of_stock');
+        // Props (e.g. product-available) are not set during the constructor, so recompute the
+        // availability map now that the prop value supplied on the options-prop path is applied.
+        this.computeAvailability();
         await salla.onReady();
         this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability') || salla.url.is_page('cart');
         this.pasteHandler = this.handlePaste.bind(this);
@@ -781,7 +798,7 @@ export class SallaProductOptions {
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
     computeAvailability() {
-        this.availabilityMap = computeAvailabilityMap(this.optionsData || [], this.selectedOptions || []);
+        this.availabilityMap = computeAvailabilityMap(this.optionsData || [], this.selectedOptions || [], this.productAvailable);
     }
     isOptionDetailOut(detail) {
         const status = this.availabilityMap[detail.id];
@@ -931,6 +948,26 @@ export class SallaProductOptions {
     }
     static get properties() {
         return {
+            "productAvailable": {
+                "type": "boolean",
+                "attribute": "product-available",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the product is available at the parent level (quantity > 0, or unlimited).\nControls the unlimited-product fallback in computeAvailabilityMap: only when true is a\ndetail with all-false SKUs treated as available (placeholder/incomplete data).\n\nThe API path derives this automatically from `is_out_of_stock`. When options are supplied\nvia the `options` prop, callers must set `product-available` explicitly \u2014 it defaults to\nfalse so genuinely out-of-stock products are never silently promoted to available.\n(Truly unlimited products with no SKU data are handled separately and don't need this.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "productId": {
                 "type": "any",
                 "attribute": "product-id",

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -406,13 +406,18 @@ export class SallaProductsList {
     }
     waitForLayoutStable(element) {
         let timeout = null;
+        let maxWait = null;
         return new Promise(resolve => {
-            const observer = new MutationObserver(() => {
+            let observer;
+            const settle = () => {
                 clearTimeout(timeout);
-                timeout = setTimeout(() => {
-                    observer.disconnect();
-                    resolve(null);
-                }, 160); // Adjust delay as needed for your layout
+                clearTimeout(maxWait);
+                observer.disconnect();
+                resolve(null);
+            };
+            observer = new MutationObserver(() => {
+                clearTimeout(timeout);
+                timeout = setTimeout(settle, 160); // Adjust delay as needed for your layout
             });
             // Observe changes to the entire body, including child nodes and attributes.
             observer.observe(element, {
@@ -420,6 +425,8 @@ export class SallaProductsList {
                 subtree: true,
                 attributes: true,
             });
+            // hard cap so a quiescent DOM still resolves and disconnects the observer
+            maxWait = setTimeout(settle, 1000);
         });
     }
     async waitForStableLayout(element) {
@@ -699,6 +706,7 @@ export class SallaProductsList {
                         this.loadMoreWrapper.style.display = 'block';
                     }
                     this.animateItems();
+                    this.refreshInfiniteScrollMeasurements();
                 }
             }
             catch (error) {
@@ -750,6 +758,13 @@ export class SallaProductsList {
             this.infiniteScroll.loadNextPage();
         }
     }
+    // re-measure scroll trigger after layout settles; stale `top` breaks autoload
+    refreshInfiniteScrollMeasurements() {
+        if (!this.autoload || !this.infiniteScroll?.updateMeasurements) {
+            return;
+        }
+        this.waitForStableLayout(document.body).then(() => this.infiniteScroll?.updateMeasurements?.());
+    }
     async applyBeforeBuildListUrl(url) {
         try {
             const ctx = { component: this, url };
@@ -931,6 +946,7 @@ export class SallaProductsList {
                 this.loadMoreWrapper && (this.loadMoreWrapper.style.display = 'block');
             }
             this.scrollToLastViewedProduct();
+            this.refreshInfiniteScrollMeasurements();
         }
         else if (!this.firstPageResponse && this.switchToNormalBehavior) {
             this.getInitialData()