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

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
import { setTranslations } from "../salla-loyalty-program/translations";
import MoneyIcon from "../../assets/svg/money.svg";
export class SallaLoyaltyPointsBanner {
    constructor() {
        this.pointsData = null;
        this.productId = null;
    }
    async componentWillLoad() {
        try {
            await salla.onReady();
            await salla.lang.onLoaded();
            await setTranslations();
            this.productId = this.host.dataset.productId || salla.config.get('page.id');
            if (!this.productId) {
                return;
            }
            const response = await salla.api
                .request(`/loyalty/products/${this.productId}/points`)
                .catch(() => null);
            this.pointsData = response?.data || null;
        }
        catch (e) {
            salla?.logger?.warn?.('salla-loyalty-points-banner: init failed', e);
        }
    }
    render() {
        if (!this.productId || !this.pointsData?.points) {
            return null;
        }
        return (h(Host, null, h("div", { class: "s-loyalty-points-banner-container" }, h("div", { class: "s-loyalty-points-banner-icon" }, h("span", { class: "s-loyalty-points-banner-inner-icon", innerHTML: MoneyIcon })), h("p", null, h("span", { class: "s-loyalty-points-banner-label" }, salla.lang.get('pages.loyalty_program.earn'), ' '), h("span", { class: "s-loyalty-points-banner-label" }, `+${this.pointsData.points}`, " "), h("span", { class: "s-loyalty-points-banner-label" }, salla.lang.get('pages.loyalty_program.loyalty_point'), ' '), h("span", { class: "s-loyalty-points-banner-description" }, salla.lang.get('pages.loyalty_program.on_order_total_when_purchase'))))));
    }
    static get is() { return "salla-loyalty-points-banner"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-loyalty-points-banner.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-loyalty-points-banner.css"]
        };
    }
    static get states() {
        return {
            "pointsData": {},
            "productId": {}
        };
    }
    static get elementRef() { return "host"; }
}