@salla.sa/twilight-components 2.14.593 → 2.14.595

package/dist/collection/components/salla-bullet-delivery/location-distance-warning.js

@@ -0,0 +1,28 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import LocationIcon from "./location-icon.svg";
+const EARTH_RADIUS_KM = 6371;
+const WARNING_KEY = 'pages.checkout.location_distance_warning';
+const WARNING_FALLBACK = 'تبعد عن موقعك {distance} كم، وقد تكون اخترت عنوان توصيل غير صحيح.';
+const toRadians = (degrees) => degrees * (Math.PI / 180);
+/** Haversine distance between two coordinates in kilometres. */
+export function calculateLocationDistanceKm(from, to) {
+    const latitudeDelta = toRadians(to.lat - from.lat);
+    const longitudeDelta = toRadians(to.lng - from.lng);
+    const fromLatitude = toRadians(from.lat);
+    const toLatitude = toRadians(to.lat);
+    const haversine = Math.sin(latitudeDelta / 2) ** 2 +
+        Math.cos(fromLatitude) *
+            Math.cos(toLatitude) *
+            Math.sin(longitudeDelta / 2) ** 2;
+    return EARTH_RADIUS_KM * 2 * Math.atan2(Math.sqrt(haversine), Math.sqrt(1 - haversine));
+}
+export const LocationDistanceWarning = ({ distanceKm, isRTL = false, }) => {
+    const distance = distanceKm.toFixed(1);
+    const message = Salla.lang
+        .getWithDefault(WARNING_KEY, WARNING_FALLBACK)
+        ?.replace('{distance}', distance);
+    return (h("div", { class: "s-bullet-delivery-location-distance-warning", role: "alert" }, h("span", { class: "s-bullet-delivery-location-distance-warning-icon", innerHTML: LocationIcon, "aria-hidden": "true" }), h("span", { class: "s-bullet-delivery-location-distance-warning-text", style: { textAlign: isRTL ? 'right' : 'left' }, "data-testid": "salla-bullet-delivery-location-distance-warning-text" }, message)));
+};

package/dist/collection/components/salla-bullet-delivery/location-icon.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172" width="172" height="172">
+  <!-- White rounded background -->
+  <rect width="172" height="172" rx="64" fill="#FFFFFF"/>
+
+  <!-- Location / navigation icon -->
+  <path
+    d="M113.5 52.5
+       C108.5 52.5 101.5 54.5 93.5 57
+       L57.5 68.5
+       C53.5 69.8 51.8 72.2 53 75
+       C53.8 77 55.5 78.2 58 79
+       L79.5 86.5
+       C81.8 87.3 83.2 88.8 84 91.2
+       L90.5 113
+       C91.7 117 94 119.2 97 119.2
+       C100.8 119.2 103 116.5 104.2 112.8
+       L119 70.5
+       C121 64.5 121.8 58.5 119.2 55.2
+       C117.8 53.3 116 52.5 113.5 52.5 Z"
+    fill="#FFFFFF"
+    stroke="#000000"
+    stroke-width="5.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/dist/collection/components/salla-bullet-delivery/location-permission-notice.js

