@salla.sa/twilight-components 2.14.389 → 2.14.391

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

@@ -0,0 +1,247 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+/**
+ * @name SallaDeliveryPromise
+ * @description Displays delivery promise message (from BE) with city selection
+ * @tag salla-delivery-promise
+ */
+export class SallaDeliveryPromise {
+    constructor() {
+        this.cities = [];
+        this.filteredCities = [];
+        this.selectedCity = null;
+        this.deliveryMessage = null;
+        this.isLoadingCities = false;
+        this.isLoadingPromises = false;
+        this.isDropdownOpen = false;
+        this.searchQuery = '';
+        this.hasError = false;
+        this.errorMessage = '';
+        /** i18n labels for city selector only; message comes from BE */
+        this.labels = {
+            deliveryTo: 'توصيل إلى',
+            pickupFromBranch: 'الاستلام من فرع',
+            searchPlaceholder: 'بحث...',
+            noResults: 'لا توجد نتائج',
+            selectCity: 'اختر المدينة',
+        };
+        this.canRender = false;
+        this.requiresShipping = false;
+        /** Used only for API calls, not rendered — no need for @State */
+        this.productId = undefined;
+        this.onClickOutside = (e) => {
+            if (this.host.contains(e.target)) {
+                return; // click inside component (e.g. search input, city list) — don't close
+            }
+            this.isDropdownOpen = false;
+            window.removeEventListener('click', this.onClickOutside);
+        };
+    }
+    setLabels() {
+        this.labels = {
+            deliveryTo: salla.lang.getWithDefault('pages.products.promise_deliver_to', 'توصيل إلى'),
+            pickupFromBranch: salla.lang.getWithDefault('pages.products.promise_pickup_from_branch', 'الاستلام من فرع'),
+            searchPlaceholder: salla.lang.getWithDefault('blocks.header.search_placeholder', 'بحث...'),
+            noResults: salla.lang.getWithDefault('common.elements.no_options', 'لا توجد نتائج'),
+            selectCity: salla.lang.getWithDefault('common.elements.select_city', 'اختر المدينة'),
+        };
+    }
+    logger(message, data) {
+        if (localStorage.getItem('salla-delivery-promise-debug')) {
+            if (data) {
+                console.log(message, data);
+            }
+            else {
+                console.log(message);
+            }
+        }
+    }
+    async componentDidLoad() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.setLabels();
+        this.requiresShipping = salla.url.is_page('product.single') &&
+            salla.config.get('store.features', []).includes('delivery-promises');
+        if (this.requiresShipping) {
+            this.logger('requiresShipping', this.requiresShipping);
+            this.productId = salla.config.get('page.id');
+            this.logger('productId', this.productId);
+        }
+        else {
+            this.canRender = false;
+            this.logger('not requiresShipping', {
+                is_product_single: salla.url.is_page('product.single'),
+                includesDeliveryPromises: salla.config.get('store.features', []).includes('delivery-promises')
+            });
+            return;
+        }
+        await this.fetchCities();
+    }
+    async fetchCities() {
+        this.logger('start startfetchCities');
+        this.isLoadingCities = true;
+        this.hasError = false;
+        try {
+            const response = await salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises/cities`));
+            if (response.success && Array.isArray(response.data) && response.data.length > 0) {
+                this.logger('fetchCities success', { cities: response.data });
+                // Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1)
+                this.cities = this.sortCities(response.data);
+                this.filteredCities = [...this.cities];
+                // First, check if API returns a selected city (is_selected: true)
+                let cityToSelect = this.cities.find(c => c.is_selected);
+                if (!cityToSelect) {
+                    this.logger('no selectedCity from API response');
+                }
+                else {
+                    this.logger('selectedCity', cityToSelect);
+                    this.selectedCity = cityToSelect;
+                    await this.fetchDeliveryMessage(cityToSelect.id);
+                }
+                this.canRender = true;
+            }
+            else {
+                this.logger('no data returned from fetchCities', { response: response });
+                this.canRender = false;
+            }
+        }
+        catch (error) {
+            this.logger('fetchCities error', { error: error.message });
+            this.hasError = true;
+            this.errorMessage = error.message || 'Failed to load cities';
+            this.canRender = false;
+        }
+        finally {
+            this.isLoadingCities = false;
+        }
+    }
+    async fetchDeliveryMessage(cityId) {
+        this.logger('start fetchDeliveryMessage', { cityId });
+        this.isLoadingPromises = true;
+        this.hasError = false;
+        this.deliveryMessage = null;
+        try {
+            const response = await salla.api.withoutNotifier(() => salla.api.request(salla.url.api(`products/${this.productId}/delivery-promises?city_id=${cityId}`)));
+            if (response.success && response.data?.message) {
+                const message = response.data.message.trim();
+                this.logger('fetchDeliveryMessage success', { message });
+                this.deliveryMessage = message || null;
+            }
+            else {
+                this.logger('deliveryMessage not valid', { response });
+            }
+        }
+        catch (error) {
+            this.logger('fetchDeliveryMessage error', { error: error.message });
+            this.hasError = true;
+            this.errorMessage = error.message || 'Failed to load delivery message';
+        }
+        finally {
+            this.isLoadingPromises = false;
+        }
+    }
+    toggleDropdown(e) {
+        e?.stopPropagation();
+        this.isDropdownOpen = !this.isDropdownOpen;
+        if (this.isDropdownOpen) {
+            window.addEventListener('click', this.onClickOutside);
+            if (this.searchInputRef) {
+                setTimeout(() => this.searchInputRef.focus(), 100);
+            }
+        }
+        else {
+            window.removeEventListener('click', this.onClickOutside);
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener('click', this.onClickOutside);
+    }
+    /**
+     * Sort cities: explicit cities first (id !== -1), then "Rest of cities" (id === -1) at the end
+     */
+    sortCities(cities) {
+        return [...cities].sort((a, b) => {
+            // "Rest of cities" (id === -1) should always be at the end
+            if (a.id === -1)
+                return 1;
+            if (b.id === -1)
+                return -1;
+            return 0;
+        });
+    }
+    handleSearch(event) {
+        const query = event.target.value.toLowerCase();
+        this.searchQuery = query;
+        if (query.length > 0) {
+            this.filteredCities = this.cities.filter(city => city.name.toLowerCase()?.includes(query) ||
+                (city.name_en || '').toLowerCase()?.includes(query));
+        }
+        else {
+            this.filteredCities = [...this.cities];
+        }
+    }
+    async selectCity(city) {
+        this.logger('selectCity', { city: city });
+        this.selectedCity = city;
+        this.isDropdownOpen = false;
+        window.removeEventListener('click', this.onClickOutside);
+        this.searchQuery = '';
+        this.filteredCities = [...this.cities];
+        await this.fetchDeliveryMessage(city.id);
+    }
+    renderDropdown() {
+        return (h("div", { class: "s-delivery-promise-dropdown" }, h("div", { class: "s-delivery-promise-dropdown-search" }, h("i", { class: "sicon-search" }), h("input", { type: "text", placeholder: this.labels.searchPlaceholder, value: this.searchQuery, onInput: (e) => this.handleSearch(e), ref: el => this.searchInputRef = el })), h("div", { class: "s-delivery-promise-dropdown-list" }, this.filteredCities.length === 0 ? (h("div", { class: "s-delivery-promise-dropdown-empty" }, this.labels.noResults)) : (this.filteredCities.map(city => (h("div", { key: city.id, class: `s-delivery-promise-dropdown-item ${this.selectedCity?.id === city.id ? 'selected' : ''}`, onClick: () => this.selectCity(city) }, h("span", { class: "s-delivery-promise-city-name" }, city.name), this.selectedCity?.id === city.id && (h("i", { class: "sicon-check" })))))))));
+    }
+    /**
+     * Skeleton shown during initial city fetch to avoid blank period and layout shift.
+     * Matches the structure/size of the real content (header + message area).
+     */
+    renderInitialLoadingSkeleton() {
+        return (h(Host, { class: "s-delivery-promise-wrapper s-delivery-promise-skeleton" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header s-delivery-promise-header-skeleton" }, h("div", { class: "s-delivery-promise-location" }, h("salla-skeleton", { height: "14px", width: "180px" })), h("salla-skeleton", { height: "18px", width: "18px" })), h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })))));
+    }
+    renderDeliveryMessage() {
+        if (this.isLoadingPromises) {
+            return (h("div", { class: "s-delivery-promise-loading" }, h("salla-skeleton", { height: "20px", width: "80%" })));
+        }
+        if (!this.deliveryMessage) {
+            return null;
+        }
+        return (h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage));
+    }
+    render() {
+        // Not on product page or delivery-promises disabled — hide entirely
+        if (!this.requiresShipping) {
+            return null;
+        }
+        // Initial city fetch: show skeleton to avoid blank period and layout shift
+        if (this.isLoadingCities) {
+            return this.renderInitialLoadingSkeleton();
+        }
+        // Fetch done but no cities / error — hide
+        if (!this.canRender || this.cities.length === 0) {
+            return null;
+        }
+        return (h(Host, { class: "s-delivery-promise-wrapper" }, h("div", { class: "s-delivery-promise-container" }, h("div", { class: "s-delivery-promise-header", onClick: (e) => this.toggleDropdown(e) }, h("div", { class: "s-delivery-promise-location" }, h("span", { class: "s-delivery-promise-title" }, this.labels.deliveryTo, " ", this.selectedCity?.name || this.labels.selectCity)), h("i", { class: `sicon-keyboard_arrow_down s-delivery-promise-arrow ${this.isDropdownOpen ? 'open' : ''}` })), this.hasError && (h("div", { class: "s-delivery-promise-error" }, this.errorMessage)), this.isDropdownOpen && this.renderDropdown(), !this.hasError && this.renderDeliveryMessage())));
+    }
+    static get is() { return "salla-delivery-promise"; }
+    static get states() {
+        return {
+            "cities": {},
+            "filteredCities": {},
+            "selectedCity": {},
+            "deliveryMessage": {},
+            "isLoadingCities": {},
+            "isLoadingPromises": {},
+            "isDropdownOpen": {},
+            "searchQuery": {},
+            "hasError": {},
+            "errorMessage": {},
+            "labels": {},
+            "canRender": {},
+            "requiresShipping": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-fulfillment-methods/salla-fulfillment-methods.js

@@ -0,0 +1,51 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+/**
+ * @name SallaFulfillmentMethods
+ * @description Displays product fulfillment options (pickup and delivery) as two side-by-side cards
+ * @tag salla-fulfillment-methods
+ */
+export class SallaFulfillmentMethods {
+    constructor() {
+        this.methods = [];
+        this.shouldRender = false;
+    }
+    async componentDidLoad() {
+        await Salla.onReady();
+        await Salla.lang.onLoaded();
+        if (!Salla.config.get('store.support_pickup'))
+            return;
+        this.shouldRender = true;
+        this.setLabels();
+    }
+    setLabels() {
+        this.methods = [
+            {
+                id: 'delivery',
+                title: Salla.lang.getWithDefault('pages.products.promise_delivery_title', 'متاح للتوصيل'),
+                subtitle: Salla.lang.getWithDefault('pages.products.promise_delivery_subtitle', 'طلبك يوصلك لباب البيت بسهولة.'),
+                iconClass: 'sicon-location',
+            },
+            {
+                id: 'pickup',
+                title: Salla.lang.getWithDefault('pages.products.promise_pickup_title', 'متاح للاستلام'),
+                subtitle: Salla.lang.getWithDefault('pages.products.promise_pickup_subtitle', 'استلام فوري من أقرب فرع.'),
+                iconClass: 'sicon-store',
+            },
+        ];
+    }
+    render() {
+        if (!this.shouldRender)
+            return null;
+        return (h(Host, { class: "s-fulfillment-methods" }, h("div", { class: "s-fulfillment-methods-list" }, this.methods.map((method) => (h("div", { key: method.id, class: "s-fulfillment-methods-card" }, h("div", { class: "s-fulfillment-methods-content" }, h("div", { class: "s-fulfillment-methods-icon-wrap" }, h("i", { class: `${method.iconClass} s-fulfillment-methods-icon` })), h("div", { class: "s-fulfillment-methods-text" }, h("span", { class: "s-fulfillment-methods-title" }, method.title), h("span", { class: "s-fulfillment-methods-subtitle" }, method.subtitle)))))))));
+    }
+    static get is() { return "salla-fulfillment-methods"; }
+    static get states() {
+        return {
+            "methods": {},
+            "shouldRender": {}
+        };
+    }
+}

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

@@ -26,6 +26,11 @@ export class SallaGifting {
         this.selectedCountryId = undefined;
         this.selectedCountryCode = undefined;
         this.loadingCities = false;
+        this.loadingRegions = false;
+        this.regions = [];
+        this.selectedRegionId = undefined;
+        this.isKSA = false;
+        this.step2Animated = false;
         this.showTextArea = false;
         /// Gift Form Data
         this.selectedImage = undefined;
@@ -60,6 +65,8 @@ export class SallaGifting {
             this.selectCountry = salla.lang.get('pages.checkout.select_country');
             this.selectCityInfo = salla.lang.get('blocks.buy_as_gift.city_info');
             this.receiverCityFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_city');
+            this.receiverRegionFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_region') || salla.lang.get('pages.checkout.region');
+            this.selectRegion = salla.lang.get('pages.checkout.select_region');
             this.receiverEmailFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_email');
             this.emailPlaceholder = salla.lang.get('common.elements.email_placeholder');
             this.sendLater = salla.lang.get('blocks.buy_as_gift.send_later');
@@ -137,7 +144,7 @@ export class SallaGifting {
     */
     async setWrapperHeight(asStep = 1, delay = 250, additionSpace = 0, newHeight = 0) {
         let currentStep = document.querySelector(`#${this.hostId} .gift-step-${asStep}`);
-        setTimeout(() => {
+        const updateHeight = () => {
             let currentStepHeight = currentStep.offsetHeight;
             if (newHeight) {
                 this.stepsWrapper.style.height = `${newHeight}px`;
@@ -145,7 +152,13 @@ export class SallaGifting {
             else {
                 this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
             }
-        }, delay);
+        };
+        if (this.step2Animated && asStep === 2) {
+            requestAnimationFrame(updateHeight);
+        }
+        else {
+            setTimeout(updateHeight, delay);
+        }
     }
     toggleCalendar() {
         this.showCalendar = !this.showCalendar;
@@ -214,6 +227,7 @@ export class SallaGifting {
                     item.classList.remove('opacity-0');
                     item.removeAttribute('style');
                 });
+                this.step2Animated = true;
             }
         }, '-=1200');
         this.currentStep = 2;
