npm - @salla.sa/twilight-components - Versions diffs - 2.14.440 → 2.14.441 - Mend

@salla.sa/twilight-components 2.14.440 → 2.14.441

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (314) hide show

package/dist/components/salla-delivery-promise.js CHANGED Viewed

@@ -2,9 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './salla-button2.js';
-import { d as defineCustomElement$4 } from './salla-loading2.js';
-import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-searchable-dropdown2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 const DEBUG_KEY = 'salla-delivery-promise-debug';
@@ -14,9 +15,10 @@ function log(message, data) {
     }
 }
 /** Fetch available cities for a product's delivery promises. */
-async function fetchCities(productId) {
-    log('fetchCities start', { productId });
-    const response = await salla.api.request(salla.url.api(`products/${productId}/delivery-promises/cities`));
+async function fetchCities(productId, keyword) {
+    log('fetchCities start', { productId, keyword });
+    const queryString = keyword != null ? `?keyword=${encodeURIComponent(keyword)}` : '';
+    const response = await salla.api.request(salla.url.api(`products/${productId}/delivery-promises/cities${queryString}`));
     if (!response.success || !Array.isArray(response.data) || response.data.length === 0) {
         log('fetchCities: no data', { response });
         return { cities: [] };
@@ -44,15 +46,6 @@ async function fetchDeliveryMessage(productId, id, optionType, isLoginCycleEnabl
     return message || null;
 }
-/** Filters cities by Arabic/English name (used inside the city-change modal). */
-function filterCitiesForModal(cities, query) {
-    const q = query.trim().toLowerCase();
-    if (!q) {
-        return [...cities];
-    }
-    return cities.filter(city => city.name.toLowerCase().includes(q) || (city.name_en || '').toLowerCase().includes(q));
-}
 const INTENT_KEY = 'bullet_delivery_intent';
 function getIntentStorage() {
     const rememberLastSession = Boolean(salla.config.get('store.settings.bullet_delivery.settings.remember_last_session'));
@@ -167,21 +160,24 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         this.selectedCity = null;
         this.isLoadingCities = false;
         // ── City-change modal state (non–login-cycle) ─────────────────────────
-        this.modalSearchQuery = '';
         this.cityPendingSelection = null;
-        this.isCityPopoverOpen = false;
+        this.modalCities = [];
+        this.isSearchingCities = false;
+        this.citySearchCounter = 0;
         // ═══════════════════════════════════════════════════════════════════════
         //  Login-cycle (bullet delivery) integration
         // ═══════════════════════════════════════════════════════════════════════
         this.onBulletDeliveryConfirmed = () => {
             this.applyBulletIntent();
         };
-        this.handleModalSearchInput = (event) => {
-            this.modalSearchQuery = event.target.value;
-            this.isCityPopoverOpen = true;
-        };
-        this.handleModalComboboxActivate = () => {
-            this.isCityPopoverOpen = true;
+        this.handleCitySearch = (keyword) => {
+            clearTimeout(this.citySearchTimer);
+            if (!keyword.trim()) {
+                this.modalCities = [...this.cities];
+                this.isSearchingCities = false;
+                return;
+            }
+            this.citySearchTimer = setTimeout(() => this.searchCitiesRemote(keyword), 300);
         };
         // ═══════════════════════════════════════════════════════════════════════
         //  Header click (dispatches to correct flow)
@@ -290,7 +286,6 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
                 if (autoCity) {
                     log("delivery promise standard flow autoCity found", autoCity);
                     this.selectedCity = autoCity;
-                    this.modalSearchQuery = getCityDisplayName(autoCity);
                 }
                 await this.loadDeliveryMessage(cityId, 'city');
             }
@@ -329,14 +324,29 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         if (!this.cityModalRef)
             return;
         this.cityPendingSelection = null;
-        this.isCityPopoverOpen = false;
+        this.modalCities = [...this.cities];
         await this.cityModalRef.setTitle(this.labels.changeCityTitle);
         await this.cityModalRef.open();
     }
-    handleModalSelectCity(city) {
-        this.cityPendingSelection = city;
-        this.modalSearchQuery = getCityDisplayName(city);
-        this.isCityPopoverOpen = false;
+    async searchCitiesRemote(keyword) {
+        const requestId = ++this.citySearchCounter;
+        this.isSearchingCities = true;
+        try {
+            const { cities } = await fetchCities(this.productId, keyword);
+            if (requestId !== this.citySearchCounter)
+                return;
+            this.modalCities = cities;
+        }
+        catch {
+            if (requestId !== this.citySearchCounter)
+                return;
+            this.modalCities = [];
+        }
+        finally {
+            if (requestId === this.citySearchCounter) {
+                this.isSearchingCities = false;
+            }
+        }
     }
     async handleConfirmCityModal() {
         if (!this.cityPendingSelection) {
@@ -364,14 +374,11 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         return h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage);
     }
     renderCityModalBody() {
-        const filtered = filterCitiesForModal(this.cities, this.modalSearchQuery);
-        return (h("div", { class: "s-delivery-promise-modal-body" }, h("label", { class: "s-delivery-promise-modal-field-label", htmlFor: "s-delivery-promise-modal-search" }, this.labels.cityFieldLabel, h("span", { class: "s-delivery-promise-required", "aria-hidden": "true" }, " *")), h("div", { class: "s-delivery-promise-modal-combobox" }, h("div", { class: "s-delivery-promise-modal-search", onClick: this.handleModalComboboxActivate }, h("i", { class: "sicon-search", "aria-hidden": "true" }), h("input", { id: "s-delivery-promise-modal-search", type: "text", class: "form-input", placeholder: this.labels.modalSearchPlaceholder, value: this.modalSearchQuery, onInput: this.handleModalSearchInput, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isCityPopoverOpen ? 'true' : 'false', "aria-controls": "s-delivery-promise-modal-listbox" })), h("div", { id: "s-delivery-promise-modal-listbox", class: "s-delivery-promise-modal-popover", role: "listbox", hidden: !this.isCityPopoverOpen }, h("div", { class: "s-delivery-promise-modal-list s-scrollbar" }, filtered.length === 0 ? (h("div", { class: "s-delivery-promise-modal-empty" }, this.labels.noResults)) : (filtered.map(city => (h("button", { key: city.id, type: "button", role: "option", class: {
-                's-delivery-promise-modal-item': true,
-                's-delivery-promise-modal-item--selected': this.cityPendingSelection?.id === city.id,
-            }, "aria-selected": this.cityPendingSelection?.id === city.id ? 'true' : 'false', onClick: e => {
-                e.stopPropagation();
-                this.handleModalSelectCity(city);
-            } }, h("span", { class: "s-delivery-promise-modal-item-name" }, city.name), this.cityPendingSelection?.id === city.id ? h("i", { class: "sicon-check", "aria-hidden": "true" }) : null)))))))));
+        return (h("div", { class: "s-delivery-promise-modal-body" }, h("salla-searchable-dropdown", { label: this.labels.cityFieldLabel, placeholder: this.labels.modalSearchPlaceholder, items: this.modalCities, selectedItem: this.cityPendingSelection, searching: this.isSearchingCities, required: true, noResultsText: this.labels.noResults, inputId: "s-delivery-promise-modal-search", onItemSelected: (e) => {
+                this.cityPendingSelection = e.detail;
+            }, onSearchInput: (e) => {
+                this.handleCitySearch(e.detail);
+            } })));
     }
     renderCityChangeModal() {
         if (this.isLoginCycleEnabled)
@@ -406,15 +413,15 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         "cities": [32],
         "selectedCity": [32],
         "isLoadingCities": [32],
-        "modalSearchQuery": [32],
         "cityPendingSelection": [32],
-        "isCityPopoverOpen": [32]
+        "modalCities": [32],
+        "isSearchingCities": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-delivery-promise", "salla-button", "salla-loading", "salla-modal", "salla-skeleton"];
+    const components = ["salla-delivery-promise", "salla-button", "salla-loading", "salla-modal", "salla-searchable-dropdown", "salla-skeleton"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-delivery-promise":
             if (!customElements.get(tagName)) {
@@ -423,15 +430,20 @@ function defineCustomElement$1() {
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-searchable-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

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

@@ -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-Crf00c7G.js → filepond-DKQDCbwV.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-XEcnGv2r.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-B3uKBJe-.js → filepond-plugin-file-poster-SawqMYzR.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-XEcnGv2r.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-CWVDRdsV.js → filepond-plugin-file-validate-size-BmxmtaD4.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-XEcnGv2r.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-VQGNZwF9.js → filepond-plugin-file-validate-type-CCuZxfqE.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-XEcnGv2r.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-DOhXVk8j.js → filepond-plugin-image-edit-BW1mzub6.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-XEcnGv2r.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-Co8jzTVW.js → filepond-plugin-image-exif-orientation-CN08NQm5.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-XEcnGv2r.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-gQWAQlCp.js → filepond-plugin-image-preview-HKD_HLA1.js} RENAMED Viewed

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

package/dist/esm/{functions-D8zpoRMj.js → functions-hYdCF4RE.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-XEcnGv2r.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);