@salla.sa/twilight-components 2.14.352 → 2.14.354

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

@@ -0,0 +1,486 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h } from './index-B74h9G6a.js';
+import { a as anime } from './anime.es-CgtvEd63.js';
+import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
+import { C as Cancel } from './cancel-BsLF_HK7.js';
+
+var Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>images</title>
+<path d="M22.667 29.333h-13.333c-3.676 0-6.667-2.991-6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v13.333c0 5.145 4.187 9.333 9.333 9.333h13.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM22.667 5.333c-2.205 0-4 1.795-4 4s1.795 4 4 4 4-1.795 4-4-1.795-4-4-4zM22.667 10.667c-0.735 0-1.333-0.597-1.333-1.333s0.599-1.333 1.333-1.333 1.333 0.597 1.333 1.333-0.599 1.333-1.333 1.333zM25.333 0h-13.333c-3.676 0-6.667 2.991-6.667 6.667v13.333c0 1.055 0.268 2.040 0.707 2.927 0.039 0.099 0.088 0.188 0.151 0.277 1.137 2.053 3.301 3.463 5.809 3.463h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-3.676-2.991-6.667-6.667-6.667zM12 24c-1.244 0-2.344-0.583-3.077-1.476l5.721-7.047 6.629 8.523zM29.333 20c0 2.205-1.795 4-4 4h-0.68l-8.933-11.485c-0.251-0.32-0.633-0.511-1.039-0.515h-0.015c-0.401 0-0.781 0.181-1.035 0.492l-5.632 6.935v-12.76c0-2.205 1.795-4 4-4h13.333c2.205 0 4 1.795 4 4z"></path>
+</svg>
+`;
+
+var GiftSharing = `<!-- 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>gift-sharing</title>
+<path d="M5 32h-4c-0.552 0-1-0.448-1-1v0-14c0-0.552 0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 14c0 0.552-0.448 1-1 1v0zM2 30h2v-12h-2zM19.32 30h-14.32v-2h14.32c0.693-0.005 1.329-0.242 1.837-0.637l-0.007 0.005 8.45-6.568c0.216-0.16 0.365-0.402 0.399-0.679l0-0.005c0.005-0.036 0.007-0.077 0.007-0.119 0-0.226-0.078-0.434-0.209-0.599l0.002 0.002c-0.16-0.216-0.401-0.364-0.677-0.399l-0.005-0.001c-0.034-0.004-0.073-0.007-0.113-0.007-0.227 0-0.436 0.078-0.601 0.208l0.002-0.002-7.126 5.526c-1.003 0.793-2.285 1.273-3.68 1.274h-6.6v-2h6.6c0.926-0.001 1.777-0.32 2.45-0.852l-0.008 0.006 7.126-5.526c0.492-0.39 1.122-0.625 1.807-0.625 0.135 0 0.268 0.009 0.398 0.027l-0.015-0.002c0.824 0.102 1.534 0.524 2.011 1.137l0.005 0.007c0.39 0.494 0.625 1.127 0.625 1.814 0 0.136-0.009 0.27-0.027 0.402l0.002-0.015c-0.106 0.819-0.529 1.523-1.141 1.995l-0.007 0.005-8.458 6.578c-0.834 0.649-1.894 1.043-3.047 1.050h-0.002zM11 26c-0.552 0-1-0.448-1-1s0.448-1 1-1v0c2.406-0.004 4.415-1.703 4.894-3.967l0.006-0.033h-10.9c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h12c0.552 0 1 0.448 1 1v0c0 3.866-3.134 7-7 7v0zM24 12h-16c-1.105 0-2-0.895-2-2v0-2c0-1.105 0.895-2 2-2v0h16c1.105 0 2 0.895 2 2v0 2c0 1.105-0.895 2-2 2v0zM24 10v0zM8 8v2h16v-2zM23 18c-0.552 0-1-0.448-1-1v0-6c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM9 16c-0.552 0-1-0.448-1-1v0-4c0-0.552 0.448-1 1-1s1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM16 16c-0.552 0-1-0.448-1-1v0-8c0-0.552 0.448-1 1-1s1 0.448 1 1v0 8c0 0.552-0.448 1-1 1v0zM16 8c-0.552-0-1-0.448-1-1 0-0.077 0.009-0.151 0.025-0.223l-0.001 0.007c0.314-1.849 0.963-3.5 1.887-4.961l-0.033 0.055c0.539-0.521 1.274-0.842 2.084-0.842 1.657 0 3 1.343 3 3 0 0.81-0.321 1.545-0.843 2.085l0.001-0.001c-1.405 0.891-3.056 1.541-4.824 1.845l-0.080 0.011c-0.065 0.015-0.139 0.024-0.216 0.024h-0zM19 3c-0.001 0-0.001 0-0.002 0-0.276 0-0.525 0.112-0.706 0.292l0-0c-0.391 0.669-0.703 1.444-0.897 2.264l-0.011 0.058c0.878-0.205 1.653-0.517 2.363-0.93l-0.041 0.022c0.18-0.181 0.292-0.43 0.292-0.706 0-0.551-0.446-0.999-0.998-1h-0zM16 8c-0.077-0-0.151-0.009-0.223-0.025l0.007 0.001c-1.848-0.315-3.499-0.965-4.959-1.888l0.055 0.032c-0.521-0.539-0.842-1.274-0.842-2.084 0-1.657 1.343-3 3-3 0.81 0 1.545 0.321 2.085 0.843l-0.001-0.001c0.891 1.405 1.541 3.056 1.845 4.824l0.011 0.080c0.015 0.066 0.024 0.141 0.024 0.218 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0zM13 3c-0.001 0-0.001 0-0.002 0-0.552 0-1 0.448-1 1 0 0.277 0.112 0.527 0.294 0.708l0 0c0.669 0.391 1.444 0.703 2.264 0.897l0.058 0.011c-0.205-0.878-0.517-1.653-0.93-2.363l0.022 0.041c-0.181-0.181-0.43-0.293-0.706-0.294h-0z"></path>
+</svg>
+`;
+
+var Alert = `<!-- 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>alert</title>
+<path d="M16 13.333c-0.736 0-1.333 0.597-1.333 1.333v8c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-8c0-0.736-0.597-1.333-1.333-1.333zM16 9.327c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM27.313 4.687c-6.237-6.237-16.389-6.239-22.628 0-6.237 6.239-6.237 16.389 0 22.628 3.119 3.119 7.216 4.679 11.313 4.679s8.195-1.559 11.313-4.679c6.24-6.239 6.24-16.391 0.001-22.628zM25.428 25.428c-5.199 5.197-13.657 5.197-18.857 0-5.197-5.199-5.197-13.659 0-18.857 5.199-5.197 13.659-5.197 18.857 0 5.199 5.2 5.199 13.659 0 18.857z"></path>
+</svg>
+`;
+
+const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}";
+
+const SallaGifting = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.defaultEvent = "gifting:open";
+        this.selectImageForYourGift = salla.lang.get('blocks.buy_as_gift.select_image_or_upload');
+        this.currentStep = 1;
+        this.showCalendar = false;
+        this.showGiftText = false;
+        this.currentLang = '';
+        this.parentClass = "is-current-step-1";
+        this.errors = {};
+        this.gift = undefined;
+        this.selectedGiftTextOption = undefined;
+        this.selectedCountryId = undefined;
+        this.selectedCountryCode = undefined;
+        this.loadingCities = false;
+        this.showTextArea = false;
+        /// Gift Form Data
+        this.selectedImage = undefined;
+        this.uploadedImage = undefined;
+        this.selectedText = undefined;
+        this.hasError = false;
+        this.timeZone = null;
+        this.hostId = `salla-gifting-${Math.random().toString(36).slice(2, 10)}`;
+        /**
+         * The form selector to be used to get the form data
+         */
+        this.formSelector = 'form.product-form, form.form--product-options';
+        salla.lang.onLoaded(() => {
+            this.selectImageOrUpload = 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.sectionTitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love');
+            this.sectionSubtitle = salla.lang.get('blocks.buy_as_gift.gift_the_one_you_love_message');
+            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.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');
+            this.nextStep = salla.lang.get('blocks.buy_as_gift.next_step');
+            this.senderNameLabel = salla.lang.get('blocks.buy_as_gift.sender_name');
+            this.receiverNameFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_name');
+            this.receiverMobileFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_mobile');
+            this.receiverCountryFieldLabel = salla.lang.get('blocks.buy_as_gift.receiver_country');
+            this.ksa = salla.lang.get('pages.checkout.ksa');
+            this.selectCity = salla.lang.get('pages.checkout.select_city');
+            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.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');
+            this.selectSendDateAndTime = salla.lang.get('blocks.buy_as_gift.select_send_date_and_time');
+            this.canNotEditOrderAfterSelectDate = salla.lang.get('blocks.buy_as_gift.can_not_edit_order_after_select_date');
+            this.sendGift = salla.lang.get('blocks.buy_as_gift.send_gift');
+            this.donationRequired = salla.lang.get('pages.products.donation_amount_required');
+            this.currentLang = salla.lang.locale;
+        });
+        salla.event.on(this.defaultEvent, () => {
+            this.open();
+        });
+    }
+    componentDidLoad() {
+        salla.event.product.onPriceUpdated(() => {
+            const quantityInput = document.querySelector(`.s-quantity-input-input`);
+            // @ts-ignore
+            this.quantity = quantityInput?.value;
+        });
+    }
+    getFormDataFromForm() {
+        if (!this.formSelector)
+            return null;
+        const form = document.querySelector(this.formSelector);
+        if (!form)
+            return null;
+        return new FormData(form);
+    }
+    mergeObjectToFormData(obj, formData, namespace) {
+        for (let property in obj) {
+            if (!obj.hasOwnProperty(property) || obj[property] === undefined || obj[property] === null)
+                continue;
+            const formKey = namespace ? `${namespace}[${property}]` : property;
+            if (typeof obj[property] === 'object' && obj[property] !== null && !(obj[property] instanceof File)) {
+                this.mergeObjectToFormData(obj[property], formData, formKey);
+            }
+            else {
+                formData.set(formKey, obj[property]);
+            }
+        }
+        return formData;
+    }
+    /**
+     * Show / Open the gifting modal window
+    */
+    async open() {
+        if (salla.config.isGuest()) {
+            salla.api.auth.setAfterLoginEvent(this.defaultEvent);
+            salla.event.dispatch('login::open', { withoutReload: true });
+            return;
+        }
+        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;
+            this.senderName = this.gift.sender_name;
+        })
+            .catch(e => {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => this.modal.stopLoading());
+    }
+    /**
+     *
+     * Hide / close the gifting modal window
+    */
+    async close() {
+        return this.modal.close();
+    }
+    /**
+     * Update the modal height based on the changes on the inner elements height for a specific step OR just a pass a new fixed height
+    */
+    async setWrapperHeight(asStep = 1, delay = 250, additionSpace = 0, newHeight = 0) {
+        let currentStep = document.querySelector(`#${this.hostId} .gift-step-${asStep}`);
+        setTimeout(() => {
+            let currentStepHeight = currentStep.offsetHeight;
+            if (newHeight) {
+                this.stepsWrapper.style.height = `${newHeight}px`;
+            }
+            else {
+                this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
+            }
+        }, delay);
+    }
+    toggleCalendar() {
+        this.showCalendar = !this.showCalendar;
+        this.setWrapperHeight(2, 150, 0);
+    }
+    toggleGiftText(event) {
+        this.textSelect?.classList.remove('s-form-has-error');
+        let dataID = event.target.children[event.target.selectedIndex].getAttribute('data-id');
+        let customID = dataID == "custom";
+        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);
+        }
+    }
+    /**
+     *
+     * 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');
+            return;
+        }
+        else if (this.selectedGiftTextOption == 'custom' && !this.selectedText) {
+            this.textSelect.classList.remove('s-form-has-error');
+            this.customTextArea.classList.add('s-form-has-error');
+            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({
+            targets: this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),
+            opacity: [1, 0],
+            translateX: [0, 50],
+            delay: anime.stagger(70),
+            // easing: 'easeOutExpo',
+            duration: 1200,
+        })
+            .add({
+            targets: '.gift-step-2',
+            translateX: ['-110%', 0],
+            opacity: [0, 1],
+        }, '-=1800')
+            .add({
+            targets: this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),
+            opacity: [0, 1],
+            translateX: [-50, 0],
+            delay: anime.stagger(70),
+            duration: 1200,
+            complete: () => {
+                this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach(item => {
+                    item.classList.remove('opacity-0');
+                    item.removeAttribute('style');
+                });
+            }
+        }, '-=1200');
+        this.currentStep = 2;
+        this.parentClass = `is-current-step-${this.currentStep}`;
+    }
+    /**
+     *
+     * Go to the step 1
+     */
+    goToStep1(e) {
+        e.preventDefault();
+        let stepBackAnime = new anime.timeline({
+            autoplay: false,
+        });
+        stepBackAnime.add({
+            targets: this.step2Elems.querySelectorAll(`#${this.hostId} .anime-item`),
+            opacity: [1, 0],
+            translateX: [0, -50],
+            delay: anime.stagger(70),
+            // easing: 'easeOutExpo',
+            duration: 1200,
+        })
+            .add({
+            targets: '.gift-step-1',
+            translateX: ['110%', 0],
+            opacity: [0, 1],
+        }, '-=1800')
+            .add({
+            targets: this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),
+            opacity: [0, 1],
+            translateX: [50, 0],
+            delay: anime.stagger(70),
+            duration: 1200,
+            complete: () => {
+                this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`).forEach(item => {
+                    item.classList.remove('opacity-0');
+                    item.removeAttribute('style');
+                });
+            }
+        }, '-=1200');
+        stepBackAnime.play();
+        this.setWrapperHeight(1, 600, 0);
+        this.currentStep = 1;
+        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>`;
+    }
+    setPreview(image) {
+        this.uploader?.classList.add('has-bg');
+        var bg = document.querySelector(`#${this.hostId}.filepond-bg`) ? document.querySelector(`#${this.hostId} .filepond-bg`) : document.createElement('div');
+        bg.classList.add('filepond-bg');
+        bg.classList.remove('s-hidden');
+        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) {
+            this.setWrapperHeight(1, 150, 0);
+        }
+    }
+    removePreview() {
+        this.uploader.classList.remove('has-bg');
+        let bg = document.querySelector(`#${this.hostId} .filepond-bg`);
+        bg.removeAttribute('style');
+        bg.classList.add('s-hidden');
+        this.handleRemoveImage();
+    }
+    handleTextAreaChange(event) {
+        this.selectedText = event.target.value;
+        this.customTextArea.classList.remove('s-form-has-error');
+    }
+    handleSenderName(event) {
+        this.senderName = event.target.value;
+    }
+    handleReceiverName(event) {
+        this.receiverName = event.target.value;
+    }
+    handleReceiverCity(event) {
+        this.receiverCity = event.target.value;
+    }
+    async handleCountryChange(event) {
+        const countryId = event.target.value;
+        this.selectedCountryId = countryId;
+        // Find the selected country and store its country_code
+        const selectedCountry = this.gift?.countries?.find(country => country.id == countryId);
+        this.selectedCountryCode = selectedCountry?.country_code;
+        if (!countryId || this.gift?.countries?.length === 0) {
+            this.gift = { ...this.gift, cities: [] };
+            this.receiverCity = undefined;
+            this.selectedCountryCode = undefined;
+            return;
+        }
+        this.loadingCities = true;
+        this.gift = { ...this.gift, cities: [] };
+        this.receiverCity = undefined;
+        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;
+        }
+    }
+    handleUploadImage(img) {
+        this.uploadedImage = img;
+        if (!!this.gift && this.gift.gift_images.length) {
+            this.setWrapperHeight(1, 150, 0);
+        }
+    }
+    handleRemoveImage() {
+        this.uploadedImage = '';
+        if (!!this.gift && this.gift.gift_images.length) {
+            this.setWrapperHeight(1, 150, 0);
+        }
+    }
+    // private handleReceiverEmail(event) {
+    //   this.receiverEmail = event.target.value;
+    // }
+    handlePhoneInputChange(event) {
+        let phone = event.detail;
+        this.receiverMobile = phone.number;
+        this.receiverCountryCode = phone.country_code;
+    }
+    handleDateTimePicker(event) {
+        this.deliveryDate = event.detail;
+    }
+    getCalendarClasses() {
+        return {
+            "s-form-group": true,
+            "anime-item": true,
+            "s-gifting-calendar": true,
+            "shown": this.showCalendar,
+            "hide": !this.showCalendar,
+            "s-form-has-error": !!this.errors && this.errors['deliver_at']
+        };
+    }
+    async submitForm() {
+        // @ts-ignore
+        const donatingAmount = (document.querySelector(`#donating-amount`))?.value;
+        this.calendarFormGroup.classList.remove('s-form-has-error');
+        if (!!this.errors) {
+            this.errors = {};
+            this.setWrapperHeight(2, 150, 0);
+        }
+        if (this.showCalendar && !this.deliveryDate) {
+            this.calendarFormGroup.classList.add('s-form-has-error');
+            return;
+        }
+        // Validate country selection for physical products
+        if (this.physicalProducts && !this.selectedCountryId) {
+            if (!this.errors) {
+                this.errors = {};
+            }
+            this.errors['receiver.country'] = salla.lang.get('common.messages.required_field');
+            this.setWrapperHeight(2, 150, 0);
+            return;
+        }
+        const giftPayload = {
+            text: this.selectedText,
+            sender_name: this.senderName,
+            quantity: this.quantity,
+            deliver_at: this.showCalendar ? this.deliveryDate : null,
+            image_url: this.uploadedImage ?? this.selectedImage,
+            donation_amount: donatingAmount ? donatingAmount : null,
+            receiver: {
+                name: this.receiverName,
+                country_code: this.selectedCountryCode && this.physicalProducts ? this.selectedCountryCode : this.receiverCountryCode,
+                mobile: this.receiverMobile,
+                ...(this.receiverCity && this.physicalProducts ? { city_id: this.receiverCity } : {})
+            },
+            has_apple_pay: salla.helpers.hasApplePay(),
+        };
+        let formData;
+        if (this.productId && this.formSelector) {
+            formData = this.getFormDataFromForm() || new FormData();
+            formData = this.mergeObjectToFormData(giftPayload, formData);
+        }
+        const addGiftMethod = this.productId
+            ? () => salla.product.addProductGiftToCart(this.productId, formData, true)
+            : () => salla.cart.addCartGiftToCart(giftPayload, true);
+        return await addGiftMethod()
+            .then(() => this.modal.close())
+            .catch((e) => {
+            if (e.response && e.response.status == 422) {
+                this.errors = e.response.data.error.fields;
+            }
+            else {
+                console.log(e);
+            }
+            this.setWrapperHeight(2, 150, 0);
+        });
+    }
+    generateClass() {
+        return {
+            "s-gifting-widget": true,
+            "s-gifting-widget-vertical": !!this.vertical,
+            "s-gifting-widget-horizontal": !this.vertical
+        };
+    }
+    async handleGiftButtonClick() {
+        if (!!this.productId && this.formSelector) {
+            const form = document.querySelector(this.formSelector);
+            if (!form) {
+                console.error('SallaGifting:: Form not found in the document!');
+                return;
+            }
+            if (!(form instanceof HTMLFormElement)) {
+                console.error('SallaGifting:: The specified selector does not correspond to a form tag!');
+                return;
+            }
+            if (!form.reportValidity()) {
+                console.error('SallaGifting:: Form is not valid!');
+                salla.error(salla.lang.get('common.messages.required_fields'));
+                return;
+            }
+        }
+        const optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (optionsElement && !(await optionsElement.reportValidity())) {
+            salla.error(salla.lang.get('common.messages.required_fields'));
+            return;
+        }
+        this.open();
+    }
+    render() {
+        return [
+            h("div", { key: '69f449221a2abf8e4d9264b46ab023eb7baca314' }, h("salla-list-tile", { key: '0072bab6171c9b11e54f0c6655c408b12d554e24', class: this.generateClass() }, h("div", { key: '38aa5f8decf6d9c97253c3c16b80a478d623985e', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '37fddbe7a80f38b3acca42220028208cab52ba15' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'b3bf6bff40b60a3fbace637ed69f6aa72853c04b', slot: "subtitle" }, h("div", { key: '46643b7cd897524ca42c41da24e657401f85ab28' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '5129acfd67425ccfad68b3770843f11c9fa55b18', slot: "action" }, h("salla-button", { key: '0e93efc647444a26198e4631614b8590f75f122e', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: 'b88d95a25308cebc29b796bb2b0c25e4fa230406', name: "widget-btn-content" }, h("div", { key: '4cdbaaeb2bc67f056ea348755ffbdfbc831a1a5b', class: "s-gifting-widget-action-content" }, h("span", { key: '7dfec389970416df9be46c8ae5f0904dd64e17ad', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '768f3621011bc3c984dce13ce83b3fb6cceb0171' }, this.sectionBtnText)))))), h("salla-modal", { key: 'b3c94ef80f955b42baecd963f5550f17a80c6fb4', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'c09e12eabff63ba1a781c8980b449f854affc164', slot: "loading" }, h("div", { key: 'dbafa39345c573eae0d045a7d23e346f7068ec0b', class: "s-gifting-skeleton" }, h("div", { key: 'ff247ea5c79b87ca1c76e6035813d7ecb2caeff2', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '1e67bea2f1f957744c4f6f0af83ded347799916e', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '6486434a702624358211c22e7a6b48be16d96c42', class: "s-gifting-modal-title" }, h("div", { key: '688854d37e5ca46fcaa7957d3e72a52d7c706f8d', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9fcbb2086aa25b02effdc873bbfd45087e673de6', height: '15px', width: '150px' })))), h("div", { key: '1b9bf709a01b20e87d68f92f3cb93600214460cd', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: 'ba6b0c87442412398c360da1f6e8b5094812900f', height: '10px', width: '150px' }), h("salla-skeleton", { key: '6583783ace4e2668705c47c4bcac2a33b346a72b', height: '230px' }), h("salla-skeleton", { key: 'c76b038f100072d56a7cedd0438eeacc98bf7b42', height: '10px', width: '150px' }), h("salla-skeleton", { key: '1d331e7be7cd88ea5c108f331626dddc74699ed2', height: '30px' }), h("salla-skeleton", { key: '5cc3d1b8d67b7bf199219099af909591b8a8a869', height: '40px' })))), h("slot", { key: '9dc4c6f3a717e16e3527f9651b05a74ca1a6212c', 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.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.selectedCountryCode || this.receiverCountryCode, key: `tel-input-${this.selectedCountryCode || this.receiverCountryCode || 'default'}`, 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: arrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
+                    ], h("slot", { key: '2ca6746edd5e72c996633b6d0b3ccdc5009198c4', name: "footer" })))
+        ];
+    }
+};
+SallaGifting.style = sallaGiftingCss;
+
+export { SallaGifting as salla_gifting };

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
 
 const SallaHook = class {
     constructor(hostRef) {

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

@@ -0,0 +1,89 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { H as Helper } from './Helper-B5RLi6Xo.js';
+import './anime.es-CgtvEd63.js';
+
+const sallaInfiniteScrollCss = "";
+
+const SallaInfiniteScroll = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Next Page element
+         */
+        this.nextPage = '';
+        /**
+         * Is there is need to autoload next page when scroll `next-page-autoload|next-page.autoload`
+         */
+        this.autoload = false;
+        /**
+         * Class selector to know the container if it's not the host `<salla-infinite-scroll>`
+         */
+        this.container = 'salla-infinite-scroll';
+        /**
+         * Class selector to know list items
+         */
+        this.item = 'salla-infinite-scroll > *';
+        this.status = document.createElement('div');
+        this.status.className = 's-infinite-scroll-wrapper';
+        this.status.innerHTML = `<div class="s-infinite-scroll-status" style="display:none">
+        <p class="s-infinite-scroll-last infinite-scroll-last"></p>
+        <p class="s-infinite-scroll-error infinite-scroll-error"></p>
+      </div>
+      <a href="${this.nextPage}" class="s-infinite-scroll-btn s-button-btn s-button-primary">
+        <span class="s-button-text s-infinite-scroll-btn-text">${this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')}</span>
+        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>
+      </a>`;
+        this.btnLoader = this.status.querySelector('.s-button-loader');
+        salla.lang.onLoaded(() => {
+            this.status.querySelector('.s-button-text').innerHTML = this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more');
+            this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');
+            this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');
+        });
+    }
+    loading(isLoading = true) {
+        let btnText = this.status.querySelector('.s-button-text');
+        Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+        this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+    }
+    render() {
+        return this.nextPage.length > 1 ?
+            h(Host, { class: "s-infinite-scroll-container" }, h("slot", null)) : '';
+    }
+    componentDidLoad() {
+        if (this.nextPage.length === 0) {
+            return;
+        }
+        this.host.insertAdjacentElement('afterend', this.status);
+        let that = this;
+        let infScroll = salla.infiniteScroll.initiate(this.container, {
+            history: this.autoload ? 'push' : false,
+            scrollThreshold: this.autoload ? 400 : false,
+            nextPage: this.nextPage,
+            checkLastPage: 'salla-infinite-scroll[next-page*=":"],salla-infinite-scroll[next-page*="."]',
+            status: '.s-infinite-scroll-status',
+            button: this.status.querySelector('.s-button-btn'),
+            append: this.item,
+            path: function () {
+                return that.nextPage.replace(/page\=(\d)/g, 'page=' + (this.loadCount + 2));
+            },
+        })
+            .on('request', () => this.loading())
+            .on('load', () => {
+            this.loading(false);
+            if (infScroll.pageIndex == 2) {
+                infScroll.option({ loadOnScroll: false });
+            }
+            if (infScroll.pageIndex == 3) {
+                infScroll.option({ loadOnScroll: true });
+            }
+        })
+            .on('error', () => this.loading(false));
+    }
+    get host() { return getElement(this); }
+};
+SallaInfiniteScroll.style = sallaInfiniteScrollCss;
+
+export { SallaInfiniteScroll as salla_infinite_scroll };

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-D2-TtAhI.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.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}";