@@ -0,0 +1,103 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h } from "@stencil/core";
+import LocationIcon from "./location-icon.svg";
+const GEOLOCATION_TIMEOUT = 10000;
+/** GeolocationPositionError.PERMISSION_DENIED — inlined; the class is absent in some test envs. */
+const PERMISSION_DENIED = 1;
+/** Action the Salla app listens for to open its own location-permission settings screen. */
+const NATIVE_LOCATION_SETTINGS_ACTION = 'location.settings.open';
+const NOTICE_KEY = 'pages.checkout.allow_location_permission';
+const NOTICE_FALLBACK = 'اسمح بمشاركة موقعك لتحديد عنوانك تلقائيًا وبشكل أدق.';
+/** Whether the notice should be rendered — only for a state we know is missing the permission. */
+export const isLocationPermissionMissing = (state) => state === 'prompt' || state === 'denied';
+/** `PermissionStatus` for geolocation, or null when the browser can't report it. */
+async function queryLocationPermission() {
+    try {
+        if (!navigator?.permissions?.query || !navigator.geolocation)
+            return null;
+        return await navigator.permissions.query({ name: 'geolocation' });
+    }
+    catch {
+        // Browsers that don't know the 'geolocation' descriptor throw instead of resolving.
+        return null;
+    }
+}
+export async function getLocationPermissionState() {
+    const status = await queryLocationPermission();
+    return status?.state ?? 'unknown';
+}
+/**
+ * Reads the permission state and keeps reporting it while it changes, so the notice disappears the
+ * moment the customer grants access elsewhere (browser bar, OS settings) without a manual refresh.
+ *
+ * @returns an unsubscribe function — call it on disconnect.
+ */
+export function watchLocationPermission(onChange) {
+    let stopped = false;
+    let status = null;
+    const handleChange = () => {
+        if (!stopped && status)
+            onChange(status.state);
+    };
+    queryLocationPermission().then(result => {
+        if (stopped)
+            return;
+        status = result;
+        if (!status) {
+            onChange('unknown');
+            return;
+        }
+        onChange(status.state);
+        status.addEventListener?.('change', handleChange);
+    });
+    return () => {
+        stopped = true;
+        status?.removeEventListener?.('change', handleChange);
+        status = null;
+    };
+}
+/** Hands the request to the Salla app inside a native webview; it opens its permission settings. */
+function openNativeLocationSettings() {
+    const mobile = typeof Salla !== 'undefined' ? Salla.mobile : null;
+    if (!mobile?.isSpaWebview?.())
+        return false;
+    mobile.action?.(NATIVE_LOCATION_SETTINGS_ACTION);
+    return true;
+}
+/**
+ * Acts on a tap of the notice: native apps deep-link into their settings, the web always calls
+ * `getCurrentPosition` so the browser can re-show its permission dialog when the state is still
+ * `prompt`. If the site is permanently blocked, browsers stay silent and fail with
+ * `PERMISSION_DENIED`.
+ */
+export async function requestLocationPermission() {
+    const current = await getLocationPermissionState();
+    if (openNativeLocationSettings()) {
+        return { state: current, handledByApp: true };
+    }
+    if (!navigator?.geolocation) {
+        return { state: 'denied', handledByApp: false };
+    }
+    try {
+        const { coords } = await new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject, {
+            enableHighAccuracy: true,
+            timeout: GEOLOCATION_TIMEOUT,
+            maximumAge: 0,
+        }));
+        return {
+            state: 'granted',
+            handledByApp: false,
+            position: { lat: coords.latitude, lng: coords.longitude },
+        };
+    }
+    catch (error) {
+        // PERMISSION_DENIED means the browser will not (or did not) grant access — including the
+        // permanently-blocked case where no dialog appears. Timeouts / unavailable positions are not
+        // a refusal, so the previous state is kept.
+        const denied = error?.code === PERMISSION_DENIED;
+        return { state: denied ? 'denied' : current, handledByApp: false };
+    }
+}
+export const LocationPermissionNotice = ({ isRTL = false, onActivate, }) => (h("div", { class: "s-bullet-delivery-location-permission" }, h("button", { type: "button", class: "s-bullet-delivery-location-permission-btn", onClick: onActivate }, h("span", { class: "s-bullet-delivery-location-permission-icon", innerHTML: LocationIcon, "aria-hidden": "true" }), h("span", { class: "s-bullet-delivery-location-permission-text", style: { textAlign: isRTL ? 'right' : 'left' }, "data-testid": "salla-bullet-delivery-location-permission-text" }, Salla.lang.getWithDefault(NOTICE_KEY, NOTICE_FALLBACK)), h("i", { class: `s-bullet-delivery-location-permission-arrow ${isRTL ? 'sicon-keyboard_arrow_left' : 'sicon-keyboard_arrow_right'}`, "aria-hidden": "true" }))));

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": {}
         };
     }