@everymatrix/player-elevate-points-history 1.0.69

package/dist/collection/components/player-elevate-points-history/player-elevate-points-history.js

@@ -0,0 +1,403 @@
+import { h } from "@stencil/core";
+import { WalletType } from "../../utils/types";
+import { translation } from "../../utils/translation";
+import { getWallets } from "../../utils/business";
+import { renderWallets } from "../../renders/renderWallets";
+import { renderTopBar } from "../../renders/renderTopBar";
+import { renderTabs } from "../../renders/renderTabs";
+import "../../../../../general-styling-wrapper/dist/types/index";
+import "../../../../../../svelte/general-animation-loading/es2015/general-animation-loading";
+import "../../../../../player-elevate-card/dist/types/index";
+import "../../../../../bonus-pagination-limits/dist/types/index";
+import "../../../../../bonus-pagination-nav/dist/types/index";
+export class PlayerElevatePointsHistory {
+    constructor() {
+        this.playerAvatarUrl = undefined;
+        this.session = undefined;
+        this.endpoint = undefined;
+        this.limit = undefined;
+        this.secondaryArrowsActive = true;
+        this.displayPageNumbers = false;
+        this.pageLimitOptions = '10,25,50';
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrl = '';
+        this.translationUrl = '';
+        this.locale = translation['en'];
+        this.type = WalletType.spendable;
+        this.pageSetting = undefined;
+        this.pointsWallets = {};
+    }
+    switchTab(type) {
+        var _a, _b;
+        this.type = type;
+        if (this.pointsWallets[type] || !((_a = this.pointsWallets[type]) === null || _a === void 0 ? void 0 : _a.isLoadFailed)) {
+            return;
+        }
+        this.paginationReset.emit({ limit: ((_b = this.pointsWallets[type]) === null || _b === void 0 ? void 0 : _b.pageSetting.limit) || this.limit, tableId: this.type });
+    }
+    getPageSettingByType(type) {
+        return this.pointsWallets[type] ? this.pointsWallets[type].pageSetting : {
+            limit: this.limit, total: 0, offset: 0, tableId: type,
+            secondaryArrowsActive: this.secondaryArrowsActive,
+            displayPageNumbers: this.displayPageNumbers,
+            pageLimitOptions: this.pageLimitOptions || undefined
+        };
+    }
+    loadWallets(renderer) {
+        if (!this.pointsWallets[this.type] || this.pointsWallets[this.type].isLoading) {
+            return h("general-animation-loading", null);
+        }
+        else {
+            if (this.pointsWallets[this.type].wallets.length === 0) {
+                return (h("div", { class: "NoContent" }, this.locale.noContent));
+            }
+            else {
+                return renderer();
+            }
+        }
+    }
+    render() {
+        var _a, _b;
+        const pageSetting = this.getPageSettingByType(this.type);
+        return (h("main", { key: 'a92c0b154fec4d3ce8b8e919b9af5ebd80f1d125' }, h("general-styling-wrapper", { key: '5095ab265d71f9e74f6f049b7b0b212ae11bc4da', clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl,
+            // @ts-ignore
+            targetTranslations: translation, translationUrl: this.translationUrl }), h("player-elevate-pointcard", { key: 'c471ddeccbe8e18e15935c9d106bf8c52c80a6fb', playerAvatarUrl: this.playerAvatarUrl, endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }), h("div", { key: '5fa700aaa6e0cffe6d3d9dd8366bf9a95bba3a14', class: "PlayerElevatePointsDetaisContainer" }, [
+            renderTopBar(this.locale, this.type, pageSetting),
+            renderTabs(this.locale, this.type, (type) => this.switchTab(type)),
+            ((_a = this.pointsWallets[this.type]) === null || _a === void 0 ? void 0 : _a.isLoadFailed)
+                ? h("div", { class: 'ReloadMsg' }, this.locale['reloadMsgWhenError'], h("a", { class: 'Reload', onClick: () => { this.updateWallets(); } }, this.locale['reload']))
+                : this.loadWallets(renderWallets.bind(this, this.locale, ((_b = this.pointsWallets[this.type]) === null || _b === void 0 ? void 0 : _b.wallets) || [], pageSetting))
+        ])));
+    }
+    walletTypeChangedHandler() {
+        //do not reload when loaded tab switched back
+        if (this.pointsWallets[this.type]) {
+            return;
+        }
+        this.updateWallets();
+    }
+    async updateWallets() {
+        let pageSetting = this.pointsWallets[this.type]
+            ? this.pointsWallets[this.type].pageSetting
+            : this.getPageSettingByType(this.type);
+        try {
+            const walletsDetail = await getWallets(this.endpoint, this.language, this.type, this.session, pageSetting);
+            const wallets = walletsDetail.data || [];
+            if (walletsDetail.success) {
+                pageSetting.total = walletsDetail.total;
+                this.pointsWallets[this.type] = Object.assign(Object.assign({}, this.pointsWallets[this.type]), { wallets,
+                    pageSetting });
+                this.pointsWallets = Object.assign({}, this.pointsWallets);
+            }
+            else {
+                console.error(walletsDetail);
+                this.pointsWallets[this.type].isLoadFailed = true;
+                //pageSetting.total = 0;
+            }
+        }
+        catch (e) {
+            console.error(e);
+            this.pointsWallets[this.type].isLoadFailed = true;
+        }
+    }
+    reloadPageByTypeHandler(event) {
+        if (event.detail.tableId != this.type) {
+            return;
+        }
+        //reset all wallets when limit changed
+        //otherwise fetch new data with new offset when offset changed
+        if (this.limit != event.detail.limit) {
+            this.pointsWallets = {};
+            this.limit = event.detail.limit;
+        }
+        else {
+            let pageSetting = this.pointsWallets[this.type].pageSetting || this.getPageSettingByType(this.type);
+            pageSetting.offset = event.detail.offset;
+            this.pointsWallets[this.type].pageSetting = pageSetting;
+        }
+        this.updateWallets();
+    }
+    setLimit() {
+        try {
+            const pageLimits = this.pageLimitOptions.split(',').map((item) => {
+                return parseInt(item);
+            });
+            if (pageLimits.includes(this.limit)) {
+                //do nothing
+            }
+            else {
+                this.limit = pageLimits[0];
+            }
+        }
+        catch (e) {
+            console.error('Error when parse PageLimitOptions', e);
+            this.limit = 10;
+        }
+    }
+    async componentWillLoad() {
+        this.setLimit();
+        this.updateWallets();
+    }
+    static get is() { return "player-elevate-points-history"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["player-elevate-points-history.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["player-elevate-points-history.css"]
+        };
+    }
+    static get assetsDirs() { return ["static"]; }
+    static get properties() {
+        return {
+            "playerAvatarUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "player avatar url"
+                },
+                "attribute": "player-avatar-url",
+                "reflect": true
+            },
+            "session": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User Session"
+                },
+                "attribute": "session",
+                "reflect": true
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Endpoint URL for the source of data"
+                },
+                "attribute": "endpoint",
+                "reflect": true
+            },
+            "limit": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "User Session"
+                },
+                "attribute": "limit",
+                "reflect": true
+            },
+            "secondaryArrowsActive": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination secondary arrows"
+                },
+                "attribute": "secondary-arrows-active",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "displayPageNumbers": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination numbered navigation"
+                },
+                "attribute": "display-page-numbers",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "pageLimitOptions": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize page list options, default: 10,25,50"
+                },
+                "attribute": "page-limit-options",
+                "reflect": true,
+                "defaultValue": "'10,25,50'"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language of the widget"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url"
+                },
+                "attribute": "client-styling-url",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "translation via url"
+                },
+                "attribute": "translation-url",
+                "reflect": true,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "locale": {},
+            "type": {},
+            "pageSetting": {},
+            "pointsWallets": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paginationReset",
+                "name": "paginationReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "walletTypeChangedHandler"
+            }, {
+                "propName": "endpoint",
+                "methodName": "updateWallets"
+            }, {
+                "propName": "language",
+                "methodName": "updateWallets"
+            }, {
+                "propName": "session",
+                "methodName": "updateWallets"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "reloadPageByType",
+                "method": "reloadPageByTypeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/index.js

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

package/dist/collection/renders/renderTabs.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+import { WalletType } from "../utils/types";
+export const renderTabs = (locale, type, onChangeTab) => h("div", { class: "Tabs Row" }, Object.keys(WalletType).map(key => {
+    const isActive = key === type;
+    const cssActive = isActive ? 'active' : '';
+    return (h("div", null, h("div", { class: `TabText ${cssActive}`, onClick: () => {
+            onChangeTab(key);
+        } }, locale.tabTitle[key]), h("div", { class: `TabBorderBottom ${cssActive}` })));
+}));

package/dist/collection/renders/renderTopBar.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+import backSvg from "../static/back.svg";
+import menuSvg from "../static/menu.svg";
+export const renderTopBar = (locale, type, pageSetting) => h("div", { class: "TopBarContainer" }, h("div", { class: "BackImageContainer" }, h("span", { class: "BackImage", innerHTML: backSvg })), h("div", { class: "TitleContainer" }, h("div", { class: "Title", title: locale.barTitle[type] }, locale.barTitle[type]), h("div", { class: 'Limits' }, h("bonus-pagination-limits", { pageLimitOptions: pageSetting.pageLimitOptions, limit: pageSetting.limit }))), h("div", null, h("span", { class: "MenuImage", innerHTML: menuSvg })));

package/dist/collection/renders/renderWallets.js

@@ -0,0 +1,33 @@
+import { Fragment, h } from "@stencil/core";
+export const renderWallets = (locale, wallets, pageSetting) => wallets && (h(Fragment, null, h("div", { class: "Records" }, wallets.map(wallet => (h("div", { class: "RecordContainer" }, h("div", { class: "Row" }, h("div", { class: "Title" }, locale.pointType[wallet.pointType] || wallet.pointType), h("div", { class: `Amount ${getAmountConfig(wallet.points).class}` }, getAmountConfig(wallet.points).symbol, wallet.points)), wallet.payload && wallet.payload.displayName &&
+    h("div", { class: "Row Desc", innerHTML: wallet.payload.displayName['*'] }), h("div", { class: "Row" }, h("div", { class: "DateTime" }, formatDate(new Date(wallet.modified)))))))), h("div", { class: "PaginationContainer" }, h("bonus-pagination-nav", { offset: pageSetting.offset, limit: pageSetting.limit, displayPageNumbers: pageSetting.displayPageNumbers, tableId: pageSetting.tableId, secondaryArrowsActive: pageSetting.secondaryArrowsActive, total: pageSetting.total }))));
+const getAmountConfig = (amount) => {
+    if (amount > 0) {
+        return {
+            class: 'Positive',
+            symbol: '+'
+        };
+    }
+    else {
+        return {
+            class: 'Negative',
+            symbol: ''
+        };
+    }
+};
+const padTo2Digits = (num) => {
+    return num.toString().padStart(2, '0');
+};
+const formatDate = (date) => {
+    return ([
+        date.getFullYear(),
+        padTo2Digits(date.getMonth() + 1),
+        padTo2Digits(date.getDate()),
+    ].join('-') +
+        ' ' +
+        [
+            padTo2Digits(date.getHours()),
+            padTo2Digits(date.getMinutes()),
+            padTo2Digits(date.getSeconds()),
+        ].join(':'));
+};

package/dist/collection/static/back.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.75 1L1.25 7.5L7.75 14" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/collection/static/menu.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="8" viewBox="0 0 30 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="4" cy="4" r="4" fill="black"/>
+<circle cx="15" cy="4" r="4" fill="black"/>
+<circle cx="26" cy="4" r="4" fill="black"/>
+</svg>

package/dist/collection/utils/business.js

@@ -0,0 +1,17 @@
+import { fetcher, getUrl } from "./fetch";
+import { WalletType } from "./types";
+export const getWallets = async (endpoint, language, type, session, pageSetting) => {
+    const params = {
+        type,
+        language,
+        pagination: `offset=${pageSetting.offset},limit=${pageSetting.limit}`
+    };
+    const url = getUrl(endpoint + getUriByWalletType(params.type), params);
+    const res = await fetcher(url, {
+        headers: {
+            'x-SessionId': session
+        }
+    });
+    return res;
+};
+const getUriByWalletType = (type) => `/v1/elevate/${type == WalletType.history ? 'redeemHistory' : 'pointsHistory'}`;

package/dist/collection/utils/fetch.js

@@ -0,0 +1,17 @@
+export const getUrl = (path, params = {}) => {
+    return path + '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+};
+export const fetcher = async (input, init = {}) => {
+    let res;
+    // @ts-ignore
+    res = await fetch(input, init);
+    res = await res.text();
+    try {
+        res = JSON.parse(res);
+    }
+    catch (e) {
+        console.error(e);
+        throw e;
+    }
+    return res;
+};

package/dist/collection/utils/translation.js

@@ -0,0 +1,36 @@
+import { WalletType } from "./types";
+export const translation = {
+    en: {
+        tabTitle: {
+            [WalletType.spendable]: 'Coins',
+            [WalletType.loyalty]: 'XP',
+            [WalletType.history]: 'Conversion History'
+        },
+        barTitle: {
+            [WalletType.spendable]: 'Coins History',
+            [WalletType.loyalty]: 'Experience Points History',
+            [WalletType.history]: 'Conversion History'
+        },
+        bonus: 'Bonus',
+        noContent: 'No Content',
+        redeem: 'Redeem',
+        reload: 'Reload',
+        reloadMsgWhenError: 'Network Problem, please ',
+        pointType: {
+            registration: 'Registration',
+            cancelledRegistration: 'Cancelled Registration',
+            expiredRegistration: 'Expired Registration',
+            manual: 'Manual',
+            cancelledManual: 'Cancelled Manual',
+            expiredManual: 'Expired Manual',
+            wageringByRealMoney: 'Real Money Wager',
+            wageringByBonusMoney: 'Bonus Money Wager',
+            cancelledWageringByRealMoney: 'Cancelled Real Money Wager',
+            cancelledWageringByBonusMoney: 'Cancelled Bonus Money Wager',
+            expiredWageringByRealMoney: 'Expired Real Money Wager',
+            expiredWageringByBonusMoney: 'Expired Bonus Money Wager',
+            levelExpired: 'Level Expiration',
+            bonus: 'Bonus Redeem',
+        }
+    }
+};

package/dist/collection/utils/types.js

@@ -0,0 +1,6 @@
+export var WalletType;
+(function (WalletType) {
+    WalletType["spendable"] = "spendable";
+    WalletType["loyalty"] = "loyalty";
+    WalletType["history"] = "history";
+})(WalletType || (WalletType = {}));

package/dist/collection/utils/util.js

@@ -0,0 +1,16 @@
+function padTo2Digits(num) {
+    return num.toString().padStart(2, '0');
+}
+export function formatDate(date) {
+    return ([
+        date.getFullYear(),
+        padTo2Digits(date.getMonth() + 1),
+        padTo2Digits(date.getDate()),
+    ].join('-') +
+        ' ' +
+        [
+            padTo2Digits(date.getHours()),
+            padTo2Digits(date.getMinutes()),
+            padTo2Digits(date.getSeconds()),
+        ].join(':'));
+}

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 };