@justifi/webcomponents 4.22.2 → 4.23.0

package/dist/module/payments-list-core2.js

@@ -1,12 +1,12 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { a as formatDate, b as formatTime, c as formatCurrency } from './utils2.js';
-import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state.js';
-import { d as defineCustomElement$1, o as onFilterChange } from './table-filters-menu2.js';
+import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { o as onFilterChange } from './utils3.js';
 import { M as MapPaymentStatusToBadge } from './payments-status.js';
+import { j as convertToLocal, c as formatCurrency } from './utils2.js';
 import { d as defineCustomElement$9 } from './custom-popper2.js';
 import { d as defineCustomElement$8 } from './form-control-date2.js';
 import { d as defineCustomElement$7 } from './form-control-error-text2.js';
@@ -15,6 +15,29 @@ import { d as defineCustomElement$5 } from './form-control-text2.js';
 import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
 import { d as defineCustomElement$3 } from './pagination-menu2.js';
 import { d as defineCustomElement$2 } from './payments-list-filters2.js';
+import { d as defineCustomElement$1 } from './table-filters-menu2.js';
+
+const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
+const paymentTableColumns = {
+    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date and time each payment was made" }, "Date")),
+    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The dollar amount of each payment" }, "Amount")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The current status of each payment" }, "Status")),
+    payment_type: () => (h("th", { part: "table-head-cell", scope: "col", title: "The type of each payment" }, "Type")),
+    description: () => (h("th", { part: "table-head-cell", scope: "col", title: "The payment description, if you provided one" }, "Description")),
+    payers_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
+    last_four_digits: () => (h("th", { part: "table-head-cell", scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
+};
+const paymentTableCells = {
+    created_at: (value) => (h("td", { part: "table-cell" },
+        h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })),
+        h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
+    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value, true, true))),
+    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPaymentStatusToBadge(value) })),
+    payment_type: (value) => (h("td", { part: "table-cell" }, value)),
+    description: (value) => (h("td", { part: "table-cell" }, value)),
+    payers_name: (value) => (h("td", { part: "table-cell" }, value)),
+    last_four_digits: (value) => (h("td", { part: "table-cell" }, value))
+};
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
     constructor() {
@@ -43,19 +66,23 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
             this.params = onFilterChange(newParams, this.params);
         };
         this.clearParams = () => {
+            this.errorMessage = '';
             this.params = {};
         };
+        this.getPayments = undefined;
+        this.columns = undefined;
         this.payments = [];
+        this.paymentsTable = undefined;
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
         this.params = {};
