@salla.sa/twilight-components
Version:
Salla Web Component
87 lines (82 loc) • 4.89 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
'use strict';
var index = require('./index-CedylOEg.js');
var gift = require('./gift-CJ-3Yw_x.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) {
index.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 (index.h(index.Host, { key: '8db94d6959cdbfa850f64d6c37471a78e9b36fb8' }, index.h("div", { key: 'e7d4eeef9079ac87ea4d4359c6833dce82bfa11e' }, this.isLoadingLoyalty ? (index.h("salla-loading", null)) : (index.h("div", null, this.loyaltyPointsArray.length > 0 ? (index.h("div", null, index.h("table", { class: "s-loyalty-program-table" }, index.h("thead", { class: "s-loyalty-program-table-head" }, index.h("tr", { class: "s-loyalty-program-table-head-tr" }, index.h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), index.h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), index.h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), index.h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), index.h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), index.h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (index.h("tr", { class: "s-loyalty-program-table-tbody-tr" }, index.h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, point?.type === 'plus' ? '+' : '', point?.points || '', " ", salla.lang.get('pages.loyalty_program.point')), index.h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)), index.h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point?.points_expire_date)), index.h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.key)), index.h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point?.status_key))))))), index.h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (index.h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (index.h("div", null, index.h("div", { class: "s-loyalty-program-table-empty-state" }, index.h("span", { innerHTML: gift.loyaltyProgramIcon }), index.h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), index.h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
}
};
SallaWalletTable.style = sallaLoyaltyProgramCss;
exports.salla_loyalty_program = SallaWalletTable;