@salla.sa/twilight-components 2.14.409 → 2.14.411

package/dist/esm/salla-delivery-promise.entry.js

@@ -1,111 +1,269 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-rIbWLXjW.js';
+
+const DEBUG_KEY = 'salla-delivery-promise-debug';
+function log(message, data) {
+    if (localStorage.getItem(DEBUG_KEY)) {
+        data !== undefined ? console.log(message, data) : console.log(message);
+    }
+}
+/** 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`));
+    if (!response.success || !Array.isArray(response.data) || response.data.length === 0) {
+        log('fetchCities: no data', { response });
+        return { cities: [], preselected: undefined };
+    }
+    const preselected = response.data.find((c) => c.is_selected);
+    log('fetchCities success', { count: response.data.length, preselected });
+    return { cities: response.data, preselected };
+}
+/** Fetch the delivery promise message for a given city or branch. */
+async function fetchDeliveryMessage(productId, id, optionType, isLoginCycleEnabled) {
+    log('fetchDeliveryMessage start', { productId, id, optionType });
+    let queryString = '';
+    if (optionType === 'city' && !isLoginCycleEnabled) {
+        queryString = `?reference_id=${id}`;
+    }
+    else {
+        queryString = `?reference_id=${id}&reference_type=${optionType}`;
+    }
+    const response = (await salla.api.withoutNotifier(() => salla.api.request(salla.url.api(`products/${productId}/delivery-promises${queryString}`))));
+    if (!response.success) {
+        log('fetchDeliveryMessage error', { response });
+        throw new Error(response.error?.message || 'Failed to fetch delivery promise');
+    }
+    const message = response.data?.message?.trim();
+    log('fetchDeliveryMessage success', { message });
+    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'));
+    return rememberLastSession ? salla.storage.store : salla.storage.session;
+}
+function getStoredIntent() {
+    const raw = getIntentStorage().get(INTENT_KEY);
+    return raw && typeof raw === 'object' ? raw : null;
+}
+/** Resolve the stored intent into a city or branch selection. Returns null when no usable intent. */
+function resolveIntent() {
+    const intent = getStoredIntent();
+    if (!intent)
+        return null;
+    if (intent.type === 'address') {
+        const city = intent.address_details?.city;
+        const cityId = city?.id != null ? Number(city.id) : intent.city_id != null ? Number(intent.city_id) : null;
+        const cityName = city?.name?.trim() || '';
+        if (cityId != null) {
+            return { type: 'address', option: { id: cityId, name: cityName } };
+        }
+        return null;
+    }
+    if (intent.type === 'branch') {
+        const branchId = intent.branch_id != null
+            ? Number(intent.branch_id)
+            : intent.branch_details?.id != null
+                ? Number(intent.branch_details.id)
+                : null;
+        const branchName = intent.branch_details?.name?.trim() || '';
+        if (branchId != null) {
+            return { type: 'branch', option: { id: branchId, name: branchName } };
+        }
+        return null;
+    }
+    return null;
+}
+/** Build the payload for opening the bullet delivery modal with preselection. */
+function buildBulletOpenPayload() {
+    const intent = getStoredIntent();
+    const payload = {};
+    if (intent?.type === 'address' && intent.address_id != null) {
+        payload.preselected_address_id = Number(intent.address_id);
+    }
+    if (intent?.type === 'branch') {
+        const branchId = intent.branch_id ?? intent.branch_details?.id;
+        if (branchId != null) {
+            payload.preselected_branch_id = Number(branchId);
+        }
+    }
+    return payload;
+}
+
+const DEFAULT_LABELS = {
+    deliveryTo: 'توصيل إلى',
+    pickupFromBranch: 'الاستلام من فرع',
+    noResults: 'لا توجد نتائج',
+    selectCity: 'اختر المدينة',
+    changeCityTitle: 'تغيير المدينة',
+    changeCitySubtitle: '',
+    cityFieldLabel: 'المدينة',
+    modalSearchPlaceholder: 'ابحث عن مدينة',
+    confirmAddress: 'تأكيد العنوان',
+    errorDeliveryPromise: 'لا يتوفر وعد تسليم لهذه المدينة',
+    errorPickupPromise: 'لا يتوفر وعد تسليم لهذا الفرع',
+};
+function loadLabels() {
+    return {
+        deliveryTo: salla.lang.getWithDefault('pages.products.promise_deliver_to', DEFAULT_LABELS.deliveryTo),
+        pickupFromBranch: salla.lang.getWithDefault('pages.products.promise_pickup_from_branch', DEFAULT_LABELS.pickupFromBranch),
+        noResults: salla.lang.getWithDefault('common.elements.no_options', DEFAULT_LABELS.noResults),
+        selectCity: salla.lang.getWithDefault('common.elements.select_city', DEFAULT_LABELS.selectCity),
+        changeCityTitle: salla.lang.getWithDefault('pages.products.promise_change_city_title', DEFAULT_LABELS.changeCityTitle),
+        changeCitySubtitle: salla.lang.getWithDefault('pages.products.promise_change_city_subtitle', 'قد تتغيّر مدة التوصيل حسب المدينة.'),
+        cityFieldLabel: salla.lang.getWithDefault('pages.products.promise_city_field', DEFAULT_LABELS.cityFieldLabel),
+        modalSearchPlaceholder: salla.lang.getWithDefault('pages.products.promise_search_city', DEFAULT_LABELS.modalSearchPlaceholder),
+        confirmAddress: salla.lang.getWithDefault('pages.checkout.confirm_address', DEFAULT_LABELS.confirmAddress),
+        errorDeliveryPromise: salla.lang.getWithDefault('pages.products.promise_delivery_not_available', DEFAULT_LABELS.errorDeliveryPromise),
+        errorPickupPromise: salla.lang.getWithDefault('pages.products.promise_pickup_not_available', DEFAULT_LABELS.errorPickupPromise),
+    };
+}
+/** Localized city display name (English when available and user language is not Arabic). */
+function getCityDisplayName(city) {
+    const lang = salla.config.get('user.language_code');
+    if (lang && lang !== 'ar' && city.name_en?.trim()) {
+        return city.name_en.trim();
+    }
+    return city.name;
+}
 
 const SallaDeliveryPromise = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.cities = [];
