@salla.sa/twilight-components
Version:
Salla Web Component
85 lines (81 loc) • 4.75 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host } from './index-D4I5TLtE.js';
import { l as loyaltyProgramIcon } from './gift-BChI23pG.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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'))))))))));
}
};
SallaWalletTable.style = sallaLoyaltyProgramCss;
export { SallaWalletTable as salla_loyalty_program };