@salla.sa/twilight-components 3.0.17 → 3.0.19

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

@@ -2,21 +2,32 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host, } from "@stencil/core";
-import { bulletDeliveryAPI, clearApiCache, isSaudiArabia } from "./api-service";
-import { filterBranches, findNearestBranch, getGeolocationErrorMessage, getIntentBranchId, getIntentCityId, getIntentCountryCode, getIntentCountryId, getIntentDistrictId, getIntentLatitude, getIntentLongitude, getIntentRegionId, getIntentSubtitle, hasSessionAddressIntent, isBranchSelectable, isMapOriginIntent, requireRegionAndDistrictForSA, } from "./helpers";
+import { bulletDeliveryAPI, CACHE_TTL, clearApiCache, clearBranchCache, isSaudiArabia } from "./api-service";
+import { SelectorTracker, allocatedBranchIds, toCloseReason, } from "./selector-tracker";
+import { filterBranches, findNearestBranch, formatBranchClockTime, formatBranchDistance, getBranchWeekSchedule, getBranchCities, getBranchDirectionsHref, getBranchDiscount, getBranchDiscountRange, getBranchPhoneHref, getBranchReadinessLabel, getBranchReadyTodayTime, getBranchWhatsappHref, getIntentBranchId, getIntentCityId, getIntentCountryCode, getIntentCountryId, getIntentDistrictId, getIntentRegionId, getIntentSubtitle, groupBranchSchedule, hasSessionAddressIntent, isMapOriginIntent, isBranchAlwaysOpen, isBranchBusy, isBranchSelectable, isBranchVisible, requireRegionAndDistrictForSA, } from "./helpers";
 /* Location permission notice */
 import { isLocationPermissionMissing, LocationPermissionNotice, requestLocationPermission, watchLocationPermission, } from "./location-permission-notice";
 import { calculateLocationDistanceKm, LocationDistanceWarning, } from "./location-distance-warning";
 const BRANCH_SEARCH_DEBOUNCE_MS = 1000;
+/** Shorter queries are filtered locally; the branches API ignores them. */
+const BRANCH_SEARCH_MIN_LENGTH = 2;
 const GEOLOCATION_TIMEOUT = 10000;
+/** GeolocationPositionError.PERMISSION_DENIED — inlined; the class is absent on the server. */
+const GEO_PERMISSION_DENIED = 1;
+/** Silent read for branch distances: a short wait, and a recent cached fix is good enough. */
+const SILENT_GEOLOCATION_TIMEOUT = 5000;
+const SILENT_GEOLOCATION_MAX_AGE = 10 * 60 * 1000;
+/** Longest the branch list waits for that read; a later fix still serves the next list request. */
+const BRANCH_LIST_LOCATION_WAIT = 1500;
+/** Matches the `per_page` default of `bulletDeliveryAPI.getBranches`. */
+const BRANCH_PAGE_SIZE = 20;
 /** Final fallback center used only if `user.default_geo_location` is absent (Riyadh — matches checkout map-page). */
 const DEFAULT_MAP_CENTER = { lat: 24.7756042, lng: 46.7360729 };
 import GetDirections from "../../assets/svg/get-directions.svg";
-import GPS from "../../assets/svg/gps.svg";
 import Location from "../../assets/svg/location.svg";
 import MiniMap from "../../assets/svg/mini-map.svg";
 import Search from "../../assets/svg/search.svg";