-        this.filteredCities = [];
-        this.selectedCity = null;
+        // ── Feature flags & config ────────────────────────────────────────────
+        this.isDeliveryPromiseEnabled = false;
+        this.isLoginCycleEnabled = false;
+        this.canRender = false;
+        // ── Shared display state ──────────────────────────────────────────────
+        this.labels = DEFAULT_LABELS;
+        this.selectedLabel = null;
         this.deliveryMessage = null;
-        this.isLoadingCities = false;
-        this.isLoadingPromises = false;
-        this.isDropdownOpen = false;
-        this.searchQuery = '';
         this.hasError = false;
         this.errorMessage = '';
-        /** i18n labels for city selector only; message comes from BE */
-        this.labels = {
-            deliveryTo: 'توصيل إلى',
-            pickupFromBranch: 'الاستلام من فرع',
-            searchPlaceholder: 'بحث...',
-            noResults: 'لا توجد نتائج',
-            selectCity: 'اختر المدينة',
+        this.isLoadingPromises = false;
+        // ── Login-cycle state (bullet delivery integration) ───────────────────
+        this.selectedCityLoginCycle = null;
+        this.selectedBranchLoginCycle = null;
+        // ── Standard flow state (city list) ───────────────────────────────────
+        this.cities = [];
+        this.selectedCity = null;
+        this.isLoadingCities = false;
+        // ── City-change modal state (non–login-cycle) ─────────────────────────
+        this.modalSearchQuery = '';
+        this.cityPendingSelection = null;
+        this.isCityPopoverOpen = false;
+        // ═══════════════════════════════════════════════════════════════════════
+        //  Login-cycle (bullet delivery) integration
+        // ═══════════════════════════════════════════════════════════════════════
+        this.onBulletDeliveryConfirmed = () => {
+            this.applyBulletIntent();
         };
-        this.canRender = false;
-        this.requiresShipping = false;
-        /** Used only for API calls, not rendered — no need for @State */
-        this.productId = undefined;
-        this.onClickOutside = (e) => {
-            if (this.host.contains(e.target)) {
-                return; // click inside component (e.g. search input, city list) — don't close
-            }
-            this.isDropdownOpen = false;
-            window.removeEventListener('click', this.onClickOutside);
+        this.handleModalSearchInput = (event) => {
+            this.modalSearchQuery = event.target.value;
+            this.isCityPopoverOpen = true;
         };
-    }
-    setLabels() {
-        this.labels = {
-            deliveryTo: salla.lang.getWithDefault('pages.products.promise_deliver_to', 'توصيل إلى'),
-            pickupFromBranch: salla.lang.getWithDefault('pages.products.promise_pickup_from_branch', 'الاستلام من فرع'),
-            searchPlaceholder: salla.lang.getWithDefault('blocks.header.search_placeholder', 'بحث...'),
-            noResults: salla.lang.getWithDefault('common.elements.no_options', 'لا توجد نتائج'),
-            selectCity: salla.lang.getWithDefault('common.elements.select_city', 'اختر المدينة'),
+        this.handleModalComboboxActivate = () => {
+            this.isCityPopoverOpen = true;
         };
-    }
-    logger(message, data) {
-        if (localStorage.getItem('salla-delivery-promise-debug')) {
-            if (data) {
-                console.log(message, data);
+        // ═══════════════════════════════════════════════════════════════════════
+        //  Header click (dispatches to correct flow)
+        // ═══════════════════════════════════════════════════════════════════════
+        this.handleHeaderClick = (e) => {
+            e.stopPropagation();
+            if (this.isLoginCycleEnabled) {
+                this.openBulletDeliveryModal();
             }
             else {
-                console.log(message);
+                void this.openCityChangeModal();
             }
-        }
+        };
     }
+    // ═══════════════════════════════════════════════════════════════════════
+    //  Lifecycle
+    // ═══════════════════════════════════════════════════════════════════════
     async componentDidLoad() {
         await salla.onReady();
         await salla.lang.onLoaded();
-        this.setLabels();
-        this.requiresShipping = salla.url.is_page('product.single') &&
-            salla.config.get('store.features', []).includes('delivery-promises');
-        if (this.requiresShipping) {
-            this.logger('requiresShipping', this.requiresShipping);
-            this.productId = salla.config.get('page.id');
-            this.logger('productId', this.productId);
+        this.labels = loadLabels();
+        this.isDeliveryPromiseEnabled = salla.config.get('store.features', []).includes('delivery-promises');
+        this.isLoginCycleEnabled = salla.config.get('store.features', []).includes('bullet-delivery-v2');
+        this.productId = salla.config.get('page.id');
+        if (!this.isDeliveryPromiseEnabled) {
+            this.canRender = false;
+            return;
+        }
+        if (this.isLoginCycleEnabled) {
+            this.applyBulletIntent();
+            this.canRender = true;
+            window.addEventListener('bulletDeliveryConfirmed', this.onBulletDeliveryConfirmed);
         }
         else {
-            this.canRender = false;
-            this.logger('not requiresShipping', {
-                is_product_single: salla.url.is_page('product.single'),
-                includesDeliveryPromises: salla.config.get('store.features', []).includes('delivery-promises')
-            });
+            this.selectedLabel = `${this.labels.deliveryTo} ${this.labels.selectCity}`;
+            await this.loadCities();
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('bulletDeliveryConfirmed', this.onBulletDeliveryConfirmed);
+    }
+    applyBulletIntent() {
+        const resolved = resolveIntent();
+        if (!resolved) {
+            this.selectedLabel = `${this.labels.deliveryTo} ${this.labels.selectCity}`;
+            this.selectedCityLoginCycle = null;
+            this.selectedBranchLoginCycle = null;
+            this.deliveryMessage = null;
             return;
         }
-        await this.fetchCities();
+        if (resolved.type === 'address') {
+            this.selectedCityLoginCycle = resolved.option;
+            this.selectedBranchLoginCycle = null;
+            this.selectedLabel = `${this.labels.deliveryTo} ${resolved.option.name || this.labels.selectCity}`;
+            void this.loadDeliveryMessage(resolved.option.id, 'city');
+        }
+        else {
+            this.selectedBranchLoginCycle = resolved.option;
+            this.selectedCityLoginCycle = null;
+            this.selectedLabel = `${this.labels.pickupFromBranch} ${resolved.option.name}`;
+            void this.loadDeliveryMessage(resolved.option.id, 'branch');
+        }
     }
-    async fetchCities() {
-        this.logger('start startfetchCities');
+    openBulletDeliveryModal() {
+        salla.event.emit('bullet-delivery::open', buildBulletOpenPayload());
+    }
+    // ═══════════════════════════════════════════════════════════════════════
+    //  Standard flow (city list, no login cycle)
+    // ═══════════════════════════════════════════════════════════════════════
+    async loadCities() {
         this.isLoadingCities = true;
         this.hasError = false;
         try {
-            const response = await salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises/cities`));
-            if (response.success && Array.isArray(response.data) && response.data.length > 0) {
-                this.logger('fetchCities success', { cities: response.data });
-                // Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1)
-                this.cities = this.sortCities(response.data);
-                this.filteredCities = [...this.cities];
-                // First, check if API returns a selected city (is_selected: true)
-                let cityToSelect = this.cities.find(c => c.is_selected);
-                if (!cityToSelect) {
-                    this.logger('no selectedCity from API response');
-                }
-                else {
-                    this.logger('selectedCity', cityToSelect);
-                    this.selectedCity = cityToSelect;
-                    await this.fetchDeliveryMessage(cityToSelect.id);
-                }
-                this.canRender = true;
-            }
-            else {
-                this.logger('no data returned from fetchCities', { response: response });
+            const { cities, preselected } = await fetchCities(this.productId);
+            if (cities.length === 0) {
                 this.canRender = false;
+                return;
             }
+            this.cities = cities;
+            if (preselected) {
+                this.selectedCity = preselected;
+                this.selectedLabel = `${this.labels.deliveryTo} ${getCityDisplayName(preselected)}`;
+                await this.loadDeliveryMessage(preselected.id, 'city');
+            }
+            this.canRender = true;
         }
         catch (error) {
-            this.logger('fetchCities error', { error: error.message });
             this.hasError = true;
             this.errorMessage = error.message || 'Failed to load cities';
             this.canRender = false;
@@ -114,113 +272,92 @@ const SallaDeliveryPromise = class {
             this.isLoadingCities = false;
         }
     }
-    async fetchDeliveryMessage(cityId) {
-        this.logger('start fetchDeliveryMessage', { cityId });
+    // ═══════════════════════════════════════════════════════════════════════
+    //  Delivery message (shared by both flows)
+    // ═══════════════════════════════════════════════════════════════════════
+    async loadDeliveryMessage(id, optionType) {
         this.isLoadingPromises = true;
         this.hasError = false;
         this.deliveryMessage = null;
         try {
-            const response = await salla.api.withoutNotifier(() => salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises?city_id=${cityId}`)));
-            if (response.success && response.data?.message) {
-                const message = response.data.message.trim();
-                this.logger('fetchDeliveryMessage success', { message });
-                this.deliveryMessage = message || null;
-            }
-            else {
-                this.logger('deliveryMessage not valid', { response });
-            }
+            this.deliveryMessage = await fetchDeliveryMessage(this.productId, id, optionType, this.isLoginCycleEnabled);
         }
         catch (error) {
-            this.logger('fetchDeliveryMessage error', { error: error.message });
             this.hasError = true;
-            this.errorMessage = error.message || 'Failed to load delivery message';
+            this.errorMessage = optionType === 'city' ? this.labels.errorDeliveryPromise : this.labels.errorPickupPromise;
         }
         finally {
             this.isLoadingPromises = false;
         }
     }
-    toggleDropdown(e) {
-        e?.stopPropagation();
-        this.isDropdownOpen = !this.isDropdownOpen;
-        if (this.isDropdownOpen) {
-            window.addEventListener('click', this.onClickOutside);
-            if (this.searchInputRef) {
-                setTimeout(() => this.searchInputRef.focus(), 100);
-            }
-        }
-        else {
-            window.removeEventListener('click', this.onClickOutside);
-        }
+    // ═══════════════════════════════════════════════════════════════════════
+    //  City-change modal handlers (non–login-cycle)
+    // ═══════════════════════════════════════════════════════════════════════
+    async openCityChangeModal() {
+        if (!this.cityModalRef)
+            return;
+        this.cityPendingSelection = null;
+        this.modalSearchQuery = '';
+        this.isCityPopoverOpen = false;
+        await this.cityModalRef.setTitle(this.labels.changeCityTitle);
+        await this.cityModalRef.open();
     }
-    disconnectedCallback() {
-        window.removeEventListener('click', this.onClickOutside);
-    }
-    /**
-     * Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1) at the end
-     */
-    sortCities(cities) {
-        return [...cities].sort((a, b) => {
-            // "Rest of cities" (id === -1) should always be at the end
-            if (a.id === -1)
-                return 1;
-            if (b.id === -1)
-                return -1;
-            return 0;
-        });
-    }
-    handleSearch(event) {
-        const query = event.target.value.toLowerCase();
-        this.searchQuery = query;
-        if (query.length > 0) {
-            this.filteredCities = this.cities.filter(city => city.name.toLowerCase()?.includes(query) ||
-                (city.name_en || '').toLowerCase()?.includes(query));
-        }
-        else {
-            this.filteredCities = [...this.cities];
-        }
+    handleModalSelectCity(city) {
+        this.cityPendingSelection = city;
+        this.modalSearchQuery = getCityDisplayName(city);
+        this.isCityPopoverOpen = false;
     }
-    async selectCity(city) {
-        this.logger('selectCity', { city: city });
+    async handleConfirmCityModal() {
+        if (!this.cityPendingSelection) {
+            await this.cityModalRef?.close();
+            return;
+        }
+        const city = this.cityPendingSelection;
         this.selectedCity = city;
-        this.isDropdownOpen = false;
-        window.removeEventListener('click', this.onClickOutside);
-        this.searchQuery = '';
-        this.filteredCities = [...this.cities];
-        await this.fetchDeliveryMessage(city.id);
-    }
-    renderDropdown() {
-        return (h("div", { class: "s-delivery-promise-dropdown" }, h("div", { class: "s-delivery-promise-dropdown-search" }, h("i", { class: "sicon-search" }), h("input", { type: "text", placeholder: this.labels.searchPlaceholder, value: this.searchQuery, onInput: (e) => this.handleSearch(e), ref: el => this.searchInputRef = el })), h("div", { class: "s-delivery-promise-dropdown-list" }, this.filteredCities.length === 0 ? (h("div", { class: "s-delivery-promise-dropdown-empty" }, this.labels.noResults)) : (this.filteredCities.map(city => (h("div", { key: city.id, class: `s-delivery-promise-dropdown-item ${this.selectedCity?.id === city.id ? 'selected' : ''}`, onClick: () => this.selectCity(city) }, h("span", { class: "s-delivery-promise-city-name" }, city.name), this.selectedCity?.id === city.id && (h("i", { class: "sicon-check" })))))))));
-    }
-    /**
-     * Skeleton shown during initial city fetch to avoid blank period and layout shift.
-     * Matches the structure/size of the real content (header + message area).
-     */
-    renderInitialLoadingSkeleton() {
+        this.selectedLabel = `${this.labels.deliveryTo} ${getCityDisplayName(city)}`;
+        await this.loadDeliveryMessage(city.id, 'city');
+        await this.cityModalRef?.close();
+    }
+    // ═══════════════════════════════════════════════════════════════════════
+    //  Render helpers
+    // ═══════════════════════════════════════════════════════════════════════
+    renderLoadingSkeleton() {
         return (h(Host, { class: "s-delivery-promise-wrapper s-delivery-promise-skeleton" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header s-delivery-promise-header-skeleton" }, h("div", { class: "s-delivery-promise-location" }, h("salla-skeleton", { height: "14px", width: "180px" })), h("salla-skeleton", { height: "18px", width: "18px" })), h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })))));
     }
     renderDeliveryMessage() {
         if (this.isLoadingPromises) {
             return (h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })));
         }
-        if (!this.deliveryMessage) {
+        if (!this.deliveryMessage)
             return null;
-        }
-        return (h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage));
+        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)))))))));
+    }
+    renderCityChangeModal() {
+        if (this.isLoginCycleEnabled)
+            return null;
+        return (h("salla-modal", { id: "s-delivery-promise-city-modal", ref: el => { this.cityModalRef = el; }, class: "s-delivery-promise-city-modal", isClosable: true, width: "md", "modal-title": this.labels.changeCityTitle, subTitle: this.labels.changeCitySubtitle }, this.renderCityModalBody(), h("salla-button", { slot: "footer", width: "wide", disabled: !this.cityPendingSelection, onClick: () => this.handleConfirmCityModal() }, !this.isLoadingPromises && this.labels.confirmAddress)));
     }
