@justifi/webcomponents 4.22.2 → 4.23.1

package/dist/collection/components/payments-list/payments-list-core.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
-import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { onFilterChange } from "../../ui-components/filters/utils";
-import { MapPaymentStatusToBadge } from "./payments-status";
+import { paymentTableCells, paymentTableColumns } from "./payments-table";
+import { Table } from "../../utils/table";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -27,19 +27,23 @@ export 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();
         }
@@ -51,6 +55,7 @@ export class PaymentsListCore {
             onSuccess: ({ payments, pagingInfo }) => {
                 this.payments = payments;
                 this.paging = pagingInfo;
+                this.paymentsTable.collectionData = this.payments;
                 this.loading = false;
             },
             onError: ({ error, code, severity }) => {
@@ -67,58 +72,17 @@ export 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 is() { return "payments-list-core"; }
     static get properties() {
@@ -142,12 +106,30 @@ export class PaymentsListCore {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "payments": {},
+            "paymentsTable": {},
             "loading": {},
             "errorMessage": {},
             "paging": {},
@@ -206,6 +188,9 @@ export class PaymentsListCore {
             }, {
                 "propName": "getPayments",
                 "methodName": "updateOnPropChange"
+            }, {
+                "propName": "columns",
+                "methodName": "updateOnPropChange"
             }];
     }
 }

package/dist/collection/components/payments-list/payments-list-filters.js

@@ -1,7 +1,12 @@
 import { h } from "@stencil/core";
 import { debounce } from "lodash";
+import { convertToLocal, convertToUTC } from "../../utils/utils";
 export class PaymentsListFilters {
     constructor() {
+        this.handleDateInput = (name, value) => {
+            const utcDate = convertToUTC(value, { setExactTime: true });
+            this.setParamsOnChange(name, utcDate);
+        };
         this.params = {};
         this.setParamsOnChange = undefined;
         this.clearParams = undefined;
@@ -22,7 +27,7 @@ export class PaymentsListFilters {
         ];
     }
     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 })))));
     }
     static get is() { return "payments-list-filters"; }
     static get properties() {

package/dist/collection/components/payments-list/payments-list.js

@@ -5,8 +5,8 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/Component
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { config } from "../../../config";
-import { StyledHost } from "../../ui-components/styled-host/styled-host";
-import { tableExportedParts } from "../../ui-components/table/exported-parts";
+import { StyledHost, tableExportedParts } from "../../ui-components";
+import { defaultColumnsKeys } from "./payments-table";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -40,6 +40,7 @@ export class PaymentsList {
         this.accountId = undefined;
         this.authToken = undefined;
         this.apiOrigin = config.proxyApiOrigin;
+        this.columns = defaultColumnsKeys;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -71,7 +72,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'a1c35cabf7026d694df44351b0879839a21376b8', exportparts: tableExportedParts }, h("payments-list-core", { key: 'c07919c4982f04122d5e4b2a6bdb4e506f7384e5', getPayments: this.getPayments, "onError-event": this.handleErrorEvent })));
+        return (h(StyledHost, { key: '78b8e22426135db19223ca0ddc62aaf6f42a1080', exportparts: tableExportedParts }, h("payments-list-core", { key: '23c5aeeb9a6766de2ddb42f62a2163fa8f14ac81', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }
@@ -128,6 +129,24 @@ export class PaymentsList {
                 "attribute": "api-origin",
                 "reflect": false,
                 "defaultValue": "config.proxyApiOrigin"
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
             }
         };
     }

package/dist/collection/components/payments-list/payments-status.js

@@ -5,11 +5,11 @@ export 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/collection/components/payments-list/payments-table.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { MapPaymentStatusToBadge } from "./payments-status";
+import { formatCurrency, convertToLocal } from "../../utils/utils";
+export const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
+export 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")),
+};
+export 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))
+};

package/dist/collection/components/payout-details/payout-details-core.js

@@ -53,7 +53,7 @@ export class PayoutDetailsCore {
     }
     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 is() { return "payout-details-core"; }
     static get properties() {

package/dist/collection/components/payouts-list/get-payouts.js

@@ -1,10 +1,10 @@
 import { Payout } from "../../api";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { getErrorCode, getErrorMessage } from "../../api/services/utils";
-export const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
+export const makeGetPayouts = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
     try {
-        const response = await service.fetchPayouts(id, authToken, params);
+        const response = await service.fetchPayouts(id, authToken, params, apiOrigin);
         if (!response.error) {
             const pagingInfo = Object.assign({}, response.page_info);
             const payouts = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Payout(dataItem))) || [];
@@ -21,10 +21,9 @@ export const makeGetPayouts = ({ id, authToken, service }) => async ({ params, o
         }
     }
     catch (error) {
-        const message = getErrorMessage(error);
         const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
         return onError({
-            error: message,
+            error: error.message || error,
             code,
             severity: ComponentErrorSeverity.ERROR,
         });

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
-import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
-import { DownloadIcon } from "../../assets/download-icon";
 import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
-import { MapPayoutStatusToBadge } from "./payouts-status";
+import { onFilterChange } from "../../ui-components/filters/utils";
+import { payoutTableCells, payoutTableColumns } from "./payouts-table";
+import { Table } from "../../utils/table";
 export class PayoutsListCore {
     constructor() {
         this.downloadCSV = (payoutId) => {
@@ -19,9 +19,6 @@ export class PayoutsListCore {
                 },
             });
         };
-        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;
@@ -38,29 +35,72 @@ export class PayoutsListCore {
                 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 }) => {
@@ -74,57 +114,26 @@ export class PayoutsListCore {
             },
         });
     }
+    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 is() { return "payouts-list-core"; }
     static get properties() {
@@ -149,6 +158,26 @@ export class PayoutsListCore {
                     "text": ""
                 }
             },
+            "getSubAccounts": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Function",
+                    "resolved": "Function",
+                    "references": {
+                        "Function": {
+                            "location": "global",
+                            "id": "global::Function"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
             "getPayoutCSV": {
                 "type": "unknown",
                 "mutable": false,
@@ -168,12 +197,31 @@ export class PayoutsListCore {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "columns",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "payouts": {},
+            "payoutsTable": {},
+            "subAccounts": {},
             "loading": {},
             "errorMessage": {},
             "paging": {},
@@ -232,6 +280,9 @@ export class PayoutsListCore {
             }, {
                 "propName": "getPayouts",
                 "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getSubAccounts",
+                "methodName": "updateOnPropChange"
             }];
     }
 }