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

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { l as loyaltyProgramIcon } from './gift.js';
import { d as defineCustomElement$3 } from './salla-button2.js';
import { d as defineCustomElement$2 } from './salla-loading2.js';

const sallaLoyaltyProgramCss = "";

const formatDate = (timestamp) => {
    if (!timestamp)
        return '';
    return new Date(Number(timestamp)).toLocaleDateString(salla.lang.locale, {
        weekday: 'long',
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: 'numeric',
    });
};
const translateKey = (key) => {
    if (!key)
        return '';
    try {
        const k = key.toLowerCase();
        const translation = salla.lang.get(`pages.loyalty_program.${k}`);
        return translation === `pages.loyalty_program.${k}` ? key : translation;
    }
    catch {
        return key;
    }
};
const SallaWalletTable = /*@__PURE__*/ proxyCustomElement(class SallaWalletTable extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.loyaltyPointsArray = [];
        this.isLoadingLoyalty = false;
        this.nextPageUrlLoyalty = '';
        this.handleClick = () => {
            this.loadMoreLoyaltyPoints();
        };
    }
    componentWillLoad() {
        return salla.onReady().then(() => {
            this.loadLoyaltyPoints();
        });
    }
    async loadLoyaltyPoints() {
        this.isLoadingLoyalty = true;
        try {
            let url = `/balance/points?page=1`;
            let resp = await salla.api.request(url);
            this.loyaltyPointsArray = resp.data;
            this.nextPageUrlLoyalty = resp.cursor.next;
        }
        catch (error) {
            console.error('Error loading loyalty points transactions', error);
        }
        finally {
            this.isLoadingLoyalty = false;
        }
    }
    async loadMoreLoyaltyPoints() {
        if (!this.nextPageUrlLoyalty)
            return;
        this.isLoadingLoyalty = true;
        try {
            let resp = await salla.api.request(this.nextPageUrlLoyalty);
            this.loyaltyPointsArray = [...this.loyaltyPointsArray, ...resp.data];
            this.nextPageUrlLoyalty = resp.cursor?.next || '';
        }
        catch (error) {
            console.error('Error loading more loyalty points', error);
        }
        finally {
            this.isLoadingLoyalty = false;
        }
    }
    render() {
        return (h(Host, { key: '8db94d6959cdbfa850f64d6c37471a78e9b36fb8' }, h("div", { key: 'e7d4eeef9079ac87ea4d4359c6833dce82bfa11e' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: loyaltyProgramIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
    }
    static get style() { return sallaLoyaltyProgramCss; }
}, [0, "salla-loyalty-program", {
        "loyaltyPointsArray": [32],
        "isLoadingLoyalty": [32],
        "nextPageUrlLoyalty": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-loyalty-program", "salla-button", "salla-loading"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-loyalty-program":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaWalletTable);
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "salla-loading":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const SallaLoyaltyProgram = SallaWalletTable;
const defineCustomElement = defineCustomElement$1;

export { SallaLoyaltyProgram, defineCustomElement };