-        this.getPayments = undefined;
     }
     updateOnPropChange() {
         this.fetchData();
     }
     componentWillLoad() {
+        this.paymentsTable = new Table(this.payments, this.columns, paymentTableColumns, paymentTableCells);
         if (this.getPayments) {
             this.fetchData();
         }
@@ -67,6 +94,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
             onSuccess: ({ payments, pagingInfo }) => {
                 this.payments = payments;
                 this.paging = pagingInfo;
+                this.paymentsTable.collectionData = this.payments;
                 this.loading = false;
             },
             onError: ({ error, code, severity }) => {
@@ -83,73 +111,36 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
     get entityId() {
         return this.payments.map((payment) => payment.id);
     }
-    get columnData() {
-        return [
-            ['Date', 'The date and time each payment was made'],
-            ['Amount', 'The dollar amount of each payment'],
-            ['Status', 'The current status of each payment'],
-            ['Type', 'The type of each payment'],
-            ['Description', 'The payment description, if you provided one'],
-            ['Account Holder', 'The name associated with the payment method'],
-            ['Payment Method', 'The brand and last 4 digits of the payment method'],
-        ];
-    }
-    get rowData() {
-        return this.payments.map((payment) => [
-            {
-                type: 'head',
-                value: `
-          <div class="fw-bold">${formatDate(payment.created_at)}</div>
-          <div class="fw-bold">${formatTime(payment.created_at)}</div>
-        `,
-            },
-            formatCurrency(payment.amount, true, true),
-            {
-                type: 'inner',
-                value: MapPaymentStatusToBadge(payment.status),
-            },
-            payment.paymentType,
-            payment.description,
-            payment.payment_method.payersName,
-            payment.payment_method.lastFourDigits,
-        ]);
-    }
     get showEmptyState() {
-        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+        return !this.loading && !this.errorMessage && this.paymentsTable.rowData.length < 1;
     }
     get showErrorState() {
         return !this.loading && !!this.errorMessage;
     }
     get showRowData() {
-        return !this.showEmptyState && !this.showErrorState;
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        var _a, _b;
-        return (h("div", { key: 'e51632f2cff6529131bf09250374f5609b8bbbd2' }, h("payments-list-filters", { key: '335944968281577a826fe2aa2a3866b282c6528c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ebff773b76f1a4b68a00675fa3499b8de71b1fe2', class: "table-wrapper" }, h("table", { key: '88e00cb3e4a98aa456b8bfb8d2d444d407aadb55', class: "table table-hover" }, h("thead", { key: '8c0bda771073274164ab4299bfdee85d70b0ccd8', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1d3774f8ecfa33cd68bd299d5d6f5f9364f557c4', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: '9ef8a6b5e19edf824ca91c58ce901a83b12e5d86', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '6f41adae546948d437b09c73611df813160be2d1', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd359e393f80cdf45d9746a5e4ee979079a11b870', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd2d81ee9b5abcf732972afa56e6e2abc3c7c2e98', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data.map((dataEntry) => {
-                let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
-                if (nestedHtml) {
-                    return h("td", { part: "table-cell", innerHTML: dataEntry.value });
-                }
-                else {
-                    return h("td", { part: "table-cell" }, dataEntry);
-                }
-            }))))), this.paging && (h("tfoot", { key: '556eb5c90bf12c3d1b577fc74911e3318a95b87c', class: "sticky-bottom" }, h("tr", { key: 'e69f4f7a9510131a737460568a2e398908315848', class: "table-light align-middle" }, h("td", { key: '518a89afe7e7aaf02857ef9e7f0bad0fc0220eeb', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '4510a747b96502d86615c90f8ba0d051b3f1cec8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: 'f9ad62dd7a3b3112af2b9d9ca3165a68730ad838' }, h("payments-list-filters", { key: '25453b8b93c43d6f9629688771bba820306cef5c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ec2b2799972ae5baeaed5c8f9547f1445295965b', class: "table-wrapper" }, h("table", { key: '323a3de363600940aecd8234b9d4e801bd0f0b70', class: "table table-hover" }, h("thead", { key: '9505ebb231fdb87c6be5a1e4313d8fee2afb1a0b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '995bd6b6f7ab40891cf4a9aa63cfb9adc92d596e', class: "table-light text-nowrap", part: "table-head-row" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'e85cd3ca47511afb2afdaf4cca9547b62d9ecb9e', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'a1f20762b14b9cf0f03f0b36ce6cdae8bdb8f3c9', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1e1e89ec8a2cbf6abe7d2183f5e1499374a9f33f', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'bfdd4bf25ab283f015cecf72603ea1d7f8921ee3', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: '0832e67b126a1cd7d8d936df635dc87023a683b0', class: "sticky-bottom" }, h("tr", { key: '2536f710f027d8fb0865c88b86a30111f012977e', class: "table-light align-middle" }, h("td", { key: '5f0c707ed1d855db83531297af9ace5d1212d35d', part: "pagination-bar", colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '01f751294ff54854be1434e15369153a5527414a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],
-        "getPayments": ["updateOnPropChange"]
+        "getPayments": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
     }; }
 }, [0, "payments-list-core", {
         "getPayments": [16],
+        "columns": [1],
         "payments": [32],
+        "paymentsTable": [32],
         "loading": [32],
         "errorMessage": [32],
         "paging": [32],
         "params": [32]
     }, undefined, {
         "params": ["updateOnPropChange"],
-        "getPayments": ["updateOnPropChange"]
+        "getPayments": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -211,4 +202,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { PaymentsListCore as P, defineCustomElement as d };
+export { PaymentsListCore as P, defaultColumnsKeys as a, defineCustomElement as d };

package/dist/module/payments-list-filters2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { l as lodash } from './lodash.js';
+import { k as convertToUTC, j as convertToLocal } from './utils2.js';
 import { d as defineCustomElement$7 } from './custom-popper2.js';
 import { d as defineCustomElement$6 } from './form-control-date2.js';
 import { d as defineCustomElement$5 } from './form-control-error-text2.js';
@@ -12,6 +13,10 @@ const PaymentsListFilters = /*@__PURE__*/ proxyCustomElement(class PaymentsListF
     constructor() {
         super();
         this.__registerHost();
+        this.handleDateInput = (name, value) => {
+            const utcDate = convertToUTC(value, { setExactTime: true });
+            this.setParamsOnChange(name, utcDate);
+        };
         this.params = {};
         this.setParamsOnChange = undefined;
         this.clearParams = undefined;
@@ -32,7 +37,7 @@ const PaymentsListFilters = /*@__PURE__*/ proxyCustomElement(class PaymentsListF
         ];
     }
     render() {
-        return (h("table-filters-menu", { key: 'a155feec339f48d77b25f4036bb185125bc0a7ce', params: this.params, clearParams: this.clearParams }, h("div", { key: '57c1528bdd86374dd2c780ae0d6b4850e7a96bcd', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'fc61d1e3c37cb3d5914b517e72ec569094c0cc8f', class: "p-2" }, h("form-control-text", { key: '7a81ebac31e074b3bd499c275d5ef68fd02d4910', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: '3926d05f92b0a16581f1dd66dcc1aee300d2bc98', class: "p-2" }, h("form-control-text", { key: '48b999c9543ca31146fb010d02074be69544fabc', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '64d87e35e59931fc76ab9f4e1a6c486f839b9fbb', class: "p-2" }, h("form-control-select", { key: 'a3fe39cd40dccb2143139a127e1d37ef669acf63', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: 'a522b9e4d8e9c4e3e3bf577deb4db56ffc13fc13', class: "p-2" }, h("form-control-date", { key: 'd2d277dc5f3bf4b80b4f09b60ed7f76bedaa46ab', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after, showTime: true, filterTimeZone: true })), h("div", { key: 'b6e15a8cfca24097432edd77fa339c09b72ce74c', class: "p-2" }, h("form-control-date", { key: '5c27469e525dba1111eaec6a8446bdacf34baee4', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before, showTime: true, filterTimeZone: true })))));
+        return (h("table-filters-menu", { key: '64b3b8cc77a08a6aa58c89b99248380bf8d9ad0f', params: this.params, clearParams: this.clearParams }, h("div", { key: 'ce5c017776a3b066d688ee25b9c7ef567df66695', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8cf5d22905c448b3ddb4496483e6b6788b0d19db', class: "p-2" }, h("form-control-text", { key: '7156ecff36896b91d5cd600488a0739ff8ed4d96', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: 'e04ca45af970a4d0e4725b8e7a0ba63ef7a5f5e9', class: "p-2" }, h("form-control-text", { key: '006191433fd479f95539dcdb2f2d6de3ac6d9828', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: 'fb5b1dfe7964ed7b95b349285e6df6bd0d83746b', class: "p-2" }, h("form-control-select", { key: '9832248a99214d5121f6420879fe596dbe3bd3e9', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: '138911f0f97f91910cda968208da26b3c9fd8303', class: "p-2" }, h("form-control-date", { key: 'd6a7a2ef2df3740af32edd6f454bbda154d5c3ef', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_after, { showInputDateTime: true }) || '', showTime: true })), h("div", { key: 'b4a808a46fd88c21e5e6f01381c1aaedc5ec9e39', class: "p-2" }, h("form-control-date", { key: 'a23eab0b41cb51786eaaecec6c91898ab70121ea', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.params.created_before, { showInputDateTime: true }) || '', showTime: true })))));
     }
 }, [0, "payments-list-filters", {
         "params": [16],

package/dist/module/payments-status.js

@@ -5,11 +5,11 @@ const MapPaymentStatusToBadge = (status) => {
         case 'authorized':
             return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
         case 'pending':
-            return "<span class='badge bg-primary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
+            return "<span class='badge bg-primary' title='This ACH payment was processed, but the funds have not settled. It could still succeed or fail.'>Pending</span>";
         case 'achFailed':
             return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
         case 'failed':
-            return "<span class='badge bg-danger' title='This card payment didn't go through (it won't appear in a payout)'>Failed</span>";
+            return "<span class='badge bg-danger' title='This card payment did not go through (it will not appear in a payout)'>Failed</span>";
         case 'canceled':
             return "<span class='badge bg-danger' title='This payment was canceled'>Canceled</span>";
         case 'disputed':

package/dist/module/payout-details-core2.js

@@ -58,7 +58,7 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '77668046c9b20d8e5fa2b1cf278925a8646052d7' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '975c61e183b809b42e96b1785a9c8c60ac397231', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '0258d3adf8c1f65c0f78446a3c5fa6c5a39fdde4', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: 'd845cd2abc1d82cc62ea7116a405570b235bcde0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '8ae3e1f22c0fb5fd76e1fdbecb91bc70be0ffe21', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '8d0405aa11c546ddc92b4e2e65c651a4aae2c82f', title: "ID", value: this.payout.id }), h("div", { key: 'a2b2b06a33009bb27c60aa0d2af74f0ec18db3d1', class: "m-4" }, h("button", { key: 'ae32f0567a4d4d533a322c20668b2a165fe71f4c', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '1519308f535b2f7dbc065f3320b60755c732f5e4', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b4da3442d6e86f9a4d6b2a8ffd6ed40053294151', sectionTitle: "Details" }), h("div", { key: '1a83acdafddfda491141cc68b70fbf2c9d4df69c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ac81d5cb6b185a4e40c5a27bd75113657a86d087', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '9b327577694e255d466a6009de0d39d67a144063', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '8ac6c81f11caa365e6b530bedeb26a7682199538', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '1cd8424c8299f8f334bd08e85cbe81018dfd69c3', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '44f6cbf82e5f79d8fa532923233d6a5eedeef19c', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'fc4366a767fd89ab25939d1d3cef9e2372c6b7ba', sectionTitle: "Account" }), h("div", { key: '7ea8ccb28ef7cb32490e82cf8470c88de6275fcb', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9e50c25012fe1873ef4bf8dd65d9aa1f0b2f6252', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'be19c35d8766716abe7a94a43ff1360fb2bc8caf', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f3ceaa15d8e8c8de8a4b57d431049b5f1f12b7aa', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '25468ae8b033172207f130448926eda8333df841', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'c5b60f0bfa2cfdc826cc54670ab66af199c8babc', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '78392b7f27b6ceb3499c512f2174e3d4b4058f63', sectionTitle: 'Metadata' }), h("div", { key: '43c5439322874b89612f37ec41e906fda030dd3b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2929f26c8b7932862cbb735bc8644eabd9494e14', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '5bbb9c0cacc3bf2efe7a1e935e586944578f735f' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '93b7b7abde3b10e4e4d79526b02b8db0713c8fc6', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ac86860de5b1861971b0a9b7e3b9c5d6240ccc2a', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '537d48671755958de63c4c5c9e8b9272bc507e6b', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cdac6a8d733ad1bd45b923f10350601b72b22e8f', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'a11a7d54baefaadd46be03d983f78754a3b4e7a2', title: "ID", value: this.payout.id }), h("div", { key: '71f41756d098d1863344f298549d32a3c0235e2c', class: "m-4" }, h("button", { key: '0bc57fc73b3e64da59e357d8882df4d9e1806af1', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'f1be7616f853affa6a32c1ce598c46efb34497cc', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b483ced9513bb46fe249ab50192663de025fa3f7', sectionTitle: "Details" }), h("div", { key: '510a10f8730d3b0afd2422d349f5ac656d1059e1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0564098e173c62fa3b73bcb112b3b1e516bcb094', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '91900371ae342a2ff8c79952786e5f0a999113da', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'c0a216b12b91c56d2b3c2c7b678c2bd893fefe02', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'afaafd44d645f458cd4299f9c8f504388ff1df53', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: 'dbe4a06db4e8736c520db79cc45a37637ed02962', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '605964367e17fdbbd72763c818ba4dd42043f96f', sectionTitle: "Account" }), h("div", { key: '662a14b06e2fca1c305b9c8cbc3e724589117602', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6b195d37ffb700b8ce2c7a095d196af52d92eb00', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '011fb64b10627221ef1495da127f929bc63dbab6', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '4130703cb2a6b567392819f997dd574a9e087df4', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '541d23f1645541e461280a0ddd449530df79aa76', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'b544a37bae800ce24bbf11cc9654ab6b4aabc0da', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '40d9206806dfba438fbf700b7767a03c449ee1a9', sectionTitle: 'Metadata' }), h("div", { key: '435aff888f41675e1a2bf8729fc1c859cafaa20b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1c9f32bf899914aa052375e4be2e8f92134da196', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]

package/dist/module/payouts-list-core2.js

@@ -3,20 +3,46 @@ import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { a as formatDate, b as formatTime, c as formatCurrency } from './utils2.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
-import { T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './table-loading-state.js';
+import { T as Table, a as TableLoadingState, b as TableEmptyState, c as TableErrorState } from './table.js';
+import { o as onFilterChange } from './utils3.js';
+import { j as convertToLocal, c as formatCurrency } from './utils2.js';
 import { M as MapPayoutStatusToBadge } from './payouts-status.js';
-import { d as defineCustomElement$5 } from './custom-popper2.js';
-import { d as defineCustomElement$4 } from './form-control-date2.js';
-import { d as defineCustomElement$3 } from './form-control-error-text2.js';
-import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$1 } from './pagination-menu2.js';
+import { d as defineCustomElement$7 } from './custom-popper2.js';
+import { d as defineCustomElement$6 } from './form-control-date2.js';
+import { d as defineCustomElement$5 } from './form-control-error-text2.js';
+import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$3 } from './pagination-menu2.js';
+import { d as defineCustomElement$2 } from './payouts-list-filters2.js';
+import { d as defineCustomElement$1 } from './table-filters-menu2.js';
 
-const DownloadIcon = (props) => (h("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, props),
-    h("path", { d: 'M12 15.5l-5-5 1.41-1.41L12 12.67l3.59-3.58L17 10.5l-5 5z' }),
-    h("path", { d: 'M11 4h2v9h-2z' }),
-    h("path", { d: 'M5 18h14v2H5z' })));
+const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
+const payoutTableColumns = {
+    created_at: () => (h("th", { part: "table-head-cell", scope: "col", title: "The date the payout was deposited" }, "Created")),
+    sub_account_name: () => (h("th", { part: "table-head-cell", scope: "col", title: "The sub account associated with the payout" }, "Sub Account")),
+    payments_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total payments amount associated with the payout" }, "Payments")),
+    refunds_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total refunds amount associated with the payout" }, "Refunds")),
+    fees_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total fees amount associated with the payout" }, "Fees")),
+    other_total: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total other amount" }, "Other")),
+    amount: () => (h("th", { part: "table-head-cell", scope: "col", title: "The total amount of the payout" }, "Amount")),
+    status: () => (h("th", { part: "table-head-cell", scope: "col", title: "The real-time status of each payout" }, "Status")),
+    csv: () => (h("th", { part: "table-head-cell", scope: "col", title: "Export CSV" })),
+};
+const payoutTableCells = (downloadCSV) => ({
+    created_at: (value) => (h("td", { part: "table-cell" },
+        h("div", { class: "fw-bold" },
+            convertToLocal(value, { showDisplayDate: true }),
+            " "))),
+    sub_account_name: (value) => (h("td", { part: "table-cell" }, value)),
+    payments_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
+    refunds_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
+    fees_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
+    other_total: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
+    amount: (value) => (h("td", { part: "table-cell" }, formatCurrency(value))),
+    status: (value) => (h("td", { part: "table-cell", innerHTML: MapPayoutStatusToBadge(value) })),
+    csv: (value) => (h("td", { part: "table-cell" },
+        h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
+});
 
 const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore extends HTMLElement {
     constructor() {
@@ -36,9 +62,6 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
                 },
             });
         };
-        this.handleDateChange = (name, value) => {
-            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
-        };
         this.handleClickPrevious = (beforeCursor) => {
             const newParams = Object.assign({}, this.params);
             delete newParams.after_cursor;
@@ -55,29 +78,72 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
                 return;
             this.rowClicked.emit(this.payouts.find((payout) => payout.id === clickedPayoutID));
         };
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.errorMessage = '';
+            this.params = {};
+        };
         this.getPayouts = undefined;
+        this.getSubAccounts = undefined;
         this.getPayoutCSV = undefined;
+        this.columns = undefined;
         this.payouts = [];
+        this.payoutsTable = undefined;
+        this.subAccounts = [];
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = undefined;
+        this.params = {};
     }
     updateOnPropChange() {
-        this.fetchData();
+        this.fetchPayouts();
     }
     componentWillLoad() {
-        if (this.getPayouts) {
-            this.fetchData();
+        this.payoutsTable = new Table(this.payouts, this.columns, payoutTableColumns, payoutTableCells(this.downloadCSV));
+        if (this.getPayouts && this.getSubAccounts) {
+            this.fetchPayouts();
         }
     }
-    fetchData() {
+    fetchPayouts() {
         this.loading = true;
         this.getPayouts({
             params: this.params,
             onSuccess: ({ payouts, pagingInfo }) => {
                 this.payouts = payouts;
                 this.paging = pagingInfo;
+                this.payoutsTable.collectionData = this.payouts;
+                const shouldFetchSubAccounts = this.payoutsTable.columnKeys.includes('sub_account_name');
+                if (shouldFetchSubAccounts) {
+                    this.fetchSubAccounts();
+                }
+                else {
+                    this.loading = false;
+                }
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    async fetchSubAccounts() {
+        this.getSubAccounts({
+            params: this.subAccountParams,
+            onSuccess: ({ subAccounts }) => {
+                this.subAccounts = subAccounts;
+                this.payouts = this.payouts.map((payout) => {
+                    var _a;
+                    payout.sub_account_name = (_a = this.subAccounts.find((subAccount) => subAccount.id === payout.account_id)) === null || _a === void 0 ? void 0 : _a.name;
+                    return payout;
+                });
                 this.loading = false;
             },
             onError: ({ error, code, severity }) => {
@@ -91,79 +157,54 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
             },
         });
     }
+    get subAccountParams() {
+        let accountIdNumbers = this.payouts.map((payout) => payout.account_id);
+        let uniqueAccountIds = [...new Set(accountIdNumbers)];
+        let accountIdString = uniqueAccountIds.join(',');
+        return { sub_account_id: accountIdString };
+    }
     get entityId() {
         return this.payouts.map((payout) => payout.id);
     }
-    get columnData() {
-        return [
-            ['Paid Out On', 'The date each transaction occurred'],
-            ['Type', 'The type of each transaction'],
-            ['Account', 'The ID of the account associated with each payout'],
-            ['Paid Out To', 'The bank account to which each payout was transferred'],
-            ['Payments', 'Sum of payments in each payout'],
-            ['Refunds', 'Sum of refunds in each payout'],
-            ['Fees', 'Sum of fees in each payout'],
-            ['Other', 'Sum of less common transactions in each payout'],
-            ['Payout Amount', 'The net sum of all transactions in each payout'],
-            ['Status', 'The real-time status of each payout'],
-            ['Actions', ''],
-        ];
-    }
-    get rowData() {
-        return this.payouts.map((payout) => [
-            {
-                type: 'head',
-                value: `
-          <div class='fw-bold'>${formatDate(payout.created_at)}</div>
-          <div class='fw-bold'>${formatTime(payout.created_at)}</div>
-        `,
-            },
-            payout.payout_type,
-            payout.account_id,
-            `${payout.bank_account.full_name} ${payout.bank_account.account_number_last4}`,
-            formatCurrency(payout.payments_total),
-            formatCurrency(payout.refunds_total),
-            formatCurrency(payout.fees_total),
-            formatCurrency(payout.other_total),
-            formatCurrency(payout.amount),
-            { type: 'inner', value: MapPayoutStatusToBadge(payout.status) },
-            (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
-        ]);
-    }
     get showEmptyState() {
-        return !this.loading && !this.errorMessage && this.rowData.length < 1;
+        return !this.loading && !this.errorMessage && this.payoutsTable.rowData.length < 1;
     }
     get showErrorState() {
         return !this.loading && !!this.errorMessage;
     }
     get showRowData() {
-        return !this.showEmptyState && !this.showErrorState;
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '536d8a921bb7b6517dc65afd307507668e74e92f' }, h("div", { key: '5d33c651af05927db51e7d855772ff1c60f71ef0', class: "row gy-3 mb-4" }, h("div", { key: '53f246db4d96ef4ac445c0b57d4da3471c9fdbdb', class: "col-2" }, h("form-control-date", { key: 'd6e711e3e92e53cff8e2ee4a8c4a3788584c0f77', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '86ab746d1e7f9e11dfeca4cd185909d9d447fe85', class: "col-2" }, h("form-control-date", { key: '232edbf8284d14ed3659a199b144eb5596e22b88', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '10c720e38bd24ff9431d59a28ec46f62bd8c04a7', class: "table-wrapper" }, h("table", { key: 'fdbf0978c018315d5e67caf9273e59bf4e50205c', class: "table table-hover" }, h("thead", { key: 'f3fc1532a46f8b92eff8d385462fe8ba9448840b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'fe552206bf026258b40031c10a030fb32f98879d', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '1247efd4d95cfb257d052acf9dbcac84203aaaaf', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '1107d1a965651133504db486d4d0b692fe9735e9', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '8435806053ae9d16a05cc031f33d3b97e4d02248', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '01213ac9d7f63e0eaa11c38f4aebe59aef3650d9', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: 'd2a1b0dd2340cf64816ad05c1c03f136b21df0a6', class: "sticky-bottom" }, h("tr", { key: 'abb87b7c026475da175a6bec772887bf3ac08933', class: "table-light align-middle" }, h("td", { key: '32070f512aebc77a42693a93e717d31ef9ed4509', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '57ee656553f4afee96f5dbdac5866f103cde97eb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '3768192e14155536f0fb53d2abc5f1e92b04cc01' }, h("payouts-list-filters", { key: '3fec8cfc6b9d68798148e9eea0725079d32e3406', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '291b7a53bb5657c87568169ebccc1dead39d10c9', class: "table-wrapper" }, h("table", { key: '624389fddf8b00dcaf70a75693b542b2f4af4982', class: "table table-hover" }, h("thead", { key: '1e28a2a6988eac106c40b8f029d9fa2118cbdb6d', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1f05dd4c54fb350545cf6b1b3e86b80d96932585', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '3af09dc61461f31f61c2cfdf7896b7dfe9441450', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '715a3d0732e45810bdfdcbe5c7db8f29934a1a62', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '3aac2554828eac0c6b0645da5df811b5e5463235', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'cf2b312830b9f59550346085f00bc519e496b2b2', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data)))), this.paging && (h("tfoot", { key: '3d7389fb825a7eafcd456b3ae95b115a4218fea3', class: "sticky-bottom" }, h("tr", { key: '4c10aa64144a281d8303b04f013bfcc2390f4d04', class: "table-light align-middle" }, h("td", { key: '63614e636203a5f15beb26b4d19eed393b6ea481', part: "pagination-bar", colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '7708ac8b21d2db0ec9ade773dd46cd944374ede5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],
-        "getPayouts": ["updateOnPropChange"]
+        "getPayouts": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"]
     }; }
 }, [0, "payouts-list-core", {
         "getPayouts": [16],
+        "getSubAccounts": [16],
         "getPayoutCSV": [16],
+        "columns": [1],
         "payouts": [32],
+        "payoutsTable": [32],
+        "subAccounts": [32],
         "loading": [32],
         "errorMessage": [32],
         "paging": [32],
         "params": [32]
     }, undefined, {
         "params": ["updateOnPropChange"],
-        "getPayouts": ["updateOnPropChange"]
+        "getPayouts": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payouts-list-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-tooltip", "pagination-menu"];
+    const components = ["payouts-list-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-tooltip", "pagination-menu", "payouts-list-filters", "table-filters-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "payouts-list-core":
             if (!customElements.get(tagName)) {
@@ -172,25 +213,35 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$6();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$5();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$4();
             }
             break;
         case "pagination-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "payouts-list-filters":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "table-filters-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -199,4 +250,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { PayoutsListCore as P, defineCustomElement as d };
+export { PayoutsListCore as P, defaultColumnsKeys as a, defineCustomElement as d };

package/dist/module/payouts-list-filters.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PayoutsListFilters extends Components.PayoutsListFilters, HTMLElement {}
+export const PayoutsListFilters: {
+    prototype: PayoutsListFilters;
+    new (): PayoutsListFilters;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/payouts-list-filters.js

@@ -0,0 +1,6 @@
+import { P as PayoutsListFilters$1, d as defineCustomElement$1 } from './payouts-list-filters2.js';
+
+const PayoutsListFilters = PayoutsListFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PayoutsListFilters, defineCustomElement };