@everymatrix/user-transaction-history 1.0.69

package/dist/collection/components/user-transaction-history/user-transaction-history.js

@@ -0,0 +1,348 @@
+import { Localization } from "../../utils/locale.util";
+import { Host, h, getAssetPath } from "@stencil/core";
+import { Loader } from "../internal/loader";
+import { TransactionComponent } from "../internal/transaction";
+import { PageSize } from "../internal/page-size";
+import { Filters } from "../internal/filters";
+import { TableComponent } from "../internal/table";
+export class UserTransactionHistory {
+    constructor() {
+        this.pageSizes = [10, 25, 50];
+        this.pagination = null;
+        this.stylingAppended = false;
+        this.endpoint = undefined;
+        this.session = undefined;
+        this.language = Localization.defaultLanguage;
+        this.userId = undefined;
+        this.translationUrl = undefined;
+        this.mobile = false;
+        this.clientStyling = null;
+        this.clientStylingUrl = null;
+        this.page = 0;
+        this.pageSize = this.pageSizes[0];
+        this.showMobileFilter = false;
+        this.to = undefined;
+        this.from = undefined;
+        this.type = '0';
+        this.transactions = undefined;
+        this.showLoader = true;
+    }
+    watchMultiple() {
+        this.loadTransactions();
+    }
+    async componentWillLoad() {
+        if (this.translationUrl) {
+            await Localization.loadCustomTranslations(this.translationUrl);
+        }
+        this.loadTransactions();
+    }
+    componentDidRender() {
+        this.getComponentHeight();
+        if (!this.stylingAppended && this.stylingContainer) {
+            if (this.clientStyling) {
+                this.setStyles(this.clientStyling);
+            }
+            if (this.clientStylingUrl) {
+                this.setClientStylingByURL();
+            }
+            this.stylingAppended = true;
+        }
+    }
+    getComponentHeight() {
+        var _a;
+        if (this.mobile) {
+            let height = this.el.getBoundingClientRect().height - ((_a = this.el.shadowRoot.querySelector('.table')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y);
+            this.el.style.setProperty('--heightScrollableContainer', height + 'px');
+        }
+    }
+    setHeightTableProperty() {
+        let height = this.getComponentHeight();
+        this.el.style.setProperty('--heightScrollableContainer', height + 'px');
+    }
+    changeTransactionsType(type) {
+        this.type = type;
+    }
+    changePageSize(pageSize) {
+        this.pageSize = pageSize;
+    }
+    prev() {
+        var _a;
+        if (!((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.previous)) {
+            return;
+        }
+        this.page--;
+    }
+    next() {
+        var _a;
+        if (!((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.next)) {
+            return;
+        }
+        this.page++;
+    }
+    applyFilters(from, to) {
+        this.from = from ? new Date(from).toISOString() : null;
+        this.to = to ? new Date(to).toISOString() : null;
+        this.loadTransactions();
+    }
+    showFilter() {
+        this.showMobileFilter = !this.showMobileFilter;
+    }
+    render() {
+        var _a;
+        const filterSrc = getAssetPath('../assets/filter.svg');
+        const warningSrc = getAssetPath('../assets/warning.svg');
+        return (h(Host, { key: 'c850ba36433277706247f4b7c0c08b0ae0fb8c76' }, this.showLoader ? h(Loader, null) : '', h("div", { key: '20b817b5c9cf14e8af0db2ba417d09e21b6921d7', class: "wrapper", ref: el => (this.stylingContainer = el) }, h("div", { key: '3943f4ab79cb0e72083821b424000f96779e78a5', class: { 'types types-mobile': this.mobile, 'types types-desktop': !this.mobile } }, h("button", { key: 'd1f3dfc1f4fc7013bd81c92663f578129f63c0e7', class: 'transaction-type' + ' ' + (this.type === '0' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('0') }, Localization.translate('deposit', this.language)), h("button", { key: '46989070ef6703fdf7c8c7ac6628e9dce731fec6', class: 'transaction-type' + ' ' + (this.type === '1' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('1') }, Localization.translate('withdrawals', this.language))), !this.mobile ? h(PageSize, { language: this.language, pageSizes: this.pageSizes, currentPageSize: this.pageSize, changePageSize: s => this.changePageSize(s) }) : '', this.mobile ? (h("button", { class: "mobile-filter-button", onClick: () => this.showFilter() }, h("img", { src: filterSrc, alt: "Filter" }), Localization.translate('filter', this.language))) : (''), !this.mobile || (this.showMobileFilter && this.mobile) ? h(Filters, { language: this.language, applyFilters: (from, to) => this.applyFilters(from, to) }) : '', ((_a = this.transactions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("div", { class: "table" }, this.mobile ? (h("div", { class: "mobile-table" }, this.transactions.map(transaction => (h(TransactionComponent, Object.assign({}, transaction)))))) : (h(TableComponent, { source: this.transactions, language: this.language })))) : (h("div", { class: "noData" }, h("img", { src: warningSrc, alt: "Warning" }), h("span", null, Localization.translate('noData', this.language)))), h("div", { key: '50710657788295389a20d59e0092dd033e428268', class: "pagination" }, h("button", { key: 'cd29c880eab413a06666dc12c8df38d3ffdcfe2f', onClick: () => this.prev() }, '<'), h("button", { key: 'df351ecd4237433a8ab38766669ac48d2548ed6a', onClick: () => this.next() }, '>')))));
+    }
+    async loadTransactions() {
+        this.showLoader = true;
+        try {
+            const url = `${this.endpoint}/v1/player/${this.userId}/transactions/banking?${this.getParams()}`;
+            const response = await fetch(url, {
+                headers: {
+                    'X-Sessionid': this.session,
+                    'Content-Type': 'application/json'
+                }
+            });
+            if (!response.ok) {
+                const err = await response.text();
+                throw new Error(err);
+            }
+            const data = await response.json();
+            this.pagination = data.pagination;
+            this.transactions = data.transactions;
+        }
+        catch (ex) {
+            console.error(ex);
+        }
+        finally {
+            this.showLoader = false;
+        }
+    }
+    getParams() {
+        var _a, _b;
+        const now = new Date();
+        const offset = (this.page * this.pageSize).toString();
+        const startDate = (_a = this.from) !== null && _a !== void 0 ? _a : new Date(now.getFullYear(), now.getMonth(), 1).toISOString();
+        const endDate = (_b = this.to) !== null && _b !== void 0 ? _b : new Date(now.getFullYear(), now.getMonth() + 1, 0).toISOString();
+        return `offset=${offset}&endDate=${endDate}&startDate=${startDate}&type=${this.type}&limit=${this.pageSize}`;
+    }
+    setStyles(styles) {
+        const cssFile = document.createElement('style');
+        cssFile.innerHTML = styles;
+        this.stylingContainer.prepend(cssFile);
+    }
+    async setClientStylingByURL() {
+        try {
+            const response = await fetch(this.clientStylingUrl);
+            if (!response.ok) {
+                const err = await response.text();
+                throw new Error(err);
+            }
+            const styles = await response.text();
+            this.setStyles(styles);
+        }
+        catch (ex) {
+            console.error(`Failed to load client styles ${this.clientStylingUrl}`, ex);
+        }
+    }
+    static get is() { return "user-transaction-history"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["user-transaction-history.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["user-transaction-history.css"]
+        };
+    }
+    static get assetsDirs() { return ["../assets"]; }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "Localization.defaultLanguage"
+            },
+            "userId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "user-id",
+                "reflect": true
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "translation-url",
+                "reflect": true
+            },
+            "mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mobile",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "null"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "page": {},
+            "pageSize": {},
+            "showMobileFilter": {},
+            "to": {},
+            "from": {},
+            "type": {},
+            "transactions": {},
+            "showLoader": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "page",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "type",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "session",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "userId",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "pageSize",
+                "methodName": "watchMultiple"
+            }, {
+                "propName": "showMobileFilter",
+                "methodName": "getComponentHeight"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "getComponentHeight",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/contracts/translation.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/global/app.js

@@ -0,0 +1 @@
+import "@vaadin/date-picker/theme/lumo/vaadin-date-picker.js";

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/models/transactions-response.model.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/currency.utils.js

@@ -0,0 +1,18 @@
+export class CurrencyFormatter {
+    constructor() { }
+    static format(currency, value) {
+        let result = `${value} ${currency}`;
+        try {
+            const formatter = new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: currency,
+            });
+            result = formatter.format(value);
+        }
+        catch (_a) {
+            // If we here formatter do not support that currency.
+            // Just ignore that and use the currency name instead of it symbol.
+        }
+        return result;
+    }
+}

package/dist/collection/utils/date.util.js

@@ -0,0 +1,8 @@
+export class DateTransformer {
+    constructor() { }
+    static dateToFormatedString(date) {
+        const dateStr = date.toLocaleDateString('en-gb');
+        const timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+        return `${dateStr}, ${timeStr}`;
+    }
+}

package/dist/collection/utils/locale.util.js

@@ -0,0 +1,69 @@
+export const DEFAULT_TRANSLATIONS = {
+    "en": {
+        "deposit": "Deposit",
+        "withdrawals": "Withdrawals",
+        "show": "Show",
+        "from": "From",
+        "to": "To",
+        "filter": "Filter",
+        "transactionId": "Transaction ID",
+        "date": "Date",
+        "amount": "Amount",
+        "productType": "Product Type",
+        "status": "Status",
+        "noData": "There are no account activities"
+    },
+    "hr": {
+        "deposit": "Uplate",
+        "withdrawals": "Isplate",
+        "show": "Prikaži",
+        "from": "Od",
+        "to": "Do",
+        "filter": "Filter",
+        "transactionId": "ID transakcije",
+        "date": "Datum",
+        "amount": "Iznos",
+        "productType": "Vrsta proizvoda",
+        "status": "Status",
+        "noData": "Nema aktivnosti na računu"
+    }
+};
+export class Localization {
+    constructor() { }
+    static async loadCustomTranslations(translationUrl) {
+        try {
+            const response = await fetch(translationUrl, {
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                const err = await response.text();
+                throw new Error(err);
+            }
+            const translations = await response.json();
+            Localization.updateTranslations(translations);
+        }
+        catch (ex) {
+            console.error(`Failed to load translations ${translationUrl}. ${ex.message}`);
+        }
+    }
+    static translate(key, locale) {
+        var _a, _b;
+        const avaliableLocales = Localization.getAvaliableLanguages(locale);
+        return ((_b = (_a = Localization.customTranslation) === null || _a === void 0 ? void 0 : _a[avaliableLocales.customLanguage]) === null || _b === void 0 ? void 0 : _b[key]) || Localization.defaultTranslation[avaliableLocales.predefinedLanguage][key];
+    }
+    static getAvaliableLanguages(locale) {
+        var _a;
+        const customLanguage = ((_a = Localization.customLanguages) === null || _a === void 0 ? void 0 : _a.includes(locale)) ? locale : Localization.defaultLanguage;
+        const predefinedLanguage = Localization.supportedLanguages.includes(locale) ? locale : Localization.defaultLanguage;
+        return { predefinedLanguage, customLanguage };
+    }
+    static updateTranslations(translations) {
+        Localization.customLanguages = Array.from(new Set([...Localization.supportedLanguages, ...Object.keys(translations).map(k => k.toLowerCase())]));
+        Localization.customTranslation = translations;
+    }
+}
+Localization.defaultLanguage = 'en';
+Localization.supportedLanguages = ['en'];
+Localization.defaultTranslation = DEFAULT_TRANSLATIONS;

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };