@salla.sa/twilight-components 2.14.593 → 2.14.594

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

@@ -53,6 +53,75 @@
   text-transform: uppercase;
 }
 
+.s-bullet-delivery-location-permission-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  background: #fdf2f2;
+  cursor: pointer;
+  text-align: start;
+}
+
+/* The asset is a 172x172 white badge with its own colors baked in, so it only needs sizing. */
+.s-bullet-delivery-location-permission-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+}
+.s-bullet-delivery-location-permission-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.s-bullet-delivery-location-permission-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: #444;
+}
+
+.s-bullet-delivery-location-permission-arrow {
+  flex-shrink: 0;
+  font-size: 16px;
+  color: #666;
+}
+
+.s-bullet-delivery-location-distance-warning {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px;
+  border-radius: 8px;
+  background: #fff8e1;
+  animation: s-bullet-delivery-fade-in 200ms ease;
+}
+
+.s-bullet-delivery-location-distance-warning-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 34px;
+  height: 34px;
+}
+.s-bullet-delivery-location-distance-warning-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.s-bullet-delivery-location-distance-warning-text {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: #444;
+}
+
 .s-bullet-delivery-map-container {
   width: 100%;
   height: 320px;
@@ -1339,3 +1408,70 @@
   flex-shrink: 0;
   align-self: center;
 }
+.s-bullet-delivery-location-permission-btn{
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  border-width: 0px;
+  padding: 0.75rem;
+  text-align: start;
+  background: #fdf2f2;
+}
+.s-bullet-delivery-location-permission-icon{
+  display: inline-flex;
+  height: 34px;
+  width: 34px;
+  flex-shrink: 0;
+}
+.s-bullet-delivery-location-permission-icon svg{
+  height: 100%;
+  width: 100%;
+}
+.s-bullet-delivery-location-permission-text{
+  min-width: 0px;
+  flex: 1 1 0%;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  line-height: 18px;
+  --tw-text-opacity: 1;
+  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
+}
+.s-bullet-delivery-location-permission-arrow{
+  flex-shrink: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(102 102 102 / var(--tw-text-opacity, 1));
+}
+.s-bullet-delivery-location-distance-warning{
+  display: flex;
+  width: 100%;
+  animation: s-bullet-delivery-fade-in 200ms ease;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: #fff8e1;
+}
+.s-bullet-delivery-location-distance-warning-icon{
+  display: inline-flex;
+  height: 34px;
+  width: 34px;
+  flex-shrink: 0;
+}
+.s-bullet-delivery-location-distance-warning-icon svg{
+  height: 100%;
+  width: 100%;
+}
+.s-bullet-delivery-location-distance-warning-text{
+  min-width: 0px;
+  flex: 1 1 0%;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  line-height: 18px;
+  --tw-text-opacity: 1;
+  color: rgb(68 68 68 / var(--tw-text-opacity, 1));
+}

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

@@ -3,7 +3,10 @@
  */
 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, isMapOriginIntent, isBranchSelectable, requireRegionAndDistrictForSA, } from "./helpers";
