@salla.sa/twilight-components 2.14.389 → 2.14.391

package/dist/cjs/salla-gifting.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var anime_es = require('./anime.es-BqW8JHZi.js');
 var arrowLeft = require('./arrow-left-xSEmRpp6.js');
 var cancel = require('./cancel-De6vslRA.js');
@@ -46,6 +46,11 @@ const SallaGifting = class {
         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;
@@ -80,6 +85,8 @@ const SallaGifting = class {
             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');
@@ -157,7 +164,7 @@ const SallaGifting = class {
     */
     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`;
@@ -165,7 +172,13 @@ const SallaGifting = class {
             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;
@@ -234,6 +247,7 @@ const SallaGifting = class {
                     item.classList.remove('opacity-0');
                     item.removeAttribute('style');
                 });
+                this.step2Animated = true;
             }
         }, '-=1200');
         this.currentStep = 2;
@@ -275,6 +289,7 @@ const SallaGifting = class {
             }
         }, '-=1200');
         stepBackAnime.play();
+        this.step2Animated = false;
         this.setWrapperHeight(1, 600, 0);
         this.currentStep = 1;
         this.parentClass = `is-current-step-${this.currentStep}`;
@@ -324,23 +339,72 @@ const SallaGifting = class {
         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 };
             }
@@ -350,6 +414,7 @@ const SallaGifting = class {
         }
         finally {
             this.loadingCities = false;
+            this.setWrapperHeight(2, 0, 0);
         }
     }
     handleUploadImage(img) {
@@ -405,6 +470,7 @@ const SallaGifting = class {
             { 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 },
             ] : []),
         ];
@@ -431,6 +497,7 @@ const SallaGifting = class {
                 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(),
@@ -455,6 +522,10 @@ const SallaGifting = class {
             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,
@@ -488,7 +559,7 @@ const SallaGifting = class {
     }
     render() {
         return [
-            index.h("div", { key: '5959120e43b44cd294d9466003422efb26090897' }, index.h("salla-list-tile", { key: '6ba52f5157d734e4c8443a9b4a59703d69eb8e84', class: this.generateClass() }, index.h("div", { key: '26130f1b0e64f7dcc488f2865a19c04c4da28afe', slot: "title" }, this.vertical ? index.h("span", { innerHTML: GiftSharing }) : '', index.h("h3", { key: 'b26949ce590efdeb7d364bbb65f04cc2e58eb396' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), index.h("div", { key: 'bfa36868bc7681aa8fb218dcaa032a414609413c', slot: "subtitle" }, index.h("div", { key: 'b070fb428965fd7f2f58573970d5d0604564f682' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), index.h("div", { key: '343729605e7b97a7a35e63ca26b46ef2b48d5d8e', slot: "action" }, index.h("salla-button", { key: 'f8d6e1d5f60ea02a271b504fd3daa36215e9a8f3', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, index.h("slot", { key: 'c9cc5ec40b0e09aa99e15f464701deb5c9a3f486', name: "widget-btn-content" }, index.h("div", { key: '5b431294450b2c45bc5b3503e022d03872cd4252', class: "s-gifting-widget-action-content" }, index.h("span", { key: '4397140781cf6e311de760e384e1b0f3f429eeeb', innerHTML: GiftSharing }), " \u00A0", index.h("span", { key: 'e993b5010cca3eb5c09ab6abc592d29c149292bb' }, this.sectionBtnText)))))), index.h("salla-modal", { key: '13a1010f08acd0c9ef7bdd4eafd3488ae083b0a4', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, index.h("div", { key: '0eea1fa6d0ea8240d198e8e7fdd68dc7327fa817', slot: "loading" }, index.h("div", { key: '9e98de0165db06a39e51984419cb93dcb4bd40ad', class: "s-gifting-skeleton" }, index.h("div", { key: 'd302e19b737bc272ccece10bfca0eb019b6ca2cf', class: "s-gifting-modal-header" }, index.h("salla-skeleton", { key: '787d98c862475e7a263d4d501842d0b769e9be4a', type: 'circle', height: '5rem', width: '5rem' }), index.h("h2", { key: '86b67bbbe29fe5b1bad587432652f36480269c86', class: "s-gifting-modal-title" }, index.h("div", { key: 'af9eb2262a435ce110e355b75f5c0ebdd2a3acdc', class: "s-gifting-modal-badge-wrapper" }, index.h("salla-skeleton", { key: '9311ddd1eb3afdc7c02530451eafc27bbba8b776', height: '15px', width: '150px' })))), index.h("div", { key: '5c87083930311249c7ea735697c3c7d20be4b2e7', class: "s-gifting-skeleton-content" }, index.h("salla-skeleton", { key: 'f42adea83216bc972863bd56c5ba0b5f02df6eb1', height: '10px', width: '150px' }), index.h("salla-skeleton", { key: '7781766e62dedadff68943e69bc97b54fe6eb22b', height: '230px' }), index.h("salla-skeleton", { key: 'a61810158f2edf8b0f7ed0f44c4985ca1f4b01e7', height: '10px', width: '150px' }), index.h("salla-skeleton", { key: '2f2763deca90fcfe66a462befbfb7072decf63c1', height: '30px' }), index.h("salla-skeleton", { key: '2f34b53353830532c900e70660a81d9124bbc1e8', height: '40px' })))), index.h("slot", { key: 'd6f51bf3ee6a11019d25150e26c45fa80a534c43', name: "header" }), !!this.hasError ?
+            index.h("div", { key: '5d0eec8210f77d166c144704ec78bffcaf1f4ce0' }, index.h("salla-list-tile", { key: '19cc20b4f70bbb8a7d267f60052db77589901962', class: this.generateClass() }, index.h("div", { key: '1c3c52b5ac48e71a6ac26c60494657ac28d16457', slot: "title" }, this.vertical ? index.h("span", { innerHTML: GiftSharing }) : '', index.h("h3", { key: 'e3379fb3ed39d1bc63500346058b26b883c3be13' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), index.h("div", { key: 'f6c2a522727546aa27cef725faa8be082da063da', slot: "subtitle" }, index.h("div", { key: '7b58ad967f39fa2cc660369b72e73f8dc49f90dc' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), index.h("div", { key: '848396dcd6ce6009ebc4cf1a209a055ad1adbf15', slot: "action" }, index.h("salla-button", { key: '2ba69b670f1c958784c6f1dca6b2dd0b93f20859', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, index.h("slot", { key: '6ac9ac339e321fc9433465cfd75f299307ee7152', name: "widget-btn-content" }, index.h("div", { key: 'c61dd36375886c1ecf87f115e5248dca1af7efc9', class: "s-gifting-widget-action-content" }, index.h("span", { key: '0c8a3630ba6b15889fc4bf3d55a1279cdf713400', innerHTML: GiftSharing }), " \u00A0", index.h("span", { key: 'c9299ec752e5393f30a78e1e01d367be9e97ca50' }, this.sectionBtnText)))))), index.h("salla-modal", { key: '9ee17e79f97eee59d25d9627d5b1cd4ada7cadb3', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, index.h("div", { key: 'aba3b6a4d3e903934c9b5e629119c3a3b5bc90ab', slot: "loading" }, index.h("div", { key: 'e03613cc85bf4024f63d2e256a2744ec78f7eabf', class: "s-gifting-skeleton" }, index.h("div", { key: '01156691d540ce5ef5723902610a1da27fba3ddb', class: "s-gifting-modal-header" }, index.h("salla-skeleton", { key: 'e45b4868e4fa5633aeb22f758f75f5412290b179', type: 'circle', height: '5rem', width: '5rem' }), index.h("h2", { key: '2b427d38dd6e0569e16de84ef46eb2052d23b739', class: "s-gifting-modal-title" }, index.h("div", { key: 'c4f9cb6f513e3ebd2e6ad209648a1f70bcafbcb5', class: "s-gifting-modal-badge-wrapper" }, index.h("salla-skeleton", { key: 'e684b682a4cca89262128cca13604b7aa9a83cd7', height: '15px', width: '150px' })))), index.h("div", { key: '2941865d68cd216b4dd82bb8279f6bcbaa062bf3', class: "s-gifting-skeleton-content" }, index.h("salla-skeleton", { key: '7c4f4235a666930ceef3dc0b38809aea5ee5ce5c', height: '10px', width: '150px' }), index.h("salla-skeleton", { key: '0257f401762a11b0bf3da7db603b4e5f57bd1aae', height: '230px' }), index.h("salla-skeleton", { key: 'cced26b189549fcee4eff3a3fbd943a5735b4c6c', height: '10px', width: '150px' }), index.h("salla-skeleton", { key: 'f5893e5c631564c91bfe42c4102190d43f913947', height: '30px' }), index.h("salla-skeleton", { key: '64d3738017cf6732b429848c1de4ca16db1adc06', height: '40px' })))), index.h("slot", { key: '77d5bda8147f7f09d73b97fd7456121626b465a7', name: "header" }), !!this.hasError ?
                 index.h("salla-placeholder", { alignment: "center" }, index.h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), index.h("span", { slot: "description" }, " "))
                 :
                     [
@@ -497,14 +568,18 @@ const SallaGifting = class {
                             index.h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, index.h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
                                 this.gift?.gift_images.map((item) => index.h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, index.h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
                             : ""), index.h("div", { class: "anime-item" }, index.h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, index.h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, index.h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
-                            this.gift?.gift_texts.map((txt) => index.h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', index.h("option", { "data-id": "custom" }, this.giftCustomText))), index.h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, index.h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), index.h("div", { class: "mt-1" }, index.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" })))), index.h("div", { class: "anime-item" }, index.h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, index.h("span", null, this.nextStep)))), index.h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, index.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" }, index.h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), index.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'] ?
-                            index.h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), index.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" }, index.h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), index.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'] ?
-                            index.h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), index.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" }, index.h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), index.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) => index.h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', index.h("option", { "data-id": "custom" }, this.giftCustomText))), index.h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, index.h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), index.h("div", { class: "mt-1" }, index.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" })))), index.h("div", { class: "anime-item" }, index.h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, index.h("span", null, this.nextStep)))), index.h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, index.h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, index.h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), index.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'] ?
+                            index.h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), index.h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, index.h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), index.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'] ?
+                            index.h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), index.h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, index.h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), index.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'] ?
                             index.h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.physicalProducts &&
-                            index.h("div", null, index.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" }, index.h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), index.h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, index.h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (index.h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
-                                index.h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), index.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" }, index.h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), index.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 }, index.h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (index.h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
-                                index.h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), index.h("div", { class: "s-gifting-info anime-item opacity-0" }, index.h("span", { innerHTML: Alert }), index.h("span", null, this.selectCityInfo))), !this.physicalProducts && index.h("div", { class: "anime-item opacity-0" }, index.h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, index.h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), index.h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), index.h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, index.h("label", { class: "s-form-label" }, this.selectSendDateAndTime), index.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) }), index.h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), index.h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, index.h("a", { href: "#!", innerHTML: arrowLeft.arrowLeft, onClick: (e) => this.goToStep1(e) }), index.h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, index.h("span", null, this.sendGift)))))
-                    ], index.h("slot", { key: 'a08d6d434a1d144bd7aa5d3b13754980083a3f4d', name: "footer" })))
+                            index.h("div", { class: this.step2ItemClass(this.errors?.['receiver.country'] ? 's-form-group s-form-has-error' : 's-form-group') }, index.h("label", { class: "s-form-label" }, this.receiverCountryFieldLabel), index.h("select", { name: "country", class: "s-form-control", onChange: (event) => this.handleCountryChange(event), required: true }, index.h("option", { value: "" }, this.selectCountry), this.gift?.countries?.map((country) => (index.h("option", { value: country.id }, country.name)))), this.errors && this.errors['receiver.country'] ?
+                                index.h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), this.physicalProducts && this.isKSA &&
+                            index.h("div", { class: this.step2ItemClass(this.errors?.['receiver.region'] ? 's-form-group s-form-has-error' : 's-form-group') }, index.h("label", { class: "s-form-label" }, this.receiverRegionFieldLabel), index.h("select", { name: "region", class: "s-form-control", onChange: (event) => this.handleRegionChange(event), disabled: this.loadingRegions }, index.h("option", { value: "", selected: true }, this.loadingRegions ? salla.lang.get('common.elements.loading') : this.selectRegion), this.regions?.map((region) => (index.h("option", { value: region.id }, region.name)))), this.errors && this.errors['receiver.region'] ?
+                                index.h("span", { class: "s-gifting-error" }, this.errors['receiver.region']) : ''), this.physicalProducts &&
+                            index.h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, index.h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), index.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) }, index.h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), this.gift?.cities?.map((city) => (index.h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
+                                index.h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.physicalProducts &&
+                            index.h("div", { class: this.step2ItemClass('s-gifting-info') }, index.h("span", { innerHTML: Alert }), index.h("span", null, this.selectCityInfo)), !this.physicalProducts && index.h("div", { class: this.step2ItemClass() }, index.h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, index.h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), index.h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), index.h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, index.h("label", { class: "s-form-label" }, this.selectSendDateAndTime), index.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) }), index.h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), index.h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, index.h("a", { href: "#!", innerHTML: arrowLeft.arrowLeft, onClick: (e) => this.goToStep1(e) }), index.h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, index.h("span", null, this.sendGift)))))
+                    ], index.h("slot", { key: '46da7ff69a3c10b75886a23936f2f9ad8ad0e7bf', name: "footer" })))
         ];
     }
 };

package/dist/cjs/salla-hook.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const SallaHook = class {
     constructor(hostRef) {

package/dist/cjs/salla-infinite-scroll.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-installment.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaInstallmentCss = "salla-installment:empty{display:none}#tabbyPromoWrapper{background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:20px;border:unset !important;font-weight:500}.salla-y #tabbyPromoWrapper{border:1px solid var(--color-grey-dark);border-radius:12px}#tabbyPromoWrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}#tabbyPromoWrapper #tabbyPromo *{font-family:var(--font-main)}#tabbyPromoWrapper #tabbyPromo>div>div{max-width:none;box-shadow:none;border:none}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet{max-width:100%;min-height:100px;padding:18px 20px;border:none !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__text,#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-size:var(--font-sm);color:var(--color-text) !important}#tabbyPromoWrapper #tabbyPromo .tabby-promo-snippet__link{font-weight:bold}.tabby-promo-wrapper #tabby-promo{font-family:var(--font-main) !important}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-title{font-size:var(--font-md)}.tabby-promo-wrapper #tabby-promo .tabby-promo__feature-desc{font-size:var(--font-sm);line-height:20px}.tamara-product-widget{margin-bottom:20px}.tamara-product-widget,.spotii-wrapper{min-height:100px;position:relative;color:var(--main-text-color);font-size:var(--font-sm);line-height:1.25;padding:20px 20px 20px 115px !important;background:white;border-radius:0.375rem;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);border:unset !important;font-family:inherit !important;font-weight:500}.salla-y .tamara-product-widget,.salla-y .spotii-wrapper{border-radius:12px;border:1px solid var(--color-grey-dark)}.tamara-product-widget:hover,.spotii-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.tamara-product-widget .spotii-logo,.spotii-wrapper .spotii-logo{float:left;margin:0 0 0 -75px}.ltr .tamara-product-widget,.ltr .spotii-wrapper{text-align:left;padding:18px 100px 18px 20px !important}.ltr .tamara-product-widget .spotii-logo,.ltr .spotii-wrapper .spotii-logo{float:right;margin:0 -75px 0 0}.ltr .tamara-product-widget .spotii-product-widget,.ltr .spotii-wrapper .spotii-product-widget{text-align:left !important}.spotii-wrapper{margin-bottom:20px}.spotii-wrapper .spotii-promo{font-size:var(--font-md)}.spotii-wrapper .spotii-product-widget{font-size:var(--font-sm) !important;margin-top:10px}.tamara-product-widget .tamara-logo{position:absolute;left:20px !important;top:35px !important;margin:0 !important;height:24px !important}.ltr .tamara-product-widget .tamara-logo{right:20px !important;left:auto !important}.tamara-product-widget span{font-family:var(--font-main);font-size:var(--font-sm);color:var(--color-text)}.tamara-product-widget span:last-child{display:block;position:relative;margin-top:8px}.tamara-popup__wrap{overflow:auto !important}.s-installment-mispay-wrapper,.s-installment-madfu-wrapper,.s-installment-emkan-wrapper,.s-installment-rajehi-wrapper{font-size:14px;text-align:right;padding:20px;gap:42px;line-height:22px;color:rgb(0, 0, 0);min-width:100%;box-sizing:border-box;position:relative;background-color:white;border-radius:10px;margin:15px 0;display:flex;transition:box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.s-installment-mispay-wrapper:hover,.s-installment-madfu-wrapper:hover,.s-installment-emkan-wrapper:hover,.s-installment-rajehi-wrapper:hover{box-shadow:0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 5px 10px 30px rgba(43, 45, 52, 0.0509803922)}.s-installment-mispay-content,.s-installment-madfu-content,.s-installment-emkan-content,.s-installment-rajehi-content{display:flex;flex-direction:row-reverse;width:100%;justify-content:space-between;align-items:center;gap:1rem}.s-installment-mispay-content-text,.s-installment-madfu-content-text,.s-installment-emkan-content-text,.s-installment-rajehi-content-text{color:var(--main-text-color);font-size:14px;font-weight:500;margin:0 16px 0 0;width:80%;left:14px;text-align:left}.s-installment-mispay-content img,.s-installment-madfu-content img,.s-installment-emkan-content img,.s-installment-rajehi-content img{height:28px;width:70px;display:inline-block;max-height:100%;vertical-align:middle;fill:none;stroke:unset;width:auto}.rtl .s-installment-mispay-content-text,.rtl .s-installment-madfu-content-text,.rtl .s-installment-emkan-content-text,.rtl .s-installment-rajehi-content-text{right:14px;text-align:right;margin:0 0 0 16px}.rtl .s-installment-mispay-content img,.rtl .s-installment-madfu-content img,.rtl .s-installment-emkan-content img,.rtl .s-installment-rajehi-content img{left:14px !important}.ltr .s-installment-mispay-content img,.ltr .s-installment-madfu-content img,.ltr .s-installment-emkan-content img,.ltr .s-installment-rajehi-content img{right:14px !important}.s-installment-rajehi-content img{width:70px !important;height:40px !important}.s-installment-emkan-content img{height:35px !important}";
 

package/dist/cjs/salla-list-tile.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaListTileCss = "";
 

package/dist/cjs/salla-localization-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const SallaLocalizationModal = class {
     constructor(hostRef) {

package/dist/cjs/salla-login-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaLoginModalCss = "iframe{-moz-transition:height 0.3s;-ms-transition:height 0.3s;-o-transition:height 0.3s;-webkit-transition:height 0.3s;transition:height 0.3s;width:100%}";
 

package/dist/cjs/salla-loyalty-prize-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaLoyaltyPrizeItemCss = "salla-loyalty-prize-item:hover{box-shadow:0 5px 15px 1px rgba(0, 0, 0, 0.04) !important}";
 

package/dist/cjs/salla-loyalty-program.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var gift = require('./gift-CJ-3Yw_x.js');
 
 const sallaLoyaltyProgramCss = "";

package/dist/cjs/salla-loyalty.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var star2 = require('./star2-R146a27p.js');
 var cancel = require('./cancel-De6vslRA.js');
 

package/dist/cjs/salla-maintenance-alert.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var cancel = require('./cancel-De6vslRA.js');
 
 const sallaMaintenanceAlertCss = ".s-maintenance-alert-wrapper{display:flex;min-height:40px;width:100%;flex-direction:row;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(26, 38, 61, var(--tw-bg-opacity));padding:0.25rem 0.5rem;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.s-maintenance-alert-wrapper a{transition:0.35s cubic-bezier(0.2, 1, 0.3, 1)}.s-maintenance-alert-wrapper *{color:inherit}@media (min-width: 640px){.s-maintenance-alert-wrapper{padding-left:2rem;padding-right:2rem}}.s-maintenance-alert-content{margin-top:1rem;margin-bottom:1rem;display:flex;width:100%;align-items:center;justify-content:space-between}@media (min-width: 640px){.s-maintenance-alert-content{padding-left:2rem;padding-right:2rem}}.s-maintenance-alert-container{display:flex;align-items:center}.s-maintenance-alert-icon{margin-right:1.25rem;display:none}@media (min-width: 640px){.s-maintenance-alert-icon{display:block}}.s-maintenance-alert-text h2{margin-bottom:0.5rem;font-size:0.875rem;font-weight:700;line-height:1.4}@media (min-width: 640px){.s-maintenance-alert-text h2{font-size:1.5rem;line-height:2rem}}.s-maintenance-alert-text p{margin:0px;text-align:right;font-size:10px;line-height:1.2}@media (min-width: 640px){.s-maintenance-alert-text p{text-align:center;font-size:0.75rem;line-height:1}}.s-maintenance-alert-btn{position:relative;margin-left:4px;margin-right:4px;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;border-radius:0.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgba(93, 213, 196, var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(93, 213, 196, var(--tw-bg-opacity));padding:0.5rem;text-align:center;vertical-align:middle;font-size:0.875rem;font-weight:400;line-height:1.4;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.s-maintenance-alert-btn:hover{--tw-bg-opacity:1;background-color:rgba(53, 203, 181, var(--tw-bg-opacity))}.s-maintenance-alert-btn *{pointer-events:none}[dir=rtl] .s-maintenance-alert-btn{margin-left:1.25rem;margin-right:0}@media (min-width: 640px){.s-maintenance-alert-btn{padding:0.5rem 1rem}}";

package/dist/cjs/{salla-accordion-body_3.cjs.entry.js → salla-map.cjs.entry.js}

@@ -3,63 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
-var minus = require('./minus-CCryh1qf.js');
+var index = require('./index-RCgJUM7B.js');
 var location = require('./location-DIyESLuI.js');
 
-const sallaAccordionBodyCss = "";
-
-const SallaAccordionBody = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h(index.Host, { key: '298d42a5bf1bcefdb181ec35060220cf749b56ed', class: "s-accordion-body-wrapper" }, index.h("slot", { key: '6ab081e8b71b5dc69fb66fbdec82b4725ab53b0d' })));
-    }
-};
-SallaAccordionBody.style = sallaAccordionBodyCss;
-
-const sallaAccordionHeadCss = "";
-
-const SallaAccordionHead = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.accordionToggle = index.createEvent(this, "accordionToggle");
-        /** Should the accordion be collapsible or not. */
-        this.collapsible = false;
-        /** Current collapsed state */
-        this.collapsed = true;
-    }
-    emitCollapsePanel() {
-        this.accordionToggle.emit({
-            payload: {
-                collapsed: this.collapsed,
-            },
-        });
-    }
-    toggleCollapse() {
-        if (!this.collapsible)
-            return;
-        this.collapsed = !this.collapsed;
-        this.host.parentElement?.setAttribute('data-collapsed', this.collapsed.toString());
-        this.host.parentElement
-            ?.querySelector('salla-accordion-body')
-            ?.setAttribute('data-collapsed', this.collapsed.toString());
-        this.emitCollapsePanel();
-    }
-    render() {
-        return (index.h(index.Host, { key: '9d88d243306cdf451c20d7068fbb9f48807b22e9', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, index.h("div", { key: 'bad4c5a913ce1c4581b09c0b6d96fcbdb4236638', class: "s-accordion-head-wrapper-start" }, index.h("slot", { key: 'acb83cec8cbca5771a9f84e81c0b955c3edad731', name: "title" }), index.h("slot", { key: 'a4ad42ea6fad4f452c4c218a9ee02dca0adb4a67', name: "progress" }), index.h("slot", { key: '96ab95d413dc906ac299079f4008816f01881990', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (index.h("div", { key: '8f9666a5038cd7b1ac6e357c6920ea26d31c5f03', class: "s-accordion-head-wrapper-end" }, index.h("slot", { key: '14895e8c1385e91c14f046c9ae38ce5e4a4c9a60', name: "note" }), this.collapsible && (index.h("button", { key: '97dc7fabbb207fcc8b68ebf0a86f6c8a980dca13', class: {
-                's-accordion-head-wrapper-toggle': true,
-                active: !this.collapsed,
-            }, onClick: e => {
-                e.stopPropagation();
-                this.toggleCollapse();
-            } }, index.h("span", { key: '3b24faf71dcd332663a354310b2ce09f7879eddc', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? minus.plusIcon : minus.minusIcon })))))));
-    }
-    get host() { return index.getElement(this); }
-};
-SallaAccordionHead.style = sallaAccordionHeadCss;
-
 var Edit = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>edit</title>
@@ -764,6 +710,4 @@ const SallaMap = class {
 };
 SallaMap.style = sallaMapCss;
 
-exports.salla_accordion_body = SallaAccordionBody;
-exports.salla_accordion_head = SallaAccordionHead;
 exports.salla_map = SallaMap;

package/dist/cjs/salla-menu.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaMenuCss = ":host{display:block}";
 

package/dist/cjs/salla-metadata.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaMetadataCss = "";
 

package/dist/cjs/salla-multiple-bundle-product-cart_2.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaMultipleBundleProductCartCss = "";
 

package/dist/cjs/salla-multiple-bundle-product-options-modal_2.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var keyboard_arrow_right = require('./keyboard_arrow_right-BayM_Il2.js');
 
 const sallaMultipleBundleProductOptionsModalCss = ":host{display:block}";

package/dist/cjs/salla-multiple-bundle-product.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaMultipleBundleProductCss = ":host{display:block}";
 

package/dist/cjs/salla-notification-item.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaNotificationsCss = "";
 

package/dist/cjs/salla-notifications.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var Helper = require('./Helper-CU4Xuiki.js');
 require('./anime.es-BqW8JHZi.js');
 

package/dist/cjs/salla-offer-modal.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 var specialDiscount = require('./special-discount-DC2oXurL.js');
 
 var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-offer.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 var PageType;
 (function (PageType) {

package/dist/cjs/salla-order-details-multiple-bundle-product.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

package/dist/cjs/salla-order-details-options.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 var copyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/cjs/salla-order-details.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-CZzG9P8m.js');
+var index = require('./index-RCgJUM7B.js');
 
 const sallaOrderDetailsCss = "";