@everymatrix/player-elevate-points-history 1.31.2

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

@@ -0,0 +1,363 @@
+import { h, Fragment, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { d as defineCustomElement$6 } from './bonus-pagination-limits2.js';
+import { d as defineCustomElement$5 } from './bonus-pagination-nav2.js';
+import { d as defineCustomElement$4 } from './general-styling-wrapper2.js';
+import { d as defineCustomElement$3 } from './player-elevate-card-data2.js';
+import { d as defineCustomElement$2 } from './player-elevate-pointcard2.js';
+
+var WalletType;
+(function (WalletType) {
+  WalletType["spendable"] = "spendable";
+  WalletType["loyalty"] = "loyalty";
+  WalletType["history"] = "history";
+})(WalletType || (WalletType = {}));
+
+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',
+    }
+  }
+};
+
+const getUrl = (path, params = {}) => {
+  return path + '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+};
+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;
+};
+
+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'}`;
+
+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(':'));
+};
+
+const backSvg = `<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>
+`;
+
+const menuSvg = `<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>
+`;
+
+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 })));
+
+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}` })));
+}));
+
+const playerElevatePointsHistoryCss = ":host{display:block}main{max-width:420px}main player-elevate-pointcard{width:100%;height:220px}.PlayerElevatePointsDetaisContainer{background:#FFFFFF;padding:20px 10px 0;margin-top:-100px;position:relative;min-height:360px}.PlayerElevatePointsDetaisContainer .ReloadMsg{padding:20px}.PlayerElevatePointsDetaisContainer .ReloadMsg a.Reload{cursor:pointer}.TitleContainer{font-size:20px;font-weight:500;line-height:25px;letter-spacing:0em;text-align:left;display:flex;justify-content:space-between}.TopBarContainer{display:flex;align-items:center;justify-content:space-between}.TopBarContainer .TitleContainer{width:100%}.TopBarContainer .Title{background:#303030;padding:5px 16px;color:#FFFFFF;box-shadow:0px 4px 13px 0px #00000040;border-radius:8px;width:fit-content;margin-left:7px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.PaginationContainer{display:flex;justify-content:center}.MonthStat{margin-top:25px;display:none;font-size:16px;font-weight:500;line-height:19px;letter-spacing:0px;text-align:left;color:#242424}.MonthStat .Amount{color:#53B65A}.BackImageContainer{width:35px;height:35px;flex:0 0 35px;border-radius:6px;text-align:center;line-height:35px;box-shadow:0px 4px 40px 0px #8A959E33;display:none}.Records{margin-top:16px}.MenuImage,.BackImage{cursor:pointer;display:none}.Row{display:flex;justify-content:space-between;align-items:center}.Row:nth-child(n+2){margin-top:3px}.Tabs.Row{justify-content:space-around;margin-top:20px}.Tabs.Row .TabText{font-size:16px;margin:10px 15px;color:#9C9C9C;cursor:pointer}.Tabs.Row .TabText.active{color:#242424;font-weight:600}.Tabs.Row .TabBorderBottom{height:5px;border-radius:4px;background:transparent}.Tabs.Row .TabBorderBottom.active{background:#242424}.RecordContainer{margin:5px 0;padding:10px;box-shadow:0px 0px 8px 0px #0000001A;border-radius:5px}.RecordContainer .Title{color:#242424;font-size:16px;font-weight:600;line-height:19px;letter-spacing:0px;text-align:left}.RecordContainer .Amount{font-size:16px;font-weight:600;line-height:19px;letter-spacing:0px;text-align:left}.RecordContainer .Amount.Positive{color:#53B65A}.RecordContainer .Amount.Negative{color:#B41E2D}.RecordContainer .DateTime{color:#9C9C9C;font-size:16px;font-weight:400;line-height:19px;letter-spacing:0px;text-align:left}.RecordContainer .Tag{font-size:12px;font-weight:500;line-height:14px;letter-spacing:0em;text-align:center;color:#767171;padding:8px 30px;border-radius:8px;box-shadow:0px 2px 4px 0px #00000040}";
+
+const PlayerElevatePointsHistory$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.paginationReset = createEvent(this, "paginationReset", 7);
+    /**
+     * 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)) ;
+      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 assetsDirs() { return ["static"]; }
+  static get watchers() { return {
+    "type": ["walletTypeChangedHandler"],
+    "endpoint": ["updateWallets"],
+    "language": ["updateWallets"],
+    "session": ["updateWallets"]
+  }; }
+  static get style() { return playerElevatePointsHistoryCss; }
+}, [1, "player-elevate-points-history", {
+    "playerAvatarUrl": [513, "player-avatar-url"],
+    "session": [513],
+    "endpoint": [513],
+    "limit": [1538],
+    "secondaryArrowsActive": [1540, "secondary-arrows-active"],
+    "displayPageNumbers": [1540, "display-page-numbers"],
+    "pageLimitOptions": [1537, "page-limit-options"],
+    "language": [513],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrl": [513, "client-styling-url"],
+    "translationUrl": [513, "translation-url"],
+    "locale": [32],
+    "type": [32],
+    "pageSetting": [32],
+    "pointsWallets": [32]
+  }, [[0, "reloadPageByType", "reloadPageByTypeHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["player-elevate-points-history", "bonus-pagination-limits", "bonus-pagination-nav", "general-styling-wrapper", "player-elevate-card-data", "player-elevate-pointcard"];
+  components.forEach(tagName => { switch (tagName) {
+    case "player-elevate-points-history":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PlayerElevatePointsHistory$1);
+      }
+      break;
+    case "bonus-pagination-limits":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bonus-pagination-nav":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "general-styling-wrapper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "player-elevate-card-data":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "player-elevate-pointcard":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PlayerElevatePointsHistory = PlayerElevatePointsHistory$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PlayerElevatePointsHistory, defineCustomElement };