@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-button.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as o,d as s}from"./salla-button2.js";const t=o,a=s;export{t as SallaButton,a as defineCustomElement}
+import { S as SallaButton$1, d as defineCustomElement$1 } from './salla-button2.js';
+
+const SallaButton = SallaButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaButton, defineCustomElement };

package/dist/components/salla-button2.js

@@ -1,4 +1,177 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as i,h as e,Host as n}from"@stencil/core/internal/client";const o=s(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.shape="btn",this.color="primary",this.fill="solid",this.size="medium",this.width="normal",this.loading=!1,this.disabled=!1,this.loaderPosition="after",this.type="button"}async load(){return"center"==this.loaderPosition&&this.text.classList.add("s-button-hide"),this.host.setAttribute("loading",""),this.host}async stop(){return this.host.removeAttribute("loading"),this.host.querySelector("button").removeAttribute("loading"),"center"==this.loaderPosition&&this.text.classList.remove("s-button-hide"),this.host}async setText(t){return this.text.innerHTML=t,this.host}async disable(){return this.host.setAttribute("disabled",""),this.host}async enable(){return this.host.removeAttribute("disabled"),this.host}getBtnAttributes(){const t={};for(let s=0;s<this.host.attributes.length;s++)["color","fill","size","width","id"].includes(this.host.attributes[s].name)||(t[this.host.attributes[s].name]=this.host.attributes[s].value);t.type=t.type||this.type;const s=t.class||"";return t.class=s+" s-button-element s-button-"+this.shape+" s-button-"+("none"==this.fill?"fill-none":this.fill)+("medium"!=this.size?" s-button-"+this.size:"")+("normal"!=this.width?" s-button-"+this.width:"")+("link"==this.shape?" s-button-"+this.color+"-link":"")+("link"!=this.shape&&"outline"!=this.fill?" s-button-"+this.color:"")+("outline"==this.fill?" s-button-"+this.color+"-outline":"")+(this.disabled?" s-button-disabled ":"")+("icon"==this.shape?" s-button-loader-center":" s-button-loader-"+this.loaderPosition),t["aria-label"]||t["aria-labelledby"]||(this.host.textContent||"").trim()||(s.includes("btn--wishlist")||s.includes("wishlist")?t["aria-label"]=salla.lang.getWithDefault("pages.products.add_to_wishlist","Add or remove to wishlist"):"icon"===this.shape&&console.warn("Icon button is missing aria-label attribute")),t}button(){return e("button",{...this.getBtnAttributes(),disabled:this.disabled},e("span",{class:"s-button-text",ref:t=>this.text=t},e("slot",null)),this.loading?e("span",{class:"s-button-loader"}):"")}render(){return this.host.closest(".swiper-slide")?.classList.contains("swiper-slide-duplicate")?"":e(n,{class:"s-button-wrap"},this.href?e("a",{href:this.href},this.button()):this.button())}get host(){return this}static get style(){return""}},[260,"salla-button",{shape:[513],color:[513],fill:[513],size:[513],width:[513],loading:[516],disabled:[516],loaderPosition:[1,"loader-position"],href:[1],type:[513],load:[64],stop:[64],setText:[64],disable:[64],enable:[64]}]);function h(){"undefined"!=typeof customElements&&["salla-button"].forEach((s=>{"salla-button"===s&&(customElements.get(t(s))||customElements.define(t(s),o))}))}h();export{o as S,h as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sallaButtonCss = "";
+
+const SallaButton = /*@__PURE__*/ proxyCustomElement(class SallaButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Button Type
+         */
+        this.shape = 'btn';
+        /**
+         * Button Color
+         */
+        this.color = 'primary';
+        /**
+         * Button Fill
+         */
+        this.fill = 'solid';
+        /**
+         * Button Size
+         */
+        this.size = 'medium';
+        /**
+         * Button Width
+         */
+        this.width = 'normal';
+        /**
+         * Is the button currently loading
+         */
+        this.loading = false;
+        /**
+         * Is the button currently disabled
+         */
+        this.disabled = false;
+        /**
+         * If there is need to change loader position, pass the position
+         */
+        this.loaderPosition = 'after';
+        /**
+         * Determines the type of the rendered button.
+         * By default, the type is set to "button," making it a general-purpose button.
+         * Setting `type` to "submit" makes the button behave as a submit button within a form, triggering form submission.
+         * Possible values for `type` include "button," "submit," "reset," and "menu.".
+         *
+         * Possible values and their usage are as follows:
+         * "button" (default, used for general button functionality),
+         * "reset" (resets form fields to their default values), and
+         * "menu" (represents a button that, when activated, displays a context menu).
+         */
+        this.type = "button";
+    }
+    /**
+     * Run loading animation
+     */
+    async load() {
+        if (this.loaderPosition == 'center')
+            this.text.classList.add('s-button-hide');
+        this.host.setAttribute('loading', '');
+        return this.host;
+    }
+    /**
+     * Stop loading animation
+     */
+    async stop() {
+        this.host.removeAttribute('loading');
+        this.host.querySelector('button').removeAttribute('loading');
+        if (this.loaderPosition == 'center')
+            this.text.classList.remove('s-button-hide');
+        return this.host;
+    }
+    /**
+     * Changing the body of the button
+     * @param html
+     */
+    async setText(html) {
+        this.text.innerHTML = html;
+        return this.host;
+    }
+    /**
+     * Add `disabled` attribute
+     */
+    async disable() {
+        this.host.setAttribute('disabled', '');
+        return this.host;
+    }
+    /**
+     * Remove `disabled` attribute
+     */
+    async enable() {
+        this.host.removeAttribute('disabled');
+        return this.host;
+    }
+    getBtnAttributes() {
+        const hostAttributes = {};
+        for (let i = 0; i < this.host.attributes.length; i++) {
+            if (!['color', 'fill', 'size', 'width', 'id'].includes(this.host.attributes[i].name)) {
+                hostAttributes[this.host.attributes[i].name] = this.host.attributes[i].value;
+            }
+        }
+        hostAttributes.type = hostAttributes.type || this.type;
+        const buttonClass = hostAttributes.class || '';
+        hostAttributes.class = buttonClass +
+            ' s-button-element s-button-' + this.shape
+            + ' s-button-' + (this.fill == "none" ? 'fill-none' : this.fill)
+            + (this.size != "medium" ? ' s-button-' + this.size : '')
+            + (this.width != "normal" ? ' s-button-' + this.width : '')
+            + (this.shape == "link" ? ' s-button-' + this.color + '-link' : '')
+            + (this.shape != "link" && this.fill != 'outline' ? ' s-button-' + this.color : '')
+            + (this.fill == 'outline' ? ' s-button-' + this.color + '-outline' : '')
+            + (this.disabled ? ' s-button-disabled ' : '')
+            + (this.shape == 'icon' ? ' s-button-loader-center' : ' s-button-loader-' + this.loaderPosition);
+        if (!hostAttributes['aria-label'] && !hostAttributes['aria-labelledby']) {
+            const buttonText = (this.host.textContent || '').trim();
+            // Only add aria-label for buttons without visible text (icon buttons)
+            // Buttons with visible text don't need aria-label as screen readers already announce the text
+            if (!buttonText) {
+                // Check if it's a wishlist button and add aria-label automatically
+                const isWishlistButton = buttonClass.includes('btn--wishlist') || buttonClass.includes('wishlist');
+                if (isWishlistButton) {
+                    hostAttributes['aria-label'] = salla.lang.getWithDefault('pages.products.add_to_wishlist', 'Add or remove to wishlist');
+                }
+                else if (this.shape === 'icon') {
+                    console.warn('Icon button is missing aria-label attribute');
+                }
+            }
+        }
+        return hostAttributes;
+    }
+    button() {
+        return (h("button", { ...this.getBtnAttributes(), disabled: this.disabled }, h("span", { class: "s-button-text", ref: el => this.text = el }, h("slot", null)), this.loading ? h("span", { class: "s-button-loader" }) : ''));
+    }
+    render() {
+        //TODO:: find a better fix, this is a patch for issue that duplicates the buttons twice @see the screenshot inside this folder
+        return this.host.closest('.swiper-slide')?.classList.contains('swiper-slide-duplicate')
+            ? ''
+            : (h(Host, { class: "s-button-wrap" }, this.href ? h("a", { href: this.href }, this.button()) : this.button()));
+    }
+    get host() { return this; }
+    static get style() { return sallaButtonCss; }
+}, [4, "salla-button", {
+        "shape": [513],
+        "color": [513],
+        "fill": [513],
+        "size": [513],
+        "width": [513],
+        "loading": [516],
+        "disabled": [516],
+        "loaderPosition": [1, "loader-position"],
+        "href": [1],
+        "type": [513],
+        "load": [64],
+        "stop": [64],
+        "setText": [64],
+        "disable": [64],
+        "enable": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaButton as S, defineCustomElement as d };

package/dist/components/salla-cart-coupons.js

@@ -1,4 +1,287 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as a,HTMLElement as t,h as o,Host as c}from"@stencil/core/internal/client";import{d as i}from"./salla-button2.js";import{d as e}from"./salla-slider2.js";const l=a(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.availableCoupons=[],this.cartTotal=0,this.currentCoupon="",this.couponInputValue="",this.couponError="",this.isApplying=!1,this.isHandlingInternalError=!1,this.cartUpdatedHandler=s=>{this.cartTotal=s.sub_total??s.total??0;const a=s.coupon||"";a!==this.currentCoupon&&(this.currentCoupon=a,this.couponInputValue=a),this.couponError=""},this.couponAddedHandler=()=>{},this.couponAdditionFailedHandler=s=>{this.isApplying||this.isHandlingInternalError||this.showCouponError(s?.message||salla.lang.get("pages.cart.coupon_application_error"))},this.couponDeletedHandler=()=>{},this.onKeyUp=s=>{"Enter"===s.key&&this.couponButtonRef?.click(),this.couponError=""},this.onInput=s=>{this.couponInputValue=s.target.value}}async componentWillLoad(){await Salla.onReady(),await Salla.lang.onLoaded(),this.loadCouponsData(),this.loadCartTotal(),this.setupCartEventListeners()}componentDidLoad(){this.setupCouponInputEvents()}setupCartEventListeners(){salla.event.on("cart::updated",this.cartUpdatedHandler),salla.event.on("cart::coupon.added",this.couponAddedHandler),salla.event.on("cart::coupon.addition.failed",this.couponAdditionFailedHandler),salla.event.on("cart::coupon.deleted",this.couponDeletedHandler)}disconnectedCallback(){this.couponInputRef?.removeEventListener("keyup",this.onKeyUp),this.couponInputRef?.removeEventListener("input",this.onInput),salla.event.off("cart::updated",this.cartUpdatedHandler),salla.event.off("cart::coupon.added",this.couponAddedHandler),salla.event.off("cart::coupon.addition.failed",this.couponAdditionFailedHandler),salla.event.off("cart::coupon.deleted",this.couponDeletedHandler)}async selectCoupon(s){const a=this.availableCoupons.find((a=>a.code===s));if(a){if(!this.isEligible(a))throw Error("Coupon not eligible: minimum cart amount not met");try{await this.applyCoupon(s),this.host.dispatchEvent(new CustomEvent("salla::cart-coupons.coupon.selected",{detail:a,bubbles:!0}))}catch(s){throw s}}return a}async loadCouponsData(){try{const s=await salla.api.request("coupons"),a=s?.data;this.availableCoupons=Array.isArray(a)?a:Array.isArray(a?.data)?a.data:[]}catch(s){console.warn("Failed to load coupons:",s),this.availableCoupons=[]}}loadCartTotal(){const s=salla.storage.get("cart");this.cartTotal=s?.summary?.sub_total??s?.sub_total??0,this.currentCoupon=s?.coupon||"",this.couponInputValue=s?.coupon||""}setupCouponInputEvents(){this.couponInputRef&&this.couponButtonRef&&(this.couponInputRef.addEventListener("keyup",this.onKeyUp),this.couponInputRef.addEventListener("input",this.onInput))}async handleCouponButtonClick(){if(this.isApplying)return;const s=!!this.currentCoupon;if(s||this.couponInputValue.trim()){this.isApplying=!0,this.isHandlingInternalError=!0;try{s?await salla.cart.deleteCoupon():await salla.cart.addCoupon(this.couponInputValue.trim())}catch(s){this.showCouponError(s.response?.data?.error?.message||salla.lang.get("pages.cart.coupon_application_error"))}finally{this.isApplying=!1,setTimeout((()=>{this.isHandlingInternalError=!1}),100)}}else this.showCouponError(salla.lang.get("pages.cart.enter_coupon_code"))}showCouponError(s){this.couponError=s}handleCouponClick(s){this.applyCoupon(s.code,!1).catch((()=>{}))}async applyCoupon(s,a=!0){if(this.isApplying){if(a)throw Error("Coupon application already in progress")}else{this.couponInputValue=s,this.couponError="",this.isApplying=!0,this.isHandlingInternalError=!0;try{await salla.cart.addCoupon(s.trim())}catch(s){if(this.showCouponError(s.response?.data?.error?.message||salla.lang.get("pages.cart.coupon_application_error")),a)throw s}finally{this.isApplying=!1,setTimeout((()=>{this.isHandlingInternalError=!1}),100)}}}formatMainAmount(s){if("percentage"===s.type)return salla.helpers.number("object"==typeof s.amount?s.amount.amount:s.amount)+"%";{const a="object"==typeof s.amount?s.amount:{amount:s.amount,currency:s.minimum_amount?.currency||salla.config.get("store.currency.code","SAR")};return o("span",{innerHTML:salla.money(a.amount,a.currency)})}}isEligible(s){return!(s.minimum_amount&&this.cartTotal<parseFloat(s.minimum_amount.amount))}renderCouponCard(s){const a=this.isEligible(s);return o("div",{class:"s-cart-coupons-slide-one-fourth swiper-slide"},o("div",{class:"s-cart-coupons-card "+(!a||this.isApplying?"s-cart-coupons-disabled":""),onClick:()=>a&&!this.isApplying&&this.handleCouponClick(s)},o("div",{class:"s-cart-coupons-top-section"},o("div",{class:"s-cart-coupons-discount-values"},o("div",{class:"s-cart-coupons-main-amount"},this.formatMainAmount(s)),s.free_shipping?o("div",{class:"s-cart-coupons-secondary-info"},"+ ",salla.lang.get("pages.cart.free_shipping")):s.maximum_amount&&o("div",{class:"s-cart-coupons-secondary-info"},salla.lang.get("pages.cart.up_to")," ",o("span",{innerHTML:salla.money(s.maximum_amount.amount,s.maximum_amount.currency)}))),o("div",{class:"s-cart-coupons-code"},s.code)),o("div",{class:"s-cart-coupons-divider"}),o("div",{class:"s-cart-coupons-bottom-section"},o("div",{class:"s-cart-coupons-terms"},null!=s.remaining_days&&o("div",{class:"s-cart-coupons-expiry "+(s.remaining_days<=3?"s-cart-coupons-expiry-warning":"")},0===s.remaining_days?salla.lang.get("pages.cart.expires_today"):`${salla.lang.get("pages.cart.expires_after")} ${s.remaining_days} ${salla.lang.get("pages.cart.day")}`),s.minimum_amount&&parseFloat(s.minimum_amount.amount)>0&&o("div",{class:"s-cart-coupons-minimum"},salla.lang.get("pages.cart.minimum")," ",o("span",{innerHTML:salla.money(s.minimum_amount.amount,s.minimum_amount.currency)}))),o("div",{class:"s-cart-coupons-action"},a?salla.lang.get("pages.cart.save_coupon"):salla.lang.get("pages.cart.coupon_not_compatible")))))}render(){return o(c,{key:"f3f3d943ab2c1a6488a1da02d2cc031dbc88b482"},o("div",{key:"abf88828017041b19a6c54ba2f99e6c246bd8d04",class:"s-cart-coupons-wrapper"},o("div",{key:"c2946579a7cca935722997229f50ede603acb8b2",class:"s-cart-coupons-input-section"},o("label",{key:"50042d827c86daf853babd4e41ba3a920aceda9d",htmlFor:"coupon-input",class:"s-cart-coupons-coupon-label"},salla.lang.get("pages.cart.have_coupon")),o("div",{key:"4b01047727bd3a83f6cfbac37221e7732076248f",class:"s-cart-coupons-coupon-input-container"},o("input",{key:"555108f68b7a60c618d9a904905ef321cd274c7a",type:"text",id:"coupon-input",name:"coupon",class:"form-input "+(this.couponError?"s-coupon-input-error":""),placeholder:salla.lang.get("pages.cart.coupon_placeholder"),value:this.couponInputValue,disabled:!!this.currentCoupon||this.isApplying,ref:s=>this.couponInputRef=s,"aria-label":salla.lang.get("pages.cart.apply_coupon")}),o("salla-button",{key:"0416bbaf029f7d8951ca6a419cdc676ae50ee792",ref:s=>this.couponButtonRef=s,class:"s-cart-coupons-coupon-button "+(this.currentCoupon?"s-cart-coupons-coupon-button-remove":"s-cart-coupons-coupon-button-apply"),color:this.currentCoupon?"danger":"primary",loading:this.isApplying,"loader-position":"center",onClick:()=>this.handleCouponButtonClick()},this.currentCoupon?o("i",{class:"sicon-cancel"}):o("span",null,salla.lang.get("pages.cart.save_coupon")))),this.couponError&&o("span",{key:"f7c77e8676cb07b4820b571dbd8ee25dca79a1b1",class:"s-cart-coupons-coupon-error"},this.couponError)),this.availableCoupons&&this.availableCoupons.length>0&&o("salla-slider",{key:"daee9c6705de734d5f81ff86d92ad6952b5a7332",type:"carousel",showControls:!1,class:"s-cart-coupons-slider"},o("div",{key:"5d5ef30a6ff7f7c2b406cc5cec6622c2f028d17e",slot:"items"},this.availableCoupons.map((s=>this.renderCouponCard(s)))))))}get host(){return this}static get style(){return""}},[0,"salla-cart-coupons",{availableCoupons:[32],cartTotal:[32],currentCoupon:[32],couponInputValue:[32],couponError:[32],isApplying:[32],selectCoupon:[64]}]);function n(){"undefined"!=typeof customElements&&["salla-cart-coupons","salla-button","salla-slider"].forEach((a=>{switch(a){case"salla-cart-coupons":customElements.get(s(a))||customElements.define(s(a),l);break;case"salla-button":customElements.get(s(a))||i();break;case"salla-slider":customElements.get(s(a))||e()}}))}n();const r=l,p=n;export{r as SallaCartCoupons,p as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './salla-button2.js';
+import { d as defineCustomElement$2 } from './salla-slider2.js';
+
+const sallaCartCouponsCss = "";
+
+const SallaCartCoupons$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartCoupons extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.availableCoupons = [];
+        this.cartTotal = 0;
+        this.currentCoupon = '';
+        this.couponInputValue = '';
+        this.couponError = '';
+        this.isApplying = false;
+        this.isHandlingInternalError = false;
+        // Store cart event listener references for cleanup
+        this.cartUpdatedHandler = (cartData) => {
+            this.cartTotal = cartData.sub_total ?? cartData.total ?? 0;
+            // Update current coupon state
+            const couponCode = cartData.coupon || '';
+            // Only overwrite the user's typed value when the cart-level coupon itself changes
+            if (couponCode !== this.currentCoupon) {
+                this.currentCoupon = couponCode;
+                this.couponInputValue = couponCode;
+            }
+            // Clear error when cart updates
+            this.couponError = '';
+        };
+        this.couponAddedHandler = () => {
+            // Coupon was successfully added - state is managed by cartUpdatedHandler
+        };
+        this.couponAdditionFailedHandler = (error) => {
+            // Only handle external coupon failures when no internal operation is handling errors
+            if (!this.isApplying && !this.isHandlingInternalError) {
+                this.showCouponError(error?.message || salla.lang.get('pages.cart.coupon_application_error'));
+            }
+            // Internal operations handle their own errors to prevent double display
+        };
+        this.couponDeletedHandler = () => {
+            // Coupon was removed - state is managed by cartUpdatedHandler
+        };
+        // Arrow functions to maintain context for event listeners
+        this.onKeyUp = (event) => {
+            if (event.key === 'Enter') {
+                this.couponButtonRef?.click();
+            }
+            this.couponError = '';
+        };
+        this.onInput = (event) => {
+            this.couponInputValue = event.target.value;
+        };
+    }
+    async componentWillLoad() {
+        await Salla.onReady();
+        await Salla.lang.onLoaded();
+        //then set your logic here to avoid any race condition
+        this.loadCouponsData(); // Load async without blocking render - shows empty until loaded
+        this.loadCartTotal();
+        this.setupCartEventListeners();
+        // Note: No store feature gate needed - coupon availability controlled by backend API response
+    }
+    componentDidLoad() {
+        this.setupCouponInputEvents();
+    }
+    setupCartEventListeners() {
+        // Listen for cart updates to refresh cart total
+        salla.event.on('cart::updated', this.cartUpdatedHandler);
+        // Listen for coupon events
+        salla.event.on('cart::coupon.added', this.couponAddedHandler);
+        salla.event.on('cart::coupon.addition.failed', this.couponAdditionFailedHandler);
+        salla.event.on('cart::coupon.deleted', this.couponDeletedHandler);
+    }
+    disconnectedCallback() {
+        // Clean up DOM event listeners
+        this.couponInputRef?.removeEventListener('keyup', this.onKeyUp);
+        this.couponInputRef?.removeEventListener('input', this.onInput);
+        // Clean up cart event listeners using reliable global event system
+        salla.event.off('cart::updated', this.cartUpdatedHandler);
+        salla.event.off('cart::coupon.added', this.couponAddedHandler);
+        salla.event.off('cart::coupon.addition.failed', this.couponAdditionFailedHandler);
+        salla.event.off('cart::coupon.deleted', this.couponDeletedHandler);
+    }
+    /**
+     * Business Decision: No visual selected state needed
+     * UX Flow: Click coupon → populate input → auto-apply (streamlined experience)
+     */
+    async selectCoupon(couponCode) {
+        const selectedCoupon = this.availableCoupons.find(coupon => coupon.code === couponCode);
+        if (selectedCoupon) {
+            if (!this.isEligible(selectedCoupon)) {
+                throw new Error(`Coupon not eligible: minimum cart amount not met`);
+            }
+            try {
+                // Actually apply the coupon to the cart first
+                await this.applyCoupon(couponCode);
+                // Only dispatch event after successful API call
+                this.host.dispatchEvent(new CustomEvent('salla::cart-coupons.coupon.selected', {
+                    detail: selectedCoupon,
+                    bubbles: true
+                }));
+            }
+            catch (error) {
+                // Rethrow to let caller handle the error
+                throw error;
+            }
+        }
+        return selectedCoupon;
+    }
+    async loadCouponsData() {
+        try {
+            // Load coupons from API
+            const response = await salla.api.request('coupons');
+            const raw = response?.data;
+            const coupons = Array.isArray(raw) ? raw : (Array.isArray(raw?.data) ? raw.data : []);
+            this.availableCoupons = coupons;
+        }
+        catch (error) {
+            console.warn('Failed to load coupons:', error);
+            // No coupons available on error
+            this.availableCoupons = [];
+        }
+    }
+    loadCartTotal() {
+        // Get cart total and current coupon from Salla storage
+        const cart = salla.storage.get('cart');
+        // Check summary first (more accurate), then cart level, fallback to 0
+        this.cartTotal = cart?.summary?.sub_total ?? cart?.sub_total ?? 0;
+        this.currentCoupon = cart?.coupon || '';
+        this.couponInputValue = cart?.coupon || '';
+    }
+    setupCouponInputEvents() {
+        if (!this.couponInputRef || !this.couponButtonRef) {
+            return;
+        }
+        this.couponInputRef.addEventListener('keyup', this.onKeyUp);
+        this.couponInputRef.addEventListener('input', this.onInput);
+    }
+    async handleCouponButtonClick() {
+        if (this.isApplying) {
+            return;
+        }
+        const hasCoupon = !!this.currentCoupon;
+        if (!hasCoupon && !this.couponInputValue.trim()) {
+            this.showCouponError(salla.lang.get('pages.cart.enter_coupon_code'));
+            return;
+        }
+        this.isApplying = true;
+        this.isHandlingInternalError = true;
+        try {
+            if (hasCoupon) {
+                // Remove existing coupon
+                await salla.cart.deleteCoupon();
+            }
+            else {
+                // Apply new coupon
+                await salla.cart.addCoupon(this.couponInputValue.trim());
+            }
+        }
+        catch (error) {
+            this.showCouponError(error.response?.data?.error?.message || salla.lang.get('pages.cart.coupon_application_error'));
+        }
+        finally {
+            this.isApplying = false;
+            // Keep internal error flag active briefly to prevent race condition with SDK event
+            setTimeout(() => {
+                this.isHandlingInternalError = false;
+            }, 100);
+        }
+    }
+    showCouponError(message) {
+        this.couponError = message;
+    }
+    handleCouponClick(coupon) {
+        this.applyCoupon(coupon.code, false).catch(() => {
+            // Error already displayed by applyCoupon
+        });
+    }
+    async applyCoupon(couponCode, shouldThrow = true) {
+        if (this.isApplying) {
+            if (shouldThrow) {
+                throw new Error('Coupon application already in progress');
+            }
+            else {
+                return; // Silent return for card clicks when operation is already in progress
+            }
+        }
+        // Update the input field with the coupon code
+        this.couponInputValue = couponCode;
+        // Clear any existing errors
+        this.couponError = '';
+        this.isApplying = true;
+        this.isHandlingInternalError = true;
+        try {
+            // Apply the coupon directly without checking for existing coupon
+            await salla.cart.addCoupon(couponCode.trim());
+        }
+        catch (error) {
+            this.showCouponError(error.response?.data?.error?.message || salla.lang.get('pages.cart.coupon_application_error'));
+            // Re-throw error only if requested (for selectCoupon API)
+            if (shouldThrow) {
+                throw error;
+            }
+        }
+        finally {
+            this.isApplying = false;
+            // Keep internal error flag active briefly to prevent race condition with SDK event
+            setTimeout(() => {
+                this.isHandlingInternalError = false;
+            }, 100);
+        }
+    }
+    formatMainAmount(coupon) {
+        if (coupon.type === 'percentage') {
+            // For percentage coupons, amount should be a string or number
+            const percentageValue = typeof coupon.amount === 'object' ? coupon.amount.amount : coupon.amount;
+            return `${salla.helpers.number(percentageValue)}%`;
+        }
+        else {
+            // For fixed coupons, amount is an object with amount and currency
+            const amountData = typeof coupon.amount === 'object' ? coupon.amount : {
+                amount: coupon.amount,
+                currency: coupon.minimum_amount?.currency || salla.config.get('store.currency.code', 'SAR')
+            };
+            return (h("span", { innerHTML: salla.money(amountData.amount, amountData.currency) }));
+        }
+    }
+    isEligible(coupon) {
+        if (coupon.minimum_amount && this.cartTotal < parseFloat(coupon.minimum_amount.amount)) {
+            return false; // Coupon is not eligible due to minimum amount requirement
+        }
+        return true;
+    }
+    renderCouponCard(coupon) {
+        const isEligible = this.isEligible(coupon);
+        // Note: Card notches (ticket-style pseudo-elements) match card background, not page background - this is intentional design
+        return (h("div", { class: "s-cart-coupons-slide-one-fourth swiper-slide" }, h("div", { class: `s-cart-coupons-card ${!isEligible || this.isApplying ? 's-cart-coupons-disabled' : ''}`, onClick: () => isEligible && !this.isApplying && this.handleCouponClick(coupon) }, h("div", { class: "s-cart-coupons-top-section" }, h("div", { class: "s-cart-coupons-discount-values" }, h("div", { class: "s-cart-coupons-main-amount" }, this.formatMainAmount(coupon)), coupon.free_shipping ? (h("div", { class: "s-cart-coupons-secondary-info" }, "+ ", salla.lang.get('pages.cart.free_shipping'))) : coupon.maximum_amount && (h("div", { class: "s-cart-coupons-secondary-info" }, salla.lang.get('pages.cart.up_to'), " ", h("span", { innerHTML: salla.money(coupon.maximum_amount.amount, coupon.maximum_amount.currency) })))), h("div", { class: "s-cart-coupons-code" }, coupon.code)), h("div", { class: "s-cart-coupons-divider" }), h("div", { class: "s-cart-coupons-bottom-section" }, h("div", { class: "s-cart-coupons-terms" }, coupon.remaining_days !== undefined && coupon.remaining_days !== null && (h("div", { class: `s-cart-coupons-expiry ${coupon.remaining_days <= 3 ? 's-cart-coupons-expiry-warning' : ''}` }, coupon.remaining_days === 0
+            ? salla.lang.get('pages.cart.expires_today')
+            : `${salla.lang.get('pages.cart.expires_after')} ${coupon.remaining_days} ${salla.lang.get('pages.cart.day')}`)), coupon.minimum_amount && parseFloat(coupon.minimum_amount.amount) > 0 && (h("div", { class: "s-cart-coupons-minimum" }, salla.lang.get('pages.cart.minimum'), " ", h("span", { innerHTML: salla.money(coupon.minimum_amount.amount, coupon.minimum_amount.currency) })))), h("div", { class: "s-cart-coupons-action" }, isEligible ? salla.lang.get('pages.cart.save_coupon') : salla.lang.get('pages.cart.coupon_not_compatible'))))));
+    }
+    render() {
+        return (h(Host, { key: 'f3f3d943ab2c1a6488a1da02d2cc031dbc88b482' }, h("div", { key: 'abf88828017041b19a6c54ba2f99e6c246bd8d04', class: "s-cart-coupons-wrapper" }, h("div", { key: 'c2946579a7cca935722997229f50ede603acb8b2', class: "s-cart-coupons-input-section" }, h("label", { key: '50042d827c86daf853babd4e41ba3a920aceda9d', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '4b01047727bd3a83f6cfbac37221e7732076248f', class: "s-cart-coupons-coupon-input-container" }, h("input", { key: '555108f68b7a60c618d9a904905ef321cd274c7a', type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: !!this.currentCoupon || this.isApplying, ref: el => this.couponInputRef = el, "aria-label": salla.lang.get('pages.cart.apply_coupon') }), h("salla-button", { key: '0416bbaf029f7d8951ca6a419cdc676ae50ee792', ref: el => this.couponButtonRef = el, class: `s-cart-coupons-coupon-button ${this.currentCoupon ? 's-cart-coupons-coupon-button-remove' : 's-cart-coupons-coupon-button-apply'}`, color: this.currentCoupon ? 'danger' : 'primary', loading: this.isApplying, "loader-position": "center", onClick: () => this.handleCouponButtonClick() }, this.currentCoupon ? (h("i", { class: "sicon-cancel" })) : (h("span", null, salla.lang.get('pages.cart.save_coupon'))))), this.couponError && (h("span", { key: 'f7c77e8676cb07b4820b571dbd8ee25dca79a1b1', class: "s-cart-coupons-coupon-error" }, this.couponError))), this.availableCoupons && this.availableCoupons.length > 0 && (h("salla-slider", { key: 'daee9c6705de734d5f81ff86d92ad6952b5a7332', type: "carousel", showControls: false, class: "s-cart-coupons-slider" }, h("div", { key: '5d5ef30a6ff7f7c2b406cc5cec6622c2f028d17e', slot: "items" }, this.availableCoupons.map(coupon => this.renderCouponCard(coupon))))))));
+    }
+    get host() { return this; }
+    static get style() { return sallaCartCouponsCss; }
+}, [0, "salla-cart-coupons", {
+        "availableCoupons": [32],
+        "cartTotal": [32],
+        "currentCoupon": [32],
+        "couponInputValue": [32],
+        "couponError": [32],
+        "isApplying": [32],
+        "selectCoupon": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-cart-coupons", "salla-button", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-cart-coupons":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCartCoupons$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaCartCoupons = SallaCartCoupons$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCartCoupons, defineCustomElement };