@everymatrix/player-elevate-points-history 1.31.2

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

@@ -0,0 +1,395 @@
+import { Component, h, Listen, Prop, State, Watch, Event } 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 '@everymatrix/general-styling-wrapper';
+import '@everymatrix/player-elevate-card';
+import '@everymatrix/bonus-pagination-limits';
+import '@everymatrix/bonus-pagination-nav';
+export class PlayerElevatePointsHistory {
+  constructor() {
+    /**
+     * Customize pagination: Activate pagination secondary arrows
+     */
+    this.secondaryArrowsActive = true;
+    /**
+     * Customize pagination: Activate pagination numbered navigation
+     */
+    this.displayPageNumbers = false;
+    /**
+     * Customize page list options, default: 10,25,50
+     */
+    this.pageLimitOptions = '10,25,50';
+    /**
+     * Language of the widget
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * translation via url
+     */
+    this.translationUrl = '';
+    this.locale = translation['en'];
+    this.type = WalletType.spendable;
+    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
+    };
+  }
+  render() {
+    var _a, _b;
+    const pageSetting = this.getPageSettingByType(this.type);
+    return (h("main", null,
+      h("general-styling-wrapper", { clientStyling: this.clientStyling, clientStylingUrl: this.clientStylingUrl, 
+        // @ts-ignore
+        targetTranslations: translation, translationUrl: this.translationUrl }),
+      h("player-elevate-pointcard", { playerAvatarUrl: this.playerAvatarUrl, endpoint: this.endpoint, session: this.session, language: this.language, clientStylingUrl: this.clientStylingUrl, clientStyling: this.clientStyling, translationUrl: this.translationUrl }),
+      h("div", { 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']))
+          : renderWallets(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] = { 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,11 @@
+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,12 @@
+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,44 @@
+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,35 @@
+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',
+    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/components/bonus-pagination-limits.js

@@ -0,0 +1,6 @@
+import { B as BonusPaginationLimits$1, d as defineCustomElement$1 } from './bonus-pagination-limits2.js';
+
+const BonusPaginationLimits = BonusPaginationLimits$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BonusPaginationLimits, defineCustomElement };