+import { filterBranches, findNearestBranch, getGeolocationErrorMessage, getIntentBranchId, getIntentCityId, getIntentCountryCode, getIntentCountryId, getIntentDistrictId, getIntentLatitude, getIntentLongitude, getIntentRegionId, getIntentSubtitle, hasSessionAddressIntent, isBranchSelectable, isMapOriginIntent, 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;
 const GEOLOCATION_TIMEOUT = 10000;
 /** Final fallback center used only if `user.default_geo_location` is absent (Riyadh — matches checkout map-page). */
@@ -127,6 +130,14 @@ export class SallaBulletDelivery {
         /** True while reverse-geocoding a map-click/geolocation pick (no place from the map component itself). */
         this.reverseGeocoding = false;
         this.confirming = false;
+        /** Location-sharing permission, watched so the map-view notice follows it live (SHPD-10429). */
+        this.locationPermission = 'unknown';
+        this.stopWatchingLocationPermission = null;
+        /** False until the Permissions API watch reports at least once — gates auto-locate so we don't
+         *  consume the browser prompt before we know whether the notice should own it. */
+        this.locationPermissionResolved = false;
+        /** Customer's live position, kept separate from the selected delivery pin. */
+        this.liveLocation = null;
         this.newAddressForm = {
             ...SallaBulletDelivery.INITIAL_ADDRESS_FORM,
         };
@@ -236,23 +247,46 @@ export class SallaBulletDelivery {
                 this.gmapRef.resize();
             }
             this.updateLocationBias();
-            // Auto-locate the customer so the map never opens "empty" — matches checkout map-page
-            // (getCurrentLocation(true) pans to the resolved position). Skip if a location is already set
-            // (e.g. returning from the confirm step). Falls back silently to mapInitialCenter if denied.
-            if (!this.autoGeolocationTriggered && !this.hasMapLocation() && this.gmapRef) {
-                const getCurrentLocation = this.gmapRef.getCurrentLocation;
-                if (typeof getCurrentLocation === 'function') {
-                    this.autoGeolocationTriggered = true;
-                    try {
-                        const result = getCurrentLocation.call(this.gmapRef, true);
-                        if (result && typeof result.catch === 'function') {
-                            result.catch((err) => log('Auto geolocation failed', err));
-                        }
-                    }
-                    catch (err) {
-                        log('Auto geolocation threw', err);
-                    }
-                }
+            this.locateOnMap();
+            if (this.locationPermission === 'granted' && !this.liveLocation) {
+                void this.handleLocationPermissionChanged('granted');
+            }
+        };
+        /** Tap on the location-permission notice: prompt (or deep-link into the app's settings). */
+        this.handleLocationPermissionRequest = async () => {
+            const outcome = await requestLocationPermission();
+            if (outcome.handledByApp)
+                return; // native app owns the screen from here
+            await this.handleLocationPermissionChanged(outcome.state, outcome.position);
+            if (outcome.state === 'granted')
+                this.locateOnMap(true);
+        };
+        this.handleLocationPermissionChanged = async (state, knownPosition) => {
+            this.locationPermission = state;
+            if (state !== 'granted') {
+                this.liveLocation = null;
+                return;
+            }
+            if (knownPosition) {
+                this.liveLocation = knownPosition;
+                return;
+            }
+            // Only the map view reads liveLocation — skip the GPS fix until it opens (handleMapReady catches up).
+            if (!navigator.geolocation || !this.mapReady)
+                return;
+            try {
+                const position = await new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject, {
+                    enableHighAccuracy: true,
+                    timeout: GEOLOCATION_TIMEOUT,
+                    maximumAge: 0,
+                }));
+                this.liveLocation = {
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude,
+                };
+            }
+            catch (error) {
+                log('Live location capture failed', error);
             }
         };
         // ─── End Map methods ───
@@ -1354,6 +1388,45 @@ export class SallaBulletDelivery {
             : this.mapInitialCenter;
         this.gmapRef.autocompleteLocationBias = { center, radius: 500000 };
     }
+    /**
+     * Auto-locate the customer so the map never opens "empty" — matches checkout map-page
+     * (getCurrentLocation(true) pans to the resolved position). Skipped when a location is already
+     * set (e.g. returning from the confirm step). Falls back silently to mapInitialCenter if denied.
+     *
+     * When location permission is still missing (`prompt` / `denied`), we deliberately do NOT call
+     * into geolocation here — that would consume the browser's one-shot permission dialog before the
+     * notice tap can re-trigger it (SHPD-10429). Auto-locate runs once permission is granted
+     * (via the watch or a successful notice tap), or when the Permissions API is unavailable
+     * (`unknown`) because that surface never shows the notice.
+     *
+     * @param force re-locates even after the one-per-flow auto attempt — used once the customer
+     *   grants the permission from the notice, so the map catches up without a manual refresh.
+     */
+    locateOnMap(force = false) {
+        if (!this.gmapRef)
+            return;
+        if (!force) {
+            if (this.autoGeolocationTriggered || this.hasMapLocation())
+                return;
+            // Wait until we know the permission state, then leave prompt/denied for the notice tap.
+            if (!this.locationPermissionResolved || isLocationPermissionMissing(this.locationPermission)) {
+                return;
+            }
+        }
+        const getCurrentLocation = this.gmapRef.getCurrentLocation;
+        if (typeof getCurrentLocation !== 'function')
+            return;
+        this.autoGeolocationTriggered = true;
+        try {
+            const result = getCurrentLocation.call(this.gmapRef, true);
+            if (result && typeof result.catch === 'function') {
+                result.catch((err) => log('Auto geolocation failed', err));
+            }
+        }
+        catch (err) {
+            log('Auto geolocation threw', err);
+        }
+    }
     hasMapLocation() {
         return this.mapLocationData?.lat != null && this.mapLocationData?.lng != null;
     }