@@ -255,6 +269,7 @@ export class SallaGifting {
             }
         }, '-=1200');
         stepBackAnime.play();
+        this.step2Animated = false;
         this.setWrapperHeight(1, 600, 0);
         this.currentStep = 1;
         this.parentClass = `is-current-step-${this.currentStep}`;
@@ -304,23 +319,72 @@ export class SallaGifting {
         this.clearError('receiver.city_id');
     }
     async handleCountryChange(event) {
-        const countryId = event.target.value;
+        const countryId = Number(event.target.value);
         this.selectedCountryId = countryId;
         this.clearError('receiver.country');
         // Find the selected country and store its country_code
         const selectedCountry = this.gift?.countries?.find(country => country.id == countryId);
         this.selectedCountryCode = selectedCountry?.country_code;
+        this.isKSA = selectedCountry?.country_code === 'SA';
+        // Reset region and city
+        this.regions = [];
+        this.selectedRegionId = undefined;
+        this.gift = { ...this.gift, cities: [] };
+        this.receiverCity = undefined;
         if (!countryId || this.gift?.countries?.length === 0) {
-            this.gift = { ...this.gift, cities: [] };
-            this.receiverCity = undefined;
             this.selectedCountryCode = undefined;
+            this.isKSA = false;
+            this.setWrapperHeight(2, 0, 0);
             return;
         }
-        this.loadingCities = true;
+        if (this.isKSA) {
+            // For KSA, fetch regions first
+            this.loadingRegions = true;
+            this.setWrapperHeight(2, 0, 0);
+            try {
+                const response = await salla.api.request(`shipping/countries/${countryId}/regions`);
+                if (response && response.data) {
+                    this.regions = response.data;
+                }
+            }
+            catch (error) {
+                console.error('Error fetching regions:', error);
+            }
+            finally {
+                this.loadingRegions = false;
+                this.setWrapperHeight(2, 0, 0);
+            }
+        }
+        else {
+            // For non-KSA, fetch cities directly
+            this.loadingCities = true;
+            this.setWrapperHeight(2, 0, 0);
+            try {
+                const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${countryId}`);
+                if (response && response.data) {
+                    this.gift = { ...this.gift, cities: response.data };
+                }
+            }
+            catch (error) {
+                console.error('Error fetching cities:', error);
+            }
+            finally {
+                this.loadingCities = false;
+            }
+        }
+    }
+    async handleRegionChange(event) {
+        const regionId = Number(event.target.value);
+        this.selectedRegionId = regionId;
+        this.clearError('receiver.region');
+        // Reset city when region changes
         this.gift = { ...this.gift, cities: [] };
         this.receiverCity = undefined;
+        if (!regionId)
+            return;
+        this.loadingCities = true;
         try {
-            const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${countryId}`);
+            const response = await salla.api.request(`shipping/cities?for_branch=0&country_id=${this.selectedCountryId}&region_id=${regionId}`);
             if (response && response.data) {
                 this.gift = { ...this.gift, cities: response.data };
             }
@@ -330,6 +394,7 @@ export class SallaGifting {
         }
         finally {
             this.loadingCities = false;
+            this.setWrapperHeight(2, 0, 0);
         }
     }
     handleUploadImage(img) {
@@ -385,6 +450,7 @@ export class SallaGifting {
             { key: 'receiver.mobile', value: this.receiverMobile, label: this.receiverMobileFieldLabel },
             ...(this.physicalProducts ? [
                 { key: 'receiver.country', value: this.selectedCountryId, label: this.receiverCountryFieldLabel },
+                ...(this.isKSA ? [{ key: 'receiver.region', value: this.selectedRegionId, label: this.receiverRegionFieldLabel }] : []),
                 { key: 'receiver.city_id', value: this.receiverCity, label: this.receiverCityFieldLabel },
             ] : []),
         ];
@@ -411,6 +477,7 @@ export class SallaGifting {
                 mobile_country_code: this.receiverCountryCode,
                 mobile: this.receiverMobile,
                 ...(this.physicalProducts && this.selectedCountryCode ? { country_code: this.selectedCountryCode } : {}),
+                ...(this.physicalProducts && this.selectedRegionId ? { region_id: this.selectedRegionId } : {}),
                 ...(this.receiverCity && this.physicalProducts ? { city_id: this.receiverCity } : {})
             },
             has_apple_pay: salla.helpers.hasApplePay(),
@@ -435,6 +502,10 @@ export class SallaGifting {
             this.setWrapperHeight(2, 150, 0);
         });
     }
