@everymatrix/player-account-controller 1.47.0 → 1.47.2

package/stencil/user-transaction-history-W4vbS2--.js

@@ -0,0 +1,355 @@
+var d = (t, a, i) => new Promise((o, r) => {
+  var l = (s) => {
+    try {
+      c(i.next(s));
+    } catch (p) {
+      r(p);
+    }
+  }, h = (s) => {
+    try {
+      c(i.throw(s));
+    } catch (p) {
+      r(p);
+    }
+  }, c = (s) => s.done ? o(s.value) : Promise.resolve(s.value).then(l, h);
+  c((i = i.apply(t, a)).next());
+});
+import { b, p as f, r as y, g as u, h as e, H as v, a as x } from "./index-b111cb50-CuFaYbey.js";
+import { b as w } from "./app-globals-0f993ce5-aPSxk6sG.js";
+var k = () => {
+  const t = import.meta.url, a = {};
+  return t !== "" && (a.resourcesUrl = new URL(".", t).href), f(a);
+};
+k().then((t) => d(void 0, null, function* () {
+  return yield w(), b([["user-transaction-history", [[1, "user-transaction-history", { endpoint: [513], session: [513], language: [513], userId: [513, "user-id"], translationUrl: [513, "translation-url"], mobile: [516], clientStyling: [513, "client-styling"], clientStylingUrl: [513, "client-styling-url"], page: [32], pageSize: [32], showMobileFilter: [32], to: [32], from: [32], type: [32], transactions: [32], showLoader: [32] }, [[9, "resize", "getComponentHeight"]], { page: ["watchMultiple"], type: ["watchMultiple"], session: ["watchMultiple"], userId: ["watchMultiple"], pageSize: ["watchMultiple"], showMobileFilter: ["getComponentHeight"] }]]]], t);
+}));
+const S = {
+  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"
+  }
+};
+class n {
+  constructor() {
+  }
+  static loadCustomTranslations(a) {
+    return d(this, null, function* () {
+      try {
+        const i = yield fetch(a, {
+          headers: {
+            "Content-Type": "application/json"
+          }
+        });
+        if (!i.ok) {
+          const r = yield i.text();
+          throw new Error(r);
+        }
+        const o = yield i.json();
+        n.updateTranslations(o);
+      } catch (i) {
+        console.error(`Failed to load translations ${a}. ${i.message}`);
+      }
+    });
+  }
+  static translate(a, i) {
+    var o, r;
+    const l = n.getAvaliableLanguages(i);
+    return ((r = (o = n.customTranslation) === null || o === void 0 ? void 0 : o[l.customLanguage]) === null || r === void 0 ? void 0 : r[a]) || n.defaultTranslation[l.predefinedLanguage][a];
+  }
+  static getAvaliableLanguages(a) {
+    var i;
+    const o = !((i = n.customLanguages) === null || i === void 0) && i.includes(a) ? a : n.defaultLanguage;
+    return { predefinedLanguage: n.supportedLanguages.includes(a) ? a : n.defaultLanguage, customLanguage: o };
+  }
+  static updateTranslations(a) {
+    n.customLanguages = Array.from(/* @__PURE__ */ new Set([...n.supportedLanguages, ...Object.keys(a).map((i) => i.toLowerCase())])), n.customTranslation = a;
+  }
+}
+n.defaultLanguage = "en";
+n.supportedLanguages = ["en"];
+n.defaultTranslation = S;
+const C = () => e(
+  "div",
+  { class: "loader" },
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null),
+  e("div", null)
+);
+class g {
+  constructor() {
+  }
+  static dateToFormatedString(a) {
+    const i = a.toLocaleDateString("en-gb"), o = a.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: !1 });
+    return `${i}, ${o}`;
+  }
+}
+class m {
+  constructor() {
+  }
+  static format(a, i) {
+    let o = `${i} ${a}`;
+    try {
+      o = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: a
+      }).format(i);
+    } catch (r) {
+    }
+    return o;
+  }
+}
+const T = (t) => e(
+  "div",
+  { class: "data-transaction" },
+  e("p", null, t.productType),
+  e(
+    "p",
+    { class: "text-style text-style-status" },
+    e("span", { class: t.status.toLowerCase() }, t.status)
+  ),
+  e(
+    "p",
+    { class: "date" },
+    t.transId,
+    " | ",
+    g.dateToFormatedString(new Date(t.created))
+  ),
+  e(
+    "p",
+    { class: "text-style" },
+    m.format(t.currency, t.realAmount),
+    " "
+  )
+), B = (t) => e(
+  "div",
+  { class: "page-size" },
+  e("span", null, n.translate("show", t.language)),
+  t.pageSizes.map((a) => e("button", { class: t.currentPageSize === a ? "active" : "", onClick: () => t.changePageSize(a) }, a))
+), F = ({ from: t, to: a, applyFilters: i, language: o }) => {
+  let r, l;
+  const h = () => {
+    t = r.value;
+  }, c = () => {
+    a = l.value;
+  };
+  return e(
+    "div",
+    { class: "period" },
+    e(
+      "div",
+      { class: "period-content" },
+      e(
+        "div",
+        { class: "date-input" },
+        e("vaadin-date-picker", { value: t, ref: (s) => r = s, label: n.translate("from", o), onChange: h })
+      ),
+      e(
+        "span",
+        null,
+        e(
+          "svg",
+          { width: "24px", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+          e("path", { d: "m21 11.75c0-.414-.336-.75-.75-.75h-16.5c-.414 0-.75.336-.75.75s.336.75.75.75h16.5c.414 0 .75-.336.75-.75z", "fill-rule": "nonzero", fill: "#5d687b" })
+        )
+      ),
+      e(
+        "div",
+        { class: "date-input" },
+        e("vaadin-date-picker", { value: a, ref: (s) => l = s, label: n.translate("to", o), onChange: c })
+      ),
+      e("button", { class: "filter-btn", onClick: () => i(t, a) }, n.translate("filter", o))
+    )
+  );
+}, D = ({ source: t, language: a }) => {
+  const i = [
+    { name: n.translate("transactionId", a) },
+    {
+      name: n.translate("date", a)
+    },
+    {
+      name: n.translate("amount", a)
+    },
+    { name: n.translate("productType", a) },
+    {
+      name: n.translate("status", a)
+    }
+  ];
+  return e(
+    "table",
+    null,
+    e(
+      "thead",
+      null,
+      e("tr", null, i.map((o) => e("th", null, o.name)))
+    ),
+    e("tbody", null, t.map((o) => e(
+      "tr",
+      null,
+      e("td", null, o.transId),
+      e("td", null, g.dateToFormatedString(new Date(o.created))),
+      e(
+        "td",
+        null,
+        m.format(o.currency, o.realAmount),
+        " "
+      ),
+      e("td", null, o.productType),
+      e(
+        "td",
+        null,
+        e("span", { class: o.status.toLowerCase() }, o.status)
+      )
+    )))
+  );
+}, L = ':host{--activeButtonBackground:#7ec51e;--activeButtonFont:#002149;--hoverBackground:#ffffff;--background:#e4e6e8;--success:#7ac345;--heightScrollableContainer:400px;--borderColor:#d3d3d3;--borderColorButton:#c4c4c4;--textColor:#002554;--textColorHover:#7ac345;--errorColor:#c23b21;--loaderColor:#7ac345;--headerTableBackground:#cdcdcd;--borderTable:#dedede;--shadowBorderTable:#f1f1f1;--backgroundTable:#ffffff;font-family:Roboto, Arial, sans-serif;font-size:14px;color:var(--textColor);display:block;background-color:var(--background)}:host .wrapper{height:100%;padding:1rem}:host .types{display:flex;width:100%;gap:5px}:host .transaction-type{background:inherit;font-weight:600;padding:0.6rem 1.6rem;border:1px solid #6c757d;cursor:pointer}:host .transaction-type:hover{color:var(--activeButtonBackground);border-color:var(--activeButtonBackground);background:var(--hoverBackground)}:host .clicked{background-color:var(--activeButtonBackground);border-color:var(--activeButtonBackground)}:host .types-mobile{justify-content:center;margin-bottom:15px}:host .types-desktop{justify-content:flex-end;margin-bottom:3rem}:host .page-size{display:flex;width:100%;justify-content:flex-end;align-items:center}:host .page-size button{background:transparent;border:none;cursor:pointer;margin:0.4rem;width:2rem;height:2rem}:host .page-size button:hover{color:var(--textColorHover)}:host .page-size button.active{background:var(--activeButtonBackground);color:var(--textColor);font-weight:600;border-radius:0.4rem}:host .period{display:flex;width:100%;align-items:flex-end;justify-content:center;gap:10px;background:#f0f0f0;border-bottom:2px solid #e9e9e9;padding:1.6rem 0 0;margin-bottom:4rem}@media (max-width: 801px){:host .period{margin-bottom:0;flex-direction:column;align-items:stretch;width:auto;padding:1.4rem 2.8rem;box-shadow:0 4px 5px 0 rgba(90, 90, 90, 0.24)}}:host .period .range{color:var(--errorColor)}:host .period .filter-btn{height:40px;background:transparent;border:0.1rem solid var(--borderColorButton);min-width:12rem;max-width:17rem;cursor:pointer}@media (max-width: 801px){:host .period .filter-btn{max-width:none;min-width:none;margin-top:1rem}}:host .period .filter-btn:hover{border:none;background:var(--hoverBackground)}:host .period .duet-date__input{padding:7px 60px 7px 7px}:host .period+button{padding:9px 15px}:host .period-content{display:flex;flex-direction:row;width:100%;justify-content:center;align-items:flex-end;margin:0 auto 1.6rem}@media (max-width: 801px){:host .period-content{flex-direction:column;align-items:stretch}}:host .period-content span{height:40px;display:flex;align-items:center;justify-content:center}@media (max-width: 801px){:host .period-content span{display:none}}:host .period-content .filter-btn{margin-left:60px}@media (max-width: 801px){:host .period-content .filter-btn{margin-left:0}}:host .period-content .date-input{padding:0 4px}@media (max-width: 801px){:host .period-content .date-input{width:auto}:host .period-content .date-input:first-child{margin-bottom:0.5rem}}:host .period-content .date-input label{display:inline-block;margin-bottom:0.9rem}:host .period-content .date-input input{border:0.1rem solid var(--borderColor);box-sizing:border-box;border-radius:0.2rem}:host .pagination{display:flex;width:100%;justify-content:center;margin-top:1.5rem}:host .pagination button{cursor:pointer;border:none;background-color:var(--activeButtonBackground);color:#fff;opacity:0.5;padding:7px 12px}:host .pagination button:hover{opacity:1}:host .pagination button:focus{opacity:1}:host button.active{color:var(--activeButtonFont);background-color:var(--activeButtonBackground)}.mobile-filter-button{display:flex;justify-content:center;align-items:center;width:100%;height:2.8rem;background:inherit;border:1px solid var(--borderColorButton)}.mobile-filter-button img{height:50%;margin-right:0.5rem}.noData{display:flex;align-items:center;box-shadow:0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);padding:1.1rem;border-radius:0.6rem}.noData span{margin-left:0.5rem}.table{height:var(--heightScrollableContainer);overflow-y:auto}.table .mobile-table{height:100%}.data-transaction{border-bottom:1px solid var(--borderColor);background-color:var(--hoverBackground);padding:0 20px;display:grid;grid-template-columns:repeat(2, 1fr)}.data-transaction .text-style-status{font-weight:600}.data-transaction .text-style-status .success{color:var(--success)}.data-transaction .text-style-status .error{color:var(--errorColor)}.data-transaction .text-style{text-align:end}.data-transaction .date{font-size:12px;display:flex;align-items:center}.loader{display:inline-block;position:absolute;width:80px;height:80px;top:calc(50% - 40px);left:calc(50% - 40px);z-index:100}.loader::before{content:"";position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(255, 255, 255, 0.6)}.loader div{position:absolute;width:6px;height:6px;background:var(--loaderColor);border-radius:50%;animation:loader 1.2s linear infinite}.loader div:nth-child(1){animation-delay:0s;top:37px;left:66px}.loader div:nth-child(2){animation-delay:-0.1s;top:22px;left:62px}.loader div:nth-child(3){animation-delay:-0.2s;top:11px;left:52px}.loader div:nth-child(4){animation-delay:-0.3s;top:7px;left:37px}.loader div:nth-child(5){animation-delay:-0.4s;top:11px;left:22px}.loader div:nth-child(6){animation-delay:-0.5s;top:22px;left:11px}.loader div:nth-child(7){animation-delay:-0.6s;top:37px;left:7px}.loader div:nth-child(8){animation-delay:-0.7s;top:52px;left:11px}.loader div:nth-child(9){animation-delay:-0.8s;top:62px;left:22px}.loader div:nth-child(10){animation-delay:-0.9s;top:66px;left:37px}.loader div:nth-child(11){animation-delay:-1s;top:62px;left:52px}.loader div:nth-child(12){animation-delay:-1.1s;top:52px;left:62px}@keyframes loader{0%,20%,80%,100%{transform:scale(1)}50%{transform:scale(1.5)}}.table thead th{position:sticky;top:0}table{border-collapse:collapse;width:100%}table th{padding:14px 24px;text-align:left;font-weight:600;color:var(--textColor);background:var(--headerTableBackground)}table td{padding:1rem 1.7rem;box-shadow:0 -1px 0 0 var(--shadowBorderTable) inset;border-bottom:0.1rem solid var(--borderTable);text-align:left;color:var(--textColor)}table tbody{background:var(--backgroundTable)}table .success{color:var(--success)}table .error{color:var(--errorColor)}vaadin-date-picker{min-width:320px}@media (max-width: 1261px){vaadin-date-picker{width:auto;min-width:auto}}@media (max-width: 801px){vaadin-date-picker{width:100%}}', z = L, M = class {
+  constructor(t) {
+    y(this, t), this.pageSizes = [10, 25, 50], this.pagination = null, this.stylingAppended = !1, this.endpoint = void 0, this.session = void 0, this.language = n.defaultLanguage, this.userId = void 0, this.translationUrl = void 0, this.mobile = !1, this.clientStyling = null, this.clientStylingUrl = null, this.page = 0, this.pageSize = this.pageSizes[0], this.showMobileFilter = !1, this.to = void 0, this.from = void 0, this.type = "0", this.transactions = void 0, this.showLoader = !0;
+  }
+  watchMultiple() {
+    this.loadTransactions();
+  }
+  componentWillLoad() {
+    return d(this, null, function* () {
+      this.translationUrl && (yield n.loadCustomTranslations(this.translationUrl)), this.loadTransactions();
+    });
+  }
+  componentDidRender() {
+    this.getComponentHeight(), !this.stylingAppended && this.stylingContainer && (this.clientStyling && this.setStyles(this.clientStyling), this.clientStylingUrl && this.setClientStylingByURL(), this.stylingAppended = !0);
+  }
+  getComponentHeight() {
+    var t;
+    if (this.mobile) {
+      let a = this.el.getBoundingClientRect().height - ((t = this.el.shadowRoot.querySelector(".table")) === null || t === void 0 ? void 0 : t.getBoundingClientRect().y);
+      this.el.style.setProperty("--heightScrollableContainer", a + "px");
+    }
+  }
+  setHeightTableProperty() {
+    let t = this.getComponentHeight();
+    this.el.style.setProperty("--heightScrollableContainer", t + "px");
+  }
+  changeTransactionsType(t) {
+    this.type = t;
+  }
+  changePageSize(t) {
+    this.pageSize = t;
+  }
+  prev() {
+    var t;
+    !((t = this.pagination) === null || t === void 0) && t.previous && this.page--;
+  }
+  next() {
+    var t;
+    !((t = this.pagination) === null || t === void 0) && t.next && this.page++;
+  }
+  applyFilters(t, a) {
+    this.from = t ? new Date(t).toISOString() : null, this.to = a ? new Date(a).toISOString() : null, this.loadTransactions();
+  }
+  showFilter() {
+    this.showMobileFilter = !this.showMobileFilter;
+  }
+  render() {
+    var t;
+    const a = u("../assets/filter.svg"), i = u("../assets/warning.svg");
+    return e(v, { key: "c850ba36433277706247f4b7c0c08b0ae0fb8c76" }, this.showLoader ? e(C, null) : "", e("div", { key: "20b817b5c9cf14e8af0db2ba417d09e21b6921d7", class: "wrapper", ref: (o) => this.stylingContainer = o }, e("div", { key: "3943f4ab79cb0e72083821b424000f96779e78a5", class: { "types types-mobile": this.mobile, "types types-desktop": !this.mobile } }, e("button", { key: "d1f3dfc1f4fc7013bd81c92663f578129f63c0e7", class: "transaction-type " + (this.type === "0" ? "clicked" : ""), onClick: () => this.changeTransactionsType("0") }, n.translate("deposit", this.language)), e("button", { key: "46989070ef6703fdf7c8c7ac6628e9dce731fec6", class: "transaction-type " + (this.type === "1" ? "clicked" : ""), onClick: () => this.changeTransactionsType("1") }, n.translate("withdrawals", this.language))), this.mobile ? "" : e(B, { language: this.language, pageSizes: this.pageSizes, currentPageSize: this.pageSize, changePageSize: (o) => this.changePageSize(o) }), this.mobile ? e("button", { class: "mobile-filter-button", onClick: () => this.showFilter() }, e("img", { src: a, alt: "Filter" }), n.translate("filter", this.language)) : "", !this.mobile || this.showMobileFilter && this.mobile ? e(F, { language: this.language, applyFilters: (o, r) => this.applyFilters(o, r) }) : "", ((t = this.transactions) === null || t === void 0 ? void 0 : t.length) > 0 ? e("div", { class: "table" }, this.mobile ? e("div", { class: "mobile-table" }, this.transactions.map((o) => e(T, Object.assign({}, o)))) : e(D, { source: this.transactions, language: this.language })) : e("div", { class: "noData" }, e("img", { src: i, alt: "Warning" }), e("span", null, n.translate("noData", this.language))), e("div", { key: "50710657788295389a20d59e0092dd033e428268", class: "pagination" }, e("button", { key: "cd29c880eab413a06666dc12c8df38d3ffdcfe2f", onClick: () => this.prev() }, "<"), e("button", { key: "df351ecd4237433a8ab38766669ac48d2548ed6a", onClick: () => this.next() }, ">"))));
+  }
+  loadTransactions() {
+    return d(this, null, function* () {
+      this.showLoader = !0;
+      try {
+        const t = `${this.endpoint}/v1/player/${this.userId}/transactions/banking?${this.getParams()}`, a = yield fetch(t, {
+          headers: {
+            "X-Sessionid": this.session,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!a.ok) {
+          const o = yield a.text();
+          throw new Error(o);
+        }
+        const i = yield a.json();
+        this.pagination = i.pagination, this.transactions = i.transactions;
+      } catch (t) {
+        console.error(t);
+      } finally {
+        this.showLoader = !1;
+      }
+    });
+  }
+  getParams() {
+    var t, a;
+    const i = /* @__PURE__ */ new Date(), o = (this.page * this.pageSize).toString(), r = (t = this.from) !== null && t !== void 0 ? t : new Date(i.getFullYear(), i.getMonth(), 1).toISOString(), l = (a = this.to) !== null && a !== void 0 ? a : new Date(i.getFullYear(), i.getMonth() + 1, 0).toISOString();
+    return `offset=${o}&endDate=${l}&startDate=${r}&type=${this.type}&limit=${this.pageSize}`;
+  }
+  setStyles(t) {
+    const a = document.createElement("style");
+    a.innerHTML = t, this.stylingContainer.prepend(a);
+  }
+  setClientStylingByURL() {
+    return d(this, null, function* () {
+      try {
+        const t = yield fetch(this.clientStylingUrl);
+        if (!t.ok) {
+          const i = yield t.text();
+          throw new Error(i);
+        }
+        const a = yield t.text();
+        this.setStyles(a);
+      } catch (t) {
+        console.error(`Failed to load client styles ${this.clientStylingUrl}`, t);
+      }
+    });
+  }
+  static get assetsDirs() {
+    return ["../assets"];
+  }
+  get el() {
+    return x(this);
+  }
+  static get watchers() {
+    return {
+      page: ["watchMultiple"],
+      type: ["watchMultiple"],
+      session: ["watchMultiple"],
+      userId: ["watchMultiple"],
+      pageSize: ["watchMultiple"],
+      showMobileFilter: ["getComponentHeight"]
+    };
+  }
+};
+M.style = z;
+export {
+  M as user_transaction_history
+};