@@ -2338,10 +2411,34 @@ export class SallaBulletDelivery {
         const address = this.mapLocationData?.formattedAddress ?? '';
         return (h("div", { class: "s-bullet-delivery-address-confirm" }, h("div", { class: "s-bullet-delivery-address-confirm-card" }, h("span", { class: "s-bullet-delivery-address-map-icon", innerHTML: MiniMap, "aria-hidden": "true" }), h("div", { class: "s-bullet-delivery-address-confirm-details" }, h("span", { class: "s-bullet-delivery-address-confirm-label" }, Salla.lang.get('pages.checkout.selected_address')), h("p", { class: "s-bullet-delivery-address-confirm-text" }, address))), h("div", { class: "s-bullet-delivery-address-confirm-description" }, h("label", { class: "s-bullet-delivery-address-confirm-description-label" }, Salla.lang.get('pages.checkout.address_description'), h("span", { class: "s-bullet-delivery-address-confirm-description-optional" }, Salla.lang.get('common.elements.optional'))), h("input", { type: "text", class: "s-bullet-delivery-address-confirm-description-input form-input", placeholder: Salla.lang.get('pages.checkout.address_description_placeholder'), value: this.addressDescription, onInput: (e) => { this.addressDescription = e.target.value; } }))));
     }
+    /** Notice prompting the customer to allow location sharing; only while it isn't granted. */
+    renderLocationPermissionNotice() {
+        if (!isLocationPermissionMissing(this.locationPermission))
+            return null;
+        return (h(LocationPermissionNotice, { isRTL: this.isRTL, onActivate: this.handleLocationPermissionRequest }));
+    }
+    renderLocationDistanceWarning() {
+        const selectedLocation = this.mapLocationData;
+        if (this.locationPermission !== 'granted' ||
+            !this.liveLocation ||
+            selectedLocation?.lat == null ||
+            selectedLocation?.lng == null) {
+            return null;
+        }
+        const distanceKm = calculateLocationDistanceKm(this.liveLocation, {
+            lat: selectedLocation.lat,
+            lng: selectedLocation.lng,
+        });
+        if (distanceKm <= 0.5)
+            return null;
+        return h(LocationDistanceWarning, { distanceKm: distanceKm, isRTL: this.isRTL });
+    }
     renderGuestDeliveryForm() {
         if (this.isMapModeAvailable) {
             return [
                 this.renderMapSection(),
+                this.renderLocationPermissionNotice(),
+                this.renderLocationDistanceWarning(),
                 this.hasMapLocation() ? this.renderAddressConfirmation() : null,
             ];
         }
@@ -2602,6 +2699,17 @@ export class SallaBulletDelivery {
         this.closeHandler = this.close.bind(this);
         Salla.event.on("salla::bullet-delivery.modal.close.requested", this.closeHandler);
         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.
+        this.stopWatchingLocationPermission = watchLocationPermission(state => {
+            this.locationPermissionResolved = true;
+            void this.handleLocationPermissionChanged(state).then(() => {
+                // Permission often resolves after the map is ready — catch up for granted / unknown
+                // so we still auto-pan without having consumed the prompt for prompt/denied.
+                if (this.mapReady && !isLocationPermissionMissing(state))
+                    this.locateOnMap();
+            });
+        });
         this.authLoggedInHandler = async () => {
             if (this.cartSubmitConfirmationPending) {
                 await this.handlePendingSubmitAfterLogin();
@@ -2646,7 +2754,7 @@ 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" }, 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(), 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.get('blocks.home.products_available_for_delivery_shown_while_shopping')
@@ -2726,6 +2834,10 @@ export class SallaBulletDelivery {
     }
     disconnectedCallback() {
         this.componentReady = false;
+        if (this.stopWatchingLocationPermission) {
+            this.stopWatchingLocationPermission();
+            this.stopWatchingLocationPermission = null;
+        }
         Salla.event.off("salla::bullet-delivery.modal.open.requested", this.bulletDeliveryOpenHandler);
         if (this.closeHandler) {
             Salla.event.off("salla::bullet-delivery.modal.close.requested", this.closeHandler);
@@ -2833,6 +2945,8 @@ export class SallaBulletDelivery {
             "addressDescription": {},
             "reverseGeocoding": {},
             "confirming": {},
+            "locationPermission": {},
+            "liveLocation": {},
             "newAddressForm": {}
         };
     }

package/dist/collection/global/app.js

@@ -4,6 +4,7 @@
 import "@salla.sa/twilight";
 import LazyLoad from "vanilla-lazyload";
 import { BASE_CSS } from "./base-css";
+import { reportChunkErrors } from "./chunk-errors";
 // Marks twilight chunk styles so the global script can spot them at runtime.
 const TWILIGHT_STYLE_MARKER = '/*!twlt*/';
 // Before the theme's first stylesheet, so theme rules win equal-specificity collisions.
@@ -62,6 +63,7 @@ function pinTwilightStyles() {
     }).observe(document.head, { childList: true });
 }
 export default function () {
+    reportChunkErrors();
     injectBaseStyles();
     pinTwilightStyles();
     // Only initialize it one time for the entire application

package/dist/collection/global/app.spec.ts

@@ -0,0 +1,33 @@
+// The spec environment already provides the salla global; booting the real SDK here needs a full store.
+jest.mock('@salla.sa/twilight', () => ({}));
+jest.mock('vanilla-lazyload', () => jest.fn().mockImplementation(() => ({ update: jest.fn() })));
+
+import { consoleError } from '@stencil/core/internal/testing';
+import app from './app';
+
+describe('global app script', () => {
+  const originalInfiniteScroll = (salla as any).infiniteScroll;
+  const originalSalla = window.Salla;
+
+  beforeEach(() => {
+    (salla as any).infiniteScroll = { event: { onAppend: jest.fn() } };
+  });
+
+  afterEach(() => {
+    (salla as any).infiniteScroll = originalInfiniteScroll;
+    window.Salla = originalSalla;
+    jest.restoreAllMocks();
+  });
+
+  it('forwards component errors Stencil reports to the error monitor after boot', () => {
+    const captureChunkError = jest.fn();
+    window.Salla = { errorMonitor: { captureChunkError } } as any;
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const error = new TypeError('Failed to fetch dynamically imported module: https://cdn/p-1.entry.js');
+
+    app();
+    consoleError(error);
+
+    expect(captureChunkError).toHaveBeenCalledWith(error, undefined);
+  });
+});

package/dist/collection/global/app.ts

@@ -1,6 +1,7 @@
 import '@salla.sa/twilight'
 import LazyLoad from "vanilla-lazyload";
 import { BASE_CSS } from './base-css';
+import { reportChunkErrors } from './chunk-errors';
 
 // Marks twilight chunk styles so the global script can spot them at runtime.
 const TWILIGHT_STYLE_MARKER = '/*!twlt*/';
@@ -60,6 +61,7 @@ function pinTwilightStyles() {
 }
 
 export default function () {
+  reportChunkErrors();
   injectBaseStyles();
   pinTwilightStyles();
   // Only initialize it one time for the entire application

package/dist/collection/global/chunk-errors.js

@@ -0,0 +1,14 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { setErrorHandler } from "@stencil/core";
+// Stencil swallows a failed chunk import() and only throws `Constructor for "<tag>#…" was not found`
+// later; forward the original error so the frontend-error log shows why the chunk failed.
+// console.error keeps Stencil's default output, which this handler replaces.
+export function forwardComponentError(error, element) {
+    console.error(error, element);
+    window.Salla?.errorMonitor?.captureChunkError(error, element);
+}
+export function reportChunkErrors() {
+    setErrorHandler(forwardComponentError);
+}

package/dist/collection/global/chunk-errors.spec.ts

@@ -0,0 +1,47 @@
+// consoleError is the platform hook Stencil's lazy loader reports a failed chunk import() through.
+import { consoleError } from '@stencil/core/internal/testing';
+import { forwardComponentError, reportChunkErrors } from './chunk-errors';
+
+describe('chunk-errors', () => {
+  const originalSalla = window.Salla;
+  let captureChunkError: jest.Mock;
+
+  beforeEach(() => {
+    captureChunkError = jest.fn();
+    window.Salla = { errorMonitor: { captureChunkError } };
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    window.Salla = originalSalla;
+    jest.restoreAllMocks();
+  });
+
+  it('routes errors Stencil reports to the error monitor once registered', () => {
+    const error = new TypeError('Failed to fetch dynamically imported module: https://cdn/p-1.entry.js');
+    const element = document.createElement('salla-button');
+
+    reportChunkErrors();
+    consoleError(error, element);
+
+    expect(captureChunkError).toHaveBeenCalledWith(error, element);
+  });
+
+  it('hands the swallowed import() error and its element to the error monitor', () => {
+    const error = new TypeError('Failed to fetch dynamically imported module: https://cdn/p-1.entry.js');
+    const element = document.createElement('salla-button');
+
+    forwardComponentError(error, element);
+
+    expect(captureChunkError).toHaveBeenCalledWith(error, element);
+    expect(console.error).toHaveBeenCalledWith(error, element);
+  });
+
+  it('keeps logging to the console when the Salla SDK is not loaded', () => {
+    window.Salla = undefined;
+    const error = new Error('boom');
+
+    expect(() => forwardComponentError(error)).not.toThrow();
+    expect(console.error).toHaveBeenCalledWith(error, undefined);
+  });
+});

package/dist/collection/global/chunk-errors.ts

@@ -0,0 +1,13 @@
+import { setErrorHandler } from '@stencil/core';
+
+// Stencil swallows a failed chunk import() and only throws `Constructor for "<tag>#…" was not found`
+// later; forward the original error so the frontend-error log shows why the chunk failed.
+// console.error keeps Stencil's default output, which this handler replaces.
+export function forwardComponentError(error: unknown, element?: Element) {
+  console.error(error, element);
+  window.Salla?.errorMonitor?.captureChunkError(error, element);
+}
+
+export function reportChunkErrors() {
+  setErrorHandler(forwardComponentError);
+}