/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h } from './index-Cb4NFvMH.js';
import { a as anime } from './anime.es-CgtvEd63.js';
import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
import { S as SICancel } from './cancel-8Tsmrwno.js';
import { S as SIGiftSharing } from './gift-sharing-0-eTJXSD.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 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.loadingRegions = false;
        this.regions = [];
        this.selectedRegionId = undefined;
        this.isKSA = false;
        this.step2Animated = false;
        this.showTextArea = false;
        /// Gift Form Data
        this.selectedImage = undefined;
        this.uploadedImage = undefined;
        this.selectedText = undefined;
        this.hasError = false;
        this.timeZone = null;
        this.receiverCountryCode = salla.config.get('store.scope.countries')?.[0] || salla.config.get('store.store_country') || 'SA';
        this.hostId = `salla-gifting-${Math.random().toString(36).slice(2, 10)}`;
        /**
         * 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.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');
            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();
        });
    }
    isPhysical() {
        return this.physicalProducts || this.physical;
    }
    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}`);
        const updateHeight = () => {
            let currentStepHeight = currentStep.offsetHeight;
            if (newHeight) {
                this.stepsWrapper.style.height = `${newHeight}px`;
            }
            else {
                this.stepsWrapper.style.height = currentStepHeight + additionSpace + 'px';
            }
        };
        if (this.step2Animated && asStep === 2) {
            requestAnimationFrame(updateHeight);
        }
        else {
            setTimeout(updateHeight, 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');
                });
                this.step2Animated = true;
            }
        }, '-=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.step2Animated = false;
        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');
    }
    clearError(key) {
        if (this.errors?.[key]) {
            const { [key]: _, ...rest } = this.errors;
            this.errors = rest;
        }
    }
    handleSenderName(event) {
        this.senderName = event.target.value;
        this.clearError('sender_name');
    }
    handleReceiverName(event) {
        this.receiverName = event.target.value;
        this.clearError('receiver.name');
    }
    handleReceiverCity(event) {
        this.receiverCity = event.target.value;
        this.clearError('receiver.city_id');
    }
    async handleCountryChange(event) {
        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.selectedCountryCode = undefined;
            this.isKSA = false;
            this.setWrapperHeight(2, 0, 0);
            return;
        }
        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=${this.selectedCountryId}&region_id=${regionId}`);
            if (response && response.data) {
                this.gift = { ...this.gift, cities: response.data };
            }
        }
        catch (error) {
            console.error('Error fetching cities:', error);
        }
        finally {
            this.loadingCities = false;
            this.setWrapperHeight(2, 0, 0);
        }
    }
    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;
        this.clearError('receiver.mobile');
    }
    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 required fields
        const requiredFields = [
            { key: 'sender_name', value: this.senderName, label: this.senderNameLabel },
            { key: 'receiver.name', value: this.receiverName, label: this.receiverNameFieldLabel },
            { key: 'receiver.mobile', value: this.receiverMobile, label: this.receiverMobileFieldLabel },
            ...(this.isPhysical() ? [
                { 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 },
            ] : []),
        ];
        const validationErrors = {};
        requiredFields.forEach(({ key, value, label }) => {
            if (!value) {
                validationErrors[key] = salla.lang.get('common.errors.field_required', { attribute: label });
            }
        });
        if (Object.keys(validationErrors).length) {
            this.errors = validationErrors;
            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,
                mobile_country_code: this.receiverCountryCode,
                mobile: this.receiverMobile,
                ...(this.isPhysical() && this.selectedCountryCode ? { country_code: this.selectedCountryCode } : {}),
                ...(this.isPhysical() && this.selectedRegionId ? { region_id: this.selectedRegionId } : {}),
                ...(this.receiverCity && this.isPhysical() ? { 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);
        });
    }
    step2ItemClass(extra = '') {
        const base = `anime-item${this.step2Animated ? '' : ' opacity-0'}`;
        return extra ? `${extra} ${base}` : base;
    }
    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: 'f20cc2c84e987b34bb862f72a8f639894ed4150e' }, h("salla-list-tile", { key: 'c52aa5e975f9ed1707c3175fa66109f447749ee7', class: this.generateClass() }, h("div", { key: '2bf7065f32132dde95dacfdea44e34c08cc4e61c', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '7a9a70b6841a708c322f5bb729e940e4da823261' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'c346f2baa8e6a1adf9b0f89e9b50d236e65116cb', slot: "subtitle" }, h("div", { key: '26c908af9687b0c77554054212f5c8251dc45bf3' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'f91bf3811c383773425af74941a2067e2f62dbb7', slot: "action" }, h("salla-button", { key: '0639c4b9cc4d81f300f6b087e1c10815b1610c75', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '06567fa7406ae6502e8f3211ecab6161c4a7e397', name: "widget-btn-content" }, h("div", { key: 'f895900d17947b006f6aef4695b855eba4737ed2', class: "s-gifting-widget-action-content" }, h("span", { key: 'bd3170b8efa2a0c95f61718afd69e5473adae20a', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: 'cdc3d1df35ad0e7334bc289f9fff2d312d709724' }, this.sectionBtnText)))))), h("salla-modal", { key: 'a98b913100edfa92156baeee766f6141818ebd8b', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '6b438c581e600cbcfeb5260bae8371a1fbefa29c', slot: "loading" }, h("div", { key: 'ada9e9bb0355755eade9ff7846334cb5ae093e6f', class: "s-gifting-skeleton" }, h("div", { key: '11d2e41b6acb933f5b006cc9f0b0b46470892c6a', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '141be7d6aa83fed682f8ab6a3708597dbb4dba11', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '65eba6244b5507397c8e50ef40f695e7eebe0b96', class: "s-gifting-modal-title" }, h("div", { key: '0f2488d19d2de0a728377b9f475b70073f6f196a', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'b648340418099246c8b83b308f116412fdb6cbc9', height: '15px', width: '150px' })))), h("div", { key: '8255e53b49f572ef3c4485cf7e84540dac019f89', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '0b05db8e76a9a53032b1643d8c4e223b8b641e30', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'c585bf04433e46ce8e89d9bfc3402faf4cfbb21a', height: '230px' }), h("salla-skeleton", { key: '0c09063b73e3aecb6a1879cdc93b60a6bcb9b2cc', height: '10px', width: '150px' }), h("salla-skeleton", { key: '88f55e5ffded2f784002b44e49f3ab2d22a7c067', height: '30px' }), h("salla-skeleton", { key: '6e1edd3b031f051ec24149ec690d2e4f04f9c557', height: '40px' })))), h("slot", { key: 'bff6a067b10a31c39f22e18c6bdf5a60f56ef116', 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: SIGiftSharing })), 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: SICancel }), this.selectImageOrUpload && h("salla-file-upload", { "instant-upload": true, name: "image_url", url: salla.url.api(salla.product.api.getUrl('giftImage')), onUploaded: event => this.handleUploadImage(event.detail), labelIdle: this.getFilepondPlaceholder(), onRemoved: () => this.handleRemoveImage() })), h("div", { class: "anime-item" }, !this.uploadedImage && !!this.gift && !!this.gift.gift_images && this.gift.gift_images.length > 0 ?
                            h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
                                this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { style: { "width": "120px" }, src: item.url, alt: `${item.id}` }))) : ''))
                            : ""), h("div", { class: "anime-item" }, h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
                            this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', h("option", { "data-id": "custom" }, this.giftCustomText))), h("div", { class: this.showGiftText ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))), h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2() }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
                            h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
                            h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
                            h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.isPhysical() &&
                            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.isPhysical() && 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.isPhysical() &&
                            h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, 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.isPhysical() &&
                            h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, h("a", { href: "#!", innerHTML: arrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
                    ], h("slot", { key: '4cad8b174ab427e6f75b77357efc20e54d791ba4', name: "footer" })))
        ];
    }
};
SallaGifting.style = sallaGiftingCss;

export { SallaGifting as salla_gifting };
