@salla.sa/twilight-components
Version:
Salla Web Component
95 lines (94 loc) • 7.48 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { Host, h } from "@stencil/core";
export class SallaWalletTable {
constructor() {
this.isLoading = false;
this.nextPageUrl = '';
this.handleClick = () => {
this.loadMoreTransactions();
};
}
componentWillLoad() {
return salla.onReady().then(() => this.loadTransactions());
}
async loadTransactions() {
this.isLoading = true;
try {
let url = `/balance/wallet?per_page=10&page=1`;
let resp = await salla.api.request(url);
this.nextPageUrl = resp.data.transactions.next_page_url;
this.transactionsArray = resp.data.transactions;
this.balance = resp.data.balance;
}
catch (error) {
console.error('Error loading wallet transactions', error);
}
finally {
this.isLoading = false;
}
}
async loadMoreTransactions() {
this.isLoading = true;
try {
let url = this.nextPageUrl || '/balance/wallet?page=2&per_page=10';
let resp = await salla.api.request(url);
this.nextPageUrl = resp.data.transactions.next_page_url;
this.transactionsArray.push(...resp.data.transactions.data);
this.balance = resp.data.balance;
}
catch (error) {
console.error('Error loading wallet transactions', error);
}
finally {
this.isLoading = false;
}
}
render() {
if (this.transactionsArray.length > 0) {
return (h(Host, null, h("table", { class: "s-wallet-table" }, h("tbody", { class: "s-wallet-table-tbody" }, h("tr", { class: "s-table__tr" }, h("td", null, h("div", { class: "s-wallet-table-balance-container" }, h("i", { class: "s-wallet-table-balance-icon sicon-wallet" }), h("div", null, h("div", { innerHTML: salla.money(this.balance) }), h("div", { class: "font-normal text-gray-400" }, ' ', salla.lang.get('pages.wallet.balance')))))))), h("h2", { style: { 'margin-top': '32px' } }, salla.lang.get('pages.wallet.title')), h("table", { class: "s-wallet-table" }, h("thead", { class: "s-wallet-table-head" }, h("tr", { class: "s-wallet-table-head-tr" }, h("th", { scope: "col" }, salla.lang.get('pages.wallet.transaction_number')), h("th", { scope: "col", class: "s-wallet-table-head-tr-th" }, salla.lang.get('pages.wallet.amount')), h("th", { scope: "col", class: "s-wallet-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-wallet-table-head-tr-th" }, salla.lang.get('pages.wallet.order_no')), h("th", { scope: "col", class: "s-wallet-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-wallet-table-head-tr-th" }, salla.lang.get('pages.wallet.transaction_type'), ' '))), h("tbody", { class: "s-wallet-table-tbody" }, this.transactionsArray.map(transaction => (h("tr", { class: "s-wallet-table-tbody-tr s-wallet-table-tbody-tr-shadow animated" }, h("td", { class: "s-wallet-table-tbody-tr-td" }, h("div", { class: "s-wallet-table-tbody-tr-td-content" }, h("span", { class: "s-wallet-mobile-title" }, salla.lang.get('pages.wallet.transaction_number'), ":"), transaction.id && (h("span", { class: "hidden md:inline-block" }, "#", transaction.id)), h("div", { class: "flex items-center md:hidden" }, h("salla-button", { class: "relative", color: "dark", shape: "link", "data-content": transaction.order_id }, transaction.order_id && h("span", null, "#", transaction.order_id))))), h("td", { id: "main123", class: "s-wallet-table-tbody-tr-td" }, h("div", { id: "main124", class: "s-wallet-table-tbody-tr-td-content" }, h("span", { id: "main125", class: "s-wallet-mobile-title" }, salla.lang.get('pages.wallet.amount'), ":"), h("div", { innerHTML: salla.money(transaction.amount) }))), h("td", { class: "s-wallet-table-tbody-tr-td" }, h("div", { class: "s-wallet-table-tbody-tr-td-content" }, h("span", { class: "s-wallet-mobile-title" }, salla.lang.get('pages.wallet.date'), ":"), transaction.created_at &&
new Date(transaction.created_at * 1000).toLocaleDateString(salla.lang.locale, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
}))), h("td", { id: "main133", class: "s-wallet-table-tbody-tr-td" }, h("div", { id: "main134", class: "s-wallet-table-tbody-tr-td-content" }, h("span", { id: "main135", class: "s-wallet-mobile-title" }, salla.lang.get('pages.wallet.order_no'), ":"), h("span", { class: "rtl:mr-auto ltr:ml-auto md:mx-0" }, transaction.order_id && h("span", null, "#", transaction.order_id)))), h("td", { id: "main143", class: "s-wallet-table-tbody-tr-td" }, h("div", { id: "main144", class: "s-wallet-table-tbody-tr-td-content" }, h("span", { id: "main145", class: "s-wallet-mobile-title" }, salla.lang.get('pages.wallet.expiry_date'), ":"), h("span", null, transaction.expired_at &&
new Date(transaction.expired_at * 1000).toLocaleDateString(salla.lang.locale, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: 'numeric',
})))), h("td", { class: "s-wallet-table-tbody-tr-td" }, h("div", { class: "s-wallet-table-tbody-tr-td-content" }, h("div", null, h("span", { class: "s-wallet-mobile-title" }, salla.lang.get('pages.wallet.transaction_type'), ":")), h("div", { class: {
's-wallet-table-transaction-status-default': true,
's-wallet-table-transaction-status-cashback': transaction.action_type === 'cashback',
's-wallet-table-transaction-status-refund': transaction.action_type === 'refund',
's-wallet-table-transaction-status-purchase': transaction.action_type === 'purchase_by_wallet',
} }, !!transaction.description && (h("i", { id: transaction.id.toString(), class: "sicon-information text-lg rtl:ml-4 ltr:mr-4 s-wallet-table-transaction-status-icon-success" })), !!transaction.description && (h("salla-tooltip", { text: transaction.description, targetId: transaction.id.toString() })), h("span", null, transaction.title))))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrl && (h("salla-button", { onClick: this.handleClick, loading: this.isLoading }, salla.lang.get('common.elements.load_more'))))));
}
else {
return (h(Host, null, h("h2", { style: { 'margin-top': '32px' } }, salla.lang.get('pages.wallet.title')), h("div", { class: "s-wallet-table-empty-state" }, h("i", { class: "sicon-full-wallet" }), h("div", { class: "text-center p-3 text-xl font-bold " }, salla.lang.get('pages.wallet.no_transactions')), h("div", { class: "text-center text-gray-400 text-sm font-normal " }, salla.lang.get('pages.wallet.zero_balance'), ' '))));
}
}
static get is() { return "salla-wallet"; }
static get originalStyleUrls() {
return {
"$": ["salla-wallet.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-wallet.css"]
};
}
static get states() {
return {
"transactionsArray": {},
"balance": {},
"isLoading": {},
"nextPageUrl": {}
};
}
}