-import Store from "../../assets/svg/store3.svg";
+import { BranchLocationIcon, LightningIcon, NotesIcon, PickupAvailabilityIcon, WorkingHoursIcon } from "./icons";
 const DEBUG_KEY = 'salla-bullet-delivery-debug';
 const OVERRIDE_IP_KEY = 'salla-bullet-delivery-override-ip';
 function log(message, data) {
@@ -32,6 +43,8 @@ export class SallaBulletDelivery {
         this.pendingCartSubmitResolver = null;
         this.pendingCartSubmitPromise = null;
         this.cartSubmitConfirmationPending = false;
+        /** Query the current branch list was searched with server-side; its results are not re-filtered locally. */
+        this.branchesServerQuery = '';
         this.branchSearchDebounceTimer = null;
         this.countrySearchTimer = null;
         this.regionSearchTimer = null;
@@ -63,6 +76,13 @@ export class SallaBulletDelivery {
             this.open();
         };
         this.closeHandler = null;
+        this.selectorTracker = new SelectorTracker();
+        this.openTrigger = "customer_requested";
+        this.pendingDismissReason = null;
+        this.modalCloseHandler = (detail) => {
+            this.pendingDismissReason = toCloseReason(detail?.reason);
+            queueMicrotask(() => (this.pendingDismissReason = null));
+        };
         this.bulletDeliveryMobileSelectHandler = null;
         /** True after saved addresses have been loaded (lazy: only when address tab is shown). */
         this.savedAddressesLoaded = false;
@@ -72,6 +92,8 @@ export class SallaBulletDelivery {
         /** Identifies the latest reverse-geocode call so a resolved-but-superseded callback (same
          *  coordinates re-picked, or the map left) can be told apart from the current one. */
         this.geocodeRequestId = 0;
+        /** Identifies the latest pickup-offer fetch so one from an earlier modal open is dropped. */
+        this.pickupDiscountRequestId = 0;
         // Core state
         this.activeTab = "address";
         this.isLoggedIn = false;
@@ -94,9 +116,27 @@ export class SallaBulletDelivery {
         this.selectedSessionAddress = false;
         // Pickup state
         this.branches = [];
+        /** Pickup offer range across the store's branches (INV-1416); null shows the default tab badge. */
+        this.pickupDiscountRange = null;
+        /** False until the offer lookup settles, so the tab never flashes the default badge before an offer. */
+        this.pickupDiscountResolved = false;
         this.filteredBranches = [];
         this.selectedBranch = null;
         this.branchSearchQuery = "";
+        /** Cities that have branches in the selected country (from the unfiltered branch list). */
+        this.branchCities = [];
+        this.selectedBranchCity = null;
+        this.branchCitySearchQuery = '';
+        /** Branch whose weekly hours are expanded behind the chevron (one at a time). */
+        this.expandedScheduleBranchId = null;
+        /** Shopper's device location for branch distances (see getGrantedDeviceLocation). */
+        this.shopperLocation = null;
+        this.shopperLocationRequestId = 0;
+        this.nearestBranchRequestId = 0;
+        /** Bumped per branch-list request; overlapping city/search loads only apply the latest one. */
+        this.branchesRequestId = 0;
+        /** Shared country rows and city options expire with the API cache. */
+        this.allBranchCities = null;
         // Loading states
         this.loadingCountries = false;
         this.loadingCities = false;
@@ -215,6 +255,13 @@ export class SallaBulletDelivery {
             this.displayedDistricts = this.districts;
             this.searchingDistricts = false;
         };
+        this.handleBranchCitySelected = (item) => {
+            this.selectedBranchCity = item && item.id !== -1
+                ? (this.branchCities.find((c) => String(c.id) === String(item.id)) ?? item)
+                : null;
+            this.selectedBranch = null;
+            void this.loadBranches();
+        };
         this.handleMapLocationChanged = (event) => {
             const detail = event.detail;
             if (!detail?.position?.lat || !detail?.position?.lng)
@@ -329,6 +376,7 @@ export class SallaBulletDelivery {
             const details = this.buildIntentAddress();
             if (!details)
                 return;
+            const previousIntent = this.getStoredIntent();
             this.setStoredIntent({
                 type: "address",
                 country_id: Number(this.selectedCountry?.id) || 0,
@@ -337,7 +385,7 @@ export class SallaBulletDelivery {
             });
             this.selectedSavedAddress = null;
             this.selectedSessionAddress = true;
-            await this.handleConfirm();
+            await this.handleConfirm(previousIntent);
         };
         this.handleCountrySelected = (item) => {
             const country = this.countries.find(c => String(c.id) === String(item.id)) || item;
@@ -422,9 +470,10 @@ export class SallaBulletDelivery {
      * successful auto-confirm never flashes the saved-addresses list; the caller is
      * responsible for revealing the modal itself if it still needs the customer's input.
      */
-    async open(silent = false) {
+    async open(silent = false, trigger = "customer_requested") {
         if (!this.isEnabled)
             return; // feature disabled — never open
+        this.openTrigger = trigger;
         // If mobile app, open the sheet
         if (this.isMobileApp) {
             Salla.event.dispatch('salla::bullet-delivery.open-sheet');
@@ -437,6 +486,7 @@ export class SallaBulletDelivery {
         }
         // Reset state before opening
         this.resetState();
+        void this.loadPickupDiscountRange();
         if (!silent) {
             // Open modal immediately — fields render right away with inline loading
             this.modal.open();
@@ -488,20 +538,18 @@ export class SallaBulletDelivery {
                 }
             }
             // Load branches only when branch tab is active (lazy tab data)
-            // Use lat/lng from session storage if available for more accurate results
             if (this.activeTab === "branch") {
-                const intentLat = getIntentLatitude(savedIntent);
-                const intentLng = getIntentLongitude(savedIntent);
-                if (intentLat != null && intentLng != null) {
-                    await this.loadBranchesWithLocation(intentLat, intentLng);
-                }
-                else {
-                    await this.loadBranches();
-                }
+                const loading = this.loadBranches();
+                const request = this.branchesRequestId;
+                await loading;
+                if (request !== this.branchesRequestId || this.activeTab !== 'branch' || this.branchSearchQuery.trim())
+                    return;
                 // Auto-select preselected branch if provided
                 if (this.preselectedBranchId) {
-                    this.preselectBranch(this.preselectedBranchId);
+                    await this.preselectBranch(this.preselectedBranchId);
                 }
+                if (request !== this.branchesRequestId || this.activeTab !== 'branch' || this.branchSearchQuery.trim())
+                    return;
             }
             // Prefill form data from session storage
             await this.prefillFromSessionStorage();
@@ -526,7 +574,45 @@ export class SallaBulletDelivery {
         this.bulletDeliveryClosed.emit();
         return this.modal?.close();
     }
+    selectorContext() {
+        return {
+            configured_required: this.isRequired,
+            effective_nonclosable: this.isRequired || this.shouldForceNonClosable(),
+            trigger_configured: this.openingType ?? null,
+            trigger_actual: this.openTrigger,
+        };
+    }
+    handleModalVisibility(visible) {
+        if (visible) {
+            this.selectorTracker.viewed(this.selectorContext());
+            return;
+        }
+        if (!this.pendingDismissReason)
+            return;
+        this.selectorTracker.dismissed(this.selectorContext(), this.pendingDismissReason, !!this.getStoredIntent()?.scope_allocated);
+        this.pendingDismissReason = null;
+    }
+    trackSelectorResult(outcome, previousIntent, newBranchIds, scopeId) {
+        this.selectorTracker.result(this.selectorContext(), {
+            outcome,
+            fulfilment_method: this.activeTab === "branch" ? "pickup" : "delivery",
+            previous_branch_ids: previousIntent?.scope_allocated ? allocatedBranchIds(previousIntent) : [],
+            new_branch_ids: newBranchIds,
+            scope_id: scopeId ?? null,
+        });
+    }
     resetState() {
+        clearBranchCache();
+        this.allBranchCities = null;
+        this.pickupDiscountRequestId++;
+        if (this.branchSearchDebounceTimer)
+            clearTimeout(this.branchSearchDebounceTimer);
+        ++this.branchesRequestId;
+        this.loadingBranches = false;
+        ++this.shopperLocationRequestId;
+        ++this.nearestBranchRequestId;
+        this.loadingNearestBranch = false;
+        this.shopperLocation = null;
         this.viewMode = "main";
         this.mapLocationData = null;
         this.mapCountryCode = null;
@@ -543,11 +629,16 @@ export class SallaBulletDelivery {
         this.selectedSessionAddress = false;
         this.selectedBranch = null;
         this.branchSearchQuery = "";
+        this.branchCities = [];
+        this.selectedBranchCity = null;
+        this.expandedScheduleBranchId = null;
         this.regions = [];
         this.cities = [];
         this.districts = [];
         this.branches = [];
         this.filteredBranches = [];
+        this.pickupDiscountRange = null;
+        this.pickupDiscountResolved = false;
         this.newAddressForm = { ...SallaBulletDelivery.INITIAL_ADDRESS_FORM };
         this.showCartWillBeClearedBanner = false;
         this.allocationOutOfCoverageMessage = null;
@@ -665,7 +756,7 @@ export class SallaBulletDelivery {
             if (!wasVisible) {
                 // Load silently — a successful auto-confirm should never flash the
                 // saved-addresses list; only reveal the modal below if it can't finish on its own.
-                await this.open(true);
+                await this.open(true, "after_login");
             }
             // open() -> loadSavedAddresses() already sets selectedSessionAddress when a
             // session intent exists; bail if that didn't happen (e.g. address_id already set).
@@ -951,16 +1042,63 @@ export class SallaBulletDelivery {
         });
     }
     async loadBranches() {
+        const request = ++this.branchesRequestId;
+        // A city change keeps the active search, so the server filters before picking the first page.
+        const query = this.branchSearchQuery.trim();
         this.loadingBranches = true;
         try {
-            this.applyLoadedBranches(await bulletDeliveryAPI.getBranches({
+            const branches = await bulletDeliveryAPI.getBranches({
                 country_id: this.selectedCountry?.id,
-            }));
+                city_id: this.selectedBranchCity?.id,
+                query,
+                ...(await this.getListLocation()),
+            });
+            if (request !== this.branchesRequestId)
+                return;
+            this.branchesServerQuery = query.length >= BRANCH_SEARCH_MIN_LENGTH ? query : '';
+            this.applyLoadedBranches(branches);
+            // Search results hold only the matching branches, which would shrink the city options.
+            if (query.length < BRANCH_SEARCH_MIN_LENGTH)
+                void this.refreshBranchCities();
         }
         finally {
-            this.loadingBranches = false;
+            if (request === this.branchesRequestId)
+                this.loadingBranches = false;
         }
     }
+    /** Reuse the country's city collection while keeping visible choices usable during loading. */
+    refreshBranchCities() {
+        if (!this.selectedBranchCity)
+            this.branchCities = getBranchCities(this.branches);
+        const countryId = this.selectedCountry?.id;
+        if (!this.allBranchCities || this.allBranchCities.countryId !== countryId || Date.now() - this.allBranchCities.timestamp > CACHE_TTL) {
+            const branches = bulletDeliveryAPI.getAllBranches(countryId, BRANCH_PAGE_SIZE);
+            this.allBranchCities = {
+                countryId,
+                timestamp: Date.now(),
+                branches,
+                cities: branches.then((all) => getBranchCities(all)),
+            };
+        }
+        const pending = this.allBranchCities;
+        return pending.cities.then((cities) => {
+            if (this.allBranchCities !== pending || this.selectedCountry?.id !== countryId)
+                return;
+            if (!cities.length) {
+                this.allBranchCities = null;
+                return;
+            }
+            this.branchCities = cities;
+        }).catch((error) => {
+            if (this.allBranchCities === pending) {
+                this.allBranchCities = null;
+                if (this.selectedCountry?.id === countryId && Array.isArray(error?.branches)) {
+                    this.branchCities = getBranchCities([...this.branches, ...error.branches]);
+                }
+            }
+            console.error('[BulletDelivery] Error fetching branch cities', error);
+        });
+    }
     /**
      * Store a freshly fetched branch list and reconcile the current selection with it.
      * `selectedBranch` is a snapshot from selection time: when the refreshed list carries the
@@ -977,8 +1115,33 @@ export class SallaBulletDelivery {
         }
         this.filterBranches();
     }
+    /** Shares a fresh branch collection with the picker on each modal open. */
+    async loadPickupDiscountRange() {
+        if (!this.supportsPickup)
+            return;
+        const requestId = ++this.pickupDiscountRequestId;
+        const { branches, complete } = await bulletDeliveryAPI.getBranchCollection(undefined, 60, { requireComplete: true });
+        if (requestId !== this.pickupDiscountRequestId)
+            return;
+        this.pickupDiscountRange = complete ? getBranchDiscountRange(branches) : null;
+        this.pickupDiscountResolved = true;
+    }
+    /**
+     * ar: "خصم 25%" / "خصم 5 – 25%" / "خصم 10 ر.س"; en: "25% discount" / "5 – 25% discount" / "10 SAR discount".
+     * Money may carry the riyal-symbol SVG, so it renders as HTML.
+     */
+    getPickupDiscountLabel(type, min, max = min) {
+        const format = (amount) => type === 'percentage' ? String(Math.round(amount * 100) / 100) : salla.money(amount);
+        const value = min === max ? format(min) : `${format(min)} – ${format(max)}`;
+        const amount = type === 'percentage' ? `${value}%` : `${value} `;
+        const fallback = this.isArabic ? `خصم ${amount}` : ` ${amount} discount`;
+        return Salla.lang.getWithDefault('pages.checkout.pickup_discount', fallback, { amount });
+    }
     filterBranches() {
-        this.filteredBranches = filterBranches(this.branches, this.branchSearchQuery);
+        const query = this.branchSearchQuery.trim();
+        this.filteredBranches = query && query === this.branchesServerQuery
+            ? this.branches
+            : filterBranches(this.branches, query);
     }
     /**
      * Prefill form fields from session storage
@@ -1003,7 +1166,7 @@ export class SallaBulletDelivery {
                     if (country) {
                         this.selectedCountry = country;
                         this.updateNewAddressForm({ country_id: Number(country.id) });
-                        this.preselectBranch(getIntentBranchId(intent));
+                        await this.preselectBranch(getIntentBranchId(intent));
                     }
                 }
             }
@@ -1042,7 +1205,16 @@ export class SallaBulletDelivery {
         }
     }
     applyCountryChange(newCountry) {
+        ++this.branchesRequestId;
+        this.allBranchCities = null;
+        this.loadingBranches = false;
+        this.branches = [];
+        this.filteredBranches = [];
         this.selectedCountry = newCountry;
+        this.selectedBranchCity = null;
+        this.branchCities = [];
+        this.branchCitySearchQuery = '';
+        this.selectedBranch = null;
         this.selectedRegion = null;
         this.regions = [];
         this.displayedRegions = [];
@@ -1162,19 +1334,11 @@ export class SallaBulletDelivery {
             void this.loadBranches();
             return;
         }
-        this.branchSearchDebounceTimer = setTimeout(async () => {
-            if (query.trim().length < 2)
+        this.branchSearchDebounceTimer = setTimeout(() => {
+            // Below the minimum, only reload when the list still holds an earlier server search.
+            if (query.trim().length < BRANCH_SEARCH_MIN_LENGTH && !this.branchesServerQuery)
                 return;
-            this.loadingBranches = true;
-            try {
-                this.applyLoadedBranches(await bulletDeliveryAPI.getBranches({
-                    country_id: this.selectedCountry?.id,
-                    query,
-                }));
-            }
-            finally {
-                this.loadingBranches = false;
-            }
+            void this.loadBranches();
         }, BRANCH_SEARCH_DEBOUNCE_MS);
     }
     clearSearchTimers() {
@@ -1201,13 +1365,23 @@ export class SallaBulletDelivery {
         this.clearSearchTimers();
     }
     async loadBranchesWithLocation(lat, lng) {
+        // Later list loads (city change, search) keep measuring from the device location.
+        ++this.shopperLocationRequestId;
+        this.shopperLocation = { lat, lng };
+        const request = ++this.branchesRequestId;
         this.loadingBranches = true;
         try {
-            this.applyLoadedBranches(await bulletDeliveryAPI.getBranches({
+            const branches = await bulletDeliveryAPI.getBranches({
                 country_id: this.selectedCountry?.id,
+                city_id: this.selectedBranchCity?.id,
                 lat,
                 lng,
-            }));
+            });
+            if (request !== this.branchesRequestId)
+                return false;
+            this.branchesServerQuery = '';
+            this.applyLoadedBranches(branches);
+            void this.refreshBranchCities();
             // Auto-select country from first branch if no country is selected
             if (!this.selectedCountry && this.branches.length > 0) {
                 const firstBranch = this.branches[0];
@@ -1221,9 +1395,11 @@ export class SallaBulletDelivery {
                     }
                 }
             }
+            return true;
         }
         finally {
-            this.loadingBranches = false;
+            if (request === this.branchesRequestId)
+                this.loadingBranches = false;
         }
     }
     /** Locate nearest branch using device geolocation (branches tab only). */
@@ -1232,6 +1408,7 @@ export class SallaBulletDelivery {
             this.locationError = Salla.lang.get("pages.checkout.current_location_not_supported");
             return;
         }
+        const request = ++this.nearestBranchRequestId;
         this.loadingNearestBranch = true;
         this.locationError = "";
         try {
@@ -1243,7 +1420,12 @@ export class SallaBulletDelivery {
                 });
             });
             const { latitude, longitude } = position.coords;
-            await this.loadBranchesWithLocation(latitude, longitude);
+            if (request !== this.nearestBranchRequestId)
+                return;
+            if (!await this.loadBranchesWithLocation(latitude, longitude))
+                return;
+            if (request !== this.nearestBranchRequestId)
+                return;
             const nearestBranch = findNearestBranch(this.branches, latitude, longitude);
             if (nearestBranch) {
                 this.selectedBranch = nearestBranch;
@@ -1252,26 +1434,56 @@ export class SallaBulletDelivery {
             }
         }
         catch (error) {
+            if (request !== this.nearestBranchRequestId)
+                return;
             const geoError = error;
             const code = typeof geoError?.code === "number" ? geoError.code : -1;
-            this.locationError = getGeolocationErrorMessage(code);
+            this.locationError = this.geolocationErrorMessage(code);
         }
         finally {
-            this.loadingNearestBranch = false;
+            if (request === this.nearestBranchRequestId)
+                this.loadingNearestBranch = false;
         }
     }
+    geolocationErrorMessage(code) {
+        if (code === GEO_PERMISSION_DENIED) {
+            return Salla.lang.getWithDefault("pages.checkout.allow_location_permission_blocked_hint", this.isArabic
+                ? "مشاركة الموقع محجوبة لهذا المتجر في متصفحك. افتح إعدادات الموقع في المتصفح، اسمح بالوصول إلى الموقع، ثم أعد المحاولة."
+                : "Location sharing is blocked for this store in your browser. Open your browser's location settings, allow location access, then try again.");
+        }
+        return Salla.lang.getWithDefault("pages.checkout.pickup_location_unavailable", this.isArabic ? "تعذَّر تحديد موقعك. حاول مرة أخرى." : "We couldn't detect your location. Try again.");
+    }
     handleBranchSelect(branch) {
         this.selectedBranch = branch;
         this.allocationOutOfCoverageMessage = null;
     }
+    toggleBranchSchedule(branchId) {
+        this.expandedScheduleBranchId = this.expandedScheduleBranchId === branchId ? null : branchId;
+    }
     /**
      * Restore a remembered / event-provided branch — but only one the list renders as selectable,
      * so a branch that has closed since it was remembered is never silently preselected (INV-1407).
      */
-    preselectBranch(branchId) {
-        if (branchId == null)
+    async preselectBranch(branchId) {
+        if (branchId == null || this.selectedBranch)
             return;
-        const branch = this.branches.find((b) => b.id === branchId);
+        let branch = this.branches.find((b) => b.id === branchId);
+        if (!branch && this.allBranchCities) {
+            const pending = this.allBranchCities;
+            const request = this.branchesRequestId;
+            try {
+                branch = (await pending.branches).find((b) => b.id === branchId);
+            }
+            catch {
+                return;
+            }
+            if (request !== this.branchesRequestId || this.activeTab !== 'branch' || this.allBranchCities !== pending || pending.countryId !== this.selectedCountry?.id || this.selectedBranch || this.branchSearchQuery.trim())
+                return;
+            if (this.selectedBranchCity && String(branch?.city?.id) !== String(this.selectedBranchCity.id))
+                return;
+            if (branch && isBranchSelectable(branch))
+                this.applyLoadedBranches([...this.branches, branch]);
+        }
         if (branch && isBranchSelectable(branch)) {
             this.selectedBranch = branch;
         }
@@ -1532,6 +1744,48 @@ export class SallaBulletDelivery {
     }
     /** Center shown before geolocation resolves — the customer's IP-based default (falls back to Riyadh). */
     get mapInitialCenter() {
+        return this.defaultGeoLocation ?? DEFAULT_MAP_CENTER;
+    }
+    /** Device location for a branch list request, waiting at most BRANCH_LIST_LOCATION_WAIT. */
+    getListLocation() {
+        const location = this.getGrantedDeviceLocation();
+        if (this.shopperLocation || !navigator.geolocation || !navigator.permissions?.query)
+            return location;
+        return Promise.race([location, new Promise((resolve) => setTimeout(() => resolve({}), BRANCH_LIST_LOCATION_WAIT))]);
+    }
+    /**
+     * Where branch distances (`distance_km`) are measured from: the shopper's real device location
+     * only. It comes from "nearest to my location", or is read silently when location permission was
+     * already granted (never prompting). Empty otherwise: `user.default_geo_location` and the Riyadh
+     * map fallback are not where the shopper is, so they would show wrong distances.
+     */
+    async getGrantedDeviceLocation() {
+        if (this.shopperLocation)
+            return this.shopperLocation;
+        if (!navigator.geolocation || !navigator.permissions?.query)
+            return {};
+        const request = ++this.shopperLocationRequestId;
+        try {
+            const permission = await navigator.permissions.query({ name: 'geolocation' });
+            if (request !== this.shopperLocationRequestId)
+                return this.shopperLocation ?? {};
+            if (permission.state !== 'granted')
+                return {};
+            const position = await new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject, {
+                timeout: SILENT_GEOLOCATION_TIMEOUT,
+                maximumAge: SILENT_GEOLOCATION_MAX_AGE,
+            }));
+            if (request !== this.shopperLocationRequestId)
+                return this.shopperLocation ?? {};
+            this.shopperLocation = { lat: position.coords.latitude, lng: position.coords.longitude };
+            return this.shopperLocation;
+        }
+        catch {
+            return {};
+        }
+    }
+    /** The customer's IP-based `user.default_geo_location`, or null when it is missing or invalid. */
+    get defaultGeoLocation() {
         const geo = salla.config.get('user.default_geo_location');
         // Coerce defensively: config may arrive as strings, blank/whitespace, NaN, or out-of-range
         // values. Reject blanks before coercion (Number('') === 0) and validate lat/lng ranges so we
@@ -1540,7 +1794,7 @@ export class SallaBulletDelivery {
         const lng = this.toCoordinate(geo?.lng);
         const isValid = lat != null && lng != null &&
             lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
-        return isValid ? { lat, lng } : DEFAULT_MAP_CENTER;
+        return isValid ? { lat, lng } : null;
     }
     /** Parse a config coordinate to a finite number, treating blank/whitespace strings as missing. */
     toCoordinate(value) {
@@ -1554,6 +1808,8 @@ export class SallaBulletDelivery {
     async handleTabChange(tab) {
         if (this.tabChanging)
             return;
+        ++this.branchesRequestId;
+        this.loadingBranches = false;
         this.tabChanging = true;
         try {
             this.activeTab = tab;
@@ -1585,24 +1841,25 @@ export class SallaBulletDelivery {
                     this.selectedCountry = this.countries[0];
                 }
             }
+            if (String(previousCountryId ?? '') !== String(this.selectedCountry?.id ?? '')) {
+                this.allBranchCities = null;
+                this.selectedBranchCity = null;
+                this.branchCities = [];
+                this.branchCitySearchQuery = '';
+                this.selectedBranch = null;
+                this.branches = [];
+                this.filteredBranches = [];
+            }
             if (tab === "address" && this.needsMap)
                 this.fetchAddressToken();
             // Load appropriate data when switching tabs if country is selected
             if (this.selectedCountry) {
                 if (tab === "branch") {
                     // Load branches when switching to branch tab
-                    // Check session storage for lat/lng to get nearby branches
                     const savedIntent = this.getStoredIntent();
-                    const intentLat = getIntentLatitude(savedIntent);
-                    const intentLng = getIntentLongitude(savedIntent);
-                    if (intentLat != null && intentLng != null) {
-                        await this.loadBranchesWithLocation(intentLat, intentLng);
-                    }
-                    else {
-                        await this.loadBranches();
-                    }
+                    await this.loadBranches();
                     // Preselect branch from session storage if available
-                    this.preselectBranch(getIntentBranchId(savedIntent));
+                    void this.preselectBranch(getIntentBranchId(savedIntent));
                 }
                 else if (tab === "address") {
                     // Lazy-load saved addresses when switching to address tab (if not loaded yet).
@@ -1728,7 +1985,7 @@ export class SallaBulletDelivery {
         if (await this.tryAutoConfirmAfterLogin())
             return;
         if (!this.modal?.hasAttribute?.("visible") || !this.isLoggedIn) {
-            this.open();
+            this.open(false, "after_login");
         }
     }
     buildIntentAddress() {
@@ -2007,13 +2264,14 @@ export class SallaBulletDelivery {
         }
         return raw;
     }
-    async handleConfirm() {
+    async handleConfirm(intentBeforeDraft) {
         if (this.isConfirmDisabled() || this.confirming)
             return;
         this.allocationOutOfCoverageMessage = null;
         this.confirming = true;
         this.confirmBtn?.load();
         let scheduledRedirect = false;
+        const previousIntent = intentBeforeDraft === undefined ? this.getStoredIntent() : intentBeforeDraft;
         try {
             // A guest map pin uses the pin's own country; the IP/selected country may differ from it.
             const country = this.activeTab === "address" && this.isGuestMapPick
@@ -2031,6 +2289,7 @@ export class SallaBulletDelivery {
                     const savedAddress = await this.saveSessionAddressToProfile();
                     if (!savedAddress) {
                         Salla.notify?.error(Salla.lang.get("common.errors.error_occurred"));
+                        this.trackSelectorResult("failed", previousIntent, []);
                         this.confirmBtn?.stop();
                         return;
                     }
@@ -2104,9 +2363,17 @@ export class SallaBulletDelivery {
                     (this.activeTab === "address"
                         ? Salla.lang.get("pages.checkout.address_out_of_coverage")
                         : Salla.lang.get("pages.checkout.failed_to_set_pickup"));
-                this.allocationOutOfCoverageMessage = `${errorMessage}.`;
+                this.allocationOutOfCoverageMessage = /[.!؟?]$/.test(errorMessage.trim()) ? errorMessage : `${errorMessage}.`;
+                this.trackSelectorResult("failed", previousIntent, []);
                 this.confirmBtn?.stop();
                 this.confirming = false;
+                // A rejected branch may have turned busy or closed: drop it (the reload may hide it) and
+                // reload so the list shows its current state.
+                if (this.activeTab === "branch") {
+                    this.selectedBranch = null;
+                    clearApiCache();
+                    void this.loadBranches();
+                }
                 return;
             }
             // Process successful allocation response
@@ -2141,6 +2408,7 @@ export class SallaBulletDelivery {
                     const scopeApplied = await bulletDeliveryAPI.setDeliveryScope(allocatedScopeId);
                     if (!scopeApplied) {
                         this.allocationOutOfCoverageMessage = `${Salla.lang.get("common.errors.error_occurred")}.`;
+                        this.trackSelectorResult("failed", previousIntent, [], allocatedScopeId);
                         this.confirmBtn?.stop();
                         this.confirming = false;
                         return;
@@ -2160,6 +2428,7 @@ export class SallaBulletDelivery {
             // After allocation success: persist latest intent so switch UI can always reflect
             // the selected address/branch once confirmed.
             this.setStoredIntent({ ...result, scope_allocated: true });
+            this.trackSelectorResult("accepted", previousIntent, allocatedBranchIds(result), allocatedScopeId);
             const allocationConfirmedPayload = {
                 ...result,
                 address: this.buildAllocationConfirmedAddressData(selectedAddress),
@@ -2270,6 +2539,19 @@ export class SallaBulletDelivery {
         wrapper.append(info, btn);
         return wrapper;
     }
+    /**
+     * A branch pickup offer (INV-1416) replaces the default "save delivery fees" badge; only one shows,
+     * and neither until the offer lookup settles.
+     */
+    renderPickupTabBadge() {
+        if (!this.pickupDiscountResolved)
+            return null;
+        const range = this.pickupDiscountRange;
+        if (range) {
+            return (h("span", { class: "s-bullet-delivery-tab-badge s-bullet-delivery-discount-badge", dir: this.isArabic ? 'rtl' : 'ltr', innerHTML: this.getPickupDiscountLabel(range.type, range.min, range.max) }));
+        }
+        return (h("span", { class: "s-bullet-delivery-tab-badge" }, h("span", { class: "s-bullet-delivery-tab-badge-icon", innerHTML: LightningIcon, "aria-hidden": "true" }), Salla.lang.getWithDefault("pages.checkout.save_delivery_fees", "وفّر رسوم التوصيل")));
+    }
     renderTabs() {
         // Show tabs only when pickup is supported; otherwise delivery-only view with no tabs.
         // The pickup tab is gated by this same `supportsPickup` check, while the delivery
@@ -2279,10 +2561,10 @@ export class SallaBulletDelivery {
         return (h("div", { class: "s-bullet-delivery-tabs" }, this.isSupportsDelivery && (h("button", { type: "button", class: {
                 "s-bullet-delivery-tab": true,
                 "s-bullet-delivery-tab--active": this.activeTab === "address",
-            }, onClick: () => this.handleTabChange("address") }, h("span", { class: "s-bullet-delivery-tab-icon", innerHTML: Location, "aria-hidden": "true" }), h("span", null, Salla.lang.get("mobile_app.strings.delivery")))), h("button", { type: "button", class: {
+            }, onClick: () => this.handleTabChange("address") }, h("span", null, Salla.lang.get("mobile_app.strings.delivery")))), h("button", { type: "button", class: {
                 "s-bullet-delivery-tab": true,
                 "s-bullet-delivery-tab--active": this.activeTab === "branch",
-            }, onClick: () => this.handleTabChange("branch") }, h("span", { class: "s-bullet-delivery-tab-icon", innerHTML: Store, "aria-hidden": "true" }), h("span", null, Salla.lang.get("mobile_app.strings.pickup")))));
+            }, onClick: () => this.handleTabChange("branch") }, h("span", null, Salla.lang.get("mobile_app.strings.pickup")), this.renderPickupTabBadge())));
     }
     renderAlert(message) {
         return (h("div", { class: "s-bullet-delivery-allocation-out-of-coverage", role: "alert" }, h("span", { class: "s-bullet-delivery-allocation-out-of-coverage-icon", "aria-hidden": "true" }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true" }, h("title", null, "Information"), h("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", "stroke-width": "1.5", fill: "currentColor" }), h("text", { x: "10", y: "14", "text-anchor": "middle", fill: "white", "font-size": "12", "font-weight": "bold" }, "i"))), h("span", { class: "s-bullet-delivery-allocation-out-of-coverage-text", style: { textAlign: this.isRTL ? 'right' : 'left' } }, message)));
@@ -2306,8 +2588,9 @@ export class SallaBulletDelivery {
         }
         return this.renderAlert(`${message} ${Salla.lang.getWithDefault('pages.cart.choose_another_address', 'Choose another address')}`);
     }
-    renderCountrySelect() {
-        return (h("div", { class: "s-bullet-delivery-field" }, h("salla-searchable-dropdown", { label: Salla.lang.get("blocks.buy_as_gift.receiver_country"), placeholder: Salla.lang.get("pages.checkout.select_country"), items: this.displayedCountries, selectedItem: this.selectedCountry, loading: this.loadingCountries, searching: this.searchingCountries, disabled: this.countries.length <= 1, required: true, inputId: "bullet-delivery-country", searchQuery: this.countrySearchQuery, clientSearch: true, onItemSelected: (e) => this.handleCountrySelected(e.detail), onSearchInput: (e) => this.handleCountrySearch(e.detail), onDropdownClosed: () => this.handleCountryDropdownClosed() })));
+    /** `showLabel` is off in the pickup filter panel, where the selects sit label-less side by side. */
+    renderCountrySelect(showLabel = true) {
+        return (h("div", { class: "s-bullet-delivery-field" }, h("salla-searchable-dropdown", { label: showLabel ? Salla.lang.get("blocks.buy_as_gift.receiver_country") : undefined, placeholder: Salla.lang.get("pages.checkout.select_country"), items: this.displayedCountries, selectedItem: this.selectedCountry, loading: this.loadingCountries, searching: this.searchingCountries, disabled: this.countries.length <= 1, required: true, inputId: "bullet-delivery-country", searchQuery: this.countrySearchQuery, clientSearch: true, onItemSelected: (e) => this.handleCountrySelected(e.detail), onSearchInput: (e) => this.handleCountrySearch(e.detail), onDropdownClosed: () => this.handleCountryDropdownClosed() })));
     }
     /** Region select (SA only): shown when SA is selected; city and district disabled until region selected. */
     renderRegionSelect() {
@@ -2552,66 +2835,146 @@ export class SallaBulletDelivery {
         return (h("form", { onSubmit: handleSubmit }, this.renderGuestDeliveryForm(), h("div", { class: "s-bullet-delivery-form-actions s-bullet-delivery-form-actions--single", style: { padding: '24px' } }, h("salla-button", { type: "submit", loading: this.confirming, disabled: !canSubmit || this.confirming, width: "wide" }, submitLabel), !this.isLoggedIn && (h("button", { type: "button", class: "s-bullet-delivery-login-prompt", onClick: () => this.handleLogin() }, Salla.lang.get('pages.checkout.login_to_use_saved_addresses'))))));
     }
     renderBranchSearch() {
-        return (h("div", { class: "s-bullet-delivery-branch-search" }, h("div", { class: "s-bullet-delivery-search-row" }, h("div", { class: "s-bullet-delivery-search s-bullet-delivery-branch-search-wrap" }, h("span", { class: "s-bullet-delivery-search-icon s-bullet-delivery-branch-search-icon", innerHTML: Search, "aria-hidden": "true" }), h("input", { type: "text", class: "s-bullet-delivery-branch-search-input form-input", placeholder: Salla.lang.get("pages.checkout.search_for_city_or_branch"), value: this.branchSearchQuery, onInput: (e) => this.handleBranchSearch(e), autocomplete: "off" })), h("button", { type: "button", class: {
+        return (h("div", { class: "s-bullet-delivery-branch-search" }, h("div", { class: "s-bullet-delivery-search-row" }, h("div", { class: "s-bullet-delivery-search s-bullet-delivery-branch-search-wrap" }, h("span", { class: "s-bullet-delivery-search-icon s-bullet-delivery-branch-search-icon", innerHTML: Search, "aria-hidden": "true" }), h("input", { type: "text", class: "s-bullet-delivery-branch-search-input form-input", placeholder: Salla.lang.getWithDefault("pages.checkout.search_for_country_city_or_branch", this.isArabic ? "ابحث عن دولة أو مدينة أو فرع" : "Search for a country, city or branch"), value: this.branchSearchQuery, onInput: (e) => this.handleBranchSearch(e), autocomplete: "off" })), h("button", { type: "button", class: {
                 "s-bullet-delivery-location-btn": true,
                 "s-bullet-delivery-location-btn--full": true,
                 "s-bullet-delivery-location-btn--loading": this.loadingNearestBranch,
-            }, onClick: () => this.handleFindNearestBranch(), disabled: this.loadingNearestBranch }, this.loadingNearestBranch ? (h("span", { class: "s-bullet-delivery-location-icon", "aria-hidden": "true" }, h("salla-skeleton", { height: "18px", width: "18px" }))) : (h("span", { class: "s-bullet-delivery-location-icon", innerHTML: GPS, "aria-hidden": "true" })), h("span", null, Salla.lang.get("pages.checkout.nearest_to_my_location")))), this.locationError && this.activeTab === "branch" && (h("span", { class: "s-bullet-delivery-error" }, this.locationError))));
-    }
-    /** Renders a branch's `preparation_time_range` as a localized "from - to <unit>" label. */
-    getPreparationTimeLabel(range) {
-        if (!range)
-            return null;
-        const unitKeys = {
-            hour: 'pages.checkout.preparation_time_hours',
-            minute: 'pages.checkout.preparation_time_minutes',
-            day: 'pages.checkout.preparation_time_days',
-        };
-        const key = unitKeys[range.from.unit];
-        if (!key)
-            return null;
-        return Salla.lang
-            .getWithDefault(key, 'من {from} إلى {to} دقائق')
-            ?.replace('{from}', String(range.from.value))
-            ?.replace('{to}', String(range.to.value));
+            }, onClick: () => this.handleFindNearestBranch(), disabled: this.loadingNearestBranch, "aria-label": Salla.lang.get("pages.checkout.nearest_to_my_location") }, this.loadingNearestBranch ? (h("span", { class: "s-bullet-delivery-location-icon", "aria-hidden": "true" }, h("salla-skeleton", { height: "16px", width: "16px" }))) : (h("span", { class: "s-bullet-delivery-location-icon", innerHTML: Location, "aria-hidden": "true" })), h("span", { class: "s-bullet-delivery-location-label" }, Salla.lang.get("pages.checkout.nearest_to_my_location")))), this.locationError && this.activeTab === "branch" && (h("span", { class: "s-bullet-delivery-error" }, this.locationError))));
     }
     renderBranchList() {
         if (this.loadingBranches) {
             return (h("div", { class: "s-bullet-delivery-branches-wrap" }, h("div", { class: "s-bullet-delivery-branches-loading" }, [1, 2, 3, 4].map((v) => (h("div", { key: v, class: "s-bullet-delivery-branch-skeleton" }, h("salla-skeleton", { class: "s-bullet-delivery-branch-skeleton-radio", type: "circle", height: "16px", width: "16px" }), h("div", { class: "s-bullet-delivery-branch-skeleton-icon" }, h("salla-skeleton", { height: "34px", width: "34px" })), h("div", { class: "s-bullet-delivery-branch-skeleton-content" }, h("salla-skeleton", { class: "s-bullet-delivery-branch-skeleton-title", height: "12px", width: "124px" })), h("salla-skeleton", { class: "s-bullet-delivery-branch-skeleton-time", height: "12px", width: "88px" }), h("div", { class: "s-bullet-delivery-branch-skeleton-map" }, h("salla-skeleton", { height: "32px", width: "32px" }))))))));
         }
-        if (this.filteredBranches.length === 0) {
+        const branches = this.filteredBranches.filter(isBranchVisible);
+        if (branches.length === 0) {
             return (h("salla-placeholder", { alignment: "center", class: "s-bullet-delivery-placeholder" }, h("span", { slot: "title" }, Salla.lang.get("pages.checkout.no_pickup_branches_found"))));
         }
-        return (h("div", { class: "s-bullet-delivery-branches-wrap" }, h("ul", { class: "s-bullet-delivery-branches-list s-scrollbar" }, this.filteredBranches.map(branch => {
+        return (h("div", { class: "s-bullet-delivery-branches-wrap" }, h("ul", { class: "s-bullet-delivery-branches-list s-scrollbar", role: "listbox" }, branches.map(branch => {
             const selectable = isBranchSelectable(branch);
-            const readiness = branch?.pickup_readiness;
+            const isSelected = this.selectedBranch?.id === branch.id;
             const locationText = [branch.country?.name, branch.city?.name, branch.district?.name]
                 .filter(Boolean)
-                .join(', ');
-            const preparationTimeLabel = this.getPreparationTimeLabel(branch.preparation_time_range);
+                .join('، ');
+            const distance = formatBranchDistance(branch.distance_km);
+            // Closed but taking orders: the opening-time readiness replaces the range.
+            const readinessLabel = getBranchReadinessLabel(branch) ?? this.getReadyTodayLabel(branch);
+            const preparationLabel = readinessLabel ? null : this.getPreparationShortLabel(branch.preparation_time_range);
+            const scheduleGroups = groupBranchSchedule(getBranchWeekSchedule(branch));
+            // An always-open branch has no hours worth listing, so it gets no working-hours dropdown.
+            const hasSchedule = scheduleGroups.length > 0 && !isBranchAlwaysOpen(branch);
+            const scheduleOpen = hasSchedule && this.expandedScheduleBranchId === branch.id;
+            const phoneHref = getBranchPhoneHref(branch);
+            const whatsappHref = getBranchWhatsappHref(branch);
+            const directionsHref = getBranchDirectionsHref(branch);
+            const discount = getBranchDiscount(branch);
             return (h("li", { key: branch.id, class: {
                     's-bullet-delivery-branch-item': true,
-                    's-bullet-delivery-branch-item--selected': this.selectedBranch?.id === branch.id,
+                    's-bullet-delivery-branch-item--selected': isSelected,
                     's-bullet-delivery-branch-item--disabled': !selectable,
-                }, tabIndex: selectable ? 0 : -1, role: "option", "aria-disabled": !selectable, onClick: () => selectable && this.handleBranchSelect(branch), onKeyDown: e => {
+                }, tabIndex: selectable ? 0 : -1, role: "option", "aria-selected": isSelected, "aria-disabled": !selectable, onClick: () => selectable && this.handleBranchSelect(branch), onKeyDown: e => {
+                    if (e.target !== e.currentTarget)
+                        return;
                     if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         if (selectable)
                             this.handleBranchSelect(branch);
                     }
-                } }, h("input", { type: "radio", name: "branch", class: "s-bullet-delivery-radio", checked: this.selectedBranch?.id === branch.id, disabled: !selectable }), h("span", { class: "s-bullet-delivery-branch-icon", "aria-hidden": "true" }, h("span", { innerHTML: Store })), h("div", { class: "flex flex-col" }, h("div", { class: "flex items-center gap-1 mb-1" }, h("p", { class: "s-bullet-delivery-branch-name text-start" }, branch.name), readiness?.label && (h("p", { class: `branch-status-badge${readiness.color ? ` ${readiness.color}` : ''}` }, readiness.label))), locationText ? (h("span", { class: "s-bullet-delivery-branch-prep", style: { fontSize: '0.8rem', lineHeight: '1.1rem', textAlign: this.isRTL ? 'right' : 'left' } }, h("i", { class: "sicon-location" }), "\u00A0", h("span", { class: "first-letter-cap" }, locationText))) : null, preparationTimeLabel ? (h("span", { class: "s-bullet-delivery-branch-prep", style: { fontSize: '0.8rem', lineHeight: '1.1rem', textAlign: this.isRTL ? 'right' : 'left' } }, h("i", { class: "sicon-clock" }), "\u00A0", h("span", { class: "first-letter-cap" }, Salla.lang.get('pages.checkout.pickup_duration'), ": ", preparationTimeLabel))) : null, readiness?.detail_line && (h("span", { class: "s-bullet-delivery-branch-prep", style: { fontSize: '0.8rem', lineHeight: '1.1rem', textAlign: this.isRTL ? 'right' : 'left' } }, h("i", { class: "sicon-store" }), "\u00A0", readiness.detail_line))), h("div", { style: {
-                    width: 'full',
-                    maxWidth: '50px',
-                    marginInlineStart: 'auto',
-                } }, branch.location?.lat != null && branch.location?.lng != null && (h("a", { href: `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lng}`, target: "_blank", rel: "noopener noreferrer", class: "s-bullet-delivery-branch-map-link", title: Salla.lang.get('common.elements.open_in_google_maps'), onClick: e => e.stopPropagation() }, h("span", { class: "s-bullet-delivery-branch-map-link-icon", innerHTML: GetDirections.replace(/mask0_25437_34440/g, `mask0_branch_${branch.id}`), "aria-hidden": "true" }), h("span", { class: "sr-only" }, Salla.lang.get('common.elements.open_in_google_maps')))))));
+                } }, h("input", { type: "radio", name: "branch", class: "s-bullet-delivery-radio s-bullet-delivery-branch-radio", checked: isSelected, disabled: !selectable, tabIndex: -1 }), h("div", { class: "s-bullet-delivery-branch-body" }, h("p", { class: "s-bullet-delivery-branch-name" }, h("span", null, branch.name), discount ? (h("span", { class: "s-bullet-delivery-discount-badge", dir: this.isArabic ? 'rtl' : 'ltr', innerHTML: this.getPickupDiscountLabel(discount.type, discount.amount) })) : null), locationText ? (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-location" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: BranchLocationIcon, "aria-hidden": "true" }), h("span", null, locationText))) : null, isSelected && branch.pickup_instructions ? (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-instructions" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: NotesIcon, "aria-hidden": "true" }), h("span", null, branch.pickup_instructions))) : null, h("div", { class: "s-bullet-delivery-branch-meta-row" }, distance || readinessLabel || preparationLabel ? (h("div", { class: "s-bullet-delivery-branch-pills" }, distance ? (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-pill s-bullet-delivery-branch-distance" }, h("i", { class: "sicon-location" }), h("span", null, this.renderDistanceLabel(distance)))) : null, readinessLabel ? (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-pill s-bullet-delivery-branch-prep" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: PickupAvailabilityIcon, "aria-hidden": "true" }), h("span", { class: "s-bullet-delivery-branch-meta-value" }, readinessLabel))) : preparationLabel ? (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-pill s-bullet-delivery-branch-prep" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: PickupAvailabilityIcon, "aria-hidden": "true" }), h("span", null, h("span", { class: "s-bullet-delivery-branch-meta-label" }, Salla.lang.getWithDefault('pages.checkout.pickup_branch_ready_in', 'Pickup available after:'), ' '), h("span", { class: "s-bullet-delivery-branch-meta-value" }, preparationLabel)))) : null)) : null, h("hr", { class: "s-bullet-delivery-branch-divider" }), this.renderBranchOpenStatus(branch, hasSchedule, scheduleOpen)), scheduleOpen && (h("div", { class: "s-bullet-delivery-branch-schedule" }, scheduleGroups.map((group, index) => (h("div", { key: index, class: "s-bullet-delivery-branch-schedule-day" }, h("span", { class: "s-bullet-delivery-branch-schedule-days" }, group.days.length > 1
+                ? `${group.days[0]} - ${group.days[group.days.length - 1]}`
+                : group.days[0]), h("span", { class: "s-bullet-delivery-branch-schedule-times" }, group.times
+                .map(t => `${this.formatClock(t.start)} - ${this.formatClock(t.end)}`)
+                .join(this.isArabic ? '، ' : ', ')))))))), h("div", { class: "s-bullet-delivery-branch-actions" }, phoneHref && (h("a", { href: phoneHref, class: "s-bullet-delivery-branch-action", title: Salla.lang.getWithDefault('pages.checkout.branch_call', 'اتصال'), onClick: e => e.stopPropagation() }, h("i", { class: "sicon-phone" }))), whatsappHref && (h("a", { href: whatsappHref, target: "_blank", rel: "noopener noreferrer", class: "s-bullet-delivery-branch-action", title: Salla.lang.getWithDefault('pages.checkout.branch_whatsapp', 'واتساب'), onClick: e => e.stopPropagation() }, h("i", { class: "sicon-whatsapp2" }))), directionsHref && (h("a", { href: directionsHref, target: "_blank", rel: "noopener noreferrer", class: "s-bullet-delivery-branch-action s-bullet-delivery-branch-map-link", title: Salla.lang.get('common.elements.open_in_google_maps'), onClick: e => e.stopPropagation() }, h("span", { class: "s-bullet-delivery-branch-map-link-icon", innerHTML: GetDirections.replace(/mask0_25437_34440/g, `mask0_branch_${branch.id}`), "aria-hidden": "true" }), h("span", { class: "sr-only" }, Salla.lang.get('common.elements.open_in_google_maps')))))));
         }))));
     }
+    /** "يبعد عنك: ~" stays muted; the distance and its unit read as the value, as in checkout. */
+    renderDistanceLabel(distance) {
+        const template = Salla.lang.getWithDefault('pages.checkout.branch_distance_from_you', 'يبعد عنك: ~ {distance} كم');
+        const index = template.indexOf('{distance}');
+        if (index === -1)
+            return template;
+        return [
+            h("span", { class: "s-bullet-delivery-branch-meta-label" }, template.slice(0, index)),
+            h("span", { class: "s-bullet-delivery-branch-meta-value" }, template.slice(index).replace('{distance}', distance)),
+        ];
+    }
+    get isArabic() {
+        return (Salla.lang.getLocale?.() ?? document.documentElement.lang) === 'ar';
+    }
+    formatClock(time) {
+        return formatBranchClockTime(time, this.isArabic ? 'ar' : 'en');
+    }
+    /** "جاهز اليوم 10:00 ص" for a branch that is closed now and opens later today. */
+    getReadyTodayLabel(branch) {
+        const time = getBranchReadyTodayTime(branch);
+        return time
+            ? `${Salla.lang.getWithDefault('pages.checkout.pickup_branch_ready_today_at', 'جاهز اليوم')} ${this.formatClock(time)}`
+            : null;
+    }
+    /** "15-30 د" — compact preparation range for the card's meta row. */
+    getPreparationShortLabel(range) {
+        if (!range?.from || !range?.to)
+            return null;
+        const unitKeys = {
+            minute: ['pages.checkout.preparation_time_minute_short', 'د'],
+            hour: ['pages.checkout.preparation_time_hour_short', 'س'],
+            day: ['pages.checkout.preparation_time_day_short', 'يوم'],
+        };
+        const unit = (u) => (unitKeys[u] ? Salla.lang.getWithDefault(unitKeys[u][0], unitKeys[u][1]) : null);
+        const fromUnit = unit(range.from.unit);
+        const toUnit = unit(range.to.unit);
+        if (!fromUnit || !toUnit)
+            return null;
+        return range.from.unit === range.to.unit
+            ? `${range.from.value}-${range.to.value} ${toUnit}`
+            : `${range.from.value} ${fromUnit} - ${range.to.value} ${toUnit}`;
+    }
+    /**
+     * Busy, always-open, or the backend's `open_status_line` ("مفتوح - يغلق عند 11:00 م"), which reads
+     * the hours on the branch's clock. Without that line, `is_open` gives a bare open/closed label.
+     */
+    renderBranchOpenStatus(branch, hasSchedule, scheduleOpen) {
+        const toggle = hasSchedule && (h("button", { type: "button", class: "s-bullet-delivery-branch-schedule-toggle", "aria-expanded": scheduleOpen ? 'true' : 'false', "aria-label": Salla.lang.getWithDefault('pages.checkout.pickup_show_weekly_hours', 'عرض ساعات العمل الأسبوعية'), onClick: e => {
+                e.stopPropagation();
+                this.toggleBranchSchedule(branch.id);
+            } }, h("i", { class: { 'sicon-keyboard_arrow_down': true, 'is-expanded': scheduleOpen } })));
+        if (isBranchBusy(branch)) {
+            return (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-open-status" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: WorkingHoursIcon, "aria-hidden": "true" }), h("span", { class: "s-bullet-delivery-pickup-status--busy" }, Salla.lang.getWithDefault('pages.checkout.pickup_branch_busy', 'مشغول، لا يستقبل طلبات')), toggle));
+        }
+        const alwaysOpen = isBranchAlwaysOpen(branch);
+        const line = branch.pickup_readiness?.open_status_line;
+        if (!alwaysOpen && line) {
+            return (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-open-status" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: WorkingHoursIcon, "aria-hidden": "true" }), h("span", null, line), toggle));
+        }
+        if (!alwaysOpen && !hasSchedule)
+            return null;
+        if (!alwaysOpen && typeof branch.is_open !== 'boolean') {
+            return h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-open-status" }, toggle);
+        }
+        const isOpen = alwaysOpen || branch.is_open;
+        const label = alwaysOpen
+            ? Salla.lang.getWithDefault('pages.checkout.pickup_branch_always_open', 'مفتوح دائمًا 24/7')
+            : isOpen
+                ? Salla.lang.getWithDefault('pages.checkout.pickup_branch_open', 'مفتوح')
+                : Salla.lang.getWithDefault('pages.checkout.pickup_branch_closed', 'مغلق');
+        return (h("span", { class: "s-bullet-delivery-branch-meta s-bullet-delivery-branch-open-status" }, h("span", { class: "s-bullet-delivery-branch-meta-icon", innerHTML: WorkingHoursIcon, "aria-hidden": "true" }), h("span", { class: isOpen ? 's-bullet-delivery-pickup-status--open' : 's-bullet-delivery-pickup-status--closed' }, label), toggle));
+    }
     renderPickupTab() {
         return (h("div", { class: {
                 "s-bullet-delivery-content": true,
                 "s-bullet-delivery-content--active": this.activeTab === "branch",
                 "s-hidden": this.activeTab !== "branch",
-            } }, this.renderCountrySelect(), this.renderBranchSearch(), this.renderBranchList()));
+            } }, h("div", { class: "s-bullet-delivery-pickup-filters" }, h("div", { class: "s-bullet-delivery-pickup-filters-row" }, this.renderCountrySelect(false), this.renderBranchCitySelect()), this.renderBranchSearch()), this.renderBranchList()));
+    }
+    /** City filter for the pickup list; options come from the branches themselves, so none is empty. */
+    renderBranchCitySelect() {
+        return (h("div", { class: "s-bullet-delivery-field" }, h("salla-searchable-dropdown", { placeholder: Salla.lang.get("pages.checkout.select_city"), items: [{ id: -1, name: Salla.lang.getWithDefault('pages.checkout.all_cities', this.isArabic ? 'كل المدن' : 'All cities') }, ...this.branchCities], selectedItem: this.selectedBranchCity, loading: this.loadingBranches && this.branchCities.length === 0, disabled: this.branchCities.length === 0 && !this.selectedBranchCity, inputId: "bullet-delivery-branch-city", searchQuery: this.branchCitySearchQuery, clientSearch: true, onItemSelected: (e) => {
+                this.branchCitySearchQuery = '';
+                this.handleBranchCitySelected(e.detail);
+            }, onSearchInput: (e) => {
+                this.branchCitySearchQuery = e.detail;
+            }, onDropdownClosed: () => {
+                this.branchCitySearchQuery = '';
+            } })));
     }
     /** Add-address form: map + confirm card in one screen, or dropdown fallback. */
     renderAddAddressForm() {
@@ -2653,7 +3016,7 @@ export class SallaBulletDelivery {
         return (h("div", { class: "s-bullet-delivery-footer" }, h("salla-button", { ref: (btn) => {
                 this.confirmBtn = btn;
             }, disabled: this.isConfirmDisabled(), onClick: () => this.handleConfirm(), "loader-position": "center", width: "wide" }, this.activeTab === "branch"
-            ? Salla.lang.get("pages.checkout.confirm_receipt_from_the_branch")
+            ? Salla.lang.getWithDefault("pages.checkout.confirm_receipt_from_the_branch", "تأكيد الإستلام من الفرع")
             : Salla.lang.get("pages.checkout.confirm_address")), showAddAddressInFooter && (h("salla-button", { onClick: () => this.handleAddNewAddress(), width: "wide", shape: "link" }, Salla.lang.get("pages.checkout.add_new_address"))), !this.isLoggedIn && (h("salla-button", { shape: "link", onClick: () => this.handleLogin() }, Salla.lang.get("pages.checkout.login_to_use_saved_addresses")))));
     }
     renderMainView() {
@@ -2679,7 +3042,7 @@ export class SallaBulletDelivery {
         if (canOpenForIncompleteIntent) {
             this.markIncompleteIntentPrompted();
         }
-        this.open();
+        this.open(false, canOpenForIncompleteIntent ? "incomplete_intent" : "after_add_to_cart");
     }
     overrideScopeSwitchUI() {
         const intent = this.getStoredIntent();
@@ -2732,7 +3095,7 @@ export class SallaBulletDelivery {
                     // silently awaiting with nothing visible.
                     if (!this.isGuestUser()) {
                         if (!this.modal?.hasAttribute?.("visible")) {
-                            this.open();
+                            this.open(false, "checkout_gate");
                         }
                         await this.pendingCartSubmitPromise;
                         return;
@@ -2761,7 +3124,7 @@ export class SallaBulletDelivery {
                         this.openGuestLogin();
                         return;
                     }
-                    this.open();
+                    this.open(false, "checkout_gate");
                 });
                 await this.pendingCartSubmitPromise;
             };
@@ -2777,6 +3140,7 @@ export class SallaBulletDelivery {
         Salla.event.on("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
         this.closeHandler = this.close.bind(this);
         Salla.event.on("salla::bullet-delivery.modal.close.requested", this.closeHandler);
+        Salla.event.on("modal::close", this.modalCloseHandler);
         this.isRTL = Salla.config.get("theme.is_rtl");
         // Reading the permission never prompts, so it's safe to watch from here — the map view then
         // renders the notice (or not) on its first paint instead of a frame later.
@@ -2801,7 +3165,7 @@ export class SallaBulletDelivery {
                 return;
             if (this.modal?.hasAttribute?.("visible"))
                 return;
-            this.open();
+            this.open(false, "after_login");
         };
         Salla.event.on("auth::logged.in", this.authLoggedInHandler);
         this.authLoggedOutHandler = () => {
@@ -2833,9 +3197,12 @@ export class SallaBulletDelivery {
             return null; // no-op when disabled
         return (h(Host, { class: "s-bullet-delivery" }, h("salla-modal", { ref: modal => {
                 this.modal = modal;
-            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), class: "s-bullet-delivery-modal", width: "sm", "data-testid": "salla-bullet-delivery-modal" }, h("div", { class: "s-bullet-delivery-inner" }, h("div", { class: "s-bullet-delivery-header" }, h("h2", { class: "s-bullet-delivery-title" }, this.activeTab === 'address'
+            }, isClosable: !this.isRequired && !this.shouldForceNonClosable(), onModalVisibilityChanged: (event) => {
+                if (event.target === this.modal)
+                    this.handleModalVisibility(Boolean(event.detail));
+            }, class: "s-bullet-delivery-modal", width: "sm", "data-testid": "salla-bullet-delivery-modal" }, h("div", { class: "s-bullet-delivery-inner" }, h("div", { class: "s-bullet-delivery-header" }, h("h2", { class: "s-bullet-delivery-title" }, this.activeTab === 'address'
             ? Salla.lang.get('blocks.home.add_address_for_order_delivery')
-            : Salla.lang.get('blocks.home.choose_branch_for_order_pickup')), h("p", { class: "s-bullet-delivery-subtitle" }, this.activeTab === 'address'
+            : Salla.lang.getWithDefault('blocks.home.choose_pickup_branch_title', this.isArabic ? 'اختر فرع استلام طلبك' : 'Choose your pickup branch')), h("p", { class: "s-bullet-delivery-subtitle" }, this.activeTab === 'address'
             ? Salla.lang.get('blocks.home.products_available_for_delivery_shown_while_shopping')
             : Salla.lang.get('blocks.home.choose_branch_for_order_pickup_description'))), this.renderTabs(), this.viewMode === 'main' && this.renderMainView(), this.viewMode === 'add-address' && this.renderAddAddressForm()))));
     }
@@ -2869,7 +3236,7 @@ export class SallaBulletDelivery {
         // Handle pending open request (if event was emitted before component was ready)
         if (this.pendingOpen) {
             this.pendingOpen = false;
-            this.open();
+            this.open(false, this.openTrigger);
             return;
         }
         // Strategy-based auto-open logic
@@ -2877,11 +3244,11 @@ export class SallaBulletDelivery {
             case "first_visit":
                 // Open once per session when component mounts (per-session behaviour)
                 if (!this.hasBeenShownThisSession()) {
-                    this.open();
+                    this.open(false, "first_visit");
                 }
                 else if (this.shouldPromptIncompleteIntentThisSession()) {
                     this.markIncompleteIntentPrompted();
-                    this.open();
+                    this.open(false, "incomplete_intent");
                 }
                 break;
             case "on_cart_click":
@@ -2889,11 +3256,11 @@ export class SallaBulletDelivery {
                 if (Salla.url.is_page("cart")) {
                     const shown = this.getShownStorage().get(this.sessionShownKey) === true;
                     if (!shown) {
-                        this.open();
+                        this.open(false, "on_cart_click");
                     }
                     else if (this.shouldPromptIncompleteIntentThisSession()) {
                         this.markIncompleteIntentPrompted();
-                        this.open();
+                        this.open(false, "incomplete_intent");
                     }
                 }
                 break;
@@ -2918,6 +3285,7 @@ export class SallaBulletDelivery {
             this.stopWatchingLocationPermission = null;
         }
         Salla.event.off("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
+        Salla.event.off("modal::close", this.modalCloseHandler);
         if (this.closeHandler) {
             Salla.event.off("salla::bullet-delivery.modal.close.requested", this.closeHandler);
             this.closeHandler = null;
@@ -2993,9 +3361,15 @@ export class SallaBulletDelivery {
             "selectedSavedAddress": {},
             "selectedSessionAddress": {},
             "branches": {},
+            "pickupDiscountRange": {},
+            "pickupDiscountResolved": {},
             "filteredBranches": {},
             "selectedBranch": {},
             "branchSearchQuery": {},
+            "branchCities": {},
+            "selectedBranchCity": {},
+            "branchCitySearchQuery": {},
+            "expandedScheduleBranchId": {},
             "loadingCountries": {},
             "loadingCities": {},
             "loadingDistricts": {},
@@ -3116,16 +3490,25 @@ export class SallaBulletDelivery {
         return {
             "open": {
                 "complexType": {
-                    "signature": "(silent?: boolean) => Promise<void>",
+                    "signature": "(silent?: boolean, trigger?: SelectorTrigger) => Promise<void>",
                     "parameters": [{
                             "name": "silent",
                             "type": "boolean",
                             "docs": ""
+                        }, {
+                            "name": "trigger",
+                            "type": "\"first_visit\" | \"after_add_to_cart\" | \"on_cart_click\" | \"incomplete_intent\" | \"checkout_gate\" | \"after_login\" | \"customer_requested\"",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "SelectorTrigger": {
+                            "location": "import",
+                            "path": "./selector-tracker",
+                            "id": "src/components/salla-bullet-delivery/selector-tracker.ts::SelectorTrigger"
                         }
                     },
                     "return": "Promise<void>"