@salla.sa/twilight-components 2.14.439 → 2.14.441

package/dist/components/salla-multiple-bundle-product-slider2.js

@@ -15,39 +15,71 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         this.productOptionsSelected = createEvent(this, "productOptionsSelected", 7);
         /** A dictionary tracking which product IDs are currently selected per section. */
         this.selectedProducts = {};
+        /** When true, the selected product cannot be deselected (single-product section with min = 1). */
+        this.isSelectionLocked = false;
+        /** Maximum selectable products for this section (empty max → all products in section). */
+        this.selectionLimit = 0;
         this.savedOptionsByInstance = {};
         this.handleProductClick = (product, productIndex) => {
-            // Find the checkbox input for this product
-            const checkboxId = this.generateEventName(this.section.id, productIndex);
-            const checkbox = document.getElementById(checkboxId);
-            if (!checkbox)
-                return;
-            if (checkbox) {
-                const willBeChecked = !checkbox.checked;
-                if (!willBeChecked) {
-                    this.dispatchClearOptionsEvent(product, productIndex);
-                    this.clearSavedOptionsState(this.section.id, productIndex);
+            const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            const checkbox = this.getCheckbox(this.section.id, productIndex);
+            if (isChecked && this.isSelectionLocked) {
+                if (checkbox) {
+                    checkbox.checked = true;
                 }
-                // Toggle the checkbox state
-                checkbox.checked = willBeChecked;
-                // Dispatch a change event to trigger form validation/submission
-                requestAnimationFrame(() => {
-                    const changeEvent = new window.Event('change', { bubbles: true });
-                    checkbox.dispatchEvent(changeEvent);
+                return;
+            }
+            if (!isChecked && this.isMaxSelectionReached() && this.selectionLimit !== 1) {
+                return;
+            }
+            // max = 1: parent replaces selection and syncs all checkboxes in the section
+            if (this.selectionLimit === 1 && !isChecked) {
+                this.productSelected.emit({
+                    product,
+                    sectionId: this.section.id,
                 });
+                return;
+            }
+            if (!checkbox)
+                return;
+            const willBeChecked = !checkbox.checked;
+            if (!willBeChecked) {
+                this.dispatchClearOptionsEvent(product, productIndex);
+                this.clearSavedOptionsState(this.section.id, productIndex);
             }
+            checkbox.checked = willBeChecked;
+            requestAnimationFrame(() => {
+                const changeEvent = new window.Event('change', { bubbles: true });
+                checkbox.dispatchEvent(changeEvent);
+            });
             this.productSelected.emit({
                 product,
                 sectionId: this.section.id,
             });
         };
         this.handleOptionsClick = (product) => {
+            const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            if (!isChecked && this.isMaxSelectionReached() && this.selectionLimit !== 1) {
+                return;
+            }
             this.productOptionsSelected.emit({
                 product,
                 sectionId: this.section.id,
             });
         };
     }
+    getSelectedCount() {
+        return this.selectedProducts[this.section?.id]?.size ?? 0;
+    }
+    isMaxSelectionReached() {
+        return this.selectionLimit > 1 && this.getSelectedCount() >= this.selectionLimit;
+    }
+    isProductSelectionDisabled(product, isChecked) {
+        if (product.quantity === 0) {
+            return true;
+        }
+        return !isChecked && this.isMaxSelectionReached();
+    }
     getProductInstanceKey(sectionId, productIndex) {
         return `${sectionId}::${productIndex}`;
     }
@@ -93,9 +125,26 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
     generateEventName(sectionId, productIndex) {
         return `bundle[${sectionId}][${productIndex}][id]`;
     }
+    getCheckbox(sectionId, productIndex) {
+        const name = this.generateEventName(sectionId, productIndex);
+        return this.host.querySelector(`input.s-multiple-bundle-product-checkbox[name="${name}"]`);
+    }
+    preventLockedDeselect(event, isChecked) {
+        if (!this.isSelectionLocked || !isChecked) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const checkbox = event.target;
+        if (checkbox?.type === 'checkbox') {
+            checkbox.checked = true;
+        }
+    }
     render() {
-        return (h(Host, { key: 'ecdac4638007d9435ec8b06f32114a0dada03b86' }, h("salla-slider", { key: 'c245e7dcfd157908063fd5ec13c6d49f8862dd18', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '17bdd6def2ff6f1d2ad22fa8b5299fc0000b1e82', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+        return (h(Host, { key: 'd52eb26454606df2526fa4c086110a54f7466644' }, h("salla-slider", { key: '1aa1fce5943c3721a8e4f762171c864d9097bb28', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '9342381bc43389bae48b906a1ab23a4f3cf8d00a', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
             const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            const isLocked = isChecked && this.isSelectionLocked;
+            const isDisabled = this.isProductSelectionDisabled(product, isChecked);
             const hasSavedOptions = this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id, productIndex)];
             const optionsButtonLabel = hasSavedOptions
                 ? salla.lang.getWithDefault('pages.products.edit_selected_options', 'تعديل الخيارات')
@@ -103,9 +152,7 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
             let optionsArrowIcon = salla.config.get('theme.is_rtl', true)
                 ? KeyBoardArrowLeftIcon
                 : KeyBoardArrowRightIcon;
-            return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
-                    ? 's-multiple-bundle-product-slide-one-third-disabled'
-                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
+            return (h("div", { class: `s-multiple-bundle-product-slide-one-third${isDisabled ? ' s-multiple-bundle-product-slide-one-third-disabled' : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, "data-selection-locked": isLocked ? 'true' : undefined, name: this.generateEventName(this.section.id, productIndex), value: product.id, onClick: event => this.preventLockedDeselect(event, isChecked), onChange: event => this.preventLockedDeselect(event, isChecked) }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
         })))));
     }
     get host() { return this; }
@@ -114,6 +161,8 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         "section": [16],
         "sectionIndex": [2, "section-index"],
         "selectedProducts": [16, "selected-products"],
+        "isSelectionLocked": [4, "is-selection-locked"],
+        "selectionLimit": [2, "selection-limit"],
         "savedOptionsByInstance": [32]
     }, [[4, "optionsSaved", "handleOptionsSaved"]]]);
 function defineCustomElement() {

package/dist/components/salla-product-card-embed.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaProductCardEmbedCss = "";
+const sallaProductCardEmbedCss = ":host(:has(.s-product-card-embed-card-align-left)){float:inline-start;max-width:12rem;margin-block-end:1em;margin-inline-end:1em;shape-outside:margin-box}:host(:has(.s-product-card-embed-card-align-right)){float:inline-end;max-width:12rem;margin-block-end:1em;margin-inline-start:1em;shape-outside:margin-box}:host(:has(.s-product-card-embed-card-align-center)){display:block;clear:both;max-width:12rem;margin-block:1em;margin-inline:auto}:host(:has(.s-product-card-embed-card-align-left)) .s-product-card-embed-card-align-left,:host(:has(.s-product-card-embed-card-align-right)) .s-product-card-embed-card-align-right{float:none}";
 
 const SallaProductCardEmbed$1 = /*@__PURE__*/ proxyCustomElement(class SallaProductCardEmbed extends HTMLElement {
     constructor() {

package/dist/components/salla-tiered-offer.js

@@ -124,6 +124,15 @@ const SallaTieredOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaTieredOff
         // If coupon is applied but offer doesn't support coupons, widget should be hidden
         return !(cartCoupon && !offerData.details?.applied_with_coupon);
     }
+    shouldHideForGuest() {
+        return salla.config.isGuest();
+    }
+    shouldHideUntilThreshold(details, tierIndex) {
+        return !!(details?.hide_until_threshold && tierIndex === 0);
+    }
+    resolveTierName(tiers, index) {
+        return TierUtils.getTierNameByIndex(tiers, index) || '';
+    }
     async fetchTieredOfferData() {
         try {
             const { data } = await salla.api.cart.offers();
@@ -150,14 +159,20 @@ const SallaTieredOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaTieredOff
         // Find current tier index based on current_value from API
         const currentValue = this.apiOfferData.details?.current_value || 0;
         const currentTierIndex = this.findCurrentTierIndex(currentValue);
-        // Only render if user has reached at least the first tier
-        if (currentTierIndex === 0) {
+        // Hide entire widget for unauthenticated users
+        if (this.shouldHideForGuest()) {
+            this.canRender = false;
+            return;
+        }
+        // Only hide until threshold for merchants with the flag enabled (e.g. Arabian Oud)
+        if (this.shouldHideUntilThreshold(this.apiOfferData.details, currentTierIndex)) {
             this.canRender = false;
             return;
         }
         this.currentTierIndex = currentTierIndex;
-        this.currentTier = TierUtils.getTierNameByIndex(this.tieredOfferData.tiers, currentTierIndex);
-        this.activeTabTier = this.currentTier;
+        this.currentTier = this.resolveTierName(this.tieredOfferData.tiers, currentTierIndex);
+        // Default to first tab so tabs always have visible content
+        this.activeTabTier = this.currentTier || this.tieredOfferData.tiers[0]?.tier_name;
         this.canRender = true;
     }
     componentDidLoad() {
@@ -192,44 +207,46 @@ const SallaTieredOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaTieredOff
         if (!freshOfferData || !this.tieredOfferData) {
             return;
         }
+        if (!freshOfferData.details?.discounts?.length) {
+            this.canRender = false;
+            return;
+        }
         // Check coupon compatibility
         if (!this.validateCouponCompatibility(freshOfferData, updatedCart.coupon)) {
             this.canRender = false;
             return;
         }
-        // If no coupon conflict, show widget
-        this.canRender = true;
-        // Check if this offer should update with cart changes
-        if (freshOfferData.details?.with_current_cart === false) {
+        // Hide entire widget for unauthenticated users
+        if (this.shouldHideForGuest()) {
+            this.canRender = false;
             return;
         }
-        // Update current_value in API offer data
-        //  const currentValue = updatedCart.sub_total;
-        //  console.log('currentValue #####3', currentValue);
-        //  this.apiOfferData = {
-        //    ...this.apiOfferData,
-        //    details: {
-        //      ...this.apiOfferData.details,
-        //      current_value: currentValue
-        //    }
-        //  };
-        // Use current_value from fresh API data instead of cart sub_total
+        // Build fresh tier map so index computation uses up-to-date thresholds
+        const freshTieredData = this.mapApiDataToTiers(freshOfferData);
         const currentValue = freshOfferData.details?.current_value || 0;
-        this.apiOfferData = freshOfferData;
-        // Update current tier based on new value
-        const newTierIndex = this.findCurrentTierIndex(currentValue);
-        // Check if user qualifies for any tier
-        if (newTierIndex === 0) {
+        const newTierIndex = this.findCurrentTierIndex(currentValue, freshTieredData.tiers);
+        // Only hide until threshold for merchants with the flag enabled (e.g. Arabian Oud)
+        if (this.shouldHideUntilThreshold(freshOfferData.details, newTierIndex)) {
             this.canRender = false;
             return;
         }
-        // user qualifies show widget
+        // Offer progress is based on historical purchases only — skip state update on cart changes
+        // Use strict === false to avoid treating an omitted flag as false
+        if (freshOfferData.details?.with_current_cart === false) {
+            this.canRender = true;
+            return;
+        }
+        // All guards passed — update state atomically
+        this.apiOfferData = freshOfferData;
+        this.tieredOfferData = freshTieredData;
         this.canRender = true;
         this.currentTierIndex = newTierIndex;
-        this.currentTier = TierUtils.getTierNameByIndex(this.tieredOfferData.tiers, newTierIndex);
-        // Update active tab if needed
-        if (this.activeTabTier !== this.currentTier) {
-            this.activeTabTier = this.currentTier;
+        // Tiers are 1-based; fall back to first tier when no tier has been reached yet
+        this.currentTier = this.resolveTierName(freshTieredData.tiers, newTierIndex);
+        // Update active tab if needed; default to first tab when no tier reached
+        const resolvedTab = this.currentTier || freshTieredData.tiers[0]?.tier_name;
+        if (this.activeTabTier !== resolvedTab) {
+            this.activeTabTier = resolvedTab;
         }
     }
     getLoadingSkeletonView() {
@@ -327,7 +344,7 @@ const SallaTieredOffer$1 = /*@__PURE__*/ proxyCustomElement(class SallaTieredOff
             return null;
         }
         const currentTierData = this.getCurrentTierData();
-        return (h(Host, null, h("div", { class: "s-tiered-offer-container" }, h("div", { class: "s-tiered-offer-header" }, h("div", { class: "s-tiered-offer-header-content" }, h("p", { class: "s-tiered-offer-program-title" }, this.loyaltyProgramText), h("div", { class: "s-tiered-offer-current-tier-name-wrapper" }, h("h2", { class: "s-tiered-offer-current-tier" }, this.currentTierText, " ", h("span", { class: "s-tiered-offer-tier-name" }, currentTierData.name)), h("span", { innerHTML: currentTierData.icon })))), this.renderProgressBar(), this.renderTabs())));
+        return (h(Host, null, h("div", { class: "s-tiered-offer-container" }, h("div", { class: "s-tiered-offer-header" }, h("div", { class: "s-tiered-offer-header-content" }, h("p", { class: "s-tiered-offer-program-title" }, this.loyaltyProgramText), this.currentTier && (h("div", { class: "s-tiered-offer-current-tier-name-wrapper" }, h("h2", { class: "s-tiered-offer-current-tier" }, this.currentTierText, " ", h("span", { class: "s-tiered-offer-tier-name" }, currentTierData.name)), h("span", { innerHTML: currentTierData.icon }))))), this.renderProgressBar(), this.renderTabs())));
     }
     static get style() { return sallaTieredOfferCss; }
 }, [0, "salla-tiered-offer", {

package/dist/esm/{filepond-CuxNx4T_.js → filepond-DKQDCbwV.js}

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

package/dist/esm/{filepond-plugin-file-poster-B0bm9HVP.js → filepond-plugin-file-poster-SawqMYzR.js}

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

package/dist/esm/{filepond-plugin-file-validate-size-Ndd8bi5G.js → filepond-plugin-file-validate-size-BmxmtaD4.js}

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

package/dist/esm/{filepond-plugin-file-validate-type-DrPPjEtZ.js → filepond-plugin-file-validate-type-CCuZxfqE.js}

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

package/dist/esm/{filepond-plugin-image-edit-C96YLlHm.js → filepond-plugin-image-edit-BW1mzub6.js}

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

package/dist/esm/{filepond-plugin-image-exif-orientation-BufhQyn4.js → filepond-plugin-image-exif-orientation-CN08NQm5.js}

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

package/dist/esm/{filepond-plugin-image-preview-xyGt-4PS.js → filepond-plugin-image-preview-HKD_HLA1.js}

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

package/dist/esm/{functions-BXvEy71U.js → functions-hYdCF4RE.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-D0jpoyIT.js';
+import { h } from './index-DMcU-3GG.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);