@salla.sa/twilight-components/dist/components/salla-loyalty-banner.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { s as setTranslations } from './translations.js';
import { l as loyaltyProgramIcon } from './gift.js';
import { T as TrackedPromise } from './tracked-promise.js';
import { d as defineCustomElement$4 } from './salla-loading2.js';
import { d as defineCustomElement$3 } from './salla-modal2.js';
import { d as defineCustomElement$2 } from './salla-reward-exchange2.js';

const sallaLoyaltyProgramCss = "";

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const SallaLoyaltyBanner$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyBanner extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
    }
    /**
     * Get product ID from data attribute or fallback to page.id
     */
    get productId() {
        return this.host.dataset.productId || salla.config.get('page.id');
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => salla.lang.onLoaded())
            .then(() => setTranslations())
            .then(() => this.prize())
            .catch(error => salla.logger.error(error));
    }
    handleClick() {
        if (salla.config.isGuest()) {
            salla.event.dispatch('login::open');
            return;
        }
        this.exchangeModal.open();
    }
    render() {
        if (this.prize.status !== 'success' || !this.productId) {
            return null;
        }
        return (h("div", { class: "s-loyalty-program-banner-container" }, h("div", null, h("p", { class: "s-loyalty-program-banner-container-banner-title" }, salla.lang.get('pages.loyalty_program.want_to_redeem_free_product')), h("p", { class: "s-loyalty-program-banner-container-banner-subtitle" }, salla.lang.get('pages.loyalty_program.exchange_points_for_free_product', { points: this.prize.data.cost_points }))), h("button", { onClick: () => this.handleClick() }, h("span", { innerHTML: loyaltyProgramIcon }), h("span", null, salla.lang.get('pages.loyalty_program.exchange_points'))), h("salla-modal", { ref: modal => this.exchangeModal = modal, width: "sm" }, !this.prize.data ? '' : h("salla-reward-exchange", { productId: Number(this.productId), prize: this.prize.data }))));
    }
    get host() { return this; }
    static get style() { return sallaLoyaltyProgramCss; }
}, [0, "salla-loyalty-banner"]);
__decorate([
    TrackedPromise(async function () {
        if (!(salla.config.get('store.features') || []).includes('loyalty-system')) {
            return Promise.reject('Loyalty system is not enabled for merchant');
        }
        const { loyalty_prize } = await salla.product.api.getDetails(this.productId);
        if (!loyalty_prize) {
            return Promise.reject('no loyalty prize for this product');
        }
        return loyalty_prize;
    })
], SallaLoyaltyBanner$1.prototype, "prize", void 0);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-loyalty-banner", "salla-loading", "salla-modal", "salla-reward-exchange"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-loyalty-banner":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaLoyaltyBanner$1);
            }
            break;
        case "salla-loading":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "salla-modal":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "salla-reward-exchange":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const SallaLoyaltyBanner = SallaLoyaltyBanner$1;
const defineCustomElement = defineCustomElement$1;

export { SallaLoyaltyBanner, defineCustomElement };