@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-add-product-button2.js

@@ -1,4 +1,309 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as i,createEvent as a,h as l,Host as o}from"@stencil/core/internal/client";import{P as e}from"./cart.js";import{H as n}from"./Helper.js";import{d as c}from"./salla-button2.js";import{d as h}from"./salla-loading2.js";import{d}from"./salla-modal2.js";import{d as u}from"./salla-product-availability2.js";import{d as r}from"./salla-quick-buy2.js";import{d as p}from"./salla-tel-input2.js";const b=s(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.success=a(this,"success",7),this.failed=a(this,"failed",7),this.hostAttributes={},this.hasPreOrder=!1,this.productStatus="sale",this.productType="product",this.selectedOptions=[],this.buyNowText=salla.lang.get("pages.products.buy_now"),this.isDesktopViewport="undefined"==typeof window||window.matchMedia("(min-width: 768px)").matches,this.viewportMediaQuery=null,this.onViewportChange=t=>{this.isDesktopViewport=t.matches,this.btn?.setText(t.matches&&this.passedLabel?this.passedLabel:this.getLabel())},salla.lang.onLoaded((()=>{this.buyNowText=salla.lang.get("pages.products.buy_now")}))}getLabel(){return"sale"===this.productStatus&&this.supportStickyBar&&!this.isDesktopViewport&&this.showQuickBuy&&this.isApplePayActive?e:this.hasPreOrder?salla.lang.get("pages.products.pre_order_now"):"sale"===this.productStatus&&"booking"===this.productType?salla.lang.get("pages.cart.book_now"):"sale"===this.productStatus?salla.lang.get("pages.cart.add_to_cart"):"donating"!==this.productType?salla.lang.get("pages.products.out_of_stock"):salla.lang.get("pages.products.donation_exceed")}addProductToCart(t){if("booking"===this.productType)return t.preventDefault(),this.addBookingProduct();if("submit"===this.hostAttributes.type)return!1;t.preventDefault(),this.btn?.disable();const s=document.querySelector(`salla-product-options[product-id="${this.productId}"]`);return s&&"function"==typeof s.validateAndScroll?s.validateAndScroll().then((async t=>{const s={isValid:t,component:this};if(await salla.hooks.call("salla-add-product-button","validate",s),s.isValid)return this._proceedAddToCart();this.btn?.enable()})).catch((()=>{this.btn?.enable()})):this._proceedAddToCart()}async _proceedAddToCart(){const t=this.host.closest("salla-products-list, salla-products-slider"),s=Object.entries({id:this.productId,donation_amount:this.donatingAmount,quantity:this.quantity,endpoint:"quickAdd",source:n.getProductsSource(t?.getAttribute("source"))}).reduce(((t,[s,i])=>i?(t[s]=i,t):t),{});return salla.cart.addItem(s).then((async t=>(this.selectedOptions=[],this.btn?.enable(),this.success.emit(t),t))).catch((t=>{this.failed.emit(t),this.btn?.enable()}))}addBookingProduct(){return salla.config.isGuest()?(salla.auth.api.setAfterLoginEvent("booking::add",this.productId),void salla.event.dispatch("login::open")):salla.booking.add(this.productId).then((t=>this.success.emit(t))).catch((t=>this.failed.emit(t)))}getBtnAttributes(){for(let t=0;t<this.host.attributes.length;t++)["id","class"].includes(this.host.attributes[t].name)||(this.hostAttributes[this.host.attributes[t].name]=this.host.attributes[t].value);return this.hostAttributes}getQuickBuyBtnAttributes(){return{...this.getBtnAttributes(),type:this.supportStickyBar&&!this.isDesktopViewport?"plain":"donating"==this.productType?"donate":"buy"}}miniCheckoutWidget(){let t=salla.config.get("store.id");if(t)return l("salla-mini-checkout-widget",{language:salla.lang.locale,"store-id":t,config:{user:salla.config.get("user"),failure_url:window.location.href},products:[this.productId],api:salla.config.get("store.api"),outline:!0,"form-selector":"form.product-form",class:"s-add-product-button-mini-checkout"},l("div",{slot:"widget-label",class:"s-add-product-button-mini-checkout-content"},l("span",{innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>full-wallet</title>\n<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>\n</svg>\n'}),this.buyNowText))}componentWillLoad(){return salla.onReady().then((()=>{if(document.documentElement.classList.add("hydrated"),this.showQuickBuy=this.quickBuy&&salla.config.get("store.settings.buy_now")&&"sale"==this.productStatus&&"booking"!==this.productType,this.isApplePayActive=window.ApplePaySession?.canMakePayments()&&salla.config.get("store.settings.payments")?.includes("apple_pay")&&salla.config.get("store.settings.is_salla_gateway",!1),this.passedLabel=this.host.innerHTML.replace("\x3c!----\x3e","").trim(),this.passedLabel&&this.isDesktopViewport)return this.btn?.setText(this.passedLabel);"submit"===this.host.getAttribute("type")&&this.supportStickyBar&&(this.viewportMediaQuery=window.matchMedia("(min-width: 768px)"),this.viewportMediaQuery.addEventListener("change",this.onViewportChange))}))}render(){return this.host.closest(".swiper-slide")?.classList.contains("swiper-slide-duplicate")?"":this.hasSubscribedOptions?l(o,null,l("salla-product-availability",{...this.getBtnAttributes(),"is-subscribed":!0},l("span",{class:"s-hidden"},l("slot",null)))):"out-and-notify"===this.productStatus&&this.channels||this.hasOutOfStockOption?l(o,null,l("salla-product-availability",{...this.getBtnAttributes()},l("span",{class:"s-hidden"},l("slot",null)))):l(o,{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}},l("div",{class:{"s-add-product-button-main":this.showQuickBuy,"w-full":!document.getElementById("fast-checkout-js")||["financial_support","donating"].includes(this.productType)}},l("salla-button",{color:"sale"===this.productStatus?"primary":"light",type:"button",fill:"sale"===this.productStatus?"solid":"outline",ref:t=>this.btn=t,onClick:t=>this.addProductToCart(t),disabled:"sale"!==this.productStatus,...this.getBtnAttributes(),"loader-position":"center"},l("slot",null)),this.showQuickBuy&&document.getElementById("fast-checkout-js")&&!["financial_support","donating"].includes(this.productType)?this.miniCheckoutWidget():""),this.showQuickBuy&&this.isApplePayActive?l("salla-quick-buy",{...this.getQuickBuyBtnAttributes()}):"")}async componentDidLoad(){await Salla.hooks.registerComponent("salla-add-product-button",this),this.notifyOptionsAvailability&&salla.event.on("product-options::change",(async t=>{if(!["thumbnail","color","single-option"].includes(t.option.type))return;this.hasSubscribedOptions=!1,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 s=salla.storage.get(`product-${this.productId}-subscribed-options`);if((s||this.subscribedOptions)&&this.hasOutOfStockOption)if(salla.config.isGuest()){const t=s?s.map((t=>t.split(",").map((t=>parseInt(t))))):[];this.hasSubscribedOptions=t.length>0&&t.some((t=>t.every((t=>this.selectedOptions.some((s=>s.id===t))))))}else this.hasSubscribedOptions=!(!this.subscribedOptions||"null"===this.subscribedOptions||"[]"===this.subscribedOptions)&&JSON.parse(this.subscribedOptions).some((t=>t.every((t=>this.selectedOptions.some((s=>s.id===t))))))}))}componentDidRender(){!this.passedLabel||this.supportStickyBar&&!this.isDesktopViewport?(this.btn?.setText(this.getLabel()),salla.lang.onLoaded((()=>this.btn?.setText(this.getLabel())))):this.btn?.setText(this.passedLabel)}disconnectedCallback(){this.viewportMediaQuery?.removeEventListener("change",this.onViewportChange)}get host(){return this}static get style(){return":host{display:block}salla-add-product-button[width=wide]{width:100%}"}},[260,"salla-add-product-button",{channels:[513],subscribedOptions:[1,"subscribed-options"],hasPreOrder:[516,"has-pre-order"],quickBuy:[1540,"quick-buy"],quantity:[514],donatingAmount:[514,"donating-amount"],notifyOptionsAvailability:[516,"notify-options-availability"],productId:[520,"product-id"],supportStickyBar:[516,"support-sticky-bar"],productStatus:[513,"product-status"],productType:[513,"product-type"],hasOutOfStockOption:[32],hasSubscribedOptions:[32],selectedOptions:[32],showQuickBuy:[32],isApplePayActive:[32],buyNowText:[32],isDesktopViewport:[32]}]);function m(){"undefined"!=typeof customElements&&["salla-add-product-button","salla-button","salla-loading","salla-modal","salla-product-availability","salla-quick-buy","salla-tel-input"].forEach((s=>{switch(s){case"salla-add-product-button":customElements.get(t(s))||customElements.define(t(s),b);break;case"salla-button":customElements.get(t(s))||c();break;case"salla-loading":customElements.get(t(s))||h();break;case"salla-modal":customElements.get(t(s))||d();break;case"salla-product-availability":customElements.get(t(s))||u();break;case"salla-quick-buy":customElements.get(t(s))||r();break;case"salla-tel-input":customElements.get(t(s))||p()}}))}m();export{b as S,m as d}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { P as PendingOrdersIcon } from './cart.js';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-product-availability2.js';
+import { d as defineCustomElement$2 } from './salla-quick-buy2.js';
+import { d as defineCustomElement$1 } from './salla-tel-input2.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 = /*@__PURE__*/ proxyCustomElement(class SallaAddProductButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.success = createEvent(this, "success", 7);
+        this.failed = createEvent(this, "failed", 7);
+        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 parent = this.host.closest('salla-products-list, salla-products-slider');
+        const data = Object.entries({
+            id: this.productId,
+            donation_amount: this.donatingAmount,
+            quantity: this.quantity,
+            endpoint: 'quickAdd',
+            source: Helper.getProductsSource(parent?.getAttribute('source'))
+        }).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 this; }
+    static get style() { return sallaAddProductButtonCss; }
+}, [4, "salla-add-product-button", {
+        "channels": [513],
+        "subscribedOptions": [1, "subscribed-options"],
+        "hasPreOrder": [516, "has-pre-order"],
+        "quickBuy": [1540, "quick-buy"],
+        "quantity": [514],
+        "donatingAmount": [514, "donating-amount"],
+        "notifyOptionsAvailability": [516, "notify-options-availability"],
+        "productId": [520, "product-id"],
+        "supportStickyBar": [516, "support-sticky-bar"],
+        "productStatus": [513, "product-status"],
+        "productType": [513, "product-type"],
+        "hasOutOfStockOption": [32],
+        "hasSubscribedOptions": [32],
+        "selectedOptions": [32],
+        "showQuickBuy": [32],
+        "isApplePayActive": [32],
+        "buyNowText": [32],
+        "isDesktopViewport": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-add-product-button", "salla-button", "salla-loading", "salla-modal", "salla-product-availability", "salla-quick-buy", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaAddProductButton);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaAddProductButton as S, defineCustomElement as d };

package/dist/components/salla-advertisement.js

@@ -1,4 +1,158 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as e,h as a}from"@stencil/core/internal/client";import{a as i}from"./anime.es.js";const l=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.currentSlug=salla.config.get("page.slug"),salla.onReady((()=>{this.currentSlug=salla.config.get("page.slug")})),this.advSlot=this.host.querySelector('[slot="adv"]')?.innerHTML||'<div class="s-advertisement-content"><span class="s-advertisement-content-main">{iconElem}{urlElem}</span>{closeElem}</div>\n    '}isNotVisible(t){return!(salla.config.isDebug()||salla.helpers.isPreview()||!salla.storage.get("statusAd-"+t.id))}setCanDisplayFlag(t,s){s||(salla.storage.set("statusAd-"+t.id,"dismissed"),i({targets:this.host,opacity:[1,0],duration:300,height:[this.host.clientHeight,0],easing:"easeInOutQuad"}))}render(){if((!Array.isArray(this.advertisements)||this.advertisements.length)&&this.advertisements)return this.advertisements.map((t=>a("div",{class:{"s-hidden":this.isNotVisible(t),"s-advertisement":!0},"data-id":t.id,style:{"background-color":t.colors.bg,color:t.colors.text}},a("div",{id:"adv-slot",innerHTML:this.advSlot.replace("{iconElem}",`<i class="s-advertisement-content-icon ${t.icon}"></i>`).replace("{urlElem}",t.url?`<a href="${t.url}" target="${t.target}">${t.description}</a>`:t.description).replace("{closeElem}",'<button class="s-advertisement-action" aria-label="close-alert"><i class="sicon-cancel"></i></button>').replace("{icon}",t.icon).replace("{url}",t.url).replace("{target}",t.target).replace("{description}",t.description).replace("{bg_color}",t.colors.bg).replace("{text_color}",t.colors.text)}))))}componentWillLoad(){return(async()=>{if(salla.config.isMobileApp())return[];const t=salla.config.isDebug()||salla.helpers.isPreview();await new Promise((t=>salla.onReady(t)));const s=t?null:this.currentSlug,e=await salla.api.advertisement.fetch(s);if(Array.isArray(e.data)){const s=e.data;this.advertisements=t?s:s.filter((t=>!salla.storage.get("statusAd-"+t.id)))}else this.advertisements=[];return this.advertisements})()}componentDidRender(){Array.isArray(this.advertisements)&&!this.advertisements.length||!this.advertisements||(setTimeout((()=>{let t=this.host.querySelector(".s-advertisement-action");t&&t.addEventListener("click",(()=>this.setCanDisplayFlag(this.advertisements[0],!1)))})),this.host.querySelectorAll("#adv-slot").forEach((t=>t?.replaceWith(t?.firstChild))),this.host.querySelector('[slot="adv"]')?.remove(),i({targets:this.host,opacity:[0,1],duration:300,height:[0,this.host.clientHeight],easing:"easeInOutQuad"}))}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-advertisement",{position:[32],advertisements:[32],advertIcon:[32],currentSlug:[32]}]);function n(){"undefined"!=typeof customElements&&["salla-advertisement"].forEach((s=>{"salla-advertisement"===s&&(customElements.get(t(s))||customElements.define(t(s),l))}))}n();const r=l,o=n;export{r as SallaAdvertisement,o as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+
+const sallaAdvertisementCss = ":host{display:block}";
+
+const SallaAdvertisement$1 = /*@__PURE__*/ proxyCustomElement(class SallaAdvertisement extends HTMLElement {
+    /**
+    * Constructor for initializing the component.
+    */
+    constructor() {
+        super();
+        this.__registerHost();
+        this.currentSlug = salla.config.get("page.slug");
+        salla.onReady(() => {
+            this.currentSlug = salla.config.get("page.slug");
+        });
+        this.advSlot = this.host.querySelector('[slot="adv"]')?.innerHTML || `<div class="s-advertisement-content"><span class="s-advertisement-content-main">{iconElem}{urlElem}</span>{closeElem}</div>
+    `;
+    }
+    /**
+     * Checks whether an advertisement is marked as not visible/dismissed.
+     * @param advert - The advertisement to check.
+     * @returns True if the advertisement is not visible, false otherwise.
+     */
+    isNotVisible(advert) {
+        const isPreview = salla.config.isDebug() || salla.helpers.isPreview();
+        // ? Show advertisement in preview mode
+        if (isPreview)
+            return false;
+        return !!salla.storage.get(`statusAd-${advert.id}`);
+    }
+    /**
+     * Sets a flag to control the visibility of an advertisement and triggers an animation when hiding it.
+     * @param advert - The advertisement to update.
+     * @param flag - The flag indicating whether to display or hide the advertisement.
+     */
+    setCanDisplayFlag(advert, flag) {
+        if (!flag) {
+            // Set the statusAd flag to 'dismissed'
+            salla.storage.set(`statusAd-${advert.id}`, 'dismissed');
+            // Trigger an animation to hide the advertisement
+            anime({
+                targets: this.host,
+                opacity: [1, 0],
+                duration: 300,
+                height: [this.host.clientHeight, 0],
+                easing: 'easeInOutQuad',
+            });
+        }
+    }
+    /**
+     * Renders the advertisements based on the fetched data and visibility status.
+     * @returns JSX for rendering advertisements.
+     */
+    render() {
+        if ((Array.isArray(this.advertisements) && !this.advertisements.length) || !this.advertisements) {
+            return;
+        }
+        return this.advertisements.map((advertisement) => {
+            return h("div", { class: { "s-hidden": this.isNotVisible(advertisement), 's-advertisement': true }, "data-id": advertisement.id, style: { "background-color": advertisement.colors.bg, "color": advertisement.colors.text } }, h("div", { id: "adv-slot", innerHTML: this.advSlot
+                    // Replace the props with the advertisement data
+                    // !Note: The props with the 'Elem' suffix are for internal use only.
+                    .replace("{iconElem}", `<i class="s-advertisement-content-icon ${advertisement.icon}"></i>`)
+                    .replace("{urlElem}", advertisement.url ? `<a href="${advertisement.url}" target="${advertisement.target}">${advertisement.description}</a>` : advertisement.description)
+                    .replace("{closeElem}", `<button class="s-advertisement-action" aria-label="close-alert"><i class="sicon-cancel"></i></button>`)
+                    .replace('{icon}', advertisement.icon)
+                    .replace('{url}', advertisement.url)
+                    .replace('{target}', advertisement.target)
+                    .replace('{description}', advertisement.description)
+                    .replace('{bg_color}', advertisement.colors.bg)
+                    .replace('{text_color}', advertisement.colors.text) }));
+        });
+    }
+    /**
+    * Lifecycle method that fetches advertisements before the component is loaded.
+    */
+    componentWillLoad() {
+        const getData = async () => {
+            // * Note: Do not show advertisements or load data in mobile app
+            const isMobileApp = salla.config.isMobileApp();
+            if (isMobileApp)
+                return [];
+            const isPreview = salla.config.isDebug() || salla.helpers.isPreview();
+            // Wait for salla to be ready
+            await new Promise(resolve => salla.onReady(resolve));
+            // Fetch advertisements based on the current page
+            const pageSlug = !isPreview ? this.currentSlug : null;
+            const response = await salla.api.advertisement.fetch(pageSlug);
+            if (Array.isArray(response.data)) {
+                const advertisements = response.data;
+                // Show all active advertisements in preview mode
+                if (isPreview) {
+                    this.advertisements = advertisements;
+                }
+                else {
+                    this.advertisements = advertisements.filter(ad => !salla.storage.get(`statusAd-${ad.id}`));
+                }
+            }
+            else {
+                this.advertisements = [];
+            }
+            return this.advertisements;
+        };
+        return getData();
+    }
+    componentDidRender() {
+        if ((Array.isArray(this.advertisements) && !this.advertisements.length) || !this.advertisements) {
+            return;
+        }
+        // Add event listener for the close button
+        setTimeout(() => {
+            let closeBtn = this.host.querySelector('.s-advertisement-action');
+            if (closeBtn) {
+                closeBtn.addEventListener('click', () => this.setCanDisplayFlag(this.advertisements[0], false));
+            }
+        });
+        // Reduce Dom size by removing the slot element
+        this.host.querySelectorAll('#adv-slot').forEach(el => el?.replaceWith(el?.firstChild));
+        this.host.querySelector('[slot="adv"]')?.remove();
+        // Trigger an animation to show the advertisement
+        anime({
+            targets: this.host,
+            opacity: [0, 1],
+            duration: 300,
+            height: [0, this.host.clientHeight],
+            easing: 'easeInOutQuad',
+        });
+    }
+    get host() { return this; }
+    static get style() { return sallaAdvertisementCss; }
+}, [0, "salla-advertisement", {
+        "position": [32],
+        "advertisements": [32],
+        "advertIcon": [32],
+        "currentSlug": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-advertisement"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-advertisement":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaAdvertisement$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaAdvertisement = SallaAdvertisement$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaAdvertisement, defineCustomElement };

package/dist/components/salla-alert.js

@@ -1,4 +1,62 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as s,h as n,Host as r}from"@stencil/core/internal/client";const l=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.variant="info"}renderIcon(){const e=this.icon||this.variant;if("none"===e)return null;switch(e){case"success":return n("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"currentColor"},n("path",{d:"M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z"}));case"warning":return n("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"currentColor"},n("path",{d:"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"}));case"error":return n("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"currentColor"},n("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 \n                     10 10 10-4.48 10-10S17.52 2 12 2zm5 \n                     13.59L15.59 17 12 13.41 8.41 17 \n                     7 15.59 10.59 12 7 8.41 8.41 7 \n                     12 10.59 15.59 7 17 8.41 13.41 \n                     12 17 15.59z"}));default:return n("span",{innerHTML:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.99935 18.3332C5.39697 18.3332 1.66602 14.6022 1.66602 9.99984C1.66602 5.39746 5.39697 1.6665 9.99935 1.6665C14.6017 1.6665 18.3327 5.39746 18.3327 9.99984C18.3327 14.6022 14.6017 18.3332 9.99935 18.3332ZM9.99935 16.6665C13.6813 16.6665 16.666 13.6818 16.666 9.99984C16.666 6.31794 13.6813 3.33317 9.99935 3.33317C6.31745 3.33317 3.33268 6.31794 3.33268 9.99984C3.33268 13.6818 6.31745 16.6665 9.99935 16.6665ZM9.16602 5.83317H10.8327V7.49984H9.16602V5.83317ZM9.16602 9.1665H10.8327V14.1665H9.16602V9.1665Z" fill="#417AC8"/>\n</svg>\n'})}}render(){return n(r,{key:"3b5dd808399eeda5d930454542cd41cca26b0cc3",class:"s-alert-wrapper s-alert-"+this.variant},n("span",{key:"4f58234774d1afc790fb83bff983ca9366faa349",class:"s-alert-icon"},this.renderIcon()),n("span",{key:"10eb3f87e6e77dcc5406a24f866feee1cc1f46ef",class:"s-alert-text"},this.message,n("slot",{key:"3656e15aeb25fb7285e88f694c090bad3b32dfbd"})))}static get style(){return":host{display:block}"}},[260,"salla-alert",{message:[1],variant:[1],icon:[1]}]);function a(){"undefined"!=typeof customElements&&["salla-alert"].forEach((t=>{"salla-alert"===t&&(customElements.get(e(t))||customElements.define(e(t),l))}))}a();const c=l,i=a;export{c as SallaAlert,i as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+var informationIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99935 18.3332C5.39697 18.3332 1.66602 14.6022 1.66602 9.99984C1.66602 5.39746 5.39697 1.6665 9.99935 1.6665C14.6017 1.6665 18.3327 5.39746 18.3327 9.99984C18.3327 14.6022 14.6017 18.3332 9.99935 18.3332ZM9.99935 16.6665C13.6813 16.6665 16.666 13.6818 16.666 9.99984C16.666 6.31794 13.6813 3.33317 9.99935 3.33317C6.31745 3.33317 3.33268 6.31794 3.33268 9.99984C3.33268 13.6818 6.31745 16.6665 9.99935 16.6665ZM9.16602 5.83317H10.8327V7.49984H9.16602V5.83317ZM9.16602 9.1665H10.8327V14.1665H9.16602V9.1665Z" fill="#417AC8"/>
+</svg>
+`;
+
+const sallaAlertCss = ":host{display:block}";
+
+const SallaAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaAlert extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /** Variant theme */
+        this.variant = 'info';
+    }
+    renderIcon() {
+        const type = this.icon || this.variant;
+        if (type === 'none')
+            return null;
+        switch (type) {
+            case 'success':
+                return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, h("path", { d: "M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z" })));
+            case 'warning':
+                return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, h("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })));
+            case 'error':
+                return (h("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "currentColor" }, h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 \n                     10 10 10-4.48 10-10S17.52 2 12 2zm5 \n                     13.59L15.59 17 12 13.41 8.41 17 \n                     7 15.59 10.59 12 7 8.41 8.41 7 \n                     12 10.59 15.59 7 17 8.41 13.41 \n                     12 17 15.59z" })));
+            default:
+                return h("span", { innerHTML: informationIcon });
+        }
+    }
+    render() {
+        return (h(Host, { key: '3b5dd808399eeda5d930454542cd41cca26b0cc3', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '4f58234774d1afc790fb83bff983ca9366faa349', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: '10eb3f87e6e77dcc5406a24f866feee1cc1f46ef', class: "s-alert-text" }, this.message, h("slot", { key: '3656e15aeb25fb7285e88f694c090bad3b32dfbd' }))));
+    }
+    static get style() { return sallaAlertCss; }
+}, [4, "salla-alert", {
+        "message": [1],
+        "variant": [1],
+        "icon": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-alert"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-alert":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaAlert$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaAlert = SallaAlert$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaAlert, defineCustomElement };