@salla.sa/twilight-components 2.14.352 → 2.14.354

package/dist/esm/salla-add-product-button_4.entry.js

@@ -0,0 +1,2384 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, e as axios } from './index-B74h9G6a.js';
+import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
+import { B as BellRing } from './bell-ring-D3mWkc-3.js';
+import { H as Helper } from './Helper-B5RLi6Xo.js';
+import { i as iconCheck } from './check-BsXh13x8.js';
+import { C as CameraIcon } from './camera-C6jIkM-X.js';
+import './anime.es-CgtvEd63.js';
+
+var WalletIcon = `<!-- 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>full-wallet</title>
+<path d="M29 12h-26c-0.668-0.008-1.284-0.226-1.787-0.59l0.009 0.006c-0.744-0.552-1.222-1.428-1.222-2.416 0-1.657 1.343-3 2.999-3h6c0.552 0 1 0.448 1 1s-0.448 1-1 1v0h-6c-0.552 0-1 0.448-1 1 0 0.326 0.156 0.616 0.397 0.798l0.002 0.002c0.167 0.12 0.374 0.194 0.599 0.2l0.001 0h26c0.552 0 1 0.448 1 1s-0.448 1-1 1v0zM27 12c-0.552 0-1-0.448-1-1v0-3h-3c-0.552 0-1-0.448-1-1s0.448-1 1-1v0h4c0.552 0 1 0.448 1 1v0 4c0 0.552-0.448 1-1 1v0zM29 30h-26c-1.657 0-3-1.343-3-3v0-18c0-0.552 0.448-1 1-1s1 0.448 1 1v0 18c0 0.552 0.448 1 1 1v0h25v-5c0-0.552 0.448-1 1-1s1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM29 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 1v0zM31 24h-7c-2.209 0-4-1.791-4-4s1.791-4 4-4v0h7c0.552 0 1 0.448 1 1v0 6c0 0.552-0.448 1-1 1v0zM24 18c-1.105 0-2 0.895-2 2s0.895 2 2 2v0h6v-4zM25 12c-0.001 0-0.001 0-0.002 0-0.389 0-0.726-0.222-0.891-0.546l-0.003-0.006-3.552-7.106-2.306 1.152c-0.13 0.066-0.284 0.105-0.447 0.105-0.552 0-1-0.448-1-1 0-0.39 0.223-0.727 0.548-0.892l0.006-0.003 3.2-1.6c0.13-0.067 0.284-0.106 0.447-0.106 0.39 0 0.727 0.223 0.892 0.548l0.003 0.006 4 8c0.067 0.13 0.106 0.285 0.106 0.448 0 0.552-0.448 1-1 1v0zM21 12c-0.001 0-0.001 0-0.002 0-0.389 0-0.726-0.222-0.891-0.546l-0.003-0.006-3.552-7.106-15.104 7.552c-0.13 0.066-0.284 0.105-0.447 0.105-0.552 0-1-0.448-1-1 0-0.39 0.223-0.727 0.548-0.892l0.006-0.003 16-8c0.13-0.067 0.284-0.106 0.447-0.106 0.39 0 0.727 0.223 0.892 0.548l0.003 0.006 4 8c0.067 0.13 0.106 0.285 0.106 0.448 0 0.552-0.448 1-1 1-0.001 0-0.001 0-0.002 0h0z"></path>
+</svg>
+`;
+
+const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
+
+const SallaAddProductButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.success = createEvent(this, "success");
+        this.failed = createEvent(this, "failed");
+        this.hostAttributes = {};
+        /**
+         * Has Pre Order
+         */
+        this.hasPreOrder = false;
+        /**
+         *  Product Status.Defaults to `sale`
+         */
+        this.productStatus = 'sale';
+        /**
+         * Product type. Defaults to `product`
+         */
+        this.productType = 'product';
+        this.selectedOptions = [];
+        this.buyNowText = salla.lang.get('pages.products.buy_now');
+        /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed) */
+        this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
+        this.viewportMediaQuery = null;
+        this.onViewportChange = (e) => {
+            this.isDesktopViewport = e.matches;
+            this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
+        };
+        salla.lang.onLoaded(() => {
+            this.buyNowText = salla.lang.get('pages.products.buy_now');
+        });
+    }
+    getLabel() {
+        if (this.productStatus === 'sale' && this.supportStickyBar && !this.isDesktopViewport && this.showQuickBuy && this.isApplePayActive) {
+            return PendingOrdersIcon;
+        }
+        if (this.hasPreOrder) {
+            return salla.lang.get('pages.products.pre_order_now');
+        }
+        if (this.productStatus === 'sale' && this.productType === 'booking') {
+            return salla.lang.get('pages.cart.book_now');
+        }
+        if (this.productStatus === 'sale') {
+            return salla.lang.get('pages.cart.add_to_cart');
+        }
+        if (this.productType !== 'donating') {
+            return salla.lang.get('pages.products.out_of_stock');
+        }
+        // donating
+        return salla.lang.get('pages.products.donation_exceed');
+    }
+    addProductToCart(event) {
+        if (this.productType === 'booking') {
+            event.preventDefault();
+            return this.addBookingProduct();
+        }
+        // we want to ignore the click action when the type of button is submit a form
+        if (this.hostAttributes.type === 'submit') {
+            return false;
+        }
+        event.preventDefault();
+        this.btn?.disable();
+        // Validate product options explicitly on Add to Cart click
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (optionsEl && typeof optionsEl.validateAndScroll === 'function') {
+            return optionsEl.validateAndScroll()
+                .then(async (isValid) => {
+                // Call validate hook
+                const ctx = { isValid, component: this };
+                await salla.hooks.call('salla-add-product-button', 'validate', ctx);
+                if (!ctx.isValid) {
+                    this.btn?.enable();
+                    return;
+                }
+                return this._proceedAddToCart();
+            })
+                .catch(() => {
+                this.btn?.enable();
+            });
+        }
+        // Fallback if options component not found
+        return this._proceedAddToCart();
+    }
+    async _proceedAddToCart() {
+        /**
+         * by default the quick add is just an alias for add item function
+         * but its work only when the id is the only value is passed via the object
+         * so we will filter the object entities to remove null and zero values in case we don't want the normal add item action
+         */
+        const data = Object.entries({
+            id: this.productId,
+            donation_amount: this.donatingAmount,
+            quantity: this.quantity,
+            endpoint: 'quickAdd'
+        }).reduce((a, [k, v]) => (v ? (a[k] = v, a) : a), {});
+        // Use the potentially modified data
+        return salla.cart.addItem(data)
+            .then(async (response) => {
+            this.selectedOptions = [];
+            this.btn?.enable();
+            this.success.emit(response);
+            return response;
+        })
+            .catch(error => { this.failed.emit(error); this.btn?.enable(); });
+    }
+    addBookingProduct() {
+        if (salla.config.isGuest()) {
+            salla.auth.api.setAfterLoginEvent('booking::add', this.productId);
+            salla.event.dispatch('login::open');
+            return;
+        }
+        return salla.booking.add(this.productId)
+            .then(resp => this.success.emit(resp))
+            .catch(error => this.failed.emit(error));
+    }
+    getBtnAttributes() {
+        for (let i = 0; i < this.host.attributes.length; i++) {
+            if (!['id', 'class'].includes(this.host.attributes[i].name)) {
+                this.hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+            }
+        }
+        return this.hostAttributes;
+    }
+    getQuickBuyBtnAttributes() {
+        return {
+            ...this.getBtnAttributes(),
+            type: this.supportStickyBar && !this.isDesktopViewport ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy'
+        };
+    }
+    miniCheckoutWidget() {
+        let storeId = salla.config.get('store.id');
+        if (!storeId) {
+            return;
+        }
+        return h("salla-mini-checkout-widget", { language: salla.lang.locale, "store-id": storeId, config: { user: salla.config.get('user'), failure_url: window.location.href }, products: [this.productId], api: salla.config.get('store.api'), outline: true, "form-selector": "form.product-form", class: "s-add-product-button-mini-checkout" }, h("div", { slot: "widget-label", class: "s-add-product-button-mini-checkout-content" }, h("span", { innerHTML: WalletIcon }), this.buyNowText));
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => {
+            // this to fix not added hydrated class to html element after components loaded
+            document.documentElement.classList.add('hydrated');
+            this.showQuickBuy = this.quickBuy
+                && salla.config.get('store.settings.buy_now')
+                && this.productStatus == 'sale'
+                && this.productType !== 'booking';
+            this.isApplePayActive = window.ApplePaySession?.canMakePayments()
+                && salla.config.get('store.settings.payments')?.includes('apple_pay')
+                && salla.config.get('store.settings.is_salla_gateway', false);
+            this.passedLabel = this.host.innerHTML.replace('<!---->', '').trim();
+            if (!!this.passedLabel && this.isDesktopViewport) {
+                return this.btn?.setText(this.passedLabel);
+            }
+            if (this.host.getAttribute('type') === 'submit' && this.supportStickyBar) {
+                this.viewportMediaQuery = window.matchMedia('(min-width: 768px)');
+                this.viewportMediaQuery.addEventListener('change', this.onViewportChange);
+            }
+        });
+    }
+    render() {
+        //TODO:: find a better fix, this is a patch for issue that duplicates the buttons more than twice @see the screenshot inside this folder
+        if (this.host.closest('.swiper-slide')?.classList.contains('swiper-slide-duplicate')) {
+            return '';
+        }
+        if (this.hasSubscribedOptions) {
+            return h(Host, null, h("salla-product-availability", { ...this.getBtnAttributes(), "is-subscribed": true }, h("span", { class: "s-hidden" }, h("slot", null))));
+        }
+        if ((this.productStatus === 'out-and-notify' && this.channels) || this.hasOutOfStockOption) {
+            return h(Host, null, h("salla-product-availability", { ...this.getBtnAttributes() }, h("span", { class: "s-hidden" }, h("slot", null))));
+        }
+        return h(Host, { class: {
+                's-add-product-button-with-quick-buy': this.showQuickBuy,
+                's-add-product-button-with-sticky-bar': this.supportStickyBar,
+                's-add-product-button-with-apple-pay': this.showQuickBuy && this.isApplePayActive
+            } }, h("div", { class: {
+                's-add-product-button-main': this.showQuickBuy,
+                'w-full': !document.getElementById('fast-checkout-js') || ['financial_support', 'donating'].includes(this.productType) // This is a temporary fix until all themes fully support the fast checkout -- To be removed later
+            } }, h("salla-button", { color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale', ...this.getBtnAttributes(), "loader-position": "center" }, h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? this.miniCheckoutWidget() : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", { ...this.getQuickBuyBtnAttributes() }) : '');
+    }
+    async componentDidLoad() {
+        // Register this component for hooks system, already on it logic to run componentDidLoad trigger
+        await Salla.hooks.registerComponent('salla-add-product-button', this);
+        if (!this.notifyOptionsAvailability) {
+            return;
+        }
+        salla.event.on('product-options::change', async (data) => {
+            if (!['thumbnail', 'color', 'single-option'].includes(data.option.type)) {
+                return;
+            }
+            this.hasSubscribedOptions = false;
+            this.selectedOptions = await document.querySelector(`salla-product-options[product-id="${this.productId}"]`)?.getSelectedOptions();
+            this.hasOutOfStockOption = await document.querySelector(`salla-product-options[product-id="${this.productId}"]`)?.hasOutOfStockOption();
+            let subscribedDetails = salla.storage.get(`product-${this.productId}-subscribed-options`);
+            if (!subscribedDetails && !this.subscribedOptions || !this.hasOutOfStockOption) {
+                return;
+            }
+            if (salla.config.isGuest()) {
+                const parsedSubscribedDetails = subscribedDetails ? subscribedDetails.map(ids => ids.split(',').map(id => parseInt(id))) : [];
+                this.hasSubscribedOptions = parsedSubscribedDetails.length > 0 && parsedSubscribedDetails.some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id)));
+            }
+            else {
+                this.hasSubscribedOptions = this.subscribedOptions && this.subscribedOptions !== 'null' && this.subscribedOptions !== '[]' ? JSON.parse(this.subscribedOptions).some(ids => ids.every(id => this.selectedOptions.some(option => option.id === id))) : false;
+            }
+        });
+    }
+    componentDidRender() {
+        //if label not passed, get label
+        if (!!this.passedLabel && (!this.supportStickyBar || this.isDesktopViewport)) {
+            // if passed label, set it
+            this.btn?.setText(this.passedLabel);
+            return;
+        }
+        this.btn?.setText(this.getLabel());
+        salla.lang.onLoaded(() => this.btn?.setText(this.getLabel()));
+    }
+    disconnectedCallback() {
+        this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
+    }
+    get host() { return getElement(this); }
+};
+SallaAddProductButton.style = sallaAddProductButtonCss;
+
+const sallaProductAvailabilityCss = "";
+
+const SallaProductAvailability = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isUser = salla.config.isUser();
+        this.translationLoaded = false;
+        /**
+         * Listen to product options availability.
+         */
+        this.notifyOptionsAvailability = false;
+        /**
+         * is current user already subscribed
+         */
+        this.isSubscribed = false;
+        this.handleSubmitOptions = async () => {
+            let payload = { id: this.productId };
+            if (!this.notifyOptionsAvailability) {
+                return payload;
+            }
+            let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+            let options = Object.values(await optionsElement?.getSelectedOptionsData() || {});
+            //if all options not selected, show message && throw exception
+            if (options.length && !await optionsElement?.reportValidity()) {
+                let errorMessage = salla.lang.get('common.messages.required_fields');
+                salla.error(errorMessage);
+                throw errorMessage;
+            }
+            payload.options = [];
+            options.forEach(option => {
+                //inject numbers only, without zeros
+                if (option && !isNaN(option)) {
+                    payload.options.push(Number(option));
+                }
+            });
+            return payload;
+        };
+        // helpers
+        this.typing = (e) => {
+            const error = e.target.nextElementSibling;
+            e.target.classList.remove('s-has-error');
+            error?.classList.contains('s-product-availability-error-msg') && (error.innerText = '');
+            e.keyCode === 13 && this.submit();
+        };
+        salla.lang.onLoaded(() => {
+            this.translationLoaded = true;
+            this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+            this.modal?.setTitle(this.title_);
+        });
+        if (!this.productId) {
+            this.productId = salla.config.get('page.id');
+        }
+        if (this.isUser)
+            return;
+        this.channelsWatcher(this.channels);
+        this.title_ = this.host.title || salla.lang.get('pages.products.notify_availability_title');
+        this.host.removeAttribute('title');
+        //todo:: fix this to cover options too
+        this.isVisitorSubscribed = !this.notifyOptionsAvailability ? salla.storage.get(`product-${this.productId}-subscribed`) : '';
+    }
+    channelsWatcher(newValue) {
+        this.channels_ = !!newValue ? newValue.split(',') : [];
+    }
+    openModel() {
+        this.handleSubmitOptions().then(isSuccess => isSuccess ? this.modal.open() : null);
+    }
+    async submit() {
+        let payload = await this.handleSubmitOptions();
+        if (this.isUser) {
+            return salla.api.product.availabilitySubscribe(payload)
+                .then(() => this.isSubscribed = true);
+        }
+        if (this.channels_.includes('sms')) {
+            let { phone, countryCode } = await this.mobileInput.getValues();
+            payload['country_code'] = countryCode;
+            payload['phone'] = phone;
+        }
+        if (this.channels_.includes('email')) {
+            this.email.value !== '' && (payload['email'] = this.email.value);
+        }
+        await this.validateform();
+        return this.btn.load()
+            .then(() => this.btn.disable())
+            .then(() => salla.api.product.availabilitySubscribe(payload))
+            .then(() => {
+            if (!this.notifyOptionsAvailability) {
+                salla.storage.set(`product-${this.productId}-subscribed`, true);
+                this.isSubscribed = true;
+                return;
+            }
+            if (payload.options.length) {
+                let options = salla.storage.get(`product-${this.productId}-subscribed-options`) || [];
+                let selectedOptionsString = payload.options.join(',');
+                if (!options.includes(selectedOptionsString)) {
+                    options.push(selectedOptionsString);
+                    salla.storage.set(`product-${this.productId}-subscribed-options`, options);
+                    this.isSubscribed = true;
+                }
+                else {
+                    salla.log('already subscribed to this options');
+                }
+            }
+        })
+            .then(() => this.btn.stop())
+            .then(() => this.modal.close())
+            .catch(() => this.btn.stop() && this.btn.enable());
+    }
+    async validateform() {
+        try {
+            if (this.channels_.includes('email')) {
+                const isEmailValid = Helper.isValidEmail(this.email.value);
+                if (isEmailValid)
+                    return;
+                !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
+            }
+            if (this.channels_.includes('sms')) {
+                const isPhoneValid = await this.mobileInput.isValid();
+                if (isPhoneValid)
+                    return;
+            }
+        }
+        catch (error) {
+            throw ('Please insert required fields');
+        }
+    }
+    validateField(field, errorMsg) {
+        field.classList.add('s-has-error');
+        field.nextElementSibling['innerText'] = '* ' + errorMsg;
+    }
+    render() {
+        return (h(Host, { key: 'e5b3121a6e352338ff666ba419100150e838e0d2', class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
+            ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
+            :
+                h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
+    }
+    renderModal() {
+        return (h("salla-modal", { ref: modal => this.modal = modal, "modal-title": this.title_, subTitle: salla.lang.get('pages.products.notify_availability_subtitle'), width: "sm" }, h("span", { slot: 'icon', class: "s-product-availability-header-icon", innerHTML: BellRing }), h("div", { class: "s-product-availability-body" }, this.channels_.includes('email') ? [
+            h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
+            h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
+            h("span", { class: "s-product-availability-error-msg" })
+        ] : '', this.channels_.includes('sms') ? [
+            h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
+            h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
+        ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "channels": ["channelsWatcher"]
+    }; }
+};
+SallaProductAvailability.style = sallaProductAvailabilityCss;
+
+var DisplayType;
+(function (DisplayType) {
+    DisplayType["COLOR"] = "color";
+    DisplayType["DATE"] = "date";
+    DisplayType["DATETIME"] = "datetime";
+    DisplayType["DONATION"] = "donation";
+    DisplayType["IMAGE"] = "image";
+    DisplayType["MULTIPLE_OPTIONS"] = "multiple-options";
+    DisplayType["NUMBER"] = "number";
+    DisplayType["SINGLE_OPTION"] = "single-option";
+    DisplayType["DIGITAL_CARD_VALUE"] = "digital-code-value";
+    DisplayType["COUNTRY"] = "country";
+    DisplayType["SPLITTER"] = "splitter";
+    DisplayType["TEXT"] = "text";
+    DisplayType["TEXTAREA"] = "textarea";
+    DisplayType["THUMBNAIL"] = "thumbnail";
+    DisplayType["TIME"] = "time";
+    DisplayType["RADIO"] = "radio";
+    DisplayType["CHECKBOX"] = "checkbox";
+    DisplayType["MAP"] = "map";
+    DisplayType["FILE"] = "file";
+    DisplayType["COLOR_PICKER"] = "color_picker";
+    DisplayType["BOOKING"] = "booking";
+})(DisplayType || (DisplayType = {}));
+var Currency;
+(function (Currency) {
+    Currency["Sar"] = "SAR";
+})(Currency || (Currency = {}));
+
+var FileIcon = `<!-- 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>file-upload</title>
+<path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>
+</svg>
+`;
+
+const sallaProductOptionsCss = "";
+
+const SallaProductOptions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changed = createEvent(this, "changed");
+        this.fileTypes = {
+            pdf: 'application/pdf',
+            png: 'image/png',
+            jpg: 'image/jpeg',
+            word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            txt: 'text/plain',
+        };
+        this.outOfStockText = "";
+        this.donationAmount = salla.lang.get('pages.products.donation_amount');
+        this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+        this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        this.isCustomDonation = false;
+        this.selectedOptions = [];
+        this.canDisabled = false;
+        this.disableCardValue = true;
+        this.availableDigitalCardValues = [];
+        this.userInitiatedValidation = false;
+        this.isCartMode = false;
+        this.outSkus = [];
+        /**
+       * Avoid selection of previous default or selected card value option
+       * when switching between digital card country options for the 1st time
+       */
+        this.ignoreDefaultCardValue = false;
+        /**
+         * The id of the product to which the options are going to be fetched for.
+         */
+        this.productId = salla.config.get('page.id');
+        this.handleDonationOptions = (event, detail, type, _option) => {
+            // Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
+            if (detail === 'custom' && type === 'input') {
+                const inputTarget = event.target;
+                salla.helpers.inputDigitsOnly(inputTarget);
+                salla.event.emit('product-options::donation-changed', {
+                    id: this.productId,
+                    price: inputTarget.value
+                });
+                inputTarget.dispatchEvent(new window.Event('change', { bubbles: true }));
+                return;
+            }
+            // Tab (radio) change: get value from the radio that fired.
+            const value = type === 'option' ? String(event.target?.value ?? '') : '';
+            if (type === 'option' && detail === 'custom') {
+                // "Custom" tab: stop propagation so form does not see change until user types in donating-amount input.
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            }
+            this.isCustomDonation = value === 'custom';
+            if (this.donationInput) {
+                if (value === 'custom') {
+                    this.donationInput.value = '';
+                    this.donationInput.focus();
+                }
+                else {
+                    this.donationInput.value = value;
+                }
+                if (detail === 'custom') {
+                    return;
+                }
+                salla.event.emit('product-options::donation-changed', {
+                    id: this.productId,
+                    price: value
+                });
+            }
+        };
+        this.hideLabel = (option) => {
+            if (option.type === DisplayType.DONATION && (option.donation && !option.donation.can_donate)) {
+                return true;
+            }
+            return false;
+        };
+        this.getExpireDonationMessage = (option) => {
+            if (!option.donation) {
+                return;
+            }
+            const completed = option.donation.target_amount <= option.donation.collected_amount;
+            return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", { innerHTML: completed ? salla.money(option.donation.target_amount) : '' }));
+        };
+        salla.lang.onLoaded(() => {
+            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        });
+        if (this.options) {
+            try {
+                this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));
+                return;
+            }
+            catch (e) {
+                salla.log('Bad json passed via options prop');
+            }
+        }
+        if (!Array.isArray(this.optionsData)) {
+            salla.log('Options is not an array[] ---> ', this.optionsData);
+            this.setOptionsData([]);
+        }
+        if (this.productId && !salla.url.is_page('cart')) {
+            salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));
+        }
+    }
+    /**
+     * Sets the options data for the product
+     * @param optionsData - Array of product options
+     */
+    async setOptionsData(optionsData) {
+        this.optionsData = optionsData;
+        const that = this;
+        this.optionsData[0]?.details?.forEach(function (detail) {
+            Object.entries(detail.skus_availability || {})
+                .filter(sku => !sku[1])
+                .map(sku => that.outSkus.push(Number(sku[0])));
+        });
+    }
+    /**
+     * Get the id's of the selected options.
+     * */
+    async getSelectedOptionsData() {
+        const selectedOptions = {};
+        const formData = this.host.getElementSallaData();
+        // Check if bundleContext is defined as a prop on the component before accessing it
+        const contextData = (typeof this.bundleContext !== 'undefined') ? this.bundleContext : null;
+        formData.forEach((value, key) => {
+            if (contextData) {
+                // Handle bundle naming convention: bundle[sectionId][index][options][optionId]
+                if (key.startsWith('bundle[') && key.includes('[options][')) {
+                    const optionId = key.split('[options][')[1].replace(']', '');
+                    selectedOptions[optionId] = value;
+                }
+            }
+            else {
+                // Handle standard naming convention: options[optionId]
+                if (key.startsWith('options[')) {
+                    selectedOptions[key.replace('options[', '').replace(']', '')] = value;
+                }
+            }
+        });
+        return selectedOptions;
+    }
+    /**
+     * Report options form validity.
+     * */
+    async reportValidity() {
+        const requiredElements = this.host.querySelectorAll('[required]');
+        let pass = true;
+        for (let i = 0; i < requiredElements.length; i++) {
+            //if there is only one invalid option, return false
+            if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {
+                pass = false;
+            }
+        }
+        return pass;
+    }
+    /**
+     * Return true if there is any out of stock options are selected and vise versa.
+     * */
+    async hasOutOfStockOption() {
+        return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));
+    }
+    /**
+     * Get selected options.
+     * */
+    async getSelectedOptions() {
+        return this.selectedOptions;
+    }
+    /**
+     * Get a specific option by its id.
+     * */
+    async getOption(option_id) {
+        return this.optionsData.find(option => option.id === option_id);
+    }
+    // @ts-ignore
+    invalidHandler(event, option) {
+        const closestProductOption = event.target.closest('.s-product-options-option');
+        if (!closestProductOption.classList.contains('s-product-options-option-error')) {
+            closestProductOption.classList.add('s-product-options-option-error');
+        }
+        if ((this.userInitiatedValidation || salla.helpers.isIOSDevice()) && !salla.url.is_page('cart')) {
+            const firstInvalidElement = this.host.querySelector('.s-product-options-option-error');
+            if (firstInvalidElement === closestProductOption) {
+                this.scrollToElement(closestProductOption);
+            }
+        }
+    }
+    scrollToElement(element) {
+        if (!element)
+            return;
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+    changedHandler(event, option, fireChangeEvent = true) {
+        const data = {
+            event: event,
+            option: option,
+            detail: null,
+            productId: this.productId
+        };
+        if (option.details) {
+            const detail = option.details.find((detail) => {
+                return Number(detail.id) === Number(event.target.value);
+            });
+            data.detail = detail;
+        }
+        if (option.type === 'country') {
+            this.handleCountryOptionChange(event, data.detail);
+        }
+        const optionElement = event.target.closest('.s-product-options-option');
+        if (event.target.value ||
+            ((option.type === DisplayType.FILE || option.type === DisplayType.IMAGE) && event.type === 'added') ||
+            (option.type === DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {
+            setTimeout(() => {
+                optionElement.classList.remove('s-product-options-option-error');
+            }, 200);
+        }
+        if (option.type === DisplayType.DONATION) {
+            salla.event.emit('product-options::donation-changed', {
+                id: this.productId,
+                price: event.target.value
+            });
+        }
+        this.setSelectedSkus();
+        this.handleRequiredMultipleOptions(option);
+        const index = this.selectedOptions.findIndex(opt => opt.option_id === data.option.id);
+        if (data.option.type === DisplayType.MULTIPLE_OPTIONS) {
+            // Handle multiple selections
+            const detailIndex = this.selectedOptions.findIndex(opt => opt.option_id === data.option.id && opt?.id === data.detail?.id);
+            if (detailIndex > -1) {
+                // If the option is already selected, remove it (unselect)
+                this.selectedOptions.splice(detailIndex, 1);
+            }
+            else {
+                // If the option is not selected, add it to the selectedOptions array
+                this.selectedOptions.push({ ...data.detail, option_id: data.option.id });
+            }
+        }
+        else {
+            // Handle single selection
+            if (!data.detail || Object.keys(data.detail).length === 0) {
+                // If there is no value for the single-select, remove it from the selectedOptions array
+                if (index > -1) {
+                    this.selectedOptions.splice(index, 1);
+                }
+            }
+            else {
+                // If a value exists, update or add the selection
+                if (index > -1) {
+                    // Replace the existing selection with the new one
+                    this.selectedOptions[index] = { ...data.detail, option_id: data.option.id };
+                }
+                else {
+                    // If no selection exists for this input, add the new selection
+                    this.selectedOptions.push({ ...data.detail, option_id: data.option.id });
+                }
+            }
+        }
+        // Update optionsData directly
+        this.optionsData = this.optionsData.map(opt => {
+            if (opt.id === data.option.id) {
+                return {
+                    ...opt,
+                    details: opt.details.map(detail => ({
+                        ...detail,
+                        is_selected: data.option.type === DisplayType.MULTIPLE_OPTIONS
+                            ? this.selectedOptions.some(selected => selected.id === detail.id)
+                            : Number(detail.id) === Number(data.detail?.id),
+                        value: data.detail?.value
+                    }))
+                };
+            }
+            return opt;
+        });
+        // Emit the event only if fireChangeEvent is true
+        if (fireChangeEvent) {
+            this.changed.emit(data);
+            salla.event.emit('product-options::change', data);
+        }
+    }
+    /**
+     * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;
+     */
+    setSelectedSkus() {
+        this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
+            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .map(sku => Number(sku));
+    }
+    handleRequiredMultipleOptions(option) {
+        if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
+            return;
+        }
+        const optionContainer = this.host.querySelector(`[data-option-id="${option.id}"]`);
+        const hasChecked = optionContainer.querySelectorAll('input:checked').length;
+        optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));
+    }
+    getLatLng(value, type) {
+        return value
+            ? value.split(',')[type === 'lat' ? 0 : 1]
+            : '';
+    }
+    getDisplayForType(option) {
+        if (this[`${option.type}Option`]) {
+            return this[`${option.type}Option`](option);
+        }
+        if (option.type === DisplayType.COLOR_PICKER) {
+            return this.colorPickerOption(option);
+        }
+        if (option.type === DisplayType.MULTIPLE_OPTIONS) {
+            return this.multipleOptions(option);
+        }
+        if (option.type === DisplayType.SINGLE_OPTION) {
+            return this.singleOption(option);
+        }
+        // Handle radio type as single option for bundle products
+        if (option.type === DisplayType.RADIO) {
+            return this.radioOption(option);
+        }
+        if (option.type === DisplayType.DIGITAL_CARD_VALUE) {
+            return this.digitalCardValuesOption(option);
+        }
+        if (option.type === DisplayType.COUNTRY) {
+            return this.countryOption(option);
+        }
+        if (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) {
+            return h("salla-booking-field", { onInvalidInput: (e) => this.invalidHandler(e, option), option: option, productId: option.value });
+        }
+        salla.log(`Couldn't find options type(${option.type})😢`);
+        return '';
+    }
+    getOptionShownWhen(option) {
+        return option.visibility_condition
+            ? { "data-show-when": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }
+            : {};
+    }
+    getAvailableDigitalCardSKUs(detail) {
+        const digitalCardOption = this.optionsData.find(({ type }) => type === 'digital-code-value');
+        if (!digitalCardOption)
+            throw new Error('product-options:: No digital card options found');
+        const outofStockSKUs = Object.keys(detail.skus_availability).filter(key => detail.skus_availability[key] === false);
+        this.availableDigitalCardValues = digitalCardOption.details.filter((op) => {
+            return !Object.keys(op.skus_availability).filter(SKU_key => outofStockSKUs.includes(SKU_key)).length;
+        });
+    }
+    handleCountryOptionChange(event, detail) {
+        event.stopImmediatePropagation();
+        this.ignoreDefaultCardValue = true;
+        const currentCardValue = this.host.querySelector("input[data-code-value]:checked");
+        if (currentCardValue)
+            currentCardValue.checked = false;
+        const digitalCardOption = this.optionsData.find(({ type }) => type === 'digital-code-value');
+        if (!digitalCardOption)
+            throw new Error('product-options:: No digital card options found');
+        this.getAvailableDigitalCardSKUs(detail);
+    }
+    getSelectedDigitalCardOptions(option) {
+        const selectedOption = option.details.find(detail => detail.is_selected);
+        const defaultOption = option.details.find(detail => !!detail.is_default) || option.details[0]; /*option.details[0] only applys for counrty options*/
+        if (!['digital-code-value', 'country'].includes(option.type))
+            return;
+        return selectedOption || defaultOption;
+    }
+    //we need the cart Id for productOption Image
+    async componentWillLoad() {
+        if (salla.url.is_page("cart")) {
+            this.disableCardValue = false;
+            this.fillSelectedOptions();
+        }
+        if (this.config) {
+            try {
+                this.optionConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+            }
+            catch (error) {
+                console.error('Failed to parse JSON in config prop:', error);
+            }
+        }
+        const shouldSelectDefaultOption = this.optionsData.filter(({ type }) => ["country", "digital-card-value"].includes(type)).length > 0 && salla.url.is_page('cart');
+        if (shouldSelectDefaultOption) {
+            const countryOption = this.optionsData.find(option => option.type === 'country');
+            const defaultSelection = countryOption && this.getSelectedDigitalCardOptions(countryOption);
+            if (defaultSelection) {
+                this.getAvailableDigitalCardSKUs(defaultSelection);
+            }
+        }
+        this.outOfStockText = salla.lang.get('pages.products.out_of_stock');
+        await salla.onReady();
+        this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability') || salla.url.is_page('cart');
+        this.pasteHandler = this.handlePaste.bind(this);
+        document.addEventListener("paste", this.pasteHandler);
+        const needsCartId = (!salla.storage.get('cart.id') && this.optionsData.some(option => ['file', 'image'].includes(option.type)));
+        return needsCartId ? salla.api.cart.getCurrentCartId(false, "salla-product-options") : null;
+    }
+    disconnectedCallback() {
+        if (this.pasteHandler) {
+            document.removeEventListener("paste", this.pasteHandler);
+        }
+    }
+    /**
+     * This is a workaround for a bug in iOS 26 Safari, when pasting English text to RTL inputs, it adds extra text!!
+     * To avoid any break changes, we will make it only work on these conditions:
+     *  - content_copyright is on
+     *  - Apple Pay is enabled (means it's iOS/safari)
+     *  - Input is an input or textarea
+     *  - Salla form control
+     *  - Options array
+     */
+    handlePaste(event) {
+        const target = event.target;
+        if (!Salla.helpers.isAppleDevice()
+            || !(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
+            || !target.classList.contains('s-form-control')
+            || !this.host.contains(target)) {
+            return;
+        }
+        // Prevent default paste (to avoid Safari inserting extra content)
+        event.preventDefault();
+        // Read only the clipboard data
+        const text = event.clipboardData?.getData("text") || "";
+        // Insert it manually at cursor if you want
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        const newValue = target.value.slice(0, start) + text + target.value.slice(end);
+        target.value = newValue;
+        // Reset cursor position
+        target.setSelectionRange(start + text.length, start + text.length);
+        try {
+            target.dispatchEvent(new window.Event('change', { bubbles: true }));
+        }
+        catch (error) {
+            Salla.log('Error on change');
+        }
+    }
+    hideDigitalCardsOptions(option) {
+        return (this.disableCardValue && option.type === DisplayType.DIGITAL_CARD_VALUE && !salla.url.is_page("cart"));
+    }
+    render() {
+        if (this.optionsData?.length === 0) {
+            return;
+        }
+        return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
+            this.splitterOption()
+            : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputId(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
+    }
+    generateUniqueKey(defaultValue) {
+        const contextData = this.bundleContext;
+        let baseKey = this.uniqueKey ? `${defaultValue}-${this.uniqueKey}` : defaultValue;
+        if (contextData) {
+            try {
+                // Handle both string and object types
+                const context = typeof contextData === 'string'
+                    ? JSON.parse(contextData)
+                    : contextData;
+                const { sectionId, productId } = context;
+                baseKey = `${baseKey}-bundle-${sectionId}-${productId}`;
+            }
+            catch (e) {
+                // If parsing fails, just use the base key
+            }
+        }
+        return baseKey;
+    }
+    /**
+     * Generate a valid HTML id for option inputs.
+     * @param optionId - The option ID
+     * @returns The formatted id string
+     */
+    generateInputId(optionId) {
+        return this.generateUniqueKey(`option-${optionId}`);
+    }
+    /**
+     * Generate the correct input name based on bundle context
+     * @param optionId - The option ID
+     * @returns The formatted input name
+     */
+    generateInputName(optionId) {
+        const contextData = this.bundleContext;
+        const baseOptionId = optionId.toString();
+        if (contextData) {
+            try {
+                // Handle both string and object types
+                const context = typeof contextData === 'string'
+                    ? JSON.parse(contextData)
+                    : contextData;
+                const { sectionId, productId } = context;
+                return `bundle[${sectionId}][${productId}][options][${baseOptionId}]`;
+            }
+            catch (e) {
+                return `options[${baseOptionId}]`;
+            }
+        }
+        return `options[${baseOptionId}]`;
+    }
+    fillSelectedOptions() {
+        this.selectedOptions = this.optionsData.reduce((acc, opt) => {
+            const selectedDetails = opt.details.filter(detail => detail.is_selected);
+            const mappedDetails = selectedDetails.map(detail => ({
+                ...detail,
+                option_id: opt.id
+            }));
+            return acc.concat(mappedDetails);
+        }, []);
+    }
+    async componentDidLoad() {
+        if (!this.optionsData?.length) {
+            return;
+        }
+        // Register for hooks — theme can call enterCartMode() here
+        await Salla.hooks.registerComponent('salla-product-options', this);
+        // Handle donation options
+        const selectedDonationOption = this.optionsData.find(option => option.type === DisplayType.DONATION)?.details?.find(detail => detail.is_selected);
+        if (selectedDonationOption) {
+            setTimeout(() => {
+                salla.event.emit('product-options::donation-changed', {
+                    id: this.productId,
+                    price: selectedDonationOption.additional_price
+                });
+            }, 1000);
+        }
+        // Handle pre-selected options on product page
+        // Skip if in cart mode (enterCartMode called by hook) or on cart page
+        // Call salla.product.getPrice() directly to avoid triggering form validation which causes unwanted scroll
+        if (!salla.url.is_page("cart") && !this.isCartMode) {
+            const pricingOptionTypes = [
+                DisplayType.SINGLE_OPTION,
+                DisplayType.MULTIPLE_OPTIONS,
+                DisplayType.COLOR,
+                DisplayType.THUMBNAIL,
+                DisplayType.DONATION,
+                DisplayType.DIGITAL_CARD_VALUE,
+                DisplayType.COUNTRY
+            ];
+            const hasPreSelectedPricingOption = this.optionsData.some(option => pricingOptionTypes.includes(option.type) &&
+                option.details?.some(detail => detail.is_selected));
+            if (hasPreSelectedPricingOption) {
+                // Use requestAnimationFrame to ensure DOM is fully painted before accessing form
+                requestAnimationFrame(() => {
+                    try {
+                        const form = this.host.closest('form');
+                        if (!form)
+                            return;
+                        // Validate form belongs to this product to avoid conflicts on complex pages
+                        const formData = new FormData(form);
+                        const formProductId = formData.get('id') || formData.get('product_id');
+                        if (formProductId && String(formProductId) !== String(this.productId))
+                            return;
+                        salla.product.getPrice(formData);
+                    }
+                    catch (e) {
+                        salla.log('Error updating price for pre-selected options:', e);
+                    }
+                });
+            }
+        }
+    }
+    /**
+     * Switch the component to cart-item mode: fill selected options,
+     * enable disabled-out-of-stock, and skip product price updates.
+     * Used by themes when treating a product page as a cart item editor.
+     */
+    async enterCartMode() {
+        this.isCartMode = true;
+        this.disableCardValue = false;
+        this.canDisabled = true;
+        this.fillSelectedOptions();
+    }
+    /**
+     * Enable user-initiated validation mode so invalid fields will scroll into view
+     */
+    async enableUserInitiatedValidation() {
+        this.userInitiatedValidation = true;
+    }
+    /**
+     * Validate options and trigger scrolling to the first invalid option if any
+     */
+    async validateAndScroll() {
+        await this.enableUserInitiatedValidation();
+        return this.reportValidity();
+    }
+    //@ts-ignore
+    donationOption(option, product) {
+        return h("div", { class: "s-product-options-donation-wrapper" }, option.donation?.can_donate ? [
+            option.donation ?
+                h("div", { key: option.id, class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
+                : '',
+            option.details.length ?
+                [h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option', option) }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
+                        h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option', option) }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
+                        : '')] : '',
+            h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
+                    && option.details.some(detail => detail.is_selected)
+                    ? option.details.find(detail => detail.is_selected).additional_price
+                    : option.value,
+                // required
+                placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input', option), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
+        ] :
+            this.getExpireDonationMessage(option));
+    }
+    fileUploader(option, additions = null) {
+        return h("salla-file-upload", { ...(additions || {}), "payload-name": "file", value: option.value, "instant-upload": true, name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }, h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept?.split(',').every(type => type.includes('image'))
+                ? CameraIcon
+                : FileIcon }), h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
+    }
+    //@ts-ignore
+    imageOption(option) {
+        return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });
+    }
+    //@ts-ignore
+    fileOption(option) {
+        const types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
+        return types?.length
+            ? this.fileUploader(option, { accept: types.join(',') })
+            : 'File types not selected.';
+    }
+    // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption
+    //@ts-ignore
+    numberOption(option) {
+        return h("input", { type: "text", value: option.value, class: "s-form-control", required: !option.visibility_condition && option.required, id: this.generateInputId(option.id), name: this.generateInputName(option.id), placeholder: option.placeholder, onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+    }
+    //@ts-ignore
+    splitterOption() {
+        return h("div", { class: "s-product-options-splitter" });
+    }
+    //@ts-ignore
+    textOption(option) {
+        return h("div", { class: "s-product-options-text" }, h("input", { type: "text", value: option.value, maxLength: option?.length, class: 's-form-control', required: !option.visibility_condition && option.required, id: this.generateInputId(option.id), name: this.generateInputName(option.id), placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option) }));
+    }
+    //@ts-ignore
+    textareaOption(option) {
+        //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
+        return h("div", { class: "s-product-options-textarea" }, h("div", { class: "mt-1" }, h("textarea", { rows: 4, value: option.value, maxLength: option?.length, class: "s-form-control", required: !option.visibility_condition && option.required, id: this.generateInputId(option.id), name: this.generateInputName(option.id), placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) })));
+    }
+    //@ts-ignore
+    mapOption(option) {
+        return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: this.generateInputName(option.id), searchable: true, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
+    }
+    colorPickerOption(option) {
+        return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
+    }
+    /**
+     * ============= Date Time options =============
+     */
+    //@ts-ignore
+    timeOption(option) {
+        return h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), class: "s-product-options-time-element", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
+    }
+    //@ts-ignore
+    dateOption(option) {
+        //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
+        return h("div", { class: "s-product-options-date-element" }, h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, minDate: new Date(), name: this.generateInputName(option.id), onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+    }
+    //@ts-ignore
+    datetimeOption(option) {
+        //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
+        return h("div", { class: "s-product-options-datetime-element" }, h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), maxDate: option.to_date_time, minDate: option.from_date_time, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+    }
+    /**
+     * ============= Advanced options =============
+     */
+    getOptionDetailName(detail, outOfStock = true, optionType) {
+        let detailName;
+        if (optionType && optionType === DisplayType.COLOR) {
+            detailName = detail.name
+                + ((outOfStock && this.isOptionDetailOut(detail) && !salla.url.is_page("cart")) && !this.hideOutLabel ? ` <br/> <p> ${this.outOfStockText} </p>` : '')
+                + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price, false)}) </p>` : '');
+        }
+        if (!detailName) {
+            detailName = detail.name
+                + ((outOfStock && this.isOptionDetailOut(detail) && !salla.url.is_page("cart")) && !this.hideOutLabel ? ` - ${this.outOfStockText}` : '')
+                + (detail.additional_price ? ` (${salla.money(detail.additional_price, false)})` : '');
+        }
+        //Some merchants adding price to the names of the options,
+        //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
+        return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
+    }
+    isOptionDetailOut(detail) {
+        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
+            return detail.is_out;
+        }
+        const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
+        //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
+        if (isDetailSelected && this.selectedOptions.length === 1) {
+            return false;
+        }
+        //if current details has sku in the possible outSkus it's out for sure
+        if (isDetailSelected) {
+            //here we will get the possible outSkus for current selected options
+            const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
+            return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
+        }
+        return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+    }
+    /**
+     * Renders a single input element (radio or checkbox) for an option detail.
+     * @param type - The type of input element ('radio' or 'checkbox').
+     * @param detail - The detail object representing an option detail.
+     * @param option - The parent option object containing the details.
+     * @param isRequired - Indicates if the input is required based on the option's rules.
+     * @param name - The name attribute for the input element.
+     * @returns HTMLElement - A labeled input element.
+     */
+    renderInput(type, detail, option, isRequired, name, buttonStyle) {
+        const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
+        const isDisabled = this.isOptionDetailOut(detail);
+        return (h("label", { class: {
+                "s-product-options-disabled": isDisabled,
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: { "s-product-options-grid-mode-span": buttonStyle, "s-product-options-disabled": isDisabled } }, this.getOptionDetailName(detail))));
+    }
+    /**
+     * Renders a collection of input elements for all details of an option.
+     * @param type - The type of input elements ('radio' or 'checkbox').
+     * @param option - The parent option object containing the details.
+     * @param isRequired - Indicates if the inputs are required based on the option's rules.
+     * @returns HTMLElement[] - An array of labeled input elements.
+     */
+    renderOptionDetails(type, option, isRequired, buttonStyle = false) {
+        const baseName = this.generateInputName(option.id);
+        const name = type === 'radio' ? baseName : `${baseName}[]`;
+        return option?.details.map((detail) => this.renderInput(type, detail, option, isRequired, name, buttonStyle));
+    }
+    /**
+     * Renders a dropdown (select) element for a single-option selection.
+     * @param option - The parent option object.
+     * @returns HTMLElement - A select dropdown element with all option details.
+     */
+    renderSelect(option) {
+        return (h("div", null, h("select", { id: this.generateInputId(option.id), name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option?.details.map((detail) => (h("option", { key: detail.id, value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail)))))));
+    }
+    /**
+     * Renders a grid-based layout for option inputs (radio or checkbox).
+     * @param type - The type of input elements ('radio' or 'checkbox').
+     * @param option - The parent option object containing the details.
+     * @param isRequired - Indicates if the inputs are required based on the option's rules.
+     * @returns HTMLElement - A grid-based container with input elements.
+     */
+    renderButtonStyle(type, option, isRequired) {
+        return (h("div", { class: "s-product-options-grid-mode" }, this.renderOptionDetails(type, option, isRequired, true)));
+    }
+    /**
+     * Renders a single-option selection, either as a grid or dropdown, based on configuration.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered single-option element.
+     */
+    singleOption(option) {
+        const buttonStyle = this.optionConfig?.['single-option']?.type === 'button';
+        const isRequired = !option.visibility_condition && option.required;
+        return buttonStyle
+            ? this.renderButtonStyle('radio', option, isRequired)
+            : this.renderSelect(option);
+    }
+    /**
+     * Renders a multiple-option selection, either as a grid or list, based on configuration.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered multiple-option element.
+     */
+    multipleOptions(option) {
+        const buttonStyle = this.optionConfig?.['multiple-option']?.type === 'button';
+        const isRequired = option.required &&
+            !option.details.some((detail) => detail.is_selected) &&
+            !option.visibility_condition;
+        return buttonStyle
+            ? this.renderButtonStyle('checkbox', option, isRequired)
+            : (h("div", { class: {
+                    's-product-options-multiple-options-wrapper': true,
+                    required: option.required,
+                } }, this.renderOptionDetails('checkbox', option, isRequired)));
+    }
+    /**
+     * Renders a radio option selection (used for bundle products).
+     * This is essentially the same as single option but with explicit radio handling.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered radio option element.
+     */
+    radioOption(option) {
+        // Radio options behave the same as single options
+        return this.singleOption(option);
+    }
+    //@ts-ignore
+    colorOption(option) {
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`) }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+    }
+    //@ts-ignore
+    thumbnailOption(option) {
+        return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
+            return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: iconCheck, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+                [
+                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                ]
+                : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
+        }));
+    }
+    // Digital card options
+    digitalCardValuesOption(option) {
+        return h("div", { class: "s-product-options-digital-card-wrapper" }, this.availableDigitalCardValues.length > 0 ? this.availableDigitalCardValues.map((detail) => {
+            const id = String(detail.id);
+            return h("label", { htmlFor: this.generateUniqueKey(id.toString()), key: id, class: "s-product-options-digital-card-option" }, h("input", { type: "radio", "data-code-value": true, class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), id: this.generateUniqueKey(id.toString()), required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), ...(!this.ignoreDefaultCardValue ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("span", null, detail.name, " ", salla.config?.currency()?.symbol));
+        })
+            : h("div", { class: "s-product-options-digital-card-out-of-stock" }));
+    }
+    countryOption(option) {
+        return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
+                    e.currentTarget.onerror = null;
+                    e.currentTarget.src =
+                        salla.url.cdn('images/globe.svg');
+                } }), h("span", null, detail.name));
+        }));
+    }
+    get host() { return getElement(this); }
+};
+SallaProductOptions.style = sallaProductOptionsCss;
+
+var http = {
+    request(method, url, data, successCb = null, errorCb = null) {
+        return axios
+            .request({url, data, method: method.toLowerCase(), responseType: 'json'})
+            .then(successCb)
+            .catch(errorCb);
+    },
+
+    get(url, successCb = null, errorCb = null, data) {
+        // return this.request('get', url, data, successCb, errorCb);
+        return axios
+            .get(url, {params: data})
+            .then(successCb)
+            .catch(errorCb);
+    },
+
+    post(url, data, successCb = null, errorCb = null) {
+        return this.request('post', url, data, successCb, errorCb);
+    },
+
+    put(url, data, successCb = null, errorCb = null) {
+        return this.request('put', url, data, successCb, errorCb);
+    },
+
+    delete(url, data, successCb = null, errorCb = null) {
+        return this.request('delete', url, data, successCb, errorCb);
+    },
+
+    requestWithSupportAjax(url, payload, method = 'post') {
+        return new Promise((resolve, reject) => {
+            if (!window?.isLegacyTheme) {
+                return this.request(method, url, payload, ({data}) => {
+                    return resolve(data);
+                }, ({response}) => {
+                    return reject(response);
+                })
+            }
+
+            /**
+             * @deprecated to support legacy themes
+             */
+            $.ajax({
+                url: url,
+                method: method.toUpperCase(),
+                data: payload,
+                async: false,
+                success: function ({data}) {
+                    return resolve(data);
+                },
+                error: function ({response}) {
+                    return reject(response);
+                }
+            });
+        })
+    }
+};
+
+var DetectOS = {
+    options: [],
+    header: [navigator.platform, navigator.userAgent, navigator.appVersion, navigator.vendor, window.opera],
+    dataos: [
+        {name: 'Windows Phone', value: 'Windows Phone', version: 'OS'},
+        {name: 'Windows', value: 'Win', version: 'NT'},
+        {name: 'iPhone', value: 'iPhone', version: 'OS'},
+        {name: 'iPad', value: 'iPad', version: 'OS'},
+        {name: 'Kindle', value: 'Silk', version: 'Silk'},
+        {name: 'Android', value: 'Android', version: 'Android'},
+        {name: 'PlayBook', value: 'PlayBook', version: 'OS'},
+        {name: 'BlackBerry', value: 'BlackBerry', version: '/'},
+        {name: 'Macintosh', value: 'Mac', version: 'OS X'},
+        {name: 'Linux', value: 'Linux', version: 'rv'},
+        {name: 'Palm', value: 'Palm', version: 'PalmOS'}
+    ],
+    databrowser: [
+        {name: 'Chrome', value: 'Chrome', version: 'Chrome'},
+        {name: 'Firefox', value: 'Firefox', version: 'Firefox'},
+        {name: 'Safari', value: 'Safari', version: 'Version'},
+        {name: 'Internet Explorer', value: 'MSIE', version: 'MSIE'},
+        {name: 'Opera', value: 'Opera', version: 'Opera'},
+        {name: 'BlackBerry', value: 'CLDC', version: 'CLDC'},
+        {name: 'Mozilla', value: 'Mozilla', version: 'Mozilla'}
+    ],
+    init: function () {
+        var agent = this.header.join(' '),
+            os = this.matchItem(agent, this.dataos),
+            browser = this.matchItem(agent, this.databrowser);
+
+        return {os: os, browser: browser};
+    },
+    matchItem: function (string, data) {
+        var i = 0,
+            j = 0,
+            regex,
+            regexv,
+            match,
+            matches,
+            version;
+
+        for (i = 0; i < data.length; i += 1) {
+            regex = new RegExp(data[i].value, 'i');
+            match = regex.test(string);
+            if (match) {
+                regexv = new RegExp(data[i].version + '[- /:;]([\\d._]+)', 'i');
+                matches = string.match(regexv);
+                version = '';
+                if (matches) {
+                    if (matches[1]) {
+                        matches = matches[1];
+                    }
+                }
+                if (matches) {
+                    matches = matches.split(/[._]+/);
+                    for (j = 0; j < matches.length; j += 1) {
+                        if (j === 0) {
+                            version += matches[j] + '.';
+                        } else {
+                            version += matches[j];
+                        }
+                    }
+                } else {
+                    version = '0';
+                }
+                return {
+                    name: data[i].name,
+                    version: parseFloat(version)
+                };
+            }
+        }
+        return {name: 'unknown', version: 0};
+    }
+};
+
+/**
+ * @typedef {Object} ApplePayPaymentContact
+ * @property {string} phoneNumber
+ * @property {string} emailAddress
+ * @property {string} givenName
+ * @property {string} familyName
+ * @property {string} [phoneticGivenName]
+ * @property {string} [phoneticFamilyName]
+ * @property {string[]} addressLines
+ * @property {string} [subLocality]
+ * @property {string} locality
+ * @property {string} postalCode
+ * @property {string} [subAdministrativeArea]
+ * @property {string} administrativeArea
+ * @property {string} country
+ * @property {string} countryCode
+ */
+
+
+/**
+ *
+ * @param {SallaApplePay} SallaApplePay
+ * @param {boolean} isAuthorized
+ * @param {ApplePayPaymentContact} shippingContact
+ *
+ */
+async function mutateShippingContact(SallaApplePay, shippingContact, isAuthorized = false) {
+  salla.logger.log('🍏 Pay: mutateShippingContact called', shippingContact, isAuthorized);
+
+  if (!SallaApplePay.detail.requiredShippingContactFields || SallaApplePay.detail.requiredShippingContactFields.length == 0) {
+    return;
+  }
+
+  if (isAuthorized) {
+    if (isGuestCheckout()) {
+
+      if (
+        !shippingContact.emailAddress ||
+        !shippingContact.givenName ||
+        !shippingContact.familyName ||
+        !shippingContact.phoneNumber
+      ) {
+  
+        salla.logger.warn('🍏 Pay: Guest contact fields are required', shippingContact);
+  
+        const errors = [];
+        if (!shippingContact.emailAddress) {
+          errors.push(new window.ApplePayError('shippingContactInvalid', 'emailAddress', 'Email address is required'));
+        }
+
+        if (!shippingContact.phoneNumber) {
+          errors.push(new window.ApplePayError('shippingContactInvalid', 'phoneNumber', 'Phone number is required'));
+        }
+
+        if (!shippingContact.givenName || !shippingContact.familyName) {
+          errors.push(new window.ApplePayError('shippingContactInvalid', 'name', 'Name is required'));
+        }
+
+        SallaApplePay.session.completePayment({
+          status: SallaApplePay.session.STATUS_INVALID_SHIPPING_CONTACT,
+          errors: errors
+        });
+
+        return;
+      }
+
+      await updateGuestContact(SallaApplePay, shippingContact);
+
+    }
+
+    // if authorized and not guest checkout, do nothing address already added
+    return;
+  }
+
+  if (!SallaApplePay.detail.requiredShippingContactFields.includes('postalAddress')) {
+    return;
+  }
+
+  return http.post(
+    SallaApplePay.detail.shippingContactSelected.url.replace('{id}', SallaApplePay.id),
+    {
+      'country': shippingContact.country,
+      'city': shippingContact.locality,
+      'local': shippingContact.subLocality || shippingContact.administrativeArea || shippingContact.locality,
+      'description': shippingContact.subAdministrativeArea,
+      'street': shippingContact.addressLines?.join(", ") || shippingContact.administrativeArea,
+      'country_code': shippingContact.countryCode,
+      'postal_code': shippingContact.postalCode,
+    },
+    async ({ data }) => {
+      if (typeof SallaApplePay.detail.shippingContactSelected.onSuccess === 'function') {
+        SallaApplePay.detail.shippingContactSelected.onSuccess(data);
+      }
+
+      SallaApplePay.address_id = data.data.address_id;
+      SallaApplePay.shipping_methods = data.data.shipping_methods;
+
+      if (!SallaApplePay.shipping_methods || (SallaApplePay.shipping_methods && !SallaApplePay.shipping_methods.length)) {
+        salla.logger.warn('🍏 Pay: We dont found any supported methods', data);
+
+        SallaApplePay.session.completeShippingContactSelection({
+          status: SallaApplePay.session.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS,
+          errors: [
+            new window.ApplePayError('addressUnserviceable')
+          ]
+        });
+
+        return
+      }
+
+      try {
+        await SallaApplePay.selectApplePayShippingMethod(SallaApplePay.shipping_methods[0]);
+      } catch (error) {
+        salla.logger.warn('Failed set the shipping details to api', error);
+
+        SallaApplePay.session.completeShippingContactSelection({
+          status: SallaApplePay.session.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS,
+          errors: [
+            new window.ApplePayError('addressUnserviceable')
+          ]
+        });
+
+        return;
+      }
+
+      try {
+        await SallaApplePay.recalculateTotal();
+      } catch (error) {
+        salla.logger.warn('🍏 Pay: Failed recalculate total', error);
+
+        SallaApplePay.session.completeShippingContactSelection({
+          status: SallaApplePay.session.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS,
+          errors: [
+            new window.ApplePayError('addressUnserviceable')
+          ]
+        });
+
+        return;
+      }
+
+      const updatedShippingContactSelection = {
+        newTotal: SallaApplePay.prepareTotal(),
+        newLineItems: SallaApplePay.prepareLineItems(),
+        newShippingMethods: SallaApplePay.mappingShippingMethods(SallaApplePay.shipping_methods)
+      };
+
+      salla.logger.log('🍏 Pay: completeShippingContactSelection', updatedShippingContactSelection);
+
+      SallaApplePay.session.completeShippingContactSelection(updatedShippingContactSelection);
+    },
+    ({ response }) => {
+      salla.logger.warn('🍏 Pay: Failed add address via api', response);
+
+      if (typeof SallaApplePay.detail.shippingContactSelected.onFailed === 'function') {
+        SallaApplePay.detail.shippingContactSelected.onFailed(response);
+      }
+
+      // parse 422 errors
+      let fields = response?.data?.error?.fields;
+
+      let errors = getApplePayErrors({
+        countryCode: fields?.country_code && fields.country_code.length > 0 ? fields.country_code[0] : null,
+        locality: fields?.city && fields.city.length > 0 ? fields.city[0] : null,
+        country: fields?.country && fields.country.length > 0 ? fields.country[0] : null,
+      });
+
+      if (errors.length === 0 && response?.data?.error?.message) {
+        errors.push(new window.ApplePayError('shippingContactInvalid', 'locality', response?.data?.error?.message));
+      }
+
+      SallaApplePay.session.completeShippingContactSelection({
+        newTotal: SallaApplePay.prepareTotal(),
+        newLineItems: SallaApplePay.prepareLineItems(),
+        status: SallaApplePay.session.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS,
+        errors: errors
+      });
+    }
+  );
+}
+
+function isGuestCheckout() {
+  return salla.config.isGuest() && salla.config.get('store.features').includes('guest-checkout');
+}
+
+/**
+ * Update guest contact
+ *
+ * @param {SallaApplePay} SallaApplePay
+ * @param {ApplePayPaymentContact} shippingContact
+ *
+ */
+async function updateGuestContact(SallaApplePay, shippingContact) {
+  salla.logger.log('🍏 Pay: Updating guest contact', shippingContact);
+
+  return new Promise((resolve, reject) => {
+    http.post(
+      SallaApplePay.detail.guestContactSelected.url.replace('{id}', SallaApplePay.id),
+      {
+        'email': shippingContact.emailAddress || null,
+        'first_name': shippingContact.givenName || null,
+        'last_name': shippingContact.familyName || null,
+        'phone_number': shippingContact.phoneNumber || null,
+        'country_code': shippingContact.countryCode || null,
+      },
+      async ({ data }) => {
+        if (typeof SallaApplePay.detail.guestContactSelected?.onSuccess === 'function') {
+          SallaApplePay.detail.guestContactSelected.onSuccess(data);
+        }
+        resolve(data);
+      },
+      ({ response }) => {
+        salla.logger.warn('🍏 Pay: Failed to update guest contact via api', response);
+
+        if (typeof SallaApplePay.detail.guestContactSelected?.onFailed === 'function') {
+          SallaApplePay.detail.guestContactSelected.onFailed(response);
+        }
+
+        // Reject the promise so it can be caught in onPaymentAuthorized
+        reject({ response });
+      }
+    );
+  });
+}
+
+function getApplePayErrors(fields) {
+  return Object.entries(fields)
+    .filter(([field, messages]) => messages && messages.length > 0)
+    .map(([field, messages]) => new window.ApplePayError('shippingContactInvalid', field, messages[0]));
+}
+
+window.Salla = window.Salla || {};
+window.Salla.Payments = window.Salla.Payments || {};
+
+/**
+ * Full Example
+ *
+ * Salla.event.createAndDispatch('payments::apple-pay.start-transaction', {
+ *                  amount: 1000,
+ *                  validateMerchant: {
+ *                      url: '{{ route('cp.marketplace.cart.pay', ['cart' => $cart]) }}',
+ *                      // onFailed: (response) => {
+ *                      //     laravel.ajax.errorHandler(response);
+ *                      //     this.onCancel({}, response.data.error.message);
+ *                      // },
+ *                      // onSuccess: (response) => {
+ *                      //     laravel.ajax.successHandler(response);
+ *                      // }
+ *                  },
+ *                  authorized: {
+ *                      url: '{{ route('cp.marketplace.cart.confirm', ['cart' => $cart]) }}',
+ *                      // onFailed: (response) => {
+ *                      //     laravel.ajax.errorHandler(response);
+ *                      //     this.onCancel({}, response.data.error.message);
+ *                      // },
+ *                      // onSuccess: (response) => {
+ *                      //     // nothing
+ *                      // }
+ *                  },
+ *                  // onError: function (message) {
+ *                  //     laravel.alert(message);
+ *                  // }
+ *              });
+ */
+window.SallaApplePay = {
+    session: null,
+    detail: null,
+    address_id: null,
+    shipping_methods: [],
+    total: undefined,
+    request: undefined,
+    id: undefined,
+    countryCode: null,
+    totals: [],
+    shippingCompany: null,
+    init: function () {
+        document.removeEventListener('payments::apple-pay.start-transaction', SallaApplePay.startSession);
+        Salla.event.addEventListener('payments::apple-pay.start-transaction', SallaApplePay.startSession);
+    },
+
+    initDefault: function () {
+        if (!SallaApplePay.detail.onError) {
+            SallaApplePay.detail.onError = function (message) {
+                salla.notify.error(message);
+            };
+        }
+
+        if (!SallaApplePay.detail.authorized.onFailed) {
+            SallaApplePay.detail.authorized.onFailed = (response) => {
+                salla.logger.log(JSON.stringify(response));
+                salla.api.handleErrorResponse(response);
+                SallaApplePay.onCancel({}, response.data.error.message);
+            };
+        }
+
+        if (!SallaApplePay.detail.validateMerchant.onFailed) {
+            SallaApplePay.detail.validateMerchant.onFailed = (response) => {
+                salla.logger.log(JSON.stringify(response));
+                salla.api.handleErrorResponse(response);
+                SallaApplePay.onCancel({}, response.data.error.message);
+            };
+        }
+
+        if (!SallaApplePay.detail.authorized.onSuccess) {
+            SallaApplePay.detail.authorized.onSuccess = (response) => {
+                salla.logger.log(JSON.stringify(response));
+                salla.api.handleAfterResponseActions(response);
+            };
+        }
+    },
+
+    prepareLineItems: function () {
+        if (!SallaApplePay.detail?.items?.length) {
+            SallaApplePay.detail.items = [
+                {
+                    label: salla.lang.get('pages.cart.items_total'),
+                    amount: parseFloat(SallaApplePay.detail.amount).toString()
+                }
+            ];
+        }
+
+        return SallaApplePay.detail.items;
+    },
+
+    prepareTotal: function () {
+        return {
+            // apple ask to use business name
+            label: window.location.hostname || 'Salla',
+            //label: salla.lang.get('pages.cart.final_total'),
+            amount: parseFloat(SallaApplePay.detail.amount).toString()
+        }
+    },
+
+    isPhysical() {
+        return SallaApplePay.detail?.requiredShippingContactFields?.includes('postalAddress');
+    },
+
+    startSession: async function (event) {
+
+        SallaApplePay.detail = event.detail || event;
+
+        salla.log('🍏 Pay: payments::apple-pay.start-transaction', SallaApplePay.detail);
+
+        SallaApplePay.initDefault();
+
+        let version = SallaApplePay.getApplePaySessionVersion();
+        let supportedNetworks = SallaApplePay.detail.supportedNetworks || ['masterCard', 'visa'];
+
+        if (version === 5) {
+            supportedNetworks.push('mada');
+        }
+
+        SallaApplePay.request = {
+            countryCode: SallaApplePay.detail.countryCode || 'SA',
+            supportsCouponCode: true,
+            couponCode: '',
+            currencyCode: SallaApplePay.detail.currency || 'SAR',
+            requiredShippingContactFields: SallaApplePay.detail.requiredShippingContactFields ? SallaApplePay.detail.requiredShippingContactFields : [],
+            merchantCapabilities: ['supports3DS'],
+            supportedNetworks: supportedNetworks,
+            supportedCountries: SallaApplePay.detail.supportedCountries || ['SA'],
+            total: SallaApplePay.prepareTotal(),
+            shippingContact: SallaApplePay.detail.shippingContact ? SallaApplePay.detail.shippingContact : {},
+            shippingMethods: SallaApplePay.detail.shippingMethods && SallaApplePay.detail.shippingMethods.length ? SallaApplePay.mappingShippingMethods(event.detail.shippingMethods) : [],
+            lineItems: SallaApplePay.prepareLineItems()
+        };
+
+        salla.log('🍏 Pay: init ', SallaApplePay.request);
+
+        // https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest
+        SallaApplePay.session = new ApplePaySession(version, SallaApplePay.request);
+
+        SallaApplePay.session.onshippingcontactselected = SallaApplePay.onShippingContactSelected;
+        SallaApplePay.session.onshippingmethodselected = SallaApplePay.onShippingMethodSelected;
+        SallaApplePay.session.onvalidatemerchant = SallaApplePay.onValidateMerchant;
+        SallaApplePay.session.onpaymentauthorized = SallaApplePay.onPaymentAuthorized;
+        SallaApplePay.session.oncancel = SallaApplePay.onCancel;
+        SallaApplePay.session.oncouponcodechanged = SallaApplePay.onCouponCodeChanged;
+        SallaApplePay.session.onpaymentmethodselected = SallaApplePay.onPaymentMethodSelected;
+
+        SallaApplePay.session.begin();
+    },
+    onPaymentMethodSelected: async (event) => {
+        salla.logger.log('🍏 Pay: onPaymentMethodSelected', event);
+
+        // perform recalculate here only if digital product
+        // if physical recalculate performed with shipping company
+        if (!SallaApplePay.isPhysical()) {
+            try {
+                await SallaApplePay.recalculateTotal();
+    
+                const updatedPaymentDetails = {
+                    newTotal: SallaApplePay.prepareTotal(),
+                    newLineItems: SallaApplePay.prepareLineItems()
+                };
+    
+                salla.logger.log('🍏 Pay: completePaymentMethodSelection', updatedPaymentDetails);
+
+                SallaApplePay.session.completePaymentMethodSelection(updatedPaymentDetails);
+
+            } catch (error) {
+                salla.logger.warn('🍏 Pay: Failed recalculate total', error);
+    
+                SallaApplePay.session.completePaymentMethodSelection({
+                    newTotal: SallaApplePay.prepareTotal(),
+                    newLineItems: SallaApplePay.prepareLineItems(),
+                    status: SallaApplePay.session.STATUS_FAILURE,
+                    errors: [new window.ApplePayError("unknown", undefined, error?.response?.data?.error?.message || error?.response?.data?.error?.code || 'Failed to recalculate total')]
+                });
+            }
+            return;
+        }
+
+        salla.logger.log('🍏 Pay: completePaymentMethodSelection', {
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
+
+        SallaApplePay.session.completePaymentMethodSelection({
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
+    },
+
+    onCouponCodeChanged(event) {
+        Salla.event.dispatch('payments::apple-pay.coupon.change', event);
+
+        return http.post(SallaApplePay.detail.onCouponCodeChanged.url.replace('{id}', SallaApplePay.id), {
+            'coupon': event.couponCode,
+            'payment_method': 'apple_pay',
+        }, async ({ data }) => {
+            if (typeof SallaApplePay.detail.onCouponCodeChanged.onSuccess === 'function') {
+                SallaApplePay.detail.onCouponCodeChanged.onSuccess(data);
+            }
+
+            salla.log('🍏 Pay: Coupon applied success');
+
+            await SallaApplePay.recalculateTotal();
+
+            SallaApplePay.session.completeCouponCodeChange({
+                newTotal: SallaApplePay.prepareTotal(),
+                newLineItems: SallaApplePay.prepareLineItems()
+            });
+        }, async (error) => {
+            let response = error?.response;
+
+            Salla.event.dispatch('payments::apple-pay.coupon.failed', response);
+
+            // SallaApplePay.abortSession();
+            if (typeof SallaApplePay.detail.onCouponCodeChanged.onFailed === 'function') {
+                SallaApplePay.detail.onCouponCodeChanged.onFailed(response);
+            }
+
+            await SallaApplePay.recalculateTotal();
+
+            SallaApplePay.session.completeCouponCodeChange({
+                newTotal: SallaApplePay.prepareTotal(),
+                newLineItems: SallaApplePay.prepareLineItems(),
+                errors: [new window.ApplePayError('couponCodeInvalid')]
+            });
+        });
+    },
+
+    onCancel: (event = {}, message = null) => {
+        SallaApplePay.detail.onError(message || salla.lang.get('pages.checkout.payment_failed'));
+        Salla.event.createAndDispatch('payments::apple-pay.canceled', event);
+    },
+
+    /**
+     * Confirm payment after authorization.
+     *
+     * @param event
+     */
+    onPaymentAuthorized: async (event) => {
+        salla.logger.log('🍏 Pay: onPaymentAuthorized', event.payment);
+
+        // update guest details
+        try {
+            await mutateShippingContact(SallaApplePay, event.payment.shippingContact, true);
+        } catch (error) {
+            salla.logger.error('🍏 Pay: Failed to update guest contact details', error);
+            
+            const response = error?.response || error;
+            
+            // Parse backend errors for shipping contact fields
+            const fields = response?.data?.error?.fields || {};
+            const errors = [];
+            
+            // Map backend field errors to Apple Pay contact field errors
+            if (fields?.email && fields.email.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'emailAddress', fields.email[0]));
+            }
+
+            if (fields?.phone && fields.phone.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'phoneNumber', fields.phone[0]));
+            }
+
+            if (fields?.first_name && fields.first_name.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'name', fields.first_name[0]));
+            } else if (fields?.last_name && fields.last_name.length > 0) {
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'name', fields.last_name[0]));
+            }
+            
+            // If no specific field errors, use general error message
+            if (errors.length === 0) {
+                const errorMessage = response?.data?.error?.message || response?.data?.error?.code || 'Invalid shipping contact details';
+                errors.push(new window.ApplePayError('shippingContactInvalid', 'name', errorMessage));
+            }
+            
+            Salla.event.dispatch('payments::apple-pay.authorized.failed', response);
+            
+            if (typeof SallaApplePay.detail.authorized.onFailed === 'function') {
+                SallaApplePay.detail.authorized.onFailed(response);
+            }
+
+            // Complete shipping contact selection with invalid contact status
+            SallaApplePay.session.completePayment({
+                status: ApplePaySession.STATUS_INVALID_SHIPPING_CONTACT,
+                errors: errors
+            });
+
+            return;
+        }
+
+        Salla.event.dispatch('payments::apple-pay.authorized.init', event);
+        http.post(SallaApplePay.detail.authorized.url.replace('{id}', SallaApplePay.id), {
+            payment_method: 'apple_pay',
+            applepay_token: JSON.stringify(event.payment)
+        }, ({ data }) => {
+            Salla.event.dispatch('payments::apple-pay.authorized.success', data);
+
+            if (typeof SallaApplePay.detail.authorized.onSuccess === 'function') {
+                SallaApplePay.detail.authorized.onSuccess(data);
+            }
+
+            SallaApplePay.session.completePayment(ApplePaySession.STATUS_SUCCESS);
+        }, (error) => {
+
+            let response = error?.response;
+
+            Salla.event.dispatch('payments::apple-pay.authorized.failed', response);
+
+            if (typeof SallaApplePay.detail.authorized.onFailed === 'function') {
+                SallaApplePay.detail.authorized.onFailed(response);
+            }
+
+            SallaApplePay.session.completePayment({
+                status: ApplePaySession.STATUS_FAILURE,
+                errors: [new window.ApplePayError("unknown", undefined, response?.data?.error?.message || response?.data?.error?.code || 'Failed to parse authorized response')]
+            });
+        });
+    },
+
+    /**
+     * Validate Submit.
+     *
+     * @param event
+     */
+    onValidateMerchant: async (event) => {
+        try {
+            // Dispatch event to initialize Apple Pay merchant validation
+            Salla.event.dispatch('payments::apple-pay.validate-merchant.init', event);
+
+            // Post request to validate merchant
+            const { data } = await http.post(SallaApplePay.detail.validateMerchant.url.replace('{id}', SallaApplePay.id), {
+                validation_url: event.validationURL
+            });
+
+            // Dispatch event on successful merchant validation
+            Salla.event.dispatch('payments::apple-pay.validate-merchant.success', data);
+
+            // Define a function to handle the completion of merchant validation
+            const completeMerchantValidation = (responseData) => {
+                SallaApplePay.session.completeMerchantValidation(responseData);
+            };
+
+            // Check if onSuccess function is defined in SallaApplePay.detail.validateMerchant
+            if (typeof SallaApplePay.detail.validateMerchant.onSuccess === 'function') {
+                // Call onSuccess function and handle response
+                const response = await SallaApplePay.detail.validateMerchant.onSuccess(data);
+                if (response?.redirect) {
+                    // Handle redirect if present
+                    window.location = response.redirect;
+                    return SallaApplePay.abortValidateMerchant(response);
+                }
+            }
+            completeMerchantValidation(data.data);
+        } catch (error) {
+            // Handle errors
+            console.error(error);
+            SallaApplePay.abortValidateMerchant(error?.response);
+        }
+    },
+
+    abortValidateMerchant: (response = null) => {
+
+        SallaApplePay.abortSession();
+        Salla.event.dispatch('payments::apple-pay.validate-merchant.failed', response);
+
+        if (typeof SallaApplePay.detail.validateMerchant.onFailed === 'function') {
+            SallaApplePay.detail.validateMerchant.onFailed(response);
+        }
+    },
+
+    /**
+     * Select Shipping Contact
+     *
+     * @param event
+     */
+    onShippingContactSelected: async (event) => {
+        salla.logger.log('🍏 Pay: onShippingContactSelected', event.shippingContact);
+
+        // create address for shipping calculation
+        await mutateShippingContact(SallaApplePay, event.shippingContact);
+    },
+
+    /**
+     * Select Shipping Method
+     *
+     * @param event
+     *
+     */
+    onShippingMethodSelected: async (event) => {
+
+        let shipping_ids = event.shippingMethod.identifier.split(',');
+        let shippingMethod = {
+            ship_id: shipping_ids[0],
+            private_ship_id: typeof shipping_ids[1] === 'undefined' ? null : shipping_ids[1],
+            type: typeof shipping_ids[2] === 'undefined' ? null : shipping_ids[2],
+            route_id: typeof shipping_ids[3] === 'undefined' ? null : shipping_ids[3],
+        };
+
+        salla.logger.log('🍏 Pay: onShippingMethodSelected', {
+            event,
+            previous: SallaApplePay.shippingCompany,
+            current: shippingMethod,
+        });
+
+        if (SallaApplePay.shouldUpdateShippingCompany(shippingMethod)) {
+            try {
+
+                await SallaApplePay.selectApplePayShippingMethod(shippingMethod);
+    
+                await SallaApplePay.recalculateTotal();
+    
+            } catch (error) {
+                salla.logger.warn('🍏 Pay: Failed set the shipping details to api', error);
+    
+                // todo :: find a better handling for error without abort session
+                SallaApplePay.session.completeShippingMethodSelection({
+                    newTotal: SallaApplePay.prepareTotal(),
+                    newLineItems: SallaApplePay.prepareLineItems(),
+                    status: SallaApplePay.session.STATUS_INVALID_SHIPPING_POSTAL_ADDRESS,
+                    errors: [
+                      new window.ApplePayError('addressUnserviceable')
+                    ]
+                });
+
+                return;
+            }
+        }
+
+        salla.logger.log('🍏 Pay: completeShippingMethodSelection', {
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
+
+        SallaApplePay.session.completeShippingMethodSelection({
+            newTotal: SallaApplePay.prepareTotal(),
+            newLineItems: SallaApplePay.prepareLineItems(),
+        });
+    },
+
+
+    abortSession: () => {
+        if (SallaApplePay.session) {
+            SallaApplePay.session.abort();
+        }
+    },
+
+    shouldUpdateShippingCompany(shippingCompany) {
+        return SallaApplePay.shippingCompany?.ship_id != shippingCompany?.ship_id || SallaApplePay.shippingCompany?.private_ship_id != shippingCompany?.private_ship_id
+    },
+
+    getApplePaySessionVersion: () => {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+        if (userAgent === 'sallapp') {
+            return 5;
+        }
+
+        // can't handle custom user agent like sallapp
+        let detection = DetectOS.init();
+        let v = parseFloat(detection.os.version);
+
+        if (detection.os.name === 'Macintosh') {
+            if (v < 10.142) {
+                return 1;
+            }
+        } else {
+            if (v < 12.11) {
+                return 1;
+            }
+        }
+
+        return 5;
+    },
+
+    recalculateTotal: () => {
+        salla.logger.log('🍏 Pay: recalculate total');
+
+        return http.get(SallaApplePay.detail.recalculateTotal.url.replace('{id}', SallaApplePay.id), ({ data }) => {
+            salla.logger.log('🍏 Pay: recalculate total success', data);
+            let cart = data.data.initial_data?.cart || data.data.cart;
+            let payments = data.data.initial_data?.payments || data.data.payments;
+
+            salla.logger.log('🍏 Pay: recalculate total success', {
+                cart,
+                payments
+            });
+
+            // todo :: enhance response from backend
+            SallaApplePay.detail.amount = payments?.gateways?.applePay?.supportedMultiCurrency ? cart.total_in_customer_currency : cart.total;
+            SallaApplePay.detail.items = (cart.totals || cart.items).map((item) => {
+                return {
+                    label: item.title,
+                    amount: (item.amount === 'مجاني' || item.amount === 'Free') ? 0 : item.amount.toString().replace('+', ''),
+                };
+            });
+
+            // lets remove last element (final total)
+            SallaApplePay.detail.items.pop();
+            SallaApplePay.totals = SallaApplePay.detail.items;
+
+        }, (error) => {
+            salla.logger.warn('🍏 Pay: recalculate total failed', error);
+
+            // general error
+            return error?.response?.data?.message;
+        });
+    },
+
+
+    selectApplePayShippingMethod: (shippingMethod) => {
+        salla.logger.log('🍏 Pay: select shipping method ', shippingMethod);
+        SallaApplePay.shippingCompany = shippingMethod;
+
+        const payload = {
+            address_id: SallaApplePay.address_id,
+            company_id: shippingMethod.ship_id,
+            private_company_id: shippingMethod.private_ship_id,
+            type: shippingMethod.type || undefined,
+            route_id: shippingMethod.route_id || undefined,
+            payment_method: 'apple_pay'
+        };
+        return http.post(SallaApplePay.detail.shippingMethodSelected.url.replace('{id}', SallaApplePay.id), payload, ({ data }) => {
+            if (typeof SallaApplePay.detail.shippingMethodSelected.onSuccess === 'function') {
+                SallaApplePay.detail.shippingMethodSelected.onSuccess(data);
+            }
+
+            // we don't have any data in this request, lets resolve the promise
+            return true;
+        }, (error) => {
+            salla.logger.warn('🍏 Pay: Set shipping method failed', error);
+
+            if (typeof SallaApplePay.detail.shippingMethodSelected.onFailed === 'function') {
+                SallaApplePay.detail.shippingMethodSelected.onFailed(error);
+            }
+
+            // parse 422 errors
+            let response = error?.response?.data?.error;
+
+            // address id is not valid
+            if (response?.data?.fields?.address_id) {
+                return response?.data?.fields?.address_id[0];
+            }
+
+            // general error
+            return response?.data?.message;
+        });
+    },
+    mappingShippingMethods: methods => methods.map(method => ({
+        'label': method.shipping_title,
+        'amount': method.enable_free_shipping ? 0 : method.ship_cost,
+        'detail': '',
+        'identifier': method.ship_id.toString() + (method.private_ship_id ? ',' + method.private_ship_id.toString() : '') + (method.type ? ',' + method.type : '') + (method.route_id ? ',' + method.route_id : '')
+    }))
+};
+
+//applePay doesn't allow iframes
+// if (window.ApplePaySession && window.self === window.top && ApplePaySession.canMakePayments()) {
+if (window.ApplePaySession?.canMakePayments()) {
+    SallaApplePay.init();
+} else {
+    // You can hide the Apple Pay button easy with add data-show-if-apple-pay-supported to element like <div data-show-if-apple-pay-supported>
+    document.querySelectorAll('data-show-if-apple-pay-supported').forEach(element => element.style.display = 'none');
+}
+
+const sallaQuickBuyCss = ".s-quick-buy-button .s-button-text{display:flex}apple-pay-button{--apple-pay-button-width:100%;--apple-pay-button-height:40px;--apple-pay-button-border-radius:.75rem;--apple-pay-button-box-sizing:content-box}";
+
+const SallaQuickBuy = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.validationFailed = createEvent(this, "validationFailed");
+        this.requireLogin = createEvent(this, "requireLogin");
+        /**
+         * Button type.
+         *
+         * @type {string}
+         * @default buy
+         **/
+        this.type = 'buy';
+        /**
+         * Product options, if is empty will get the data from the document.querySelector('salla-product-options[product-id="X"]')
+         *
+         * @type {object}
+         * @default {}
+         */
+        this.options = {};
+        this.quickBuy = salla.lang.get('pages.products.buy_now');
+        salla.lang.onLoaded(() => {
+            this.quickBuy = salla.lang.get('pages.products.buy_now');
+        });
+    }
+    async quickBuyHandler() {
+        // user guest and guest-checkout not enabled
+        if (salla.config.isGuest() && !this.isGuestCheckout()) {
+            this.requireLogin.emit({ productId: this.productId });
+            // todo (low) :: find a way to re-fire the method after success
+            let afterLoginEvent = "salla-quick-buy::user.logged-in";
+            salla.event.on(afterLoginEvent, () => this.settlePayment());
+            salla.api.auth.setAfterLoginEvent(afterLoginEvent);
+            return salla.auth.event.dispatch('login::open', { withoutReload: true });
+        }
+        await this.settlePayment();
+    }
+    async settlePayment() {
+        let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        //make sure all the required options are selected
+        if (optionsElement && !await optionsElement.reportValidity()) {
+            this.validationFailed.emit({ productId: this.productId });
+            return salla.error(salla.lang.get('common.messages.required_fields'));
+        }
+        //use this way to get quantity too
+        let data = this.host.getElementSallaData();
+        // if the store doesn't have Apple Pay , just create a cart and then redirect to check out page
+        if (!this.isApplePayActive) {
+            // return salla.product.buyNow(this.productId, data);
+            return salla.api.request('checkout/quick-purchase/' + this.productId, data, 'post')
+                .then(resp => {
+                if (resp.data.redirect) {
+                    window.location.href = resp.data.redirect;
+                }
+                return resp;
+            });
+        }
+        data.is_applepay = true;
+        if ('append' in data) {
+            data.append('is_applepay', true);
+        }
+        // noinspection TypeScriptValidateJSTypes
+        salla.event.dispatch('payments::apple-pay.start-transaction', {
+            amount: this.amount, // 1000
+            currency: this.currency || 'SAR', // SAR
+            requiredShippingContactFields: this.getRequiredShippingContactFields(),
+            shippingMethods: this.isRequireShipping ? [] : undefined,
+            supportedNetworks: salla.config.get('store.settings.buy_now.networks'),
+            supportedCountries: salla.config.get('store.settings.buy_now.countries'),
+            countryCode: salla.config.get('store.store_country') || 'SA',
+            validateMerchant: {
+                url: salla.url.get('checkout/applepay/validate'),
+                onSuccess: (response) => {
+                    if (this.applePayOnly && !this.productId) { // the cart is not passes
+                        if (!this.cartId) {
+                            salla.logger.warn('🍏 Pay: trying to create applePay transaction without cartId/ProductId !');
+                            return Promise.resolve(response);
+                        }
+                        window.SallaApplePay.id = this.cartId;
+                        salla.log('🍏 Pay: create checkout success: with id #' + this.cartId);
+                        return Promise.resolve(response);
+                    }
+                    return salla.api.request('checkout/quick-purchase/' + this.productId, typeof data == 'object' ? data : undefined, 'post', {}).then(response => {
+                        // if is redirect url returned for any reason, lets redirect the user to check out
+                        if (response?.data?.redirect) {
+                            salla.log('🍏 Pay: create checkout success: redirect exits, go to checkout page');
+                            window.location.href = response.data.redirect.url;
+                            return response;
+                        }
+                        // the cart is not ready to complete apply pay session
+                        if (!response?.data?.id) {
+                            salla.logger.warn('🍏 Pay: create checkout success: No id, or redirect');
+                            return response;
+                        }
+                        window.SallaApplePay.id = response.data.id;
+                        salla.log('🍏 Pay: create checkout success: with id #' + window.SallaApplePay.id);
+                    });
+                }
+            },
+            authorized: {
+                // submit checkout route
+                url: salla.url.get('checkout/{id}/payments/submit'),
+                onFailed: (response) => {
+                    window.SallaApplePay.onCancel({}, response?.data?.error?.message || response?.data?.error?.code || salla.lang.get('pages.checkout.payment_failed'));
+                },
+                onSuccess: (response) => {
+                    window.location.href = response.redirect.url;
+                    salla.log('🍏 Pay: authorized Success:: redirect to thank you page, order placed');
+                }
+            },
+            shippingMethodSelected: this.isRequireShipping ? {
+                url: salla.url.get('checkout/{id}/shipping/details'),
+            } : undefined,
+            shippingContactSelected: this.isRequireShipping ? {
+                url: salla.url.get('checkout/{id}/address/add'),
+            } : undefined,
+            guestContactSelected: this.isGuestCheckout() ? {
+                url: salla.url.get('checkout/{id}/customer'),
+            } : undefined,
+            onCouponCodeChanged: {
+                url: salla.url.get('checkout/{id}/coupons')
+            },
+            recalculateTotal: {
+                url: salla.url.get('checkout/{id}/payments/recalculate?payment_method=apple_pay')
+            },
+            onError: function (message) {
+                salla.log(message);
+                salla.notify.error(message);
+            }
+        });
+    }
+    isGuestCheckout() {
+        return salla.config.isGuest() && salla.config.get('store.features').includes('guest-checkout');
+    }
+    getRequiredShippingContactFields() {
+        let fields = [];
+        if (this.isRequireShipping) {
+            fields.push('postalAddress');
+        }
+        if (this.isGuestCheckout()) {
+            fields.push('email', 'phone', 'name');
+        }
+        return fields;
+    }
+    componentWillLoad() {
+        console.log('🍏 Pay: Quick Buy Component Loaded');
+        const canMakePayments = typeof window !== 'undefined' && !!window.ApplePaySession?.canMakePayments?.();
+        const storeHasApplePay = salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? true;
+        const isSallaGateway = salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? true;
+        this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway;
+        const runInit = async () => {
+            if (!this.currency && salla?.config?.get) {
+                this.currency = salla.config.get('store.settings.buy_now.multi_currency') ? salla.config.get('user.currency_code') : 'SAR';
+            }
+            if (!this.productId && salla?.config?.get && salla.url?.is_page) {
+                this.productId = salla.config.get('page.id');
+            }
+            if (!this.applePayOnly && !this.productId) {
+                salla?.logger?.warn?.('🍏 Pay: Failed load the quick buy, the product id is missing');
+                return;
+            }
+            if ((!this.amount || !this.isRequireShipping) && this.productId && salla?.product?.getDetails) {
+                await salla.product.getDetails(this.productId, []).then((response) => {
+                    this.amount = response.data.price;
+                    this.isRequireShipping = response?.data?.is_require_shipping || false;
+                }).catch((error) => {
+                    salla?.logger?.warn?.('🍏 Pay: Failed load the quick buy, get the product details failed: ', error);
+                });
+            }
+            if (this.type === 'donate' && salla?.event?.on) {
+                salla.event.on('product-options::donation-changed', (data) => {
+                    if (String(data.id) !== String(this.productId))
+                        return;
+                    this.amount = data.price;
+                });
+            }
+            else if (salla?.url?.is_page?.('product.single') && salla?.product?.event?.onPriceUpdated) {
+                salla.product.event.onPriceUpdated(response => { this.amount = response.data.price; });
+            }
+            this.isApplePayActive = (salla?.helpers?.hasApplePay?.() ?? canMakePayments)
+                && (salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? storeHasApplePay)
+                && (salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? isSallaGateway);
+            if (!document.getElementById('apple-pay-sdk') && this.isApplePayActive) {
+                const script = document.createElement('script');
+                script.src = 'https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js';
+                script.setAttribute('id', 'apple-pay-sdk');
+                script.async = true;
+                document.body.appendChild(script);
+            }
+        };
+        return new Promise((resolve) => {
+            if (typeof salla?.onReady === 'function') {
+                salla.onReady(() => runInit().then(() => resolve(true)));
+            }
+            else {
+                runInit().then(() => resolve(true));
+            }
+        });
+    }
+    render() {
+        return h(Host, { key: '9a36fa6b7163dae6feed474712e3d0c3003d012c' }, this.quickBuyButton());
+    }
+    quickBuyButton() {
+        return h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });
+    }
+    get host() { return getElement(this); }
+};
+SallaQuickBuy.style = sallaQuickBuyCss;
+
+export { SallaAddProductButton as salla_add_product_button, SallaProductAvailability as salla_product_availability, SallaProductOptions as salla_product_options, SallaQuickBuy as salla_quick_buy };