@everymatrix/user-transaction-history 1.68.0 → 1.69.0

package/dist/cjs/user-transaction-history.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["user-transaction-history.cjs",[[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"],"mbSource":[513,"mb-source"],"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"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"showMobileFilter":["getComponentHeight"]}]]]], options);
+  return index.bootstrapLazy([["user-transaction-history.cjs",[[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"],"mbSource":[513,"mb-source"],"dateFormat":[513,"date-format"],"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"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"showMobileFilter":["getComponentHeight"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/internal/table.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { CurrencyFormatter } from "../../utils/currency.utils";
 import { DateTransformer } from "../../utils/date.util";
 import { Localization } from "../../utils/locale.util";
-export const TableComponent = ({ source, language }) => {
+export const TableComponent = ({ source, language, dateformat }) => {
     const columns = [
         { name: Localization.translate('transactionId', language) },
         {
@@ -16,5 +16,5 @@ export const TableComponent = ({ source, language }) => {
             name: Localization.translate('status', language),
         },
     ];
-    return (h("table", null, h("thead", null, h("tr", null, columns.map(column => h("th", null, column.name)))), h("tbody", null, source.map(transaction => h("tr", null, h("td", null, transaction.transId), h("td", null, DateTransformer.dateToFormatedString(new Date(transaction.created))), h("td", null, CurrencyFormatter.format(transaction.currency, transaction.realAmount), " "), h("td", null, transaction.productType), h("td", null, h("span", { class: transaction.status.toLowerCase() }, transaction.status)))))));
+    return (h("table", null, h("thead", null, h("tr", null, columns.map(column => h("th", null, column.name)))), h("tbody", null, source.map(transaction => h("tr", null, h("td", null, transaction.transId), h("td", null, DateTransformer.dateToFormatedString(new Date(transaction.created), dateformat)), h("td", null, CurrencyFormatter.format(transaction.currency, transaction.realAmount), " "), h("td", null, transaction.productType), h("td", null, h("span", { class: transaction.status.toLowerCase() }, transaction.status)))))));
 };

package/dist/collection/components/internal/transaction.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 import { DateTransformer } from "../../utils/date.util";
 import { CurrencyFormatter } from "../../utils/currency.utils";
-export const TransactionComponent = (transaction) => (h("div", { class: "data-transaction" }, h("p", null, transaction.productType), h("p", { class: "text-style text-style-status" }, h("span", { class: transaction.status.toLowerCase() }, transaction.status)), h("p", { class: "date" }, transaction.transId, " | ", DateTransformer.dateToFormatedString(new Date(transaction.created))), h("p", { class: "text-style" }, CurrencyFormatter.format(transaction.currency, transaction.realAmount), " ")));
+export const TransactionComponent = (transaction) => (h("div", { class: "data-transaction" }, h("p", null, transaction.productType), h("p", { class: "text-style text-style-status" }, h("span", { class: transaction.status.toLowerCase() }, transaction.status)), h("p", { class: "date" }, transaction.transId, " | ", DateTransformer.dateToFormatedString(new Date(transaction.created), transaction.dateformat)), h("p", { class: "text-style" }, CurrencyFormatter.format(transaction.currency, transaction.realAmount), " ")));

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

@@ -19,6 +19,7 @@ export class UserTransactionHistory {
         this.clientStyling = null;
         this.clientStylingUrl = null;
         this.mbSource = undefined;
+        this.dateFormat = '';
         this.page = 0;
         this.pageSize = this.pageSizes[0];
         this.showMobileFilter = false;
@@ -110,7 +111,7 @@ export class UserTransactionHistory {
         var _a;
         const filterSrc = getAssetPath('../assets/filter.svg');
         const warningSrc = getAssetPath('../assets/warning.svg');
-        return (h(Host, { key: '8d6470d73afff5dbc8a8c3a1a47426223971ad47' }, this.showLoader ? h(Loader, null) : '', h("div", { key: '8c32d9425b701747559ea1e63a3b2c4bb31780ab', class: "wrapper", ref: el => (this.stylingContainer = el) }, h("div", { key: 'b2a9216bfcfa5950c174f6e06a179e2ae3790f6b', class: { 'types types-mobile': this.mobile, 'types types-desktop': !this.mobile } }, h("button", { key: 'e2ce33fe2ab27abab68bd721b8b945bde5d672ac', class: 'transaction-type' + ' ' + (this.type === '0' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('0') }, Localization.translate('deposit', this.language)), h("button", { key: '6d80bef56bf4ec590cc2e4aa704f930a47b29f3c', 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: '14b4d34c0e1d258ea0547b4aa43766199a629526', class: "pagination" }, h("button", { key: 'fdd2a70e6dacf863c0783ab8dce80951294f04cc', onClick: () => this.prev() }, '<'), h("button", { key: '3bdc96262e16573e24ba07362e80ea779d30da9f', onClick: () => this.next() }, '>')))));
+        return (h(Host, { key: '7346a5fe57d7bc3df7b3eb88f1a175b1bb4fed10' }, this.showLoader ? h(Loader, null) : '', h("div", { key: 'f58cb9c38d88702255a3f63731c152f79cc7c071', class: "wrapper", ref: el => (this.stylingContainer = el) }, h("div", { key: 'ff79d6a34f9e4615fecd81f12cec228e567317b3', class: { 'types types-mobile': this.mobile, 'types types-desktop': !this.mobile } }, h("button", { key: '6c89c781087a854edb143e84fd684b72a6a5f8c1', class: 'transaction-type' + ' ' + (this.type === '0' ? 'clicked' : ''), onClick: () => this.changeTransactionsType('0') }, Localization.translate('deposit', this.language)), h("button", { key: '15d1f9c89a1ffdfcbc0d8e5ebf375bcd2129e2aa', 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, { dateformat: this.dateFormat })))))) : (h(TableComponent, { source: this.transactions, language: this.language, dateformat: this.dateFormat })))) : (h("div", { class: "noData" }, h("img", { src: warningSrc, alt: "Warning" }), h("span", null, Localization.translate('noData', this.language)))), h("div", { key: '5a0b142e2a02e0a24263a6b66ad36762c3934712', class: "pagination" }, h("button", { key: '2dcc9efdc61ed362e4845da8088bd5de458bab0f', onClick: () => this.prev() }, '<'), h("button", { key: 'acd4dfb619f6220bcbc9da932c6accf0e34c7df0', onClick: () => this.next() }, '>')))));
     }
     async loadTransactions() {
         this.showLoader = true;
@@ -316,6 +317,24 @@ export class UserTransactionHistory {
                 },
                 "attribute": "mb-source",
                 "reflect": true
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "date-format",
+                "reflect": true,
+                "defaultValue": "''"
             }
         };
     }

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

@@ -1,7 +1,8 @@
+import dateFnsFormat from "date-fns/format";
 export class DateTransformer {
     constructor() { }
-    static dateToFormatedString(date) {
-        const dateStr = date.toLocaleDateString('en-gb');
+    static dateToFormatedString(date, dateformat) {
+        const dateStr = dateformat ? dateFnsFormat(date, dateformat) : date.toLocaleDateString('en-gb');
         const timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
         return `${dateStr}, ${timeStr}`;
     }

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["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"],"mbSource":[513,"mb-source"],"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"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"showMobileFilter":["getComponentHeight"]}]]]], options);
+  return bootstrapLazy([["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"],"mbSource":[513,"mb-source"],"dateFormat":[513,"date-format"],"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"],"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingUrlChange"],"showMobileFilter":["getComponentHeight"]}]]]], options);
 };
 
 export { defineCustomElements };