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

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
import StarFilledIcon from "../../assets/svg/star-filled.svg";
import { setTranslations } from "../salla-loyalty-program/translations";
export class SallaCashbackBanner {
    constructor() {
        this.cashbackData = 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(`/products/${this.productId}/cashback-offer`)
                .catch(() => null);
            this.cashbackData = response?.data || null;
        }
        catch (e) {
            salla?.logger?.warn?.('salla-cashback-banner: init failed', e);
        }
    }
    getPaymentMethodsText(methods = []) {
        return methods
            .map(method => String(method || '').trim())
            .filter(Boolean)
            .map(method => salla.lang.get(`pages.checkout.${method}`) || method)
            .join(', ');
    }
    getCashbackMessage() {
        const includedMethods = this.cashbackData?.payment_method_restrictions?.included ?? [];
        if (includedMethods.length) {
            return salla.lang.get('pages.loyalty_program.cashback_when_buying_product_payment_method', {
                payment_method: this.getPaymentMethodsText(includedMethods),
            });
        }
        return salla.lang.get('pages.loyalty_program.cashback_when_buying_product');
    }
    render() {
        if (!this.productId || !Number(this.cashbackData?.amount)) {
            return null;
        }
        const cashbackValue = this.cashbackData.amount;
        const currency = this.cashbackData.currency;
        const cashbackMessage = this.getCashbackMessage();
        const cashbackType = this.cashbackData.offer_type;
        return (h(Host, null, h("div", { class: "s-cashback-banner-container" }, h("div", { class: "s-cashback-banner-icon" }, h("span", { class: "s-cashback-banner-inner-icon", innerHTML: StarFilledIcon })), h("p", null, h("span", { class: "s-cashback-banner-label" }, salla.lang.get('pages.loyalty_program.earn'), ' '), h("span", { class: "s-cashback-banner-value" }, cashbackType === "percentage" ? "+" : "", cashbackValue, " ", ['SAR', 'ر.س'].includes(currency) ? h("i", { class: "sicon-sar" }) : currency, ' '), h("span", { class: "s-cashback-banner-label" }, cashbackMessage)))));
    }
    static get is() { return "salla-cashback-banner"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-cashback-banner.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-cashback-banner.css"]
        };
    }
    static get states() {
        return {
            "cashbackData": {},
            "productId": {}
        };
    }
    static get elementRef() { return "host"; }
}