@salla.sa/twilight-components 2.14.467 → 2.14.469

package/dist/cjs/{vanilla-picker-Cj5ogibZ.js → vanilla-picker-DtuN6WGq.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-JuURs8Nc.js');
+var index = require('./index-inmL4H71.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/collection/collection-manifest.json

@@ -122,7 +122,8 @@
     "components/salla-user-profile/salla-user-profile.js",
     "components/salla-user-settings/salla-user-settings.js",
     "components/salla-verify/salla-verify.js",
-    "components/salla-wallet/salla-wallet.js"
+    "components/salla-wallet/salla-wallet.js",
+    "components/salla-wishlist-actions/salla-wishlist-actions.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -6,6 +6,8 @@ import { bulletDeliveryAPI, clearApiCache, isSaudiArabia } from "./api-service";
 import { buildAddressLocationPayloadFromSelection, filterBranches, findNearestBranch, formatWorkingHoursDisplay, getBranchFirstSlot, getGeolocationErrorMessage, getIntentBranchId, getIntentCityId, getIntentCountryCode, getIntentCountryId, getIntentDistrictId, getIntentLatitude, getIntentLongitude, getIntentRegionId, getIntentSubtitle, hasSessionAddressIntent, requireRegionAndDistrictForSA, } from "./helpers";
 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). */
+const DEFAULT_MAP_CENTER = { lat: 24.7756042, lng: 46.7360729 };
 import { load } from "@salla.sa/ui-google-map-render";
 import "@salla.sa/ui-google-map-render";
 import GetDirections from "../../assets/svg/get-directions.svg";
@@ -64,6 +66,8 @@ export class SallaBulletDelivery {
         /** True after saved addresses have been loaded (lazy: only when address tab is shown). */
         this.savedAddressesLoaded = false;
         this.gmapRef = null;
+        /** Guards against re-prompting for geolocation each time the map (re)initializes within one flow. */
+        this.autoGeolocationTriggered = false;
         // Core state
         this.activeTab = "address";
         this.isLoggedIn = false;
@@ -205,6 +209,8 @@ export class SallaBulletDelivery {
                 shortAddress: detail.place?.placeId ?? detail.place?.place_id ?? undefined,
                 formattedAddress: detail.place?.formattedAddress ?? detail.place?.formatted_address ?? undefined,
             };
+            // Bias autocomplete results toward the currently selected location.
+            this.updateLocationBias();
             setTimeout(() => {
                 const marker = this.gmapRef?.locationMarker;
                 if (marker)
@@ -216,6 +222,25 @@ export class SallaBulletDelivery {
             if (this.gmapRef && typeof this.gmapRef.resize === 'function') {
                 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);
+                    }
+                }
+            }
         };
         /**
          * Submit add-address form: create address via API then switch back to list.
@@ -339,6 +364,9 @@ export class SallaBulletDelivery {
     get isRequired() {
         return !!Salla.config.get("store.settings.bullet_delivery.settings.is_required");
     }
+    get isSupportsDelivery() {
+        return !!Salla.config.get("store.settings.bullet_delivery.supports_delivery");
+    }
     get isMobileApp() {
         return Salla.config.isMobileApp();
     }
@@ -447,6 +475,7 @@ export class SallaBulletDelivery {
     }
     resetState() {
         this.viewMode = "main";
+        this.autoGeolocationTriggered = false;
         this.selectedCountry = null;
         this.selectedRegion = null;
         this.selectedCity = null;
@@ -524,12 +553,27 @@ export class SallaBulletDelivery {
         // only when it represents a valid session-style address.
         return hasSessionAddressIntent(intent);
     }
+    /**
+     * Whether the store still supports the delivery method captured in a stored
+     * intent. Shared by the cart pill and the cart-submit gate so an unsupported
+     * method (e.g. a remembered delivery address in a now pickup-only store) is
+     * never treated as a valid/complete selection.
+     */
+    isIntentMethodSupported(intent) {
+        if (intent.type === "branch")
+            return this.supportsPickup;
+        if (intent.type === "address")
+            return this.isSupportsDelivery;
+        return false;
+    }
     hasCompleteIntentForLoggedInUser() {
         if (this.isGuestUser())
             return false;
         const intent = this.getStoredIntent();
         if (!intent)
             return false;
+        if (!this.isIntentMethodSupported(intent))
+            return false;
         if (intent.type === "address")
             return !!intent.address_id;
         if (intent.type === "branch")
@@ -1107,6 +1151,7 @@ export class SallaBulletDelivery {
     async handleAddNewAddress() {
         this.viewMode = "add-address";
         this.mapLocationData = null;
+        this.autoGeolocationTriggered = false;
         this.fetchAddressToken();
         const intent = this.getStoredIntent();
         const sessionCountryId = getIntentCountryId(intent);
@@ -1129,6 +1174,7 @@ export class SallaBulletDelivery {
         this.mapLocationData = null;
         this.mapStep = 'map';
         this.addressDescription = '';
+        this.autoGeolocationTriggered = false;
     }
     // ─── Map methods ───
     async fetchAddressToken() {
@@ -1153,6 +1199,15 @@ export class SallaBulletDelivery {
             this.loadingToken = false;
         }
     }
+    /** Bias autocomplete toward the current selection (or the initial center) — mirrors checkout's map-page. */
+    updateLocationBias() {
+        if (!this.gmapRef)
+            return;
+        const center = this.hasMapLocation()
+            ? { lat: this.mapLocationData.lat, lng: this.mapLocationData.lng }
+            : this.mapInitialCenter;
+        this.gmapRef.autocompleteLocationBias = { center, radius: 500000 };
+    }
     hasMapLocation() {
         return this.mapLocationData?.lat != null && this.mapLocationData?.lng != null;
     }
@@ -1163,6 +1218,27 @@ export class SallaBulletDelivery {
     get isMapModeAvailable() {
         return this.isMapSettingEnabled && !!salla.config.get('store.settings.keys.maps') && !!this.addressToken;
     }
+    /** Center shown before geolocation resolves — the customer's IP-based default (falls back to Riyadh). */
+    get mapInitialCenter() {
+        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
+        // never feed (0,0) or an invalid point to the map; otherwise fall back to the default center.
+        const lat = this.toCoordinate(geo?.lat);
+        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;
+    }
+    /** Parse a config coordinate to a finite number, treating blank/whitespace strings as missing. */
+    toCoordinate(value) {
+        if (typeof value === 'string' && value.trim() === '')
+            return null;
+        if (value == null)
+            return null;
+        const num = Number(value);
+        return Number.isFinite(num) ? num : null;
+    }
     // ─── End Map methods ───
     /**
      * Build address/location payload from guest-form state (same fields as add-address).
@@ -1733,10 +1809,10 @@ export class SallaBulletDelivery {
     getCartViewConfig(intent) {
         if (!intent || !Salla.url.is_page("cart"))
             return null;
+        if (!this.isIntentMethodSupported(intent))
+            return null;
         const isBranch = intent.type === "branch";
         const isAddress = intent.type === "address";
-        if ((isBranch && !this.supportsPickup) || (!isBranch && !isAddress))
-            return null;
         return {
             title: isBranch
                 ? Salla.lang.get("pages.checkout.pickup_option")
@@ -1786,13 +1862,15 @@ export class SallaBulletDelivery {
         return wrapper;
     }
     renderTabs() {
-        // Show tabs only when pickup is supported; otherwise delivery-only view with no tabs
+        // 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
+        // tab is shown only when bullet delivery supports delivery (`isSupportsDelivery`).
         if (!this.supportsPickup)
             return null;
-        return (h("div", { class: "s-bullet-delivery-tabs" }, h("button", { type: "button", class: {
+        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", { 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: {
                 "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")))));
@@ -1945,7 +2023,13 @@ export class SallaBulletDelivery {
     }
     renderMapSection() {
         const isSA = isSaudiArabia(this.selectedCountry?.code ?? '');
-        return (h("div", { class: "s-bullet-delivery-map-container" }, h("gmap-map", { ref: (el) => (this.gmapRef = el), zoom: 16, "map-id": "DEMO_MAP_ID", "enable-autocomplete": true, "enable-geolocation": true, "show-location-marker": true, language: Salla.lang.getLocale?.() ?? document.documentElement.lang ?? 'ar', "geolocation-button-label": Salla.lang.get('pages.checkout.current_location'), "autocomplete-placeholder": Salla.lang.get('pages.checkout.search_for_address'), "autocomplete-hint": isSA ? Salla.lang.get('pages.checkout.short_address_format_validation') : undefined, "autocomplete-country": this.selectedCountry?.code?.toLowerCase(), "autocomplete-resolve": false, "autocomplete-auth-token": this.addressToken, "location-marker-background": "#4285F4", "location-marker-border-color": "#1967D2", "location-marker-glyph-color": "#FFFFFF", "location-marker-scale": 1.3, "onGmap-location-changed": this.handleMapLocationChanged, "onGmap-ready": this.handleMapReady })));
+        const loc = this.mapLocationData;
+        const hasLoc = loc?.lat != null && loc?.lng != null;
+        // Resolve the center once (the getter reads salla.config) and reuse it for the marker so the
+        // map never opens "empty": before a selection the marker sits on the IP/Riyadh default and is
+        // dragged/replaced once auto-geolocation or the user picks a real position.
+        const center = hasLoc ? { lat: loc.lat, lng: loc.lng } : this.mapInitialCenter;
+        return (h("div", { class: "s-bullet-delivery-map-container" }, h("gmap-map", { ref: (el) => (this.gmapRef = el), center: center, zoom: 16, "min-zoom": 4, "max-zoom": 21, "map-id": "DEMO_MAP_ID", "enable-autocomplete": true, "enable-geolocation": true, "show-location-marker": true, "location-marker-position": hasLoc ? { lat: loc.lat, lng: loc.lng, accuracy: 50 } : { ...center, accuracy: 50 }, language: Salla.lang.getLocale?.() ?? document.documentElement.lang ?? 'ar', "geolocation-button-label": Salla.lang.get('pages.checkout.current_location'), "autocomplete-placeholder": Salla.lang.get('pages.checkout.search_for_address'), "autocomplete-hint": isSA ? Salla.lang.get('pages.checkout.short_address_format_validation') : undefined, "autocomplete-country": this.selectedCountry?.code?.toLowerCase(), "autocomplete-resolve": false, "autocomplete-auth-token": this.addressToken, "location-marker-background": "#4285F4", "location-marker-border-color": "#1967D2", "location-marker-glyph-color": "#FFFFFF", "location-marker-scale": 1.3, "onGmap-location-changed": this.handleMapLocationChanged, "onGmap-ready": this.handleMapReady })));
     }
     renderAddressConfirmation() {
         const address = this.mapLocationData?.formattedAddress ?? '';

package/dist/collection/components/salla-gifting/salla-gifting.css

@@ -37,4 +37,22 @@
 }
 .s-gifting-modal .s-searchable-dropdown-trigger-placeholder {
   color: #000;
+}
+.s-gifting-modal .s-gifting-image-section {
+  margin-bottom: 1.5rem;
+}
+.s-gifting-modal .s-gifting-slider {
+  margin-bottom: 0.5rem;
+}
+.s-gifting-modal .s-gifting-image {
+  display: block;
+}
+.s-gifting-modal .s-gifting-image img {
+  display: block;
+  width: auto;
+  height: 100px;
+  object-fit: contain;
+}
+.s-gifting-modal .s-gifting-image-section + .anime-item .s-gifting-text-title {
+  margin-top: 1rem;
 }

package/dist/collection/components/salla-gifting/salla-gifting.js

@@ -14,7 +14,7 @@ import Alert from "../../assets/svg/alert.svg";
 export class SallaGifting {
     constructor() {
         this.defaultEvent = "gifting:open";
-        this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
+        this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_for_your_gift');
         this.currentStep = 1;
         this.showCalendar = false;
         this.showGiftText = false;
@@ -50,6 +50,7 @@ export class SallaGifting {
         this.timeZone = null;
         this.receiverCountryCode = salla.config.get('store.scope.countries')?.[0] || salla.config.get('store.store_country') || 'SA';
         this.hostId = `salla-gifting-${Math.random().toString(36).slice(2, 10)}`;
+        this.disableClass = this.gift?.show_image_upload ? '' : 'pointer-events-none';
         /**
          * The form selector to be used to get the form data
          */
@@ -106,6 +107,7 @@ export class SallaGifting {
             this.sectionBtnText = salla.lang.get('blocks.buy_as_gift.send_as_a_gift');
             this.giftDetails = salla.lang.get('blocks.buy_as_gift.gift_details');
             this.selectGiftMessage = salla.lang.get('blocks.buy_as_gift.select_gift_message');
+            this.giftText = salla.lang.get('blocks.buy_as_gift.gift_text');
             this.giftCustomText = salla.lang.get('blocks.buy_as_gift.gift_custom_text');
             this.textId = salla.lang.get('blocks.buy_as_gift.text_id');
             this.incorrectGiftText = salla.lang.get('blocks.buy_as_gift.incorrect_gift_text');
@@ -175,13 +177,46 @@ export class SallaGifting {
             salla.event.dispatch('login::open', { withoutReload: true });
             return;
         }
+        this.currentStep = 1;
+        this.parentClass = 'is-current-step-1';
+        this.step2Animated = false;
+        this.selectedText = undefined;
+        this.selectedGiftTextOption = undefined;
+        this.uploadedImage = undefined;
+        this.selectedImage = undefined;
         await this.modal.open();
         // Determine the appropriate method to call based on the `physicalProducts` flag
         const giftDetailsMethod = this.productId ? () => salla.product.getGiftProductDetails(this.productId) : () => salla.cart.getGiftCartDetails();
         return await salla.api.withoutNotifier(giftDetailsMethod)
             .then((response) => {
             this.gift = response.data;
+            // Backward-compat: older BE responses omit these visibility flags. Treat a
+            // missing flag as enabled so the image/text steps still render until the BE
+            // that returns them is deployed. Use `??` so an explicit `false` is preserved.
+            this.gift.show_texts = this.gift.show_texts ?? true;
+            this.gift.show_images = this.gift.show_images ?? true;
+            this.gift.show_custom_text = this.gift.show_custom_text ?? true;
+            this.gift.show_image_upload = this.gift.show_image_upload ?? true;
             this.senderName = this.gift.sender_name;
+            this.disableClass = this.gift?.show_image_upload ? '' : 'pointer-events-none';
+            if (!this.gift.show_texts) {
+                this.selectedGiftTextOption = undefined;
+                this.selectedText = undefined;
+            }
+            if (!this.gift.show_images) {
+                this.selectedImage = undefined;
+                this.uploadedImage = undefined;
+            }
+            if (this.skipStep1()) {
+                this.currentStep = 2;
+                this.parentClass = 'is-current-step-2';
+                this.step2Animated = true;
+            }
+            else if (!this.gift.show_images) {
+                // the slider lays out asynchronously,
+                // so an early measurement would pin it too short and overlap the button.
+                this.setWrapperHeight(1, 250, 5);
+            }
         })
             .catch(e => {
             this.hasError = true;
@@ -189,6 +224,9 @@ export class SallaGifting {
         })
             .finally(() => this.modal.stopLoading());
     }
+    skipStep1() {
+        return !!this.gift && !this.gift.show_images && !this.gift.show_texts;
+    }
     /**
      *
      * Hide / close the gifting modal window
@@ -225,39 +263,35 @@ export class SallaGifting {
         this.textSelect?.classList.remove('s-form-has-error');
         let dataID = event.target.children[event.target.selectedIndex].getAttribute('data-id');
         let customID = dataID == "custom";
+        // Only the custom-text textarea changes the layout; resize the wrapper just
+        // when it actually appears/disappears so picking or clearing a normal option
+        // doesn't jump the modal height.
+        const customVisibilityChanged = this.showGiftText !== customID;
         this.showGiftText = customID;
         if (dataID) {
             this.selectedGiftTextOption = dataID;
             customID ? this.selectedText = undefined : this.selectedText = event.target.value;
-            this.setWrapperHeight(1, 150, 5);
         }
         else {
             // empty textarea value
             this.textArea.value = '';
             this.selectedText = undefined;
             this.selectedGiftTextOption = undefined;
-            this.setWrapperHeight(1, 150, -15);
+        }
+        if (customVisibilityChanged) {
+            this.setWrapperHeight(1, 150, 5);
         }
     }
     /**
      *
      * Go to the step 2
      */
-    async goToStep2() {
-        if (!this.selectedGiftTextOption) {
-            this.textSelect.classList.add('s-form-has-error');
-            this.customTextArea.classList.remove('s-form-has-error');
+    async goToStep2(withValidation = true) {
+        if (!this.step1Elems)
             return;
-        }
-        else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
-            this.textSelect.classList.remove('s-form-has-error');
-            this.customTextArea.classList.add('s-form-has-error');
+        if (withValidation && !this.validateStep1()) {
             return;
         }
-        else {
-            this.textSelect.classList.remove('s-form-has-error');
-            this.customTextArea.classList.remove('s-form-has-error');
-        }
         this.setWrapperHeight(2, 600, 0);
         let stepNextAnime = new anime.timeline();
         stepNextAnime.add({
@@ -290,6 +324,23 @@ export class SallaGifting {
         this.currentStep = 2;
         this.parentClass = `is-current-step-${this.currentStep}`;
     }
+    validateStep1() {
+        if (!this.gift?.show_texts)
+            return true;
+        if (!this.selectedGiftTextOption) {
+            this.textSelect?.classList.add('s-form-has-error');
+            this.customTextArea?.classList.remove('s-form-has-error');
+            return false;
+        }
+        else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
+            this.textSelect?.classList.remove('s-form-has-error');
+            this.customTextArea?.classList.add('s-form-has-error');
+            return false;
+        }
+        this.textSelect?.classList.remove('s-form-has-error');
+        this.customTextArea?.classList.remove('s-form-has-error');
+        return true;
+    }
     /**
      *
      * Go to the step 1
@@ -332,7 +383,7 @@ export class SallaGifting {
         this.parentClass = `is-current-step-${this.currentStep}`;
     }
     getFilepondPlaceholder() {
-        return `<div class="s-gifting-filepond-placeholder"><span class="s-gifting-filepond-placeholder-icon">${Images}</span><p class="s-gifting-filepond-placeholder-text">${this.selectImageOrUpload ? this.selectImageOrUpload : ''}</p></div>`;
+        return `<div class="s-gifting-filepond-placeholder"><span class="s-gifting-filepond-placeholder-icon">${Images}</span><p class="s-gifting-filepond-placeholder-text">${this.selectImageOrUpload && this.gift.show_image_upload ? this.selectImageOrUpload : this.selectImageForYourGift}</p></div>`;
     }
     setPreview(image) {
         this.uploader?.classList.add('has-bg');
@@ -342,7 +393,7 @@ export class SallaGifting {
         bg.style.backgroundImage = "url('" + image.url + "')";
         this.uploader?.querySelector('.filepond--root')?.appendChild(bg);
         this.uploadedImage = image.url;
-        if (!!this.gift && this.gift.gift_images.length) {
+        if (!!this.gift && this.gift.gift_images?.length) {
             this.setWrapperHeight(1, 150, 0);
         }
     }
@@ -355,7 +406,7 @@ export class SallaGifting {
     }
     handleTextAreaChange(event) {
         this.selectedText = event.target.value;
-        this.customTextArea.classList.remove('s-form-has-error');
+        this.customTextArea?.classList.remove('s-form-has-error');
     }
     clearError(key) {
         if (this.errors?.[key]) {
@@ -506,13 +557,13 @@ export class SallaGifting {
     }
     handleUploadImage(img) {
         this.uploadedImage = img;
-        if (!!this.gift && this.gift.gift_images.length) {
+        if (!!this.gift && this.gift.gift_images?.length) {
             this.setWrapperHeight(1, 150, 0);
         }
     }
     handleRemoveImage() {
         this.uploadedImage = '';
-        if (!!this.gift && this.gift.gift_images.length) {
+        if (!!this.gift && this.gift.gift_images?.length) {
             this.setWrapperHeight(1, 150, 0);
         }
     }
@@ -646,16 +697,19 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: 'db700f9ec96a6974f3b815bb017ebe97ae8fe5c0' }, h("salla-list-tile", { key: '1e2fd1c0b375c85fcd4af1ea071c36879e6913c5', class: this.generateClass() }, h("div", { key: 'a9d02c933bc13bf8765e7e91ce08b2c9495954e5', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '56bd850368806c6ed5770ea5f6b0339749a77dfa' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'fbb4940fd3e3578f2f5a479d9d44be8dfbda7e43', slot: "subtitle" }, h("div", { key: 'fb7e8532984fbfc6fd61c55a6d44d7cdbb4bc9a2' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '04f27f1ddbfa0b06be111b6c3176fbda5ea6d43a', slot: "action" }, h("salla-button", { key: 'fe71a1a773e5275ede7d1b3ea535c330688028b7', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'd62127d30254df2d8add55e0e1dbcfefb686e359', name: "widget-btn-content" }, h("div", { key: '5ddbb695af142baf3bb6986627f97a7a7607eb31', class: "s-gifting-widget-action-content" }, h("span", { key: '7820fb6abd9d7a9c1035c0f80191a3ff2a4c5fe8', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '2cfc69862d3d087375efaed3bcec0ff0c1587989' }, this.sectionBtnText)))))), h("salla-modal", { key: '32c19391248ba6186f43fea59493171079e7bf07', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'e4b5829416314f25793158dae0c530b8057b4085', slot: "loading" }, h("div", { key: '6ee873add5868f105b7ec7291c2a8c8fc033c588', class: "s-gifting-skeleton" }, h("div", { key: '40aae38f8b2d62b434394811a3ef6d8bc00f6f32', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'a652cd74a16d0db662ea4a518ebfab366a3c3899', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'edb4a1477893246e98207aeba7bfb5af686f20b9', class: "s-gifting-modal-title" }, h("div", { key: '83ef942b15450cc59ad32d8c5b3ba43a32bcb29c', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'd9041c777a2fa0aa7ffc752958c7441916a02f85', height: '15px', width: '150px' })))), h("div", { key: 'fe3bb9dad01becba87486c4886037fd67b059919', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '08bd8304b66264b70f6df68e64da3560a1f75461', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'bbea0d7ff0c846897af2ef5d3696b252a2f4e662', height: '230px' }), h("salla-skeleton", { key: '8cb1fde02e31a1accabd2e26409983e7ba56eeb1', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f80a986b953278bac41505506adf8d611566a167', height: '30px' }), h("salla-skeleton", { key: 'f7eccce69b619de385872642e1fb62b2cf6c3082', height: '40px' })))), h("slot", { key: 'd299e46040193b441f8171d05e0048849e3df8d5', name: "header" }), !!this.hasError ?
+            h("div", { key: 'fdb6b68a052a9fa0a0d527edb25e3d7783cc47e9' }, h("salla-list-tile", { key: '3cfb7f37df96e924af7f977fd17f4161e40f83fe', class: this.generateClass() }, h("div", { key: '291a27d70bc43d6edac5c5838d93eaa6a51fb84a', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'c49f119d84a279338c4478872883ba7356e118ce' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '2ccfb84620132477c0845ffc0bbc257c350cdeb9', slot: "subtitle" }, h("div", { key: '2840a426b505f7fe7ac5c285ab9b74ca4f99ab55' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'e3560b1bc8a6c062417f3e2b7a91b5b20b4e1880', slot: "action" }, h("salla-button", { key: '5d96fb354f2845955344d782e693fe27a0fa2652', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '384ab549dc1942a600cc37c4df26008a8a05e9ab', name: "widget-btn-content" }, h("div", { key: '80d83cd6296f2e93ebbc0eada8737d65c76e4ce0', class: "s-gifting-widget-action-content" }, h("span", { key: '69f6686f6fe23bdab891ab12b295cf918ba0a8fb', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '495c9e9b10dcb69a1335d0345d42a8323b52abef' }, this.sectionBtnText)))))), h("salla-modal", { key: '303a208c394aa2c91f2273b3909208c29266b490', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '985a4d292ea01cb7ff48b443afe854de6f293abf', slot: "loading" }, h("div", { key: 'ba2b61f3bebf33d04d7132a00d3334a35042646a', class: "s-gifting-skeleton" }, h("div", { key: '4c8d2a5f128407423fd0c3070907d7781fb92283', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8585263f0bcb523a5b537c3b13f9c2a0a3a898d0', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'dbd2c3efbe5c91563275c09efd832709b6ed6748', class: "s-gifting-modal-title" }, h("div", { key: '4885e29c71001b530be33a4cf585fd77cf434dfd', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6c248a65bcc92c51555f0dd8f6d10c6f9d4a2b9a', height: '15px', width: '150px' })))), h("div", { key: '07de64586572cea82b2561344b5922ad4f7cb2c1', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '9a9e45772c6f5ce30a19ebcb53405032dfc25862', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'd1165987504fb2e5a7d013118b6ca5db2bf1523c', height: '230px' }), h("salla-skeleton", { key: '33cc657831541bcf6916c54c8dffca3b9933ccbb', height: '10px', width: '150px' }), h("salla-skeleton", { key: '46ff78b7725c57c955c73e9a71b9bf1c7340a354', height: '30px' }), h("salla-skeleton", { key: '520bd0a02c0bf4ef6109f014856dfad71d779aca', height: '40px' })))), h("slot", { key: '5519fd6df4f911b042f68f6825a563ce92f16733', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
-                        h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
-                        h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), h("div", { class: "s-gifting-modal-uploader anime-item", ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
-                            h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
-                                this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
-                            : ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
-                            this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
+                        h("div", { class: "s-gifting-modal-header" }, h("span", { class: "s-gifting-modal-icon" }, h("span", { innerHTML: GiftSharing })), h("h2", { class: "s-gifting-modal-title" }, h("div", { class: "s-gifting-modal-badge-wrapper" }, !this.skipStep1() && h("div", { class: "s-gifting-modal-badge" }, h("span", null, h("span", null, this.currentStep), "/2")), h("span", null, this.giftDetails)))),
+                        h("div", { class: "s-gifting-steps-wrapper " + this.parentClass, ref: el => this.stepsWrapper = el }, !this.skipStep1() && h("div", { class: "s-gifting-step-one gift-step-1", ref: el => this.step1Elems = el }, this.gift && this.gift.show_images &&
+                            h("div", { class: "s-gifting-modal-uploader-title anime-item" }, this.selectImageForYourGift), this.gift && this.gift.show_images &&
+                            h("div", { class: "s-gifting-image-section" }, h("div", { class: `s-gifting-modal-uploader anime-item ${this.disableClass}`, ref: el => this.uploader = el }, h("span", { class: "s-gifting-remove-preview pointer-events-auto", onClick: () => this.removePreview(), innerHTML: Cancel }), this.selectImageOrUpload && this.gift && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
+                                h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
+                                    this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { src: item.url, alt: `${item.id}` }))) : ''))
+                                : "")), this.gift && this.gift.show_texts ?
+                            h("div", { class: "anime-item" }, h("div", { class: "s-gifting-modal-uploader-title s-gifting-text-title" }, this.giftText), h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
+                                this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', this.gift && this.gift.show_custom_text ? h("option", { "data-id": "custom" }, this.giftCustomText) : null)), h("div", { class: this.showGiftText && this.gift && this.gift.show_custom_text ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))) : null, h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2(!!this.gift?.show_texts) }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", style: this.skipStep1() ? { opacity: '1', transform: 'translateX(0)', position: 'relative' } : undefined, ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.isPhysical() &&
@@ -665,8 +719,8 @@ export class SallaGifting {
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.isPhysical() &&
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() &&
-                            h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: 'bd8cd1628ed4282b177f0ddcd5fb93289c47b4d6', name: "footer" })))
+                            h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
+                    ], h("slot", { key: '9413ec459b3b5dc137a90979990022b7ec1c6453', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }
@@ -827,6 +881,7 @@ export class SallaGifting {
             "selectImageForYourGift": {},
             "selectImageOrUpload": {},
             "selectGiftMessage": {},
+            "giftText": {},
             "giftCustomText": {},
             "textId": {},
             "incorrectGiftText": {},
@@ -887,6 +942,7 @@ export class SallaGifting {
             "receiverCountryCode": {},
             "receiverEmail": {},
             "hostId": {},
+            "disableClass": {},
             "receiverCity": {}
         };
     }
@@ -932,8 +988,12 @@ export class SallaGifting {
             },
             "goToStep2": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(withValidation?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "withValidation",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -56,7 +56,8 @@ export class SallaLoginModal {
     }
     componentDidLoad() {
         window.addEventListener('message', (event) => {
-            if (event.data.source != "login") {
+            // Trust only our login iframe/passkey popup at the accounts origin.
+            if (!this.isTrustedMessage(event) || event.data?.source != "login") {
                 return;
             }
             if (!this.inline && !this.canRenderIframe) {
@@ -133,6 +134,8 @@ export class SallaLoginModal {
                 return window.location.reload();
             }
             if (action === 'open_page') {
+                if (!this.isSafeUrl(value?.url))
+                    return;
                 return window.location.href = value.url;
             }
             if (action === 'open_passkey_page') {
@@ -245,6 +248,33 @@ export class SallaLoginModal {
         }
         withCartReset && Salla.cart.reset();
     }
+    // Accept postMessage only from our own login iframe/passkey popup at the accounts origin.
+    isTrustedMessage(event) {
+        const fromIframe = !!this.iframe && event.source === this.iframe.contentWindow;
+        const fromPasskey = !!this.createPassKey && event.source === this.createPassKey;
+        if (!fromIframe && !fromPasskey)
+            return false;
+        let origin;
+        try {
+            origin = new URL(salla.config.get('login.url', 'https://accounts.salla.com')).origin;
+        }
+        catch (e) {
+            origin = 'https://accounts.salla.com';
+        }
+        return event.origin === origin;
+    }
+    // Reject javascript:/data: and other non-http(s) navigation targets.
+    isSafeUrl(url) {
+        if (typeof url !== 'string' || !url)
+            return false;
+        try {
+            const { protocol } = new URL(url, location.href);
+            return protocol === 'https:' || protocol === 'http:';
+        }
+        catch (e) {
+            return false;
+        }
+    }
     sendMessageToIframe(message) {
         if (!this.iframe)
             return;

package/dist/collection/components/salla-product-options/salla-product-options.css

@@ -1,3 +0,0 @@
-.s-product-options-option-stock-out {
-  opacity: 0.5;
-}