+    // ═══════════════════════════════════════════════════════════════════════
+    //  Main render
+    // ═══════════════════════════════════════════════════════════════════════
     render() {
-        // Not on product page or delivery-promises disabled — hide entirely
-        if (!this.requiresShipping) {
+        if (!this.isDeliveryPromiseEnabled)
             return null;
-        }
-        // Initial city fetch: show skeleton to avoid blank period and layout shift
-        if (this.isLoadingCities) {
-            return this.renderInitialLoadingSkeleton();
-        }
-        // Fetch done but no cities / error — hide
-        if (!this.canRender || this.cities.length === 0) {
+        if (this.isLoadingCities)
+            return this.renderLoadingSkeleton();
+        if (!this.canRender)
             return null;
-        }
-        return (h(Host, { class: "s-delivery-promise-wrapper" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header", onClick: (e) => this.toggleDropdown(e) }, h("div", { class: "s-delivery-promise-location" }, h("span", { class: "s-delivery-promise-title" }, this.labels.deliveryTo, " ", this.selectedCity?.name || this.labels.selectCity)), h("i", { class: `sicon-keyboard_arrow_down s-delivery-promise-arrow ${this.isDropdownOpen ? 'open' : ''}` })), this.hasError && (h("div", { class: "s-delivery-promise-error" }, this.errorMessage)), this.isDropdownOpen && this.renderDropdown(), !this.hasError && this.renderDeliveryMessage())));
+        return (h(Host, { class: "s-delivery-promise-wrapper" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header", onClick: this.handleHeaderClick }, h("div", { class: "s-delivery-promise-location" }, h("span", { class: "s-delivery-promise-title" }, this.selectedLabel)), h("i", { class: `sicon-keyboard_arrow_down s-delivery-promise-arrow` })), this.hasError && h("div", { class: "s-delivery-promise-error" }, this.errorMessage), !this.hasError && this.renderDeliveryMessage()), this.renderCityChangeModal()));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/salla-edit-order-button.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host } from './index-rIbWLXjW.js';
 
 const sallaEditOrderButtonCss = ":host{display:block}";
 

package/dist/esm/salla-filters-widget.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-rIbWLXjW.js';
 import { H as Helper } from './Helper-DFMXF2_h.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/salla-filters.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-rIbWLXjW.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import { H as Helper } from './Helper-DFMXF2_h.js';
 import './anime.es-CgtvEd63.js';

package/dist/esm/salla-fulfillment-methods.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host } from './index-rIbWLXjW.js';
 
 const SallaFulfillmentMethods = class {
     constructor(hostRef) {

package/dist/esm/salla-gifting.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-CNVLmZO5.js';
+import { r as registerInstance, h } from './index-rIbWLXjW.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 import { S as SICancel } from './cancel-8Tsmrwno.js';

package/dist/esm/salla-hook.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-rIbWLXjW.js';
 
 const SallaHook = class {
     constructor(hostRef) {

package/dist/esm/salla-infinite-scroll.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-rIbWLXjW.js';
 import { H as Helper } from './Helper-DFMXF2_h.js';
 import './anime.es-CgtvEd63.js';
 

package/dist/esm/salla-installment.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-rIbWLXjW.js';
 
 const sallaInstallmentCss = "salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px;border:unset !important;font-weight:500}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--main-text-color);font-size:var(--font-sm);line-height:1.25;padding:20px 20px 20px 115px !important;background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);border:unset !important;font-family:inherit !important;font-weight:500}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper{margin-bottom:20px}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px !important;top:35px !important;margin:0 !important;height:24px !important}.ltr .tamara-product-widget .tamara-logo{right:20px !important;left:auto !important}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}.s-installment-mispay-wrapper,.s-installment-madfu-wrapper,.s-installment-emkan-wrapper,.s-installment-rajehi-wrapper{font-size:14px;text-align:right;padding:20px;gap:42px;line-height:22px;color:rgb(0, 0, 0);min-width:100%;box-sizing:border-box;position:relative;background-color:white;border-radius:10px;margin:15px 0;display:flex;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.s-installment-mispay-wrapper:hover,.s-installment-madfu-wrapper:hover,.s-installment-emkan-wrapper:hover,.s-installment-rajehi-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.s-installment-mispay-content,.s-installment-madfu-content,.s-installment-emkan-content,.s-installment-rajehi-content{display:flex;flex-direction:row-reverse;width:100%;justify-content:space-between;align-items:center;gap:1rem}.s-installment-mispay-content-text,.s-installment-madfu-content-text,.s-installment-emkan-content-text,.s-installment-rajehi-content-text{color:var(--main-text-color);font-size:14px;font-weight:500;margin:0 16px 0 0;width:80%;left:14px;text-align:left}.s-installment-mispay-content img,.s-installment-madfu-content img,.s-installment-emkan-content img,.s-installment-rajehi-content img{height:28px;width:70px;display:inline-block;max-height:100%;vertical-align:middle;fill:none;stroke:unset;width:auto}.rtl .s-installment-mispay-content-text,.rtl .s-installment-madfu-content-text,.rtl .s-installment-emkan-content-text,.rtl .s-installment-rajehi-content-text{right:14px;text-align:right;margin:0 0 0 16px}.rtl .s-installment-mispay-content img,.rtl .s-installment-madfu-content img,.rtl .s-installment-emkan-content img,.rtl .s-installment-rajehi-content img{left:14px !important}.ltr .s-installment-mispay-content img,.ltr .s-installment-madfu-content img,.ltr .s-installment-emkan-content img,.ltr .s-installment-rajehi-content img{right:14px !important}.s-installment-rajehi-content img{width:70px !important;height:40px !important}.s-installment-emkan-content img{height:35px !important}";
 

package/dist/esm/salla-list-tile.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, H as Host } from './index-rIbWLXjW.js';
 
 const sallaListTileCss = "";
 

package/dist/esm/salla-localization-modal.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-CNVLmZO5.js';
+import { r as registerInstance, h, a as getElement } from './index-rIbWLXjW.js';
 
 const SallaLocalizationModal = class {
     constructor(hostRef) {