+    step2ItemClass(extra = '') {
+        const base = `anime-item${this.step2Animated ? '' : ' opacity-0'}`;
+        return extra ? `${extra} ${base}` : base;
+    }
     generateClass() {
         return {
             "s-gifting-widget": true,
@@ -468,7 +539,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '5959120e43b44cd294d9466003422efb26090897' }, h("salla-list-tile", { key: '6ba52f5157d734e4c8443a9b4a59703d69eb8e84', class: this.generateClass() }, h("div", { key: '26130f1b0e64f7dcc488f2865a19c04c4da28afe', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'b26949ce590efdeb7d364bbb65f04cc2e58eb396' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'bfa36868bc7681aa8fb218dcaa032a414609413c', slot: "subtitle" }, h("div", { key: 'b070fb428965fd7f2f58573970d5d0604564f682' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '343729605e7b97a7a35e63ca26b46ef2b48d5d8e', slot: "action" }, h("salla-button", { key: 'f8d6e1d5f60ea02a271b504fd3daa36215e9a8f3', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'c9cc5ec40b0e09aa99e15f464701deb5c9a3f486', name: "widget-btn-content" }, h("div", { key: '5b431294450b2c45bc5b3503e022d03872cd4252', class: "s-gifting-widget-action-content" }, h("span", { key: '4397140781cf6e311de760e384e1b0f3f429eeeb', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'e993b5010cca3eb5c09ab6abc592d29c149292bb' }, this.sectionBtnText)))))), h("salla-modal", { key: '13a1010f08acd0c9ef7bdd4eafd3488ae083b0a4', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '0eea1fa6d0ea8240d198e8e7fdd68dc7327fa817', slot: "loading" }, h("div", { key: '9e98de0165db06a39e51984419cb93dcb4bd40ad', class: "s-gifting-skeleton" }, h("div", { key: 'd302e19b737bc272ccece10bfca0eb019b6ca2cf', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '787d98c862475e7a263d4d501842d0b769e9be4a', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '86b67bbbe29fe5b1bad587432652f36480269c86', class: "s-gifting-modal-title" }, h("div", { key: 'af9eb2262a435ce110e355b75f5c0ebdd2a3acdc', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9311ddd1eb3afdc7c02530451eafc27bbba8b776', height: '15px', width: '150px' })))), h("div", { key: '5c87083930311249c7ea735697c3c7d20be4b2e7', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: 'f42adea83216bc972863bd56c5ba0b5f02df6eb1', height: '10px', width: '150px' }), h("salla-skeleton", { key: '7781766e62dedadff68943e69bc97b54fe6eb22b', height: '230px' }), h("salla-skeleton", { key: 'a61810158f2edf8b0f7ed0f44c4985ca1f4b01e7', height: '10px', width: '150px' }), h("salla-skeleton", { key: '2f2763deca90fcfe66a462befbfb7072decf63c1', height: '30px' }), h("salla-skeleton", { key: '2f34b53353830532c900e70660a81d9124bbc1e8', height: '40px' })))), h("slot", { key: 'd6f51bf3ee6a11019d25150e26c45fa80a534c43', name: "header" }), !!this.hasError ?
+            h("div", { key: '5d0eec8210f77d166c144704ec78bffcaf1f4ce0' }, h("salla-list-tile", { key: '19cc20b4f70bbb8a7d267f60052db77589901962', class: this.generateClass() }, h("div", { key: '1c3c52b5ac48e71a6ac26c60494657ac28d16457', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'e3379fb3ed39d1bc63500346058b26b883c3be13' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'f6c2a522727546aa27cef725faa8be082da063da', slot: "subtitle" }, h("div", { key: '7b58ad967f39fa2cc660369b72e73f8dc49f90dc' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '848396dcd6ce6009ebc4cf1a209a055ad1adbf15', slot: "action" }, h("salla-button", { key: '2ba69b670f1c958784c6f1dca6b2dd0b93f20859', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6ac9ac339e321fc9433465cfd75f299307ee7152', name: "widget-btn-content" }, h("div", { key: 'c61dd36375886c1ecf87f115e5248dca1af7efc9', class: "s-gifting-widget-action-content" }, h("span", { key: '0c8a3630ba6b15889fc4bf3d55a1279cdf713400', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'c9299ec752e5393f30a78e1e01d367be9e97ca50' }, this.sectionBtnText)))))), h("salla-modal", { key: '9ee17e79f97eee59d25d9627d5b1cd4ada7cadb3', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'aba3b6a4d3e903934c9b5e629119c3a3b5bc90ab', slot: "loading" }, h("div", { key: 'e03613cc85bf4024f63d2e256a2744ec78f7eabf', class: "s-gifting-skeleton" }, h("div", { key: '01156691d540ce5ef5723902610a1da27fba3ddb', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'e45b4868e4fa5633aeb22f758f75f5412290b179', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '2b427d38dd6e0569e16de84ef46eb2052d23b739', class: "s-gifting-modal-title" }, h("div", { key: 'c4f9cb6f513e3ebd2e6ad209648a1f70bcafbcb5', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'e684b682a4cca89262128cca13604b7aa9a83cd7', height: '15px', width: '150px' })))), h("div", { key: '2941865d68cd216b4dd82bb8279f6bcbaa062bf3', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '7c4f4235a666930ceef3dc0b38809aea5ee5ce5c', height: '10px', width: '150px' }), h("salla-skeleton", { key: '0257f401762a11b0bf3da7db603b4e5f57bd1aae', height: '230px' }), h("salla-skeleton", { key: 'cced26b189549fcee4eff3a3fbd943a5735b4c6c', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f5893e5c631564c91bfe42c4102190d43f913947', height: '30px' }), h("salla-skeleton", { key: '64d3738017cf6732b429848c1de4ca16db1adc06', height: '40px' })))), h("slot", { key: '77d5bda8147f7f09d73b97fd7456121626b465a7', 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" }, " "))
                 :
                     [
@@ -477,14 +548,18 @@ export class SallaGifting {
                             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.errors && this.errors['sender_name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, 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.errors && this.errors['receiver.name'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, 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.errors && this.errors['receiver.mobile'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, 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'] ?
+                            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("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.physicalProducts &&
-                            h("div", null, h("div", { class: this.errors && this.errors['receiver.country'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
-                                h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), h("div", { class: this.errors && this.errors['receiver.city_id'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
-                                h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), h("div", { class: "s-gifting-info anime-item opacity-0" }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo))), !this.physicalProducts && h("div", { class: "anime-item opacity-0" }, 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: "s-gifting-step-two-footer anime-item opacity-0" }, 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: 'a08d6d434a1d144bd7aa5d3b13754980083a3f4d', name: "footer" })))
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.country'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
+                                h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), this.physicalProducts && this.isKSA &&
+                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverRegionFieldLabel), h("select", { name: "region", class: "s-form-control", onChange: (event) => this.handleRegionChange(event), disabled: this.loadingRegions }, h("option", { value: "", selected: true }, this.loadingRegions ? salla.lang.get('common.elements.loading') : this.selectRegion), this.regions?.map((region) => (h("option", { value: region.id }, region.name)))), this.errors && this.errors['receiver.region'] ?
+                                h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.physicalProducts &&
+                            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" }, this.receiverCityFieldLabel), h("select", { name: "city", "aria-label": salla.lang.get('blocks.buy_as_gift.select_city'), class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId) }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
+                                h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.physicalProducts &&
+                            h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.physicalProducts && 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: '46da7ff69a3c10b75886a23936f2f9ad8ad0e7bf', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }
@@ -639,6 +714,8 @@ export class SallaGifting {
             "selectCity": {},
             "selectCityInfo": {},
             "receiverCityFieldLabel": {},
+            "receiverRegionFieldLabel": {},
+            "selectRegion": {},
             "receiverEmailFieldLabel": {},
             "emailPlaceholder": {},
             "sendLater": {},
@@ -657,6 +734,10 @@ export class SallaGifting {
             "selectedCountryId": {},
             "selectedCountryCode": {},
             "loadingCities": {},
+            "loadingRegions": {},
+            "regions": {},
+            "selectedRegionId": {},
+            "isKSA": {},
             "parsedFormData": {},
             "showTextArea": {},
             "selectedImage": {},

package/dist/collection/components/salla-order-edit/interfaces.js

@@ -0,0 +1 @@
+export {};