@salla.sa/twilight-components 2.14.440 → 2.14.442

package/dist/collection/components/salla-delivery-promise/salla-delivery-promise.js

@@ -3,7 +3,6 @@
  */
 import { h, Host } from "@stencil/core";
 import { fetchCities, fetchDeliveryMessage } from "./delivery-promise-api";
-import { filterCitiesForModal } from "./delivery-promise-city-filter";
 import { buildBulletOpenPayload, resolveIntent } from "./delivery-promise-intent";
 import { DEFAULT_LABELS, getCityDisplayName, loadLabels } from "./delivery-promise-labels";
 import { log } from "./delivery-promise-api";
@@ -34,21 +33,24 @@ export class SallaDeliveryPromise {
         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)
@@ -157,7 +159,6 @@ export class SallaDeliveryPromise {
                 if (autoCity) {
                     log("delivery promise standard flow autoCity found", autoCity);
                     this.selectedCity = autoCity;
-                    this.modalSearchQuery = getCityDisplayName(autoCity);
                 }
                 await this.loadDeliveryMessage(cityId, 'city');
             }
@@ -196,14 +197,29 @@ export class SallaDeliveryPromise {
         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) {
@@ -231,14 +247,11 @@ export class SallaDeliveryPromise {
         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)
@@ -274,9 +287,9 @@ export class SallaDeliveryPromise {
             "cities": {},
             "selectedCity": {},
             "isLoadingCities": {},
-            "modalSearchQuery": {},
             "cityPendingSelection": {},
-            "isCityPopoverOpen": {}
+            "modalCities": {},
+            "isSearchingCities": {}
         };
     }
     static get elementRef() { return "host"; }